feat: adjustable clip list layout (bottom/left sidebar)

Co-authored-by: Cursor <cursoragent@cursor.com>

src/lib/components/ClipList.svelte

@@ -8,7 +8,10 @@
   import { formatTime, parseTime } from '$lib/utils/time';
   import { session } from '$lib/stores/videoSession.svelte';
 
-  let { onExport }: { onExport?: () => void } = $props();
+  let {
+    onExport,
+    position = 'bottom',
+  }: { onExport?: () => void; position?: 'bottom' | 'left' } = $props();
 
   let clips = $derived(clipStore.clips);
   let selectedId = $derived(clipStore.selectedClipId);
@@ -45,6 +48,7 @@
 
 <div
   class="clip-list"
+  class:sidebar={position === 'left'}
   role="listbox"
   tabindex="0"
   onclick={handleContainerClick}
@@ -132,6 +136,11 @@
     box-sizing: border-box;
   }
 
+  .clip-list.sidebar {
+    border-top: none;
+    height: 100%;
+  }
+
   .empty {
     color: var(--text-muted);
     font-size: 13px;

src/lib/stores/preferences.svelte.ts

@@ -47,12 +47,16 @@ export interface Preferences {
   outputDirectory: string;
   cookieSource: CookieSource;
   captionSettings: CaptionSettings;
+  clipListPosition: 'bottom' | 'left';
+  clipListWidth: number;
 }
 
 const DEFAULT_PREFERENCES: Preferences = {
   outputDirectory: '~/',
   cookieSource: { type: 'browser', browser: 'firefox' },
   captionSettings: { ...DEFAULT_CAPTION_SETTINGS },
+  clipListPosition: 'bottom',
+  clipListWidth: 220,
 };
 
 let store: Store | null = null;
@@ -73,6 +77,10 @@ export async function loadPreferences(): Promise<void> {
     if (savedDir) preferences.outputDirectory = savedDir;
     if (savedCookie) preferences.cookieSource = savedCookie;
     if (savedCaptions) preferences.captionSettings = { ...DEFAULT_CAPTION_SETTINGS, ...savedCaptions };
+    const savedClipListPosition = await store.get<'bottom' | 'left'>('clipListPosition');
+    const savedClipListWidth = await store.get<number>('clipListWidth');
+    if (savedClipListPosition) preferences.clipListPosition = savedClipListPosition;
+    if (savedClipListWidth) preferences.clipListWidth = savedClipListWidth;
   })();
   await loadPromise;
 }
@@ -85,6 +93,8 @@ export async function savePreferences(): Promise<void> {
   await store.set('outputDirectory', preferences.outputDirectory);
   await store.set('cookieSource', preferences.cookieSource);
   await store.set('captionSettings', preferences.captionSettings);
+  await store.set('clipListPosition', preferences.clipListPosition);
+  await store.set('clipListWidth', preferences.clipListWidth);
   await store.save();
 }
 
@@ -102,3 +112,13 @@ export async function setCaptionSettings(settings: Partial<CaptionSettings>): Pr
   Object.assign(preferences.captionSettings, settings);
   await savePreferences();
 }
+
+export async function setClipListPosition(position: 'bottom' | 'left'): Promise<void> {
+  preferences.clipListPosition = position;
+  await savePreferences();
+}
+
+export async function setClipListWidth(width: number): Promise<void> {
+  preferences.clipListWidth = width;
+  await savePreferences();
+}