From bbf2f7a70a81fe667fb373dd0c209a39af281a21 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 20 Apr 2026 23:00:30 +0000
Subject: [PATCH 1/3] impl(web): extract shared browse-like components into
 $lib/components

Moves the media browsing UI components (MediaList, MediaDetails,
MediaView, Footer, SearchParams, SearchResults, SearchLink,
MediaDetailEntry) and their supporting runes (dimensions,
media_selections) out of the route-local browse folder into
$lib/components/browse_like and $lib/runes so they can be reused
by the upcoming /series/<series_id> route. Introduces a
BrowseLikeController base with a BrowseLikeQueryParams contract
that shared components rely on. Widens MediaListRune to accept a
new 'series_search' paginate type.

Co-authored-by: andykais-claude <andykais-claude@users.noreply.github.com>
---
 deno.lock                                     |   1 +
 packages/web/src/lib/base_controller.ts       |  48 +++-
 packages/web/src/lib/components/Header.svelte |   1 +
 .../components/browse_like}/Footer.svelte     |  10 +-
 .../browse_like}/MediaDetailEntry.svelte      |   8 +-
 .../browse_like}/MediaDetails.svelte          |  54 ++--
 .../components/browse_like}/MediaList.svelte  |  14 +-
 .../components/browse_like}/MediaView.svelte  |   6 +-
 .../components/browse_like}/SearchLink.svelte |  17 +-
 .../browse_like}/SearchParams.svelte          |  86 +++---
 .../browse_like}/SearchResults.svelte         |  62 +++--
 .../browse => lib}/runes/dimensions.svelte.ts |   4 +-
 .../web/src/lib/runes/focus_rune.svelte.ts    |   1 +
 packages/web/src/lib/runes/index.ts           |   2 +
 .../src/lib/runes/media_list_rune.svelte.ts   |  10 +-
 .../runes/media_selections.svelte.ts          |  13 +-
 .../src/lib/runes/media_view_rune.svelte.ts   |   5 +
 packages/web/src/routes/browse/+page.svelte   |  65 ++++-
 packages/web/src/routes/browse/controller.ts  |  14 +-
 .../routes/series/[series_id]/+page.svelte    |  73 ++++++
 .../routes/series/[series_id]/controller.ts   |  38 +++
 .../[series_id]/runes/queryparams.svelte.ts   | 248 ++++++++++++++++++
 22 files changed, 630 insertions(+), 150 deletions(-)
 rename packages/web/src/{routes/browse/components => lib/components/browse_like}/Footer.svelte (91%)
 rename packages/web/src/{routes/browse/components => lib/components/browse_like}/MediaDetailEntry.svelte (87%)
 rename packages/web/src/{routes/browse/components => lib/components/browse_like}/MediaDetails.svelte (80%)
 rename packages/web/src/{routes/browse/components => lib/components/browse_like}/MediaList.svelte (84%)
 rename packages/web/src/{routes/browse/components => lib/components/browse_like}/MediaView.svelte (98%)
 rename packages/web/src/{routes/browse/components => lib/components/browse_like}/SearchLink.svelte (56%)
 rename packages/web/src/{routes/browse/components => lib/components/browse_like}/SearchParams.svelte (69%)
 rename packages/web/src/{routes/browse/components => lib/components/browse_like}/SearchResults.svelte (72%)
 rename packages/web/src/{routes/browse => lib}/runes/dimensions.svelte.ts (84%)
 rename packages/web/src/{routes/browse => lib}/runes/media_selections.svelte.ts (90%)
 create mode 100644 packages/web/src/routes/series/[series_id]/+page.svelte
 create mode 100644 packages/web/src/routes/series/[series_id]/controller.ts
 create mode 100644 packages/web/src/routes/series/[series_id]/runes/queryparams.svelte.ts

diff --git a/deno.lock b/deno.lock
index e55205d4..dac71082 100644
--- a/deno.lock
+++ b/deno.lock
@@ -79,6 +79,7 @@
     "npm:path-to-regexp@6.2.1": "6.2.1",
     "npm:sv@*": "0.12.5",
     "npm:sv@latest": "0.12.5",
+    "npm:svelte-check@*": "4.3.2_svelte@5.39.8__acorn@8.15.0_typescript@5.9.3",
     "npm:svelte-check@4.3.2": "4.3.2_svelte@5.39.8__acorn@8.15.0_typescript@5.9.3",
     "npm:svelte@5.39.8": "5.39.8_acorn@8.15.0",
     "npm:svelte@~5.39.8": "5.39.8_acorn@8.15.0",
diff --git a/packages/web/src/lib/base_controller.ts b/packages/web/src/lib/base_controller.ts
index b221163e..708f10a8 100644
--- a/packages/web/src/lib/base_controller.ts
+++ b/packages/web/src/lib/base_controller.ts
@@ -2,7 +2,14 @@ import * as svelte from 'svelte'
 import type {ApiSpec} from '$lib/api.ts'
 import * as rpc from '@andykais/ts-rpc/client.ts'
 import type { Config } from '$lib/server/config.ts'
-import {create_focuser, SettingsRune} from '$lib/runes/index.ts'
+import {
+  create_focuser,
+  SettingsRune,
+  MediaListRune,
+  MediaSelectionsRune,
+  type DimensionsRune,
+} from '$lib/runes/index.ts'
+import type { BaseQueryParams } from '$lib/runes/base_queryparams.svelte.ts'
 import {Keybinds} from '$lib/keybinds.ts'
 
 
@@ -30,4 +37,41 @@ abstract class BaseController {
   abstract handlers: {}
 }
 
-export { BaseController }
+
+/**
+ * Minimal shape that a queryparams rune must implement to be usable by the
+ * shared browse-like components (MediaList, MediaDetails, SearchResults, etc.).
+ */
+export interface BrowseLikeQueryParams<TParams extends Record<string, any> = Record<string, any>> {
+  current: TParams
+  draft: TParams
+  readonly DEFAULTS: TParams
+  readonly contextual_query: any
+  readonly human_readable_summary: string
+  serialize(params: TParams): string | null
+  goto(params: TParams): Promise<void>
+  submit(): Promise<void>
+  merge(partial: Partial<Record<string, any>>): TParams
+}
+
+
+/**
+ * Shared controller shape used by the browse-like routes (`/browse`,
+ * `/series/<id>`). Route-specific queryparams runes may extend the shape with
+ * their own fields, but the core runes listed here are required so that shared
+ * components can operate uniformly across routes.
+ */
+abstract class BrowseLikeController extends BaseController {
+  abstract runes: {
+    media_list: MediaListRune
+    focus: ReturnType<typeof create_focuser>
+    dimensions: DimensionsRune
+    settings: SettingsRune
+    media_selections: MediaSelectionsRune
+    queryparams: BrowseLikeQueryParams
+  }
+
+  handlers = {}
+}
+
+export { BaseController, BrowseLikeController }
diff --git a/packages/web/src/lib/components/Header.svelte b/packages/web/src/lib/components/Header.svelte
index 4ed3a0e7..46c2351c 100644
--- a/packages/web/src/lib/components/Header.svelte
+++ b/packages/web/src/lib/components/Header.svelte
@@ -7,6 +7,7 @@
     height = $bindable(),
     ...props
   }: {
+    height?: number
     title: string
     children: SvelteHTMLElements['div']['children']
   } = $props()
diff --git a/packages/web/src/routes/browse/components/Footer.svelte b/packages/web/src/lib/components/browse_like/Footer.svelte
similarity index 91%
rename from packages/web/src/routes/browse/components/Footer.svelte
rename to packages/web/src/lib/components/browse_like/Footer.svelte
index a8a63399..54d8d0ef 100644
--- a/packages/web/src/routes/browse/components/Footer.svelte
+++ b/packages/web/src/lib/components/browse_like/Footer.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import * as theme from '$lib/theme.ts'
-  import type { BrowseController } from '../controller.ts'
+  import type { BrowseLikeController } from '$lib/base_controller.ts'
 
-  let {controller, height = $bindable()}: {controller: BrowseController, height: number} = $props()
+  let { controller, height = $bindable() }: { controller: BrowseLikeController; height: number } = $props()
 
 
   function human_readable_number(n: number) {
@@ -64,8 +64,8 @@
         min={50}
         max={500}
         value={controller.runes.settings.ui.media_list.thumbnail_size}
-        oninput={e => {
-          controller.runes.settings.set('ui.media_list.thumbnail_size', e.target.value)
+        oninput={(e) => {
+          controller.runes.settings.set('ui.media_list.thumbnail_size', (e.target as HTMLInputElement).value)
         }}>
       <span>{controller.runes.settings.ui.media_list.thumbnail_size}px</span>
     </div>
@@ -75,7 +75,7 @@
       <button
         title="Toggle thumbnail shape"
         class="rounded-sm bg-gray-800 px-2 text-slate-400 hover:bg-gray-600"
-        onclick={e => {
+        onclick={(e) => {
           const updated_shape = controller.runes.settings.ui.media_list.thumbnail_shape === 'square'
             ? 'original'
             : 'square'
diff --git a/packages/web/src/routes/browse/components/MediaDetailEntry.svelte b/packages/web/src/lib/components/browse_like/MediaDetailEntry.svelte
similarity index 87%
rename from packages/web/src/routes/browse/components/MediaDetailEntry.svelte
rename to packages/web/src/lib/components/browse_like/MediaDetailEntry.svelte
index 7c78dd08..03ba4c96 100644
--- a/packages/web/src/routes/browse/components/MediaDetailEntry.svelte
+++ b/packages/web/src/lib/components/browse_like/MediaDetailEntry.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import * as datetime from '@std/datetime'
   import type { Json } from '@andykais/ts-rpc/adapters/sveltekit.ts'
+  import type { BrowseLikeController } from '$lib/base_controller.ts'
 
-  import { BrowseController } from '../controller.ts'
-  let {controller, ...props}: {
-    controller: BrowseController
+  let { controller, ...props }: {
+    controller: BrowseLikeController
     label: string
     content: string | number | Date | null | Json
-    type?: "text" | "datetime-local"
+    type?: 'text' | 'datetime-local'
     editable?: boolean
     hide_if_null?: boolean
   } = $props()
diff --git a/packages/web/src/routes/browse/components/MediaDetails.svelte b/packages/web/src/lib/components/browse_like/MediaDetails.svelte
similarity index 80%
rename from packages/web/src/routes/browse/components/MediaDetails.svelte
rename to packages/web/src/lib/components/browse_like/MediaDetails.svelte
index 12101c66..c20798f1 100644
--- a/packages/web/src/routes/browse/components/MediaDetails.svelte
+++ b/packages/web/src/lib/components/browse_like/MediaDetails.svelte
@@ -7,19 +7,19 @@
   import SearchLink from './SearchLink.svelte'
   import Tag from '$lib/components/Tag.svelte'
   import Icon from '$lib/components/Icon.svelte'
-  import {XCircle, MagnifyingGlassPlus, ArrowTopRightOnSquare, Trash, TrashOutline} from '$lib/icons/mod.ts'
+  import { MagnifyingGlassPlus, ArrowTopRightOnSquare, TrashOutline } from '$lib/icons/mod.ts'
   import * as parsers from '$lib/parsers.ts'
 
-  import { BrowseController } from '../controller.ts'
-  let {controller}: {controller: BrowseController} = $props()
-  let {dimensions, media_selections, settings, queryparams} = controller.runes
+  import type { BrowseLikeController } from '$lib/base_controller.ts'
+  let { controller }: { controller: BrowseLikeController } = $props()
+  let { dimensions, media_selections, settings, queryparams } = controller.runes
 
   let new_tag_str = $state<string>('')
 
   type TagRecord = ReturnType<Forager['tag']['search']>['results'][0]
   let sorted_tags: [string, TagRecord[]][] = $derived.by(() => {
     const grouped_tags: Record<string, TagRecord[]> = {}
-    media_selections.current_selection.media_response?.tags.map(t => {
+    media_selections.current_selection.media_response?.tags.map((t) => {
       if (grouped_tags[t.group] === undefined) {
         grouped_tags[t.group] = []
       }
@@ -27,13 +27,13 @@
       grouped_tags[t.group].push(t)
     })
 
-    const entries =  Object.entries(grouped_tags).sort((a, b) => a[0].localeCompare(b[0]))
+    const entries = Object.entries(grouped_tags).sort((a, b) => a[0].localeCompare(b[0]))
 
     entries.sort((a, b) => {
-      const a_index = settings.ui.sidebar.tags.order.findIndex(match => {
+      const a_index = settings.ui.sidebar.tags.order.findIndex((match) => {
         return match.group === a[0]
       })
-      const b_index = settings.ui.sidebar.tags.order.findIndex(match => {
+      const b_index = settings.ui.sidebar.tags.order.findIndex((match) => {
         return match.group === b[0]
       })
       if (a_index !== -1 && b_index !== -1) {
@@ -49,9 +49,9 @@
   })
 
   controller.keybinds.component_listen({
-    ToggleSidebar: e => {
+    ToggleSidebar: (e) => {
       settings.set('ui.sidebar.hide', !settings.ui.sidebar.hide)
-    }
+    },
   })
 </script>
 
@@ -62,27 +62,27 @@
 >
   <form
     class="pl-1 pr-3"
-    onsubmit={async e => {
+    onsubmit={async (e) => {
       e.preventDefault()
       let media_info = undefined
-      let tags: {add: string[]} | undefined
+      let tags: { add: string[] } | undefined
       if (new_tag_str) {
-        tags = {add: [new_tag_str]}
+        tags = { add: [new_tag_str] }
       }
       media_selections.current_selection.media_response!.update(media_info, tags)
       new_tag_str = ''
     }}
-    >
+  >
     {#if media_selections.current_selection.media_response}
       <MediaDetailEntry
         {controller}
         label="Views"
-        content={media_selections.current_selection.media_response.media_reference.view_count}/>
+        content={media_selections.current_selection.media_response.media_reference.view_count} />
 
       <MediaDetailEntry
         {controller}
         label="Stars"
-        content={media_selections.current_selection.media_response.media_reference.stars}/>
+        content={media_selections.current_selection.media_response.media_reference.stars} />
 
       <label class="text-green-50" for="tags"><span>Tags</span></label>
       {#each sorted_tags as tag_group_entry, tag_entry_index (tag_group_entry[0])}
@@ -98,7 +98,7 @@
               title="Remove from media"
               type="button"
               onclick={async () => {
-                await media_selections.current_selection.media_response!.update(undefined, {remove: [`${tag.group}:${tag.name}`]})
+                await media_selections.current_selection.media_response!.update(undefined, { remove: [`${tag.group}:${tag.name}`] })
               }}>
               <Icon class="stroke-green-50 hover:stroke-green-300" data={TrashOutline} stroke_width={1.5} size="20px" color="none" />
             </button>
@@ -106,14 +106,14 @@
               class="hover:cursor-pointer"
               title="Apply to search"
               {controller}
-              params={queryparams.merge({tags: parsers.Tag.encode(tag)})}>
+              params={queryparams.merge({ tags: parsers.Tag.encode(tag) })}>
               <Icon class="fill-green-50 hover:fill-green-300" data={MagnifyingGlassPlus} size="20px" color="none" />
             </SearchLink>
             <SearchLink
               class="hover:cursor-pointer"
               title="Start new search"
               {controller}
-              params={{...queryparams.DEFAULTS, search_string: parsers.Tag.encode(tag)}}>
+              params={{ ...queryparams.DEFAULTS, search_string: parsers.Tag.encode(tag) }}>
               <Icon class="fill-green-50 hover:fill-green-300" data={ArrowTopRightOnSquare} size="20px" color="none" />
             </SearchLink>
           </div>
@@ -134,14 +134,14 @@
         editable
         hide_if_null
         label="Title"
-        content={media_selections.current_selection.media_response.media_reference.title}/>
+        content={media_selections.current_selection.media_response.media_reference.title} />
 
       <MediaDetailEntry
         {controller}
         editable
         hide_if_null
         label="Description"
-        content={media_selections.current_selection.media_response.media_reference.description}/>
+        content={media_selections.current_selection.media_response.media_reference.description} />
 
       <MediaDetailEntry
         {controller}
@@ -149,7 +149,7 @@
         hide_if_null
         label="Created"
         type="datetime-local"
-        content={media_selections.current_selection.media_response.media_reference.source_created_at}/>
+        content={media_selections.current_selection.media_response.media_reference.source_created_at} />
 
       <!-- TODO we should support datetimes in @andykais/ts-rpc -->
       <MediaDetailEntry
@@ -157,30 +157,30 @@
         editable
         label="Added"
         type="datetime-local"
-        content={media_selections.current_selection.media_response.media_reference.created_at}/>
+        content={media_selections.current_selection.media_response.media_reference.created_at} />
 
       <MediaDetailEntry
         {controller}
         hide_if_null
         label="Source URL"
-        content={media_selections.current_selection.media_response.media_reference.source_url}/>
+        content={media_selections.current_selection.media_response.media_reference.source_url} />
 
       <MediaDetailEntry
         {controller}
         hide_if_null
         label="Metadata"
-        content={media_selections.current_selection.media_response.media_reference.metadata}/>
+        content={media_selections.current_selection.media_response.media_reference.metadata} />
 
       {#if media_selections.current_selection.media_response.media_type === 'media_file'}
         <MediaDetailEntry
           {controller}
           label="File"
-          content={media_selections.current_selection.media_response.media_file.filepath}/>
+          content={media_selections.current_selection.media_response.media_file.filepath} />
 
         <MediaDetailEntry
           {controller}
           label="Filename"
-          content={path.basename(media_selections.current_selection.media_response.media_file.filepath)}/>
+          content={path.basename(media_selections.current_selection.media_response.media_file.filepath)} />
       {/if}
 
     {:else}
diff --git a/packages/web/src/routes/browse/components/MediaList.svelte b/packages/web/src/lib/components/browse_like/MediaList.svelte
similarity index 84%
rename from packages/web/src/routes/browse/components/MediaList.svelte
rename to packages/web/src/lib/components/browse_like/MediaList.svelte
index f2a08670..61da0096 100644
--- a/packages/web/src/routes/browse/components/MediaList.svelte
+++ b/packages/web/src/lib/components/browse_like/MediaList.svelte
@@ -1,9 +1,17 @@
 <script lang="ts">
   import Scroller from '$lib/components/Scroller.svelte'
   import SearchResults from './SearchResults.svelte'
-  import type { BrowseController } from '../controller.ts'
+  import type { BrowseLikeController } from '$lib/base_controller.ts'
 
-  let {controller}: {controller: BrowseController} = $props()
+  let {
+    controller,
+    show_series_index = false,
+    show_series_link = false,
+  }: {
+    controller: BrowseLikeController
+    show_series_index?: boolean
+    show_series_link?: boolean
+  } = $props()
   let media_list_element: HTMLElement
 
   controller.keybinds.component_listen({
@@ -54,6 +62,6 @@
     ]}
     style="height: {controller.runes.dimensions.heights.media_list}px"
   >
-    <SearchResults {controller} />
+    <SearchResults {controller} {show_series_index} {show_series_link} />
   </Scroller>
 </div>
diff --git a/packages/web/src/routes/browse/components/MediaView.svelte b/packages/web/src/lib/components/browse_like/MediaView.svelte
similarity index 98%
rename from packages/web/src/routes/browse/components/MediaView.svelte
rename to packages/web/src/lib/components/browse_like/MediaView.svelte
index 23206b14..ef0fef62 100644
--- a/packages/web/src/routes/browse/components/MediaView.svelte
+++ b/packages/web/src/lib/components/browse_like/MediaView.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { BrowseController } from '../controller.ts'
+  import type { BrowseLikeController } from '$lib/base_controller.ts'
 
   interface Props {
-    controller: BrowseController
+    controller: BrowseLikeController
   }
 
   // TODO wire this into settings
@@ -88,7 +88,7 @@
       update(_video_source_url: string) {
         animation_progress = 0
         node.load()
-      }
+      },
     }
   }
 
diff --git a/packages/web/src/routes/browse/components/SearchLink.svelte b/packages/web/src/lib/components/browse_like/SearchLink.svelte
similarity index 56%
rename from packages/web/src/routes/browse/components/SearchLink.svelte
rename to packages/web/src/lib/components/browse_like/SearchLink.svelte
index d82646bf..fc3e62a4 100644
--- a/packages/web/src/routes/browse/components/SearchLink.svelte
+++ b/packages/web/src/lib/components/browse_like/SearchLink.svelte
@@ -1,26 +1,23 @@
 <script lang="ts">
-  import type {BrowseController} from '../controller.ts'
-  import type { SvelteHTMLElements, ClassValue } from 'svelte/elements';
+  import type { BrowseLikeController } from '$lib/base_controller.ts'
+  import type { SvelteHTMLElements, ClassValue } from 'svelte/elements'
 
   interface Props {
-    controller: BrowseController
-    params: Partial<BrowseController['runes']['queryparams']['DEFAULTS']>
+    controller: BrowseLikeController
+    params: Partial<BrowseLikeController['runes']['queryparams']['DEFAULTS']>
     class?: ClassValue
     title?: string
     children: SvelteHTMLElements['div']['children']
   }
-  let {params, controller, children, ...props}: Props = $props()
-  const {queryparams} = controller.runes
-
-  console.log({params})
-
+  let { params, controller, children, ...props }: Props = $props()
+  const { queryparams } = controller.runes
 </script>
 
 <a
   class={props.class}
   title={props.title}
   href={queryparams.serialize(params)}
-  onclick={async e => {
+  onclick={async (e) => {
     if (e.ctrlKey || e.shiftKey) return
     e.preventDefault()
     await queryparams.goto(params)
diff --git a/packages/web/src/routes/browse/components/SearchParams.svelte b/packages/web/src/lib/components/browse_like/SearchParams.svelte
similarity index 69%
rename from packages/web/src/routes/browse/components/SearchParams.svelte
rename to packages/web/src/lib/components/browse_like/SearchParams.svelte
index b1158c88..7b7d7cec 100644
--- a/packages/web/src/routes/browse/components/SearchParams.svelte
+++ b/packages/web/src/lib/components/browse_like/SearchParams.svelte
@@ -2,14 +2,28 @@
   import SelectInput from '$lib/components/SelectInput.svelte'
   import * as theme from '$lib/theme.ts'
   import Icon from '$lib/components/Icon.svelte'
-  import { Filter, ChevronUp, ChevronDown, ArrowDown, ArrowUp } from '$lib/icons/mod.ts'
-  import TagAutoCompleteInput from "$lib/components/TagAutoCompleteInput.svelte";
-  import type { BrowseController } from "../controller.ts";
+  import { Filter, ArrowDown, ArrowUp } from '$lib/icons/mod.ts'
+  import TagAutoCompleteInput from '$lib/components/TagAutoCompleteInput.svelte'
+  import type { BrowseLikeController } from '$lib/base_controller.ts'
   import StarInput from '$lib/components/StarInput.svelte'
+  import type { Snippet } from 'svelte'
 
-  let {controller}: {controller: BrowseController} = $props()
+  interface Props {
+    controller: BrowseLikeController
+    /**
+     * Renders route-specific <option> elements for the sort_by select.
+     */
+    sort_options: Snippet
+    /**
+     * Renders an optional trailing block for additional route-specific
+     * controls in the filter row (e.g. search_mode select, group_by input).
+     */
+    extra_filters?: Snippet
+  }
+
+  let { controller, sort_options, extra_filters }: Props = $props()
 
-  const {queryparams, media_selections, settings} = controller.runes
+  const { queryparams, media_selections, settings } = controller.runes
 
   async function update_search() {
     await queryparams.submit()
@@ -17,11 +31,11 @@
   }
 
   const icon_color = theme.colors.gray[800]
-  const icon_size = "22px"
+  const icon_size = '22px'
 </script>
 
 <form class="contents"
-  onsubmit={async e => {
+  onsubmit={async (e) => {
     e.preventDefault()
     await update_search()
   }}>
@@ -37,7 +51,7 @@
         class="hover:cursor-pointer"
         title="click to {settings.ui.search.advanced_filters.hide ? 'show' : 'hide'} advanced filters"
         type="button"
-        onclick={e => {
+        onclick={(e) => {
           settings.toggle('ui.search.advanced_filters.hide')
         }}>
         <Icon class="fill-gray-800 hover:fill-gray-600" data={Filter} size={icon_size} fill={icon_color} stroke={"none"} />
@@ -54,21 +68,13 @@
             name="sort_by"
             bind:value={queryparams.draft.sort}
             onchange={update_search}>
-            <option value="source_created_at">Created At</option>
-            <option value="created_at">Added On</option>
-            <option value="updated_at">Updated At</option>
-            <option value="view_count">View Count</option>
-            <option value="last_viewed_at">Last Viewed</option>
-            <option value="duration">Duration</option>
-            {#if queryparams.draft.search_mode === 'group_by'}
-            <option value="count">Count</option>
-            {/if}
+            {@render sort_options()}
           </select>
           <button
             class="hover:cursor-pointer"
             title="order by ascending"
             type="button"
-            onclick={e => {
+            onclick={(e) => {
               if (queryparams.draft.order === 'asc') queryparams.draft.order = 'desc'
               else queryparams.draft.order = 'asc'
               update_search()
@@ -83,11 +89,11 @@
 
         <SelectInput
           options={[
-            {label: 'All', value: 'all'},
-            {label: 'Animated', value: 'animated'},
-            {label: 'Image',    value: 'image'},
-            {label: 'Video',    value: 'video'},
-            {label: 'Audio',    value: 'audio'},
+            { label: 'All', value: 'all' },
+            { label: 'Animated', value: 'animated' },
+            { label: 'Image', value: 'image' },
+            { label: 'Video', value: 'video' },
+            { label: 'Audio', value: 'audio' },
           ]}
           bind:value={queryparams.draft.media_type}
           onchange={update_search}
@@ -98,13 +104,13 @@
             'rounded-lg px-2 border border-2 border-gray-800 hover:border-gray-400',
             queryparams.draft.unread_only
               ? 'bg-gray-800 text-gray-400'
-              : ''
+              : '',
           ]}
           type="button"
-          onclick={e => {
+          onclick={(e) => {
             queryparams.draft.unread_only = !queryparams.draft.unread_only
             update_search()
-        }}
+          }}
           title="Show unread results only"
         >
           Unread
@@ -120,7 +126,7 @@
             type="button"
             class="px-2 bg-gray-800 rounded-lg"
             onclick={() => {
-              switch(queryparams.draft.stars_equality) {
+              switch (queryparams.draft.stars_equality) {
                 case 'eq': {
                   queryparams.draft.stars_equality = 'gte'
                   break
@@ -156,30 +162,8 @@
             bind:value={queryparams.draft.filepath}>
         </div>
 
-        <SelectInput
-          label="Search Mode"
-          options={[
-            {label: 'Media', value: 'media'},
-            {label: 'Grouped', value: 'group_by'},
-            {label: 'Filesystem', value: 'filesystem'},
-          ]}
-          onchange={() => {
-            if (queryparams.draft.search_mode !== 'group_by') {
-              queryparams.draft.group_by = undefined
-            }
-          }}
-          bind:value={queryparams.draft.search_mode}
-        />
-
-        {#if queryparams.draft.search_mode == "group_by"}
-          <div class="flex gap-2">
-            <label class="" for="group_by">Group By:</label>
-            <input
-              class="rounded-lg py-1 px-3 text-slate-100 bg-gray-800 text-sm"
-              name="group_by"
-              type="text"
-              bind:value={queryparams.draft.group_by}>
-          </div>
+        {#if extra_filters}
+          {@render extra_filters()}
         {/if}
       </div>
     </div>
diff --git a/packages/web/src/routes/browse/components/SearchResults.svelte b/packages/web/src/lib/components/browse_like/SearchResults.svelte
similarity index 72%
rename from packages/web/src/routes/browse/components/SearchResults.svelte
rename to packages/web/src/lib/components/browse_like/SearchResults.svelte
index cc9590e0..6b114798 100644
--- a/packages/web/src/routes/browse/components/SearchResults.svelte
+++ b/packages/web/src/lib/components/browse_like/SearchResults.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { BrowseController } from '../controller.ts'
+  import type { BrowseLikeController } from '$lib/base_controller.ts'
   import * as theme from '$lib/theme.ts'
   import { focusable, scrollable } from '$lib/actions/mod.ts'
   import Icon from '$lib/components/Icon.svelte'
@@ -7,16 +7,24 @@
   import * as icons from '$lib/icons/mod.ts'
 
   interface Props {
-    controller: BrowseController
+    controller: BrowseLikeController
+    /**
+     * When true, display the series_index under each tile (for the series view).
+     */
+    show_series_index?: boolean
+    /**
+     * When true, show a link under media-series tiles pointing to the series
+     * detail view. Defaults to false for routes that are themselves already a
+     * series view.
+     */
+    show_series_link?: boolean
   }
 
-  let {controller}: Props = $props()
-  const {queryparams, settings, media_selections, media_list} = controller.runes
+  let { controller, show_series_index = false, show_series_link = false }: Props = $props()
+  const { queryparams, settings, media_selections, media_list } = controller.runes
 
-  let tile_size = settings.ui.media_list.thumbnail_size
   const icon_size = 14
   const icon_color = theme.colors.green[200]
-  let dialog: HTMLDialogElement
 
   function human_readable_duration(seconds: number) {
     if (seconds < 100) {
@@ -41,7 +49,7 @@
   .container-media-tile {
     display: grid;
     gap: 5px;
-    grid-template-rows: 1fr max-content;
+    grid-template-rows: 1fr max-content max-content;
     height: 100%;
     width: 100%;
     align-items: center;
@@ -53,7 +61,7 @@
 <div class="container-masonry p-4" style="--thumbnail-size: {settings.ui.media_list.thumbnail_size}px">
   {#each media_list.results as result, result_index}
     <div>
-      <div 
+      <div
         type="button"
         class="inline-flex items-center justify-center p-1
                outline-none"
@@ -66,7 +74,7 @@
           <div
             class="flex justify-center items-center overflow-hidden focus:outline-none"
             style="width:{settings.ui.media_list.thumbnail_size}px; height: {settings.ui.media_list.thumbnail_size}px"
-            onkeydown={e => {
+            onkeydown={(e) => {
               if (e.key === 'Enter') {
                 media_selections.set_current_selection(result, result_index)
               }
@@ -74,7 +82,7 @@
             role="button"
             tabindex="0"
             use:focusable={!media_selections.current_selection.show && media_selections.current_selection.result_index === result_index}
-            onclick={e => media_selections.set_current_selection(result, result_index)}
+            onclick={(e) => media_selections.set_current_selection(result, result_index)}
           >
             {#if settings.ui.media_list.thumbnail_shape === 'original'}
               <img
@@ -87,7 +95,7 @@
                     && "hover:border-slate-400 border-green-300 border border-2 hover:shadow-slate-400 shadow-green-300",
                 ]}
                 src={result.preview_thumbnail}
-                alt="Thumbnail for {result.media_reference?.title ?? 'media'}"/>
+                alt="Thumbnail for {result.media_reference?.title ?? 'media'}" />
             {:else}
               <img
                 class={[
@@ -99,12 +107,12 @@
                     && "hover:border-slate-400 border-green-300 border border-2 hover:shadow-slate-400 shadow-green-300",
                 ]}
                 src={result.preview_thumbnail}
-                alt="Thumbnail for {result.media_reference?.title ?? 'media'}"/>
+                alt="Thumbnail for {result.media_reference?.title ?? 'media'}" />
             {/if}
           </div>
 
           <!-- info chips -->
-          <div class="flex text-xs text-gray-400 justify-between  p-0.5">
+          <div class="flex text-xs text-gray-400 justify-between p-0.5">
             {#if result.media_type === 'media_file'}
               {#if result.media_file.media_type === 'VIDEO'}
                 <span class="flex">
@@ -123,21 +131,37 @@
               {:else}
                 unknown media type {result.media_file.media_type}
               {/if}
-          {:else if result.media_type === 'media_series'}
+            {:else if result.media_type === 'media_series'}
               <Icon data={icons.Copy} fill={icon_color} stroke="none" size={icon_size} />
               <span>({result.media_reference.media_series_length})</span>
-          {:else if result.media_type === 'grouped'}
+            {: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-2 rounded-sm"
-                {controller} params={queryparams.merge({mode: 'media', tags: `${queryparams.current.group_by ?? ''}:${result.group_metadata.value}`})}> {result.group_metadata.value} 
+                {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>
-          {:else}
-            UNEXPECTED MEDIA TYPE {result.media_type}
+            {:else}
+              UNEXPECTED MEDIA TYPE {result.media_type}
+            {/if}
+          </div>
+
+          <!-- series row: either a series_index label (series view) or a "View series" link (browse view) -->
+          {#if show_series_index && result.series_index !== undefined}
+            <div class="flex text-xs text-gray-400 justify-center p-0.5">
+              <span title="Page in series">#{result.series_index}</span>
+            </div>
+          {:else if show_series_link && result.media_type === 'media_series'}
+            <div class="flex text-xs justify-center p-0.5">
+              <a
+                class="text-green-300 hover:text-green-400 hover:underline"
+                href={`/series/${result.media_reference.id}`}
+                title="View this media series"
+                onclick={(e) => e.stopPropagation()}
+              >View series</a>
+            </div>
           {/if}
         </div>
-        </div>
       </div>
     </div>
   {/each}
diff --git a/packages/web/src/routes/browse/runes/dimensions.svelte.ts b/packages/web/src/lib/runes/dimensions.svelte.ts
similarity index 84%
rename from packages/web/src/routes/browse/runes/dimensions.svelte.ts
rename to packages/web/src/lib/runes/dimensions.svelte.ts
index e6d627da..9f4c781c 100644
--- a/packages/web/src/routes/browse/runes/dimensions.svelte.ts
+++ b/packages/web/src/lib/runes/dimensions.svelte.ts
@@ -1,3 +1,5 @@
+export type DimensionsRune = ReturnType<typeof create_dimensional_rune>
+
 export function create_dimensional_rune() {
   let heights = $state({
     screen: 0,
@@ -14,6 +16,6 @@ export function create_dimensional_rune() {
   return {
     get heights() {
       return heights
-    }
+    },
   }
 }
diff --git a/packages/web/src/lib/runes/focus_rune.svelte.ts b/packages/web/src/lib/runes/focus_rune.svelte.ts
index b48a3434..9f11608b 100644
--- a/packages/web/src/lib/runes/focus_rune.svelte.ts
+++ b/packages/web/src/lib/runes/focus_rune.svelte.ts
@@ -1,5 +1,6 @@
 type FocusComponent =
   | 'BrowsePage'
+  | 'SeriesPage'
   | 'TagAutoCompleteInput'
 
 interface Focus {
diff --git a/packages/web/src/lib/runes/index.ts b/packages/web/src/lib/runes/index.ts
index 17727f50..a4f1c54c 100644
--- a/packages/web/src/lib/runes/index.ts
+++ b/packages/web/src/lib/runes/index.ts
@@ -3,3 +3,5 @@ export * from './focus_rune.svelte.ts'
 export * from './settings_rune.svelte.ts'
 export * from './media_list_rune.svelte.ts'
 export * from './media_view_rune.svelte.ts'
+export * from './media_selections.svelte.ts'
+export * from './dimensions.svelte.ts'
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..0ff2853f 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'
@@ -19,10 +20,15 @@ interface FilesystemInput {
   type: 'filesystem'
   params: {}
 }
+interface SeriesSearchInput {
+  type: 'series_search'
+  params: Parameters<Forager['series']['search']>[0]
+}
 export type Input =
   | SearchInput
   | GroupByInput
   | FilesystemInput
+  | SeriesSearchInput
 
 interface MediaListState {
   loading: boolean
@@ -31,7 +37,7 @@ interface MediaListState {
 }
 
 export class MediaListRune extends Rune {
-  #saved_params_type: 'media' | 'group_by' = 'media'
+  #saved_params_type: Input['type'] = 'media'
   #saved_params: {} | undefined
   #prev_query_hash: string = ''
   #fetch_count = 0
@@ -87,6 +93,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_search') {
+      content = await this.client.forager.series.search(fetch_params)
     } else {
       throw new Error('unimplemented')
     }
diff --git a/packages/web/src/routes/browse/runes/media_selections.svelte.ts b/packages/web/src/lib/runes/media_selections.svelte.ts
similarity index 90%
rename from packages/web/src/routes/browse/runes/media_selections.svelte.ts
rename to packages/web/src/lib/runes/media_selections.svelte.ts
index 71687f60..110a47f6 100644
--- a/packages/web/src/routes/browse/runes/media_selections.svelte.ts
+++ b/packages/web/src/lib/runes/media_selections.svelte.ts
@@ -1,5 +1,5 @@
-import {Rune} from '$lib/runes/rune.ts'
-import type { Forager, MediaResponse } from '@forager/core'
+import { Rune } from '$lib/runes/rune.ts'
+import type { MediaResponse } from '@forager/core'
 import type * as runes from '$lib/runes/index.ts'
 import type { BaseController } from '$lib/base_controller.ts'
 
@@ -37,10 +37,10 @@ const CURRENT_SELECTION_DEFAULTS: CurrentSelection = {
   result_index: 0,
 }
 export class MediaSelectionsRune extends Rune {
-  #selected_thumbnails = $state<ThumbnailSelections>({type: 'none'})
-  #current_selection = $state<CurrentSelection>({...CURRENT_SELECTION_DEFAULTS})
+  #selected_thumbnails = $state<ThumbnailSelections>({ type: 'none' })
+  #current_selection = $state<CurrentSelection>({ ...CURRENT_SELECTION_DEFAULTS })
 
-  public constructor(client: BaseController['client'], media_list_rune: MediaListRune) {
+  public constructor(client: BaseController['client'], media_list_rune: runes.MediaListRune) {
     super(client)
   }
 
@@ -52,7 +52,6 @@ export class MediaSelectionsRune extends Rune {
     return this.#current_selection
   }
 
-
   private is_currently_selected(media_reference_id: number) {
     if (this.#current_selection.media_response?.media_reference.id === media_reference_id) {
       return true
@@ -78,7 +77,7 @@ export class MediaSelectionsRune extends Rune {
   }
 
   public clear_current_selection() {
-    this.#current_selection = {...CURRENT_SELECTION_DEFAULTS}
+    this.#current_selection = { ...CURRENT_SELECTION_DEFAULTS }
   }
 
   public async open_media() {
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..5f099e5e 100644
--- a/packages/web/src/lib/runes/media_view_rune.svelte.ts
+++ b/packages/web/src/lib/runes/media_view_rune.svelte.ts
@@ -52,6 +52,11 @@ export class MediaViewRune extends Rune {
     return this.media.thumbnails
   }
 
+  get series_index(): number | undefined {
+    // Present on responses returned from `forager.series.search`
+    return (this.media as unknown as { series_index?: number }).series_index
+  }
+
   public update(media_info: inputs.MediaInfo, tags: inputs.MediaReferenceUpdateTags) {
     throw new Error('requires override')
   }
diff --git a/packages/web/src/routes/browse/+page.svelte b/packages/web/src/routes/browse/+page.svelte
index f101e954..142cf769 100644
--- a/packages/web/src/routes/browse/+page.svelte
+++ b/packages/web/src/routes/browse/+page.svelte
@@ -1,30 +1,71 @@
 <script lang="ts">
-  import MediaDetails from './components/MediaDetails.svelte'
-  import SearchParams from './components/SearchParams.svelte'
-  import MediaList from './components/MediaList.svelte'
-  import MediaView from './components/MediaView.svelte'
-  import Footer from './components/Footer.svelte'
+  import MediaDetails from '$lib/components/browse_like/MediaDetails.svelte'
+  import MediaList from '$lib/components/browse_like/MediaList.svelte'
+  import MediaView from '$lib/components/browse_like/MediaView.svelte'
+  import Footer from '$lib/components/browse_like/Footer.svelte'
+  import SearchParams from '$lib/components/browse_like/SearchParams.svelte'
   import Header from '$lib/components/Header.svelte'
+  import SelectInput from '$lib/components/SelectInput.svelte'
 
   import { BrowseController } from './controller.ts'
 
-	/** @type {import('./$types').PageProps} */
-  let props  = $props()
+  /** @type {import('./$types').PageProps} */
+  let props = $props()
 
   const controller = new BrowseController(props.data.config)
   let { dimensions, focus, queryparams } = controller.runes
-  focus.stack({component: 'BrowsePage', focus: 'page'})
+  focus.stack({ component: 'BrowsePage', focus: 'page' })
 </script>
 
+{#snippet sort_options()}
+  <option value="source_created_at">Created At</option>
+  <option value="created_at">Added On</option>
+  <option value="updated_at">Updated At</option>
+  <option value="view_count">View Count</option>
+  <option value="last_viewed_at">Last Viewed</option>
+  <option value="duration">Duration</option>
+  {#if queryparams.draft.search_mode === 'group_by'}
+    <option value="count">Count</option>
+  {/if}
+{/snippet}
+
+{#snippet extra_filters()}
+  <SelectInput
+    label="Search Mode"
+    options={[
+      { label: 'Media', value: 'media' },
+      { label: 'Grouped', value: 'group_by' },
+      { label: 'Filesystem', value: 'filesystem' },
+    ]}
+    onchange={() => {
+      if (queryparams.draft.search_mode !== 'group_by') {
+        queryparams.draft.group_by = undefined
+      }
+    }}
+    bind:value={queryparams.draft.search_mode}
+  />
+
+  {#if queryparams.draft.search_mode == "group_by"}
+    <div class="flex gap-2">
+      <label class="" for="group_by">Group By:</label>
+      <input
+        class="rounded-lg py-1 px-3 text-slate-100 bg-gray-800 text-sm"
+        name="group_by"
+        type="text"
+        bind:value={queryparams.draft.group_by}>
+    </div>
+  {/if}
+{/snippet}
+
 <div class="h-dvh">
-  <Header title={queryparams.human_readable_summary || 'Forager'} bind:height={dimensions.heights.header} >
-    <SearchParams {controller} />
+  <Header title={queryparams.human_readable_summary || 'Forager'} bind:height={dimensions.heights.header}>
+    <SearchParams {controller} {sort_options} {extra_filters} />
   </Header>
   <div class="grid grid-cols-[auto_1fr]">
     <MediaDetails {controller} />
     <div class="relative">
       <MediaView {controller} />
-      <MediaList {controller} />
+      <MediaList {controller} show_series_link />
     </div>
   </div>
   <Footer {controller} bind:height={dimensions.heights.footer} />
@@ -32,5 +73,5 @@
 
 <svelte:window
   on:keydown|capture={controller.keybinds.handler}
-  bind:innerHeight={dimensions.heights.screen} 
+  bind:innerHeight={dimensions.heights.screen}
 />
diff --git a/packages/web/src/routes/browse/controller.ts b/packages/web/src/routes/browse/controller.ts
index b505140f..723713d4 100644
--- a/packages/web/src/routes/browse/controller.ts
+++ b/packages/web/src/routes/browse/controller.ts
@@ -1,12 +1,16 @@
 import type { Config } from '$lib/server/config.ts'
-import {BaseController} from '$lib/base_controller.ts'
-import {create_focuser, SettingsRune, MediaListRune } from '$lib/runes/index.ts'
-import { create_dimensional_rune } from './runes/dimensions.svelte.ts'
-import { MediaSelectionsRune } from './runes/media_selections.svelte.ts'
+import { BrowseLikeController } from '$lib/base_controller.ts'
+import {
+  create_focuser,
+  SettingsRune,
+  MediaListRune,
+  MediaSelectionsRune,
+  create_dimensional_rune,
+} from '$lib/runes/index.ts'
 import { QueryParamsManager } from './runes/queryparams.svelte.ts'
 
 
-class BrowseController extends BaseController {
+class BrowseController extends BrowseLikeController {
   runes: {
     media_list: MediaListRune
     focus: ReturnType<typeof create_focuser>
diff --git a/packages/web/src/routes/series/[series_id]/+page.svelte b/packages/web/src/routes/series/[series_id]/+page.svelte
new file mode 100644
index 00000000..781a7ba9
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/+page.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { page } from '$app/state'
+  import MediaDetails from '$lib/components/browse_like/MediaDetails.svelte'
+  import MediaList from '$lib/components/browse_like/MediaList.svelte'
+  import MediaView from '$lib/components/browse_like/MediaView.svelte'
+  import Footer from '$lib/components/browse_like/Footer.svelte'
+  import SearchParams from '$lib/components/browse_like/SearchParams.svelte'
+  import Header from '$lib/components/Header.svelte'
+
+  import { SeriesController } from './controller.ts'
+
+  /** @type {import('./$types').PageProps} */
+  let props = $props()
+
+  const series_id_param = page.params.series_id
+  const series_id_number = Number(series_id_param)
+  if (!Number.isFinite(series_id_number) || series_id_number <= 0) {
+    throw new Error(`Invalid series_id: ${series_id_param}`)
+  }
+
+  const controller = new SeriesController(props.data.config, series_id_number)
+  let { dimensions, focus, queryparams } = controller.runes
+  focus.stack({ component: 'SeriesPage', focus: 'page' })
+
+  let series_title = $state<string | undefined>(undefined)
+
+  $effect(() => {
+    controller.client.forager.series.get({ series_id: series_id_number })
+      .then((response: { media_reference: { media_series_name?: string | null; title?: string | null } }) => {
+        series_title = response.media_reference.media_series_name
+          ?? response.media_reference.title
+          ?? undefined
+      })
+      .catch(() => {
+        series_title = undefined
+      })
+  })
+
+  let page_title = $derived(
+    series_title
+      ? `${series_title} (Series)`
+      : `Series #${series_id_number}`,
+  )
+</script>
+
+{#snippet sort_options()}
+  <option value="series_index">Series Index</option>
+  <option value="source_created_at">Created At</option>
+  <option value="created_at">Added On</option>
+  <option value="updated_at">Updated At</option>
+  <option value="view_count">View Count</option>
+  <option value="last_viewed_at">Last Viewed</option>
+  <option value="duration">Duration</option>
+{/snippet}
+
+<div class="h-dvh">
+  <Header title={page_title} bind:height={dimensions.heights.header}>
+    <SearchParams {controller} {sort_options} />
+  </Header>
+  <div class="grid grid-cols-[auto_1fr]">
+    <MediaDetails {controller} />
+    <div class="relative">
+      <MediaView {controller} />
+      <MediaList {controller} show_series_index />
+    </div>
+  </div>
+  <Footer {controller} bind:height={dimensions.heights.footer} />
+</div>
+
+<svelte:window
+  on:keydown|capture={controller.keybinds.handler}
+  bind:innerHeight={dimensions.heights.screen}
+/>
diff --git a/packages/web/src/routes/series/[series_id]/controller.ts b/packages/web/src/routes/series/[series_id]/controller.ts
new file mode 100644
index 00000000..dbe03442
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/controller.ts
@@ -0,0 +1,38 @@
+import type { Config } from '$lib/server/config.ts'
+import { BrowseLikeController } from '$lib/base_controller.ts'
+import {
+  create_focuser,
+  SettingsRune,
+  MediaListRune,
+  MediaSelectionsRune,
+  create_dimensional_rune,
+} from '$lib/runes/index.ts'
+import { SeriesQueryParamsManager } from './runes/queryparams.svelte.ts'
+
+
+class SeriesController extends BrowseLikeController {
+  runes: {
+    media_list: MediaListRune
+    focus: ReturnType<typeof create_focuser>
+    dimensions: ReturnType<typeof create_dimensional_rune>
+    settings: SettingsRune
+    media_selections: MediaSelectionsRune
+    queryparams: SeriesQueryParamsManager
+  }
+
+  public constructor(config: Config, series_id: number) {
+    super(config)
+
+    const media_list_rune = new MediaListRune(this.client, this.settings)
+    this.runes = {
+      media_list: media_list_rune,
+      focus: create_focuser(),
+      dimensions: create_dimensional_rune(),
+      settings: new SettingsRune(this.client, this.config),
+      media_selections: new MediaSelectionsRune(this.client, media_list_rune),
+      queryparams: new SeriesQueryParamsManager(this.client, media_list_rune, series_id),
+    }
+  }
+}
+
+export { SeriesController }
diff --git a/packages/web/src/routes/series/[series_id]/runes/queryparams.svelte.ts b/packages/web/src/routes/series/[series_id]/runes/queryparams.svelte.ts
new file mode 100644
index 00000000..9f6d0b6d
--- /dev/null
+++ b/packages/web/src/routes/series/[series_id]/runes/queryparams.svelte.ts
@@ -0,0 +1,248 @@
+import type { inputs } from '@forager/core'
+import type { MediaListRune } from '$lib/runes/index.ts'
+import type { BaseController } from '$lib/base_controller.ts'
+import { onMount } from 'svelte'
+import { pushState } from '$app/navigation'
+import { Rune } from '$lib/runes/rune.ts'
+
+
+type SortBy = inputs.SeriesSearch['sort_by']
+
+interface SearchParams {
+  search_string: string
+  filepath: string | undefined
+  sort: SortBy
+  order: 'desc' | 'asc'
+  unread_only: boolean
+  stars: number | undefined
+  stars_equality: 'gte' | 'eq' | undefined
+  media_type: string
+}
+
+const DEFAULTS: SearchParams = {
+  search_string: '',
+  filepath: undefined,
+  sort: 'series_index',
+  order: 'asc',
+  unread_only: false,
+  stars: undefined,
+  stars_equality: undefined,
+  media_type: 'all',
+}
+
+const URL_PARAM_MAP = {
+  search_string: 'tags',
+  unread_only: 'unread',
+  media_type: 'type',
+} as const satisfies Partial<Record<keyof SearchParams, string>>
+type UrlParamMap = typeof URL_PARAM_MAP
+
+type SearchParamsReversed = { [K in keyof UrlParamMap as UrlParamMap[K]]: K }
+const URL_PARAM_MAP_REVERSED = Object.fromEntries(
+  Object.entries(URL_PARAM_MAP).map(([key, val]) => [val, key]),
+) as SearchParamsReversed
+
+/**
+ * Manages browser URL query parameters for a media series detail view.
+ *
+ * Implements the same two-state (`current` / `draft`) contract as the browse
+ * route so that shared browse-like components can operate uniformly.
+ */
+export class SeriesQueryParamsManager extends Rune {
+  public DEFAULTS = DEFAULTS
+
+  public current: SearchParams = $state({ ...DEFAULTS })
+  public draft: SearchParams = $state({ ...DEFAULTS })
+
+  public current_serialized: string = '?'
+
+  #media_list: MediaListRune
+  #series_id: number
+
+  constructor(client: BaseController['client'], media_list: MediaListRune, series_id: number) {
+    super(client)
+    this.#media_list = media_list
+    this.#series_id = series_id
+
+    onMount(async () => {
+      const params = this.#parse_url(new URL(window.location.toString()))
+      this.current = params
+      this.draft = { ...params }
+      await this.#execute_search(params)
+
+      window.addEventListener('popstate', async () => {
+        const params = this.#parse_url(new URL(window.location.toString()))
+        this.current = params
+        this.draft = { ...params }
+        await this.#execute_search(params)
+      })
+    })
+  }
+
+  get series_id() {
+    return this.#series_id
+  }
+
+  #parse_url(url: URL): SearchParams {
+    const params: SearchParams = { ...DEFAULTS }
+    const search = url.searchParams
+
+    this.current_serialized = url.search
+
+    if (search) {
+      for (const [key, val] of search.entries()) {
+        const params_key: keyof SearchParams = URL_PARAM_MAP_REVERSED[key] ?? key
+
+        if (params_key === 'search_string') {
+          params.search_string = val.replaceAll(',', ' ')
+        } else if (params_key === 'stars') {
+          params.stars = parseInt(val)
+        } else if (params_key === 'filepath') {
+          params.filepath = decodeURIComponent(val)
+        } else {
+          // @ts-ignore - dynamic assignment
+          params[params_key] = val
+        }
+      }
+    }
+
+    return params
+  }
+
+  public serialize(params: SearchParams): string | null {
+    const url_params = new Map<string, string>()
+
+    for (const [key, value] of Object.entries(params)) {
+      if (value !== DEFAULTS[key as keyof SearchParams] && value !== undefined) {
+        const param_name = URL_PARAM_MAP[key as keyof SearchParams] ?? key
+
+        if (key === 'search_string') {
+          const encoded = encodeURIComponent(String(value).replaceAll(/\s/g, ','))
+            .replaceAll('%3A', ':')
+            .replaceAll('%2C', ',')
+          url_params.set(param_name, encoded)
+        } else if (key === 'filepath') {
+          if (value) {
+            url_params.set(param_name, encodeURIComponent(String(value)))
+          }
+        } else {
+          url_params.set(param_name, String(value))
+        }
+      }
+    }
+
+    const query_string = Array.from(url_params.entries())
+      .map(([key, val]) => `${key}=${val}`)
+      .join('&')
+
+    return query_string ? '?' + query_string : null
+  }
+
+  #write_url(params: SearchParams): void {
+    const serialized = this.serialize(params)
+
+    if (this.current_serialized !== serialized) {
+      this.current_serialized = serialized ?? ''
+      this.current = { ...params }
+      if (serialized) {
+        pushState(serialized, {})
+      } else {
+        pushState(window.location.pathname, {})
+      }
+    }
+  }
+
+  async #execute_search(params: SearchParams): Promise<void> {
+    this.#media_list.clear()
+
+    const tags = params.search_string.split(' ').filter((t) => t.length > 0)
+    const query: inputs.SeriesSearch['query'] = {
+      series_id: this.#series_id,
+      tags: tags.length > 0 ? tags.map(this.#parse_tag) : undefined,
+      filepath: params.filepath,
+    }
+
+    if (params.unread_only) {
+      if (params.unread_only === 'true' || params.unread_only === true) {
+        query.unread = true
+      }
+    }
+
+    if (params.stars !== undefined) {
+      query.stars = parseInt(String(params.stars))
+      query.stars_equality = params.stars_equality ?? 'gte'
+    }
+
+    if (params.media_type === 'animated') {
+      query.animated = true
+    }
+
+    await this.#media_list.paginate({
+      type: 'series_search',
+      params: {
+        query,
+        sort_by: params.sort,
+        order: params.order,
+      },
+    })
+  }
+
+  #parse_tag(tag_str: string): { group?: string; name: string } {
+    const sep_index = tag_str.indexOf(':')
+    if (sep_index === -1) {
+      return { name: tag_str }
+    }
+    return {
+      group: tag_str.slice(0, sep_index),
+      name: tag_str.slice(sep_index + 1),
+    }
+  }
+
+  public async submit(): Promise<void> {
+    this.#write_url(this.draft)
+    await this.#execute_search(this.draft)
+  }
+
+  public async goto(params: SearchParams): Promise<void> {
+    this.draft = { ...params }
+    await this.submit()
+  }
+
+  public merge(partial_params: Partial<Record<string, any>>): SearchParams {
+    const params = { ...this.current }
+
+    for (const [key, val] of Object.entries(partial_params)) {
+      const params_key: keyof SearchParams = URL_PARAM_MAP_REVERSED[key] ?? key
+
+      if (params_key === 'search_string') {
+        const search_strings = new Set(params.search_string.split(/\s+/))
+        search_strings.add(val)
+        params.search_string = [...search_strings].join(' ').trim()
+      } else {
+        // @ts-ignore - dynamic assignment
+        params[params_key] = val
+      }
+    }
+
+    return params
+  }
+
+  public get contextual_query(): inputs.SeriesSearch['query'] {
+    const current_tags = this.current.search_string.split(/\s+/).filter((t) => t.length > 0)
+    const draft_tags = new Set(
+      this.draft.search_string.split(/\s+/).filter((t) => t.length > 0),
+    )
+    const tags = current_tags.filter((tag) => draft_tags.has(tag))
+    return {
+      series_id: this.#series_id,
+      tags: tags.length > 0 ? tags.map(this.#parse_tag) : undefined,
+      filepath: this.current.filepath,
+      unread: this.current.unread_only || undefined,
+      animated: this.current.media_type === 'animated' ? true : undefined,
+    }
+  }
+
+  public get human_readable_summary(): string {
+    return this.current.search_string || 'Series'
+  }
+}

From c7eecf1479631d8b79e178a49865bf5f95a54039 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 7 Jul 2026 02:46:04 +0000
Subject: [PATCH 2/3] impl(web): apply media_type search filter to series query
 params

Brings the /series/<id> route query params in line with the browse
route after main's media_type search filter (#71). Maps the
image/video/audio dropdown values to the canonical uppercase
query.media_type filter now supported by forager.series.search, in
addition to the existing 'animated' handling.

Co-authored-by: andykais-claude <andykais-claude@users.noreply.github.com>
---
 .../[series_id]/runes/queryparams.svelte.ts   | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/routes/series/[series_id]/runes/queryparams.svelte.ts b/packages/web/src/routes/series/[series_id]/runes/queryparams.svelte.ts
index 9f6d0b6d..1fbd86f5 100644
--- a/packages/web/src/routes/series/[series_id]/runes/queryparams.svelte.ts
+++ b/packages/web/src/routes/series/[series_id]/runes/queryparams.svelte.ts
@@ -8,6 +8,27 @@ import { Rune } from '$lib/runes/rune.ts'
 
 type SortBy = inputs.SeriesSearch['sort_by']
 
+type MediaTypeFilter = 'all' | 'animated' | 'image' | 'video' | 'audio'
+
+const MEDIA_TYPE_FILTER_VALUES = new Set<MediaTypeFilter>([
+  'all',
+  'animated',
+  'image',
+  'video',
+  'audio',
+])
+
+// maps the lowercase URL/UI value to the uppercase core enum value
+const MEDIA_TYPE_TO_CORE = {
+  image: 'IMAGE',
+  video: 'VIDEO',
+  audio: 'AUDIO',
+} as const satisfies Record<'image' | 'video' | 'audio', NonNullable<inputs.SeriesSearch['query']>['media_type']>
+
+function is_core_media_type(v: MediaTypeFilter): v is keyof typeof MEDIA_TYPE_TO_CORE {
+  return v in MEDIA_TYPE_TO_CORE
+}
+
 interface SearchParams {
   search_string: string
   filepath: string | undefined
@@ -16,7 +37,7 @@ interface SearchParams {
   unread_only: boolean
   stars: number | undefined
   stars_equality: 'gte' | 'eq' | undefined
-  media_type: string
+  media_type: MediaTypeFilter
 }
 
 const DEFAULTS: SearchParams = {
@@ -99,6 +120,10 @@ export class SeriesQueryParamsManager extends Rune {
           params.stars = parseInt(val)
         } else if (params_key === 'filepath') {
           params.filepath = decodeURIComponent(val)
+        } else if (params_key === 'media_type') {
+          if (MEDIA_TYPE_FILTER_VALUES.has(val as MediaTypeFilter)) {
+            params.media_type = val as MediaTypeFilter
+          }
         } else {
           // @ts-ignore - dynamic assignment
           params[params_key] = val
@@ -173,8 +198,13 @@ export class SeriesQueryParamsManager extends Rune {
       query.stars_equality = params.stars_equality ?? 'gte'
     }
 
+    // Handle media type filtering. The dropdown is mutually exclusive in the UI:
+    // 'animated' maps to query.animated, while 'image'/'video'/'audio' map to
+    // the canonical uppercase query.media_type filter on core.
     if (params.media_type === 'animated') {
       query.animated = true
+    } else if (params.media_type !== 'all') {
+      query.media_type = MEDIA_TYPE_TO_CORE[params.media_type]
     }
 
     await this.#media_list.paginate({
@@ -233,12 +263,14 @@ export class SeriesQueryParamsManager extends Rune {
       this.draft.search_string.split(/\s+/).filter((t) => t.length > 0),
     )
     const tags = current_tags.filter((tag) => draft_tags.has(tag))
+    const media_type = this.current.media_type
     return {
       series_id: this.#series_id,
       tags: tags.length > 0 ? tags.map(this.#parse_tag) : undefined,
       filepath: this.current.filepath,
       unread: this.current.unread_only || undefined,
-      animated: this.current.media_type === 'animated' ? true : undefined,
+      animated: media_type === 'animated' ? true : undefined,
+      media_type: is_core_media_type(media_type) ? MEDIA_TYPE_TO_CORE[media_type] : undefined,
     }
   }
 

From 8fa1f1c7ce25330e0b742bb57d0be8ed709e0b2c Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 15 Jul 2026 03:09:03 +0000
Subject: [PATCH 3/3] refactor(web): address browsable shared-component design
 review

Applies the PR #78 design review feedback:

- Rename the browse_like/BrowseLike pattern to browsable/Browsable
  (/components/browsable, BrowsableController).
- Hole 1: add BrowsableQueryParams (extends BaseQueryParams) that factors
  out the duplicated URL parse/serialize/merge and shared query-building
  helpers; browse + series managers now only implement route-specific bits.
  The popstate listener is cleaned up once in BaseQueryParams.
- Hole 2: replace the any-typed BrowseLikeQueryParams contract with a
  concrete BrowsableSearchParams interface (generic over the sort union).
- Hole 3: remove group_by/mode references from the shared SearchResults.
- Hole 5: replace show_series_index/show_series_link boolean props with a
  single tile_footer snippet supplied per route.
- Hole 6: expose series_index via a typed field set from the series-search
  output type instead of an unsafe double-cast.
- Hole 7: extract the duplicated page chrome into a shared BrowsableShell
  component rendered by thin browse/series +page markers.

Also fixes a few incidental pre-existing type issues in touched files
(SelectInput options/onchange, MediaListRune constructor args).

Co-authored-by: andykais-claude <andykais-claude@users.noreply.github.com>
---
 packages/web/src/lib/base_controller.ts       |  37 +--
 .../web/src/lib/components/SelectInput.svelte |   4 +-
 .../browsable/BrowsableShell.svelte           |  44 +++
 .../{browse_like => browsable}/Footer.svelte  |   4 +-
 .../MediaDetailEntry.svelte                   |   4 +-
 .../MediaDetails.svelte                       |   4 +-
 .../MediaList.svelte                          |  14 +-
 .../MediaView.svelte                          |   4 +-
 .../SearchLink.svelte                         |   6 +-
 .../SearchParams.svelte                       |   4 +-
 .../SearchResults.svelte                      |  49 +--
 .../src/lib/runes/base_queryparams.svelte.ts  |  27 +-
 .../lib/runes/browsable_queryparams.svelte.ts | 227 +++++++++++++
 packages/web/src/lib/runes/index.ts           |   1 +
 .../src/lib/runes/media_list_rune.svelte.ts   |  16 +-
 .../src/lib/runes/media_view_rune.svelte.ts   |  11 +-
 packages/web/src/routes/browse/+page.svelte   |  49 +--
 packages/web/src/routes/browse/controller.ts  |   6 +-
 .../routes/browse/runes/queryparams.svelte.ts | 313 +++---------------
 .../routes/series/[series_id]/+page.svelte    |  33 +-
 .../routes/series/[series_id]/controller.ts   |   6 +-
 .../[series_id]/runes/queryparams.svelte.ts   | 240 ++------------
 22 files changed, 458 insertions(+), 645 deletions(-)
 create mode 100644 packages/web/src/lib/components/browsable/BrowsableShell.svelte
 rename packages/web/src/lib/components/{browse_like => browsable}/Footer.svelte (94%)
 rename packages/web/src/lib/components/{browse_like => browsable}/MediaDetailEntry.svelte (92%)
 rename packages/web/src/lib/components/{browse_like => browsable}/MediaDetails.svelte (97%)
 rename packages/web/src/lib/components/{browse_like => browsable}/MediaList.svelte (85%)
 rename packages/web/src/lib/components/{browse_like => browsable}/MediaView.svelte (98%)
 rename packages/web/src/lib/components/{browse_like => browsable}/SearchLink.svelte (75%)
 rename packages/web/src/lib/components/{browse_like => browsable}/SearchParams.svelte (98%)
 rename packages/web/src/lib/components/{browse_like => browsable}/SearchResults.svelte (74%)
 create mode 100644 packages/web/src/lib/runes/browsable_queryparams.svelte.ts

diff --git a/packages/web/src/lib/base_controller.ts b/packages/web/src/lib/base_controller.ts
index 708f10a8..b1fd89f0 100644
--- a/packages/web/src/lib/base_controller.ts
+++ b/packages/web/src/lib/base_controller.ts
@@ -9,7 +9,10 @@ import {
   MediaSelectionsRune,
   type DimensionsRune,
 } from '$lib/runes/index.ts'
-import type { BaseQueryParams } from '$lib/runes/base_queryparams.svelte.ts'
+import type {
+  BrowsableQueryParams,
+  BrowsableSearchParams,
+} from '$lib/runes/browsable_queryparams.svelte.ts'
 import {Keybinds} from '$lib/keybinds.ts'
 
 
@@ -39,39 +42,23 @@ abstract class BaseController {
 
 
 /**
- * Minimal shape that a queryparams rune must implement to be usable by the
- * shared browse-like components (MediaList, MediaDetails, SearchResults, etc.).
+ * Shared controller shape used by the browsable routes (`/browse`,
+ * `/series/<id>`). Route-specific queryparams runes extend
+ * {@linkcode BrowsableSearchParams} with their own fields, but the core runes
+ * listed here are required so that the shared browsable components can operate
+ * uniformly across routes.
  */
-export interface BrowseLikeQueryParams<TParams extends Record<string, any> = Record<string, any>> {
-  current: TParams
-  draft: TParams
-  readonly DEFAULTS: TParams
-  readonly contextual_query: any
-  readonly human_readable_summary: string
-  serialize(params: TParams): string | null
-  goto(params: TParams): Promise<void>
-  submit(): Promise<void>
-  merge(partial: Partial<Record<string, any>>): TParams
-}
-
-
-/**
- * Shared controller shape used by the browse-like routes (`/browse`,
- * `/series/<id>`). Route-specific queryparams runes may extend the shape with
- * their own fields, but the core runes listed here are required so that shared
- * components can operate uniformly across routes.
- */
-abstract class BrowseLikeController extends BaseController {
+abstract class BrowsableController extends BaseController {
   abstract runes: {
     media_list: MediaListRune
     focus: ReturnType<typeof create_focuser>
     dimensions: DimensionsRune
     settings: SettingsRune
     media_selections: MediaSelectionsRune
-    queryparams: BrowseLikeQueryParams
+    queryparams: BrowsableQueryParams<BrowsableSearchParams>
   }
 
   handlers = {}
 }
 
-export { BaseController, BrowseLikeController }
+export { BaseController, BrowsableController }
diff --git a/packages/web/src/lib/components/SelectInput.svelte b/packages/web/src/lib/components/SelectInput.svelte
index f8b7e702..264666ca 100644
--- a/packages/web/src/lib/components/SelectInput.svelte
+++ b/packages/web/src/lib/components/SelectInput.svelte
@@ -5,9 +5,9 @@
   }
   interface Props {
     label: string
-    options: SelectOption
+    options: SelectOption[]
     value: string
-    onchange: () => void | undefined
+    onchange: (event?: Event) => unknown
   }
   let {
     label,
diff --git a/packages/web/src/lib/components/browsable/BrowsableShell.svelte b/packages/web/src/lib/components/browsable/BrowsableShell.svelte
new file mode 100644
index 00000000..3850768d
--- /dev/null
+++ b/packages/web/src/lib/components/browsable/BrowsableShell.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import Header from '$lib/components/Header.svelte'
+  import SearchParams from '$lib/components/browsable/SearchParams.svelte'
+  import MediaDetails from '$lib/components/browsable/MediaDetails.svelte'
+  import MediaView from '$lib/components/browsable/MediaView.svelte'
+  import MediaList from '$lib/components/browsable/MediaList.svelte'
+  import Footer from '$lib/components/browsable/Footer.svelte'
+  import type { BrowsableController } from '$lib/base_controller.ts'
+  import type { MediaViewRune } from '$lib/runes/index.ts'
+
+  interface Props {
+    controller: BrowsableController
+    title: string
+    /** Route-specific <option> elements for the sort_by select. */
+    sort_options: Snippet
+    /** Optional route-specific filter controls (e.g. browse's search mode). */
+    extra_filters?: Snippet
+    /** Optional per-tile footer (e.g. "View series" link, `#index` label). */
+    tile_footer?: Snippet<[MediaViewRune]>
+  }
+
+  let { controller, title, sort_options, extra_filters, tile_footer }: Props = $props()
+  const { dimensions } = controller.runes
+</script>
+
+<div class="h-dvh">
+  <Header {title} bind:height={dimensions.heights.header}>
+    <SearchParams {controller} {sort_options} {extra_filters} />
+  </Header>
+  <div class="grid grid-cols-[auto_1fr]">
+    <MediaDetails {controller} />
+    <div class="relative">
+      <MediaView {controller} />
+      <MediaList {controller} {tile_footer} />
+    </div>
+  </div>
+  <Footer {controller} bind:height={dimensions.heights.footer} />
+</div>
+
+<svelte:window
+  on:keydown|capture={controller.keybinds.handler}
+  bind:innerHeight={dimensions.heights.screen}
+/>
diff --git a/packages/web/src/lib/components/browse_like/Footer.svelte b/packages/web/src/lib/components/browsable/Footer.svelte
similarity index 94%
rename from packages/web/src/lib/components/browse_like/Footer.svelte
rename to packages/web/src/lib/components/browsable/Footer.svelte
index 54d8d0ef..3302da5e 100644
--- a/packages/web/src/lib/components/browse_like/Footer.svelte
+++ b/packages/web/src/lib/components/browsable/Footer.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import * as theme from '$lib/theme.ts'
-  import type { BrowseLikeController } from '$lib/base_controller.ts'
+  import type { BrowsableController } from '$lib/base_controller.ts'
 
-  let { controller, height = $bindable() }: { controller: BrowseLikeController; height: number } = $props()
+  let { controller, height = $bindable() }: { controller: BrowsableController; height: number } = $props()
 
 
   function human_readable_number(n: number) {
diff --git a/packages/web/src/lib/components/browse_like/MediaDetailEntry.svelte b/packages/web/src/lib/components/browsable/MediaDetailEntry.svelte
similarity index 92%
rename from packages/web/src/lib/components/browse_like/MediaDetailEntry.svelte
rename to packages/web/src/lib/components/browsable/MediaDetailEntry.svelte
index 03ba4c96..65d8f3e5 100644
--- a/packages/web/src/lib/components/browse_like/MediaDetailEntry.svelte
+++ b/packages/web/src/lib/components/browsable/MediaDetailEntry.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import * as datetime from '@std/datetime'
   import type { Json } from '@andykais/ts-rpc/adapters/sveltekit.ts'
-  import type { BrowseLikeController } from '$lib/base_controller.ts'
+  import type { BrowsableController } from '$lib/base_controller.ts'
 
   let { controller, ...props }: {
-    controller: BrowseLikeController
+    controller: BrowsableController
     label: string
     content: string | number | Date | null | Json
     type?: 'text' | 'datetime-local'
diff --git a/packages/web/src/lib/components/browse_like/MediaDetails.svelte b/packages/web/src/lib/components/browsable/MediaDetails.svelte
similarity index 97%
rename from packages/web/src/lib/components/browse_like/MediaDetails.svelte
rename to packages/web/src/lib/components/browsable/MediaDetails.svelte
index c20798f1..4db03696 100644
--- a/packages/web/src/lib/components/browse_like/MediaDetails.svelte
+++ b/packages/web/src/lib/components/browsable/MediaDetails.svelte
@@ -10,8 +10,8 @@
   import { MagnifyingGlassPlus, ArrowTopRightOnSquare, TrashOutline } from '$lib/icons/mod.ts'
   import * as parsers from '$lib/parsers.ts'
 
-  import type { BrowseLikeController } from '$lib/base_controller.ts'
-  let { controller }: { controller: BrowseLikeController } = $props()
+  import type { BrowsableController } from '$lib/base_controller.ts'
+  let { controller }: { controller: BrowsableController } = $props()
   let { dimensions, media_selections, settings, queryparams } = controller.runes
 
   let new_tag_str = $state<string>('')
diff --git a/packages/web/src/lib/components/browse_like/MediaList.svelte b/packages/web/src/lib/components/browsable/MediaList.svelte
similarity index 85%
rename from packages/web/src/lib/components/browse_like/MediaList.svelte
rename to packages/web/src/lib/components/browsable/MediaList.svelte
index 61da0096..0de63cf7 100644
--- a/packages/web/src/lib/components/browse_like/MediaList.svelte
+++ b/packages/web/src/lib/components/browsable/MediaList.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte'
   import Scroller from '$lib/components/Scroller.svelte'
   import SearchResults from './SearchResults.svelte'
-  import type { BrowseLikeController } from '$lib/base_controller.ts'
+  import type { BrowsableController } from '$lib/base_controller.ts'
+  import type { MediaViewRune } from '$lib/runes/index.ts'
 
   let {
     controller,
-    show_series_index = false,
-    show_series_link = false,
+    tile_footer,
   }: {
-    controller: BrowseLikeController
-    show_series_index?: boolean
-    show_series_link?: boolean
+    controller: BrowsableController
+    tile_footer?: Snippet<[MediaViewRune]>
   } = $props()
   let media_list_element: HTMLElement
 
@@ -62,6 +62,6 @@
     ]}
     style="height: {controller.runes.dimensions.heights.media_list}px"
   >
-    <SearchResults {controller} {show_series_index} {show_series_link} />
+    <SearchResults {controller} {tile_footer} />
   </Scroller>
 </div>
diff --git a/packages/web/src/lib/components/browse_like/MediaView.svelte b/packages/web/src/lib/components/browsable/MediaView.svelte
similarity index 98%
rename from packages/web/src/lib/components/browse_like/MediaView.svelte
rename to packages/web/src/lib/components/browsable/MediaView.svelte
index ef0fef62..333a62f4 100644
--- a/packages/web/src/lib/components/browse_like/MediaView.svelte
+++ b/packages/web/src/lib/components/browsable/MediaView.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { BrowseLikeController } from '$lib/base_controller.ts'
+  import type { BrowsableController } from '$lib/base_controller.ts'
 
   interface Props {
-    controller: BrowseLikeController
+    controller: BrowsableController
   }
 
   // TODO wire this into settings
diff --git a/packages/web/src/lib/components/browse_like/SearchLink.svelte b/packages/web/src/lib/components/browsable/SearchLink.svelte
similarity index 75%
rename from packages/web/src/lib/components/browse_like/SearchLink.svelte
rename to packages/web/src/lib/components/browsable/SearchLink.svelte
index fc3e62a4..7ae37675 100644
--- a/packages/web/src/lib/components/browse_like/SearchLink.svelte
+++ b/packages/web/src/lib/components/browsable/SearchLink.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import type { BrowseLikeController } from '$lib/base_controller.ts'
+  import type { BrowsableController } from '$lib/base_controller.ts'
   import type { SvelteHTMLElements, ClassValue } from 'svelte/elements'
 
   interface Props {
-    controller: BrowseLikeController
-    params: Partial<BrowseLikeController['runes']['queryparams']['DEFAULTS']>
+    controller: BrowsableController
+    params: BrowsableController['runes']['queryparams']['DEFAULTS']
     class?: ClassValue
     title?: string
     children: SvelteHTMLElements['div']['children']
diff --git a/packages/web/src/lib/components/browse_like/SearchParams.svelte b/packages/web/src/lib/components/browsable/SearchParams.svelte
similarity index 98%
rename from packages/web/src/lib/components/browse_like/SearchParams.svelte
rename to packages/web/src/lib/components/browsable/SearchParams.svelte
index 7b7d7cec..571553be 100644
--- a/packages/web/src/lib/components/browse_like/SearchParams.svelte
+++ b/packages/web/src/lib/components/browsable/SearchParams.svelte
@@ -4,12 +4,12 @@
   import Icon from '$lib/components/Icon.svelte'
   import { Filter, ArrowDown, ArrowUp } from '$lib/icons/mod.ts'
   import TagAutoCompleteInput from '$lib/components/TagAutoCompleteInput.svelte'
-  import type { BrowseLikeController } from '$lib/base_controller.ts'
+  import type { BrowsableController } from '$lib/base_controller.ts'
   import StarInput from '$lib/components/StarInput.svelte'
   import type { Snippet } from 'svelte'
 
   interface Props {
-    controller: BrowseLikeController
+    controller: BrowsableController
     /**
      * Renders route-specific <option> elements for the sort_by select.
      */
diff --git a/packages/web/src/lib/components/browse_like/SearchResults.svelte b/packages/web/src/lib/components/browsable/SearchResults.svelte
similarity index 74%
rename from packages/web/src/lib/components/browse_like/SearchResults.svelte
rename to packages/web/src/lib/components/browsable/SearchResults.svelte
index 6b114798..eaf6a769 100644
--- a/packages/web/src/lib/components/browse_like/SearchResults.svelte
+++ b/packages/web/src/lib/components/browsable/SearchResults.svelte
@@ -1,27 +1,24 @@
 <script lang="ts">
-  import type { BrowseLikeController } from '$lib/base_controller.ts'
+  import type { Snippet } from 'svelte'
+  import type { BrowsableController } from '$lib/base_controller.ts'
+  import { MediaFileRune, MediaSeriesRune, MediaGroupRune, type MediaViewRune } from '$lib/runes/index.ts'
   import * as theme from '$lib/theme.ts'
   import { focusable, scrollable } 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'
 
   interface Props {
-    controller: BrowseLikeController
+    controller: BrowsableController
     /**
-     * When true, display the series_index under each tile (for the series view).
+     * Optional per-tile footer, rendered under each tile with the tile's rune.
+     * Routes supply their own footer (e.g. a "View series" link on `/browse`,
+     * a `#index` label on `/series/<id>`), keeping this component route-agnostic.
      */
-    show_series_index?: boolean
-    /**
-     * When true, show a link under media-series tiles pointing to the series
-     * detail view. Defaults to false for routes that are themselves already a
-     * series view.
-     */
-    show_series_link?: boolean
+    tile_footer?: Snippet<[MediaViewRune]>
   }
 
-  let { controller, show_series_index = false, show_series_link = false }: Props = $props()
-  const { queryparams, settings, media_selections, media_list } = controller.runes
+  let { controller, tile_footer }: Props = $props()
+  const { settings, media_selections, media_list } = controller.runes
 
   const icon_size = 14
   const icon_color = theme.colors.green[200]
@@ -113,7 +110,7 @@
 
           <!-- info chips -->
           <div class="flex text-xs text-gray-400 justify-between p-0.5">
-            {#if result.media_type === 'media_file'}
+            {#if result instanceof MediaFileRune}
               {#if result.media_file.media_type === 'VIDEO'}
                 <span class="flex">
                   <Icon data={icons.PlayCircle} fill={icon_color} stroke="none" size={icon_size} />
@@ -131,34 +128,18 @@
               {:else}
                 unknown media type {result.media_file.media_type}
               {/if}
-            {:else if result.media_type === 'media_series'}
+            {:else if result instanceof MediaSeriesRune}
               <Icon data={icons.Copy} fill={icon_color} stroke="none" size={icon_size} />
               <span>({result.media_reference.media_series_length})</span>
-            {:else if result.media_type === 'grouped'}
+            {:else if result instanceof MediaGroupRune}
               <Icon data={icons.Copy} fill={icon_color} stroke="none" size={icon_size} />
-              <SearchLink
-                class="hover:text-green-500 hover:bg-gray-700 px-2 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>
-            {:else}
-              UNEXPECTED MEDIA TYPE {result.media_type}
             {/if}
           </div>
 
-          <!-- series row: either a series_index label (series view) or a "View series" link (browse view) -->
-          {#if show_series_index && result.series_index !== undefined}
-            <div class="flex text-xs text-gray-400 justify-center p-0.5">
-              <span title="Page in series">#{result.series_index}</span>
-            </div>
-          {:else if show_series_link && result.media_type === 'media_series'}
+          {#if tile_footer}
             <div class="flex text-xs justify-center p-0.5">
-              <a
-                class="text-green-300 hover:text-green-400 hover:underline"
-                href={`/series/${result.media_reference.id}`}
-                title="View this media series"
-                onclick={(e) => e.stopPropagation()}
-              >View series</a>
+              {@render tile_footer(result)}
             </div>
           {/if}
         </div>
diff --git a/packages/web/src/lib/runes/base_queryparams.svelte.ts b/packages/web/src/lib/runes/base_queryparams.svelte.ts
index f0973022..444e88ca 100644
--- a/packages/web/src/lib/runes/base_queryparams.svelte.ts
+++ b/packages/web/src/lib/runes/base_queryparams.svelte.ts
@@ -23,28 +23,33 @@ export abstract class BaseQueryParams<TParams extends Record<string, any>> exten
     this.current = { ...this.DEFAULTS }
     this.draft = { ...this.DEFAULTS }
 
-    onMount(async () => {
-      const params = this.parse_url(new URL(window.location.toString()))
-      this.current = params
-      this.draft = { ...params }
-      await this.execute_search(params)
-
-      window.addEventListener('popstate', async () => {
+    onMount(() => {
+      const sync_from_url = async () => {
         const params = this.parse_url(new URL(window.location.toString()))
         this.current = params
         this.draft = { ...params }
         await this.execute_search(params)
-      })
+      }
+
+      sync_from_url()
+
+      // Keep state in sync with browser back/forward navigation.
+      window.addEventListener('popstate', sync_from_url)
+      return () => window.removeEventListener('popstate', sync_from_url)
     })
   }
 
   abstract get DEFAULTS(): TParams
   abstract get URL_PARAM_MAP(): Partial<Record<keyof TParams, string>>
 
-  protected get URL_PARAM_MAP_REVERSED(): Record<string, keyof TParams> {
+  // NOTE: typed as `Record<string, string>` (rather than `keyof TParams`) so
+  // that a subclass manager with extra params stays assignable to the shared
+  // `BrowsableQueryParams<BrowsableSearchParams>` contract. Callers cast the
+  // looked-up value back to `keyof TParams`.
+  protected get URL_PARAM_MAP_REVERSED(): Record<string, string> {
     return Object.fromEntries(
       Object.entries(this.URL_PARAM_MAP).map(([key, val]) => [val, key])
-    ) as Record<string, keyof TParams>
+    ) as Record<string, string>
   }
 
   protected parse_url(url: URL): TParams {
@@ -54,7 +59,7 @@ export abstract class BaseQueryParams<TParams extends Record<string, any>> exten
 
     if (search) {
       for (const [key, val] of search.entries()) {
-        const params_key: keyof TParams = this.URL_PARAM_MAP_REVERSED[key] ?? key
+        const params_key = (this.URL_PARAM_MAP_REVERSED[key] ?? key) as keyof TParams
         // @ts-ignore - dynamic assignment
         params[params_key] = val
       }
diff --git a/packages/web/src/lib/runes/browsable_queryparams.svelte.ts b/packages/web/src/lib/runes/browsable_queryparams.svelte.ts
new file mode 100644
index 00000000..168abd66
--- /dev/null
+++ b/packages/web/src/lib/runes/browsable_queryparams.svelte.ts
@@ -0,0 +1,227 @@
+import type { BaseController } from '$lib/base_controller.ts'
+import type { MediaListRune } from '$lib/runes/media_list_rune.svelte.ts'
+import { BaseQueryParams } from '$lib/runes/base_queryparams.svelte.ts'
+
+/**
+ * Mutually-exclusive media type filter surfaced in the search UI. `'animated'`
+ * maps to the core `query.animated` flag; `'image'`/`'video'`/`'audio'` map to
+ * the canonical uppercase `query.media_type` filter.
+ */
+export type MediaTypeFilter = 'all' | 'animated' | 'image' | 'video' | 'audio'
+
+const MEDIA_TYPE_FILTER_VALUES = new Set<MediaTypeFilter>([
+  'all',
+  'animated',
+  'image',
+  'video',
+  'audio',
+])
+
+// maps the lowercase URL/UI value to the uppercase core enum value
+export const MEDIA_TYPE_TO_CORE = {
+  image: 'IMAGE',
+  video: 'VIDEO',
+  audio: 'AUDIO',
+} as const
+
+export function is_core_media_type(v: MediaTypeFilter): v is keyof typeof MEDIA_TYPE_TO_CORE {
+  return v in MEDIA_TYPE_TO_CORE
+}
+
+/**
+ * Concrete set of filters shared by every browsable route (`/browse`,
+ * `/series/<id>`). The shared browsable components bind directly to these
+ * fields, so keeping the contract concrete (rather than `Record<string, any>`)
+ * turns a missing/renamed field into a compile error rather than a silent
+ * runtime `undefined`.
+ *
+ * `TSort` lets each route narrow the `sort` field to its own sort-by union.
+ */
+export interface BrowsableSearchParams<TSort extends string = string> {
+  search_string: string
+  filepath: string | undefined
+  sort: TSort
+  order: 'desc' | 'asc'
+  unread_only: boolean
+  stars: number | undefined
+  stars_equality: 'gte' | 'eq' | undefined
+  media_type: MediaTypeFilter
+}
+
+/** Common filter fields every core query object accepts. */
+export interface CommonQueryFilters {
+  unread?: boolean
+  stars?: number
+  stars_equality?: 'gte' | 'eq'
+  animated?: boolean
+  media_type?: (typeof MEDIA_TYPE_TO_CORE)[keyof typeof MEDIA_TYPE_TO_CORE]
+}
+
+/**
+ * Query-param manager shared by the browsable routes. Extends
+ * {@linkcode BaseQueryParams} (which owns the `current`/`draft` two-state model
+ * plus URL <-> state syncing) with the members the shared browsable components
+ * rely on but the tags route does not need: URL parse/serialize tuned for the
+ * browsable filter set, `merge`, `contextual_query`, `human_readable_summary`,
+ * and shared query-building helpers.
+ *
+ * Subclasses implement only the route-specific bits (`DEFAULTS`,
+ * `URL_PARAM_MAP`, `execute_search`, `contextual_query`).
+ */
+export abstract class BrowsableQueryParams<
+  TParams extends BrowsableSearchParams<string>,
+> extends BaseQueryParams<TParams> {
+  protected media_list: MediaListRune
+
+  constructor(client: BaseController['client'], media_list: MediaListRune) {
+    super(client)
+    this.media_list = media_list
+  }
+
+  protected override parse_url(url: URL): TParams {
+    const params: TParams = { ...this.DEFAULTS }
+    this.current_serialized = url.search
+
+    for (const [key, val] of url.searchParams.entries()) {
+      const params_key = (this.URL_PARAM_MAP_REVERSED[key] ?? key) as keyof TParams
+      this.parse_param(params, params_key, val)
+    }
+
+    this.post_parse(params, url)
+    return params
+  }
+
+  protected parse_param(params: TParams, key: keyof TParams, val: string): void {
+    if (key === 'search_string') {
+      params.search_string = val.replaceAll(',', ' ')
+    } else if (key === 'stars') {
+      params.stars = parseInt(val)
+    } else if (key === 'filepath') {
+      params.filepath = decodeURIComponent(val)
+    } else if (key === 'media_type') {
+      if (MEDIA_TYPE_FILTER_VALUES.has(val as MediaTypeFilter)) {
+        params.media_type = val as MediaTypeFilter
+      }
+    } else {
+      // @ts-ignore - dynamic assignment of route-specific params
+      params[key] = val
+    }
+  }
+
+  /** Hook for route-specific parsing after the shared fields are parsed. */
+  protected post_parse(_params: TParams, _url: URL): void {}
+
+  public override serialize(params: TParams): string | null {
+    const url_params = new Map<string, string>()
+
+    for (const [key, value] of Object.entries(params)) {
+      if (value !== this.DEFAULTS[key as keyof TParams] && value !== undefined) {
+        const name = (this.URL_PARAM_MAP[key as keyof TParams] ?? key) as string
+        this.serialize_param(url_params, key, name, value)
+      }
+    }
+
+    this.post_serialize(url_params)
+
+    const query_string = Array.from(url_params.entries())
+      .map(([key, val]) => `${key}=${val}`)
+      .join('&')
+
+    return query_string ? '?' + query_string : null
+  }
+
+  protected serialize_param(
+    url_params: Map<string, string>,
+    key: string,
+    name: string,
+    value: unknown,
+  ): void {
+    if (key === 'search_string') {
+      const encoded = encodeURIComponent(String(value).replaceAll(/\s/g, ','))
+        .replaceAll('%3A', ':')
+        .replaceAll('%2C', ',')
+      url_params.set(name, encoded)
+    } else if (key === 'filepath') {
+      if (value) {
+        url_params.set(name, encodeURIComponent(String(value)))
+      }
+    } else {
+      url_params.set(name, String(value))
+    }
+  }
+
+  /** Hook for route-specific serialization tweaks. */
+  protected post_serialize(_url_params: Map<string, string>): void {}
+
+  /**
+   * Merge partial params (URL param names or internal names) with the current
+   * params. Tags are additive; other keys are replaced.
+   */
+  public merge(partial_params: Partial<Record<string, unknown>>): TParams {
+    const params = { ...this.current }
+    for (const [key, val] of Object.entries(partial_params)) {
+      const params_key = (this.URL_PARAM_MAP_REVERSED[key] ?? key) as keyof TParams
+      this.merge_param(params, params_key, val)
+    }
+    return params
+  }
+
+  protected merge_param(params: TParams, key: keyof TParams, val: unknown): void {
+    if (key === 'search_string') {
+      const search_strings = new Set(params.search_string.split(/\s+/))
+      search_strings.add(val as string)
+      params.search_string = [...search_strings].join(' ').trim()
+    } else {
+      // @ts-ignore - dynamic assignment
+      params[key] = val
+    }
+  }
+
+  protected parse_tags(search_string: string): string[] {
+    return search_string.split(/\s+/).filter((t) => t.length > 0)
+  }
+
+  protected parse_tag(tag_str: string): { group?: string; name: string } {
+    const sep_index = tag_str.indexOf(':')
+    if (sep_index === -1) {
+      return { name: tag_str }
+    }
+    return {
+      group: tag_str.slice(0, sep_index),
+      name: tag_str.slice(sep_index + 1),
+    }
+  }
+
+  /**
+   * Apply the filters shared by every browsable route onto a core query object.
+   * `'animated'` maps to `query.animated`; `image`/`video`/`audio` map to the
+   * canonical uppercase `query.media_type`.
+   */
+  protected apply_common_filters<T extends CommonQueryFilters>(query: T, params: TParams): T {
+    if (params.unread_only) {
+      query.unread = true
+    }
+    if (params.stars !== undefined) {
+      query.stars = params.stars
+      query.stars_equality = params.stars_equality ?? 'gte'
+    }
+    if (params.media_type === 'animated') {
+      query.animated = true
+    } else if (is_core_media_type(params.media_type)) {
+      query.media_type = MEDIA_TYPE_TO_CORE[params.media_type]
+    }
+    return query
+  }
+
+  public get human_readable_summary(): string {
+    return this.current.search_string || this.empty_search_summary
+  }
+
+  /** Label shown when no search string is present. */
+  protected get empty_search_summary(): string {
+    return 'All media'
+  }
+
+  /** Query used to contextualize tag autocomplete for the current search. */
+  public abstract get contextual_query(): object
+}
diff --git a/packages/web/src/lib/runes/index.ts b/packages/web/src/lib/runes/index.ts
index a4f1c54c..152c2f8a 100644
--- a/packages/web/src/lib/runes/index.ts
+++ b/packages/web/src/lib/runes/index.ts
@@ -1,4 +1,5 @@
 export * from './base_queryparams.svelte.ts'
+export * from './browsable_queryparams.svelte.ts'
 export * from './focus_rune.svelte.ts'
 export * from './settings_rune.svelte.ts'
 export * from './media_list_rune.svelte.ts'
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 0ff2853f..ee2cd7b0 100644
--- a/packages/web/src/lib/runes/media_list_rune.svelte.ts
+++ b/packages/web/src/lib/runes/media_list_rune.svelte.ts
@@ -53,7 +53,7 @@ export class MediaListRune extends Rune {
 
   get content(): Result | null { return this.#state.content }
 
-  get results(): Result['results'] { return this.#state.results }
+  get results(): MediaViewRune[] { return this.#state.results }
 
   get total() { return this.#state.content?.total ?? 0 }
 
@@ -87,22 +87,28 @@ export class MediaListRune extends Rune {
     const params_type = params?.type ?? this.#saved_params_type
     this.#saved_params_type = params_type
     let content: Result
+    let results: MediaViewRune[]
     if (params_type === 'media') {
       content = await this.client.forager.media.search(fetch_params)
+      results = content.results.map(result => MediaViewRune.create(this.client, result, fetch_params))
     }
     else if (params_type === 'group_by') {
       fetch_params.limit = fetch_params.limit ?? 30
       content = await this.client.forager.media.group(fetch_params)
+      results = content.results.map(result => MediaViewRune.create(this.client, result, fetch_params))
     } else if (params_type === 'series_search') {
+      // series responses carry a typed `series_index`; thread it onto the rune
+      // rather than casting when it is read back out.
       content = await this.client.forager.series.search(fetch_params)
+      results = content.results.map(result => {
+        const rune = MediaViewRune.create(this.client, result, fetch_params)
+        rune.series_index = result.series_index
+        return rune
+      })
     } else {
       throw new Error('unimplemented')
     }
 
-    const results = content.results.map(result => {
-      return MediaViewRune.create(this.client, result, fetch_params)
-    })
-
     this.#cursor = content.cursor
     if (!this.#cursor) {
       this.#has_more = false
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 5f099e5e..db3274b1 100644
--- a/packages/web/src/lib/runes/media_view_rune.svelte.ts
+++ b/packages/web/src/lib/runes/media_view_rune.svelte.ts
@@ -15,6 +15,12 @@ export class MediaViewRune extends Rune {
   media_type!: MediaResponse['media_type'] | 'grouped'
   state = $state<State>()
   current_view: model_types.View
+  /**
+   * Populated for results returned from `forager.series.search`, which carry a
+   * `series_index`. Set type-safely by {@linkcode MediaListRune} rather than
+   * cast, so the field is only present where core guarantees it.
+   */
+  series_index: number | undefined = undefined
 
   protected constructor(client: BaseController['client'], media_response: MediaResponse) {
     super(client)
@@ -52,11 +58,6 @@ export class MediaViewRune extends Rune {
     return this.media.thumbnails
   }
 
-  get series_index(): number | undefined {
-    // Present on responses returned from `forager.series.search`
-    return (this.media as unknown as { series_index?: number }).series_index
-  }
-
   public update(media_info: inputs.MediaInfo, tags: inputs.MediaReferenceUpdateTags) {
     throw new Error('requires override')
   }
diff --git a/packages/web/src/routes/browse/+page.svelte b/packages/web/src/routes/browse/+page.svelte
index 142cf769..1651f75a 100644
--- a/packages/web/src/routes/browse/+page.svelte
+++ b/packages/web/src/routes/browse/+page.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-  import MediaDetails from '$lib/components/browse_like/MediaDetails.svelte'
-  import MediaList from '$lib/components/browse_like/MediaList.svelte'
-  import MediaView from '$lib/components/browse_like/MediaView.svelte'
-  import Footer from '$lib/components/browse_like/Footer.svelte'
-  import SearchParams from '$lib/components/browse_like/SearchParams.svelte'
-  import Header from '$lib/components/Header.svelte'
+  import BrowsableShell from '$lib/components/browsable/BrowsableShell.svelte'
   import SelectInput from '$lib/components/SelectInput.svelte'
+  import SearchLink from '$lib/components/browsable/SearchLink.svelte'
+  import { MediaSeriesRune, MediaGroupRune, type MediaViewRune } from '$lib/runes/index.ts'
 
   import { BrowseController } from './controller.ts'
 
@@ -13,7 +10,7 @@
   let props = $props()
 
   const controller = new BrowseController(props.data.config)
-  let { dimensions, focus, queryparams } = controller.runes
+  let { focus, queryparams } = controller.runes
   focus.stack({ component: 'BrowsePage', focus: 'page' })
 </script>
 
@@ -57,21 +54,27 @@
   {/if}
 {/snippet}
 
-<div class="h-dvh">
-  <Header title={queryparams.human_readable_summary || 'Forager'} bind:height={dimensions.heights.header}>
-    <SearchParams {controller} {sort_options} {extra_filters} />
-  </Header>
-  <div class="grid grid-cols-[auto_1fr]">
-    <MediaDetails {controller} />
-    <div class="relative">
-      <MediaView {controller} />
-      <MediaList {controller} show_series_link />
-    </div>
-  </div>
-  <Footer {controller} bind:height={dimensions.heights.footer} />
-</div>
+{#snippet tile_footer(result: MediaViewRune)}
+  {#if result instanceof MediaSeriesRune}
+    <a
+      class="text-green-300 hover:text-green-400 hover:underline"
+      href={`/series/${result.media_reference.id}`}
+      title="View this media series"
+      onclick={(e) => e.stopPropagation()}
+    >View series</a>
+  {:else if result instanceof MediaGroupRune}
+    <SearchLink
+      class="hover:text-green-500 hover:bg-gray-700 px-2 rounded-sm"
+      {controller}
+      params={queryparams.merge({ mode: 'media', tags: `${queryparams.current.group_by ?? ''}:${result.group_metadata.value}` })}
+    >{result.group_metadata.value}</SearchLink>
+  {/if}
+{/snippet}
 
-<svelte:window
-  on:keydown|capture={controller.keybinds.handler}
-  bind:innerHeight={dimensions.heights.screen}
+<BrowsableShell
+  {controller}
+  title={queryparams.human_readable_summary || 'Forager'}
+  {sort_options}
+  {extra_filters}
+  {tile_footer}
 />
diff --git a/packages/web/src/routes/browse/controller.ts b/packages/web/src/routes/browse/controller.ts
index 723713d4..de0d808c 100644
--- a/packages/web/src/routes/browse/controller.ts
+++ b/packages/web/src/routes/browse/controller.ts
@@ -1,5 +1,5 @@
 import type { Config } from '$lib/server/config.ts'
-import { BrowseLikeController } from '$lib/base_controller.ts'
+import { BrowsableController } from '$lib/base_controller.ts'
 import {
   create_focuser,
   SettingsRune,
@@ -10,7 +10,7 @@ import {
 import { QueryParamsManager } from './runes/queryparams.svelte.ts'
 
 
-class BrowseController extends BrowseLikeController {
+class BrowseController extends BrowsableController {
   runes: {
     media_list: MediaListRune
     focus: ReturnType<typeof create_focuser>
@@ -23,7 +23,7 @@ class BrowseController extends BrowseLikeController {
   public constructor(config: Config) {
     super(config)
 
-    const media_list_rune = new MediaListRune(this.client, this.settings)
+    const media_list_rune = new MediaListRune(this.client)
     this.runes = {
       media_list: media_list_rune,
       focus: create_focuser(),
diff --git a/packages/web/src/routes/browse/runes/queryparams.svelte.ts b/packages/web/src/routes/browse/runes/queryparams.svelte.ts
index d0506a0a..8d2a0a31 100644
--- a/packages/web/src/routes/browse/runes/queryparams.svelte.ts
+++ b/packages/web/src/routes/browse/runes/queryparams.svelte.ts
@@ -1,43 +1,18 @@
 import type { inputs } from '@forager/core'
 import type { MediaListRune } from '$lib/runes/index.ts'
 import type { BaseController } from '$lib/base_controller.ts'
-import * as parsers from '$lib/parsers.ts'
-import { onMount } from 'svelte'
-import { pushState } from '$app/navigation'
-import { Rune } from '$lib/runes/rune.ts'
+import {
+  BrowsableQueryParams,
+  type BrowsableSearchParams,
+  is_core_media_type,
+  MEDIA_TYPE_TO_CORE,
+} from '$lib/runes/browsable_queryparams.svelte.ts'
 
-type MediaTypeFilter = 'all' | 'animated' | 'image' | 'video' | 'audio'
+type SortBy = inputs.PaginatedSearch['sort_by']
 
-const MEDIA_TYPE_FILTER_VALUES = new Set<MediaTypeFilter>([
-  'all',
-  'animated',
-  'image',
-  'video',
-  'audio',
-])
-
-// maps the lowercase URL/UI value to the uppercase core enum value
-const MEDIA_TYPE_TO_CORE = {
-  image: 'IMAGE',
-  video: 'VIDEO',
-  audio: 'AUDIO',
-} as const satisfies Record<'image' | 'video' | 'audio', NonNullable<inputs.PaginatedSearch['query']>['media_type']>
-
-function is_core_media_type(v: MediaTypeFilter): v is keyof typeof MEDIA_TYPE_TO_CORE {
-  return v in MEDIA_TYPE_TO_CORE
-}
-
-interface SearchParams {
-  search_string: string
-  filepath: string | undefined
-  sort: inputs.PaginatedSearch['sort_by']
-  unread_only: boolean
+interface SearchParams extends BrowsableSearchParams<SortBy> {
   search_mode: 'media' | 'group_by' | 'filesystem'
   group_by: string | undefined
-  stars: number | undefined
-  stars_equality: 'gte' | 'eq' | undefined
-  order: 'desc' | 'asc'
-  media_type: MediaTypeFilter
 }
 
 const DEFAULTS: SearchParams = {
@@ -60,122 +35,28 @@ const URL_PARAM_MAP = {
   search_mode: 'mode',
   media_type: 'type',
 } as const satisfies Partial<Record<keyof SearchParams, string>>
-type UrlParamMap = typeof URL_PARAM_MAP
-
-type SearchParamsReversed = { [K in keyof UrlParamMap as UrlParamMap[K]]: K}
-const URL_PARAM_MAP_REVERSED = Object.fromEntries(
-  Object.entries(URL_PARAM_MAP).map(([key, val]) => [val, key])
-) as SearchParamsReversed
 
 /**
- * Manages browser URL query parameters and syncs them with search state.
- *
- * Two-state model:
- * - `current`: Committed params (matches URL, used for pagination)
- * - `draft`: Staging area for form edits (before submission)
- *
- * When URL changes externally (back/forward), draft resets to match current.
+ * Manages browser URL query parameters and syncs them with search state for the
+ * `/browse` route. Extends the shared browsable manager with the browse-only
+ * search-mode / group-by concepts.
  */
-export class QueryParamsManager extends Rune {
-  public DEFAULTS = DEFAULTS
-
-  /** Committed params (matches URL, used for pagination/search) */
-  public current: SearchParams = $state({ ...DEFAULTS })
-
-  /** Draft params (form staging, can differ from current) */
-  public draft: SearchParams = $state({ ...DEFAULTS })
-
-  public current_serialized: string = '?'
-
-  #media_list: MediaListRune
+export class QueryParamsManager extends BrowsableQueryParams<SearchParams> {
+  get DEFAULTS(): SearchParams { return DEFAULTS }
+  get URL_PARAM_MAP() { return URL_PARAM_MAP }
 
   constructor(client: BaseController['client'], media_list: MediaListRune) {
-    super(client)
-    this.#media_list = media_list
-
-    // Initialize from URL on mount
-    onMount(async () => {
-      const params = this.#parse_url(new URL(window.location.toString()))
-      this.current = params
-      this.draft = { ...params }  // Initialize draft
-      await this.#execute_search(params)
-
-      // Listen for browser back/forward
-      window.addEventListener('popstate', async () => {
-        const params = this.#parse_url(new URL(window.location.toString()))
-        this.current = params
-        this.draft = { ...params }  // Reset draft to match URL
-        await this.#execute_search(params)
-      })
-    })
+    super(client, media_list)
   }
 
-  /**
-   * Parse URL into SearchParams
-   */
-  #parse_url(url: URL): SearchParams {
-    const params: SearchParams = { ...DEFAULTS }
-    const search = url.searchParams
-
-    this.current_serialized = url.search
-
-    // Parse each param with type coercion
-    if (search) {
-      for (const [key, val] of search.entries()) {
-        const params_key: keyof SearchParams = URL_PARAM_MAP_REVERSED[key] ?? key
-
-        if (params_key === 'search_string') {
-          params.search_string = val.replaceAll(',', ' ')
-        } else if (params_key === 'stars') {
-          params.stars = parseInt(val)
-        } else if (params_key === 'filepath') {
-          params.filepath = decodeURIComponent(val)
-        } else if (params_key === 'media_type') {
-          if (MEDIA_TYPE_FILTER_VALUES.has(val as MediaTypeFilter)) {
-            params.media_type = val as MediaTypeFilter
-          }
-        } else {
-          // @ts-ignore - dynamic assignment
-          params[params_key] = val
-        }
-      }
-
-      // Infer search_mode from group_by presence
-      if (search.has('group_by')) {
-        params.search_mode = 'group_by'
-      }
+  protected override post_parse(params: SearchParams, url: URL): void {
+    // Infer search_mode from group_by presence
+    if (url.searchParams.has('group_by')) {
+      params.search_mode = 'group_by'
     }
-
-    return params
   }
 
-  /**
-   * Serialize SearchParams to URL string (for SearchLink components)
-   */
-  public serialize(params: SearchParams): string {
-    const url_params = new Map<string, string>()
-
-    // Only include non-default values
-    for (const [key, value] of Object.entries(params)) {
-      if (value !== DEFAULTS[key as keyof SearchParams] && value !== undefined) {
-        const param_name = URL_PARAM_MAP[key as keyof SearchParams] ?? key
-
-        // Special encoding for tags (preserve : and ,)
-        if (key === 'search_string') {
-          const encoded = encodeURIComponent(value.replaceAll(/\s/g, ','))
-            .replaceAll('%3A', ':')
-            .replaceAll('%2C', ',')
-          url_params.set(param_name, encoded)
-        } else if (key === 'filepath') {
-          if (value) {
-            url_params.set(param_name, encodeURIComponent(value))
-          }
-        } else {
-          url_params.set(param_name, String(value))
-        }
-      }
-    }
-
+  protected override post_serialize(url_params: Map<string, string>): void {
     if (url_params.get('mode') === 'group_by' && !url_params.has('group_by')) {
       url_params.set('group_by', '')
     }
@@ -184,68 +65,32 @@ export class QueryParamsManager extends Rune {
     if (['group_by', 'media'].includes(url_params.get('mode') ?? '')) {
       url_params.delete('mode')
     }
-
-    const query_string = Array.from(url_params.entries())
-      .map(([key, val]) => `${key}=${val}`)
-      .join('&')
-
-    return query_string ? '?' + query_string : null
   }
 
-  /**
-   * Update URL without executing search
-   */
-  #write_url(params: SearchParams): void {
-    const serialized = this.serialize(params)
-
-    if (this.current_serialized !== serialized) {
-      this.current_serialized = serialized
-      this.current = { ...params }
-      if (serialized) {
-        pushState(serialized, {})
-      } else {
-        // when we have empty query params, we do this to drop the "?" at the end of the url
-        pushState(window.location.pathname, {})
+  protected override merge_param(params: SearchParams, key: keyof SearchParams, val: unknown): void {
+    if (key === 'search_mode') {
+      params.search_mode = val as SearchParams['search_mode']
+      // Clear group_by if switching away from group_by mode
+      if (val !== 'group_by') {
+        params.group_by = undefined
       }
+    } else {
+      super.merge_param(params, key, val)
     }
   }
 
-  /**
-   * Execute search based on params
-   */
-  async #execute_search(params: SearchParams): Promise<void> {
-    this.#media_list.clear()
+  protected async execute_search(params: SearchParams): Promise<void> {
+    this.media_list.clear()
 
-    const tags = params.search_string.split(' ').filter((t) => t.length > 0)
+    const tags = this.parse_tags(params.search_string)
     const query: inputs.PaginatedSearch['query'] = {
       tags,
       filepath: params.filepath,
     }
+    this.apply_common_filters(query, params)
 
-    // Handle boolean and numeric filters
-    if (params.unread_only) {
-      if (params.unread_only === 'true' || params.unread_only === true) {
-        query.unread = true
-      }
-    }
-
-    if (params.stars !== undefined) {
-      query.stars = parseInt(String(params.stars))
-      query.stars_equality = params.stars_equality ?? 'gte'
-    }
-
-    // Handle media type filtering. The dropdown is mutually exclusive in the UI:
-    // 'animated' maps to query.animated, while 'image'/'video'/'audio' map to
-    // the canonical uppercase query.media_type filter on core.
-    if (params.media_type === 'animated') {
-      query.animated = true
-    } else if (params.media_type !== 'all') {
-      query.media_type = MEDIA_TYPE_TO_CORE[params.media_type]
-    }
-
-    // Execute appropriate search
     if (params.search_mode === 'media') {
-      await this.#media_list.paginate({
+      await this.media_list.paginate({
         type: 'media',
         params: {
           query,
@@ -254,7 +99,7 @@ export class QueryParamsManager extends Rune {
         },
       })
     } else if (params.search_mode === 'group_by') {
-      await this.#media_list.paginate({
+      await this.media_list.paginate({
         type: 'group_by',
         params: {
           group_by: {
@@ -268,88 +113,9 @@ export class QueryParamsManager extends Rune {
     }
   }
 
-  /**
-   * Submit draft params: update URL and execute search
-   */
-  public async submit(): Promise<void> {
-    this.#write_url(this.draft)
-    await this.#execute_search(this.draft)
-  }
-
-  /**
-   * Navigate to new params (updates draft, then submits)
-   */
-  public async goto(params: SearchParams): Promise<void> {
-    this.draft = { ...params }
-    await this.submit()
-  }
-
-  /**
-   * Merge partial params with current params
-   * Supports URL param names (e.g., 'tags') or internal names (e.g., 'search_string')
-   */
-  public merge(partial_params: Partial<Record<string, any>>): SearchParams {
-    const params = { ...this.current }
-
-    for (const [key, val] of Object.entries(partial_params)) {
-      const params_key: keyof SearchParams = URL_PARAM_MAP_REVERSED[key] ?? key
-
-      if (params_key === 'search_string') {
-        // Merge tags instead of replacing
-        const search_strings = new Set(params.search_string.split(/\s+/))
-        search_strings.add(val)
-        params.search_string = [...search_strings].join(' ').trim()
-      } else if (params_key === 'search_mode') {
-        params.search_mode = val
-        // Clear group_by if switching away from group_by mode
-        if (val !== 'group_by') {
-          params.group_by = undefined
-        }
-      } else {
-        // @ts-ignore - dynamic assignment
-        params[params_key] = val
-      }
-    }
-
-    return params
-  }
-
-  /**
-   * Extend current params with a tag
-   * Supports special 'group_by_tag' key for group-by searches
-   */
-  public extend(key: 'tag' | 'group_by_tag', value: string): SearchParams {
-    const params = { ...this.current }
-
-    // group_by_tag means we want to do a normal search including the group by tag
-    if (key === 'group_by_tag') {
-      if (params.search_mode !== 'group_by') {
-        throw new Error(
-          'unexpected code path. "group_by_tag" should only be used with search_mode "group_by"'
-        )
-      }
-      value = parsers.Tag.encode({ group: params.group_by, name: value })
-      key = 'tag'
-    }
-
-    if (key === 'tag') {
-      const search_strings = new Set(params.search_string.split(/\s+/))
-      search_strings.add(value)
-      params.search_string = [...search_strings].join(' ').trim()
-      return params
-    } else {
-      throw new Error('unimplemented')
-    }
-  }
-
-  /**
-   * Get contextual query for other components (e.g., tag autocomplete)
-   */
   public get contextual_query(): inputs.PaginatedSearch['query'] {
-    const current_tags = this.current.search_string.split(/\s+/).filter((t) => t.length > 0)
-    const draft_tags = new Set(
-      this.draft.search_string.split(/\s+/).filter((t) => t.length > 0),
-    )
+    const current_tags = this.parse_tags(this.current.search_string)
+    const draft_tags = new Set(this.parse_tags(this.draft.search_string))
     // Keep context in sync when tags are deleted from the draft input,
     // while avoiding unsaved/incomplete draft tags that may not exist yet.
     const tags = current_tags.filter((tag) => draft_tags.has(tag))
@@ -363,10 +129,7 @@ export class QueryParamsManager extends Rune {
     }
   }
 
-  /**
-   * Human-readable summary of current search
-   */
-  public get human_readable_summary(): string {
-    return this.current.search_string || 'All media'
+  protected override get empty_search_summary(): string {
+    return 'All media'
   }
 }
diff --git a/packages/web/src/routes/series/[series_id]/+page.svelte b/packages/web/src/routes/series/[series_id]/+page.svelte
index 781a7ba9..3d2e88ea 100644
--- a/packages/web/src/routes/series/[series_id]/+page.svelte
+++ b/packages/web/src/routes/series/[series_id]/+page.svelte
@@ -1,11 +1,7 @@
 <script lang="ts">
   import { page } from '$app/state'
-  import MediaDetails from '$lib/components/browse_like/MediaDetails.svelte'
-  import MediaList from '$lib/components/browse_like/MediaList.svelte'
-  import MediaView from '$lib/components/browse_like/MediaView.svelte'
-  import Footer from '$lib/components/browse_like/Footer.svelte'
-  import SearchParams from '$lib/components/browse_like/SearchParams.svelte'
-  import Header from '$lib/components/Header.svelte'
+  import BrowsableShell from '$lib/components/browsable/BrowsableShell.svelte'
+  import type { MediaViewRune } from '$lib/runes/index.ts'
 
   import { SeriesController } from './controller.ts'
 
@@ -19,7 +15,7 @@
   }
 
   const controller = new SeriesController(props.data.config, series_id_number)
-  let { dimensions, focus, queryparams } = controller.runes
+  let { focus } = controller.runes
   focus.stack({ component: 'SeriesPage', focus: 'page' })
 
   let series_title = $state<string | undefined>(undefined)
@@ -53,21 +49,10 @@
   <option value="duration">Duration</option>
 {/snippet}
 
-<div class="h-dvh">
-  <Header title={page_title} bind:height={dimensions.heights.header}>
-    <SearchParams {controller} {sort_options} />
-  </Header>
-  <div class="grid grid-cols-[auto_1fr]">
-    <MediaDetails {controller} />
-    <div class="relative">
-      <MediaView {controller} />
-      <MediaList {controller} show_series_index />
-    </div>
-  </div>
-  <Footer {controller} bind:height={dimensions.heights.footer} />
-</div>
+{#snippet tile_footer(result: MediaViewRune)}
+  {#if result.series_index !== undefined}
+    <span title="Page in series">#{result.series_index}</span>
+  {/if}
+{/snippet}
 
-<svelte:window
-  on:keydown|capture={controller.keybinds.handler}
-  bind:innerHeight={dimensions.heights.screen}
-/>
+<BrowsableShell {controller} title={page_title} {sort_options} {tile_footer} />
diff --git a/packages/web/src/routes/series/[series_id]/controller.ts b/packages/web/src/routes/series/[series_id]/controller.ts
index dbe03442..c9f9d360 100644
--- a/packages/web/src/routes/series/[series_id]/controller.ts
+++ b/packages/web/src/routes/series/[series_id]/controller.ts
@@ -1,5 +1,5 @@
 import type { Config } from '$lib/server/config.ts'
-import { BrowseLikeController } from '$lib/base_controller.ts'
+import { BrowsableController } from '$lib/base_controller.ts'
 import {
   create_focuser,
   SettingsRune,
@@ -10,7 +10,7 @@ import {
 import { SeriesQueryParamsManager } from './runes/queryparams.svelte.ts'
 
 
-class SeriesController extends BrowseLikeController {
+class SeriesController extends BrowsableController {
   runes: {
     media_list: MediaListRune
     focus: ReturnType<typeof create_focuser>
@@ -23,7 +23,7 @@ class SeriesController extends BrowseLikeController {
   public constructor(config: Config, series_id: number) {
     super(config)
 
-    const media_list_rune = new MediaListRune(this.client, this.settings)
+    const media_list_rune = new MediaListRune(this.client)
     this.runes = {
       media_list: media_list_rune,
       focus: create_focuser(),
diff --git a/packages/web/src/routes/series/[series_id]/runes/queryparams.svelte.ts b/packages/web/src/routes/series/[series_id]/runes/queryparams.svelte.ts
index 1fbd86f5..bde21b82 100644
--- a/packages/web/src/routes/series/[series_id]/runes/queryparams.svelte.ts
+++ b/packages/web/src/routes/series/[series_id]/runes/queryparams.svelte.ts
@@ -1,44 +1,16 @@
 import type { inputs } from '@forager/core'
 import type { MediaListRune } from '$lib/runes/index.ts'
 import type { BaseController } from '$lib/base_controller.ts'
-import { onMount } from 'svelte'
-import { pushState } from '$app/navigation'
-import { Rune } from '$lib/runes/rune.ts'
-
+import {
+  BrowsableQueryParams,
+  type BrowsableSearchParams,
+  is_core_media_type,
+  MEDIA_TYPE_TO_CORE,
+} from '$lib/runes/browsable_queryparams.svelte.ts'
 
 type SortBy = inputs.SeriesSearch['sort_by']
 
-type MediaTypeFilter = 'all' | 'animated' | 'image' | 'video' | 'audio'
-
-const MEDIA_TYPE_FILTER_VALUES = new Set<MediaTypeFilter>([
-  'all',
-  'animated',
-  'image',
-  'video',
-  'audio',
-])
-
-// maps the lowercase URL/UI value to the uppercase core enum value
-const MEDIA_TYPE_TO_CORE = {
-  image: 'IMAGE',
-  video: 'VIDEO',
-  audio: 'AUDIO',
-} as const satisfies Record<'image' | 'video' | 'audio', NonNullable<inputs.SeriesSearch['query']>['media_type']>
-
-function is_core_media_type(v: MediaTypeFilter): v is keyof typeof MEDIA_TYPE_TO_CORE {
-  return v in MEDIA_TYPE_TO_CORE
-}
-
-interface SearchParams {
-  search_string: string
-  filepath: string | undefined
-  sort: SortBy
-  order: 'desc' | 'asc'
-  unread_only: boolean
-  stars: number | undefined
-  stars_equality: 'gte' | 'eq' | undefined
-  media_type: MediaTypeFilter
-}
+type SearchParams = BrowsableSearchParams<SortBy>
 
 const DEFAULTS: SearchParams = {
   search_string: '',
@@ -56,158 +28,38 @@ const URL_PARAM_MAP = {
   unread_only: 'unread',
   media_type: 'type',
 } as const satisfies Partial<Record<keyof SearchParams, string>>
-type UrlParamMap = typeof URL_PARAM_MAP
-
-type SearchParamsReversed = { [K in keyof UrlParamMap as UrlParamMap[K]]: K }
-const URL_PARAM_MAP_REVERSED = Object.fromEntries(
-  Object.entries(URL_PARAM_MAP).map(([key, val]) => [val, key]),
-) as SearchParamsReversed
 
 /**
- * Manages browser URL query parameters for a media series detail view.
- *
- * Implements the same two-state (`current` / `draft`) contract as the browse
- * route so that shared browse-like components can operate uniformly.
+ * Manages browser URL query parameters for a media series detail view. Extends
+ * the shared browsable manager, scoping every search to a single `series_id`.
  */
-export class SeriesQueryParamsManager extends Rune {
-  public DEFAULTS = DEFAULTS
-
-  public current: SearchParams = $state({ ...DEFAULTS })
-  public draft: SearchParams = $state({ ...DEFAULTS })
-
-  public current_serialized: string = '?'
-
-  #media_list: MediaListRune
+export class SeriesQueryParamsManager extends BrowsableQueryParams<SearchParams> {
   #series_id: number
 
+  get DEFAULTS(): SearchParams { return DEFAULTS }
+  get URL_PARAM_MAP() { return URL_PARAM_MAP }
+
   constructor(client: BaseController['client'], media_list: MediaListRune, series_id: number) {
-    super(client)
-    this.#media_list = media_list
+    super(client, media_list)
     this.#series_id = series_id
-
-    onMount(async () => {
-      const params = this.#parse_url(new URL(window.location.toString()))
-      this.current = params
-      this.draft = { ...params }
-      await this.#execute_search(params)
-
-      window.addEventListener('popstate', async () => {
-        const params = this.#parse_url(new URL(window.location.toString()))
-        this.current = params
-        this.draft = { ...params }
-        await this.#execute_search(params)
-      })
-    })
   }
 
   get series_id() {
     return this.#series_id
   }
 
-  #parse_url(url: URL): SearchParams {
-    const params: SearchParams = { ...DEFAULTS }
-    const search = url.searchParams
-
-    this.current_serialized = url.search
-
-    if (search) {
-      for (const [key, val] of search.entries()) {
-        const params_key: keyof SearchParams = URL_PARAM_MAP_REVERSED[key] ?? key
-
-        if (params_key === 'search_string') {
-          params.search_string = val.replaceAll(',', ' ')
-        } else if (params_key === 'stars') {
-          params.stars = parseInt(val)
-        } else if (params_key === 'filepath') {
-          params.filepath = decodeURIComponent(val)
-        } else if (params_key === 'media_type') {
-          if (MEDIA_TYPE_FILTER_VALUES.has(val as MediaTypeFilter)) {
-            params.media_type = val as MediaTypeFilter
-          }
-        } else {
-          // @ts-ignore - dynamic assignment
-          params[params_key] = val
-        }
-      }
-    }
-
-    return params
-  }
-
-  public serialize(params: SearchParams): string | null {
-    const url_params = new Map<string, string>()
-
-    for (const [key, value] of Object.entries(params)) {
-      if (value !== DEFAULTS[key as keyof SearchParams] && value !== undefined) {
-        const param_name = URL_PARAM_MAP[key as keyof SearchParams] ?? key
-
-        if (key === 'search_string') {
-          const encoded = encodeURIComponent(String(value).replaceAll(/\s/g, ','))
-            .replaceAll('%3A', ':')
-            .replaceAll('%2C', ',')
-          url_params.set(param_name, encoded)
-        } else if (key === 'filepath') {
-          if (value) {
-            url_params.set(param_name, encodeURIComponent(String(value)))
-          }
-        } else {
-          url_params.set(param_name, String(value))
-        }
-      }
-    }
-
-    const query_string = Array.from(url_params.entries())
-      .map(([key, val]) => `${key}=${val}`)
-      .join('&')
-
-    return query_string ? '?' + query_string : null
-  }
-
-  #write_url(params: SearchParams): void {
-    const serialized = this.serialize(params)
+  protected async execute_search(params: SearchParams): Promise<void> {
+    this.media_list.clear()
 
-    if (this.current_serialized !== serialized) {
-      this.current_serialized = serialized ?? ''
-      this.current = { ...params }
-      if (serialized) {
-        pushState(serialized, {})
-      } else {
-        pushState(window.location.pathname, {})
-      }
-    }
-  }
-
-  async #execute_search(params: SearchParams): Promise<void> {
-    this.#media_list.clear()
-
-    const tags = params.search_string.split(' ').filter((t) => t.length > 0)
+    const tags = this.parse_tags(params.search_string)
     const query: inputs.SeriesSearch['query'] = {
       series_id: this.#series_id,
-      tags: tags.length > 0 ? tags.map(this.#parse_tag) : undefined,
+      tags: tags.length > 0 ? tags.map((tag) => this.parse_tag(tag)) : undefined,
       filepath: params.filepath,
     }
+    this.apply_common_filters(query, params)
 
-    if (params.unread_only) {
-      if (params.unread_only === 'true' || params.unread_only === true) {
-        query.unread = true
-      }
-    }
-
-    if (params.stars !== undefined) {
-      query.stars = parseInt(String(params.stars))
-      query.stars_equality = params.stars_equality ?? 'gte'
-    }
-
-    // Handle media type filtering. The dropdown is mutually exclusive in the UI:
-    // 'animated' maps to query.animated, while 'image'/'video'/'audio' map to
-    // the canonical uppercase query.media_type filter on core.
-    if (params.media_type === 'animated') {
-      query.animated = true
-    } else if (params.media_type !== 'all') {
-      query.media_type = MEDIA_TYPE_TO_CORE[params.media_type]
-    }
-
-    await this.#media_list.paginate({
+    await this.media_list.paginate({
       type: 'series_search',
       params: {
         query,
@@ -217,56 +69,14 @@ export class SeriesQueryParamsManager extends Rune {
     })
   }
 
-  #parse_tag(tag_str: string): { group?: string; name: string } {
-    const sep_index = tag_str.indexOf(':')
-    if (sep_index === -1) {
-      return { name: tag_str }
-    }
-    return {
-      group: tag_str.slice(0, sep_index),
-      name: tag_str.slice(sep_index + 1),
-    }
-  }
-
-  public async submit(): Promise<void> {
-    this.#write_url(this.draft)
-    await this.#execute_search(this.draft)
-  }
-
-  public async goto(params: SearchParams): Promise<void> {
-    this.draft = { ...params }
-    await this.submit()
-  }
-
-  public merge(partial_params: Partial<Record<string, any>>): SearchParams {
-    const params = { ...this.current }
-
-    for (const [key, val] of Object.entries(partial_params)) {
-      const params_key: keyof SearchParams = URL_PARAM_MAP_REVERSED[key] ?? key
-
-      if (params_key === 'search_string') {
-        const search_strings = new Set(params.search_string.split(/\s+/))
-        search_strings.add(val)
-        params.search_string = [...search_strings].join(' ').trim()
-      } else {
-        // @ts-ignore - dynamic assignment
-        params[params_key] = val
-      }
-    }
-
-    return params
-  }
-
   public get contextual_query(): inputs.SeriesSearch['query'] {
-    const current_tags = this.current.search_string.split(/\s+/).filter((t) => t.length > 0)
-    const draft_tags = new Set(
-      this.draft.search_string.split(/\s+/).filter((t) => t.length > 0),
-    )
+    const current_tags = this.parse_tags(this.current.search_string)
+    const draft_tags = new Set(this.parse_tags(this.draft.search_string))
     const tags = current_tags.filter((tag) => draft_tags.has(tag))
     const media_type = this.current.media_type
     return {
       series_id: this.#series_id,
-      tags: tags.length > 0 ? tags.map(this.#parse_tag) : undefined,
+      tags: tags.length > 0 ? tags.map((tag) => this.parse_tag(tag)) : undefined,
       filepath: this.current.filepath,
       unread: this.current.unread_only || undefined,
       animated: media_type === 'animated' ? true : undefined,
@@ -274,7 +84,7 @@ export class SeriesQueryParamsManager extends Rune {
     }
   }
 
-  public get human_readable_summary(): string {
-    return this.current.search_string || 'Series'
+  protected override get empty_search_summary(): string {
+    return 'Series'
   }
 }