feat: ffprobe + TMDb scrape + HLS transcode + history/favourites/playlists

Backend
  - service/ffprobe.go: thin ffprobe wrapper, parses duration / resolution /
    codecs into a typed ProbeResult. 30s per-file timeout.
  - service/tmdb.go: minimal TMDb provider (search/movie). Disabled when no
    api key; supports tmdb_api_proxy / tmdb_image_proxy overrides for users
    behind a firewall.
  - service/scraper.go: filename cleaner (handles bracketed tags, scene
    noise tokens, year extraction), per-row + per-library enrichment with a
    4 RPS throttle and WS hub progress events. Unit-tested.
  - service/scanner.go: now invokes ffprobe per file and kicks the TMDb
    scraper in the background once a library scan finishes.
  - service/transcoder.go: per-media ffmpeg HLS job manager; outputs
    index.m3u8 + seg_NNNNN.ts under cache/hls/<id>; cancels jobs on
    shutdown; publishes 'transcode' WS events.
  - service/stream.go: serves HLS playlist (with 30s wait-for-ready) and
    .ts segments with path-traversal protection. Adds Probe() helper used
    by the admin 'reprobe' button.
  - service/image_proxy.go: cached, host-allow-listed reverse proxy for
    TMDb / Bangumi / Douban / Fanart / TheTVDB images so the SPA never
    hits a CORS or GFW issue.
  - service/playback.go: history upsert, favourites toggle, playlist CRUD
    + ordered items. RecentHistory joins with model.Media in one extra
    query so the home page can render a 'Continue Watching' row.
  - handler/streaming.go + handler/playback.go: REST endpoints for HLS,
    image proxy, scrape (one + library), reprobe, history, favourites,
    playlists.
  - handler/handler.go: registers /api/hls/:id/{index.m3u8,:seg}, /api/img,
    /api/history, /api/favourites/:id, /api/playlists/* with proper
    auth/admin guards.

Frontend
  - api/client.ts: imageURL() helper; hlsURL() endpoint; reuses the JWT in
    a query parameter for <video src> and <img src>.
  - api/playback.ts: typed helpers for history, favourites, playlists.
  - components/MediaCard.tsx: optional 'progress' prop renders a thin
    bottom progress bar, used by the new Continue Watching row.
  - pages/HomePage.tsx: two rows (Continue Watching + Recently Added);
    falls back to the empty-state hint when both are empty.
  - pages/PlayerPage.tsx: hls.js (lazy-imported) with auto-fallback to
    direct play; ?mode=hls|direct query toggle; resume position written
    every 10s while playing.
  - pages/MediaDetailPage.tsx: heart toggle + admin 'rescrape' / 'reprobe'
    buttons + dedicated 'HLS 转码播放' CTA.
  - pages/FavouritesPage.tsx, PlaylistsPage.tsx, PlaylistDetailPage.tsx:
    new screens.
  - components/Layout.tsx + App.tsx: sidebar links for Favourites and
    Playlists; routes are now lazily code-split via React.lazy + Suspense
    so the initial bundle stays at ~243 KB / 82 KB gzipped (hls.js is
    fetched only on first HLS playback).

Verified: go build, go vet, go test (incl. CleanQuery cases) all pass;
frontend tsc -b && vite build emits 9 route chunks plus a deferred hls
chunk.

web/src/pages/HomePage.tsx

@@ -1,32 +1,61 @@
 import { useEffect, useState } from 'react'
 
 import { mediaAPI } from '../api/library'
+import { playbackAPI, type HistoryItem } from '../api/playback'
 import { MediaCard } from '../components/MediaCard'
 import type { Media } from '../types'
 
-// Landing page: shows the most recently added media items across every
-// library. Once the scraper / continue-watching subsystems land we will
-// fold in additional rows here.
+// Landing page composes three rows:
+//   1. Continue Watching   — items with a positive position from the user's
+//                            playback history (excluding completed ones).
+//   2. Recently Added      — most recent media across every library.
+//   3. Empty state hint    — shown when both rows are empty.
 export function HomePage() {
-  const [items, setItems] = useState<Media[]>([])
+  const [recent, setRecent] = useState<Media[]>([])
+  const [history, setHistory] = useState<HistoryItem[]>([])
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
-    mediaAPI
-      .search('', 24)
-      .then((d) => setItems(d.items))
+    Promise.all([
+      mediaAPI.search('', 24).then((d) => d.items),
+      playbackAPI.recentHistory().catch(() => [] as HistoryItem[]),
+    ])
+      .then(([items, hist]) => {
+        setRecent(items)
+        setHistory(hist.filter((h) => !h.completed && !!h.media))
+      })
       .finally(() => setLoading(false))
   }, [])
 
+  const empty = !loading && recent.length === 0 && history.length === 0
+
   return (
-    <div className="space-y-8">
+    <div className="space-y-10">
       <header>
-        <h1 className="font-display text-3xl font-bold text-white">最近添加</h1>
-        <p className="text-sm text-slate-400">最新被扫描入库的媒体内容</p>
+        <h1 className="font-display text-3xl font-bold text-white">主页</h1>
+        <p className="text-sm text-slate-400">从你上次离开的地方继续</p>
       </header>
 
+      {history.length > 0 && (
+        <Row title="继续观看">
+          {history.map((h) => {
+            const m = h.media!
+            const progress = h.duration_ms > 0 ? h.position_ms / h.duration_ms : 0
+            return <MediaCard key={h.id} media={m} progress={progress} />
+          })}
+        </Row>
+      )}
+
+      {recent.length > 0 && (
+        <Row title="最近添加">
+          {recent.map((m) => (
+            <MediaCard key={m.id} media={m} />
+          ))}
+        </Row>
+      )}
+
       {loading && <p className="text-slate-500">加载中…</p>}
-      {!loading && items.length === 0 && (
+      {empty && (
         <div className="glass-panel">
           <p className="text-slate-300">
             还没有任何媒体。前往 <span className="text-primary-400">管理后台</span>{' '}
@@ -34,11 +63,17 @@ export function HomePage() {
           </p>
         </div>
       )}
-      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
-        {items.map((m) => (
-          <MediaCard key={m.id} media={m} />
-        ))}
-      </div>
     </div>
   )
 }
+
+function Row({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <section className="space-y-3">
+      <h2 className="font-display text-xl font-semibold text-white">{title}</h2>
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+        {children}
+      </div>
+    </section>
+  )
+}