mirror of
https://github.com/moku-project/Moku.git
synced 2026-06-13 01:09:56 -05:00
Feat: Home Re-Design & MacOS Detection Fix
This commit is contained in:
Youwes09
@@ -8,7 +8,6 @@ Minor Revisions:
|
||||
- Look at how Manga are Organized in WebUI and Implement into Series-Detail (Chapter Display is Off)
|
||||
|
||||
|
||||
|
||||
Priority Bugs:
|
||||
- Fix Library-Refresh System (TESTING)
|
||||
|
||||
@@ -16,17 +15,6 @@ Priority Bugs:
|
||||
- Allow User to Wipe Suwayomi (Scratch)
|
||||
- If Possible, Component based Wipe (Library, Etc)
|
||||
|
||||
- Remove RecentActivity from Home & Replace with Library Tag Filtering + Discover
|
||||
- Add Item-Detection for Updates, hence when Updates = 0 replace with RecentActivity (Layout Same).
|
||||
- ActivityHeatmap (Like Github), but for Moku.
|
||||
|
||||
General/Misc Bugs:
|
||||
- Fix Highlightable Elements
|
||||
- Investigate "egl:failed to create dri2 screen"
|
||||
- Check Fonts/Design on Flatpak
|
||||
- Fix Delete-All Crash (Deletes All but Cripples App)
|
||||
- Investigate Prod vs. Dev Directory Change/Data Load (Caused by Library Algorithm Revision?)
|
||||
|
||||
|
||||
In-Progress:
|
||||
- Enable Cloudflare Bypass (Suwayomi Config) (Requires Patching)
|
||||
@@ -49,7 +37,7 @@ In-Progress:
|
||||
- Tracking Revamp
|
||||
- Completely Revamp Tracking
|
||||
|
||||
- Fix ALl Folder Tabs (Works in Dev, not Prod)
|
||||
- Fix ALl Folder Tabs (Works in Dev, not Prod) (TESTING)
|
||||
- Extensions
|
||||
- Library
|
||||
- Search
|
||||
@@ -57,6 +45,18 @@ In-Progress:
|
||||
- Fix Tracking Login
|
||||
- Pasting OAuth URL is not User-Friendly, Look for Alternatives
|
||||
|
||||
- Fix Home Layout & Scaling
|
||||
- Layout constrains UI, Hero-Card Disappears?
|
||||
- Home Layout itself is currently off.
|
||||
- Add Updates Substitute, Derived from One Source + Genre Tags (Check Library for Tags)
|
||||
- ActivityHeatmap needs Proper Constraints for Month Namescd
|
||||
|
||||
- MacOS Fixes
|
||||
- Revamp Server-State Check (MacOS does not pick up)
|
||||
- Check Moku Sidebar Icon (Looks ugly on MacOS)
|
||||
- Icon appears as a Square
|
||||
- Icon appears to have Green Underglow?
|
||||
|
||||
|
||||
Testing Bugs:
|
||||
- Reader Zoom does not work (Dropdown Slider, Value Adjustment); Goes to NaN
|
||||
|
||||
+2
-2
@@ -58,7 +58,7 @@ export async function probeServer(): Promise<"ok" | "auth_required" | "unsupport
|
||||
const res = await fetch(`${base}/api/graphql`, {
|
||||
method: "POST", credentials: "omit", headers,
|
||||
body: JSON.stringify({ query: "{ __typename }" }),
|
||||
signal: AbortSignal.timeout(2000),
|
||||
signal: AbortSignal.timeout(5000),
|
||||
});
|
||||
if (res.ok) return "ok";
|
||||
if (res.status === 401) {
|
||||
@@ -76,4 +76,4 @@ export async function probeServer(): Promise<"ok" | "auth_required" | "unsupport
|
||||
}
|
||||
return "unreachable";
|
||||
} catch { return "unreachable"; }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,281 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
dailyReadCounts,
|
||||
}: {
|
||||
dailyReadCounts: Record<string, number>;
|
||||
} = $props();
|
||||
|
||||
function intensity(count: number): 0 | 1 | 2 | 3 | 4 {
|
||||
if (count === 0) return 0;
|
||||
if (count === 1) return 1;
|
||||
if (count <= 3) return 2;
|
||||
if (count <= 6) return 3;
|
||||
return 4;
|
||||
}
|
||||
|
||||
let tip: { text: string; x: number; y: number } | null = $state(null);
|
||||
|
||||
function showTip(e: MouseEvent, cell: { dateStr: string; count: number }) {
|
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||
const label = cell.count === 0
|
||||
? `No chapters — ${fmtDate(cell.dateStr)}`
|
||||
: `${cell.count} chapter${cell.count !== 1 ? "s" : ""} — ${fmtDate(cell.dateStr)}`;
|
||||
tip = { text: label, x: rect.left + rect.width / 2, y: rect.top - 6 };
|
||||
}
|
||||
|
||||
function hideTip() { tip = null; }
|
||||
|
||||
function fmtDate(d: string): string {
|
||||
return new Date(d + "T00:00:00").toLocaleDateString("en-US", { month: "short", day: "numeric" });
|
||||
}
|
||||
|
||||
let wrapEl: HTMLElement;
|
||||
let cellSize = $state(12);
|
||||
let numWeeks = $state(26);
|
||||
|
||||
const GAP = 3;
|
||||
const DAY_GUTTER = 28;
|
||||
const LEGEND_H = 20;
|
||||
const MONTH_H = 14;
|
||||
const ROWS = 7;
|
||||
|
||||
$effect(() => {
|
||||
if (!wrapEl) return;
|
||||
const obs = new ResizeObserver(() => {
|
||||
const h = wrapEl.clientHeight;
|
||||
const w = wrapEl.clientWidth;
|
||||
const cs = Math.max(8, Math.floor((h - LEGEND_H - MONTH_H - 2 * GAP - (ROWS - 1) * GAP) / ROWS));
|
||||
cellSize = cs;
|
||||
numWeeks = Math.max(4, Math.floor((w - DAY_GUTTER - GAP * 3) / (cs + GAP)));
|
||||
});
|
||||
obs.observe(wrapEl);
|
||||
return () => obs.disconnect();
|
||||
});
|
||||
|
||||
const visibleWeeks = $derived((() => {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const todayStr = today.toISOString().slice(0, 10);
|
||||
const endDow = today.getDay(); // 0=Sun ... 6=Sat
|
||||
const weekEnd = new Date(today);
|
||||
weekEnd.setDate(weekEnd.getDate() + (6 - endDow)); // advance to Saturday
|
||||
|
||||
const weeks: { dateStr: string; count: number; isToday: boolean; isFuture: boolean }[][] = [];
|
||||
for (let wi = numWeeks - 1; wi >= 0; wi--) {
|
||||
const week: typeof weeks[0] = [];
|
||||
for (let di = 0; di < 7; di++) {
|
||||
const d = new Date(weekEnd);
|
||||
d.setDate(d.getDate() - wi * 7 - (6 - di));
|
||||
const dateStr = d.toISOString().slice(0, 10);
|
||||
week.push({ dateStr, count: dailyReadCounts[dateStr] ?? 0, isToday: dateStr === todayStr, isFuture: d > today });
|
||||
}
|
||||
weeks.push(week);
|
||||
}
|
||||
return weeks;
|
||||
})());
|
||||
|
||||
const monthLabels = $derived((() => {
|
||||
const labels: { label: string; colIndex: number }[] = [];
|
||||
let lastMonth = -1;
|
||||
visibleWeeks.forEach((week, ci) => {
|
||||
const first = week[0];
|
||||
if (!first) return;
|
||||
const m = new Date(first.dateStr + "T00:00:00").getMonth();
|
||||
if (m !== lastMonth) {
|
||||
labels.push({ label: new Date(first.dateStr + "T00:00:00").toLocaleDateString("en-US", { month: "short" }), colIndex: ci });
|
||||
lastMonth = m;
|
||||
}
|
||||
});
|
||||
return labels;
|
||||
})());
|
||||
|
||||
const DAY_LABELS = ["Sun", "", "Tue", "", "Thu", "", "Sat"];
|
||||
</script>
|
||||
|
||||
<div class="heatmap-wrap" bind:this={wrapEl} style="--cell:{cellSize}px; --cols:{numWeeks};">
|
||||
|
||||
<div class="month-row">
|
||||
<div class="day-gutter"></div>
|
||||
<div class="month-cells">
|
||||
{#each visibleWeeks as _week, ci}
|
||||
{@const lbl = monthLabels.find(l => l.colIndex === ci)}
|
||||
<div class="month-label">{lbl?.label ?? ""}</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-row">
|
||||
<div class="day-labels">
|
||||
{#each DAY_LABELS as d}
|
||||
<span class="day-label">{d}</span>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="cell-grid">
|
||||
{#each visibleWeeks as week}
|
||||
<div class="week-col">
|
||||
{#each week as cell}
|
||||
<!-- svelte-ignore a11y_mouse_events_have_key_events -->
|
||||
<button
|
||||
class="cell intensity-{intensity(cell.count)}"
|
||||
class:cell-today={cell.isToday}
|
||||
class:cell-future={cell.isFuture}
|
||||
onmouseover={(e) => showTip(e, cell)}
|
||||
onmouseleave={hideTip}
|
||||
aria-label="{cell.count} chapters on {cell.dateStr}"
|
||||
></button>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<span class="legend-label">Less</span>
|
||||
{#each [0, 1, 2, 3, 4] as lvl}
|
||||
<div class="legend-cell intensity-{lvl}"></div>
|
||||
{/each}
|
||||
<span class="legend-label">More</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{#if tip}
|
||||
<div class="heatmap-tip" style="left:{tip.x}px; top:{tip.y}px;">{tip.text}</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.heatmap-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.month-row {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.day-gutter { width: 28px; flex-shrink: 0; }
|
||||
.month-cells {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--cols), var(--cell));
|
||||
gap: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.month-label {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 9px;
|
||||
color: var(--text-faint);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
padding-left: 1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: flex-start;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.day-labels {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
flex-shrink: 0;
|
||||
width: 28px;
|
||||
}
|
||||
.day-label {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 8px;
|
||||
color: var(--text-faint);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
height: var(--cell);
|
||||
line-height: var(--cell);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.cell-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--cols), var(--cell));
|
||||
gap: 3px;
|
||||
overflow: visible;
|
||||
padding: 4px;
|
||||
margin: -4px;
|
||||
}
|
||||
.week-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.cell {
|
||||
width: var(--cell);
|
||||
height: var(--cell);
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: filter var(--t-fast), transform var(--t-fast);
|
||||
}
|
||||
.cell:hover:not(.cell-future) {
|
||||
filter: brightness(1.5);
|
||||
transform: scale(1.2);
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.intensity-0 { background: var(--bg-subtle); border: 1px solid var(--border-dim); }
|
||||
.intensity-1 { background: var(--accent-muted); border: 1px solid var(--accent-dim); }
|
||||
.intensity-2 { background: var(--accent-dim); border: 1px solid var(--accent); opacity: 0.7; }
|
||||
.intensity-3 { background: var(--accent); border: 1px solid var(--accent-bright); opacity: 0.85; }
|
||||
.intensity-4 { background: var(--accent-bright); border: 1px solid var(--accent-fg); }
|
||||
|
||||
.cell-today { outline: 1.5px solid var(--accent-fg); outline-offset: 1px; }
|
||||
.cell-future { opacity: 0.2; cursor: default; pointer-events: none; }
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.legend-cell {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.legend-label {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 9px;
|
||||
color: var(--text-faint);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
|
||||
.heatmap-tip {
|
||||
position: fixed;
|
||||
transform: translate(-50%, -100%);
|
||||
background: var(--bg-overlay);
|
||||
border: 1px solid var(--border-base);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 4px 8px;
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-2xs);
|
||||
color: var(--text-secondary);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
@@ -12,7 +12,8 @@
|
||||
import HeroStage from "./HeroStage.svelte";
|
||||
import HeroSlotPicker from "./HeroSlotPicker.svelte";
|
||||
import ActivityFeed from "./ActivityFeed.svelte";
|
||||
import UpdatesRow from "./UpdatesRow.svelte";
|
||||
import ActivityHeatmap from "./ActivityHeatmap.svelte";
|
||||
import RecsRow from "./RecsRow.svelte";
|
||||
import StatsGrid from "./StatsGrid.svelte";
|
||||
|
||||
let libraryManga: Manga[] = $state([]);
|
||||
@@ -223,44 +224,59 @@
|
||||
<div class="root">
|
||||
<div class="body">
|
||||
|
||||
<HeroStage
|
||||
{resolvedSlots}
|
||||
bind:activeIdx
|
||||
{heroThumb}
|
||||
{heroTitle}
|
||||
{heroManga}
|
||||
{heroEntry}
|
||||
{heroMangaId}
|
||||
{heroChapters}
|
||||
{loadingHeroChapters}
|
||||
{resuming}
|
||||
onresume={resumeActive}
|
||||
onopenchapter={openChapter}
|
||||
oncyclenext={cycleNext}
|
||||
oncycleprev={cyclePrev}
|
||||
ongotoslot={goToSlot}
|
||||
onopenpicker={openPicker}
|
||||
onunpin={unpinSlot}
|
||||
onviewall={() => { if (heroManga) store.activeManga = heroManga; }}
|
||||
/>
|
||||
<div class="hero-shrink-guard">
|
||||
<HeroStage
|
||||
{resolvedSlots}
|
||||
bind:activeIdx
|
||||
{heroThumb}
|
||||
{heroTitle}
|
||||
{heroManga}
|
||||
{heroEntry}
|
||||
{heroMangaId}
|
||||
{heroChapters}
|
||||
{loadingHeroChapters}
|
||||
{resuming}
|
||||
onresume={resumeActive}
|
||||
onopenchapter={openChapter}
|
||||
oncyclenext={cycleNext}
|
||||
oncycleprev={cyclePrev}
|
||||
ongotoslot={goToSlot}
|
||||
onopenpicker={openPicker}
|
||||
onunpin={unpinSlot}
|
||||
onviewall={() => { if (heroManga) store.activeManga = heroManga; }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ActivityFeed
|
||||
entries={recentHistory}
|
||||
onresume={resumeEntry}
|
||||
onviewhistory={() => setNavPage("history")}
|
||||
onopenlibrary={() => setNavPage("library")}
|
||||
/>
|
||||
<div class="scroll-body">
|
||||
<div class="mid-row">
|
||||
<div class="mid-left">
|
||||
<ActivityFeed
|
||||
entries={recentHistory}
|
||||
onresume={resumeEntry}
|
||||
onviewhistory={() => setNavPage("history")}
|
||||
onopenlibrary={() => setNavPage("library")}
|
||||
/>
|
||||
</div>
|
||||
<div class="mid-divider"></div>
|
||||
<div class="mid-right">
|
||||
<RecsRow
|
||||
{libraryManga}
|
||||
history={store.history}
|
||||
onopenrecommended={(m) => { store.previewManga = m; }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-row">
|
||||
<UpdatesRow
|
||||
updates={libraryUpdates}
|
||||
{libraryManga}
|
||||
{lastRefresh}
|
||||
onopen={(m) => { if (m) store.previewManga = m; }}
|
||||
onclear={() => { clearLibraryUpdates(); setLibraryFilter("all"); setNavPage("library"); }}
|
||||
/>
|
||||
<div class="bottom-heatmap">
|
||||
<span class="bottom-label">Activity</span>
|
||||
<ActivityHeatmap dailyReadCounts={store.dailyReadCounts} />
|
||||
</div>
|
||||
<div class="bottom-divider"></div>
|
||||
<StatsGrid {stats} updateCount={libraryUpdates.length} />
|
||||
<div class="bottom-stats">
|
||||
<StatsGrid {stats} updateCount={libraryUpdates.length} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -288,19 +304,65 @@
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
.hero-shrink-guard { flex-shrink: 0; }
|
||||
.scroll-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
min-height: 0;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.scroll-body::-webkit-scrollbar { display: none; }
|
||||
|
||||
.mid-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1px 1.4fr;
|
||||
border-top: 1px solid var(--border-dim);
|
||||
flex-shrink: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.mid-left {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* suppress ActivityFeed's own border-top — mid-row provides it */
|
||||
.mid-left :global(.section) { border-top: none; }
|
||||
.mid-divider { background: var(--border-dim); align-self: stretch; }
|
||||
.mid-right {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
padding: var(--sp-3) var(--sp-4) var(--sp-4);
|
||||
}
|
||||
|
||||
.bottom-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1px 1fr;
|
||||
padding: var(--sp-4) var(--sp-4) var(--sp-5);
|
||||
border-top: 1px solid var(--border-dim);
|
||||
gap: var(--sp-4);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bottom-divider { background: var(--border-dim); align-self: stretch; }
|
||||
.bottom-heatmap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-2);
|
||||
padding: var(--sp-4) var(--sp-4) var(--sp-5);
|
||||
min-width: 0;
|
||||
}
|
||||
.bottom-stats {
|
||||
padding: var(--sp-4) var(--sp-4) var(--sp-5);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bottom-label {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-2xs);
|
||||
color: var(--text-faint);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
|
||||
@@ -0,0 +1,244 @@
|
||||
<script lang="ts">
|
||||
import { ArrowLeft, ArrowRight, Sparkle } from "phosphor-svelte";
|
||||
import Thumbnail from "@shared/manga/Thumbnail.svelte";
|
||||
import type { Manga } from "@types";
|
||||
import type { HistoryEntry } from "@store/state.svelte";
|
||||
import { fetchRecommendations, topGenres } from "../lib/recommendations";
|
||||
import type { RecommendedManga } from "../lib/recommendations";
|
||||
|
||||
let {
|
||||
libraryManga,
|
||||
history,
|
||||
onopenrecommended,
|
||||
}: {
|
||||
libraryManga: Manga[];
|
||||
history: HistoryEntry[];
|
||||
onopenrecommended: (m: Manga) => void;
|
||||
} = $props();
|
||||
|
||||
const CARD_MIN_WIDTH = 100;
|
||||
const GAP = 12;
|
||||
const ROWS = 2;
|
||||
|
||||
let containerEl: HTMLDivElement | undefined = $state();
|
||||
let containerWidth = $state(0);
|
||||
|
||||
$effect(() => {
|
||||
if (!containerEl) return;
|
||||
const ro = new ResizeObserver(([entry]) => {
|
||||
containerWidth = entry.contentRect.width;
|
||||
});
|
||||
ro.observe(containerEl);
|
||||
return () => ro.disconnect();
|
||||
});
|
||||
|
||||
const cols = $derived(containerWidth > 0 ? Math.max(1, Math.floor((containerWidth + GAP) / (CARD_MIN_WIDTH + GAP))) : 6);
|
||||
const visibleCount = $derived(cols * ROWS);
|
||||
const gridStyle = $derived(`grid-template-columns: repeat(${cols}, 1fr);`);
|
||||
|
||||
let allRecs: RecommendedManga[] = $state([]);
|
||||
let loading = $state(false);
|
||||
let _ctrl: AbortController | null = null;
|
||||
|
||||
$effect(() => {
|
||||
const _history = history;
|
||||
const _library = libraryManga;
|
||||
if (!_history.length || !_library.length) { allRecs = []; return; }
|
||||
_ctrl?.abort();
|
||||
const ctrl = new AbortController();
|
||||
_ctrl = ctrl;
|
||||
loading = true;
|
||||
fetchRecommendations(_history, _library, ctrl.signal)
|
||||
.then(r => { if (!ctrl.signal.aborted) { allRecs = r; loading = false; } })
|
||||
.catch(() => { if (!ctrl.signal.aborted) loading = false; });
|
||||
});
|
||||
|
||||
const genres = $derived(topGenres(history, libraryManga));
|
||||
|
||||
let genreIdx = $state(0);
|
||||
|
||||
const activeGenre = $derived(genres[genreIdx] ?? null);
|
||||
|
||||
const visibleRecs = $derived(
|
||||
(activeGenre
|
||||
? allRecs.filter(r => r.matchedGenres.some(g => g.toLowerCase() === activeGenre.toLowerCase()))
|
||||
: allRecs
|
||||
).slice(0, visibleCount)
|
||||
);
|
||||
|
||||
function prev() { genreIdx = (genreIdx - 1 + genres.length) % genres.length; }
|
||||
function next() { genreIdx = (genreIdx + 1) % genres.length; }
|
||||
</script>
|
||||
|
||||
<div class="col">
|
||||
<div class="col-header">
|
||||
<span class="col-title">
|
||||
<Sparkle size={10} weight="bold" /> Recommended
|
||||
</span>
|
||||
{#if genres.length > 1}
|
||||
<div class="genre-switcher">
|
||||
<button class="nav-btn" onclick={prev}><ArrowLeft size={9} weight="bold" /></button>
|
||||
<span class="genre-label">{activeGenre}</span>
|
||||
<button class="nav-btn" onclick={next}><ArrowRight size={9} weight="bold" /></button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="grid-container" bind:this={containerEl}>
|
||||
{#if loading}
|
||||
<p class="empty-msg">Loading…</p>
|
||||
{:else if visibleRecs.length > 0}
|
||||
<div class="card-grid" style={gridStyle}>
|
||||
{#each visibleRecs as r (r.manga.id)}
|
||||
<button class="card" onclick={() => onopenrecommended(r.manga)}>
|
||||
<div class="card-cover-wrap">
|
||||
<Thumbnail src={r.manga.thumbnailUrl} alt={r.manga.title} class="card-cover" />
|
||||
<div class="card-gradient"></div>
|
||||
<div class="card-footer">
|
||||
<p class="card-title">{r.manga.title}</p>
|
||||
<p class="card-badge">{r.matchedGenres.slice(0, 2).join(" · ")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<p class="empty-msg">No recommendations found</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.col { display: flex; flex-direction: column; min-width: 0; height: 100%; }
|
||||
|
||||
.col-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: var(--sp-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.col-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-2xs);
|
||||
color: var(--text-faint);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.genre-switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
.genre-label {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-2xs);
|
||||
color: var(--text-faint);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase;
|
||||
min-width: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
color: var(--text-faint);
|
||||
transition: color var(--t-base);
|
||||
}
|
||||
.nav-btn:hover { color: var(--accent-fg); }
|
||||
|
||||
.grid-container {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, auto);
|
||||
grid-auto-rows: 0;
|
||||
overflow: hidden;
|
||||
gap: var(--sp-3);
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
.card:hover :global(.card-cover) { filter: brightness(1.1) saturate(1.05); transform: scale(1.02); }
|
||||
|
||||
.card-cover-wrap {
|
||||
position: relative;
|
||||
aspect-ratio: 2 / 3;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-raised);
|
||||
border: 1px solid var(--border-dim);
|
||||
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
:global(.card-cover) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: filter 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
.card-gradient {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.08) 55%, transparent 75%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.card-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--sp-2);
|
||||
pointer-events: none;
|
||||
}
|
||||
.card-title {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-medium);
|
||||
color: rgba(255,255,255,0.92);
|
||||
line-height: var(--leading-snug);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-shadow: 0 1px 4px rgba(0,0,0,0.7);
|
||||
}
|
||||
.card-badge {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 9px;
|
||||
color: rgba(255,255,255,0.45);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
margin-top: 1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.empty-msg {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-faint);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
padding: var(--sp-1) 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { Fire, BookOpen, Clock, TrendUp, Bell, CalendarBlank } from "phosphor-svelte";
|
||||
import { formatReadTime } from "../lib/homeHelpers";
|
||||
|
||||
let {
|
||||
stats,
|
||||
updateCount,
|
||||
@@ -129,4 +130,4 @@
|
||||
letter-spacing: var(--tracking-wide);
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -1,187 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Bell, ArrowRight } from "phosphor-svelte";
|
||||
import Thumbnail from "@shared/manga/Thumbnail.svelte";
|
||||
import type { Manga } from "@types";
|
||||
import { timeAgoRefresh, handleRowWheel } from "../lib/homeHelpers";
|
||||
|
||||
interface LibraryUpdate {
|
||||
mangaId: number;
|
||||
mangaTitle: string;
|
||||
thumbnailUrl: string;
|
||||
newChapters: number;
|
||||
}
|
||||
|
||||
let {
|
||||
updates,
|
||||
libraryManga,
|
||||
lastRefresh,
|
||||
onopen,
|
||||
onclear,
|
||||
}: {
|
||||
updates: LibraryUpdate[];
|
||||
libraryManga: Manga[];
|
||||
lastRefresh: number;
|
||||
onopen: (m: Manga | undefined) => void;
|
||||
onclear: () => void;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div class="col">
|
||||
<div class="col-header">
|
||||
<span class="col-title">
|
||||
<Bell size={10} weight="bold" /> Updates
|
||||
{#if lastRefresh}<span class="refresh-age">{timeAgoRefresh(lastRefresh)}</span>{/if}
|
||||
</span>
|
||||
{#if updates.length > 0}
|
||||
<button class="action-btn" onclick={onclear}>
|
||||
Clear <ArrowRight size={9} weight="bold" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if updates.length > 0}
|
||||
<div class="scroll-row" onwheel={(e) => { e.preventDefault(); handleRowWheel(e); }}>
|
||||
{#each updates as u (u.mangaId)}
|
||||
{@const m = libraryManga.find(x => x.id === u.mangaId)}
|
||||
<button class="card" onclick={() => onopen(m)}>
|
||||
<div class="card-cover-wrap">
|
||||
<Thumbnail src={u.thumbnailUrl} alt={u.mangaTitle} class="card-cover" />
|
||||
<div class="card-gradient"></div>
|
||||
<div class="card-footer">
|
||||
<p class="card-title">{u.mangaTitle}</p>
|
||||
<p class="card-badge">+{u.newChapters} chapter{u.newChapters !== 1 ? "s" : ""}</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<p class="empty-msg">{lastRefresh ? "No new chapters found" : "Check for updates in the library"}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.col { display: flex; flex-direction: column; min-width: 0; }
|
||||
|
||||
.col-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: var(--sp-2);
|
||||
}
|
||||
.col-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-2xs);
|
||||
color: var(--text-faint);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.refresh-age {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-2xs);
|
||||
color: var(--text-faint);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
margin-left: var(--sp-2);
|
||||
}
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase;
|
||||
color: var(--text-faint);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: color var(--t-base);
|
||||
}
|
||||
.action-btn:hover { color: var(--accent-fg); }
|
||||
|
||||
.scroll-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--sp-3);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: none;
|
||||
padding-bottom: var(--sp-1);
|
||||
}
|
||||
.scroll-row::-webkit-scrollbar { display: none; }
|
||||
|
||||
.card {
|
||||
flex: 0 0 112px;
|
||||
width: 112px;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
.card:hover :global(.card-cover) { filter: brightness(1.1) saturate(1.05); transform: scale(1.02); }
|
||||
|
||||
.card-cover-wrap {
|
||||
position: relative;
|
||||
aspect-ratio: 2 / 3;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-raised);
|
||||
border: 1px solid var(--border-dim);
|
||||
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
:global(.card-cover) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: filter 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
.card-gradient {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.08) 55%, transparent 75%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.card-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--sp-2);
|
||||
pointer-events: none;
|
||||
}
|
||||
.card-title {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-medium);
|
||||
color: rgba(255,255,255,0.92);
|
||||
line-height: var(--leading-snug);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-shadow: 0 1px 4px rgba(0,0,0,0.7);
|
||||
}
|
||||
.card-badge {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 9px;
|
||||
color: rgba(255,255,255,0.45);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
margin-top: 1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.empty-msg {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-faint);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
padding: var(--sp-1) 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
import { gql } from "@api/client";
|
||||
import { MANGAS_BY_GENRE } from "@api/queries/manga";
|
||||
import { buildTagFilter } from "@features/discover/lib/searchFilter";
|
||||
import type { Manga } from "@types";
|
||||
import type { HistoryEntry } from "@store/state.svelte";
|
||||
|
||||
export interface RecommendedManga {
|
||||
manga: Manga;
|
||||
matchedGenres: string[];
|
||||
}
|
||||
|
||||
const TOP_GENRES = 6;
|
||||
const PAGE_SIZE = 100;
|
||||
const MAX_PAGES = 5;
|
||||
|
||||
export function topGenres(history: HistoryEntry[], libraryManga: Manga[]): string[] {
|
||||
const byId = new Map(libraryManga.map(m => [m.id, m]));
|
||||
const tally = new Map<string, { count: number; original: string }>();
|
||||
|
||||
for (const entry of history) {
|
||||
const manga = byId.get(entry.mangaId);
|
||||
if (!manga?.genre?.length) continue;
|
||||
for (const g of manga.genre) {
|
||||
const key = g.toLowerCase();
|
||||
const existing = tally.get(key);
|
||||
if (existing) { existing.count++; }
|
||||
else { tally.set(key, { count: 1, original: g }); }
|
||||
}
|
||||
}
|
||||
|
||||
return [...tally.values()]
|
||||
.sort((a, b) => b.count - a.count)
|
||||
.slice(0, TOP_GENRES)
|
||||
.map(e => e.original);
|
||||
}
|
||||
|
||||
type Result = { mangas: { nodes: Manga[] } };
|
||||
|
||||
async function fetchGenrePages(genre: string, signal?: AbortSignal): Promise<Manga[]> {
|
||||
const filter = {
|
||||
and: [
|
||||
buildTagFilter([genre], "OR", []),
|
||||
{ inLibrary: { equalTo: false } },
|
||||
],
|
||||
};
|
||||
|
||||
const pages = await Promise.all(
|
||||
Array.from({ length: MAX_PAGES }, (_, i) =>
|
||||
gql<Result>(MANGAS_BY_GENRE, { filter, first: PAGE_SIZE, offset: i * PAGE_SIZE }, signal)
|
||||
.then(d => d.mangas.nodes)
|
||||
.catch(() => [] as Manga[])
|
||||
)
|
||||
);
|
||||
|
||||
const seen = new Set<number>();
|
||||
const nodes: Manga[] = [];
|
||||
for (const page of pages) {
|
||||
if (!page.length) break;
|
||||
for (const m of page) {
|
||||
if (!seen.has(m.id)) { seen.add(m.id); nodes.push(m); }
|
||||
}
|
||||
if (page.length < PAGE_SIZE) break;
|
||||
}
|
||||
return nodes;
|
||||
}
|
||||
|
||||
export async function fetchRecommendations(
|
||||
history: HistoryEntry[],
|
||||
libraryManga: Manga[],
|
||||
signal?: AbortSignal,
|
||||
): Promise<RecommendedManga[]> {
|
||||
if (!history.length || !libraryManga.length) return [];
|
||||
|
||||
const genres = topGenres(history, libraryManga);
|
||||
if (!genres.length) return [];
|
||||
|
||||
const perGenre = await Promise.all(genres.map(g => fetchGenrePages(g, signal)));
|
||||
|
||||
const seen = new Set<number>();
|
||||
const merged: Manga[] = [];
|
||||
for (const page of perGenre) {
|
||||
for (const m of page) {
|
||||
if (!seen.has(m.id)) { seen.add(m.id); merged.push(m); }
|
||||
}
|
||||
}
|
||||
|
||||
return merged.map(m => ({
|
||||
manga: m,
|
||||
matchedGenres: (m.genre ?? []).filter(g =>
|
||||
genres.some(tg => tg.toLowerCase() === g.toLowerCase())
|
||||
),
|
||||
}));
|
||||
}
|
||||
@@ -66,14 +66,14 @@
|
||||
<div class="slider-thumb" style="left:{sliderPct}%"></div>
|
||||
|
||||
{#if currentBookmark && currentBookmark.chapterId === displayChapter?.id}
|
||||
{@const bOrd = rtl ? lastPage - currentBookmark.pageNumber + 1 : currentBookmark.pageNumber}
|
||||
{@const bPct = lastPage > 1 ? ((bOrd - 1) / (lastPage - 1)) * 100 : 0}
|
||||
{@const bOrd = rtl ? sliderMax - currentBookmark.pageNumber + 1 : currentBookmark.pageNumber}
|
||||
{@const bPct = sliderMax > 1 ? ((bOrd - 1) / (sliderMax - 1)) * 100 : 0}
|
||||
<div class="slider-checkpoint bookmark-checkpoint" style="left:{bPct}%" title="Bookmark: Page {currentBookmark.pageNumber}"></div>
|
||||
{/if}
|
||||
|
||||
{#each activeChapterMarkers as m (m.id)}
|
||||
{@const mOrd = rtl ? lastPage - m.pageNumber + 1 : m.pageNumber}
|
||||
{@const mPct = lastPage > 1 ? ((mOrd - 1) / (lastPage - 1)) * 100 : 0}
|
||||
{@const mOrd = rtl ? sliderMax - m.pageNumber + 1 : m.pageNumber}
|
||||
{@const mPct = sliderMax > 1 ? ((mOrd - 1) / (sliderMax - 1)) * 100 : 0}
|
||||
<div class="slider-checkpoint marker-checkpoint" style="left:{mPct}%;background:{MARKER_COLOR_HEX[m.color]}" title="{m.note ? m.note : 'Marker'} · Page {m.pageNumber}"></div>
|
||||
{/each}
|
||||
|
||||
|
||||
@@ -113,7 +113,11 @@
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (!ringFull) return;
|
||||
if (!ringFull) {
|
||||
exitLock = false;
|
||||
exiting = false;
|
||||
return;
|
||||
}
|
||||
cancelAnimationFrame(animFrame);
|
||||
ringProg = 1;
|
||||
if (lockEnabled && !pinUnlocked) {
|
||||
@@ -163,8 +167,6 @@
|
||||
return () => clearInterval(dotsInterval);
|
||||
});
|
||||
|
||||
// ── Canvas card animation ─────────────────────────────────────────────────
|
||||
|
||||
interface CardDef { cx: number; w: number; h: number; lines: number; alpha: number; speed: number; cycleSec: number; phase: number; travel: number; yStart: number; angleStart: number; tilt: number; }
|
||||
interface CardTrig { cosA: number; sinA: number; tiltRad: number; }
|
||||
interface RenderState { cards: CardDef[]; trigs: CardTrig[]; stamps: HTMLCanvasElement[]; vignette: HTMLCanvasElement; CW: number; CH: number; scale: number; }
|
||||
@@ -177,7 +179,6 @@
|
||||
|
||||
const BUF = 80, COLS = 14;
|
||||
|
||||
// Deterministic per-index hash — no random(), same layout every mount
|
||||
function hash(n: number): number {
|
||||
let x = Math.imul(n ^ (n >>> 16), 0x45d9f3b);
|
||||
x = Math.imul(x ^ (x >>> 16), 0x45d9f3b);
|
||||
@@ -275,7 +276,6 @@
|
||||
for (let i = 0; i < cards.length; i++) {
|
||||
const c = cards[i];
|
||||
const p = ((t / c.cycleSec) + c.phase) % 1;
|
||||
// Fade in at entry, fade out at exit
|
||||
const alpha = p < 0.07 ? (p / 0.07) * c.alpha : p > 0.86 ? ((1 - p) / 0.14) * c.alpha : c.alpha;
|
||||
if (alpha < 0.005) continue;
|
||||
const cy = c.yStart - p * c.travel;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { store } from "@store/state.svelte";
|
||||
import { probeServer, loginBasic } from "@core/auth";
|
||||
|
||||
const MAX_ATTEMPTS = 10;
|
||||
const MAX_ATTEMPTS = 40;
|
||||
|
||||
export const boot = $state({
|
||||
serverProbeOk: false,
|
||||
@@ -15,20 +15,20 @@ export const boot = $state({
|
||||
loginBusy: false,
|
||||
});
|
||||
|
||||
let cancelProbe = false;
|
||||
let probeGeneration = 0;
|
||||
|
||||
export function startProbe() {
|
||||
cancelProbe = false;
|
||||
const gen = ++probeGeneration;
|
||||
boot.failed = false;
|
||||
boot.loginRequired = false;
|
||||
boot.unsupportedMode = false;
|
||||
let tries = 0;
|
||||
|
||||
async function probe() {
|
||||
if (cancelProbe) return;
|
||||
if (gen !== probeGeneration) return;
|
||||
tries++;
|
||||
const result = await probeServer();
|
||||
if (cancelProbe) return;
|
||||
if (gen !== probeGeneration) return;
|
||||
|
||||
if (result === "ok") {
|
||||
boot.serverProbeOk = true;
|
||||
@@ -59,14 +59,15 @@ export function startProbe() {
|
||||
}
|
||||
|
||||
if (tries >= MAX_ATTEMPTS) { boot.failed = true; return; }
|
||||
setTimeout(probe, 750);
|
||||
const delay = Math.min(750 + tries * 250, 3000);
|
||||
setTimeout(probe, delay);
|
||||
}
|
||||
|
||||
setTimeout(probe, 800);
|
||||
setTimeout(probe, 2000);
|
||||
}
|
||||
|
||||
export function stopProbe() {
|
||||
cancelProbe = true;
|
||||
probeGeneration++;
|
||||
}
|
||||
|
||||
export async function submitLogin(onSuccess: () => void) {
|
||||
@@ -99,7 +100,7 @@ export function retryBoot() {
|
||||
}
|
||||
|
||||
export function bypassBoot(onReady: () => void) {
|
||||
cancelProbe = true;
|
||||
probeGeneration++;
|
||||
boot.serverProbeOk = true;
|
||||
boot.loginRequired = false;
|
||||
boot.unsupportedMode = false;
|
||||
|
||||
@@ -224,6 +224,7 @@ class Store {
|
||||
markers: MarkerEntry[] = $state(saved?.markers ?? []);
|
||||
readLog: ReadLogEntry[] = $state(saved?.readLog ?? []);
|
||||
readingStats: ReadingStats = $state(saved?.readingStats ?? { ...DEFAULT_READING_STATS });
|
||||
dailyReadCounts: Record<string, number> = $state(saved?.dailyReadCounts ?? {});
|
||||
searchCache: Map<string, any> = $state(new Map());
|
||||
searchLibraryIds: Set<number> = $state(new Set());
|
||||
searchSrcOffset: number = $state(0);
|
||||
@@ -250,6 +251,7 @@ class Store {
|
||||
settings: this.settings, history: this.history,
|
||||
bookmarks: this.bookmarks, markers: this.markers,
|
||||
readLog: this.readLog, readingStats: this.readingStats,
|
||||
dailyReadCounts: this.dailyReadCounts,
|
||||
libraryUpdates: this.libraryUpdates,
|
||||
lastLibraryRefresh: this.lastLibraryRefresh,
|
||||
acknowledgedUpdateIds: [...this.acknowledgedUpdates],
|
||||
@@ -288,6 +290,8 @@ class Store {
|
||||
lastReadAt: entry.readAt, currentStreakDays: streak,
|
||||
longestStreakDays: Math.max(this.readingStats.longestStreakDays, streak), lastStreakDate: todayStr,
|
||||
};
|
||||
const dayKey = new Date().toISOString().slice(0, 10);
|
||||
this.dailyReadCounts = { ...this.dailyReadCounts, [dayKey]: (this.dailyReadCounts[dayKey] ?? 0) + 1 };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -314,7 +318,7 @@ class Store {
|
||||
getMarkersForChapter(chapterId: number) { return this.markers.filter(m => m.chapterId === chapterId); }
|
||||
getMarkersForManga(mangaId: number) { return this.markers.filter(m => m.mangaId === mangaId); }
|
||||
clearMarkersForManga(mangaId: number) { this.markers = this.markers.filter(m => m.mangaId !== mangaId); }
|
||||
clearHistory() { this.history = []; this.readLog = []; }
|
||||
clearHistory() { this.history = []; this.readLog = []; this.dailyReadCounts = {}; }
|
||||
|
||||
clearHistoryForManga(mangaId: number) {
|
||||
this.history = this.history.filter(x => x.mangaId !== mangaId);
|
||||
@@ -329,6 +333,7 @@ class Store {
|
||||
|
||||
wipeAllData() {
|
||||
this.history = []; this.readLog = []; this.markers = [];
|
||||
this.dailyReadCounts = {};
|
||||
this.readingStats = { ...DEFAULT_READING_STATS };
|
||||
this.settings = { ...this.settings, heroSlots: [null, null, null, null], mangaLinks: {} };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user