fix(home): restart the hero banner timer on a manual change

The rotation interval was installed once when the banner mounted and never
touched again, so a swipe, arrow or dot tap inherited whatever was left of the
running countdown — swiping 5.5s into a 6s interval moved the banner on half a
second later.

The timer moves into heroRotation.ts as a small restartable object so it can be
unit-tested, and every manual navigation path restarts it from that moment.
Verified red-first: with restart() reverted to leave a running timer alone, the
regression test fails.

Release 0.9.1.

src/lib/components/home/HeroBanner.svelte

@@ -3,6 +3,7 @@
   import { goto } from "$app/navigation";
   import type { MediaItem } from "$lib/api/types";
   import CachedImage from "$lib/components/common/CachedImage.svelte";
+  import { createRotationTimer, type RotationTimer } from "./heroRotation";
 
   interface Props {
     items: MediaItem[];
@@ -13,7 +14,7 @@
   let { items, autoRotate = true, interval = 6000 }: Props = $props();
 
   let currentIndex = $state(0);
-  let intervalId: number | null = null;
+  let rotation: RotationTimer | null = null;
 
   // Touch/swipe state
   let touchStartX = $state(0);
@@ -70,8 +71,22 @@
     currentIndex = (currentIndex - 1 + items.length) % items.length;
   }
 
+  // Manual navigation (swipe, arrows, dots) restarts the countdown, so the
+  // banner always waits a full interval after the last change instead of
+  // firing whatever was left of the previous one.
+  function showNext() {
+    next();
+    rotation?.restart();
+  }
+
+  function showPrev() {
+    prev();
+    rotation?.restart();
+  }
+
   function goToIndex(idx: number) {
     currentIndex = idx;
+    rotation?.restart();
   }
 
   // Touch/swipe handlers
@@ -96,10 +111,10 @@
     if (Math.abs(diff) > swipeThreshold) {
       if (diff > 0) {
         // Swiped left - go to next
-        next();
+        showNext();
       } else {
         // Swiped right - go to previous
-        prev();
+        showPrev();
       }
     }
 
@@ -110,9 +125,12 @@
   // Auto-rotate logic
   $effect(() => {
     if (autoRotate && items.length > 1) {
-      intervalId = window.setInterval(next, interval);
+      const timer = createRotationTimer(interval, next);
+      rotation = timer;
+      timer.restart();
       return () => {
-        if (intervalId) clearInterval(intervalId);
+        timer.stop();
+        rotation = null;
       };
     }
   });
@@ -219,7 +237,7 @@
 
       <!-- Swipe Indicators (Desktop hover) -->
       <button
-        onclick={prev}
+        onclick={showPrev}
         class="absolute left-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-black/40 backdrop-blur-sm rounded-full items-center justify-center transition-opacity opacity-0 group-hover:opacity-100 hover:bg-black/60 hidden md:flex"
         aria-label="Previous item"
       >
@@ -229,7 +247,7 @@
       </button>
 
       <button
-        onclick={next}
+        onclick={showNext}
         class="absolute right-4 top-1/2 transform -translate-y-1/2 w-12 h-12 bg-black/40 backdrop-blur-sm rounded-full items-center justify-center transition-opacity opacity-0 group-hover:opacity-100 hover:bg-black/60 hidden md:flex"
         aria-label="Next item"
       >

src/lib/components/home/heroRotation.test.ts

@@ -0,0 +1,82 @@
+// TRACES: UR-034 | DR-038 | UT-207
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { createRotationTimer } from "./heroRotation";
+
+describe("hero banner rotation timer", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("advances once per interval while running", () => {
+    const onElapse = vi.fn();
+    const timer = createRotationTimer(6000, onElapse);
+    timer.restart();
+
+    vi.advanceTimersByTime(6000);
+    expect(onElapse).toHaveBeenCalledTimes(1);
+    vi.advanceTimersByTime(6000);
+    expect(onElapse).toHaveBeenCalledTimes(2);
+
+    timer.stop();
+  });
+
+  it("does nothing until started", () => {
+    const onElapse = vi.fn();
+    createRotationTimer(6000, onElapse);
+    vi.advanceTimersByTime(60_000);
+    expect(onElapse).not.toHaveBeenCalled();
+  });
+
+  // The bug: a manual swipe/click left the interval running, so the banner
+  // rotated again almost immediately instead of waiting a full interval.
+  it("restarts the countdown from now, not from the last auto-advance", () => {
+    const onElapse = vi.fn();
+    const timer = createRotationTimer(6000, onElapse);
+    timer.restart();
+
+    // 5.5s in the user swipes — the timer must restart from that moment.
+    vi.advanceTimersByTime(5500);
+    timer.restart();
+
+    // The remaining 500ms of the old countdown must NOT fire.
+    vi.advanceTimersByTime(500);
+    expect(onElapse).not.toHaveBeenCalled();
+
+    // A full interval after the swipe, it advances.
+    vi.advanceTimersByTime(5500);
+    expect(onElapse).toHaveBeenCalledTimes(1);
+
+    timer.stop();
+  });
+
+  it("does not stack timers when restarted repeatedly", () => {
+    const onElapse = vi.fn();
+    const timer = createRotationTimer(1000, onElapse);
+    timer.restart();
+    timer.restart();
+    timer.restart();
+
+    vi.advanceTimersByTime(1000);
+    expect(onElapse).toHaveBeenCalledTimes(1);
+
+    timer.stop();
+  });
+
+  it("stops firing after stop()", () => {
+    const onElapse = vi.fn();
+    const timer = createRotationTimer(1000, onElapse);
+    timer.restart();
+    timer.stop();
+
+    vi.advanceTimersByTime(10_000);
+    expect(onElapse).not.toHaveBeenCalled();
+  });
+
+  it("reports whether it is running", () => {
+    const timer = createRotationTimer(1000, () => {});
+    expect(timer.isRunning()).toBe(false);
+    timer.restart();
+    expect(timer.isRunning()).toBe(true);
+    timer.stop();
+    expect(timer.isRunning()).toBe(false);
+  });
+});

src/lib/components/home/heroRotation.ts

@@ -0,0 +1,40 @@
+// Auto-rotation timer for the home-screen hero banner.
+//
+// Extracted from HeroBanner.svelte so it can be unit-tested: a manual swipe or
+// dot/arrow click must restart the countdown from that moment. The old code
+// installed one bare setInterval and left it running, so swiping late in an
+// interval made the banner jump to the next item almost immediately.
+//
+// TRACES: UR-034 | DR-038 | UT-207
+
+export interface RotationTimer {
+  /** (Re)start the countdown from now, replacing any pending tick. */
+  restart(): void;
+  /** Cancel the countdown. */
+  stop(): void;
+  isRunning(): boolean;
+}
+
+/**
+ * Create a repeating timer that calls `onElapse` every `interval` ms once
+ * started. Restarting is idempotent — there is never more than one live timer.
+ */
+export function createRotationTimer(interval: number, onElapse: () => void): RotationTimer {
+  let handle: ReturnType<typeof setInterval> | null = null;
+
+  function stop() {
+    if (handle !== null) {
+      clearInterval(handle);
+      handle = null;
+    }
+  }
+
+  return {
+    restart() {
+      stop();
+      handle = setInterval(onElapse, interval);
+    },
+    stop,
+    isRunning: () => handle !== null,
+  };
+}