gamezonline/Moku
1
0
Fork 0
mirror of https://github.com/moku-project/Moku.git synced 2026-06-13 09:19:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Completed Splash-Screen & Iniital Tauri Wire-Up

Browse Source
This commit is contained in:
Youwes09
2026-06-02 08:27:37 -05:00
parent c5243ba30c
commit 18027baee1
45 changed files with 2981 additions and 2013 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_old/features/home/components/ActivityFeed.svelte
+45 -93
View File
@@ -1,9 +1,10 @@
<script lang="ts">
import { Play, ArrowRight, BookOpen, Clock } from "phosphor-svelte";
import Thumbnail from "@shared/manga/Thumbnail.svelte";
import type { HistoryEntry } from "@store/state.svelte";
import type { Manga } from "@types";
import { timeAgo } from "../lib/homeHelpers";
import { Play, ArrowRight, BookOpen, Clock } from 'phosphor-svelte'
import { timeAgo } from '$lib/components/home/homeHelpers'
import Thumbnail from '$lib/components/shared/manga/Thumbnail.svelte'
import { resolvedCover } from '$lib/core/cover/coverResolver'
import type { Manga } from '$lib/types'
import type { ReadSession } from '$lib/types/history'
let {
entries,
@@ -12,15 +13,15 @@
onviewhistory,
onopenlibrary,
}: {
entries: HistoryEntry[];
libraryManga: Manga[];
onresume: (entry: HistoryEntry) => void;
onviewhistory: () => void;
onopenlibrary: () => void;
} = $props();
entries: ReadSession[]
libraryManga: Manga[]
onresume: (entry: ReadSession) => void
onviewhistory: () => void
onopenlibrary: () => void
} = $props()
function thumbFor(entry: HistoryEntry): string {
return libraryManga.find(m => m.id === entry.mangaId)?.thumbnailUrl ?? entry.thumbnailUrl ?? "";
function coverFor(entry: ReadSession): string {
return libraryManga.find(m => m.id === entry.mangaId)?.thumbnailUrl ?? entry.thumbnailUrl ?? ''
}
</script>
@@ -36,16 +37,16 @@
<div class="list">
{#if entries.length > 0}
{#each entries as entry (entry.chapterId)}
{#each entries as entry (entry.id)}
<button class="row" onclick={() => onresume(entry)}>
<Thumbnail src={thumbFor(entry)} alt={entry.mangaTitle} class="row-thumb" />
<Thumbnail src={resolvedCover(entry.mangaId, coverFor(entry))} alt={entry.mangaTitle} class="row-thumb" />
<div class="row-info">
<span class="row-title">{entry.mangaTitle}</span>
<span class="row-sub">
{entry.chapterName}{entry.pageNumber > 1 ? ` · p.${entry.pageNumber}` : ""}
{entry.endChapterName}{entry.endPage > 1 ? ` · p.${entry.endPage}` : ''}
</span>
</div>
<span class="row-time">{timeAgo(entry.readAt)}</span>
<span class="row-time">{timeAgo(entry.endedAt)}</span>
<span class="row-play"><Play size={10} weight="fill" /></span>
</button>
{/each}
@@ -75,34 +76,19 @@
.section { border-top: 1px solid var(--border-dim); flex-shrink: 0; }
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
display: flex; align-items: center; justify-content: space-between;
padding: var(--sp-3) var(--sp-4) var(--sp-2);
}
.section-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;
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;
}
.see-all {
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;
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);
}
.see-all:hover { color: var(--accent-fg); }
@@ -110,54 +96,31 @@
.list { display: flex; flex-direction: column; padding: 0 var(--sp-3); overflow: hidden; }
.row {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 7px var(--sp-2);
border-radius: var(--radius-md);
border: 1px solid transparent;
background: none;
text-align: left;
cursor: pointer;
width: 100%;
display: flex; align-items: center; gap: var(--sp-3);
padding: 7px var(--sp-2); border-radius: var(--radius-md);
border: 1px solid transparent; background: none;
text-align: left; cursor: pointer; width: 100%;
transition: background var(--t-fast), border-color var(--t-fast);
}
.row:hover { background: var(--bg-raised); border-color: var(--border-dim); }
.row:hover .row-play { opacity: 1; }
:global(.row-thumb) {
width: 33px;
height: 48px;
border-radius: var(--radius-sm);
object-fit: cover;
flex-shrink: 0;
border: 1px solid var(--border-dim);
width: 33px; height: 48px; border-radius: var(--radius-sm);
object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-dim);
}
.row-info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-width: 0; }
.row-title {
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-secondary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-sub {
font-family: var(--font-ui);
font-size: var(--text-sm);
color: var(--text-muted);
letter-spacing: var(--tracking-wide);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted);
letter-spacing: var(--tracking-wide); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-time {
font-family: var(--font-ui);
font-size: var(--text-sm);
color: var(--text-faint);
letter-spacing: var(--tracking-wide);
flex-shrink: 0;
font-family: var(--font-ui); font-size: var(--text-sm);
color: var(--text-faint); letter-spacing: var(--tracking-wide); flex-shrink: 0;
}
.row-play { color: var(--accent-fg); flex-shrink: 0; opacity: 0; transition: opacity var(--t-base); }
@@ -170,29 +133,18 @@
.placeholder { position: relative; }
.placeholder-overlay {
position: absolute;
left: 0; right: 0; top: 0; bottom: -1px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: var(--sp-4);
position: absolute; left: 0; right: 0; top: 0; bottom: -1px;
display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--sp-4);
pointer-events: none;
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 100%);
}
.placeholder-cta {
pointer-events: all;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: var(--text-xs);
letter-spacing: var(--tracking-wide);
padding: 7px 16px;
border-radius: var(--radius-full);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.13);
color: rgba(255,255,255,0.62);
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
padding: 7px 16px; border-radius: var(--radius-full);
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.13);
color: rgba(255,255,255,0.62); cursor: pointer;
transition: background var(--t-base), color var(--t-base);
}
.placeholder-cta:hover { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9); }