fix: post-smoke-test polish — preserve playhead, clip list redesign, play-clip action, 1100x750 default

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

src/lib/components/ClipList.svelte

@@ -4,9 +4,11 @@
     selectClip,
     removeClip,
     updateClip,
+    type Clip,
   } from '$lib/stores/clips.svelte';
   import { formatTime, parseTime } from '$lib/utils/time';
   import { session } from '$lib/stores/videoSession.svelte';
+  import { seekTo } from '$lib/transport/playback';
 
   let {
     onExport,
@@ -15,14 +17,13 @@
 
   let clips = $derived(clipStore.clips);
   let selectedId = $derived(clipStore.selectedClipId);
+  let isSidebar = $derived(position === 'left');
 
   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;
+      seekTo(clip.startTime);
     }
   }
 
@@ -39,16 +40,29 @@
 
   function handleContainerClick(e: MouseEvent) {
     const target = e.target as HTMLElement;
-    // Only deselect if the click landed on the container itself, not a child
     if (target.classList.contains('clip-list')) {
       selectClip(null);
     }
   }
+
+  function handlePlayClip(clip: Clip) {
+    seekTo(clip.startTime);
+    const videoEl = document.querySelector('video');
+    if (videoEl?.paused) videoEl.play();
+  }
+
+  function handleGoToStart(clip: Clip) {
+    seekTo(clip.startTime);
+  }
+
+  function handleGoToEnd(clip: Clip) {
+    seekTo(clip.endTime);
+  }
 </script>
 
 <div
   class="clip-list"
-  class:sidebar={position === 'left'}
+  class:sidebar={isSidebar}
   role="listbox"
   tabindex="0"
   onclick={handleContainerClick}
@@ -68,6 +82,7 @@
       <div
         class="clip-row"
         class:selected={clip.id === selectedId}
+        class:sidebar={isSidebar}
         role="option"
         aria-selected={clip.id === selectedId}
         tabindex="0"
@@ -79,42 +94,124 @@
           }
         }}
       >
-        <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>
+        {#if isSidebar}
+          <!-- Sidebar (vertical card) layout -->
+          <div class="clip-card">
+            <div class="card-row">
+              <span class="color-swatch" style="background: {clip.color}"></span>
+              <input
+                class="label-input sidebar-label"
+                type="text"
+                value={clip.label}
+                onchange={(e) => handleLabelEdit(clip.id, (e.target as HTMLInputElement).value)}
+                onclick={(e) => e.stopPropagation()}
+              />
+            </div>
+            <div class="card-row times">
+              <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()}
+              />
+            </div>
+            {#if clip.id === selectedId}
+              <div class="clip-actions">
+                <button
+                  class="action-btn"
+                  onclick={(e) => { e.stopPropagation(); handlePlayClip(clip); }}
+                  title="Play clip"
+                >▶</button>
+                <button
+                  class="action-btn"
+                  onclick={(e) => { e.stopPropagation(); handleGoToStart(clip); }}
+                  title="Go to start"
+                >|◀</button>
+                <button
+                  class="action-btn"
+                  onclick={(e) => { e.stopPropagation(); handleGoToEnd(clip); }}
+                  title="Go to end"
+                >▶|</button>
+                <button
+                  class="action-btn danger"
+                  onclick={(e) => { e.stopPropagation(); removeClip(clip.id); }}
+                  title="Delete clip"
+                >✕</button>
+              </div>
+            {/if}
+          </div>
+        {:else}
+          <!-- Bottom (wide row) layout -->
+          <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()}
+          />
+          {#if clip.id === selectedId}
+            <div class="clip-actions inline">
+              <button
+                class="action-btn"
+                onclick={(e) => { e.stopPropagation(); handlePlayClip(clip); }}
+                title="Play clip"
+              >▶</button>
+              <button
+                class="action-btn"
+                onclick={(e) => { e.stopPropagation(); handleGoToStart(clip); }}
+                title="Go to start"
+              >|◀</button>
+              <button
+                class="action-btn"
+                onclick={(e) => { e.stopPropagation(); handleGoToEnd(clip); }}
+                title="Go to end"
+              >▶|</button>
+              <button
+                class="action-btn danger"
+                onclick={(e) => { e.stopPropagation(); removeClip(clip.id); }}
+                title="Delete clip"
+              >✕</button>
+            </div>
+          {:else}
+            <button
+              class="delete-btn"
+              onclick={(e) => { e.stopPropagation(); removeClip(clip.id); }}
+              title="Delete clip"
+            >✕</button>
+          {/if}
+        {/if}
       </div>
     {/each}
-    <div class="action-buttons">
+    <div class="list-actions">
       {#if selectedId}
         <button type="button" class="deselect-btn" onclick={() => selectClip(null)}>Deselect</button>
       {/if}
@@ -139,6 +236,7 @@
   .clip-list.sidebar {
     border-top: none;
     height: 100%;
+    padding: 8px 6px;
   }
 
   .empty {
@@ -155,7 +253,7 @@
     margin-bottom: 4px;
   }
 
-  .action-buttons {
+  .list-actions {
     margin-top: 8px;
     padding-top: 8px;
     border-top: 1px solid var(--border);
@@ -163,7 +261,7 @@
     gap: 8px;
   }
 
-  .action-buttons button {
+  .list-actions button {
     font-size: 13px;
     padding: 6px 12px;
   }
@@ -173,6 +271,7 @@
     background: var(--bg-tertiary);
   }
 
+  /* --- Bottom (wide) row layout --- */
   .clip-row {
     display: flex;
     align-items: center;
@@ -195,6 +294,32 @@
     background: var(--bg-tertiary);
   }
 
+  /* --- Sidebar (vertical card) layout --- */
+  .clip-row.sidebar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 4px;
+    padding: 6px;
+  }
+
+  .clip-card {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 100%;
+  }
+
+  .card-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .card-row.times {
+    justify-content: center;
+  }
+
+  /* --- Shared elements --- */
   .color-swatch {
     width: 12px;
     height: 12px;
@@ -211,6 +336,12 @@
     padding: 2px 4px;
   }
 
+  .label-input.sidebar-label {
+    flex: 1;
+    width: auto;
+    min-width: 0;
+  }
+
   .label-input:focus {
     background: var(--bg-primary);
     outline: 1px solid var(--accent);
@@ -239,6 +370,44 @@
     font-size: 12px;
   }
 
+  /* --- Clip action buttons --- */
+  .clip-actions {
+    display: flex;
+    gap: 4px;
+    justify-content: center;
+    padding-top: 4px;
+  }
+
+  .clip-actions.inline {
+    padding-top: 0;
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
+  .action-btn {
+    font-size: 12px;
+    padding: 2px 6px;
+    color: var(--text-secondary);
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: 3px;
+    cursor: pointer;
+    line-height: 1.2;
+  }
+
+  .action-btn:hover {
+    background: var(--accent);
+    color: var(--bg-primary);
+    border-color: var(--accent);
+  }
+
+  .action-btn.danger:hover {
+    background: var(--danger);
+    color: var(--bg-primary);
+    border-color: var(--danger);
+  }
+
+  /* Legacy delete button for unselected clips in bottom mode */
   .delete-btn {
     font-size: 14px;
     padding: 2px 6px;

src/lib/components/Timeline.svelte

@@ -279,6 +279,15 @@
       case 'delete-clip':
         if (clipStore.selectedClipId) removeClip(clipStore.selectedClipId);
         break;
+      case 'play-clip': {
+        const clip = clipStore.clips.find((c) => c.id === clipStore.selectedClipId);
+        if (clip) {
+          seekTo(clip.startTime);
+          const videoEl = document.querySelector('video');
+          if (videoEl?.paused) videoEl.play();
+        }
+        break;
+      }
       default: {
         const _exhaustive: never = action;
         void _exhaustive;

src/lib/components/TimelineContextMenu.svelte

@@ -6,6 +6,7 @@
     | { type: 'mark-out' }
     | { type: 'go-to-clip-start' }
     | { type: 'go-to-clip-end' }
+    | { type: 'play-clip' }
     | { type: 'delete-clip' };
 
   let {
@@ -126,6 +127,14 @@
 
   {#if selectedClipId}
     <div class="separator"></div>
+    <button
+      class="menu-item"
+      role="menuitem"
+      onclick={() => handleAction({ type: 'play-clip' })}
+    >
+      <span class="label">Play Clip</span>
+      <span class="shortcut">▶</span>
+    </button>
     <button
       class="menu-item danger"
       role="menuitem"

src/lib/components/VideoPlayer.svelte

@@ -135,6 +135,10 @@
 
   function handleLoadedData() {
     videoError = null;
+    // Restore playhead position (e.g. after layout toggle remounts the video)
+    if (videoElement && session.currentTime > 0) {
+      videoElement.currentTime = session.currentTime;
+    }
     if (videoElement) {
       console.log('[VideoPlayer] loadeddata:', {
         src: videoElement.src,