feat: add book cover component and detail-card list view
This commit is contained in:
@@ -0,0 +1,231 @@
|
||||
<script lang="ts">
|
||||
import BookCover from './book-cover.svelte';
|
||||
import BookActionsMenu from './book-actions-menu.svelte';
|
||||
import * as Tooltip from '$lib/components/ui/tooltip/index';
|
||||
import { Badge, badgeVariants } from '$lib/components/ui/badge/index';
|
||||
import { buttonVariants } from '$lib/components/ui/button/index.js';
|
||||
import { getBookSelectionState } from '$lib/state/bookSelection.svelte';
|
||||
import { getBookOperationsState } from '$lib/state/bookOperations.svelte';
|
||||
import { getLibraryState } from '$lib/state/library.svelte';
|
||||
import { getFileType } from '$lib/utils';
|
||||
import { BookOpenText, Check, Download } from '@lucide/svelte';
|
||||
import type { Book, BookFile } from '$lib/schema';
|
||||
|
||||
let { books }: { books: Book[] } = $props();
|
||||
|
||||
const selectionState = getBookSelectionState();
|
||||
const bookOps = getBookOperationsState();
|
||||
const libraryState = getLibraryState();
|
||||
|
||||
/** At most three, so cards with a heavy tag list stay the same height as the rest. */
|
||||
const TAG_LIMIT = 3;
|
||||
|
||||
function authors(book: Book) {
|
||||
return book.authors.map((a) => a.name).join(', ');
|
||||
}
|
||||
|
||||
function year(book: Book) {
|
||||
return book.published_date ? new Date(book.published_date).getFullYear() : null;
|
||||
}
|
||||
|
||||
function formats(book: Book) {
|
||||
return [...new Set(book.files.map((f) => getFileType(f.filename)))].join(' + ');
|
||||
}
|
||||
|
||||
/**
|
||||
* BookProgressRead does not expose a timestamp yet, though BookProgress
|
||||
* extends BigIntAuditBase so updated_at exists in the database. Reading it
|
||||
* defensively means the date appears on its own once the schema catches up.
|
||||
* See TODO.md.
|
||||
*/
|
||||
function finishedOn(book: Book) {
|
||||
const value = (book.progress as { updated_at?: string } | null | undefined)?.updated_at;
|
||||
return value
|
||||
? new Date(value).toLocaleDateString(undefined, {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
})
|
||||
: null;
|
||||
}
|
||||
|
||||
/**
|
||||
* One line where the progress bar used to be — the cover already draws the
|
||||
* bar, so this says something the bar cannot. Unread books report their
|
||||
* length rather than announcing that they are unread.
|
||||
*/
|
||||
function readState(book: Book): { text: string; tone: 'done' | 'reading' | 'idle' } {
|
||||
const progress = book.progress;
|
||||
const pages = book.pages ?? null;
|
||||
|
||||
if (progress?.completed) {
|
||||
const on = finishedOn(book);
|
||||
return { text: on ? `Finished ${on}` : 'Finished', tone: 'done' };
|
||||
}
|
||||
|
||||
if (progress?.percentage) {
|
||||
// pdf_page is a real page number when the reader recorded one;
|
||||
// otherwise infer it from the percentage.
|
||||
const current = progress.pdf_page ?? (pages ? Math.round(progress.percentage * pages) : null);
|
||||
|
||||
return {
|
||||
text:
|
||||
pages && current
|
||||
? `Reading · ${current} of ${pages}`
|
||||
: `Reading · ${Math.round(progress.percentage * 100)}%`,
|
||||
tone: 'reading'
|
||||
};
|
||||
}
|
||||
|
||||
return { text: pages ? `${pages} pages` : '', tone: 'idle' };
|
||||
}
|
||||
|
||||
function openInReader(book: Book, file: BookFile) {
|
||||
const type = getFileType(file.filename);
|
||||
if (type === 'EPUB' || type === 'PDF')
|
||||
window.open(`/book/${book.id}/read/${type.toLowerCase()}/${file.id}`, '_blank', 'noopener');
|
||||
}
|
||||
|
||||
/**
|
||||
* Once a selection exists, selecting is the primary interaction — so the
|
||||
* whole card toggles, not just the checkbox. preventDefault also stops the
|
||||
* links inside from navigating, since the click bubbles through them here.
|
||||
*/
|
||||
function handleCardClick(event: MouseEvent, book: Book) {
|
||||
if (!selectionState.selectionModeActive) return;
|
||||
if ((event.target as HTMLElement).closest('[data-row-control]')) return;
|
||||
|
||||
event.preventDefault();
|
||||
selectionState.toggleSelection(book);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--
|
||||
Detail cards: a browsable cover beside real metadata, sitting between the
|
||||
grid (covers, no data) and the table (data, no covers). The column count
|
||||
comes from the container rather than a breakpoint, so it reflows from one to
|
||||
three as the sidebar opens and closes.
|
||||
-->
|
||||
<div class="grid grid-cols-[repeat(auto-fill,minmax(330px,1fr))] gap-3.5 p-1">
|
||||
{#each books as book (book.id)}
|
||||
{@const selected = selectionState.isSelected(book.id)}
|
||||
{@const state = readState(book)}
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
onclick={(event) => handleCardClick(event, book)}
|
||||
class="group flex gap-3.5 rounded-lg border bg-card p-3 transition-colors {selected
|
||||
? 'border-primary bg-accent'
|
||||
: 'border-border/60 hover:border-border'} {selectionState.selectionModeActive
|
||||
? 'cursor-pointer'
|
||||
: ''}"
|
||||
>
|
||||
<a href="/book/{book.id}" class="shrink-0">
|
||||
<BookCover {book} height={110} />
|
||||
</a>
|
||||
|
||||
<div class="flex min-w-0 flex-1 flex-col">
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="min-w-0 flex-1">
|
||||
<a
|
||||
href="/book/{book.id}"
|
||||
class="line-clamp-2 font-serif text-sm leading-snug hover:underline"
|
||||
>
|
||||
{book.title}
|
||||
</a>
|
||||
<p class="mt-0.5 truncate text-xs text-muted-foreground">{authors(book)}</p>
|
||||
</div>
|
||||
|
||||
<!-- Hidden until hover, pinned once selected — as in the grid -->
|
||||
<button
|
||||
type="button"
|
||||
data-row-control
|
||||
role="checkbox"
|
||||
aria-checked={selected}
|
||||
aria-label="Select {book.title}"
|
||||
onclick={() => selectionState.toggleSelection(book)}
|
||||
class="grid size-4 shrink-0 place-items-center rounded-sm border transition-opacity {selected
|
||||
? 'border-primary bg-primary text-primary-foreground opacity-100'
|
||||
: 'border-muted-foreground opacity-0 group-hover:opacity-100 focus-visible:opacity-100'}"
|
||||
>
|
||||
{#if selected}
|
||||
<Check class="size-3" />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 flex flex-wrap items-center gap-1">
|
||||
{#if year(book)}
|
||||
<Badge variant="secondary" class="font-mono text-[10px] tabular-nums">
|
||||
{year(book)}
|
||||
</Badge>
|
||||
{/if}
|
||||
{#if book.files.length > 0}
|
||||
<Badge variant="outline" class="font-mono text-[10px]">{formats(book)}</Badge>
|
||||
{/if}
|
||||
{#each book.tags.slice(0, TAG_LIMIT) as tag (tag.id)}
|
||||
<a
|
||||
data-row-control
|
||||
href="/library/{libraryState.activeLibrary?.id}/view?tags={tag.id}"
|
||||
class={badgeVariants({ variant: 'secondary' })}>{tag.name}</a
|
||||
>
|
||||
{/each}
|
||||
{#if book.tags.length > TAG_LIMIT}
|
||||
<span class="font-mono text-[10px] text-muted-foreground">
|
||||
+{book.tags.length - TAG_LIMIT}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="mt-auto flex items-center gap-2 pt-2.5">
|
||||
<!-- Actions on the left, reading state anchored bottom-right -->
|
||||
<div
|
||||
data-row-control
|
||||
class="flex shrink-0 gap-1 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
>
|
||||
{#if book.files.length > 0}
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root ignoreNonKeyboardFocus>
|
||||
<Tooltip.Trigger
|
||||
class="{buttonVariants({ variant: 'ghost', size: 'icon' })} size-7"
|
||||
onclick={() => openInReader(book, book.files[0])}
|
||||
>
|
||||
<BookOpenText class="size-4" />
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content side="bottom"><p>Read</p></Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root ignoreNonKeyboardFocus>
|
||||
<Tooltip.Trigger
|
||||
class="{buttonVariants({ variant: 'ghost', size: 'icon' })} size-7"
|
||||
onclick={() =>
|
||||
bookOps.downloadBookFile(book.id, book.files[0].id, book.files[0].filename)}
|
||||
>
|
||||
<Download class="size-4" />
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content side="bottom"><p>Download</p></Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
{/if}
|
||||
|
||||
<BookActionsMenu {book} class="size-7" />
|
||||
</div>
|
||||
|
||||
{#if state.text}
|
||||
<span
|
||||
class="ml-auto truncate font-mono text-xs tabular-nums {state.tone === 'done'
|
||||
? 'font-semibold text-success'
|
||||
: state.tone === 'reading'
|
||||
? 'font-semibold text-flag'
|
||||
: 'text-muted-foreground'}"
|
||||
>
|
||||
{state.text}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
Reference in New Issue
Block a user