impl(web) Create media series page assisted-by:claude_opus_4.5

packages/core/src/mod.ts

@@ -68,7 +68,7 @@ class Forager {
 export { Forager }
 export * as errors from './lib/errors.ts'
 export type ForagerConfig = inputs.ForagerConfig
-export type {MediaResponse, MediaFileResponse, MediaSeriesResponse, MediaGroupResponse} from './actions/lib/base.ts'
+export type {MediaResponse, MediaFileResponse, MediaSeriesResponse, MediaGroupResponse, SeriesSearchResponse} from './actions/lib/base.ts'
 export type * from './actions/mod.ts'
 export { type inputs }
 export type * as model_types from '~/models/lib/result_types.ts'

packages/web/src/routes/browse/components/MediaDetailEntry.svelte → packages/web/src/lib/components/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 { MediaPageController } from '$lib/media_page_controller.ts'
 
-  import { BrowseController } from '../controller.ts'
   let {controller, ...props}: {
-    controller: BrowseController
+    controller: MediaPageController
     label: string
     content: string | number | Date | null | Json
     type?: "text" | "datetime-local"

packages/web/src/routes/browse/components/Footer.svelte → packages/web/src/lib/components/media_page/Footer.svelte

@@ -1,10 +1,18 @@
 <script lang="ts">
   import * as theme from '$lib/theme.ts'
-  import type { BrowseController } from '../controller.ts'
+  import type { MediaPageController } from '$lib/media_page_controller.ts'
 
-  let {controller, height = $bindable()}: {controller: BrowseController, height: number} = $props()
+  interface Props {
+    controller: MediaPageController
+    height?: number
+  }
+
+  let {controller, height = $bindable()}: Props = $props()
   const runes = controller.runes
 
+  // Derive total label from controller mode
+  const total_label = $derived(controller.is_series ? 'Series items' : 'Total results')
+
 
   function human_readable_number(n: number) {
     const number_string = n.toString()
@@ -85,7 +93,7 @@
     </div>
 
     <span class="">
-      Total results {human_readable_number(runes.media_list.total)}
+      {total_label} {human_readable_number(runes.media_list.total)}
     </span>
   </div>
 </footer>

packages/web/src/lib/components/media_page/Header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { MediaPageController } from '$lib/media_page_controller.ts'
+  import SearchParams from './SearchParams.svelte'
+
+  interface Props {
+    controller: MediaPageController
+    height?: number
+  }
+
+  let {controller, height = $bindable()}: Props = $props()
+  let { queryparams } = controller.runes
+
+  // Derive default title from controller mode
+  const default_title = $derived(controller.is_series ? 'Forager - Series' : 'Forager')
+</script>
+
+<header class="drop-shadow-md bg-gray-700 flex justify-center border-b-slate-800 border-b-2 relative z-10" bind:clientHeight={height}>
+  <title>{queryparams.human_readable_summary || default_title}</title>
+  <SearchParams {controller} />
+</header>

packages/web/src/routes/browse/components/MediaDetails.svelte → packages/web/src/lib/components/media_page/MediaDetails.svelte

@@ -2,17 +2,21 @@
   import * as path from '@std/path'
   import type { Forager } from '@forager/core'
   import Sidebar from '$lib/components/Sidebar.svelte'
-  import MediaDetailEntry from './MediaDetailEntry.svelte'
+  import MediaDetailEntry from '$lib/components/MediaDetailEntry.svelte'
   import TagAutoCompleteInput from '$lib/components/TagAutoCompleteInput.svelte'
-  import SearchLink from './SearchLink.svelte'
   import Tag from '$lib/components/Tag.svelte'
   import Icon from '$lib/components/Icon.svelte'
   import {XCircle} 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 { MediaPageController } from '$lib/media_page_controller.ts'
+
+  interface Props {
+    controller: MediaPageController
+  }
+
+  let {controller}: Props = $props()
+  let {dimensions, media_selections, settings} = controller.runes
 
   let new_tag_str = $state<string>('')
 
@@ -74,6 +78,14 @@
     }}
     >
     {#if media_selections.current_selection.media_response}
+      <!-- Series Index (only shown for series pages) -->
+      {#if controller.is_series && media_selections.current_selection.media_response.series_index !== undefined}
+        <MediaDetailEntry
+          {controller}
+          label="Page"
+          content={'#' + media_selections.current_selection.media_response.series_index}/>
+      {/if}
+
       <MediaDetailEntry
         {controller}
         label="Views"
@@ -88,9 +100,9 @@
       {#each sorted_tags as tag_group_entry, tag_entry_index (tag_group_entry[0])}
         {#each tag_group_entry[1] as tag, tag_index (tag.id)}
           <div class="grid grid-cols-[1fr_auto] items-center gap-1 pb-1">
-            <SearchLink {controller} params={queryparams.merge({tags: parsers.Tag.encode(tag)})}>
+            <a href="/browse?tags={parsers.Tag.encode(tag)}">
               <Tag show_group={false} {tag} />
-            </SearchLink>
+            </a>
             <button
               class="hover:cursor-pointer"
               title="Remove"
@@ -135,7 +147,6 @@
         type="datetime-local"
         content={media_selections.current_selection.media_response.media_reference.source_created_at}/>
 
-      <!-- TODO we should support datetimes in @andykais/ts-rpc -->
       <MediaDetailEntry
         {controller}
         editable
@@ -168,7 +179,9 @@
       {/if}
 
     {:else}
-      TODO: show tag summary
+      <div class="text-gray-400 p-2">
+        <p class="text-sm">Select an item to view details</p>
+      </div>
     {/if}
   </form>
 </Sidebar>

packages/web/src/routes/browse/components/MediaList.svelte → packages/web/src/lib/components/media_page/MediaList.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
   import Scroller from '$lib/components/Scroller.svelte'
   import SearchResults from './SearchResults.svelte'
-  import type { BrowseController } from '../controller.ts'
+  import type { MediaPageController } from '$lib/media_page_controller.ts'
 
-  let {controller}: {controller: BrowseController} = $props()
+  interface Props {
+    controller: MediaPageController
+  }
+
+  let {controller}: Props = $props()
   let media_list_element: HTMLElement
 
   controller.keybinds.component_listen({
@@ -43,8 +47,7 @@
   })
 </script>
 
-<div
-  bind:this={media_list_element}>
+<div bind:this={media_list_element}>
   <Scroller
     loading={controller.runes.media_list.loading}
     more={() => controller.runes.media_list.paginate()}

packages/web/src/lib/components/media_page/MediaPage.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Header from './Header.svelte'
+  import MediaDetails from './MediaDetails.svelte'
+  import MediaList from './MediaList.svelte'
+  import MediaView from './MediaView.svelte'
+  import Footer from './Footer.svelte'
+  import type { MediaPageController } from '$lib/media_page_controller.ts'
+
+  interface Props {
+    controller: MediaPageController
+    focus_component: string
+  }
+
+  let {controller, focus_component}: Props = $props()
+  let { dimensions, focus } = controller.runes
+
+  // Stack focus on mount
+  focus.stack({component: focus_component, focus: 'page'})
+</script>
+
+<div class="h-dvh">
+  <Header {controller} bind:height={dimensions.heights.header} />
+  <div class="grid grid-cols-[auto_1fr]">
+    <MediaDetails {controller} />
+    <div class="relative">
+      <MediaView {controller} />
+      <MediaList {controller} />
+    </div>
+  </div>
+  <Footer {controller} bind:height={dimensions.heights.footer} />
+</div>
+
+<svelte:window
+  on:keydown={controller.keybinds.handler}
+  bind:innerHeight={dimensions.heights.screen}
+/>

packages/web/src/routes/browse/components/MediaView.svelte → packages/web/src/lib/components/media_page/MediaView.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import type { BrowseController } from '../controller.ts'
+  import type { MediaPageController } from '$lib/media_page_controller.ts'
 
   interface Props {
-    controller: BrowseController
+    controller: MediaPageController
   }
 
-  // TODO wire this into settings
   let show_controls = $state<boolean>(false);
 
   controller.keybinds.component_listen({
@@ -17,10 +16,6 @@
       paused = !paused
     },
     OpenMedia: e => {
-      /*
-      // TODO we need to be aware of the focus when making this call. Currently this will take over hitting "Enter" on the search bar
-      media_selections.open_media()
-      */
     },
     ToggleMediaControls: async e => {
       show_controls = !show_controls
@@ -38,7 +33,6 @@
   const {media_selections} = controller.runes
   let paused = $state(false)
 
-  let filmstrip_thumbnails
   let filmstrip_height = 50
 
   $effect(() => {
@@ -61,8 +55,6 @@
       return
     }
     const escaped_path = media_selections.current_selection.media_response.media_file.filepath
-      // .replace(/$\//, '')
-      //.replaceAll('?', '%3F')
     const escaped_url = `/files/media_file/${encodeURIComponent(escaped_path)}`
     return escaped_url
   })
@@ -105,7 +97,7 @@
             use:video_loader={media_url}
             >
             <source src={media_url}>
-            <track kind="captions"/> <!-- this exists purely to quiet down an A11y rule -->
+            <track kind="captions"/>
           </video>
           <progress
             class="w-full h-1 absolute bottom-0"

packages/web/src/routes/browse/components/SearchLink.svelte → packages/web/src/lib/components/media_page/SearchLink.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-  import type {BrowseController} from '../controller.ts'
+  import type {MediaPageController} from '$lib/media_page_controller.ts'
+  import type { Snippet } from 'svelte'
 
   interface Props {
-    controller: BrowseController
-    params: BrowseController['runes']['queryparams']['DEFAULT']
-    class: ClassValue
+    controller: MediaPageController
+    params: Record<string, any>
+    class?: string
+    children?: Snippet
   }
   let {params, controller, children, ...props}: Props = $props()
   const {queryparams} = controller.runes
-
 </script>
 
 <a