feat: add clip management with I/O marking, timeline markers, and clip list

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

src/lib/components/ClipList.svelte

@@ -1,16 +1,196 @@
+<script lang="ts">
+  import {
+    clipStore,
+    selectClip,
+    removeClip,
+    updateClip,
+  } from '$lib/stores/clips.svelte';
+  import { formatTime, parseTime } from '$lib/utils/time';
+  import { session } from '$lib/stores/videoSession.svelte';
+
+  let clips = $derived(clipStore.clips);
+  let selectedId = $derived(clipStore.selectedClipId);
+
+  function handleSelect(id: string) {
+    selectClip(id);
+    const clip = clips.find((c) => c.id === id);
+    if (clip) {
+      session.currentTime = clip.startTime;
+      const videoEl = document.querySelector('video');
+      if (videoEl) videoEl.currentTime = clip.startTime;
+    }
+  }
+
+  function handleTimeEdit(clipId: string, field: 'startTime' | 'endTime', value: string) {
+    const parsed = parseTime(value);
+    if (parsed !== null) {
+      updateClip(clipId, { [field]: parsed });
+    }
+  }
+
+  function handleLabelEdit(clipId: string, value: string) {
+    updateClip(clipId, { label: value });
+  }
+</script>
+
 <div class="clip-list">
-  <div class="placeholder-text">No clips yet — press I to mark in-point</div>
+  {#if clips.length === 0}
+    <div class="empty">No clips yet — press I to mark in-point, O to mark out-point</div>
+  {:else}
+    <div class="header">
+      <span>CLIPS ({clips.length})</span>
+    </div>
+    {#each clips as clip (clip.id)}
+      <div
+        class="clip-row"
+        class:selected={clip.id === selectedId}
+        role="button"
+        tabindex="0"
+        onclick={() => handleSelect(clip.id)}
+        onkeydown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleSelect(clip.id);
+          }
+        }}
+      >
+        <span class="color-swatch" style="background: {clip.color}"></span>
+        <input
+          class="label-input"
+          type="text"
+          value={clip.label}
+          onchange={(e) => handleLabelEdit(clip.id, (e.target as HTMLInputElement).value)}
+          onclick={(e) => e.stopPropagation()}
+        />
+        <input
+          class="time-input"
+          type="text"
+          value={formatTime(clip.startTime)}
+          onchange={(e) =>
+            handleTimeEdit(clip.id, 'startTime', (e.target as HTMLInputElement).value)}
+          onclick={(e) => e.stopPropagation()}
+        />
+        <span class="arrow">→</span>
+        <input
+          class="time-input"
+          type="text"
+          value={formatTime(clip.endTime)}
+          onchange={(e) =>
+            handleTimeEdit(clip.id, 'endTime', (e.target as HTMLInputElement).value)}
+          onclick={(e) => e.stopPropagation()}
+        />
+        <button
+          class="delete-btn"
+          onclick={(e) => {
+            e.stopPropagation();
+            removeClip(clip.id);
+          }}
+          title="Delete clip"
+        >✕</button>
+      </div>
+    {/each}
+  {/if}
 </div>
 
 <style>
   .clip-list {
     padding: 8px 12px;
     background: var(--bg-secondary);
-    min-height: 80px;
+    min-height: 60px;
+    max-height: 200px;
+    overflow-y: auto;
     border-top: 1px solid var(--border);
   }
-  .placeholder-text {
+
+  .empty {
     color: var(--text-muted);
     font-size: 13px;
+    padding: 8px 0;
+  }
+
+  .header {
+    font-size: 11px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+  }
+
+  .clip-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    border-radius: 4px;
+    width: 100%;
+    text-align: left;
+    background: transparent;
+    border: 1px solid transparent;
+  }
+
+  .clip-row:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+  }
+
+  .clip-row.selected {
+    border-color: var(--accent);
+    background: var(--bg-tertiary);
+  }
+
+  .color-swatch {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+
+  .label-input {
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    font-size: 13px;
+    width: 80px;
+    padding: 2px 4px;
+  }
+
+  .label-input:focus {
+    background: var(--bg-primary);
+    outline: 1px solid var(--accent);
+    border-radius: 2px;
+  }
+
+  .time-input {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    width: 85px;
+    padding: 2px 4px;
+    text-align: center;
+  }
+
+  .time-input:focus {
+    background: var(--bg-primary);
+    outline: 1px solid var(--accent);
+    border-radius: 2px;
+  }
+
+  .arrow {
+    color: var(--text-muted);
+    font-size: 12px;
+  }
+
+  .delete-btn {
+    font-size: 14px;
+    padding: 2px 6px;
+    color: var(--text-muted);
+    background: transparent;
+  }
+
+  .delete-btn:hover {
+    color: var(--danger);
+    background: transparent;
   }
 </style>