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;