From cecbbf70fe750261439a379d227bea9d0bbe3124 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 13 Oct 2026 21:40:24 +0000
Subject: [PATCH 1/7] impl(web): media_list.organization and
 media_list.filmstrip.rows settings

Replaces the unused media_view.filmstrip config (still accepted and discarded so
existing generated configs keep parsing). Adds footer controls to toggle tiles vs
filmstrip and pick the filmstrip row count at runtime.

Co-authored-by: kaisea.rpi <kaisea.rpi@gmail.com>
---
 .../web/src/lib/runes/settings_rune.svelte.ts | 19 +++++++++
 packages/web/src/lib/server/config.ts         | 39 +++++++++++++-----
 .../routes/browse/components/Footer.svelte    | 41 ++++++++++++++++++-
 3 files changed, 86 insertions(+), 13 deletions(-)

diff --git a/packages/web/src/lib/runes/settings_rune.svelte.ts b/packages/web/src/lib/runes/settings_rune.svelte.ts
index ffa75c32..bc5ddb98 100644
--- a/packages/web/src/lib/runes/settings_rune.svelte.ts
+++ b/packages/web/src/lib/runes/settings_rune.svelte.ts
@@ -5,6 +5,8 @@ import type { BaseController } from '$lib/base_controller.ts'
 interface MutatableSettings {
   'ui.media_list.thumbnail_size': Config['web']['ui_defaults']['media_list']['thumbnail_size']
   'ui.media_list.thumbnail_shape': Config['web']['ui_defaults']['media_list']['thumbnail_shape']
+  'ui.media_list.organization': Config['web']['ui_defaults']['media_list']['organization']
+  'ui.media_list.filmstrip.rows': Config['web']['ui_defaults']['media_list']['filmstrip']['rows']
   'ui.media_view.fit.mode': Config['web']['ui_defaults']['media_view']['fit']['mode']
   'ui.search.advanced_filters.hide': Config['web']['ui_defaults']['search']['advanced_filters']['hide']
   'ui.sidebar.hide': Config['web']['ui_defaults']['sidebar']['hide']
@@ -36,6 +38,17 @@ export class SettingsRune extends Rune {
         this.ui.media_list.thumbnail_shape = value
         break
       }
+      case 'ui.media_list.organization': {
+        this.ui.media_list.organization = value
+        break
+      }
+      case 'ui.media_list.filmstrip.rows': {
+        if (!Number.isInteger(value) || value < 1) {
+          throw new Error(`Unexpected value '${value}' for path '${path}'`)
+        }
+        this.ui.media_list.filmstrip.rows = value
+        break
+      }
       case 'ui.media_view.fit.mode': {
         this.ui.media_view.fit.mode = value
         break
@@ -70,6 +83,12 @@ export class SettingsRune extends Rune {
       case 'ui.media_list.thumbnail_shape': {
         return this.ui.media_list.thumbnail_shape
       }
+      case 'ui.media_list.organization': {
+        return this.ui.media_list.organization
+      }
+      case 'ui.media_list.filmstrip.rows': {
+        return this.ui.media_list.filmstrip.rows
+      }
       case 'ui.search.advanced_filters.hide': {
         return this.ui.search.advanced_filters.hide
       }
diff --git a/packages/web/src/lib/server/config.ts b/packages/web/src/lib/server/config.ts
index a41dd73c..0ffcc037 100644
--- a/packages/web/src/lib/server/config.ts
+++ b/packages/web/src/lib/server/config.ts
@@ -38,7 +38,11 @@ export const PackagesConfig = z.object({
 
       media_list: z.object({
         thumbnail_size: z.number().default(110),
-        thumbnail_shape: z.enum(['square', 'original']).prefault('original')
+        thumbnail_shape: z.enum(['square', 'original']).prefault('original'),
+        organization: z.enum(['tiles', 'filmstrip']).default('tiles'),
+        filmstrip: z.object({
+          rows: z.number().int().min(1).default(1),
+        }).strict().prefault({}),
       }).strict().prefault({}),
 
       sidebar: z.object({
@@ -51,16 +55,20 @@ export const PackagesConfig = z.object({
         }).strict().prefault({}),
       }).strict().prefault({}),
 
-      media_view: z.object({
-        fit: z.object({
-          mode: z.enum(['original', 'fill']).default('original'),
-          edge: z.enum(['width', 'height']).default('height'),
-        }).strict().prefault({}),
-        filmstrip: z.object({
-          enabled: z.boolean().default(false),
-            thumbnail_size: z.number().default(100),
-        }).strict().optional().transform(f => f ?? {enabled: false})
-      }).strict().prefault({}),
+      media_view: z.preprocess(
+        // `media_view.filmstrip` was removed but `forager init` wrote it into existing config files, so it is discarded rather than rejected
+        media_view => {
+          if (media_view === null || typeof media_view !== 'object' || !('filmstrip' in media_view)) return media_view
+          const { filmstrip: _legacy_filmstrip, ...rest } = media_view
+          return rest
+        },
+        z.object({
+          fit: z.object({
+            mode: z.enum(['original', 'fill']).default('original'),
+            edge: z.enum(['width', 'height']).default('height'),
+          }).strict().prefault({}),
+        }).strict(),
+      ).prefault({}),
     }).strict().prefault({}),
 
     shortcuts: z.object({
@@ -85,6 +93,15 @@ export const PackagesConfig = z.object({
       ToggleVideoMute: Keybind('KeyM'),
       ToggleMediaControls: Keybind('Ctrl-C'),
 
+      FilmstripNextItem: Keybind('ArrowRight'),
+      FilmstripPrevItem: Keybind('ArrowLeft'),
+      FilmstripNextPage: Keybind('PageDown'),
+      FilmstripPrevPage: Keybind('PageUp'),
+      FilmstripEnd: Keybind('Ctrl-ArrowRight'),
+      FilmstripStart: Keybind('Ctrl-ArrowLeft'),
+      NextFilmstrip: Keybind('Ctrl-PageDown'),
+      PrevFilmstrip: Keybind('Ctrl-PageUp'),
+
       Search: Keybind('Slash'),
       AddTag: Keybind('Ctrl-M'),
 
diff --git a/packages/web/src/routes/browse/components/Footer.svelte b/packages/web/src/routes/browse/components/Footer.svelte
index a8a63399..9e97ec38 100644
--- a/packages/web/src/routes/browse/components/Footer.svelte
+++ b/packages/web/src/routes/browse/components/Footer.svelte
@@ -4,6 +4,13 @@
 
   let {controller, height = $bindable()}: {controller: BrowseController, height: number} = $props()
 
+  const MAX_FILMSTRIP_ROW_OPTION = 6
+  // the configured row count is always selectable, even if it is above the default options
+  const filmstrip_row_options = $derived(Array.from(
+    {length: Math.max(MAX_FILMSTRIP_ROW_OPTION, controller.runes.settings.ui.media_list.filmstrip.rows)},
+    (_, index) => index + 1
+  ))
+
 
   function human_readable_number(n: number) {
     const number_string = n.toString()
@@ -54,7 +61,7 @@
   bind:clientHeight={height}
 >
 
-  <div class="grid grid-cols-[1fr_auto_auto_auto] gap-4 justify-between">
+  <div class="grid grid-cols-[1fr_auto_auto_auto_auto] gap-4 justify-between">
     <div class="w-full grid grid-cols-[auto_1fr_auto] gap-4 items-center" style="--slider-thumb-color: {theme.colors.green[300]}; --slider-thumb-color-hover: {theme.colors.green[500]}">
       <label for="thumbnail-size">Thumbnail Size</label>
       <input
@@ -70,8 +77,38 @@
       <span>{controller.runes.settings.ui.media_list.thumbnail_size}px</span>
     </div>
 
+    <div class="flex items-center gap-1">
+      layout:
+      <button
+        title="Toggle tiles vs filmstrip layout"
+        class="rounded-sm bg-gray-800 px-2 text-slate-400 hover:bg-gray-600"
+        onclick={() => {
+          const updated_organization = controller.runes.settings.ui.media_list.organization === 'tiles'
+            ? 'filmstrip'
+            : 'tiles'
+          controller.runes.settings.set('ui.media_list.organization', updated_organization)
+        }}
+      >{controller.runes.settings.ui.media_list.organization}</button>
+      {#if controller.runes.settings.ui.media_list.organization === 'filmstrip'}
+        <label for="filmstrip-rows">rows:</label>
+        <select
+          id="filmstrip-rows"
+          title="Number of filmstrip rows"
+          class="rounded-sm bg-gray-800 px-1 text-slate-400 hover:bg-gray-600"
+          value={controller.runes.settings.ui.media_list.filmstrip.rows}
+          onchange={e => {
+            controller.runes.settings.set('ui.media_list.filmstrip.rows', parseInt(e.currentTarget.value))
+          }}
+        >
+          {#each filmstrip_row_options as rows}
+            <option value={rows}>{rows}</option>
+          {/each}
+        </select>
+      {/if}
+    </div>
+
     <div>
-      tiles:
+      shape:
       <button
         title="Toggle thumbnail shape"
         class="rounded-sm bg-gray-800 px-2 text-slate-400 hover:bg-gray-600"

From 84bcdbdb58f754a5736d859379ca5ca48966ef1e Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 13 Oct 2026 21:40:24 +0000
Subject: [PATCH 2/7] impl(web): filmstrip keybinds, allow a key to trigger
 multiple actions

Co-authored-by: kaisea.rpi <kaisea.rpi@gmail.com>
---
 packages/web/src/lib/keybinds.ts | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/lib/keybinds.ts b/packages/web/src/lib/keybinds.ts
index b1f28301..b04c5c95 100644
--- a/packages/web/src/lib/keybinds.ts
+++ b/packages/web/src/lib/keybinds.ts
@@ -18,6 +18,14 @@ type KeybindAction =
   | 'ToggleVideoMute'
   | 'ToggleMediaControls'
   | 'ToggleSidebar'
+  | 'FilmstripNextItem'
+  | 'FilmstripPrevItem'
+  | 'FilmstripNextPage'
+  | 'FilmstripPrevPage'
+  | 'FilmstripEnd'
+  | 'FilmstripStart'
+  | 'NextFilmstrip'
+  | 'PrevFilmstrip'
   | 'Star0'
   | 'Star1'
   | 'Star2'
@@ -34,7 +42,8 @@ type KeybindActionListener = (e: KeybindActionEvent) => void
 export class Keybinds {
   public emitter: EventTarget
   public disabled: boolean
-  #keybind_mapper: Map<string, KeybindAction> | undefined
+  // a single key combo may trigger several actions, each listener decides if it applies in the current context
+  #keybind_mapper: Map<string, KeybindAction[]> | undefined
   #config: Config | undefined
 
   // this function is for some user ergonomics.
@@ -78,10 +87,13 @@ export class Keybinds {
     this.disabled = false
     this.#config = config
 
-    this.#keybind_mapper = new Map<string, KeybindAction>()
+    this.#keybind_mapper = new Map<string, KeybindAction[]>()
     for (const [keyboard_action, keyboard_shortcuts] of Object.entries(this.#config.web.shortcuts)) {
       for (const keyboard_shortcut of keyboard_shortcuts) {
-        this.#keybind_mapper.set(this.#get_keybind_code(keyboard_shortcut), keyboard_action as KeybindAction)
+        const code = this.#get_keybind_code(keyboard_shortcut)
+        const actions = this.#keybind_mapper.get(code) ?? []
+        actions.push(keyboard_action as KeybindAction)
+        this.#keybind_mapper.set(code, actions)
       }
     }
   }
@@ -127,8 +139,8 @@ export class Keybinds {
     if (e.altKey) keys_down.push('Alt')
     keys_down.push(last_keycode)
     const code = this.#get_keybind_code(keys_down.join('-'))
-    const action = this.#keybind_mapper.get(code)
-    if (action) {
+    const actions = this.#keybind_mapper.get(code) ?? []
+    for (const action of actions) {
       this.emitter.dispatchEvent(new CustomEvent(action, {
         detail: {
           data: { keyboard_event: e }

From 4d545578f6c1f84310abcc3860b332a0ad933542 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 13 Oct 2026 21:40:24 +0000
Subject: [PATCH 3/7] impl(web): filmstrip media list organization

Renders one horizontal filmstrip per search result. Images show a single
thumbnail, videos show thumbnails sampled to fill the configured rows (clicking
seeks the video), series and groups paginate their entries as the strip scrolls.

Co-authored-by: kaisea.rpi <kaisea.rpi@gmail.com>
---
 packages/web/src/lib/actions/mod.ts           |   1 +
 packages/web/src/lib/actions/visible.ts       |  20 ++
 .../src/lib/runes/media_list_rune.svelte.ts   |  14 +-
 .../src/lib/runes/media_view_rune.svelte.ts   |   9 +-
 .../routes/browse/components/Filmstrip.svelte | 327 ++++++++++++++++++
 .../browse/components/FilmstripList.svelte    |  44 +++
 .../routes/browse/components/MediaList.svelte |  14 +-
 .../routes/browse/components/MediaView.svelte |  17 +-
 .../browse/runes/media_selections.svelte.ts   |  30 ++
 9 files changed, 458 insertions(+), 18 deletions(-)
 create mode 100644 packages/web/src/lib/actions/visible.ts
 create mode 100644 packages/web/src/routes/browse/components/Filmstrip.svelte
 create mode 100644 packages/web/src/routes/browse/components/FilmstripList.svelte

diff --git a/packages/web/src/lib/actions/mod.ts b/packages/web/src/lib/actions/mod.ts
index 29e86e44..7d802dd8 100644
--- a/packages/web/src/lib/actions/mod.ts
+++ b/packages/web/src/lib/actions/mod.ts
@@ -1,2 +1,3 @@
 export * from './focusable.ts'
 export * from './scrollable.ts'
+export * from './visible.ts'
diff --git a/packages/web/src/lib/actions/visible.ts b/packages/web/src/lib/actions/visible.ts
new file mode 100644
index 00000000..b8968b58
--- /dev/null
+++ b/packages/web/src/lib/actions/visible.ts
@@ -0,0 +1,20 @@
+/** invokes `on_visible` the first time the node scrolls into (or near) the viewport */
+export function visible(node: HTMLElement, on_visible: () => void) {
+  let callback = on_visible
+  const observer = new IntersectionObserver((entries) => {
+    if (entries.some(entry => entry.isIntersecting)) {
+      observer.disconnect()
+      callback()
+    }
+  }, {rootMargin: '200px'})
+  observer.observe(node)
+
+  return {
+    update(on_visible: () => void) {
+      callback = on_visible
+    },
+    destroy() {
+      observer.disconnect()
+    },
+  }
+}
diff --git a/packages/web/src/lib/runes/media_list_rune.svelte.ts b/packages/web/src/lib/runes/media_list_rune.svelte.ts
index 9388acf7..a993fa89 100644
--- a/packages/web/src/lib/runes/media_list_rune.svelte.ts
+++ b/packages/web/src/lib/runes/media_list_rune.svelte.ts
@@ -6,6 +6,7 @@ import { MediaViewRune } from '.'
 type Result =
   | ReturnType<Forager['media']['search']>
   | ReturnType<Forager['media']['group']>
+  | ReturnType<Forager['series']['search']>
 
 interface SearchInput {
   type: 'media'
@@ -15,6 +16,10 @@ interface GroupByInput {
   type: 'group_by'
   params: Parameters<Forager['media']['group']>[0]
 }
+interface SeriesInput {
+  type: 'series'
+  params: Parameters<Forager['series']['search']>[0]
+}
 interface FilesystemInput {
   type: 'filesystem'
   params: {}
@@ -22,6 +27,7 @@ interface FilesystemInput {
 export type Input =
   | SearchInput
   | GroupByInput
+  | SeriesInput
   | FilesystemInput
 
 interface MediaListState {
@@ -31,11 +37,11 @@ interface MediaListState {
 }
 
 export class MediaListRune extends Rune {
-  #saved_params_type: 'media' | 'group_by' = 'media'
+  #saved_params_type: 'media' | 'group_by' | 'series' = 'media'
   #saved_params: {} | undefined
   #prev_query_hash: string = ''
   #fetch_count = 0
-  #has_more = true
+  #has_more = $state(true)
   #cursor: Result['cursor'] = undefined
   #state = $state<MediaListState>({
     loading: true, // empty state acts like it is loading by default
@@ -51,6 +57,8 @@ export class MediaListRune extends Rune {
 
   get total() { return this.#state.content?.total ?? 0 }
 
+  get has_more() { return this.#has_more }
+
   clear() {
     this.#has_more = true
     this.#cursor = undefined
@@ -87,6 +95,8 @@ export class MediaListRune extends Rune {
     else if (params_type === 'group_by') {
       fetch_params.limit = fetch_params.limit ?? 30
       content = await this.client.forager.media.group(fetch_params)
+    } else if (params_type === 'series') {
+      content = await this.client.forager.series.search(fetch_params)
     } else {
       throw new Error('unimplemented')
     }
diff --git a/packages/web/src/lib/runes/media_view_rune.svelte.ts b/packages/web/src/lib/runes/media_view_rune.svelte.ts
index 3950ea90..640d57d1 100644
--- a/packages/web/src/lib/runes/media_view_rune.svelte.ts
+++ b/packages/web/src/lib/runes/media_view_rune.svelte.ts
@@ -150,12 +150,13 @@ export class MediaGroupRune extends MediaViewRune {
   grouped_state = $state<GroupState>({
     media_list: []
   })
+  /** search params for the media inside this group (used by the filmstrip view to paginate group entries) */
+  readonly entries_search_params: Parameters<BaseController['client']['forager']['media']['search']>[0]
 
   protected constructor(client: BaseController['client'], media_response: MediaResponse, search_params: SearchParams) {
-    // debugger
     super(client, media_response)
 
-    const {group_by, cursor, ...merged_search_params} = search_params
+    const {group_by, cursor, limit, ...merged_search_params} = search_params
 
     if (group_by['tag_group'] !== undefined) {
       merged_search_params.query = {...merged_search_params.query}
@@ -167,12 +168,12 @@ export class MediaGroupRune extends MediaViewRune {
       if (merged_search_params.sort_by === 'count') {
         merged_search_params.sort_by = 'created_at'
       }
-      merged_search_params.limit = 1 // TODO until we implement a filmstrip render, we only need one image
     } else {
       throw new Error(`unexpected search group`)
     }
+    this.entries_search_params = merged_search_params
 
-    this.client.forager.media.search(merged_search_params)
+    this.client.forager.media.search({...merged_search_params, limit: 1})
       .then((result: {}) => {
         this.grouped_state.media_list = result.results
       })
diff --git a/packages/web/src/routes/browse/components/Filmstrip.svelte b/packages/web/src/routes/browse/components/Filmstrip.svelte
new file mode 100644
index 00000000..4c45f600
--- /dev/null
+++ b/packages/web/src/routes/browse/components/Filmstrip.svelte
@@ -0,0 +1,327 @@
+<script lang="ts">
+  import { tick } from 'svelte'
+  import * as path from '@std/path'
+  import type { BrowseController } from '../controller.ts'
+  import type { MediaViewRune, Input } from '$lib/runes/index.ts'
+  import { MediaListRune } from '$lib/runes/index.ts'
+  import { focusable, scrollable, visible } from '$lib/actions/mod.ts'
+  import Icon from '$lib/components/Icon.svelte'
+  import SearchLink from './SearchLink.svelte'
+  import * as icons from '$lib/icons/mod.ts'
+  import * as theme from '$lib/theme.ts'
+
+  interface Props {
+    controller: BrowseController
+    result: MediaViewRune
+    result_index: number
+  }
+
+  let {controller, result, result_index}: Props = $props()
+  const {settings, media_selections, queryparams} = controller.runes
+
+  const GAP = 4
+  const MIN_PAGE_LIMIT = 30
+  const icon_size = 14
+  const icon_color = theme.colors.green[200]
+
+  type FilmstripKind =
+    | 'single'    // a single thumbnail (images & audio)
+    | 'video'     // a fixed set of thumbnails sampled across the video's duration
+    | 'paginated' // series items or group entries, loaded page by page as the strip scrolls
+
+  const kind: FilmstripKind = $derived.by(() => {
+    if (result.media_type === 'media_file') {
+      return result.media_file.media_type === 'VIDEO' ? 'video' : 'single'
+    }
+    if (result.media_type === 'media_series' || result.media_type === 'grouped') {
+      return 'paginated'
+    }
+    throw new Error(`Unexpected media type '${result.media_type}' for filmstrip`)
+  })
+
+  let strip_element: HTMLDivElement | undefined = $state()
+  let viewport_width = $state(0)
+  let scroll_state = $state({left: 0, width: 0, client: 0})
+  let entries_list: MediaListRune | undefined = $state()
+  // tracks where an in-flight smooth scroll is headed so repeated key presses accumulate
+  let target_left: number | undefined
+
+  const cell_size = $derived(settings.ui.media_list.thumbnail_size)
+  const step = $derived(cell_size + GAP)
+  const rows = $derived(kind === 'single' ? 1 : settings.ui.media_list.filmstrip.rows)
+  const visible_columns = $derived(Math.max(1, Math.floor((viewport_width + GAP) / step)))
+  const strip_height = $derived(rows * cell_size + (rows - 1) * GAP)
+  const page_limit = $derived(Math.max(MIN_PAGE_LIMIT, visible_columns * rows * 2))
+  const is_selected = $derived(media_selections.current_selection.result_index === result_index)
+  const img_classes = $derived(settings.ui.media_list.thumbnail_shape === 'square' ? 'object-cover' : 'object-contain')
+
+  const video_thumbnails = $derived.by(() => {
+    if (kind !== 'video') return []
+    const all_thumbnails = result.state.full_thumbnails?.results ?? result.thumbnails.results
+    const count = visible_columns * rows
+    if (all_thumbnails.length <= count) return all_thumbnails
+    return Array.from({length: count}, (_, index) => all_thumbnails[Math.floor(index * all_thumbnails.length / count)])
+  })
+
+  const can_scroll_left = $derived(scroll_state.left > 1)
+  const at_end = $derived(scroll_state.left + scroll_state.client >= scroll_state.width - 1)
+  const can_scroll_right = $derived(!at_end || (kind === 'paginated' && (entries_list?.has_more ?? false)))
+
+  function entries_input(): Input {
+    if (result.media_type === 'media_series') {
+      return {type: 'series', params: {query: {series_id: result.media_reference.id}, limit: page_limit}}
+    } else if (result.media_type === 'grouped') {
+      return {type: 'media', params: {...result.entries_search_params, limit: page_limit}}
+    }
+    throw new Error(`Unexpected media type '${result.media_type}' for a paginated filmstrip`)
+  }
+
+  function load() {
+    if (kind === 'video') {
+      result.load_detailed_view()
+    } else if (kind === 'paginated' && entries_list === undefined) {
+      entries_list = new MediaListRune(controller.client)
+      entries_list.paginate(entries_input())
+    }
+  }
+
+  function maybe_paginate() {
+    if (!strip_element || !entries_list) return
+    if (!entries_list.has_more || entries_list.loading) return
+    // keep roughly a page of unseen entries loaded past the right edge
+    if (strip_element.scrollLeft + strip_element.clientWidth * 2 >= strip_element.scrollWidth) {
+      entries_list.paginate()
+    }
+  }
+
+  function measure() {
+    if (!strip_element) return
+    scroll_state = {
+      left: strip_element.scrollLeft,
+      width: strip_element.scrollWidth,
+      client: strip_element.clientWidth,
+    }
+    maybe_paginate()
+  }
+
+  $effect(() => {
+    // re-measure whenever the content or the viewport changes size
+    void entries_list?.results.length
+    void viewport_width
+    void rows
+    void cell_size
+    tick().then(measure)
+  })
+
+  function scroll_to(left: number) {
+    if (!strip_element) return
+    const max_left = Math.max(0, strip_element.scrollWidth - strip_element.clientWidth)
+    const clamped = Math.min(Math.max(0, left), max_left)
+    target_left = clamped
+    strip_element.scrollTo({left: clamped, behavior: 'smooth'})
+  }
+
+  async function scroll_columns(columns: number) {
+    if (!strip_element) return
+    const current_left = target_left ?? strip_element.scrollLeft
+    const target = Math.round(current_left / step) * step + columns * step
+    if (columns > 0 && entries_list?.has_more && target + strip_element.clientWidth >= strip_element.scrollWidth) {
+      await entries_list.paginate()
+      await tick()
+    }
+    scroll_to(target)
+  }
+
+  const scroll_item = (direction: 1 | -1) => scroll_columns(direction)
+  const scroll_page = (direction: 1 | -1) => scroll_columns(direction * visible_columns)
+  const scroll_start = () => scroll_to(0)
+  const scroll_end = () => {
+    if (!strip_element) return
+    scroll_to(strip_element.scrollWidth)
+  }
+
+  function is_active() {
+    return !media_selections.current_selection.show
+      && strip_element !== undefined
+      && strip_element.contains(document.activeElement)
+  }
+
+  function filmstrip_handler(action: () => void) {
+    return (e: CustomEvent<{data: {keyboard_event: KeyboardEvent}}>) => {
+      if (!is_active()) return
+      e.detail.data.keyboard_event.preventDefault()
+      action()
+    }
+  }
+
+  controller.keybinds.component_listen({
+    FilmstripNextItem: filmstrip_handler(() => scroll_item(1)),
+    FilmstripPrevItem: filmstrip_handler(() => scroll_item(-1)),
+    FilmstripNextPage: filmstrip_handler(() => scroll_page(1)),
+    FilmstripPrevPage: filmstrip_handler(() => scroll_page(-1)),
+    FilmstripEnd: filmstrip_handler(scroll_end),
+    FilmstripStart: filmstrip_handler(scroll_start),
+  })
+
+  function human_readable_duration(seconds: number) {
+    if (seconds < 100) {
+      return `${seconds.toFixed(1)}s`
+    }
+    const minutes = seconds / 60
+    if (minutes < 60) {
+      return `${minutes.toFixed(1)}m`
+    }
+    const hours = minutes / 60
+    return `${hours.toFixed(2)}h`
+  }
+
+  function format_timestamp(seconds: number) {
+    const minutes = Math.floor(seconds / 60)
+    const remainder = Math.floor(seconds % 60).toString().padStart(2, '0')
+    return `${minutes}:${remainder}`
+  }
+
+  const thumbnail_classes = "w-full h-full rounded-md shadow shadow-gray-900 hover:outline-2 hover:outline-slate-400"
+</script>
+
+<div
+  class="px-4 py-2"
+  data-filmstrip-index={result_index}
+  use:scrollable={is_selected}
+  use:visible={load}
+>
+  <div class="flex items-center gap-1 text-xs text-gray-400 pb-1 pl-7">
+    {#if result.media_type === 'media_file'}
+      {#if result.media_file.media_type === 'VIDEO'}
+        <Icon data={icons.PlayCircle} fill={icon_color} stroke="none" size={icon_size} />
+        {#if result.media_file.audio}
+          <Icon data={icons.Music} fill={icon_color} stroke="none" size={icon_size} />
+        {/if}
+      {:else if result.media_file.media_type === 'IMAGE' && result.media_file.content_type === 'image/gif'}
+        <Icon data={icons.Gif} fill={icon_color} stroke="none" size={icon_size} />
+      {:else if result.media_file.media_type === 'IMAGE'}
+        <Icon data={icons.Photo} fill={icon_color} stroke="none" size={icon_size} />
+      {:else if result.media_file.media_type === 'AUDIO'}
+        <Icon data={icons.Music} fill={icon_color} stroke="none" size={icon_size} />
+      {/if}
+      <span class="truncate">{result.media_reference.title ?? path.basename(result.media_file.filepath)}</span>
+      {#if result.media_file.media_type === 'VIDEO'}
+        <span>{human_readable_duration(result.media_file.duration)}</span>
+      {/if}
+    {:else if result.media_type === 'media_series'}
+      <Icon data={icons.Copy} fill={icon_color} stroke="none" size={icon_size} />
+      <span class="truncate">{result.media_reference.media_series_name ?? result.media_reference.title ?? 'Series'}</span>
+      <span>({result.media_reference.media_series_length})</span>
+    {:else if result.media_type === 'grouped'}
+      <Icon data={icons.Copy} fill={icon_color} stroke="none" size={icon_size} />
+      <SearchLink
+        class="hover:text-green-500 hover:bg-gray-700 px-1 rounded-sm"
+        {controller}
+        params={queryparams.merge({mode: 'media', tags: `${queryparams.current.group_by ?? ''}:${result.group_metadata.value}`})}
+      >{result.group_metadata.value}</SearchLink>
+      <span>({result.group_metadata.count})</span>
+    {/if}
+  </div>
+
+  <div class="grid grid-cols-[auto_1fr_auto] gap-1 items-center">
+    <button
+      type="button"
+      title="Previous page"
+      class="w-6 flex items-center justify-center rounded-sm bg-gray-800 hover:bg-gray-600 disabled:opacity-25 disabled:hover:bg-gray-800 disabled:cursor-default"
+      style="height: {strip_height}px"
+      disabled={!can_scroll_left}
+      onclick={() => scroll_page(-1)}
+    >
+      <Icon data={icons.ChevronLeft} fill={icon_color} stroke="none" size={16} />
+    </button>
+
+    <div
+      bind:this={strip_element}
+      bind:clientWidth={viewport_width}
+      class={[
+        "filmstrip overflow-x-auto overflow-y-hidden rounded-md outline-none border-2",
+        is_selected ? "border-green-300" : "border-transparent",
+      ]}
+      role="listbox"
+      aria-label="Filmstrip"
+      tabindex="0"
+      use:focusable={!media_selections.current_selection.show && is_selected}
+      onfocusin={() => media_selections.select_media(result, result_index)}
+      onscroll={measure}
+      onscrollend={() => {
+        target_left = undefined
+        measure()
+      }}
+    >
+      {#if kind === 'single'}
+        <div class="grid" style="grid-template-columns: {cell_size}px; height: {strip_height}px;">
+          <button
+            type="button"
+            tabindex="-1"
+            title="Open"
+            onclick={() => media_selections.open_entry(result, result_index)}
+          >
+            <img class="{thumbnail_classes} {img_classes}" src={result.preview_thumbnail} alt="Thumbnail for {result.media_reference.title ?? 'media'}" />
+          </button>
+        </div>
+      {:else if kind === 'video'}
+        <div
+          class="grid"
+          style="grid-template-columns: repeat({visible_columns}, {cell_size}px); grid-auto-rows: {cell_size}px; gap: {GAP}px; height: {strip_height}px;"
+        >
+          {#each video_thumbnails as thumbnail (thumbnail.id)}
+            <button
+              type="button"
+              tabindex="-1"
+              class="relative"
+              title="Play from {format_timestamp(thumbnail.media_timestamp)}"
+              onclick={() => media_selections.open_entry(result, result_index, {seek_to: thumbnail.media_timestamp})}
+            >
+              <img class="{thumbnail_classes} {img_classes}" src="/files/thumbnail/{thumbnail.id}" alt="Thumbnail at {format_timestamp(thumbnail.media_timestamp)}" />
+              <span class="absolute bottom-1 right-1 text-[10px] leading-none px-1 py-0.5 rounded-sm bg-gray-900/70 text-gray-200">
+                {format_timestamp(thumbnail.media_timestamp)}
+              </span>
+            </button>
+          {/each}
+        </div>
+      {:else}
+        <div
+          class="grid grid-flow-col"
+          style="grid-template-rows: repeat({rows}, {cell_size}px); grid-auto-columns: {cell_size}px; gap: {GAP}px; height: {strip_height}px;"
+        >
+          {#each entries_list?.results ?? [] as entry, entry_index (entry.media_reference.id)}
+            <button
+              type="button"
+              tabindex="-1"
+              title={entry.media_reference.title ?? `Entry ${entry_index + 1}`}
+              onclick={() => media_selections.open_entry(entry, result_index)}
+            >
+              <img class="{thumbnail_classes} {img_classes}" src={entry.preview_thumbnail} alt="Thumbnail for {entry.media_reference.title ?? 'media'}" />
+            </button>
+          {/each}
+          {#if entries_list === undefined || entries_list.loading}
+            <div class="flex items-center justify-center text-xs text-gray-500" style="grid-row: 1 / span {rows}">Loading...</div>
+          {/if}
+        </div>
+      {/if}
+    </div>
+
+    <button
+      type="button"
+      title="Next page"
+      class="w-6 flex items-center justify-center rounded-sm bg-gray-800 hover:bg-gray-600 disabled:opacity-25 disabled:hover:bg-gray-800 disabled:cursor-default"
+      style="height: {strip_height}px"
+      disabled={!can_scroll_right}
+      onclick={() => scroll_page(1)}
+    >
+      <Icon data={icons.ChevronRight} fill={icon_color} stroke="none" size={16} />
+    </button>
+  </div>
+</div>
+
+<style>
+  .filmstrip {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-gray-600) transparent;
+  }
+</style>
diff --git a/packages/web/src/routes/browse/components/FilmstripList.svelte b/packages/web/src/routes/browse/components/FilmstripList.svelte
new file mode 100644
index 00000000..d6b58237
--- /dev/null
+++ b/packages/web/src/routes/browse/components/FilmstripList.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { tick } from 'svelte'
+  import type { BrowseController } from '../controller.ts'
+  import Filmstrip from './Filmstrip.svelte'
+
+  let {controller}: {controller: BrowseController} = $props()
+  const {media_selections, media_list} = controller.runes
+
+  let list_element: HTMLDivElement
+
+  async function move_filmstrip(direction: 1 | -1) {
+    const results = media_list.results
+    if (results.length === 0) return
+    const current_index = media_selections.current_selection.result_index
+    const next_index = Math.min(Math.max(0, current_index + direction), results.length - 1)
+    media_selections.select_media(results[next_index], next_index)
+    await tick()
+    list_element
+      .querySelector<HTMLElement>(`[data-filmstrip-index="${next_index}"] [role="listbox"]`)
+      ?.focus()
+  }
+
+  function filmstrip_list_handler(direction: 1 | -1) {
+    return (e: CustomEvent<{data: {keyboard_event: KeyboardEvent}}>) => {
+      if (media_selections.current_selection.show) return
+      e.detail.data.keyboard_event.preventDefault()
+      move_filmstrip(direction)
+    }
+  }
+
+  controller.keybinds.component_listen({
+    NextFilmstrip: filmstrip_list_handler(1),
+    PrevFilmstrip: filmstrip_list_handler(-1),
+  })
+</script>
+
+<div class="py-2" bind:this={list_element}>
+  {#each media_list.results as result, result_index (result.media_type === 'grouped' ? `group:${result.group_metadata.value}` : `media:${result.media_reference.id}`)}
+    <Filmstrip {controller} {result} {result_index} />
+  {/each}
+</div>
+{#if media_list.loading}
+  <div class="px-4 text-gray-400">Loading...</div>
+{/if}
diff --git a/packages/web/src/routes/browse/components/MediaList.svelte b/packages/web/src/routes/browse/components/MediaList.svelte
index f2a08670..393478b6 100644
--- a/packages/web/src/routes/browse/components/MediaList.svelte
+++ b/packages/web/src/routes/browse/components/MediaList.svelte
@@ -1,13 +1,20 @@
 <script lang="ts">
   import Scroller from '$lib/components/Scroller.svelte'
   import SearchResults from './SearchResults.svelte'
+  import FilmstripList from './FilmstripList.svelte'
   import type { BrowseController } from '../controller.ts'
 
   let {controller}: {controller: BrowseController} = $props()
   let media_list_element: HTMLElement
 
+  // in filmstrip mode the arrow keys scroll the focused filmstrip (see Filmstrip.svelte) unless media is open
+  const filmstrip_navigation_active = () =>
+    controller.runes.settings.ui.media_list.organization === 'filmstrip'
+      && !controller.runes.media_selections.current_selection.show
+
   controller.keybinds.component_listen({
     NextMedia: () => {
+      if (filmstrip_navigation_active()) return
       if (document.activeElement instanceof HTMLInputElement) {
         if (media_list_element.contains(document.activeElement)) {}
         else return
@@ -15,6 +22,7 @@
       controller.runes.media_selections.next_media(controller.runes.media_list.results)
     },
     PrevMedia: () => {
+      if (filmstrip_navigation_active()) return
       if (document.activeElement instanceof HTMLInputElement) {
         if (media_list_element.contains(document.activeElement)) {}
         else return
@@ -54,6 +62,10 @@
     ]}
     style="height: {controller.runes.dimensions.heights.media_list}px"
   >
-    <SearchResults {controller} />
+    {#if controller.runes.settings.ui.media_list.organization === 'filmstrip'}
+      <FilmstripList {controller} />
+    {:else}
+      <SearchResults {controller} />
+    {/if}
   </Scroller>
 </div>
diff --git a/packages/web/src/routes/browse/components/MediaView.svelte b/packages/web/src/routes/browse/components/MediaView.svelte
index 23206b14..832095d2 100644
--- a/packages/web/src/routes/browse/components/MediaView.svelte
+++ b/packages/web/src/routes/browse/components/MediaView.svelte
@@ -74,9 +74,6 @@
     },
   })
 
-  let filmstrip_thumbnails
-  let filmstrip_height = 50
-
   $effect(() => {
     if (!dialog.open && controller.runes.media_selections.current_selection.show) {
       dialog.show()
@@ -140,6 +137,12 @@
             bind:currentTime={animation_progress}
             controls={show_controls}
             use:video_loader={media_url}
+            onloadedmetadata={e => {
+              const seek_to = controller.runes.media_selections.take_seek_to()
+              if (seek_to !== undefined) {
+                e.currentTarget.currentTime = seek_to
+              }
+            }}
             >
             <source src={media_url}>
             <track kind="captions"/> <!-- this exists purely to quiet down an A11y rule -->
@@ -148,14 +151,6 @@
             class="w-full h-1 absolute bottom-0"
             style="width: {animation_width}px"
             max={controller.runes.media_selections.current_selection.media_response.media_file.duration} value={animation_progress}></progress>
-          {#if controller.runes.settings.ui.media_view.filmstrip.enabled}
-            <div class="w-full flex flex-row justify-center gap-1 overflow-x-scroll" style="height: {controller.runes.settings.ui.media_view.filmstrip.thumbnail_size}px;">
-              {#each controller.runes.media_selections.current_selection.thumbnails.results as thumbnail, index (thumbnail.id)}
-                <div class="h-full">
-                  <img class="h-full" src="/files/thumbnail/{controller.runes.media_selections.current_selection.media_response.media_reference.id}?index={index}" alt="Thumbnail {index}"></div>
-              {/each}
-            </div>
-          {/if}
         {:else if controller.runes.media_selections.current_selection.media_response.media_file.media_type === 'AUDIO'}
           <img
             class="object-contain {media_fit_classes}"
diff --git a/packages/web/src/routes/browse/runes/media_selections.svelte.ts b/packages/web/src/routes/browse/runes/media_selections.svelte.ts
index 71687f60..25152de3 100644
--- a/packages/web/src/routes/browse/runes/media_selections.svelte.ts
+++ b/packages/web/src/routes/browse/runes/media_selections.svelte.ts
@@ -28,6 +28,8 @@ export interface CurrentSelection {
   show: boolean
   media_response: runes.MediaViewRunes | null
   result_index: number
+  /** timestamp (in seconds) that a video should start at when it is opened */
+  seek_to: number | undefined
 }
 
 const CURRENT_SELECTION_DEFAULTS: CurrentSelection = {
@@ -35,6 +37,7 @@ const CURRENT_SELECTION_DEFAULTS: CurrentSelection = {
   thumbnails: null,
   media_response: null,
   result_index: 0,
+  seek_to: undefined,
 }
 export class MediaSelectionsRune extends Rune {
   #selected_thumbnails = $state<ThumbnailSelections>({type: 'none'})
@@ -70,6 +73,25 @@ export class MediaSelectionsRune extends Rune {
     }
   }
 
+  /** select a search result without opening it */
+  public select_media(media_response: runes.MediaViewRune, result_index: number) {
+    this.#current_selection.result_index = result_index
+    // grouped results are not media references, so there are no media details to show for them
+    this.#current_selection.media_response = media_response.media_type === 'grouped' ? null : media_response
+  }
+
+  /**
+   * open a specific media reference in the media view.
+   * The media reference does not need to be a top level search result (e.g. a series item or group entry),
+   * result_index refers to the search result it belongs to.
+   */
+  public async open_entry(media_response: runes.MediaViewRune, result_index: number, options?: {seek_to?: number}) {
+    this.#current_selection.media_response = media_response
+    this.#current_selection.result_index = result_index
+    this.#current_selection.seek_to = options?.seek_to
+    await this.open_media()
+  }
+
   public async view_media() {
     await this.#current_selection.media_response?.load_detailed_view()
     if (this.#current_selection.show) {
@@ -90,6 +112,14 @@ export class MediaSelectionsRune extends Rune {
 
   public close_media = () => {
     this.#current_selection.show = false
+    this.#current_selection.seek_to = undefined
+  }
+
+  /** consume the pending seek timestamp so it is only applied once */
+  public take_seek_to(): number | undefined {
+    const seek_to = this.#current_selection.seek_to
+    this.#current_selection.seek_to = undefined
+    return seek_to
   }
 
   public async next_media(results: MediaResponse[]) {

From b0efeb3a502134ccc4cfa13344c0b262494a748a Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 13 Oct 2026 22:14:54 +0000
Subject: [PATCH 4/7] fix(web): grouped tile fit classes when the group preview
 is a series

Co-authored-by: kaisea.rpi <kaisea.rpi@gmail.com>
---
 packages/web/src/lib/runes/media_view_rune.svelte.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/lib/runes/media_view_rune.svelte.ts b/packages/web/src/lib/runes/media_view_rune.svelte.ts
index 640d57d1..99afab16 100644
--- a/packages/web/src/lib/runes/media_view_rune.svelte.ts
+++ b/packages/web/src/lib/runes/media_view_rune.svelte.ts
@@ -192,10 +192,10 @@ export class MediaGroupRune extends MediaViewRune {
   }
 
   public img_fit_classes() {
-    if (this.grouped_state.media_list.length === 0) {
+    const media = this.grouped_state.media_list.at(0)
+    if (media === undefined || media.media_type !== 'media_file') {
       return "w-full h-full"
     } else {
-      const media = this.grouped_state.media_list[0]
       if (media.media_file.width > media.media_file.height) {
         // its long edge is wide
         return "w-full"

From 5d8c2b8c757f8cf93dac0a375b590d415be60fcb Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 13 Oct 2026 22:14:54 +0000
Subject: [PATCH 5/7] impl(web): clicking anywhere on a filmstrip focuses it
 for keyboard navigation

Co-authored-by: kaisea.rpi <kaisea.rpi@gmail.com>
---
 .../routes/browse/components/Filmstrip.svelte    | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/routes/browse/components/Filmstrip.svelte b/packages/web/src/routes/browse/components/Filmstrip.svelte
index 4c45f600..77c94be1 100644
--- a/packages/web/src/routes/browse/components/Filmstrip.svelte
+++ b/packages/web/src/routes/browse/components/Filmstrip.svelte
@@ -141,9 +141,17 @@
   }
 
   function is_active() {
-    return !media_selections.current_selection.show
-      && strip_element !== undefined
-      && strip_element.contains(document.activeElement)
+    if (media_selections.current_selection.show || strip_element === undefined) return false
+    if (strip_element.contains(document.activeElement)) return true
+    // when nothing has focus, the selected filmstrip receives filmstrip keybinds
+    const nothing_focused = document.activeElement === null || document.activeElement === document.body
+    return nothing_focused && is_selected
+  }
+
+  function focus_strip(e: MouseEvent) {
+    if (!strip_element || !(e.target instanceof Element)) return
+    if (strip_element.contains(e.target) || e.target.closest('a')) return
+    strip_element.focus({preventScroll: true})
   }
 
   function filmstrip_handler(action: () => void) {
@@ -189,6 +197,8 @@
   data-filmstrip-index={result_index}
   use:scrollable={is_selected}
   use:visible={load}
+  onclick={focus_strip}
+  role="presentation"
 >
   <div class="flex items-center gap-1 text-xs text-gray-400 pb-1 pl-7">
     {#if result.media_type === 'media_file'}

From a064a248ee5f5723d98a7a4d4acceaa639f34b3c Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 13 Oct 2026 22:20:44 +0000
Subject: [PATCH 6/7] impl(web): fit filmstrip thumbnails to their image and
 size video strips to the rows they fill

Co-authored-by: kaisea.rpi <kaisea.rpi@gmail.com>
---
 .../routes/browse/components/Filmstrip.svelte | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/web/src/routes/browse/components/Filmstrip.svelte b/packages/web/src/routes/browse/components/Filmstrip.svelte
index 77c94be1..cef75023 100644
--- a/packages/web/src/routes/browse/components/Filmstrip.svelte
+++ b/packages/web/src/routes/browse/components/Filmstrip.svelte
@@ -48,21 +48,28 @@
 
   const cell_size = $derived(settings.ui.media_list.thumbnail_size)
   const step = $derived(cell_size + GAP)
-  const rows = $derived(kind === 'single' ? 1 : settings.ui.media_list.filmstrip.rows)
+  const configured_rows = $derived(kind === 'single' ? 1 : settings.ui.media_list.filmstrip.rows)
   const visible_columns = $derived(Math.max(1, Math.floor((viewport_width + GAP) / step)))
-  const strip_height = $derived(rows * cell_size + (rows - 1) * GAP)
-  const page_limit = $derived(Math.max(MIN_PAGE_LIMIT, visible_columns * rows * 2))
+  const page_limit = $derived(Math.max(MIN_PAGE_LIMIT, visible_columns * configured_rows * 2))
   const is_selected = $derived(media_selections.current_selection.result_index === result_index)
-  const img_classes = $derived(settings.ui.media_list.thumbnail_shape === 'square' ? 'object-cover' : 'object-contain')
+  const img_classes = $derived(settings.ui.media_list.thumbnail_shape === 'square'
+    ? 'w-full h-full object-cover'
+    : 'max-w-full max-h-full object-contain')
 
   const video_thumbnails = $derived.by(() => {
     if (kind !== 'video') return []
     const all_thumbnails = result.state.full_thumbnails?.results ?? result.thumbnails.results
-    const count = visible_columns * rows
+    const count = visible_columns * configured_rows
     if (all_thumbnails.length <= count) return all_thumbnails
     return Array.from({length: count}, (_, index) => all_thumbnails[Math.floor(index * all_thumbnails.length / count)])
   })
 
+  // videos with fewer thumbnails than the configured rows can hold only take up the rows they fill
+  const rows = $derived(kind === 'video'
+    ? Math.max(1, Math.min(configured_rows, Math.ceil(video_thumbnails.length / visible_columns)))
+    : configured_rows)
+  const strip_height = $derived(rows * cell_size + (rows - 1) * GAP)
+
   const can_scroll_left = $derived(scroll_state.left > 1)
   const at_end = $derived(scroll_state.left + scroll_state.client >= scroll_state.width - 1)
   const can_scroll_right = $derived(!at_end || (kind === 'paginated' && (entries_list?.has_more ?? false)))
@@ -189,7 +196,8 @@
     return `${minutes}:${remainder}`
   }
 
-  const thumbnail_classes = "w-full h-full rounded-md shadow shadow-gray-900 hover:outline-2 hover:outline-slate-400"
+  const thumbnail_classes = "rounded-md shadow shadow-gray-900 hover:outline-2 hover:outline-slate-400"
+  const thumbnail_button_classes = "flex items-center justify-center overflow-hidden"
 </script>
 
 <div
@@ -269,6 +277,7 @@
             type="button"
             tabindex="-1"
             title="Open"
+            class={thumbnail_button_classes}
             onclick={() => media_selections.open_entry(result, result_index)}
           >
             <img class="{thumbnail_classes} {img_classes}" src={result.preview_thumbnail} alt="Thumbnail for {result.media_reference.title ?? 'media'}" />
@@ -283,7 +292,7 @@
             <button
               type="button"
               tabindex="-1"
-              class="relative"
+              class="relative {thumbnail_button_classes}"
               title="Play from {format_timestamp(thumbnail.media_timestamp)}"
               onclick={() => media_selections.open_entry(result, result_index, {seek_to: thumbnail.media_timestamp})}
             >
@@ -304,6 +313,7 @@
               type="button"
               tabindex="-1"
               title={entry.media_reference.title ?? `Entry ${entry_index + 1}`}
+              class={thumbnail_button_classes}
               onclick={() => media_selections.open_entry(entry, result_index)}
             >
               <img class="{thumbnail_classes} {img_classes}" src={entry.preview_thumbnail} alt="Thumbnail for {entry.media_reference.title ?? 'media'}" />

From e40722a396b6148bed98011ba6fcefd54909e953 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 13 Oct 2026 23:57:25 +0000
Subject: [PATCH 7/7] impl(web): filmstrip arrows as small circles on the right
 aligned to the top row, labels below the strip

Co-authored-by: kaisea.rpi <kaisea.rpi@gmail.com>
---
 .../routes/browse/components/Filmstrip.svelte | 112 +++++++++---------
 1 file changed, 57 insertions(+), 55 deletions(-)

diff --git a/packages/web/src/routes/browse/components/Filmstrip.svelte b/packages/web/src/routes/browse/components/Filmstrip.svelte
index cef75023..e3bff582 100644
--- a/packages/web/src/routes/browse/components/Filmstrip.svelte
+++ b/packages/web/src/routes/browse/components/Filmstrip.svelte
@@ -20,6 +20,8 @@
   const {settings, media_selections, queryparams} = controller.runes
 
   const GAP = 4
+  // matches the strip's border-2, used to line the arrows up with the top row of thumbnails
+  const STRIP_BORDER = 2
   const MIN_PAGE_LIMIT = 30
   const icon_size = 14
   const icon_color = theme.colors.green[200]
@@ -198,6 +200,7 @@
 
   const thumbnail_classes = "rounded-md shadow shadow-gray-900 hover:outline-2 hover:outline-slate-400"
   const thumbnail_button_classes = "flex items-center justify-center overflow-hidden"
+  const arrow_button_classes = "w-5 h-5 flex items-center justify-center rounded-full bg-gray-800 hover:bg-gray-600 disabled:opacity-25 disabled:hover:bg-gray-800 disabled:cursor-default"
 </script>
 
 <div
@@ -208,51 +211,7 @@
   onclick={focus_strip}
   role="presentation"
 >
-  <div class="flex items-center gap-1 text-xs text-gray-400 pb-1 pl-7">
-    {#if result.media_type === 'media_file'}
-      {#if result.media_file.media_type === 'VIDEO'}
-        <Icon data={icons.PlayCircle} fill={icon_color} stroke="none" size={icon_size} />
-        {#if result.media_file.audio}
-          <Icon data={icons.Music} fill={icon_color} stroke="none" size={icon_size} />
-        {/if}
-      {:else if result.media_file.media_type === 'IMAGE' && result.media_file.content_type === 'image/gif'}
-        <Icon data={icons.Gif} fill={icon_color} stroke="none" size={icon_size} />
-      {:else if result.media_file.media_type === 'IMAGE'}
-        <Icon data={icons.Photo} fill={icon_color} stroke="none" size={icon_size} />
-      {:else if result.media_file.media_type === 'AUDIO'}
-        <Icon data={icons.Music} fill={icon_color} stroke="none" size={icon_size} />
-      {/if}
-      <span class="truncate">{result.media_reference.title ?? path.basename(result.media_file.filepath)}</span>
-      {#if result.media_file.media_type === 'VIDEO'}
-        <span>{human_readable_duration(result.media_file.duration)}</span>
-      {/if}
-    {:else if result.media_type === 'media_series'}
-      <Icon data={icons.Copy} fill={icon_color} stroke="none" size={icon_size} />
-      <span class="truncate">{result.media_reference.media_series_name ?? result.media_reference.title ?? 'Series'}</span>
-      <span>({result.media_reference.media_series_length})</span>
-    {:else if result.media_type === 'grouped'}
-      <Icon data={icons.Copy} fill={icon_color} stroke="none" size={icon_size} />
-      <SearchLink
-        class="hover:text-green-500 hover:bg-gray-700 px-1 rounded-sm"
-        {controller}
-        params={queryparams.merge({mode: 'media', tags: `${queryparams.current.group_by ?? ''}:${result.group_metadata.value}`})}
-      >{result.group_metadata.value}</SearchLink>
-      <span>({result.group_metadata.count})</span>
-    {/if}
-  </div>
-
-  <div class="grid grid-cols-[auto_1fr_auto] gap-1 items-center">
-    <button
-      type="button"
-      title="Previous page"
-      class="w-6 flex items-center justify-center rounded-sm bg-gray-800 hover:bg-gray-600 disabled:opacity-25 disabled:hover:bg-gray-800 disabled:cursor-default"
-      style="height: {strip_height}px"
-      disabled={!can_scroll_left}
-      onclick={() => scroll_page(-1)}
-    >
-      <Icon data={icons.ChevronLeft} fill={icon_color} stroke="none" size={16} />
-    </button>
-
+  <div class="grid grid-cols-[1fr_auto] gap-2 items-start">
     <div
       bind:this={strip_element}
       bind:clientWidth={viewport_width}
@@ -326,16 +285,59 @@
       {/if}
     </div>
 
-    <button
-      type="button"
-      title="Next page"
-      class="w-6 flex items-center justify-center rounded-sm bg-gray-800 hover:bg-gray-600 disabled:opacity-25 disabled:hover:bg-gray-800 disabled:cursor-default"
-      style="height: {strip_height}px"
-      disabled={!can_scroll_right}
-      onclick={() => scroll_page(1)}
-    >
-      <Icon data={icons.ChevronRight} fill={icon_color} stroke="none" size={16} />
-    </button>
+    <div class="flex items-center gap-1" style="height: {cell_size + STRIP_BORDER * 2}px">
+      <button
+        type="button"
+        title="Previous page"
+        class={arrow_button_classes}
+        disabled={!can_scroll_left}
+        onclick={() => scroll_page(-1)}
+      >
+        <Icon data={icons.ChevronLeft} fill={icon_color} stroke="none" size={12} />
+      </button>
+      <button
+        type="button"
+        title="Next page"
+        class={arrow_button_classes}
+        disabled={!can_scroll_right}
+        onclick={() => scroll_page(1)}
+      >
+        <Icon data={icons.ChevronRight} fill={icon_color} stroke="none" size={12} />
+      </button>
+    </div>
+  </div>
+
+  <div class="flex items-center gap-1 text-xs text-gray-400 pt-1">
+    {#if result.media_type === 'media_file'}
+      {#if result.media_file.media_type === 'VIDEO'}
+        <Icon data={icons.PlayCircle} fill={icon_color} stroke="none" size={icon_size} />
+        {#if result.media_file.audio}
+          <Icon data={icons.Music} fill={icon_color} stroke="none" size={icon_size} />
+        {/if}
+      {:else if result.media_file.media_type === 'IMAGE' && result.media_file.content_type === 'image/gif'}
+        <Icon data={icons.Gif} fill={icon_color} stroke="none" size={icon_size} />
+      {:else if result.media_file.media_type === 'IMAGE'}
+        <Icon data={icons.Photo} fill={icon_color} stroke="none" size={icon_size} />
+      {:else if result.media_file.media_type === 'AUDIO'}
+        <Icon data={icons.Music} fill={icon_color} stroke="none" size={icon_size} />
+      {/if}
+      <span class="truncate">{result.media_reference.title ?? path.basename(result.media_file.filepath)}</span>
+      {#if result.media_file.media_type === 'VIDEO'}
+        <span>{human_readable_duration(result.media_file.duration)}</span>
+      {/if}
+    {:else if result.media_type === 'media_series'}
+      <Icon data={icons.Copy} fill={icon_color} stroke="none" size={icon_size} />
+      <span class="truncate">{result.media_reference.media_series_name ?? result.media_reference.title ?? 'Series'}</span>
+      <span>({result.media_reference.media_series_length})</span>
+    {:else if result.media_type === 'grouped'}
+      <Icon data={icons.Copy} fill={icon_color} stroke="none" size={icon_size} />
+      <SearchLink
+        class="hover:text-green-500 hover:bg-gray-700 px-1 rounded-sm"
+        {controller}
+        params={queryparams.merge({mode: 'media', tags: `${queryparams.current.group_by ?? ''}:${result.group_metadata.value}`})}
+      >{result.group_metadata.value}</SearchLink>
+      <span>({result.group_metadata.count})</span>
+    {/if}
   </div>
 </div>