Chore: Port over SeriesDetail + Panels

src/lib/components/series/SeriesDetail.svelte

@@ -15,8 +15,9 @@
   import { saveScroll, getScroll }     from '$lib/state/app.svelte'
   import { seriesState, openReader, setActiveManga, addBookmark,
            acknowledgeUpdate, clearMarkersForManga,
-           DEFAULT_MANGA_PREFS }       from '$lib/state/series.svelte'
-  import type { MangaPrefs }           from '$lib/state/series.svelte'
+           setPreviewManga }           from '$lib/state/series.svelte'
+  import { DEFAULT_MANGA_PREFS }       from '$lib/types/settings'
+  import type { MangaPrefs }           from '$lib/types/settings'
   import { addToast }                  from '$lib/state/notifications.svelte'
   import { trackingState }             from '$lib/state/tracking.svelte'
   import { autoLinkLibrary }           from '$lib/core/cover/autoLink'
@@ -29,6 +30,7 @@
   import MigrateModal     from '$lib/components/shared/manga/MigrateModal.svelte'
   import SeriesLinkPanel  from '$lib/components/shared/manga/SeriesLinkPanel.svelte'
   import TrackingPanel    from '$lib/components/tracking/TrackingPanel.svelte'
+  import MangaPreview     from '$lib/components/shared/manga/MangaPreview.svelte'
   const CHAPTERS_PER_PAGE = 25
   const MANGA_TTL_MS      = 5 * 60 * 1000
   const CHAPTER_TTL_MS    = 2 * 60 * 1000
@@ -96,24 +98,24 @@
   const sortedChapters  = $derived(buildChapterList(chapters, currentPrefs))
   const totalPages      = $derived(Math.ceil(sortedChapters.length / CHAPTERS_PER_PAGE))
   const pageChapters    = $derived(sortedChapters.slice((chapterPage - 1) * CHAPTERS_PER_PAGE, chapterPage * CHAPTERS_PER_PAGE))
-  const readCount       = $derived(sortedChapters.filter(c => c.isRead).length)
+  const readCount       = $derived(sortedChapters.filter(c => c.read).length)
   const totalCount      = $derived(sortedChapters.length)
   const progressPct     = $derived(totalCount > 0 ? (readCount / totalCount) * 100 : 0)
-  const downloadedCount = $derived(chapters.filter(c => c.isDownloaded).length)
+  const downloadedCount = $derived(chapters.filter(c => c.downloaded).length)
 
   const continueChapter = $derived((() => {
     if (!sortedChapters.length) return null
     const asc      = [...sortedChapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
-    const anyRead  = asc.some(c => c.isRead)
+    const anyRead  = asc.some(c => c.read)
     const bookmark = seriesState.activeManga
       ? seriesState.bookmarks.find(b => b.mangaId === seriesState.activeManga!.id)
       : null
     const bookmarkedCh = bookmark ? asc.find(c => c.id === bookmark.chapterId) : null
-    if (bookmarkedCh && !bookmarkedCh.isRead) {
+    if (bookmarkedCh && !bookmarkedCh.read) {
       return { chapter: bookmarkedCh, type: (anyRead ? 'continue' : 'start') as const, resumePage: bookmark!.pageNumber }
     }
-    const inProgress  = asc.find(c => !c.isRead && (c.lastPageRead ?? 0) > 0)
-    const firstUnread = asc.find(c => !c.isRead)
+    const inProgress  = asc.find(c => !c.read && (c.lastPageRead ?? 0) > 0)
+    const firstUnread = asc.find(c => !c.read)
     const target      = inProgress ?? firstUnread
     if (target) return { chapter: target, type: (anyRead ? 'continue' : 'start') as const, resumePage: null }
     return { chapter: asc[0], type: 'reread' as const, resumePage: null }
@@ -145,7 +147,7 @@
   function applyChapters(nodes: Chapter[]) {
     if (get('autoDownload') && prevChapterIds.size > 0) {
       const filtered    = buildChapterList(nodes, currentPrefs)
-      const newChapters = filtered.filter(c => !prevChapterIds.has(c.id) && !c.isDownloaded)
+      const newChapters = filtered.filter(c => !prevChapterIds.has(c.id) && !c.downloaded)
       if (newChapters.length) enqueueMultiple(newChapters.map(c => c.id))
     }
     prevChapterIds = new Set(nodes.map(c => c.id))
@@ -158,7 +160,7 @@
     getCategories()
       .then(d => {
         allCategories   = d.filter(c => c.id !== 0)
-        mangaCategories = allCategories.filter(c => c.mangas?.nodes.some((m: Manga) => m.id === mangaId))
+        mangaCategories = allCategories.filter(c => c.mangas?.some((m: Manga) => m.id === mangaId))
       })
       .catch(console.error)
       .finally(() => { catsLoading = false })
@@ -166,7 +168,7 @@
 
   async function checkAndMarkCompleted(mangaId: number, chaps: Chapter[]) {
     if (chaps.length && manga?.status !== 'ONGOING') {
-      const allRead   = chaps.every(c => c.isRead)
+      const allRead   = chaps.every(c => c.read)
       const completed = allCategories.find(c => c.name === 'Completed')
       if (completed) {
         const inCompleted = mangaCategories.some(c => c.id === completed.id)
@@ -239,7 +241,7 @@
         const { markedIds } = await trackingState.syncFromRemote(mangaId, record, chaps, currentPrefs)
         if (markedIds.length > 0) {
           const idSet = new Set(markedIds)
-          chapters = chapters.map(c => idSet.has(c.id) ? { ...c, isRead: true } : c)
+          chapters = chapters.map(c => idSet.has(c.id) ? { ...c, read: true } : c)
           if (seriesState.activeManga) chapterCache.set(seriesState.activeManga.id, { data: chapters, fetchedAt: Date.now() })
         }
       } catch {}
@@ -335,7 +337,7 @@
   async function markRead(chapterId: number, isRead: boolean) {
     const mangaId = seriesState.activeManga?.id
     await markChapterRead(chapterId, isRead).catch(console.error)
-    chapters = chapters.map(c => c.id === chapterId ? { ...c, isRead } : c)
+    chapters = chapters.map(c => c.id === chapterId ? { ...c, read } : c)
     if (mangaId) {
       chapterCache.set(mangaId, { data: chapters, fetchedAt: Date.now() })
       checkAndMarkCompleted(mangaId, chapters)
@@ -348,7 +350,7 @@
     if (isRead) {
       if (get('deleteOnRead')) {
         const ch = chapters.find(c => c.id === chapterId)
-        if (ch?.isDownloaded) {
+        if (ch?.downloaded) {
           const delayMs = (get('deleteDelayHours') as number) * 60 * 60 * 1000
           if (delayMs === 0) deleteDownloaded(chapterId)
           else setTimeout(() => deleteDownloaded(chapterId), delayMs)
@@ -358,7 +360,7 @@
       if (ahead > 0) {
         const idx = sortedChapters.findIndex(c => c.id === chapterId)
         if (idx >= 0) {
-          const toQueue = sortedChapters.slice(idx + 1, idx + 1 + ahead).filter(c => !c.isDownloaded).map(c => c.id)
+          const toQueue = sortedChapters.slice(idx + 1, idx + 1 + ahead).filter(c => !c.downloaded).map(c => c.id)
           if (toQueue.length) enqueueMultiple(toQueue)
         }
       }
@@ -370,7 +372,7 @@
     const mangaId = seriesState.activeManga?.id
     await markChaptersRead(ids, isRead).catch(console.error)
     const idSet = new Set(ids)
-    chapters = chapters.map(c => idSet.has(c.id) ? { ...c, isRead } : c)
+    chapters = chapters.map(c => idSet.has(c.id) ? { ...c, read } : c)
     if (mangaId) {
       chapterCache.set(mangaId, { data: chapters, fetchedAt: Date.now() })
       checkAndMarkCompleted(mangaId, chapters)
@@ -383,12 +385,12 @@
       }
     }
     if (isRead && get('deleteOnRead')) {
-      const toDelete = ids.filter(id => chapters.find(c => c.id === id)?.isDownloaded)
+      const toDelete = ids.filter(id => chapters.find(c => c.id === id)?.downloaded)
       if (toDelete.length) {
         const delayMs = (get('deleteDelayHours') as number) * 60 * 60 * 1000
         const doDelete = async () => {
           await deleteDownloadedChapters(toDelete).catch(console.error)
-          chapters = chapters.map(c => toDelete.includes(c.id) ? { ...c, isDownloaded: false } : c)
+          chapters = chapters.map(c => toDelete.includes(c.id) ? { ...c, downloaded: false } : c)
           if (mangaId) chapterCache.set(mangaId, { data: chapters, fetchedAt: Date.now() })
         }
         if (delayMs === 0) doDelete(); else setTimeout(doDelete, delayMs)
@@ -397,17 +399,17 @@
   }
 
   async function deleteSelected() {
-    const ids = [...selectedIds].filter(id => chapters.find(c => c.id === id)?.isDownloaded)
+    const ids = [...selectedIds].filter(id => chapters.find(c => c.id === id)?.downloaded)
     if (ids.length) {
       await deleteDownloadedChapters(ids).catch(console.error)
-      chapters = chapters.map(c => ids.includes(c.id) ? { ...c, isDownloaded: false } : c)
+      chapters = chapters.map(c => ids.includes(c.id) ? { ...c, downloaded: false } : c)
       if (seriesState.activeManga) chapterCache.set(seriesState.activeManga.id, { data: chapters, fetchedAt: Date.now() })
     }
     clearSelection()
   }
 
   async function downloadSelected() {
-    await enqueueMultiple([...selectedIds].filter(id => !chapters.find(c => c.id === id)?.isDownloaded))
+    await enqueueMultiple([...selectedIds].filter(id => !chapters.find(c => c.id === id)?.downloaded))
     clearSelection()
   }
 
@@ -416,23 +418,23 @@
     clearSelection()
   }
 
-  const markAboveRead   = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter(c => !c.isRead).map(c => c.id), true)
-  const markBelowRead   = (i: number) => markBulk(sortedChapters.slice(i).filter(c => !c.isRead).map(c => c.id), true)
-  const markAboveUnread = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter(c => c.isRead).map(c => c.id), false)
-  const markBelowUnread = (i: number) => markBulk(sortedChapters.slice(i).filter(c => c.isRead).map(c => c.id), false)
+  const markAboveRead   = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter(c => !c.read).map(c => c.id), true)
+  const markBelowRead   = (i: number) => markBulk(sortedChapters.slice(i).filter(c => !c.read).map(c => c.id), true)
+  const markAboveUnread = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter(c => c.read).map(c => c.id), false)
+  const markBelowUnread = (i: number) => markBulk(sortedChapters.slice(i).filter(c => c.read).map(c => c.id), false)
 
   async function deleteDownloaded(chapterId: number) {
     await deleteDownloadedChapters([chapterId]).catch(console.error)
-    chapters = chapters.map(c => c.id === chapterId ? { ...c, isDownloaded: false } : c)
+    chapters = chapters.map(c => c.id === chapterId ? { ...c, downloaded: false } : c)
     if (seriesState.activeManga) chapterCache.set(seriesState.activeManga.id, { data: chapters, fetchedAt: Date.now() })
   }
 
   async function deleteAllDownloads() {
-    const ids = chapters.filter(c => c.isDownloaded).map(c => c.id)
+    const ids = chapters.filter(c => c.downloaded).map(c => c.id)
     if (!ids.length) return
     deletingAll = true
     await deleteDownloadedChapters(ids).catch(console.error)
-    chapters = chapters.map(c => ({ ...c, isDownloaded: false }))
+    chapters = chapters.map(c => ({ ...c, downloaded: false }))
     if (seriesState.activeManga) chapterCache.set(seriesState.activeManga.id, { data: chapters, fetchedAt: Date.now() })
     deletingAll = false
   }
@@ -453,19 +455,19 @@
     const below = sortedChapters.slice(idx)
     const last  = sortedChapters.length - 1
     return [
-      { label: ch.isRead ? 'Mark as unread' : 'Mark as read', icon: ch.isRead ? Circle : CheckCircle, onClick: () => markRead(ch.id, !ch.isRead) },
+      { label: ch.read ? 'Mark as unread' : 'Mark as read', icon: ch.read ? Circle : CheckCircle, onClick: () => markRead(ch.id, !ch.read) },
       { label: 'Select', icon: CheckSquare, onClick: () => { const next = new Set(selectedIds); next.add(ch.id); selectedIds = next } },
       { separator: true },
-      { label: 'Mark above as read',   icon: ArrowFatLinesUp,   onClick: () => markAboveRead(idx),   disabled: above.filter(c => !c.isRead).length === 0 },
-      { label: 'Mark above as unread', icon: ArrowFatLineUp,    onClick: () => markAboveUnread(idx), disabled: above.filter(c => c.isRead).length === 0 },
+      { label: 'Mark above as read',   icon: ArrowFatLinesUp,   onClick: () => markAboveRead(idx),   disabled: above.filter(c => !c.read).length === 0 },
+      { label: 'Mark above as unread', icon: ArrowFatLineUp,    onClick: () => markAboveUnread(idx), disabled: above.filter(c => c.read).length === 0 },
       { separator: true },
-      { label: 'Mark below as read',   icon: ArrowFatLinesDown, onClick: () => markBelowRead(idx),   disabled: idx === last || below.filter(c => !c.isRead).length === 0 },
-      { label: 'Mark below as unread', icon: ArrowFatLineDown,  onClick: () => markBelowUnread(idx), disabled: idx === last || below.filter(c => c.isRead).length === 0 },
+      { label: 'Mark below as read',   icon: ArrowFatLinesDown, onClick: () => markBelowRead(idx),   disabled: idx === last || below.filter(c => !c.read).length === 0 },
+      { label: 'Mark below as unread', icon: ArrowFatLineDown,  onClick: () => markBelowUnread(idx), disabled: idx === last || below.filter(c => c.read).length === 0 },
       { separator: true },
-      { label: ch.isDownloaded ? 'Delete download' : 'Download', icon: ch.isDownloaded ? Trash : Download, danger: ch.isDownloaded, onClick: () => ch.isDownloaded ? deleteDownloaded(ch.id) : enqueueDownload(ch.id) },
+      { label: ch.downloaded ? 'Delete download' : 'Download', icon: ch.downloaded ? Trash : Download, danger: ch.downloaded, onClick: () => ch.downloaded ? deleteDownloaded(ch.id) : enqueueDownload(ch.id) },
       { separator: true },
-      { label: 'Download next 5 from here', icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx, idx + 5).filter(c => !c.isDownloaded).map(c => c.id)) },
-      { label: 'Download all from here',    icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx).filter(c => !c.isDownloaded).map(c => c.id)) },
+      { label: 'Download next 5 from here', icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx, idx + 5).filter(c => !c.downloaded).map(c => c.id)) },
+      { label: 'Download all from here',    icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx).filter(c => !c.downloaded).map(c => c.id)) },
     ]
   }
 
@@ -473,7 +475,7 @@
     if (!continueChapter) return
     const idx = sortedChapters.indexOf(continueChapter.chapter)
     if (idx < 0) return
-    enqueueMultiple(sortedChapters.slice(idx, idx + n).filter(c => !c.isDownloaded).map(c => c.id))
+    enqueueMultiple(sortedChapters.slice(idx, idx + n).filter(c => !c.downloaded).map(c => c.id))
   }
 
   function openReaderWithAhead(ch: Chapter, inProgress: boolean) {
@@ -483,7 +485,7 @@
     if (ahead > 0) {
       const idx = ascList.indexOf(ch)
       if (idx >= 0) {
-        const toQueue = ascList.slice(idx + 1, idx + 1 + ahead).filter(c => !c.isDownloaded).map(c => c.id)
+        const toQueue = ascList.slice(idx + 1, idx + 1 + ahead).filter(c => !c.downloaded).map(c => c.id)
         if (toQueue.length) enqueueMultiple(toQueue)
       }
     }
@@ -510,7 +512,7 @@
     if (ahead > 0) {
       const idx = ascList.indexOf(cc.chapter)
       if (idx >= 0) {
-        const toQueue = ascList.slice(idx + 1, idx + 1 + ahead).filter(c => !c.isDownloaded).map(c => c.id)
+        const toQueue = ascList.slice(idx + 1, idx + 1 + ahead).filter(c => !c.downloaded).map(c => c.id)
         if (toQueue.length) enqueueMultiple(toQueue)
       }
     }
@@ -677,32 +679,28 @@
 {/if}
 
 {#if autoOpen && manga}
-  <div class="panel-overlay" role="presentation" onclick={() => autoOpen = false}>
-    <div class="panel-drawer" role="presentation" onclick={(e) => e.stopPropagation()}>
-      <AutomationPanel mangaId={manga.id} {manga} onClose={() => autoOpen = false} />
-    </div>
-  </div>
+  <AutomationPanel mangaId={manga.id} {manga} onClose={() => autoOpen = false} />
 {/if}
 
 {#if trackingOpen && manga}
-  <div class="panel-overlay" role="presentation" onclick={() => trackingOpen = false}>
-    <div class="panel-drawer" role="presentation" onclick={(e) => e.stopPropagation()}>
+  <div class="modal-overlay" role="presentation" onclick={() => trackingOpen = false}>
+    <div class="modal-dialog" role="presentation" onclick={(e) => e.stopPropagation()}>
       <TrackingPanel mangaId={manga.id} mangaTitle={manga.title} onClose={() => trackingOpen = false} />
     </div>
   </div>
 {/if}
 
 {#if linkPickerOpen && manga}
-  <div class="panel-overlay" role="presentation" onclick={() => linkPickerOpen = false}>
-    <div class="panel-drawer" role="presentation" onclick={(e) => e.stopPropagation()}>
+  <div class="modal-overlay" role="presentation" onclick={() => linkPickerOpen = false}>
+    <div class="modal-dialog" role="presentation" onclick={(e) => e.stopPropagation()}>
       <SeriesLinkPanel {manga} allManga={allMangaForLink} onClose={() => linkPickerOpen = false} />
     </div>
   </div>
 {/if}
 
 {#if coverPickerOpen && manga}
-  <div class="panel-overlay" role="presentation" onclick={() => coverPickerOpen = false}>
-    <div class="panel-drawer" role="presentation" onclick={(e) => e.stopPropagation()}>
+  <div class="modal-overlay" role="presentation" onclick={() => coverPickerOpen = false}>
+    <div class="modal-dialog" role="presentation" onclick={(e) => e.stopPropagation()}>
       <CoverPickerPanel {manga} allManga={allMangaForLink} onClose={() => coverPickerOpen = false} />
     </div>
   </div>
@@ -719,6 +717,8 @@
 
 {/if}
 
+<MangaPreview />
+
 <style>
   .root {
     display: flex; height: 100%; overflow: hidden;
@@ -744,4 +744,22 @@
 
   @keyframes fadeIn   { from { opacity: 0 }                               to { opacity: 1 } }
   @keyframes drawerIn { from { opacity: 0; transform: translateX(-12px) } to { opacity: 1; transform: translateX(0) } }
+
+  .modal-overlay {
+    position: fixed; inset: 0; z-index: var(--z-settings);
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(0,0,0,0.5);
+    animation: fadeIn 0.12s ease both;
+  }
+  .modal-dialog {
+    width: 480px; max-width: 90vw; max-height: 80vh;
+    background: var(--bg-surface); border: 1px solid var(--border-base);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 8px 48px rgba(0,0,0,0.5);
+    display: flex; flex-direction: column;
+    animation: modalIn 0.18s cubic-bezier(0.16,1,0.3,1) both;
+  }
+  @keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(8px) } to { opacity: 1; transform: scale(1) translateY(0) } }
+
+
 </style>

src/lib/components/series/SeriesHeader.svelte

@@ -4,12 +4,14 @@
     Eye, ArrowsClockwise, LinkSimpleHorizontalBreak, ChartLineUp,
     MapPin, Gear, Trash, Image,
   } from 'phosphor-svelte'
-  import Thumbnail        from '$lib/components/shared/manga/Thumbnail.svelte'
+  import { goto }          from '$app/navigation'
+  import { page }          from '$app/stores'
+  import { get }           from 'svelte/store'
+  import Thumbnail         from '$lib/components/shared/manga/Thumbnail.svelte'
   import { resolvedCover } from '$lib/core/cover/coverResolver'
   import type { MangaPrefs }                                    from '$lib/state/series.svelte'
-  import type { Manga, Chapter, Category }                      from '$lib/types'
   import { setGenreFilter, setNavPage }                         from '$lib/state/app.svelte'
-  import { seriesState, setPreviewManga }                       from '$lib/state/series.svelte'
+  import { seriesState, setActiveManga, setPreviewManga }       from '$lib/state/series.svelte'
 
   interface ContinueChapter {
     chapter:    Chapter
@@ -66,16 +68,24 @@
   )
 
   const hasCoverOverride = $derived(
-    !!seriesState.settings.mangaPrefs?.[seriesState.activeManga?.id ?? manga?.id ?? 0]?.coverUrl
+    !!seriesState.settings.mangaPrefs?.[seriesState.activeManga?.id ?? -1]?.coverUrl
   )
 
   const altTitles = $derived(
     (manga as any)?.alternativeTitles ?? (manga as any)?.altTitles ?? []
   )
+
+  function goBack() {
+    const currentUrl = get(page).url.pathname
+    history.back()
+    setTimeout(() => {
+      if (get(page).url.pathname === currentUrl) goto('/library')
+    }, 100)
+  }
 </script>
 
 <div class="sidebar">
-  <button class="back" onclick={() => history.back()}>
+  <button class="back" onclick={goBack}>
     <ArrowLeft size={13} weight="light" /> Back
   </button>
 
@@ -122,7 +132,7 @@
       {#if manga?.genre?.length}
         <div class="genres">
           {#each (genresExpanded ? manga.genre : manga.genre.slice(0, 3)) as g}
-            <button class="genre" onclick={() => { setGenreFilter(g); setNavPage('search'); history.back() }}>{g}</button>
+            <button class="genre" onclick={() => { setGenreFilter(g); setNavPage('search'); setActiveManga(null) }}>{g}</button>
           {/each}
           {#if manga.genre.length > 3}
             <button class="genre-toggle" onclick={() => genresExpanded = !genresExpanded}>
@@ -242,9 +252,14 @@
     overflow: hidden; background: var(--bg-raised);
     border: 1px solid var(--border-dim); flex-shrink: 0;
     cursor: pointer; transition: opacity var(--t-base); padding: 0;
+    position: relative;
   }
   .cover-wrap:hover { opacity: 0.88; }
-  :global(.cover) { width: 100%; height: 100%; object-fit: cover; }
+  :global(.cover) {
+    display: block;
+    position: absolute; inset: 0;
+    width: 100%; height: 100%; object-fit: cover;
+  }
 
   .meta-skeleton { display: flex; flex-direction: column; gap: var(--sp-2); }
   .sk-line { border-radius: var(--radius-sm); }

src/lib/components/series/lib/mangaPrefs.ts

@@ -1,7 +1,8 @@
 import { settingsState, updateSettings } from '$lib/state/settings.svelte'
-import type { MangaPrefs }               from '$lib/state/series.svelte'
+import { DEFAULT_MANGA_PREFS }           from '$lib/types/settings'
+import type { MangaPrefs }               from '$lib/types/settings'
 
-export { DEFAULT_MANGA_PREFS } from '$lib/state/series.svelte'
+export { DEFAULT_MANGA_PREFS }           from '$lib/types/settings'
 
 export function getPref<K extends keyof MangaPrefs>(mangaId: number, key: K): MangaPrefs[K] {
   const prefs = settingsState.settings.mangaPrefs?.[mangaId] ?? {}

src/lib/components/series/panels/AutomationPanel.svelte

@@ -1,14 +1,321 @@
 <script lang="ts">
-  let { onClose, ...rest }: { onClose?: () => void; [k: string]: any } = $props()
+  import { X }          from "phosphor-svelte";
+  import { getPref, setPref } from "$lib/components/series/lib/mangaPrefs";
+  import { settingsState }    from "$lib/state/settings.svelte";
+  import { libraryState }     from "$lib/state/library.svelte";
+  import { resolvedCover }    from "$lib/core/cover/coverResolver";
+  import Thumbnail            from "$lib/components/shared/manga/Thumbnail.svelte";
+  import type { MangaPrefs }  from "$lib/state/series.svelte";
+  import type { Manga }       from "$lib/types";
+
+  let { mangaId, manga: mangaProp = null, onClose }: {
+    mangaId:  number;
+    manga?:   Manga | null;
+    onClose:  () => void;
+  } = $props();
+
+  const DOWNLOAD_AHEAD_OPTIONS = [
+    { value: 0,  label: "Off" },
+    { value: 2,  label: "2"   },
+    { value: 5,  label: "5"   },
+    { value: 10, label: "10"  },
+  ];
+
+  const MAX_KEEP_OPTIONS = [
+    { value: 0,  label: "Off" },
+    { value: 5,  label: "5"   },
+    { value: 10, label: "10"  },
+    { value: 25, label: "25"  },
+  ];
+
+  const DELETE_DELAY_OPTIONS = [
+    { value: 0,   label: "Now"    },
+    { value: 24,  label: "1 day"  },
+    { value: 168, label: "1 week" },
+  ];
+
+  const REFRESH_INTERVAL_OPTIONS = [
+    { value: "global", label: "Default" },
+    { value: "daily",  label: "Daily"   },
+    { value: "weekly", label: "Weekly"  },
+    { value: "manual", label: "Manual"  },
+  ];
+
+  const get = <K extends keyof MangaPrefs>(key: K): MangaPrefs[K] => getPref(mangaId, key);
+  const set = <K extends keyof MangaPrefs>(key: K, value: MangaPrefs[K]) => setPref(mangaId, key, value);
+
+  const manga    = $derived(libraryState.items.find(m => m.id === mangaId) ?? mangaProp);
+  const coverSrc = $derived(manga ? resolvedCover(manga.id, manga.thumbnailUrl) : null);
+
+  function onBackdrop(e: MouseEvent) {
+    if (e.target === e.currentTarget) onClose();
+  }
 </script>
 
-<div class="stub-panel">
-  <button class="stub-close" onclick={onClose}>✕</button>
-  <p class="stub-label">AutomationPanel</p>
+<div class="backdrop" role="presentation" tabindex="-1" onmousedown={onBackdrop}>
+  <div class="modal" role="dialog" aria-modal="true" aria-label="Automation">
+
+    <div class="cover-col">
+      {#if coverSrc}
+        <div class="cover-wrap">
+          <Thumbnail src={coverSrc} alt={manga?.title} class="cover" />
+        </div>
+      {:else}
+        <div class="cover-placeholder"></div>
+      {/if}
+    </div>
+
+    <div class="content">
+      <div class="content-header">
+        <div class="title-block">
+          <span class="title">{manga?.title ?? "Automation"}</span>
+          <span class="subtitle">Per-series rules</span>
+        </div>
+        <button class="close-btn" onclick={onClose} aria-label="Close">
+          <X size={16} weight="light" />
+        </button>
+      </div>
+
+      <div class="content-body">
+
+        <p class="section-label">Downloads</p>
+
+        <div class="auto-row">
+          <div class="auto-info">
+            <span class="auto-label">Auto-download new chapters</span>
+            <span class="auto-desc">Queue new chapters when this series refreshes</span>
+          </div>
+          <button
+            role="switch"
+            aria-checked={get("autoDownload")}
+            aria-label="Auto-download new chapters"
+            class="auto-toggle"
+            class:auto-toggle-on={get("autoDownload")}
+            onclick={() => set("autoDownload", !get("autoDownload"))}
+          ><span class="auto-toggle-thumb"></span></button>
+        </div>
+
+        <div class="auto-row auto-row-col">
+          <div class="auto-info">
+            <span class="auto-label">Download ahead</span>
+            <span class="auto-desc">Pre-fetch chapters while reading</span>
+          </div>
+          <div class="auto-chip-group">
+            {#each DOWNLOAD_AHEAD_OPTIONS as opt}
+              <button
+                class="auto-chip"
+                class:auto-chip-on={get("downloadAhead") === opt.value}
+                onclick={() => set("downloadAhead", opt.value)}
+              >{opt.label}</button>
+            {/each}
+          </div>
+        </div>
+
+        <div class="auto-row auto-row-col">
+          <div class="auto-info">
+            <span class="auto-label">Max chapters to keep</span>
+            <span class="auto-desc">Delete oldest downloads when limit is exceeded</span>
+          </div>
+          <div class="auto-chip-group">
+            {#each MAX_KEEP_OPTIONS as opt}
+              <button
+                class="auto-chip"
+                class:auto-chip-on={get("maxKeepChapters") === opt.value}
+                onclick={() => set("maxKeepChapters", opt.value)}
+              >{opt.label}</button>
+            {/each}
+          </div>
+        </div>
+
+        <div class="divider"></div>
+
+        <p class="section-label">On Read</p>
+
+        <div class="auto-row">
+          <div class="auto-info">
+            <span class="auto-label">Delete after reading</span>
+            <span class="auto-desc">Remove download when chapter is marked read</span>
+          </div>
+          <button
+            role="switch"
+            aria-checked={get("deleteOnRead")}
+            aria-label="Delete after reading"
+            class="auto-toggle"
+            class:auto-toggle-on={get("deleteOnRead")}
+            onclick={() => set("deleteOnRead", !get("deleteOnRead"))}
+          ><span class="auto-toggle-thumb"></span></button>
+        </div>
+
+        {#if get("deleteOnRead")}
+          <div class="auto-row auto-row-sub">
+            <span class="auto-label">Delete delay</span>
+            <div class="auto-chip-group">
+              {#each DELETE_DELAY_OPTIONS as opt}
+                <button
+                  class="auto-chip"
+                  class:auto-chip-on={get("deleteDelayHours") === opt.value}
+                  onclick={() => set("deleteDelayHours", opt.value)}
+                >{opt.label}</button>
+              {/each}
+            </div>
+          </div>
+        {/if}
+
+        <div class="divider"></div>
+
+        <p class="section-label">Updates</p>
+
+        <div class="auto-row">
+          <div class="auto-info">
+            <span class="auto-label">Pause updates</span>
+            <span class="auto-desc">Skip this series during global refresh</span>
+          </div>
+          <button
+            role="switch"
+            aria-checked={get("pauseUpdates")}
+            aria-label="Pause updates"
+            class="auto-toggle"
+            class:auto-toggle-on={get("pauseUpdates")}
+            onclick={() => set("pauseUpdates", !get("pauseUpdates"))}
+          ><span class="auto-toggle-thumb"></span></button>
+        </div>
+
+        <div class="auto-row auto-row-col">
+          <div class="auto-info">
+            <span class="auto-label">Refresh interval</span>
+            <span class="auto-desc">How often to check for new chapters</span>
+          </div>
+          <div class="auto-chip-group">
+            {#each REFRESH_INTERVAL_OPTIONS as opt}
+              <button
+                class="auto-chip"
+                class:auto-chip-on={get("refreshInterval") === opt.value}
+                onclick={() => set("refreshInterval", opt.value as MangaPrefs["refreshInterval"])}
+              >{opt.label}</button>
+            {/each}
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+  </div>
 </div>
 
 <style>
-  .stub-panel  { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; min-width: 240px; }
-  .stub-close  { align-self: flex-end; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
-  .stub-label  { color: var(--text-faint); font-size: var(--text-sm); }
+  .backdrop {
+    position: fixed; inset: 0; z-index: 300;
+    background: rgba(0,0,0,0.6);
+    display: flex; align-items: center; justify-content: center;
+    animation: fadeIn 0.1s ease both;
+  }
+
+  .modal {
+    display: flex; flex-direction: row;
+    width: 600px; max-width: calc(100vw - var(--sp-6));
+    height: 480px; max-height: 85vh;
+    background: var(--bg-surface); border: 1px solid var(--border-base);
+    border-radius: var(--radius-xl); overflow: hidden;
+    box-shadow: 0 0 0 1px var(--border-dim), 0 24px 64px rgba(0,0,0,0.6);
+    animation: scaleIn 0.15s ease both;
+  }
+
+  .cover-col {
+    width: 200px; flex-shrink: 0;
+    background: var(--bg-raised);
+    border-right: 1px solid var(--border-dim);
+    display: flex; flex-direction: column;
+    padding: var(--sp-4);
+    overflow: hidden;
+  }
+
+  .cover-wrap { position: relative; width: 100%; flex: 1; min-height: 0; }
+
+  :global(.cover) {
+    position: absolute; inset: 0;
+    width: 100%; height: 100%;
+    object-fit: cover; object-position: center top;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-dim);
+    display: block;
+  }
+
+  .cover-placeholder {
+    position: absolute; inset: 0;
+    background: var(--bg-overlay);
+    border-radius: var(--radius-md);
+  }
+
+  .content {
+    flex: 1; min-width: 0;
+    display: flex; flex-direction: column;
+    overflow: hidden;
+    border-left: 1px solid var(--border-dim);
+  }
+
+  .content-header {
+    display: flex; align-items: flex-start; justify-content: space-between;
+    gap: var(--sp-4); padding: var(--sp-5) var(--sp-6) var(--sp-4);
+    border-bottom: 1px solid var(--border-dim);
+    flex-shrink: 0;
+  }
+
+  .title-block { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
+
+  .title {
+    font-size: var(--text-base); font-weight: var(--weight-medium);
+    color: var(--text-primary); letter-spacing: var(--tracking-tight);
+    line-height: var(--leading-tight);
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+
+  .subtitle {
+    font-family: var(--font-ui); font-size: var(--text-xs);
+    color: var(--text-faint); letter-spacing: var(--tracking-wide);
+  }
+
+  .close-btn {
+    display: flex; align-items: center; justify-content: center;
+    width: 28px; height: 28px; flex-shrink: 0;
+    border-radius: var(--radius-sm); color: var(--text-faint);
+    background: none; border: none; cursor: pointer;
+    transition: color var(--t-base), background var(--t-base);
+  }
+  .close-btn:hover { color: var(--text-muted); background: var(--bg-raised); }
+
+  .content-body {
+    flex: 1; overflow-y: auto; scrollbar-width: none;
+    display: flex; flex-direction: column; gap: var(--sp-3);
+    padding: var(--sp-5) var(--sp-6);
+  }
+  .content-body::-webkit-scrollbar { display: none; }
+
+  .section-label {
+    font-family: var(--font-ui); font-size: var(--text-2xs);
+    letter-spacing: var(--tracking-widest); color: var(--text-faint);
+    text-transform: uppercase; margin: 0;
+  }
+
+  .divider { height: 1px; background: var(--border-dim); margin: var(--sp-1) 0; }
+
+  .auto-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
+  .auto-row-col { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
+  .auto-row-sub { padding-left: var(--sp-3); border-left: 2px solid var(--border-dim); }
+
+  .auto-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
+  .auto-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); }
+  .auto-desc  { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); line-height: var(--leading-snug); }
+
+  .auto-toggle { width: 28px; height: 16px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--bg-overlay); cursor: pointer; padding: 0; flex-shrink: 0; position: relative; transition: background var(--t-base), border-color var(--t-base); }
+  .auto-toggle-on { background: var(--accent); border-color: var(--accent); }
+  .auto-toggle-thumb { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-faint); transition: transform var(--t-base), background var(--t-base); }
+  .auto-toggle-on .auto-toggle-thumb { transform: translateX(12px); background: var(--bg-base); }
+
+  .auto-chip-group { display: flex; flex-direction: row; gap: 4px; flex-wrap: wrap; }
+  .auto-chip { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); padding: 2px 7px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; white-space: nowrap; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
+  .auto-chip:hover { color: var(--text-muted); border-color: var(--border-strong); background: var(--bg-raised); }
+  .auto-chip-on { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
+
+  @keyframes fadeIn  { from { opacity: 0 }                         to { opacity: 1 } }
+  @keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
 </style>

src/lib/components/series/panels/CoverPickerPanel.svelte

@@ -1,14 +1,211 @@
 <script lang="ts">
-  let { onClose, ...rest }: { onClose?: () => void; [k: string]: any } = $props()
+  import { X, CaretLeft, CaretRight, CircleNotch } from "phosphor-svelte";
+  import { setPref }                               from "$lib/components/series/lib/mangaPrefs";
+  import { coverCandidatesSync, dedupeByImage }    from "$lib/core/cover/coverResolver";
+  import Thumbnail                                 from "$lib/components/shared/manga/Thumbnail.svelte";
+  import type { Manga }                            from "$lib/types";
+
+  interface Props {
+    manga:    Manga;
+    allManga: Manga[];
+    onClose:  () => void;
+  }
+
+  let { manga, allManga, onClose }: Props = $props();
+
+  type MangaWithTitle = Manga & { title: string };
+
+  const mangaById = $derived(new Map(allManga.map(m => [m.id, m as MangaWithTitle])));
+
+  const syncCandidates = $derived(
+    coverCandidatesSync(manga.id, manga.title, manga.thumbnailUrl, mangaById)
+  );
+
+  let candidates  = $state<typeof syncCandidates>([]);
+  let hashingDone = $state(false);
+  let index       = $state(0);
+
+  $effect(() => {
+    const snap = syncCandidates;
+    candidates  = [];
+    hashingDone = false;
+    index       = 0;
+
+    dedupeByImage(snap).then(merged => {
+      candidates  = merged;
+      index       = Math.max(0, merged.findIndex(c => c.isActive));
+      hashingDone = true;
+    });
+  });
+
+  const current = $derived(candidates[index]);
+
+  function prev() { index = (index - 1 + candidates.length) % candidates.length; }
+  function next() { index = (index + 1) % candidates.length; }
+
+  function confirm() {
+    if (!current) return;
+    if (current.mangaId === manga.id) setPref(manga.id, "coverUrl", undefined as any);
+    else                               setPref(manga.id, "coverUrl", current.url);
+    onClose();
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === "ArrowLeft")  { e.preventDefault(); prev(); }
+    if (e.key === "ArrowRight") { e.preventDefault(); next(); }
+    if (e.key === "Enter")      { e.preventDefault(); confirm(); }
+    if (e.key === "Escape")     onClose();
+  }
 </script>
 
-<div class="stub-panel">
-  <button class="stub-close" onclick={onClose}>✕</button>
-  <p class="stub-label">CoverPickerPanel</p>
+<div
+  class="backdrop"
+  role="button"
+  tabindex="-1"
+  aria-label="Close cover picker"
+  onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+  onkeydown={(e) => e.key === "Escape" && onClose()}
+>
+  <div class="modal" role="dialog" aria-label="Choose cover image" tabindex="-1" onkeydown={onKeydown}>
+    <div class="header">
+      <span class="title">Cover Image</span>
+      <button class="close-btn" onclick={onClose}><X size={14} weight="light" /></button>
+    </div>
+
+    {#if !hashingDone}
+      <div class="loading">
+        <CircleNotch size={24} weight="light" class="anim-spin" style="color:var(--text-faint)" />
+      </div>
+    {:else}
+      <div class="stage">
+        <button class="arrow" onclick={prev} disabled={candidates.length <= 1} aria-label="Previous">
+          <CaretLeft size={18} weight="bold" />
+        </button>
+
+        <div class="cover-wrap">
+          {#if current}
+            <Thumbnail src={current.url} alt="" class="cover-img" />
+          {/if}
+        </div>
+
+        <button class="arrow" onclick={next} disabled={candidates.length <= 1} aria-label="Next">
+          <CaretRight size={18} weight="bold" />
+        </button>
+      </div>
+
+      {#if candidates.length > 1}
+        <div class="filmstrip">
+          {#each candidates as c, i (c.url)}
+            <button
+              class="film-thumb"
+              class:film-active={i === index}
+              onclick={() => index = i}
+              aria-label="Cover {i + 1}"
+            >
+              <Thumbnail src={c.url} alt="" class="film-img" />
+            </button>
+          {/each}
+        </div>
+      {/if}
+    {/if}
+
+    <div class="footer">
+      <button class="confirm-btn" onclick={confirm}>Use this cover</button>
+    </div>
+  </div>
 </div>
 
 <style>
-  .stub-panel  { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; min-width: 240px; }
-  .stub-close  { align-self: flex-end; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
-  .stub-label  { color: var(--text-faint); font-size: var(--text-sm); }
+  .backdrop {
+    position: fixed; inset: 0;
+    background: rgba(0,0,0,0.72);
+    z-index: calc(var(--z-settings) + 2);
+    display: flex; align-items: center; justify-content: center;
+    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
+    animation: fadeIn 0.1s ease both;
+  }
+  .modal {
+    width: min(380px, calc(100vw - 48px));
+    display: flex; flex-direction: column;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-base); border-radius: var(--radius-xl);
+    overflow: hidden;
+    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
+    animation: scaleIn 0.14s ease both;
+    outline: none;
+  }
+  .header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: var(--sp-4) var(--sp-5);
+    border-bottom: 1px solid var(--border-dim);
+    flex-shrink: 0; gap: var(--sp-2);
+  }
+  .title {
+    font-size: var(--text-sm); font-weight: var(--weight-medium);
+    color: var(--text-secondary); flex: 1;
+  }
+  .close-btn {
+    display: flex; align-items: center; justify-content: center;
+    width: 26px; height: 26px; border-radius: var(--radius-sm);
+    color: var(--text-faint); background: none; border: none; cursor: pointer;
+    transition: color var(--t-base), background var(--t-base);
+  }
+  .close-btn:hover { color: var(--text-muted); background: var(--bg-raised); }
+  .stage {
+    display: flex; align-items: center; justify-content: center;
+    gap: var(--sp-3);
+    padding: var(--sp-5) var(--sp-4) var(--sp-4);
+  }
+  .cover-wrap {
+    flex: 1; max-width: 200px; aspect-ratio: 2/3;
+    border-radius: var(--radius-md); overflow: hidden;
+    border: 1px solid var(--border-dim);
+    background: var(--bg-raised);
+    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+  }
+  :global(.cover-img) { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .arrow {
+    display: flex; align-items: center; justify-content: center;
+    width: 36px; height: 36px; flex-shrink: 0;
+    border-radius: var(--radius-full);
+    border: 1px solid var(--border-dim);
+    background: var(--bg-raised);
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
+  }
+  .arrow:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-overlay); }
+  .arrow:disabled { opacity: 0.2; cursor: default; }
+  .filmstrip {
+    display: flex; gap: var(--sp-2); align-items: center; justify-content: center;
+    padding: 0 var(--sp-4) var(--sp-4);
+    overflow-x: auto; scrollbar-width: none;
+  }
+  .filmstrip::-webkit-scrollbar { display: none; }
+  .film-thumb {
+    flex-shrink: 0; width: 44px; aspect-ratio: 2/3;
+    border-radius: var(--radius-sm); overflow: hidden;
+    border: 2px solid transparent;
+    background: var(--bg-raised);
+    cursor: pointer; padding: 0;
+    opacity: 0.5;
+    transition: border-color var(--t-base), opacity var(--t-base);
+  }
+  .film-thumb:hover { opacity: 0.8; }
+  .film-active { border-color: var(--accent); opacity: 1; }
+  :global(.film-img) { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .footer { padding: 0 var(--sp-4) var(--sp-4); flex-shrink: 0; }
+  .confirm-btn {
+    width: 100%; padding: 9px;
+    border-radius: var(--radius-md);
+    background: var(--accent); border: 1px solid var(--accent);
+    color: var(--accent-contrast, #fff);
+    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
+    cursor: pointer;
+    transition: opacity var(--t-base);
+  }
+  .confirm-btn:hover { opacity: 0.88; }
+  .loading { display: flex; align-items: center; justify-content: center; padding: var(--sp-10) 0; }
+  @keyframes fadeIn  { from { opacity: 0 }                         to { opacity: 1 } }
+  @keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
 </style>

src/lib/components/series/panels/MarkersPanel.svelte

@@ -1,14 +1,198 @@
 <script lang="ts">
-  let { onClose, ...rest }: { onClose?: () => void; [k: string]: any } = $props()
+  import { X, MapPin, Trash, PencilSimple, Check }          from "phosphor-svelte";
+  import { seriesState, updateMarker, removeMarker, openReader } from "$lib/state/series.svelte";
+  import type { MarkerEntry, MarkerColor }                   from "$lib/types/history";
+  import type { Chapter }                                    from "$lib/types";
+
+  interface Props {
+    mangaId:  number;
+    chapters: Chapter[];
+    onClose:  () => void;
+  }
+
+  let { mangaId, chapters, onClose }: Props = $props();
+
+  const COLOR_HEX: Record<MarkerColor, string> = {
+    yellow: "#c4a94a",
+    red:    "#c47a7a",
+    blue:   "#7a9ec4",
+    green:  "#7aab7a",
+    purple: "#a07ac4",
+  };
+
+  const markers = $derived(seriesState.getMarkersForManga(mangaId));
+
+  const grouped = $derived.by(() => {
+    const map = new Map<number, MarkerEntry[]>();
+    for (const m of markers) {
+      if (!map.has(m.chapterId)) map.set(m.chapterId, []);
+      map.get(m.chapterId)!.push(m);
+    }
+    const entries = [...map.entries()].map(([chapterId, items]) => ({
+      chapterId,
+      chapterName: items[0].chapterName,
+      items: [...items].sort((a, b) => a.pageNumber - b.pageNumber),
+    }));
+    const chapterOrder = new Map(chapters.map((c, i) => [c.id, i]));
+    entries.sort((a, b) => (chapterOrder.get(a.chapterId) ?? 9999) - (chapterOrder.get(b.chapterId) ?? 9999));
+    return entries;
+  });
+
+  let editingId: string      = $state("");
+  let editNote:  string      = $state("");
+  let editColor: MarkerColor = $state("yellow");
+
+  function startEdit(m: MarkerEntry) {
+    editingId = m.id;
+    editNote  = m.note;
+    editColor = m.color;
+  }
+
+  function commitEdit() {
+    if (!editingId) return;
+    updateMarker(editingId, { note: editNote.trim(), color: editColor });
+    editingId = "";
+  }
+
+  function jumpToMarker(m: MarkerEntry) {
+    const chapter = chapters.find(c => c.id === m.chapterId);
+    if (!chapter) return;
+    const chaptersAsc = [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder);
+    openReader(chapter, chaptersAsc);
+  }
+
+  function formatDate(ts: number): string {
+    return new Date(ts).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  }
 </script>
 
-<div class="stub-panel">
-  <button class="stub-close" onclick={onClose}>✕</button>
-  <p class="stub-label">MarkersPanel</p>
+<div class="panel">
+  <div class="panel-header">
+    <div class="panel-title">
+      <MapPin size={13} weight="fill" />
+      <span>Markers</span>
+      {#if markers.length > 0}
+        <span class="count">{markers.length}</span>
+      {/if}
+    </div>
+    <button class="close-btn" onclick={onClose}><X size={14} weight="light" /></button>
+  </div>
+
+  <div class="panel-body">
+    {#if grouped.length === 0}
+      <div class="empty">
+        <MapPin size={22} weight="light" style="color:var(--text-faint);opacity:0.4" />
+        <p>No markers yet</p>
+        <p class="empty-sub">Mark pages while reading with the marker button or keybind</p>
+      </div>
+    {:else}
+      {#each grouped as group}
+        <div class="group">
+          <div class="group-header">
+            <span class="group-name">{group.chapterName}</span>
+            <span class="group-count">{group.items.length}</span>
+          </div>
+          {#each group.items as m (m.id)}
+            <div class="marker-row" class:editing={editingId === m.id}>
+              <div class="marker-dot" style="background:{COLOR_HEX[m.color]}"></div>
+              <div class="marker-body">
+                {#if editingId === m.id}
+                  <div class="edit-wrap">
+                    <div class="color-row">
+                      {#each Object.entries(COLOR_HEX) as [c, hex]}
+                        <button
+                          class="color-swatch"
+                          class:color-active={editColor === c}
+                          style="background:{hex}"
+                          onclick={() => editColor = c as MarkerColor}
+                          title={c}
+                        ></button>
+                      {/each}
+                    </div>
+                    <textarea
+                      class="edit-input"
+                      rows={3}
+                      bind:value={editNote}
+                      placeholder="Add a note…"
+                      onkeydown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); commitEdit(); } if (e.key === "Escape") editingId = ""; }}
+                    ></textarea>
+                    <div class="edit-actions">
+                      <button class="edit-save" onclick={commitEdit}><Check size={12} weight="bold" /> Save</button>
+                      <button class="edit-cancel" onclick={() => editingId = ""}>Cancel</button>
+                    </div>
+                  </div>
+                {:else}
+                  <button class="marker-jump" onclick={() => jumpToMarker(m)}>
+                    <span class="page-label">p.{m.pageNumber}</span>
+                    {#if m.note}
+                      <span class="marker-note">{m.note}</span>
+                    {:else}
+                      <span class="marker-note marker-note-empty">No note</span>
+                    {/if}
+                    <span class="marker-date">{formatDate(m.updatedAt ?? m.createdAt)}</span>
+                  </button>
+                  <div class="marker-actions">
+                    <button class="marker-action-btn" onclick={() => startEdit(m)} title="Edit"><PencilSimple size={11} weight="light" /></button>
+                    <button class="marker-action-btn danger" onclick={() => removeMarker(m.id)} title="Delete"><Trash size={11} weight="light" /></button>
+                  </div>
+                {/if}
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/each}
+    {/if}
+  </div>
 </div>
 
 <style>
-  .stub-panel  { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; min-width: 240px; }
-  .stub-close  { align-self: flex-end; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
-  .stub-label  { color: var(--text-faint); font-size: var(--text-sm); }
+  .panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
+
+  .panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
+  .panel-title { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-muted); }
+  .count { background: var(--bg-overlay); border: 1px solid var(--border-dim); border-radius: var(--radius-full); font-size: var(--text-2xs); padding: 0 5px; color: var(--text-faint); }
+  .close-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-sm); color: var(--text-faint); background: none; border: none; cursor: pointer; transition: color var(--t-base), background var(--t-base); }
+  .close-btn:hover { color: var(--text-muted); background: var(--bg-raised); }
+
+  .panel-body { flex: 1; overflow-y: auto; padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); }
+
+  .empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-4); text-align: center; }
+  .empty p { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .empty-sub { font-size: var(--text-2xs) !important; opacity: 0.7; max-width: 180px; line-height: var(--leading-snug); }
+
+  .group { display: flex; flex-direction: column; gap: 2px; }
+  .group-header { display: flex; align-items: center; justify-content: space-between; padding: 6px var(--sp-2) 4px; }
+  .group-name { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .group-count { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); opacity: 0.6; flex-shrink: 0; }
+
+  .marker-row { display: flex; align-items: flex-start; gap: var(--sp-2); padding: 5px var(--sp-2); border-radius: var(--radius-md); transition: background var(--t-fast); }
+  .marker-row:hover { background: var(--bg-raised); }
+  .marker-row.editing { background: var(--bg-raised); }
+  .marker-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
+
+  .marker-body { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--sp-1); }
+  .marker-jump { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: none; padding: 0; cursor: pointer; }
+  .page-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--accent-fg); letter-spacing: var(--tracking-wide); }
+  .marker-note { font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-snug); white-space: pre-wrap; word-break: break-word; }
+  .marker-note-empty { color: var(--text-faint); font-style: italic; }
+  .marker-date { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+
+  .marker-actions { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity var(--t-fast); }
+  .marker-row:hover .marker-actions { opacity: 1; }
+  .marker-action-btn { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-sm); color: var(--text-faint); background: none; border: none; cursor: pointer; transition: color var(--t-base), background var(--t-base); }
+  .marker-action-btn:hover { color: var(--text-muted); background: var(--bg-overlay); }
+  .marker-action-btn.danger:hover { color: var(--color-error); background: var(--color-error-bg); }
+
+  .edit-wrap { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
+  .color-row { display: flex; gap: 5px; }
+  .color-swatch { width: 14px; height: 14px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: border-color var(--t-fast), transform var(--t-fast); flex-shrink: 0; }
+  .color-swatch:hover { transform: scale(1.15); }
+  .color-active { border-color: var(--text-primary) !important; }
+  .edit-input { width: 100%; background: var(--bg-overlay); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 6px 8px; font-size: var(--text-xs); color: var(--text-secondary); outline: none; resize: none; font-family: inherit; line-height: var(--leading-snug); transition: border-color var(--t-base); }
+  .edit-input:focus { border-color: var(--border-focus); }
+  .edit-actions { display: flex; align-items: center; gap: var(--sp-2); }
+  .edit-save { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--accent-dim); background: var(--accent-muted); color: var(--accent-fg); font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); cursor: pointer; transition: filter var(--t-fast); }
+  .edit-save:hover { filter: brightness(1.15); }
+  .edit-cancel { padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); cursor: pointer; transition: color var(--t-base), border-color var(--t-base); }
+  .edit-cancel:hover { color: var(--text-muted); border-color: var(--border-strong); }
 </style>