impl(web): ToggleFullScreen and ToggleFitMedia keybinds

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
 

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'
@@ -19,14 +25,54 @@ 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
   public disabled: boolean
   #keybind_mapper: Map<string, KeybindAction> | undefined
   #config: Config | undefined
 
+  // 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
+          .replace('Control', 'Ctrl')
+          .replace('Spacebar', 'Space')
+          .replace('Key', '')
+        if (normalized_part === ' ') return 'Space'
+        if (normalized_part === 'Esc') return 'Escape'
+        return normalized_part
+      })
+
+    const order_preference = ['Ctrl', 'Shift', 'Alt']
+    keycodes.sort((a, b) => {
+      return order_preference.indexOf(b) - order_preference.indexOf(a)
+    })
+
+    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
@@ -35,7 +81,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.#get_keybind_code(keyboard_shortcut), keyboard_action as KeybindAction)
       }
     }
   }
@@ -55,17 +101,18 @@ 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) => {
     if (this.disabled) return
     if (!this.#keybind_mapper) return
+    if (this.#focused_on_editable_element()) return
 
     const last_keycode = e.code
       .replace('Shift', '')
@@ -79,8 +126,7 @@ 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 code = this.#get_keybind_code(keys_down.join('-'))
     const action = this.#keybind_mapper.get(code)
     if (action) {
       this.emitter.dispatchEvent(new CustomEvent(action, {

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}'`)
       }

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),

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} 
 />

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,28 +63,43 @@
         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>
+      tiles:
       <button
         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>
+      view:
+      <button
+        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'
+            ? 'fill'
+            : 'original'
+          controller.runes.settings.set('ui.media_view.fit.mode', updated_mode)
+        }}
+      >{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>