diff --git a/src/App.svelte b/src/App.svelte index 650cd75..ee8f501 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -11,13 +11,13 @@ import { store, addToast, setActiveDownloads, setSettingsOpen } from "./store/state.svelte"; import { initRpc, setIdle, clearReading, destroyRpc } from "./lib/discord"; import type { DownloadStatus, DownloadQueueItem } from "./lib/types"; - import Layout from "./components/layout/Layout.svelte"; + import Layout from "./components/chrome/Layout.svelte"; import Reader from "./components/reader/Reader.svelte"; import Settings from "./components/settings/Settings.svelte"; import ThemeEditor from "./components/settings/ThemeEditor.svelte"; - import TitleBar from "./components/layout/TitleBar.svelte"; - import Toaster from "./components/layout/Toaster.svelte"; - import SplashScreen from "./components/layout/SplashScreen.svelte"; + import TitleBar from "./components/chrome/TitleBar.svelte"; + import Toaster from "./components/chrome/Toaster.svelte"; + import SplashScreen from "./components/chrome/SplashScreen.svelte"; import MangaPreview from "./components/shared/MangaPreview.svelte"; let themeStyleEl: HTMLStyleElement | null = null; diff --git a/src/components/layout/Layout.svelte b/src/components/chrome/Layout.svelte similarity index 96% rename from src/components/layout/Layout.svelte rename to src/components/chrome/Layout.svelte index 235d1a8..7b19e39 100644 --- a/src/components/layout/Layout.svelte +++ b/src/components/chrome/Layout.svelte @@ -3,7 +3,7 @@ import Sidebar from "./Sidebar.svelte"; import Home from "../pages/Home.svelte"; import Library from "../pages/Library.svelte"; - import SeriesDetail from "../pages/SeriesDetail.svelte"; + import SeriesDetail from "../series/SeriesDetail.svelte"; import RecentActivity from "./RecentActivity.svelte"; import Search from "../pages/Search.svelte"; import Discover from "../pages/Discover.svelte"; diff --git a/src/components/layout/RecentActivity.svelte b/src/components/chrome/RecentActivity.svelte similarity index 100% rename from src/components/layout/RecentActivity.svelte rename to src/components/chrome/RecentActivity.svelte diff --git a/src/components/layout/Sidebar.svelte b/src/components/chrome/Sidebar.svelte similarity index 100% rename from src/components/layout/Sidebar.svelte rename to src/components/chrome/Sidebar.svelte diff --git a/src/components/layout/SplashScreen.svelte b/src/components/chrome/SplashScreen.svelte similarity index 100% rename from src/components/layout/SplashScreen.svelte rename to src/components/chrome/SplashScreen.svelte diff --git a/src/components/layout/TitleBar.svelte b/src/components/chrome/TitleBar.svelte similarity index 100% rename from src/components/layout/TitleBar.svelte rename to src/components/chrome/TitleBar.svelte diff --git a/src/components/layout/Toaster.svelte b/src/components/chrome/Toaster.svelte similarity index 64% rename from src/components/layout/Toaster.svelte rename to src/components/chrome/Toaster.svelte index 5418ef7..9fa678f 100644 --- a/src/components/layout/Toaster.svelte +++ b/src/components/chrome/Toaster.svelte @@ -2,13 +2,34 @@ import { store, dismissToast } from "../../store/state.svelte"; import type { Toast } from "../../store/state.svelte"; - const timers = new Map>(); + const EXIT_MS = 280; + const leaving = new Set(); + const timers = new Map>(); function schedule(t: Toast) { if (timers.has(t.id)) return; const dur = t.duration ?? 3500; if (dur === 0) return; - timers.set(t.id, setTimeout(() => dismissToast(t.id), dur)); + timers.set(t.id, setTimeout(() => dismiss(t.id), dur)); + } + + function dismiss(id: string) { + if (leaving.has(id)) return; + leaving.add(id); + if (timers.has(id)) { clearTimeout(timers.get(id)!); timers.delete(id); } + + const el = document.querySelector(`[data-toast-id="${id}"]`); + if (!el) { finalize(id); return; } + + const h = el.offsetHeight; + el.style.setProperty("--exit-h", `${h}px`); + el.classList.add("leaving"); + setTimeout(() => finalize(id), EXIT_MS); + } + + function finalize(id: string) { + leaving.delete(id); + dismissToast(id); } $effect(() => { @@ -27,7 +48,12 @@ {#if store.toasts.length}
{#each store.toasts as t (t.id)} - - {#if scanlators.length > 1} -
- - -
-
- Preferred scanlator - Prioritise this group's chapters in the list -
-
- - {#each scanlators as s} - - {/each} -
-
- {/if}
@@ -300,10 +266,6 @@ .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); } - /* Scanlator list */ - .scanlator-list { display: flex; flex-direction: row; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 220px; } - .scanlator-chip { max-width: 160px; overflow: hidden; text-overflow: ellipsis; } - - @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } +@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } } diff --git a/src/components/shared/MarkersPanel.svelte b/src/components/series/MarkersPanel.svelte similarity index 100% rename from src/components/shared/MarkersPanel.svelte rename to src/components/series/MarkersPanel.svelte diff --git a/src/components/pages/MigrateModal.svelte b/src/components/series/MigrateModal.svelte similarity index 100% rename from src/components/pages/MigrateModal.svelte rename to src/components/series/MigrateModal.svelte diff --git a/src/components/pages/SeriesDetail.svelte b/src/components/series/SeriesDetail.svelte similarity index 89% rename from src/components/pages/SeriesDetail.svelte rename to src/components/series/SeriesDetail.svelte index 27b7cd6..6d01adb 100644 --- a/src/components/pages/SeriesDetail.svelte +++ b/src/components/series/SeriesDetail.svelte @@ -1,6 +1,6 @@