From 954723045242879ae2096a194d8452edcfe3d38b Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 26 Mar 2026 15:04:10 +0000
Subject: [PATCH 01/13] fix(web): wire ToggleFullScreen keybind in media dialog

Co-authored-by: andykais-claude <andykais-claude@users.noreply.github.com>
---
 packages/web/src/lib/keybinds.ts              |  6 ++++
 .../routes/browse/components/MediaView.svelte | 30 +++++++++++++++++--
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/lib/keybinds.ts b/packages/web/src/lib/keybinds.ts
index 2ac2670c..5b1b6f08 100644
--- a/packages/web/src/lib/keybinds.ts
+++ b/packages/web/src/lib/keybinds.ts
@@ -3,13 +3,19 @@ import type { Config } from '$lib/server/config.ts'
 
 
 type KeybindAction =
+  | 'OpenMedia'
   | 'Escape'
   | 'Search'
+  | 'AddTag'
   | 'PrevMedia'
   | 'NextMedia'
   | 'PrevTagSuggestion'
   | 'NextTagSuggestion'
+  | 'CopyMedia'
+  | 'ToggleFitMedia'
+  | 'ToggleFullScreen'
   | 'PlayPauseMedia'
+  | 'ToggleVideoMute'
   | 'ToggleMediaControls'
   | 'ToggleSidebar'
   | 'Star0'
diff --git a/packages/web/src/routes/browse/components/MediaView.svelte b/packages/web/src/routes/browse/components/MediaView.svelte
index 9f6ac754..ab06d212 100644
--- a/packages/web/src/routes/browse/components/MediaView.svelte
+++ b/packages/web/src/routes/browse/components/MediaView.svelte
@@ -7,9 +7,18 @@
 
   // TODO wire this into settings
   let show_controls = $state<boolean>(false);
+  let is_fullscreen = $state(false)
+
+  const refresh_fullscreen_state = () => {
+    is_fullscreen = document.fullscreenElement === dialog
+  }
 
   controller.keybinds.component_listen({
     Escape: e => {
+      if (document.fullscreenElement === dialog) {
+        document.exitFullscreen()
+        return
+      }
       dialog.close()
       controller.runes.media_selections.close_media()
     },
@@ -25,6 +34,16 @@
     ToggleMediaControls: async e => {
       show_controls = !show_controls
     },
+    ToggleFullScreen: async e => {
+      if (!dialog.open || !media_selections.current_selection.show) return
+      e.detail.data.keyboard_event.preventDefault()
+
+      if (document.fullscreenElement === dialog) {
+        await document.exitFullscreen()
+      } else {
+        await dialog.requestFullscreen()
+      }
+    },
     CopyMedia: async e => {
       if (media_selections.current_selection.media_response) {
         if (media_selections.current_selection.media_response.media_type === 'media_file') {
@@ -77,11 +96,14 @@
 
 <dialog
   class="absolute w-full z-10 outline-none"
-  style="height: {controller.runes.dimensions.heights.media_list}px;"
+  style="height: {is_fullscreen ? '100dvh' : `${controller.runes.dimensions.heights.media_list}px`};"
   bind:this={dialog}
-  onclose={controller.runes.media_selections.close_media}>
+  onclose={() => {
+    refresh_fullscreen_state()
+    controller.runes.media_selections.close_media()
+  }}>
   <div class="flex items-center justify-center"
-  style="height: {controller.runes.dimensions.heights.media_list}px;"
+  style="height: {is_fullscreen ? '100dvh' : `${controller.runes.dimensions.heights.media_list}px`};"
   >
     {#if media_selections.current_selection.show && media_selections.current_selection.media_response}
       {#if media_selections.current_selection.media_response.media_type === 'media_file'}
@@ -133,6 +155,8 @@
   </div>
 </dialog>
 
+<svelte:document on:fullscreenchange={refresh_fullscreen_state} />
+
 <style>
   dialog {
     background-color: hsl(100 0% 0% / 45%);

From 25a16ecb99196b16ebb2d0bc44a9fcbfc68f6f88 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 26 Mar 2026 15:06:12 +0000
Subject: [PATCH 02/13] fix(web): normalize configured shortcut codes

Co-authored-by: andykais-claude <andykais-claude@users.noreply.github.com>
---
 packages/web/src/lib/keybinds.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/lib/keybinds.ts b/packages/web/src/lib/keybinds.ts
index 5b1b6f08..9ae3a943 100644
--- a/packages/web/src/lib/keybinds.ts
+++ b/packages/web/src/lib/keybinds.ts
@@ -33,6 +33,13 @@ export class Keybinds {
   #keybind_mapper: Map<string, KeybindAction> | undefined
   #config: Config | undefined
 
+  #normalize_keybind_code(code: string) {
+    return code
+      .split('-')
+      .map(part => part.replace('Control', 'Ctrl').replace('Key', ''))
+      .join('-')
+  }
+
   public constructor(config: Config) {
     this.emitter = new EventTarget()
     this.disabled = false
@@ -41,7 +48,7 @@ export class Keybinds {
     this.#keybind_mapper = new Map<string, KeybindAction>()
     for (const [keyboard_action, keyboard_shortcuts] of Object.entries(this.#config.web.shortcuts)) {
       for (const keyboard_shortcut of keyboard_shortcuts) {
-        this.#keybind_mapper.set(keyboard_shortcut, keyboard_action as KeybindAction)
+        this.#keybind_mapper.set(this.#normalize_keybind_code(keyboard_shortcut), keyboard_action as KeybindAction)
       }
     }
   }

From 6fa1115d0f4a75494360a811f0fe98a15de0285e Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 26 Mar 2026 15:16:47 +0000
Subject: [PATCH 03/13] fix(web): fullscreen on child div instead of dialog
 element

- Dialog elements cannot use requestFullscreen() per HTML spec
- Changed to fullscreen the inner div container instead
- Fixes scoping issue where controller was used before being defined

Co-authored-by: andykais-claude <andykais-claude@users.noreply.github.com>
---
 .../routes/browse/components/MediaView.svelte  | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/routes/browse/components/MediaView.svelte b/packages/web/src/routes/browse/components/MediaView.svelte
index ab06d212..ea278c42 100644
--- a/packages/web/src/routes/browse/components/MediaView.svelte
+++ b/packages/web/src/routes/browse/components/MediaView.svelte
@@ -10,12 +10,16 @@
   let is_fullscreen = $state(false)
 
   const refresh_fullscreen_state = () => {
-    is_fullscreen = document.fullscreenElement === dialog
+    is_fullscreen = document.fullscreenElement === fullscreen_container
   }
 
+  let {controller}: Props = $props()
+  const {media_selections} = controller.runes
+  let paused = $state(false)
+
   controller.keybinds.component_listen({
     Escape: e => {
-      if (document.fullscreenElement === dialog) {
+      if (document.fullscreenElement === fullscreen_container) {
         document.exitFullscreen()
         return
       }
@@ -38,10 +42,10 @@
       if (!dialog.open || !media_selections.current_selection.show) return
       e.detail.data.keyboard_event.preventDefault()
 
-      if (document.fullscreenElement === dialog) {
+      if (document.fullscreenElement === fullscreen_container) {
         await document.exitFullscreen()
       } else {
-        await dialog.requestFullscreen()
+        await fullscreen_container.requestFullscreen()
       }
     },
     CopyMedia: async e => {
@@ -53,10 +57,6 @@
     },
   })
 
-  let {controller}: Props = $props()
-  const {media_selections} = controller.runes
-  let paused = $state(false)
-
   let filmstrip_thumbnails
   let filmstrip_height = 50
 
@@ -89,6 +89,7 @@
 
 
   let dialog: HTMLDialogElement
+  let fullscreen_container: HTMLDivElement
   let animation_width = $state(0)
   let animation_progress = $state(0)
 </script>
@@ -103,6 +104,7 @@
     controller.runes.media_selections.close_media()
   }}>
   <div class="flex items-center justify-center"
+  bind:this={fullscreen_container}
   style="height: {is_fullscreen ? '100dvh' : `${controller.runes.dimensions.heights.media_list}px`};"
   >
     {#if media_selections.current_selection.show && media_selections.current_selection.media_response}

From ea59c3c0666cb91220048af866b0c13ffdaf5407 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 20 Apr 2026 23:11:56 +0000
Subject: [PATCH 04/13] feat(web): add configurable media fit mode toggle

Co-authored-by: andykais-claude <andykais-claude@users.noreply.github.com>
---
 .../web/src/lib/runes/settings_rune.svelte.ts |   8 ++
 packages/web/src/lib/server/config.ts         |   4 +
 .../routes/browse/components/Footer.svelte    |  30 ++--
 .../routes/browse/components/MediaView.svelte | 134 +++++++++++-------
 4 files changed, 112 insertions(+), 64 deletions(-)

diff --git a/packages/web/src/lib/runes/settings_rune.svelte.ts b/packages/web/src/lib/runes/settings_rune.svelte.ts
index 4e335605..ffa75c32 100644
--- a/packages/web/src/lib/runes/settings_rune.svelte.ts
+++ b/packages/web/src/lib/runes/settings_rune.svelte.ts
@@ -5,6 +5,7 @@ import type { BaseController } from '$lib/base_controller.ts'
 interface MutatableSettings {
   'ui.media_list.thumbnail_size': Config['web']['ui_defaults']['media_list']['thumbnail_size']
   'ui.media_list.thumbnail_shape': Config['web']['ui_defaults']['media_list']['thumbnail_shape']
+  'ui.media_view.fit.mode': Config['web']['ui_defaults']['media_view']['fit']['mode']
   'ui.search.advanced_filters.hide': Config['web']['ui_defaults']['search']['advanced_filters']['hide']
   'ui.sidebar.hide': Config['web']['ui_defaults']['sidebar']['hide']
 }
@@ -35,6 +36,10 @@ export class SettingsRune extends Rune {
         this.ui.media_list.thumbnail_shape = value
         break
       }
+      case 'ui.media_view.fit.mode': {
+        this.ui.media_view.fit.mode = value
+        break
+      }
       case 'ui.search.advanced_filters.hide': {
         this.ui.search.advanced_filters.hide = value
         break
@@ -68,6 +73,9 @@ export class SettingsRune extends Rune {
       case 'ui.search.advanced_filters.hide': {
         return this.ui.search.advanced_filters.hide
       }
+      case 'ui.media_view.fit.mode': {
+        return this.ui.media_view.fit.mode
+      }
       default: {
         throw new Error(`Unexpected path '${path}'`)
       }
diff --git a/packages/web/src/lib/server/config.ts b/packages/web/src/lib/server/config.ts
index c3d83c0f..a41dd73c 100644
--- a/packages/web/src/lib/server/config.ts
+++ b/packages/web/src/lib/server/config.ts
@@ -52,6 +52,10 @@ export const PackagesConfig = z.object({
       }).strict().prefault({}),
 
       media_view: z.object({
+        fit: z.object({
+          mode: z.enum(['original', 'fill']).default('original'),
+          edge: z.enum(['width', 'height']).default('height'),
+        }).strict().prefault({}),
         filmstrip: z.object({
           enabled: z.boolean().default(false),
             thumbnail_size: z.number().default(100),
diff --git a/packages/web/src/routes/browse/components/Footer.svelte b/packages/web/src/routes/browse/components/Footer.svelte
index 3c6445f2..ea12fa19 100644
--- a/packages/web/src/routes/browse/components/Footer.svelte
+++ b/packages/web/src/routes/browse/components/Footer.svelte
@@ -3,7 +3,6 @@
   import type { BrowseController } from '../controller.ts'
 
   let {controller, height = $bindable()}: {controller: BrowseController, height: number} = $props()
-  const runes = controller.runes
 
 
   function human_readable_number(n: number) {
@@ -55,7 +54,7 @@
   bind:clientHeight={height}
 >
 
-  <div class="grid grid-cols-[1fr_auto_auto] gap-4 justify-between">
+  <div class="grid grid-cols-[1fr_auto_auto_auto] gap-4 justify-between">
     <div class="w-full grid grid-cols-[auto_1fr_auto] gap-4 items-center" style="--slider-thumb-color: {theme.colors.green[300]}; --slider-thumb-color-hover: {theme.colors.green[500]}">
       <label for="thumbnail-size">Thumbnail Size</label>
       <input
@@ -64,11 +63,11 @@
         type="range"
         min={50}
         max={500}
-        value={runes.settings.ui.media_list.thumbnail_size}
+        value={controller.runes.settings.ui.media_list.thumbnail_size}
         oninput={e => {
-          runes.settings.set('ui.media_list.thumbnail_size', e.target.value)
+          controller.runes.settings.set('ui.media_list.thumbnail_size', e.target.value)
         }}>
-      <span>{runes.settings.ui.media_list.thumbnail_size}px</span>
+      <span>{controller.runes.settings.ui.media_list.thumbnail_size}px</span>
     </div>
 
     <div>
@@ -76,16 +75,29 @@
         title="Toggle thumbnail shape"
         class="rounded-sm bg-gray-800 px-2 text-slate-400 hover:bg-gray-600"
         onclick={e => {
-          const updated_shape = runes.settings.ui.media_list.thumbnail_shape === 'square'
+          const updated_shape = controller.runes.settings.ui.media_list.thumbnail_shape === 'square'
             ? 'original'
             : 'square'
-          runes.settings.set('ui.media_list.thumbnail_shape', updated_shape)
+          controller.runes.settings.set('ui.media_list.thumbnail_shape', updated_shape)
         }}
-      >{runes.settings.ui.media_list.thumbnail_shape}</button>
+      >{controller.runes.settings.ui.media_list.thumbnail_shape}</button>
+    </div>
+
+    <div>
+      <button
+        title="Toggle media fit mode"
+        class="rounded-sm bg-gray-800 px-2 text-slate-400 hover:bg-gray-600"
+        onclick={() => {
+          const updated_mode = controller.runes.settings.ui.media_view.fit.mode === 'original'
+            ? 'fill'
+            : 'original'
+          controller.runes.settings.set('ui.media_view.fit.mode', updated_mode)
+        }}
+      >Media: {controller.runes.settings.ui.media_view.fit.mode}</button>
     </div>
 
     <span class="">
-      Total results {human_readable_number(runes.media_list.total)}
+      Total results {human_readable_number(controller.runes.media_list.total)}
     </span>
   </div>
 </footer>
diff --git a/packages/web/src/routes/browse/components/MediaView.svelte b/packages/web/src/routes/browse/components/MediaView.svelte
index ea278c42..3e63e4a6 100644
--- a/packages/web/src/routes/browse/components/MediaView.svelte
+++ b/packages/web/src/routes/browse/components/MediaView.svelte
@@ -14,54 +14,78 @@
   }
 
   let {controller}: Props = $props()
-  const {media_selections} = controller.runes
   let paused = $state(false)
 
-  controller.keybinds.component_listen({
-    Escape: e => {
-      if (document.fullscreenElement === fullscreen_container) {
-        document.exitFullscreen()
-        return
-      }
-      dialog.close()
-      controller.runes.media_selections.close_media()
-    },
-    PlayPauseMedia: e => {
-      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
-    },
-    ToggleFullScreen: async e => {
-      if (!dialog.open || !media_selections.current_selection.show) return
-      e.detail.data.keyboard_event.preventDefault()
-
-      if (document.fullscreenElement === fullscreen_container) {
-        await document.exitFullscreen()
-      } else {
-        await fullscreen_container.requestFullscreen()
-      }
-    },
-    CopyMedia: async e => {
-      if (media_selections.current_selection.media_response) {
-        if (media_selections.current_selection.media_response.media_type === 'media_file') {
-          await navigator.clipboard.writeText(media_selections.current_selection.media_response.media_file.filepath)
-        }
-      }
-    },
+  const toggle_fit_mode = () => {
+    const updated_mode = controller.runes.settings.ui.media_view.fit.mode === 'original'
+      ? 'fill'
+      : 'original'
+    controller.runes.settings.set('ui.media_view.fit.mode', updated_mode)
+  }
+
+  const media_fit_classes = $derived.by(() => {
+    if (controller.runes.settings.ui.media_view.fit.mode === 'original') {
+      return 'w-auto h-auto max-w-full max-h-full'
+    }
+
+    if (controller.runes.settings.ui.media_view.fit.edge === 'width') {
+      return 'w-full h-auto max-h-full'
+    }
+
+    return 'h-full w-auto max-w-full'
   })
 
+  const register_component_keybinds = () => {
+    controller.keybinds.component_listen({
+      Escape: e => {
+        if (document.fullscreenElement === fullscreen_container) {
+          document.exitFullscreen()
+          return
+        }
+        dialog.close()
+        controller.runes.media_selections.close_media()
+      },
+      PlayPauseMedia: e => {
+        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
+      },
+      ToggleFitMedia: async e => {
+        toggle_fit_mode()
+      },
+      ToggleFullScreen: async e => {
+        if (!dialog.open || !controller.runes.media_selections.current_selection.show) return
+        e.detail.data.keyboard_event.preventDefault()
+
+        if (document.fullscreenElement === fullscreen_container) {
+          await document.exitFullscreen()
+        } else {
+          await fullscreen_container.requestFullscreen()
+        }
+      },
+      CopyMedia: async e => {
+        if (controller.runes.media_selections.current_selection.media_response) {
+          if (controller.runes.media_selections.current_selection.media_response.media_type === 'media_file') {
+            await navigator.clipboard.writeText(controller.runes.media_selections.current_selection.media_response.media_file.filepath)
+          }
+        }
+      },
+    })
+  }
+  register_component_keybinds()
+
   let filmstrip_thumbnails
   let filmstrip_height = 50
 
   $effect(() => {
-    if (!dialog.open && media_selections.current_selection.show) {
+    if (!dialog.open && controller.runes.media_selections.current_selection.show) {
       dialog.show()
     }
   })
@@ -76,10 +100,10 @@
   }
 
   let media_url = $derived.by(() => {
-    if (media_selections.current_selection.media_response?.media_type !== 'media_file') {
+    if (controller.runes.media_selections.current_selection.media_response?.media_type !== 'media_file') {
       return
     }
-    return `/files/media_file/${media_selections.current_selection.media_response.media_reference.id}`
+    return `/files/media_file/${controller.runes.media_selections.current_selection.media_response.media_reference.id}`
   })
   $effect(() => {
     if (media_url) {
@@ -107,16 +131,16 @@
   bind:this={fullscreen_container}
   style="height: {is_fullscreen ? '100dvh' : `${controller.runes.dimensions.heights.media_list}px`};"
   >
-    {#if media_selections.current_selection.show && media_selections.current_selection.media_response}
-      {#if media_selections.current_selection.media_response.media_type === 'media_file'}
-        {#if media_selections.current_selection.media_response.media_file.media_type === 'IMAGE'}
+    {#if controller.runes.media_selections.current_selection.show && controller.runes.media_selections.current_selection.media_response}
+      {#if controller.runes.media_selections.current_selection.media_response.media_type === 'media_file'}
+        {#if controller.runes.media_selections.current_selection.media_response.media_file.media_type === 'IMAGE'}
           <img
-            class="object-contain max-h-full"
+            class="object-contain {media_fit_classes}"
             src={media_url} alt="">
-        {:else if media_selections.current_selection.media_response.media_file.media_type === 'VIDEO'}
+        {:else if controller.runes.media_selections.current_selection.media_response.media_file.media_type === 'VIDEO'}
           <video
             bind:clientWidth={animation_width}
-            class="object-contain max-h-full outline-none"
+            class="object-contain outline-none {media_fit_classes}"
             autoplay
             loop
             bind:paused
@@ -130,19 +154,19 @@
           <progress
             class="w-full h-1 absolute bottom-0"
             style="width: {animation_width}px"
-            max={media_selections.current_selection.media_response.media_file.duration} value={animation_progress}></progress>
+            max={controller.runes.media_selections.current_selection.media_response.media_file.duration} value={animation_progress}></progress>
           {#if controller.runes.settings.ui.media_view.filmstrip.enabled}
             <div class="w-full flex flex-row justify-center gap-1 overflow-x-scroll" style="height: {controller.runes.settings.ui.media_view.filmstrip.thumbnail_size}px;">
-              {#each media_selections.current_selection.thumbnails.results as thumbnail, index}
+              {#each controller.runes.media_selections.current_selection.thumbnails.results as thumbnail, index (thumbnail.id)}
                 <div class="h-full">
-                  <img class="h-full" src="/files/thumbnail/{media_selections.current_selection.media_response.media_reference.id}?index={index}" alt="Thumbnail {index}"></div>
+                  <img class="h-full" src="/files/thumbnail/{controller.runes.media_selections.current_selection.media_response.media_reference.id}?index={index}" alt="Thumbnail {index}"></div>
               {/each}
             </div>
           {/if}
-        {:else if media_selections.current_selection.media_response.media_file.media_type === 'AUDIO'}
+        {:else if controller.runes.media_selections.current_selection.media_response.media_file.media_type === 'AUDIO'}
           <img
-            class="object-contain max-h-full"
-            src="/files/thumbnail/{media_selections.current_selection.media_response.media_reference.id}" alt="Audio thumbnail">
+            class="object-contain {media_fit_classes}"
+            src="/files/thumbnail/{controller.runes.media_selections.current_selection.media_response.media_reference.id}" alt="Audio thumbnail">
           <audio
             autoplay
             loop
@@ -151,7 +175,7 @@
           </audio>
         {/if}
       {:else}
-        unhandled media type {media_selections.current_selection.media_response.media_type}
+        unhandled media type {controller.runes.media_selections.current_selection.media_response.media_type}
       {/if}
     {/if}
   </div>

From d49763c4a03af03550d91148dcf0b9c3eb2f57b8 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 20 Apr 2026 23:25:22 +0000
Subject: [PATCH 05/13] fix(web): make Ctrl-Space fit keybind robust

Co-authored-by: andykais-claude <andykais-claude@users.noreply.github.com>
---
 packages/web/src/lib/keybinds.ts | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/lib/keybinds.ts b/packages/web/src/lib/keybinds.ts
index 9ae3a943..f0ec32c1 100644
--- a/packages/web/src/lib/keybinds.ts
+++ b/packages/web/src/lib/keybinds.ts
@@ -36,7 +36,15 @@ export class Keybinds {
   #normalize_keybind_code(code: string) {
     return code
       .split('-')
-      .map(part => part.replace('Control', 'Ctrl').replace('Key', ''))
+      .map(part => {
+        const normalized_part = part
+          .replace('Control', 'Ctrl')
+          .replace('Spacebar', 'Space')
+          .replace('Key', '')
+        if (normalized_part === ' ') return 'Space'
+        if (normalized_part === 'Esc') return 'Escape'
+        return normalized_part
+      })
       .join('-')
   }
 
@@ -92,9 +100,15 @@ export class Keybinds {
     if (e.shiftKey) keys_down.push('Shift')
     if (e.altKey) keys_down.push('Alt')
     keys_down.push(last_keycode)
-    const code = keys_down.join('-')
-
-    const action = this.#keybind_mapper.get(code)
+    const code = this.#normalize_keybind_code(keys_down.join('-'))
+    const key_fallback = this.#normalize_keybind_code([
+      ...(e.ctrlKey ? ['Ctrl'] : []),
+      ...(e.shiftKey ? ['Shift'] : []),
+      ...(e.altKey ? ['Alt'] : []),
+      e.key,
+    ].join('-'))
+
+    const action = this.#keybind_mapper.get(code) ?? this.#keybind_mapper.get(key_fallback)
     if (action) {
       this.emitter.dispatchEvent(new CustomEvent(action, {
         detail: {

From 73e774c2b0e1f572b38a0e6f3de864b680a85985 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 20 Apr 2026 23:41:56 +0000
Subject: [PATCH 06/13] fix(web): capture keydown so Ctrl-Space toggles media
 fit

Co-authored-by: andykais-claude <andykais-claude@users.noreply.github.com>
---
 packages/web/src/routes/browse/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/src/routes/browse/+page.svelte b/packages/web/src/routes/browse/+page.svelte
index 78ba0a8f..f101e954 100644
--- a/packages/web/src/routes/browse/+page.svelte
+++ b/packages/web/src/routes/browse/+page.svelte
@@ -31,6 +31,6 @@
 </div>
 
 <svelte:window
-  on:keydown={controller.keybinds.handler}
+  on:keydown|capture={controller.keybinds.handler}
   bind:innerHeight={dimensions.heights.screen} 
 />

From d3dde0d222aefc0ac2bfc8561909a87468f93a5a Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 19 Jun 2026 19:29:35 +0000
Subject: [PATCH 07/13] fix(web): type keybind listeners as custom events

Co-authored-by: andykais-claude <andykais-claude@users.noreply.github.com>
---
 packages/web/src/lib/keybinds.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/lib/keybinds.ts b/packages/web/src/lib/keybinds.ts
index f0ec32c1..218d8105 100644
--- a/packages/web/src/lib/keybinds.ts
+++ b/packages/web/src/lib/keybinds.ts
@@ -25,7 +25,11 @@ type KeybindAction =
   | 'Star4'
   | 'Star5'
 
-type KeybindActionListener = (e: KeyboardEvent) => void
+interface KeybindActionEventDetail {
+  data: { keyboard_event: KeyboardEvent }
+}
+type KeybindActionEvent = CustomEvent<KeybindActionEventDetail>
+type KeybindActionListener = (e: KeybindActionEvent) => void
 
 export class Keybinds {
   public emitter: EventTarget
@@ -76,12 +80,12 @@ export class Keybinds {
   }
 
   public listen(event: KeybindAction, handler: KeybindActionListener) {
-    this.emitter.addEventListener(event, handler)
+    this.emitter.addEventListener(event, handler as EventListener)
     return handler
   }
 
   public remove_listener(event: KeybindAction, handler: KeybindActionListener) {
-    this.emitter.removeEventListener(event, handler)
+    this.emitter.removeEventListener(event, handler as EventListener)
   }
 
   public handler = (e: KeyboardEvent) => {

From de4147391c1582af10e10e6e375ff47aa5e56f75 Mon Sep 17 00:00:00 2001
From: Andrew Kaiser <kaisea.rpi@gmail.com>
Date: Mon, 6 Jul 2026 23:11:25 -0400
Subject: [PATCH 08/13] minor fixes

---
 deno.lock                                     | 221 +++++++++++++++++-
 packages/web/src/lib/keybinds.ts              |  28 +--
 .../routes/browse/components/Footer.svelte    |   6 +-
 .../routes/browse/components/MediaView.svelte |  97 ++++----
 4 files changed, 284 insertions(+), 68 deletions(-)

diff --git a/deno.lock b/deno.lock
index e55205d4..30530c98 100644
--- a/deno.lock
+++ b/deno.lock
@@ -77,6 +77,7 @@
     "npm:@types/node@*": "24.2.0",
     "npm:esbuild@*": "0.25.10",
     "npm:path-to-regexp@6.2.1": "6.2.1",
+    "npm:sharp@*": "0.35.1",
     "npm:sv@*": "0.12.5",
     "npm:sv@latest": "0.12.5",
     "npm:svelte-check@4.3.2": "4.3.2_svelte@5.39.8__acorn@8.15.0_typescript@5.9.3",
@@ -359,6 +360,12 @@
         "vite"
       ]
     },
+    "@emnapi/runtime@1.11.1": {
+      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
+      "dependencies": [
+        "tslib"
+      ]
+    },
     "@esbuild/aix-ppc64@0.25.10": {
       "integrity": "sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw==",
       "os": ["aix"],
@@ -489,6 +496,174 @@
       "os": ["win32"],
       "cpu": ["x64"]
     },
+    "@img/colour@1.1.0": {
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ=="
+    },
+    "@img/sharp-darwin-arm64@0.35.1": {
+      "integrity": "sha512-T15JRWOubQ3f5+GxnWeIvo47u5qV0M9HBgJhT+f2gE1e9e6OhR6K73Re52Hm80qWcu1DNb3GweKmpr/MnuP2Ow==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-darwin-arm64"
+      ],
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "@img/sharp-darwin-x64@0.35.1": {
+      "integrity": "sha512-t1CPD0cr7XCHjwUj6tQ5MC0pCi866I+gUW6zbUX4aFPnKd1DFBtk0M+gWcjX8VeEzgfCNiSiNTVFZ6b7kvdbnQ==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-darwin-x64"
+      ],
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "@img/sharp-freebsd-wasm32@0.35.1": {
+      "integrity": "sha512-MBSQXqNPThW9EcZ905H6N4sEdX5EwZEYzGx5EBq9ncDCGJALMiY1xPFJxNdzuB1iBjLOpIfxajM6YxdvwmQSLA==",
+      "dependencies": [
+        "@img/sharp-wasm32"
+      ],
+      "os": ["freebsd"]
+    },
+    "@img/sharp-libvips-darwin-arm64@1.3.0": {
+      "integrity": "sha512-EKbmBKtyTH+GPFDRw2TgK2oV6hyxxlJVIar4hoTYSNmIwipgMFdxPQqR392GmfdsPGWga0mCFN1cCKjRb9cljw==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "@img/sharp-libvips-darwin-x64@1.3.0": {
+      "integrity": "sha512-Pl2OmOvrJ42adUllESxBsG54PfXLo1OYg9i3c5/5Ln/qJ0gZuTM9YMhQJPIbXqwidLRc/c2zuHt4RsrymmNv7A==",
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "@img/sharp-libvips-linux-arm64@1.3.0": {
+      "integrity": "sha512-C0SqjoFKnszqa44EQ7xoaT48nnO0lOyXEULfXMWi8krrjOPGYkeK30Okzla6ATbBYsyZ0ySinK0FVkpv3DwzfQ==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@img/sharp-libvips-linux-arm@1.3.0": {
+      "integrity": "sha512-A8UpHoUDW4DwnXoV6+q3C1s7QLRAHtPDEjWuNZjwHMyoCNZnm0GeNN8ls9f/bsEYTRQRW96C/n34XJQHJ2fT7A==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "@img/sharp-libvips-linux-ppc64@1.3.0": {
+      "integrity": "sha512-WOpkVxAjFd369iaIzEgNRreFD+gWdUMIGD5zplhNKNeqS6mm5dac3q2AFyCBmzYoAdouzZvRBgxy4z8QHZb4/A==",
+      "os": ["linux"],
+      "cpu": ["ppc64"]
+    },
+    "@img/sharp-libvips-linux-riscv64@1.3.0": {
+      "integrity": "sha512-DRWw0mOHusrCCuw2rqP87oLg6PGlkomVDFqw2hIwsSfwWpu4k3XLcBPaKKl6ct/GtL/cwNkgwjV/tc0Mqht3VA==",
+      "os": ["linux"],
+      "cpu": ["riscv64"]
+    },
+    "@img/sharp-libvips-linux-s390x@1.3.0": {
+      "integrity": "sha512-9APy+nFWhHS+kzLgWZfLcyrUd7YqnAQVa4BPOo4xkoHpdoktOAPG4cEr9+Jpl0TtqfVmcMJimNL5qNTyyOHZNA==",
+      "os": ["linux"],
+      "cpu": ["s390x"]
+    },
+    "@img/sharp-libvips-linux-x64@1.3.0": {
+      "integrity": "sha512-y9RNUYDe2A1UAdhLyfeOodGRszQdaEoe4nfOpp/sNVPl2CWIcUyFaDoCh4vPLPxu19803j2naLqZup2WxDXCLA==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@img/sharp-libvips-linuxmusl-arm64@1.3.0": {
+      "integrity": "sha512-cC1wkC0Mlucd0KSiGrLkJnB/ZqPvZCntc/Lk7ZnYO5ZSbF2euNek4Xvxafojq+wN1q/W0eprdpUIjUr/EV2PBg==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@img/sharp-libvips-linuxmusl-x64@1.3.0": {
+      "integrity": "sha512-LiYMhUZicB1QG//+RvmYZpXJO8fYRENfp+MZUCnG9aw+AKvGAy9gPaCnuwsPcBFs8EV66M0NNxj9VHcNklE8zw==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@img/sharp-linux-arm64@0.35.1": {
+      "integrity": "sha512-ErCRyGU7LeoaFBZ0xW8hhLlXzhAg80sc4vxePB86qvtEvW1jEhhmbiNBP4oEzZfPMnu6HwHXfzD2W2kBU+RnCw==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linux-arm64"
+      ],
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@img/sharp-linux-arm@0.35.1": {
+      "integrity": "sha512-jygmR02PpCYypt7xB7nst1vqjZp/BpRA/Kf9nK7qRponJ/KrLPaZWEG4G15z1d2FZ6XqI+T0350ha3RSnKx24A==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linux-arm"
+      ],
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "@img/sharp-linux-ppc64@0.35.1": {
+      "integrity": "sha512-LUWZ2+r2UoLCd8j0RLCwQ4gL6w47+Y7igxtVnPIDXOOEjV86LpBkAHq5VpJeg+GHbw0KN/JWlPJOdZjyZnFqFQ==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linux-ppc64"
+      ],
+      "os": ["linux"],
+      "cpu": ["ppc64"]
+    },
+    "@img/sharp-linux-riscv64@0.35.1": {
+      "integrity": "sha512-i7x6J3mwF4JgT0sM4V4WlAWdJ0bucPtA9rzO1bTji1n5qgBq/W5nn87RvOQPleuuxahNoLdTngByD8/vDDLArw==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linux-riscv64"
+      ],
+      "os": ["linux"],
+      "cpu": ["riscv64"]
+    },
+    "@img/sharp-linux-s390x@0.35.1": {
+      "integrity": "sha512-0zSaTUjTF0kIWTSYxD4EG/nvCU4jez53+3RdURtoY3HvbXtIQ98W90JnrGz/oLRFuEnfIy9+7xeq883euc0ZWw==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linux-s390x"
+      ],
+      "os": ["linux"],
+      "cpu": ["s390x"]
+    },
+    "@img/sharp-linux-x64@0.35.1": {
+      "integrity": "sha512-NbJD4mWdeyrNQKluO/tR/wBDOelcowSVGNBWxI0e3ZtlXc6F/UOVKDj1MLD4zl3oHTuvKW3s+MA9N54YTldAYw==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linux-x64"
+      ],
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@img/sharp-linuxmusl-arm64@0.35.1": {
+      "integrity": "sha512-VoW2sQCWI+0YIKQEmWJ8vzaQjTg9wIyfkFpvEfAS2h43X6iHu7GTk1hhOgB4IpSzCHe8UwQZIcx7b81VTaOrJA==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linuxmusl-arm64"
+      ],
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@img/sharp-linuxmusl-x64@0.35.1": {
+      "integrity": "sha512-LjBoSd/c5JU0/K5MwzDMlgsSRP2bPn98JQGFFQAOLQ0bU/1z4ekxUdSKY9BmlwSh/cA+OrvpgsWqfZyYfVHBRw==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linuxmusl-x64"
+      ],
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@img/sharp-wasm32@0.35.1": {
+      "integrity": "sha512-PCQUoQdZyE8tp3HpbevuihfUmgSP4qWI0FGEPWoeXqaS+cUrFfemabHQiebUmUmlUhCuNnQMxGrQ+CPqK4hnxg==",
+      "dependencies": [
+        "@emnapi/runtime"
+      ]
+    },
+    "@img/sharp-webcontainers-wasm32@0.35.1": {
+      "integrity": "sha512-xU2ml2bU2OPxYVvW2A6ae4M1g5QKyhKG06P4FAt+YEaFQQO0919Qx+XxIZEUuWTMoDViLpMws2/dQwoe/VcA6A==",
+      "dependencies": [
+        "@img/sharp-wasm32"
+      ],
+      "cpu": ["wasm32"]
+    },
+    "@img/sharp-win32-arm64@0.35.1": {
+      "integrity": "sha512-IkmHwuFhYpd3bTsN5SAahjwhiAcyXPooBt8vEUgxY3T0IP70sSJ0nU1xiPzZY8AH/OB1XpV3j8aZSVSOSfTbdA==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
+    "@img/sharp-win32-ia32@0.35.1": {
+      "integrity": "sha512-wQahqCi9MD8Yxzg4gVM4fNrZxh+r6vD55PyIg+WJPaM5ZRUyF35iQpwJCuma3r6viU9/8Pxlc+XHV+woVa6nCQ==",
+      "os": ["win32"],
+      "cpu": ["ia32"]
+    },
+    "@img/sharp-win32-x64@0.35.1": {
+      "integrity": "sha512-WzBtkYtZHATLPe8XRharxZXxQ9cdLrQWHiwxt+BJ5rBsisQrKeeV86ErxPSVhcG6xCEuNhs0SqLpWr7XDa2k6w==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
     "@isaacs/fs-minipass@4.0.1": {
       "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
       "dependencies": [
@@ -1106,8 +1281,8 @@
     "deepmerge@4.3.1": {
       "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
     },
-    "detect-libc@2.1.1": {
-      "integrity": "sha512-ecqj/sy1jcK1uWrwpR67UhYrIFQ+5WlGxth34WquCbamhFA6hkkwiu37o6J5xCHdo1oixJRfVRw+ywV+Hq/0Aw=="
+    "detect-libc@2.1.2": {
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="
     },
     "devalue@5.3.2": {
       "integrity": "sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw=="
@@ -1360,9 +1535,48 @@
     "scule@1.3.0": {
       "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g=="
     },
+    "semver@7.8.4": {
+      "integrity": "sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==",
+      "bin": true
+    },
     "set-cookie-parser@2.7.1": {
       "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
     },
+    "sharp@0.35.1": {
+      "integrity": "sha512-lW979AMi+ESidzMv/Lnv+F9bknzLyxLqFI05Sm433vOeRcltgxQmXpnfOOFIAlKtwXU/ksupm2srQoFCkR214g==",
+      "dependencies": [
+        "@img/colour",
+        "detect-libc",
+        "semver"
+      ],
+      "optionalDependencies": [
+        "@img/sharp-darwin-arm64",
+        "@img/sharp-darwin-x64",
+        "@img/sharp-freebsd-wasm32",
+        "@img/sharp-libvips-darwin-arm64",
+        "@img/sharp-libvips-darwin-x64",
+        "@img/sharp-libvips-linux-arm",
+        "@img/sharp-libvips-linux-arm64",
+        "@img/sharp-libvips-linux-ppc64",
+        "@img/sharp-libvips-linux-riscv64",
+        "@img/sharp-libvips-linux-s390x",
+        "@img/sharp-libvips-linux-x64",
+        "@img/sharp-libvips-linuxmusl-arm64",
+        "@img/sharp-libvips-linuxmusl-x64",
+        "@img/sharp-linux-arm",
+        "@img/sharp-linux-arm64",
+        "@img/sharp-linux-ppc64",
+        "@img/sharp-linux-riscv64",
+        "@img/sharp-linux-s390x",
+        "@img/sharp-linux-x64",
+        "@img/sharp-linuxmusl-arm64",
+        "@img/sharp-linuxmusl-x64",
+        "@img/sharp-webcontainers-wasm32",
+        "@img/sharp-win32-arm64",
+        "@img/sharp-win32-ia32",
+        "@img/sharp-win32-x64"
+      ]
+    },
     "sirv@2.0.4": {
       "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
       "dependencies": [
@@ -1470,6 +1684,9 @@
     "ts-pattern@5.2.0": {
       "integrity": "sha512-aGaSpOlDcns7ZoeG/OMftWyQG1KqPVhgplhJxNCvyIXqWrumM5uIoOSarw/hmmi/T1PnuQ/uD8NaFHvLpHicDg=="
     },
+    "tslib@2.8.1": {
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
     "typescript-svelte-plugin@0.3.50_svelte@5.39.8__acorn@8.15.0_typescript@5.9.3": {
       "integrity": "sha512-CD6jMNAYJwqCyQ5zZBDRuveeJvAgIogLwXMf5eXAl4K36wD8W+Npw49h6j5fXnpd7SKcG3uptGpeCGETED6WSA==",
       "dependencies": [
diff --git a/packages/web/src/lib/keybinds.ts b/packages/web/src/lib/keybinds.ts
index 218d8105..2996a2a9 100644
--- a/packages/web/src/lib/keybinds.ts
+++ b/packages/web/src/lib/keybinds.ts
@@ -37,8 +37,11 @@ export class Keybinds {
   #keybind_mapper: Map<string, KeybindAction> | undefined
   #config: Config | undefined
 
-  #normalize_keybind_code(code: string) {
-    return code
+  // this function is for some user ergonomics.
+  // It makes sure the user defined key order (Ctrl-Shift-Alt-S) matches the way we grab keybinds internally
+  // (same order, replace common mispellings like Control -> Ctrl)
+  #get_keybind_code(code: string) {
+    const keycodes = code
       .split('-')
       .map(part => {
         const normalized_part = part
@@ -49,7 +52,13 @@ export class Keybinds {
         if (normalized_part === 'Esc') return 'Escape'
         return normalized_part
       })
-      .join('-')
+
+    const order_preference = ['Ctrl', 'Shift', 'Alt']
+    keycodes.sort((a, b) => {
+      return order_preference.indexOf(b) - order_preference.indexOf(a)
+    })
+
+    return keycodes.join('-')
   }
 
   public constructor(config: Config) {
@@ -60,7 +69,7 @@ export class Keybinds {
     this.#keybind_mapper = new Map<string, KeybindAction>()
     for (const [keyboard_action, keyboard_shortcuts] of Object.entries(this.#config.web.shortcuts)) {
       for (const keyboard_shortcut of keyboard_shortcuts) {
-        this.#keybind_mapper.set(this.#normalize_keybind_code(keyboard_shortcut), keyboard_action as KeybindAction)
+        this.#keybind_mapper.set(this.#get_keybind_code(keyboard_shortcut), keyboard_action as KeybindAction)
       }
     }
   }
@@ -104,15 +113,8 @@ export class Keybinds {
     if (e.shiftKey) keys_down.push('Shift')
     if (e.altKey) keys_down.push('Alt')
     keys_down.push(last_keycode)
-    const code = this.#normalize_keybind_code(keys_down.join('-'))
-    const key_fallback = this.#normalize_keybind_code([
-      ...(e.ctrlKey ? ['Ctrl'] : []),
-      ...(e.shiftKey ? ['Shift'] : []),
-      ...(e.altKey ? ['Alt'] : []),
-      e.key,
-    ].join('-'))
-
-    const action = this.#keybind_mapper.get(code) ?? this.#keybind_mapper.get(key_fallback)
+    const code = this.#get_keybind_code(keys_down.join('-'))
+    const action = this.#keybind_mapper.get(code)
     if (action) {
       this.emitter.dispatchEvent(new CustomEvent(action, {
         detail: {
diff --git a/packages/web/src/routes/browse/components/Footer.svelte b/packages/web/src/routes/browse/components/Footer.svelte
index ea12fa19..a8a63399 100644
--- a/packages/web/src/routes/browse/components/Footer.svelte
+++ b/packages/web/src/routes/browse/components/Footer.svelte
@@ -71,6 +71,7 @@
     </div>
 
     <div>
+      tiles:
       <button
         title="Toggle thumbnail shape"
         class="rounded-sm bg-gray-800 px-2 text-slate-400 hover:bg-gray-600"
@@ -84,8 +85,9 @@
     </div>
 
     <div>
+      view:
       <button
-        title="Toggle media fit mode"
+        title="Toggle view fit mode"
         class="rounded-sm bg-gray-800 px-2 text-slate-400 hover:bg-gray-600"
         onclick={() => {
           const updated_mode = controller.runes.settings.ui.media_view.fit.mode === 'original'
@@ -93,7 +95,7 @@
             : 'original'
           controller.runes.settings.set('ui.media_view.fit.mode', updated_mode)
         }}
-      >Media: {controller.runes.settings.ui.media_view.fit.mode}</button>
+      >{controller.runes.settings.ui.media_view.fit.mode}</button>
     </div>
 
     <span class="">
diff --git a/packages/web/src/routes/browse/components/MediaView.svelte b/packages/web/src/routes/browse/components/MediaView.svelte
index 3e63e4a6..7ab61e97 100644
--- a/packages/web/src/routes/browse/components/MediaView.svelte
+++ b/packages/web/src/routes/browse/components/MediaView.svelte
@@ -16,13 +16,6 @@
   let {controller}: Props = $props()
   let paused = $state(false)
 
-  const toggle_fit_mode = () => {
-    const updated_mode = controller.runes.settings.ui.media_view.fit.mode === 'original'
-      ? 'fill'
-      : 'original'
-    controller.runes.settings.set('ui.media_view.fit.mode', updated_mode)
-  }
-
   const media_fit_classes = $derived.by(() => {
     if (controller.runes.settings.ui.media_view.fit.mode === 'original') {
       return 'w-auto h-auto max-w-full max-h-full'
@@ -35,51 +28,53 @@
     return 'h-full w-auto max-w-full'
   })
 
-  const register_component_keybinds = () => {
-    controller.keybinds.component_listen({
-      Escape: e => {
-        if (document.fullscreenElement === fullscreen_container) {
-          document.exitFullscreen()
-          return
-        }
-        dialog.close()
-        controller.runes.media_selections.close_media()
-      },
-      PlayPauseMedia: e => {
-        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
-      },
-      ToggleFitMedia: async e => {
-        toggle_fit_mode()
-      },
-      ToggleFullScreen: async e => {
-        if (!dialog.open || !controller.runes.media_selections.current_selection.show) return
-        e.detail.data.keyboard_event.preventDefault()
-
-        if (document.fullscreenElement === fullscreen_container) {
-          await document.exitFullscreen()
-        } else {
-          await fullscreen_container.requestFullscreen()
-        }
-      },
-      CopyMedia: async e => {
-        if (controller.runes.media_selections.current_selection.media_response) {
-          if (controller.runes.media_selections.current_selection.media_response.media_type === 'media_file') {
-            await navigator.clipboard.writeText(controller.runes.media_selections.current_selection.media_response.media_file.filepath)
-          }
+  controller.keybinds.component_listen({
+    Escape: e => {
+      if (document.fullscreenElement === fullscreen_container) {
+        document.exitFullscreen()
+        return
+      }
+      dialog.close()
+      controller.runes.media_selections.close_media()
+    },
+    PlayPauseMedia: e => {
+      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
+    },
+    ToggleFitMedia: async e => {
+      const updated_mode = controller.runes.settings.ui.media_view.fit.mode === 'original'
+        ? 'fill'
+        : 'original'
+      controller.runes.settings.set('ui.media_view.fit.mode', updated_mode)
+    },
+    ToggleFullScreen: async e => {
+      if (!dialog.open || !controller.runes.media_selections.current_selection.show) return
+      e.detail.data.keyboard_event.preventDefault()
+
+      if (document.fullscreenElement === fullscreen_container) {
+        console.log('exiting full screen...')
+        await document.exitFullscreen()
+      } else {
+        console.log('requesting full screen...')
+        await fullscreen_container.requestFullscreen()
+      }
+    },
+    CopyMedia: async e => {
+      if (controller.runes.media_selections.current_selection.media_response) {
+        if (controller.runes.media_selections.current_selection.media_response.media_type === 'media_file') {
+          await navigator.clipboard.writeText(controller.runes.media_selections.current_selection.media_response.media_file.filepath)
         }
-      },
-    })
-  }
-  register_component_keybinds()
+      }
+    },
+  })
 
   let filmstrip_thumbnails
   let filmstrip_height = 50

From 8bdce605e3f3deefa8d928bbe68cbd432272e4cb Mon Sep 17 00:00:00 2001
From: Andrew Kaiser <kaisea.rpi@gmail.com>
Date: Mon, 6 Jul 2026 23:15:36 -0400
Subject: [PATCH 09/13] revert adding sharp dep from scratchwork

---
 deno.lock | 221 +-----------------------------------------------------
 1 file changed, 2 insertions(+), 219 deletions(-)

diff --git a/deno.lock b/deno.lock
index 30530c98..e55205d4 100644
--- a/deno.lock
+++ b/deno.lock
@@ -77,7 +77,6 @@
     "npm:@types/node@*": "24.2.0",
     "npm:esbuild@*": "0.25.10",
     "npm:path-to-regexp@6.2.1": "6.2.1",
-    "npm:sharp@*": "0.35.1",
     "npm:sv@*": "0.12.5",
     "npm:sv@latest": "0.12.5",
     "npm:svelte-check@4.3.2": "4.3.2_svelte@5.39.8__acorn@8.15.0_typescript@5.9.3",
@@ -360,12 +359,6 @@
         "vite"
       ]
     },
-    "@emnapi/runtime@1.11.1": {
-      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
-      "dependencies": [
-        "tslib"
-      ]
-    },
     "@esbuild/aix-ppc64@0.25.10": {
       "integrity": "sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw==",
       "os": ["aix"],
@@ -496,174 +489,6 @@
       "os": ["win32"],
       "cpu": ["x64"]
     },
-    "@img/colour@1.1.0": {
-      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ=="
-    },
-    "@img/sharp-darwin-arm64@0.35.1": {
-      "integrity": "sha512-T15JRWOubQ3f5+GxnWeIvo47u5qV0M9HBgJhT+f2gE1e9e6OhR6K73Re52Hm80qWcu1DNb3GweKmpr/MnuP2Ow==",
-      "optionalDependencies": [
-        "@img/sharp-libvips-darwin-arm64"
-      ],
-      "os": ["darwin"],
-      "cpu": ["arm64"]
-    },
-    "@img/sharp-darwin-x64@0.35.1": {
-      "integrity": "sha512-t1CPD0cr7XCHjwUj6tQ5MC0pCi866I+gUW6zbUX4aFPnKd1DFBtk0M+gWcjX8VeEzgfCNiSiNTVFZ6b7kvdbnQ==",
-      "optionalDependencies": [
-        "@img/sharp-libvips-darwin-x64"
-      ],
-      "os": ["darwin"],
-      "cpu": ["x64"]
-    },
-    "@img/sharp-freebsd-wasm32@0.35.1": {
-      "integrity": "sha512-MBSQXqNPThW9EcZ905H6N4sEdX5EwZEYzGx5EBq9ncDCGJALMiY1xPFJxNdzuB1iBjLOpIfxajM6YxdvwmQSLA==",
-      "dependencies": [
-        "@img/sharp-wasm32"
-      ],
-      "os": ["freebsd"]
-    },
-    "@img/sharp-libvips-darwin-arm64@1.3.0": {
-      "integrity": "sha512-EKbmBKtyTH+GPFDRw2TgK2oV6hyxxlJVIar4hoTYSNmIwipgMFdxPQqR392GmfdsPGWga0mCFN1cCKjRb9cljw==",
-      "os": ["darwin"],
-      "cpu": ["arm64"]
-    },
-    "@img/sharp-libvips-darwin-x64@1.3.0": {
-      "integrity": "sha512-Pl2OmOvrJ42adUllESxBsG54PfXLo1OYg9i3c5/5Ln/qJ0gZuTM9YMhQJPIbXqwidLRc/c2zuHt4RsrymmNv7A==",
-      "os": ["darwin"],
-      "cpu": ["x64"]
-    },
-    "@img/sharp-libvips-linux-arm64@1.3.0": {
-      "integrity": "sha512-C0SqjoFKnszqa44EQ7xoaT48nnO0lOyXEULfXMWi8krrjOPGYkeK30Okzla6ATbBYsyZ0ySinK0FVkpv3DwzfQ==",
-      "os": ["linux"],
-      "cpu": ["arm64"]
-    },
-    "@img/sharp-libvips-linux-arm@1.3.0": {
-      "integrity": "sha512-A8UpHoUDW4DwnXoV6+q3C1s7QLRAHtPDEjWuNZjwHMyoCNZnm0GeNN8ls9f/bsEYTRQRW96C/n34XJQHJ2fT7A==",
-      "os": ["linux"],
-      "cpu": ["arm"]
-    },
-    "@img/sharp-libvips-linux-ppc64@1.3.0": {
-      "integrity": "sha512-WOpkVxAjFd369iaIzEgNRreFD+gWdUMIGD5zplhNKNeqS6mm5dac3q2AFyCBmzYoAdouzZvRBgxy4z8QHZb4/A==",
-      "os": ["linux"],
-      "cpu": ["ppc64"]
-    },
-    "@img/sharp-libvips-linux-riscv64@1.3.0": {
-      "integrity": "sha512-DRWw0mOHusrCCuw2rqP87oLg6PGlkomVDFqw2hIwsSfwWpu4k3XLcBPaKKl6ct/GtL/cwNkgwjV/tc0Mqht3VA==",
-      "os": ["linux"],
-      "cpu": ["riscv64"]
-    },
-    "@img/sharp-libvips-linux-s390x@1.3.0": {
-      "integrity": "sha512-9APy+nFWhHS+kzLgWZfLcyrUd7YqnAQVa4BPOo4xkoHpdoktOAPG4cEr9+Jpl0TtqfVmcMJimNL5qNTyyOHZNA==",
-      "os": ["linux"],
-      "cpu": ["s390x"]
-    },
-    "@img/sharp-libvips-linux-x64@1.3.0": {
-      "integrity": "sha512-y9RNUYDe2A1UAdhLyfeOodGRszQdaEoe4nfOpp/sNVPl2CWIcUyFaDoCh4vPLPxu19803j2naLqZup2WxDXCLA==",
-      "os": ["linux"],
-      "cpu": ["x64"]
-    },
-    "@img/sharp-libvips-linuxmusl-arm64@1.3.0": {
-      "integrity": "sha512-cC1wkC0Mlucd0KSiGrLkJnB/ZqPvZCntc/Lk7ZnYO5ZSbF2euNek4Xvxafojq+wN1q/W0eprdpUIjUr/EV2PBg==",
-      "os": ["linux"],
-      "cpu": ["arm64"]
-    },
-    "@img/sharp-libvips-linuxmusl-x64@1.3.0": {
-      "integrity": "sha512-LiYMhUZicB1QG//+RvmYZpXJO8fYRENfp+MZUCnG9aw+AKvGAy9gPaCnuwsPcBFs8EV66M0NNxj9VHcNklE8zw==",
-      "os": ["linux"],
-      "cpu": ["x64"]
-    },
-    "@img/sharp-linux-arm64@0.35.1": {
-      "integrity": "sha512-ErCRyGU7LeoaFBZ0xW8hhLlXzhAg80sc4vxePB86qvtEvW1jEhhmbiNBP4oEzZfPMnu6HwHXfzD2W2kBU+RnCw==",
-      "optionalDependencies": [
-        "@img/sharp-libvips-linux-arm64"
-      ],
-      "os": ["linux"],
-      "cpu": ["arm64"]
-    },
-    "@img/sharp-linux-arm@0.35.1": {
-      "integrity": "sha512-jygmR02PpCYypt7xB7nst1vqjZp/BpRA/Kf9nK7qRponJ/KrLPaZWEG4G15z1d2FZ6XqI+T0350ha3RSnKx24A==",
-      "optionalDependencies": [
-        "@img/sharp-libvips-linux-arm"
-      ],
-      "os": ["linux"],
-      "cpu": ["arm"]
-    },
-    "@img/sharp-linux-ppc64@0.35.1": {
-      "integrity": "sha512-LUWZ2+r2UoLCd8j0RLCwQ4gL6w47+Y7igxtVnPIDXOOEjV86LpBkAHq5VpJeg+GHbw0KN/JWlPJOdZjyZnFqFQ==",
-      "optionalDependencies": [
-        "@img/sharp-libvips-linux-ppc64"
-      ],
-      "os": ["linux"],
-      "cpu": ["ppc64"]
-    },
-    "@img/sharp-linux-riscv64@0.35.1": {
-      "integrity": "sha512-i7x6J3mwF4JgT0sM4V4WlAWdJ0bucPtA9rzO1bTji1n5qgBq/W5nn87RvOQPleuuxahNoLdTngByD8/vDDLArw==",
-      "optionalDependencies": [
-        "@img/sharp-libvips-linux-riscv64"
-      ],
-      "os": ["linux"],
-      "cpu": ["riscv64"]
-    },
-    "@img/sharp-linux-s390x@0.35.1": {
-      "integrity": "sha512-0zSaTUjTF0kIWTSYxD4EG/nvCU4jez53+3RdURtoY3HvbXtIQ98W90JnrGz/oLRFuEnfIy9+7xeq883euc0ZWw==",
-      "optionalDependencies": [
-        "@img/sharp-libvips-linux-s390x"
-      ],
-      "os": ["linux"],
-      "cpu": ["s390x"]
-    },
-    "@img/sharp-linux-x64@0.35.1": {
-      "integrity": "sha512-NbJD4mWdeyrNQKluO/tR/wBDOelcowSVGNBWxI0e3ZtlXc6F/UOVKDj1MLD4zl3oHTuvKW3s+MA9N54YTldAYw==",
-      "optionalDependencies": [
-        "@img/sharp-libvips-linux-x64"
-      ],
-      "os": ["linux"],
-      "cpu": ["x64"]
-    },
-    "@img/sharp-linuxmusl-arm64@0.35.1": {
-      "integrity": "sha512-VoW2sQCWI+0YIKQEmWJ8vzaQjTg9wIyfkFpvEfAS2h43X6iHu7GTk1hhOgB4IpSzCHe8UwQZIcx7b81VTaOrJA==",
-      "optionalDependencies": [
-        "@img/sharp-libvips-linuxmusl-arm64"
-      ],
-      "os": ["linux"],
-      "cpu": ["arm64"]
-    },
-    "@img/sharp-linuxmusl-x64@0.35.1": {
-      "integrity": "sha512-LjBoSd/c5JU0/K5MwzDMlgsSRP2bPn98JQGFFQAOLQ0bU/1z4ekxUdSKY9BmlwSh/cA+OrvpgsWqfZyYfVHBRw==",
-      "optionalDependencies": [
-        "@img/sharp-libvips-linuxmusl-x64"
-      ],
-      "os": ["linux"],
-      "cpu": ["x64"]
-    },
-    "@img/sharp-wasm32@0.35.1": {
-      "integrity": "sha512-PCQUoQdZyE8tp3HpbevuihfUmgSP4qWI0FGEPWoeXqaS+cUrFfemabHQiebUmUmlUhCuNnQMxGrQ+CPqK4hnxg==",
-      "dependencies": [
-        "@emnapi/runtime"
-      ]
-    },
-    "@img/sharp-webcontainers-wasm32@0.35.1": {
-      "integrity": "sha512-xU2ml2bU2OPxYVvW2A6ae4M1g5QKyhKG06P4FAt+YEaFQQO0919Qx+XxIZEUuWTMoDViLpMws2/dQwoe/VcA6A==",
-      "dependencies": [
-        "@img/sharp-wasm32"
-      ],
-      "cpu": ["wasm32"]
-    },
-    "@img/sharp-win32-arm64@0.35.1": {
-      "integrity": "sha512-IkmHwuFhYpd3bTsN5SAahjwhiAcyXPooBt8vEUgxY3T0IP70sSJ0nU1xiPzZY8AH/OB1XpV3j8aZSVSOSfTbdA==",
-      "os": ["win32"],
-      "cpu": ["arm64"]
-    },
-    "@img/sharp-win32-ia32@0.35.1": {
-      "integrity": "sha512-wQahqCi9MD8Yxzg4gVM4fNrZxh+r6vD55PyIg+WJPaM5ZRUyF35iQpwJCuma3r6viU9/8Pxlc+XHV+woVa6nCQ==",
-      "os": ["win32"],
-      "cpu": ["ia32"]
-    },
-    "@img/sharp-win32-x64@0.35.1": {
-      "integrity": "sha512-WzBtkYtZHATLPe8XRharxZXxQ9cdLrQWHiwxt+BJ5rBsisQrKeeV86ErxPSVhcG6xCEuNhs0SqLpWr7XDa2k6w==",
-      "os": ["win32"],
-      "cpu": ["x64"]
-    },
     "@isaacs/fs-minipass@4.0.1": {
       "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
       "dependencies": [
@@ -1281,8 +1106,8 @@
     "deepmerge@4.3.1": {
       "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
     },
-    "detect-libc@2.1.2": {
-      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="
+    "detect-libc@2.1.1": {
+      "integrity": "sha512-ecqj/sy1jcK1uWrwpR67UhYrIFQ+5WlGxth34WquCbamhFA6hkkwiu37o6J5xCHdo1oixJRfVRw+ywV+Hq/0Aw=="
     },
     "devalue@5.3.2": {
       "integrity": "sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw=="
@@ -1535,48 +1360,9 @@
     "scule@1.3.0": {
       "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g=="
     },
-    "semver@7.8.4": {
-      "integrity": "sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==",
-      "bin": true
-    },
     "set-cookie-parser@2.7.1": {
       "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
     },
-    "sharp@0.35.1": {
-      "integrity": "sha512-lW979AMi+ESidzMv/Lnv+F9bknzLyxLqFI05Sm433vOeRcltgxQmXpnfOOFIAlKtwXU/ksupm2srQoFCkR214g==",
-      "dependencies": [
-        "@img/colour",
-        "detect-libc",
-        "semver"
-      ],
-      "optionalDependencies": [
-        "@img/sharp-darwin-arm64",
-        "@img/sharp-darwin-x64",
-        "@img/sharp-freebsd-wasm32",
-        "@img/sharp-libvips-darwin-arm64",
-        "@img/sharp-libvips-darwin-x64",
-        "@img/sharp-libvips-linux-arm",
-        "@img/sharp-libvips-linux-arm64",
-        "@img/sharp-libvips-linux-ppc64",
-        "@img/sharp-libvips-linux-riscv64",
-        "@img/sharp-libvips-linux-s390x",
-        "@img/sharp-libvips-linux-x64",
-        "@img/sharp-libvips-linuxmusl-arm64",
-        "@img/sharp-libvips-linuxmusl-x64",
-        "@img/sharp-linux-arm",
-        "@img/sharp-linux-arm64",
-        "@img/sharp-linux-ppc64",
-        "@img/sharp-linux-riscv64",
-        "@img/sharp-linux-s390x",
-        "@img/sharp-linux-x64",
-        "@img/sharp-linuxmusl-arm64",
-        "@img/sharp-linuxmusl-x64",
-        "@img/sharp-webcontainers-wasm32",
-        "@img/sharp-win32-arm64",
-        "@img/sharp-win32-ia32",
-        "@img/sharp-win32-x64"
-      ]
-    },
     "sirv@2.0.4": {
       "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
       "dependencies": [
@@ -1684,9 +1470,6 @@
     "ts-pattern@5.2.0": {
       "integrity": "sha512-aGaSpOlDcns7ZoeG/OMftWyQG1KqPVhgplhJxNCvyIXqWrumM5uIoOSarw/hmmi/T1PnuQ/uD8NaFHvLpHicDg=="
     },
-    "tslib@2.8.1": {
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
-    },
     "typescript-svelte-plugin@0.3.50_svelte@5.39.8__acorn@8.15.0_typescript@5.9.3": {
       "integrity": "sha512-CD6jMNAYJwqCyQ5zZBDRuveeJvAgIogLwXMf5eXAl4K36wD8W+Npw49h6j5fXnpd7SKcG3uptGpeCGETED6WSA==",
       "dependencies": [

From 023bea618f4b5426d62b766baada4bc894a727c5 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 7 Jul 2026 03:32:15 +0000
Subject: [PATCH 10/13] fix(web): ignore fullscreen keybind while typing

Co-authored-by: andykais-claude <andykais-claude@users.noreply.github.com>
---
 .../src/routes/browse/components/MediaView.svelte   | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/routes/browse/components/MediaView.svelte b/packages/web/src/routes/browse/components/MediaView.svelte
index 7ab61e97..0b5ff340 100644
--- a/packages/web/src/routes/browse/components/MediaView.svelte
+++ b/packages/web/src/routes/browse/components/MediaView.svelte
@@ -28,6 +28,16 @@
     return 'h-full w-auto max-w-full'
   })
 
+  const focused_on_editable_element = () => {
+    const active_element = document.activeElement
+    if (!active_element) return false
+
+    if (active_element instanceof HTMLInputElement) return true
+    if (active_element instanceof HTMLTextAreaElement) return true
+    if (active_element instanceof HTMLSelectElement) return true
+    return active_element.hasAttribute('contenteditable')
+  }
+
   controller.keybinds.component_listen({
     Escape: e => {
       if (document.fullscreenElement === fullscreen_container) {
@@ -57,13 +67,12 @@
     },
     ToggleFullScreen: async e => {
       if (!dialog.open || !controller.runes.media_selections.current_selection.show) return
+      if (focused_on_editable_element()) return
       e.detail.data.keyboard_event.preventDefault()
 
       if (document.fullscreenElement === fullscreen_container) {
-        console.log('exiting full screen...')
         await document.exitFullscreen()
       } else {
-        console.log('requesting full screen...')
         await fullscreen_container.requestFullscreen()
       }
     },

From f08db350ea4df08b0531837327ddb0acf653862f Mon Sep 17 00:00:00 2001
From: Andrew Kaiser <kaisea.rpi@gmail.com>
Date: Tue, 7 Jul 2026 12:44:21 -0400
Subject: [PATCH 11/13] clean up linter errors

---
 .../src/routes/browse/components/MediaView.svelte  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/web/src/routes/browse/components/MediaView.svelte b/packages/web/src/routes/browse/components/MediaView.svelte
index 0b5ff340..a00e088b 100644
--- a/packages/web/src/routes/browse/components/MediaView.svelte
+++ b/packages/web/src/routes/browse/components/MediaView.svelte
@@ -39,7 +39,7 @@
   }
 
   controller.keybinds.component_listen({
-    Escape: e => {
+    Escape: () => {
       if (document.fullscreenElement === fullscreen_container) {
         document.exitFullscreen()
         return
@@ -47,19 +47,19 @@
       dialog.close()
       controller.runes.media_selections.close_media()
     },
-    PlayPauseMedia: e => {
+    PlayPauseMedia: () => {
       paused = !paused
     },
-    OpenMedia: e => {
+    OpenMedia: () => {
       /*
       // 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 => {
+    ToggleMediaControls: async () => {
       show_controls = !show_controls
     },
-    ToggleFitMedia: async e => {
+    ToggleFitMedia: async () => {
       const updated_mode = controller.runes.settings.ui.media_view.fit.mode === 'original'
         ? 'fill'
         : 'original'
@@ -76,7 +76,7 @@
         await fullscreen_container.requestFullscreen()
       }
     },
-    CopyMedia: async e => {
+    CopyMedia: async () => {
       if (controller.runes.media_selections.current_selection.media_response) {
         if (controller.runes.media_selections.current_selection.media_response.media_type === 'media_file') {
           await navigator.clipboard.writeText(controller.runes.media_selections.current_selection.media_response.media_file.filepath)
@@ -96,7 +96,7 @@
 
   function video_loader(node: HTMLVideoElement) {
     return {
-      update(video_source_url: string) {
+      update(_video_source_url: string) {
         animation_progress = 0
         node.load()
       }

From 154d9b0bf7b9573e1c0c6204cddd705fd9d00894 Mon Sep 17 00:00:00 2001
From: Andrew Kaiser <kaisea.rpi@gmail.com>
Date: Tue, 7 Jul 2026 15:04:10 -0400
Subject: [PATCH 12/13] move focus check to core

---
 packages/web/src/lib/keybinds.ts                    | 13 +++++++++++++
 .../src/routes/browse/components/MediaView.svelte   | 11 -----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/web/src/lib/keybinds.ts b/packages/web/src/lib/keybinds.ts
index 2996a2a9..b1f28301 100644
--- a/packages/web/src/lib/keybinds.ts
+++ b/packages/web/src/lib/keybinds.ts
@@ -61,6 +61,18 @@ export class Keybinds {
     return keycodes.join('-')
   }
 
+
+  #focused_on_editable_element = () => {
+    const active_element = document.activeElement
+    if (!active_element) return false
+
+    if (active_element instanceof HTMLInputElement) return true
+    if (active_element instanceof HTMLTextAreaElement) return true
+    if (active_element instanceof HTMLSelectElement) return true
+    return active_element.hasAttribute('contenteditable')
+  }
+
+
   public constructor(config: Config) {
     this.emitter = new EventTarget()
     this.disabled = false
@@ -100,6 +112,7 @@ export class Keybinds {
   public handler = (e: KeyboardEvent) => {
     if (this.disabled) return
     if (!this.#keybind_mapper) return
+    if (this.#focused_on_editable_element()) return
 
     const last_keycode = e.code
       .replace('Shift', '')
diff --git a/packages/web/src/routes/browse/components/MediaView.svelte b/packages/web/src/routes/browse/components/MediaView.svelte
index a00e088b..23206b14 100644
--- a/packages/web/src/routes/browse/components/MediaView.svelte
+++ b/packages/web/src/routes/browse/components/MediaView.svelte
@@ -28,16 +28,6 @@
     return 'h-full w-auto max-w-full'
   })
 
-  const focused_on_editable_element = () => {
-    const active_element = document.activeElement
-    if (!active_element) return false
-
-    if (active_element instanceof HTMLInputElement) return true
-    if (active_element instanceof HTMLTextAreaElement) return true
-    if (active_element instanceof HTMLSelectElement) return true
-    return active_element.hasAttribute('contenteditable')
-  }
-
   controller.keybinds.component_listen({
     Escape: () => {
       if (document.fullscreenElement === fullscreen_container) {
@@ -67,7 +57,6 @@
     },
     ToggleFullScreen: async e => {
       if (!dialog.open || !controller.runes.media_selections.current_selection.show) return
-      if (focused_on_editable_element()) return
       e.detail.data.keyboard_event.preventDefault()
 
       if (document.fullscreenElement === fullscreen_container) {

From 27dec469d62bd9c2ce1649c09b63fba34d15ea29 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 8 Jul 2026 03:04:01 +0000
Subject: [PATCH 13/13] docs: codify preferred PR title and summary style

Co-authored-by: andykais-claude <andykais-claude@users.noreply.github.com>
---
 AGENTS.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/AGENTS.md b/AGENTS.md
index 51fb34fa..c3c43f94 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -713,6 +713,11 @@ core:
 9. **Use comments where applicable** - But not liberally; code should be self-documenting
 10. **Core actions interfaces should have docstrings** - Document public API methods
 11. **PR titles must follow main's commit-title pattern** - Use lowercase Conventional Commit style, typically `<type>(<scope>): <summary>` (e.g. `fix(web): ...`, `impl(core): ...`, `docs: ...`)
+12. **Prefer `impl(<scope>): ...` for feature/additive PR titles** - Use `fix(...)` for bug fixes and keep key feature names explicit in the title (e.g. `impl(web): ToggleFullScreen and ToggleFitMedia keybinds`)
+13. **PR body style should be concise and structured**:
+    - Use `## Summary` with short bullets in the form `implements ...` / `improves ...`
+    - Use a separate `## Vision Testing` section describing manual + automated verification
+    - Prefer practical behavior-focused bullets over long prose
 
 ### Security Considerations