feat: slide the highlight when switching modes

src/components/PlaylistPicker.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { editablePlaylists, LIKED_SONGS_ID, type PlaylistSummary } from '../core/playlists';
 import type { SpotifyApi } from '../spotify/api';
 import { AuthError, describeError } from '../spotify/errors';
@@ -24,6 +24,14 @@ export function PlaylistPicker({ api, mode, onModeChange, onPick, onAuthLost, on
   const [likedTotal, setLikedTotal] = useState<number | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [attempt, setAttempt] = useState(0);
+  const segRef = useRef<HTMLDivElement>(null);
+  const [pill, setPill] = useState<{ left: number; width: number } | null>(null);
+
+  // Slide the highlight under the active mode. It first renders already in place, so it only animates on a switch.
+  useLayoutEffect(() => {
+    const active = segRef.current?.querySelector<HTMLElement>('button.on');
+    if (active) setPill({ left: active.offsetLeft, width: active.offsetWidth });
+  }, [mode]);
 
   useEffect(() => {
     let cancelled = false;
@@ -65,7 +73,8 @@ export function PlaylistPicker({ api, mode, onModeChange, onPick, onAuthLost, on
       <header>
         <div className="heading">
           <h1>Pick a playlist</h1>
-          <div className="seg" role="group" aria-label="Mode">
+          <div className="seg" role="group" aria-label="Mode" ref={segRef}>
+            {pill && <span className="seg-pill" aria-hidden="true" style={{ width: pill.width, transform: `translateX(${pill.left}px)` }} />}
             <button className={mode === 'swipe' ? 'on' : ''} aria-pressed={mode === 'swipe'} onClick={() => onModeChange('swipe')}>
               Swipe
             </button>

src/styles.css

@@ -30,9 +30,13 @@ button.link:hover { color: var(--text); }
 .picker header { display: flex; justify-content: space-between; align-items: center; }
 .picker .heading { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
 .picker .mode-hint { margin: 0.25rem 0 1rem; }
-.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); }
-.seg button { padding: 0.35rem 0.9rem; background: none; color: var(--muted); }
-.seg button.on { background: var(--text); color: #000; font-weight: 700; }
+.seg { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); }
+.seg-pill { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 999px; background: var(--text); transition: transform 0.25s ease-out, width 0.25s ease-out; }
+.seg button { position: relative; padding: 0.35rem 0.9rem; background: none; color: var(--muted); transition: color 0.25s ease-out; }
+.seg button.on { color: #000; font-weight: 700; }
+@media (prefers-reduced-motion: reduce) {
+  .seg-pill, .seg button { transition: none; }
+}
 .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
 .tile { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border-radius: var(--radius); background: var(--surface); text-align: left; }
 .tile:hover { background: var(--surface-2); }