feat: replace emoji icons with Lucide SVG components

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

src/lib/components/PlayerControls.svelte

@@ -17,6 +17,20 @@
     getPlaybackRate,
   } from '$lib/transport/playback';
   import { formatTime } from '$lib/utils/time';
+  import {
+    VolumeX,
+    Volume1,
+    Volume2,
+    Rewind,
+    FastForward,
+    Pause,
+    Play,
+    Scissors,
+    Captions,
+    PictureInPicture2,
+    Maximize,
+    Minimize,
+  } from '@lucide/svelte';
 
   let {
     visible,
@@ -158,7 +172,7 @@
           title={isMuted ? 'Unmute' : 'Mute'}
           type="button"
         >
-          {#if isMuted || volume === 0}🔇{:else if volume < 0.5}🔉{:else}🔊{/if}
+          {#if isMuted || volume === 0}<VolumeX size={16} />{:else if volume < 0.5}<Volume1 size={16} />{:else}<Volume2 size={16} />{/if}
         </button>
         <input
           type="range"
@@ -178,19 +192,19 @@
           onclick={() => seekBy(-10)}
           title="Skip back 10s"
           type="button"
-        >⏪</button>
+        ><Rewind size={16} /></button>
         <button
           class="ctrl-btn play-btn"
           onclick={togglePlayPause}
           title={session.isPlaying ? 'Pause' : 'Play'}
           type="button"
-        >{session.isPlaying ? '❚❚' : '▶'}</button>
+        >{#if session.isPlaying}<Pause size={18} />{:else}<Play size={18} />{/if}</button>
         <button
           class="ctrl-btn"
           onclick={() => seekBy(10)}
           title="Skip forward 10s"
           type="button"
-        >⏩</button>
+        ><FastForward size={16} /></button>
       </div>
 
       <!-- Right group: settings -->
@@ -219,7 +233,7 @@
             oncontextmenu={handleCCContextMenu}
             title={captionsEnabled ? 'Hide captions' : 'Show captions'}
             type="button"
-          >CC</button>
+          ><Captions size={16} /></button>
         {/if}
 
         <button
@@ -228,7 +242,7 @@
           onclick={handlePiP}
           title="Picture-in-Picture"
           type="button"
-        >⧉</button>
+        ><PictureInPicture2 size={16} /></button>
 
         <button
           class="ctrl-btn"
@@ -236,7 +250,7 @@
           onclick={handleFullscreen}
           title={fullscreenActive ? 'Exit fullscreen' : 'Fullscreen'}
           type="button"
-        >{fullscreenActive ? '⤓' : '⛶'}</button>
+        >{#if fullscreenActive}<Minimize size={16} />{:else}<Maximize size={16} />{/if}</button>
       </div>
     </div>
 

src/lib/components/TransportControls.svelte

@@ -14,6 +14,17 @@
     getMuted,
     type TransportKeyAction,
   } from '$lib/transport/playback';
+  import {
+    ChevronFirst,
+    ChevronLast,
+    SkipBack,
+    SkipForward,
+    Pause,
+    Play,
+    VolumeX,
+    Volume1,
+    Volume2,
+  } from '@lucide/svelte';
 
   let hasKeyframes = $derived(session.keyframePositions.length > 0);
 
@@ -50,15 +61,15 @@
       title="Previous keyframe (Shift+,)"
       type="button"
     >
-      ◄K
+      <ChevronFirst size={16} />
     </button>
     <button onclick={() => seekBy(-5)} title="Seek back 5s (←)" type="button">-5s</button>
     <button onclick={() => seekBy(-1)} title="Seek back 1s (Shift+←)" type="button">-1s</button>
-    <button onclick={() => stepFrame(-1)} title="Previous frame (,)" type="button">◄|</button>
+    <button onclick={() => stepFrame(-1)} title="Previous frame (,)" type="button"><SkipBack size={16} /></button>
     <button onclick={togglePlayPause} title="Play/Pause (Space / K)" type="button">
-      {session.isPlaying ? '❚❚' : '▶'}
+      {#if session.isPlaying}<Pause size={16} />{:else}<Play size={16} />{/if}
     </button>
-    <button onclick={() => stepFrame(1)} title="Next frame (.)" type="button">|►</button>
+    <button onclick={() => stepFrame(1)} title="Next frame (.)" type="button"><SkipForward size={16} /></button>
     <button onclick={() => seekBy(1)} title="Seek forward 1s (Shift+→)" type="button">+1s</button>
     <button onclick={() => seekBy(5)} title="Seek forward 5s (→)" type="button">+5s</button>
     <button
@@ -67,7 +78,7 @@
       title="Next keyframe (Shift+.)"
       type="button"
     >
-      K►
+      <ChevronLast size={16} />
     </button>
   </div>
 
@@ -85,11 +96,11 @@
       type="button"
     >
       {#if isMuted || volume === 0}
-        🔇
+        <VolumeX size={14} />
       {:else if volume < 0.5}
-        🔉
+        <Volume1 size={14} />
       {:else}
-        🔊
+        <Volume2 size={14} />
       {/if}
     </button>
     <input