mirror of
https://github.com/moku-project/Moku.git
synced 2026-06-13 01:09:56 -05:00
Hoist toolbar into Recent, add status bar, dim read chapters, split cover click
This commit is contained in:
Zerebos
@@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { ClockCounterClockwise, Trash, MagnifyingGlass, Books, Fire, BookOpen, Clock, TrendUp } from "phosphor-svelte";
|
||||
import { ClockCounterClockwise, Books, Fire, BookOpen, Clock, TrendUp } from "phosphor-svelte";
|
||||
import Thumbnail from "@shared/manga/Thumbnail.svelte";
|
||||
import { store, clearHistory, setPreviewManga } from "@store/state.svelte";
|
||||
import { store, setPreviewManga } from "@store/state.svelte";
|
||||
import { gql } from "@api/client";
|
||||
import { GET_LIBRARY } from "@api/queries/manga";
|
||||
import { cache, CACHE_KEYS } from "@core/cache";
|
||||
@@ -10,6 +10,13 @@
|
||||
import type { Manga } from "@types";
|
||||
import { timeAgo, dayLabel, formatReadTime } from "@core/util";
|
||||
|
||||
interface Props {
|
||||
search: string;
|
||||
confirmClear: boolean;
|
||||
}
|
||||
|
||||
let { search, confirmClear }: Props = $props();
|
||||
|
||||
let libraryManga = $state<Manga[]>([]);
|
||||
|
||||
onMount(() => {
|
||||
@@ -24,9 +31,6 @@
|
||||
return libraryManga.find(m => m.id === mangaId)?.thumbnailUrl ?? fallback ?? "";
|
||||
}
|
||||
|
||||
let search = $state("");
|
||||
let confirmClear = $state(false);
|
||||
|
||||
const SESSION_GAP_MS = 30 * 60 * 1000;
|
||||
|
||||
interface Session {
|
||||
@@ -90,42 +94,9 @@
|
||||
}
|
||||
return Array.from(map.entries()).map(([label, items]) => ({ label, items }));
|
||||
});
|
||||
|
||||
function handleClear() {
|
||||
if (!confirmClear) { confirmClear = true; setTimeout(() => confirmClear = false, 3000); return; }
|
||||
clearHistory(); confirmClear = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="root anim-fade-in">
|
||||
|
||||
<div class="header">
|
||||
<div class="heading-group">
|
||||
<ClockCounterClockwise size={13} weight="light" class="heading-icon" />
|
||||
<span class="heading">History</span>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="search-wrap">
|
||||
<MagnifyingGlass size={11} class="search-icon" weight="light" />
|
||||
<input class="search" placeholder="Search…" bind:value={search} />
|
||||
{#if search}
|
||||
<button class="search-clear" onclick={() => search = ""}>×</button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if store.history.length > 0}
|
||||
<button
|
||||
class="clear-btn"
|
||||
class:confirm={confirmClear}
|
||||
onclick={handleClear}
|
||||
title={confirmClear ? "Click again to confirm" : "Clear history"}
|
||||
>
|
||||
<Trash size={12} weight="light" />
|
||||
{#if confirmClear}<span class="clear-label">Confirm?</span>{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if store.readingStats.totalChaptersRead > 0}
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card streak">
|
||||
@@ -230,100 +201,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--sp-4) var(--sp-6);
|
||||
border-bottom: 1px solid var(--border-dim);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.heading-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
:global(.heading-icon) { color: var(--text-faint); }
|
||||
|
||||
.heading {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-medium);
|
||||
color: var(--text-muted);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-wrap :global(.search-icon) {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
color: var(--text-faint);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search {
|
||||
background: var(--bg-raised);
|
||||
border: 1px solid var(--border-dim);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 4px 26px;
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-xs);
|
||||
width: 148px;
|
||||
outline: none;
|
||||
transition: border-color var(--t-base), width var(--t-base), background var(--t-base);
|
||||
}
|
||||
|
||||
.search::placeholder { color: var(--text-faint); }
|
||||
|
||||
.search:focus {
|
||||
border-color: var(--border-strong);
|
||||
background: var(--bg-elevated);
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
color: var(--text-faint);
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
transition: color var(--t-base);
|
||||
}
|
||||
|
||||
.search-clear:hover { color: var(--text-muted); }
|
||||
|
||||
.clear-btn {
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
height: 30px; padding: 0 var(--sp-2);
|
||||
border-radius: var(--radius-md); border: 1px solid var(--border-dim);
|
||||
background: var(--bg-raised); color: var(--text-faint);
|
||||
cursor: pointer; font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
letter-spacing: var(--tracking-wide); flex-shrink: 0;
|
||||
transition: color var(--t-base), background var(--t-base), border-color var(--t-base);
|
||||
}
|
||||
.clear-btn:hover { color: var(--color-error); background: var(--color-error-bg); border-color: color-mix(in srgb, var(--color-error) 30%, transparent); }
|
||||
.clear-btn.confirm { color: var(--color-error); background: var(--color-error-bg); border-color: var(--color-error); }
|
||||
|
||||
.clear-label { font-size: var(--text-2xs); }
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
|
||||
@@ -1,14 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { ArrowsClockwise, CircleNotch, MagnifyingGlass, Trash } from "phosphor-svelte";
|
||||
import { store, clearHistory } from "@store/state.svelte";
|
||||
import HistoryPanel from "./HistoryPanel.svelte";
|
||||
import UpdatesPanel from "./UpdatesPanel.svelte";
|
||||
|
||||
type RecentTab = "updates" | "history";
|
||||
let tab = $state<RecentTab>("updates");
|
||||
|
||||
// History toolbar state
|
||||
let historySearch = $state("");
|
||||
let historyConfirmClear = $state(false);
|
||||
|
||||
function handleHistoryClear() {
|
||||
if (!historyConfirmClear) {
|
||||
historyConfirmClear = true;
|
||||
setTimeout(() => { historyConfirmClear = false; }, 3000);
|
||||
return;
|
||||
}
|
||||
clearHistory();
|
||||
historyConfirmClear = false;
|
||||
}
|
||||
|
||||
// Updates toolbar state — bound to the child panel
|
||||
let updatesLoading = $state(true);
|
||||
let updatesRefreshFn = $state<(() => Promise<void>) | null>(null);
|
||||
</script>
|
||||
|
||||
<div class="root anim-fade-in">
|
||||
<div class="header">
|
||||
<span class="heading">Recent</span>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab" class:active={tab === "updates"} onclick={() => tab = "updates"}>
|
||||
Updates
|
||||
@@ -17,13 +38,52 @@
|
||||
Reading history
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
{#if tab === "updates"}
|
||||
<button class="icon-btn" onclick={() => updatesRefreshFn?.()} disabled={updatesLoading} title="Refresh updates">
|
||||
{#if updatesLoading}
|
||||
<CircleNotch size={14} weight="light" class="anim-spin" />
|
||||
{:else}
|
||||
<ArrowsClockwise size={14} weight="bold" />
|
||||
{/if}
|
||||
</button>
|
||||
{:else}
|
||||
<div class="search-wrap">
|
||||
<MagnifyingGlass size={11} class="search-icon" weight="light" />
|
||||
<input
|
||||
class="search"
|
||||
placeholder="Search…"
|
||||
value={historySearch}
|
||||
oninput={(e) => historySearch = (e.target as HTMLInputElement).value}
|
||||
/>
|
||||
{#if historySearch}
|
||||
<button class="search-clear" onclick={() => historySearch = ""}>×</button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if store.history.length > 0}
|
||||
<button
|
||||
class="clear-btn"
|
||||
class:confirm={historyConfirmClear}
|
||||
onclick={handleHistoryClear}
|
||||
title={historyConfirmClear ? "Click again to confirm" : "Clear history"}
|
||||
>
|
||||
<Trash size={12} weight="light" />
|
||||
{#if historyConfirmClear}<span class="clear-label">Confirm?</span>{/if}
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
{#if tab === "updates"}
|
||||
<UpdatesPanel />
|
||||
<UpdatesPanel
|
||||
bind:loading={updatesLoading}
|
||||
onRegisterRefresh={(fn) => updatesRefreshFn = fn}
|
||||
/>
|
||||
{:else}
|
||||
<HistoryPanel />
|
||||
<HistoryPanel search={historySearch} confirmClear={historyConfirmClear} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,6 +142,83 @@
|
||||
.tab:hover { color: var(--text-muted); }
|
||||
.tab.active { background: var(--accent-muted); color: var(--accent-fg); border-color: var(--accent-dim); }
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-dim);
|
||||
background: var(--bg-raised);
|
||||
color: var(--text-faint);
|
||||
cursor: pointer;
|
||||
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.icon-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
|
||||
.icon-btn:disabled { opacity: 0.45; cursor: default; }
|
||||
|
||||
.search-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-wrap :global(.search-icon) {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
color: var(--text-faint);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search {
|
||||
background: var(--bg-raised);
|
||||
border: 1px solid var(--border-dim);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 4px 26px;
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-xs);
|
||||
width: 148px;
|
||||
outline: none;
|
||||
transition: border-color var(--t-base), width var(--t-base), background var(--t-base);
|
||||
}
|
||||
.search::placeholder { color: var(--text-faint); }
|
||||
.search:focus { border-color: var(--border-strong); background: var(--bg-elevated); width: 200px; }
|
||||
|
||||
.search-clear {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
color: var(--text-faint);
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
transition: color var(--t-base);
|
||||
}
|
||||
.search-clear:hover { color: var(--text-muted); }
|
||||
|
||||
.clear-btn {
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
height: 28px; padding: 0 var(--sp-2);
|
||||
border-radius: var(--radius-md); border: 1px solid var(--border-dim);
|
||||
background: var(--bg-raised); color: var(--text-faint);
|
||||
cursor: pointer; font-family: var(--font-ui); font-size: var(--text-2xs);
|
||||
letter-spacing: var(--tracking-wide); flex-shrink: 0;
|
||||
transition: color var(--t-base), background var(--t-base), border-color var(--t-base);
|
||||
}
|
||||
.clear-btn:hover { color: var(--color-error); background: var(--color-error-bg); border-color: color-mix(in srgb, var(--color-error) 30%, transparent); }
|
||||
.clear-btn.confirm { color: var(--color-error); background: var(--color-error-bg); border-color: var(--color-error); }
|
||||
.clear-label { font-size: var(--text-2xs); }
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { ArrowsClockwise, BookOpen, CircleNotch } from "phosphor-svelte";
|
||||
import { BookOpen, CircleNotch } from "phosphor-svelte";
|
||||
import { gql } from "@api/client";
|
||||
import { GET_RECENTLY_UPDATED, GET_CHAPTERS } from "@api/queries";
|
||||
import { store, openReader, setActiveManga, addToast } from "@store/state.svelte";
|
||||
@@ -9,6 +9,13 @@
|
||||
import Thumbnail from "@shared/manga/Thumbnail.svelte";
|
||||
import type { Chapter, Manga } from "@types";
|
||||
|
||||
interface Props {
|
||||
loading?: boolean;
|
||||
onRegisterRefresh?: (fn: () => Promise<void>) => void;
|
||||
}
|
||||
|
||||
let { loading = $bindable(true), onRegisterRefresh }: Props = $props();
|
||||
|
||||
interface RecentUpdate extends Pick<Chapter, "id" | "name" | "chapterNumber" | "sourceOrder" | "isRead" | "lastPageRead" | "mangaId" | "fetchedAt"> {
|
||||
manga: { id: number; title: string; thumbnailUrl: string; inLibrary: boolean } | null;
|
||||
}
|
||||
@@ -19,13 +26,13 @@
|
||||
}
|
||||
|
||||
let updates = $state<RecentUpdate[]>([]);
|
||||
let loading = $state(true);
|
||||
let error = $state<string | null>(null);
|
||||
let openingId = $state<number | null>(null);
|
||||
|
||||
let ctrl: AbortController | null = null;
|
||||
|
||||
onMount(() => {
|
||||
onRegisterRefresh?.(loadUpdates);
|
||||
void loadUpdates();
|
||||
});
|
||||
|
||||
@@ -48,22 +55,20 @@
|
||||
return Array.from(map.entries()).map(([label, items]) => ({ label, items })) as UpdateGroup[];
|
||||
});
|
||||
|
||||
const lastUpdatedTs = $derived(
|
||||
store.lastLibraryRefresh > 0
|
||||
? store.lastLibraryRefresh
|
||||
: (updates.length > 0 ? fetchedAtMs(updates[0]) : null)
|
||||
const lastCheckedTs = $derived(
|
||||
updates.length > 0 ? fetchedAtMs(updates[0]) : null
|
||||
);
|
||||
|
||||
const lastUpdatedLabel = $derived(
|
||||
lastUpdatedTs
|
||||
? new Date(lastUpdatedTs).toLocaleString("en-US", {
|
||||
const lastCheckedLabel = $derived(
|
||||
lastCheckedTs
|
||||
? new Date(lastCheckedTs).toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
})
|
||||
: "Never"
|
||||
: null
|
||||
);
|
||||
|
||||
function mangaStub(item: RecentUpdate): Manga {
|
||||
@@ -131,16 +136,22 @@
|
||||
</script>
|
||||
|
||||
<div class="root anim-fade-in">
|
||||
<div class="header">
|
||||
<div class="heading-group">
|
||||
<ArrowsClockwise size={13} weight="light" class="heading-icon" />
|
||||
<span class="heading">Library updates</span>
|
||||
<span class="last-updated">Last updated: {lastUpdatedLabel}</span>
|
||||
<div class="bar-wrap">
|
||||
<div class="status-bar">
|
||||
<div class="status-dot" class:active={loading}></div>
|
||||
<span class="status-text">
|
||||
{#if loading}Checking for updates…{:else if error}Update check failed{:else}Up to date{/if}
|
||||
</span>
|
||||
<div class="status-right">
|
||||
{#if !loading && lastCheckedLabel}
|
||||
<span class="status-detail">Last checked: {lastCheckedLabel}</span>
|
||||
<div class="bar-sep"></div>
|
||||
{/if}
|
||||
{#if !loading && updates.length > 0}
|
||||
<span class="status-count">{updates.length} chapter{updates.length === 1 ? "" : "s"}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<button class="icon-btn" onclick={loadUpdates} disabled={loading} title="Refresh updates">
|
||||
{#if loading}<CircleNotch size={14} weight="light" class="anim-spin" />
|
||||
{:else}<ArrowsClockwise size={14} weight="bold" />{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if loading && updates.length === 0}
|
||||
@@ -177,36 +188,38 @@
|
||||
|
||||
<div class="updates-list">
|
||||
{#each items as item (item.id)}
|
||||
<button class="update-row" onclick={() => openUpdate(item)} disabled={openingId === item.id}>
|
||||
<div class="thumb-wrap">
|
||||
<div class="update-row" class:read={item.isRead}>
|
||||
<button class="thumb-btn" onclick={() => setActiveManga(mangaStub(item))} title="View series">
|
||||
<Thumbnail src={item.manga?.thumbnailUrl ?? ""} alt={item.manga?.title ?? "Series cover"} class="thumb" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="update-info">
|
||||
<div class="title-row">
|
||||
<span class="series-title">{item.manga?.title ?? "Unknown series"}</span>
|
||||
{#if !item.isRead}
|
||||
<span class="pill">Unread</span>
|
||||
<button class="info-btn" onclick={() => openUpdate(item)} disabled={openingId === item.id}>
|
||||
<div class="update-info">
|
||||
<div class="title-row">
|
||||
<span class="series-title">{item.manga?.title ?? "Unknown series"}</span>
|
||||
{#if !item.isRead}
|
||||
<span class="pill">Unread</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<span class="chapter-title">{chapterLabel(item)}</span>
|
||||
|
||||
{#if (item.lastPageRead ?? 0) > 0 && !item.isRead}
|
||||
<div class="meta-row">
|
||||
<span>Resume p.{item.lastPageRead}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<span class="chapter-title">{chapterLabel(item)}</span>
|
||||
|
||||
{#if (item.lastPageRead ?? 0) > 0 && !item.isRead}
|
||||
<div class="meta-row">
|
||||
<span>Resume p.{item.lastPageRead}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="row-end">
|
||||
{#if openingId === item.id}
|
||||
<CircleNotch size={14} weight="light" class="anim-spin" />
|
||||
{:else}
|
||||
<BookOpen size={14} weight="light" />
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
<div class="row-end">
|
||||
{#if openingId === item.id}
|
||||
<CircleNotch size={14} weight="light" class="anim-spin" />
|
||||
{:else}
|
||||
<BookOpen size={14} weight="light" />
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
@@ -223,60 +236,21 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--sp-4) var(--sp-6);
|
||||
border-bottom: 1px solid var(--border-dim);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.bar-wrap { padding: var(--sp-3) var(--sp-6); flex-shrink: 0; }
|
||||
|
||||
.heading-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
:global(.heading-icon) { color: var(--text-faint); }
|
||||
|
||||
.heading {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-medium);
|
||||
color: var(--text-muted);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.last-updated {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-2xs);
|
||||
color: var(--text-faint);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-dim);
|
||||
background: var(--bg-raised);
|
||||
color: var(--text-faint);
|
||||
cursor: pointer;
|
||||
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.icon-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
|
||||
.icon-btn:disabled { opacity: 0.45; cursor: default; }
|
||||
.status-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--bg-surface, var(--bg-raised)); border: 1px solid var(--border-strong, var(--border-dim)); border-radius: var(--radius-md); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
|
||||
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; transition: background var(--t-base); }
|
||||
.status-dot.active { background: var(--accent); animation: pulse 1.6s ease infinite; }
|
||||
.status-text { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); flex: 1; letter-spacing: var(--tracking-wide); }
|
||||
.status-right { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
|
||||
.status-detail { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
|
||||
.status-count { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
|
||||
.bar-sep { width: 1px; height: 12px; background: var(--border-dim); flex-shrink: 0; }
|
||||
|
||||
.timeline {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--sp-5) var(--sp-6) var(--sp-6);
|
||||
padding: var(--sp-4) var(--sp-6) var(--sp-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-5);
|
||||
@@ -316,42 +290,60 @@
|
||||
}
|
||||
|
||||
.update-row {
|
||||
display: grid;
|
||||
grid-template-columns: 52px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
width: 100%;
|
||||
padding: var(--sp-2);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-dim);
|
||||
background: var(--bg-base);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
|
||||
overflow: hidden;
|
||||
transition: border-color var(--t-base), transform var(--t-base);
|
||||
}
|
||||
.update-row:hover:not(:disabled) {
|
||||
background: var(--bg-raised);
|
||||
.update-row:has(.info-btn:hover:not(:disabled)) {
|
||||
border-color: var(--border-strong);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.update-row:disabled { cursor: default; opacity: 0.8; }
|
||||
.update-row.read { opacity: 0.5; }
|
||||
|
||||
.thumb-wrap {
|
||||
.thumb-btn {
|
||||
width: 52px;
|
||||
aspect-ratio: 2 / 3;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: var(--bg-overlay);
|
||||
border: 1px solid var(--border-dim);
|
||||
flex-shrink: 0;
|
||||
padding: var(--sp-2);
|
||||
background: none;
|
||||
border: none;
|
||||
border-right: 1px solid var(--border-dim);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background var(--t-base);
|
||||
}
|
||||
.thumb-btn:hover { background: var(--bg-raised); }
|
||||
|
||||
:global(.thumb) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
aspect-ratio: 2 / 3;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.info-btn {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background var(--t-base);
|
||||
}
|
||||
.info-btn:hover:not(:disabled) { background: var(--bg-raised); }
|
||||
.info-btn:disabled { cursor: default; opacity: 0.8; }
|
||||
|
||||
.update-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -409,6 +401,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.empty {
|
||||
@@ -447,4 +440,6 @@
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user