refactor: resolve() internal links instead of plain hrefs
Type-checks every link against the real route tree. Caught a dead one: the
book page linked tags to /tag/{id}, a route that has never existed.
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { resolve } from '$app/paths';
|
||||
import { Badge, badgeVariants } from '$lib/components/ui/badge/index.js';
|
||||
import { CollapsibleText } from '$lib/components/ui/collapsible-text/index.js';
|
||||
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index';
|
||||
@@ -17,12 +18,7 @@
|
||||
PlusIcon,
|
||||
Trash2
|
||||
} from '@lucide/svelte';
|
||||
import {
|
||||
describeIdentifier,
|
||||
formatFileSize,
|
||||
getFileType,
|
||||
sortIdentifiers
|
||||
} from '$lib/utils.js';
|
||||
import { describeIdentifier, formatFileSize, getFileType, sortIdentifiers } from '$lib/utils.js';
|
||||
import { getBookOperationsState } from '$lib/state/bookOperations.svelte.js';
|
||||
import { getBookshelfState } from '$lib/state/bookshelf.svelte.js';
|
||||
import { getLibraryState } from '$lib/state/library.svelte.js';
|
||||
@@ -65,12 +61,24 @@
|
||||
: 'Read'
|
||||
);
|
||||
|
||||
// window.open is outside the lint rule's reach, but the paths need resolving
|
||||
// just the same — they would break under a non-empty base path.
|
||||
function openBookInReader(file: BookFile) {
|
||||
const params = { bookId: String(book.id), fileId: String(file.id) };
|
||||
|
||||
if (getFileType(file.filename) === 'EPUB')
|
||||
window.open(`/book/${book.id}/read/epub/${file.id}`, '_blank', 'noopener,noreferrer');
|
||||
window.open(
|
||||
resolve('/(root)/(library)/book/[bookId]/read/epub/[fileId]', params),
|
||||
'_blank',
|
||||
'noopener,noreferrer'
|
||||
);
|
||||
|
||||
if (getFileType(file.filename) === 'PDF')
|
||||
window.open(`/book/${book.id}/read/pdf/${file.id}`, '_blank', 'noopener,noreferrer');
|
||||
window.open(
|
||||
resolve('/(root)/(library)/book/[bookId]/read/pdf/[fileId]', params),
|
||||
'_blank',
|
||||
'noopener,noreferrer'
|
||||
);
|
||||
}
|
||||
|
||||
// On the band, the accent is the ground — invert the buttons against it.
|
||||
@@ -101,7 +109,7 @@
|
||||
</h1>
|
||||
|
||||
{#if book.subtitle}
|
||||
<p class="mt-1 font-serif text-lg italic text-primary-foreground/75">{book.subtitle}</p>
|
||||
<p class="mt-1 font-serif text-lg text-primary-foreground/75 italic">{book.subtitle}</p>
|
||||
{/if}
|
||||
|
||||
{#if book.series}
|
||||
@@ -115,7 +123,9 @@
|
||||
By
|
||||
{#each book.authors as author (author.id)}
|
||||
<a
|
||||
href="/library/{libraryState.activeLibrary!.id}/view?authors={author.id}"
|
||||
href="{resolve('/(root)/(library)/library/[libraryId]/view', {
|
||||
libraryId: String(libraryState.activeLibrary!.id)
|
||||
})}?authors={author.id}"
|
||||
class="cs-list hover:underline">{author.name}</a
|
||||
>  
|
||||
{/each}
|
||||
@@ -169,7 +179,11 @@
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
{:else if book.files.length === 1}
|
||||
<button type="button" class={bandPrimary} onclick={() => openBookInReader(book.files[0])}>
|
||||
<button
|
||||
type="button"
|
||||
class={bandPrimary}
|
||||
onclick={() => openBookInReader(book.files[0])}
|
||||
>
|
||||
<BookOpenText class="size-4" />
|
||||
{readLabel}
|
||||
</button>
|
||||
@@ -184,7 +198,6 @@
|
||||
Download
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -200,272 +213,303 @@
|
||||
description lines up with the cover's left edge.
|
||||
-->
|
||||
<div class="px-6 md:px-10">
|
||||
<!--
|
||||
<!--
|
||||
grid-rows matters here. The rail spans both rows, and with two auto rows the
|
||||
browser splits any surplus rail height evenly between them — so a one-line
|
||||
description got stretched to half the rail's height, leaving a large gap
|
||||
above the files card. Sizing row 1 to its content and letting row 2 take the
|
||||
free space sends the slack to the bottom instead, where it is invisible.
|
||||
-->
|
||||
<div
|
||||
class="mx-auto grid w-full max-w-5xl gap-8 pt-28 pb-10 md:grid-cols-[minmax(0,1fr)_260px] md:grid-rows-[auto_1fr] md:items-start"
|
||||
>
|
||||
<!-- Description -->
|
||||
<section class="min-w-0 md:col-start-1 md:row-start-1">
|
||||
{#if book.description}
|
||||
<CollapsibleText text={book.description} maxLength={500} />
|
||||
{:else}
|
||||
<p class="text-sm text-muted-foreground">No description for this book yet.</p>
|
||||
{/if}
|
||||
</section>
|
||||
<div
|
||||
class="mx-auto grid w-full max-w-5xl gap-8 pt-28 pb-10 md:grid-cols-[minmax(0,1fr)_260px] md:grid-rows-[auto_1fr] md:items-start"
|
||||
>
|
||||
<!-- Description -->
|
||||
<section class="min-w-0 md:col-start-1 md:row-start-1">
|
||||
{#if book.description}
|
||||
<CollapsibleText text={book.description} maxLength={500} />
|
||||
{:else}
|
||||
<p class="text-sm text-muted-foreground">No description for this book yet.</p>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Details rail -->
|
||||
<aside class="flex flex-col gap-6 md:col-start-2 md:row-span-2 md:row-start-1">
|
||||
<div>
|
||||
<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
|
||||
Details
|
||||
</h2>
|
||||
<!-- items-baseline: the 10px mono label and the 14px value sit on a
|
||||
<!-- Details rail -->
|
||||
<aside class="flex flex-col gap-6 md:col-start-2 md:row-span-2 md:row-start-1">
|
||||
<div>
|
||||
<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
|
||||
Details
|
||||
</h2>
|
||||
<!-- items-baseline: the 10px mono label and the 14px value sit on a
|
||||
shared text baseline, so the pair reads as one line -->
|
||||
<dl
|
||||
class="grid grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-4 gap-y-2 rounded-lg border bg-card p-4 text-sm"
|
||||
>
|
||||
{#if book.publisher}
|
||||
<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
|
||||
Publisher
|
||||
</dt>
|
||||
<dd class="m-0">{book.publisher.name}</dd>
|
||||
{/if}
|
||||
{#if book.published_date}
|
||||
<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
|
||||
Published
|
||||
</dt>
|
||||
<dd class="m-0 font-mono tabular-nums">{book.published_date}</dd>
|
||||
{/if}
|
||||
{#if book.pages}
|
||||
<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
|
||||
Pages
|
||||
</dt>
|
||||
<dd class="m-0 font-mono tabular-nums">{book.pages}</dd>
|
||||
{/if}
|
||||
{#if book.language}
|
||||
<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
|
||||
Language
|
||||
</dt>
|
||||
<dd class="m-0">{book.language}</dd>
|
||||
{/if}
|
||||
{#if book.edition}
|
||||
<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
|
||||
Edition
|
||||
</dt>
|
||||
<dd class="m-0 font-mono tabular-nums">{book.edition}</dd>
|
||||
{/if}
|
||||
{#each sortIdentifiers(book.identifiers) as [name, value] (name)}
|
||||
{@const id = describeIdentifier(name, value)}
|
||||
<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
|
||||
{id.label}
|
||||
</dt>
|
||||
<dd class="m-0 font-mono break-all tabular-nums">
|
||||
{#if id.href}
|
||||
<dl
|
||||
class="grid grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-4 gap-y-2 rounded-lg border bg-card p-4 text-sm"
|
||||
>
|
||||
{#if book.publisher}
|
||||
<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
|
||||
Publisher
|
||||
</dt>
|
||||
<dd class="m-0">{book.publisher.name}</dd>
|
||||
{/if}
|
||||
{#if book.published_date}
|
||||
<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
|
||||
Published
|
||||
</dt>
|
||||
<dd class="m-0 font-mono tabular-nums">{book.published_date}</dd>
|
||||
{/if}
|
||||
{#if book.pages}
|
||||
<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
|
||||
Pages
|
||||
</dt>
|
||||
<dd class="m-0 font-mono tabular-nums">{book.pages}</dd>
|
||||
{/if}
|
||||
{#if book.language}
|
||||
<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
|
||||
Language
|
||||
</dt>
|
||||
<dd class="m-0">{book.language}</dd>
|
||||
{/if}
|
||||
{#if book.edition}
|
||||
<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
|
||||
Edition
|
||||
</dt>
|
||||
<dd class="m-0 font-mono tabular-nums">{book.edition}</dd>
|
||||
{/if}
|
||||
{#each sortIdentifiers(book.identifiers) as [name, value] (name)}
|
||||
{@const id = describeIdentifier(name, value)}
|
||||
<dt class="font-mono text-[10px] tracking-wider text-muted-foreground uppercase">
|
||||
{id.label}
|
||||
</dt>
|
||||
<dd class="m-0 font-mono break-all tabular-nums">
|
||||
{#if id.href}
|
||||
<!-- Always an absolute URL off-site: openlibrary, doi.org or amazon. -->
|
||||
<a
|
||||
href={id.href}
|
||||
target="_blank"
|
||||
rel="external noopener noreferrer"
|
||||
class="hover:text-primary hover:underline">{value}</a
|
||||
>
|
||||
{:else}
|
||||
{value}
|
||||
{/if}
|
||||
</dd>
|
||||
{/each}
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
{#if book.tags.length > 0}
|
||||
<div>
|
||||
<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
|
||||
Tags
|
||||
</h2>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
{#each book.tags as tag (tag.id)}
|
||||
<!-- Was /tag/{id}, a route that has never existed — these badges 404'd.
|
||||
Filter the library view, as the tag links in the list views do. -->
|
||||
<a
|
||||
href={id.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="hover:text-primary hover:underline">{value}</a
|
||||
href="{resolve('/(root)/(library)/library/[libraryId]/view', {
|
||||
libraryId: String(libraryState.activeLibrary!.id)
|
||||
})}?tags={tag.id}"
|
||||
class={badgeVariants({ variant: 'default' })}>{tag.name}</a
|
||||
>
|
||||
{:else}
|
||||
{value}
|
||||
{/if}
|
||||
</dd>
|
||||
{/each}
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
{#if book.tags.length > 0}
|
||||
<div>
|
||||
<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
|
||||
Tags
|
||||
</h2>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
{#each book.tags as tag (tag.id)}
|
||||
<a href="/tag/{tag.id}" class={badgeVariants({ variant: 'default' })}>{tag.name}</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if book.lists.length > 0}
|
||||
<div>
|
||||
<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
|
||||
Shelves
|
||||
</h2>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
{#each book.lists as shelf (shelf.id)}
|
||||
<a
|
||||
href="/library/{libraryState.activeLibrary!.id}/view?shelves={shelf.id}"
|
||||
class={badgeVariants({ variant: 'outline' })}>{shelf.title}</a
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div>
|
||||
<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
|
||||
Manage
|
||||
</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<!-- Mark as finished -->
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root ignoreNonKeyboardFocus>
|
||||
<Tooltip.Trigger
|
||||
class="{buttonVariants({ variant: 'outline', size: 'icon' })} {book.progress
|
||||
?.completed
|
||||
? 'text-success'
|
||||
: ''}"
|
||||
onclick={async () => {
|
||||
if (book.progress?.completed) await bookOps.markBooksAsIncomplete([book.id]);
|
||||
else await bookOps.markBooksAsComplete([book.id]);
|
||||
}}
|
||||
>
|
||||
<BookOpenCheck />
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content side="bottom">
|
||||
<p>{book.progress?.completed ? 'Mark as not finished' : 'Mark as finished'}</p>
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
|
||||
<!-- Add to shelf -->
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root ignoreNonKeyboardFocus>
|
||||
<Tooltip.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger
|
||||
{...props}
|
||||
class={buttonVariants({ variant: 'outline', size: 'icon' })}
|
||||
>
|
||||
<Album />
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content>
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.GroupHeading>Shelves</DropdownMenu.GroupHeading>
|
||||
{#each bookshelfState.getBookshelves(libraryState.activeLibrary!.id) ?? [] as shelf (shelf.id)}
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={book.lists.findIndex((sh) => sh.id === shelf.id) !== -1}
|
||||
onclick={async () => {
|
||||
if (book.lists.find((sh) => sh.id === shelf.id)) {
|
||||
await bookshelfState.removeBooksFromShelf(shelf.id, [book.id]);
|
||||
book.lists = book.lists.filter((sh) => sh.id !== shelf.id);
|
||||
} else {
|
||||
await bookshelfState.addBooksToShelf(shelf.id, [book.id]);
|
||||
book.lists.push(shelf);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{shelf.title}
|
||||
</DropdownMenu.CheckboxItem>
|
||||
{/each}
|
||||
</DropdownMenu.Group>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Item
|
||||
onclick={() => (createShelfDialogOpen = true)}
|
||||
class="text-muted-foreground"
|
||||
>
|
||||
<PlusIcon class="size-4" />
|
||||
New Shelf
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
{/snippet}
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content side="bottom">
|
||||
<p>Add to shelf</p>
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
|
||||
<!-- Edit -->
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root ignoreNonKeyboardFocus>
|
||||
<Tooltip.Trigger
|
||||
onclick={() => {
|
||||
bookOps.bookToEdit = book;
|
||||
bookOps.editDialogOpen = true;
|
||||
}}
|
||||
class={buttonVariants({ variant: 'outline', size: 'icon' })}
|
||||
>
|
||||
<Pencil />
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content side="bottom">
|
||||
<p>Edit</p>
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
|
||||
<!-- Delete -->
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root ignoreNonKeyboardFocus>
|
||||
<Tooltip.Trigger
|
||||
class={buttonVariants({ variant: 'outline', size: 'icon' })}
|
||||
onclick={() => {
|
||||
bookOps.deleteDialogTitle = `Delete book?`;
|
||||
bookOps.deleteFn = async (deleteFiles: boolean) => {
|
||||
await bookOps.deleteBooks([book.id], deleteFiles, false);
|
||||
libraryState.activeLibrary!.total!--;
|
||||
bookshelfState.deletedBooks([book]);
|
||||
await history.back();
|
||||
};
|
||||
bookOps.deleteDialogOpen = true;
|
||||
}}
|
||||
>
|
||||
<Trash2 />
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content side="bottom">
|
||||
<p>Delete</p>
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Library files -->
|
||||
<section class="min-w-0 md:col-start-1 md:row-start-2">
|
||||
<Accordion.Root type="single" class="w-full rounded-lg border bg-card px-4">
|
||||
<Accordion.Item value="files">
|
||||
<Accordion.Trigger>
|
||||
<div class="flex items-center gap-3">
|
||||
Library files
|
||||
<Badge>{book.files.length}</Badge>
|
||||
{/each}
|
||||
</div>
|
||||
</Accordion.Trigger>
|
||||
<Accordion.Content>
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head class="w-[300px]">Filename</Table.Head>
|
||||
<Table.Head>Size</Table.Head>
|
||||
<Table.Head>File type</Table.Head>
|
||||
<Table.Head class="text-right">Actions</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each book.files as file (file.id)}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if book.lists.length > 0}
|
||||
<div>
|
||||
<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
|
||||
Shelves
|
||||
</h2>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
{#each book.lists as shelf (shelf.id)}
|
||||
<a
|
||||
href="{resolve('/(root)/(library)/library/[libraryId]/view', {
|
||||
libraryId: String(libraryState.activeLibrary!.id)
|
||||
})}?shelves={shelf.id}"
|
||||
class={badgeVariants({ variant: 'outline' })}>{shelf.title}</a
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div>
|
||||
<h2 class="mb-3 font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
|
||||
Manage
|
||||
</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<!-- Mark as finished -->
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root ignoreNonKeyboardFocus>
|
||||
<Tooltip.Trigger
|
||||
class="{buttonVariants({ variant: 'outline', size: 'icon' })} {book.progress
|
||||
?.completed
|
||||
? 'text-success'
|
||||
: ''}"
|
||||
onclick={async () => {
|
||||
if (book.progress?.completed) await bookOps.markBooksAsIncomplete([book.id]);
|
||||
else await bookOps.markBooksAsComplete([book.id]);
|
||||
}}
|
||||
>
|
||||
<BookOpenCheck />
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content side="bottom">
|
||||
<p>{book.progress?.completed ? 'Mark as not finished' : 'Mark as finished'}</p>
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
|
||||
<!-- Add to shelf -->
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root ignoreNonKeyboardFocus>
|
||||
<Tooltip.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger
|
||||
{...props}
|
||||
class={buttonVariants({ variant: 'outline', size: 'icon' })}
|
||||
>
|
||||
<Album />
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content>
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.GroupHeading>Shelves</DropdownMenu.GroupHeading>
|
||||
{#each bookshelfState.getBookshelves(libraryState.activeLibrary!.id) ?? [] as shelf (shelf.id)}
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={book.lists.findIndex((sh) => sh.id === shelf.id) !== -1}
|
||||
onclick={async () => {
|
||||
if (book.lists.find((sh) => sh.id === shelf.id)) {
|
||||
await bookshelfState.removeBooksFromShelf(shelf.id, [book.id]);
|
||||
book.lists = book.lists.filter((sh) => sh.id !== shelf.id);
|
||||
} else {
|
||||
await bookshelfState.addBooksToShelf(shelf.id, [book.id]);
|
||||
book.lists.push(shelf);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{shelf.title}
|
||||
</DropdownMenu.CheckboxItem>
|
||||
{/each}
|
||||
</DropdownMenu.Group>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Item
|
||||
onclick={() => (createShelfDialogOpen = true)}
|
||||
class="text-muted-foreground"
|
||||
>
|
||||
<PlusIcon class="size-4" />
|
||||
New Shelf
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
{/snippet}
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content side="bottom">
|
||||
<p>Add to shelf</p>
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
|
||||
<!-- Edit -->
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root ignoreNonKeyboardFocus>
|
||||
<Tooltip.Trigger
|
||||
onclick={() => {
|
||||
bookOps.bookToEdit = book;
|
||||
bookOps.editDialogOpen = true;
|
||||
}}
|
||||
class={buttonVariants({ variant: 'outline', size: 'icon' })}
|
||||
>
|
||||
<Pencil />
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content side="bottom">
|
||||
<p>Edit</p>
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
|
||||
<!-- Delete -->
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root ignoreNonKeyboardFocus>
|
||||
<Tooltip.Trigger
|
||||
class={buttonVariants({ variant: 'outline', size: 'icon' })}
|
||||
onclick={() => {
|
||||
bookOps.deleteDialogTitle = `Delete book?`;
|
||||
bookOps.deleteFn = async (deleteFiles: boolean) => {
|
||||
await bookOps.deleteBooks([book.id], deleteFiles, false);
|
||||
libraryState.activeLibrary!.total!--;
|
||||
bookshelfState.deletedBooks([book]);
|
||||
await history.back();
|
||||
};
|
||||
bookOps.deleteDialogOpen = true;
|
||||
}}
|
||||
>
|
||||
<Trash2 />
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content side="bottom">
|
||||
<p>Delete</p>
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Library files -->
|
||||
<section class="min-w-0 md:col-start-1 md:row-start-2">
|
||||
<Accordion.Root type="single" class="w-full rounded-lg border bg-card px-4">
|
||||
<Accordion.Item value="files">
|
||||
<Accordion.Trigger>
|
||||
<div class="flex items-center gap-3">
|
||||
Library files
|
||||
<Badge>{book.files.length}</Badge>
|
||||
</div>
|
||||
</Accordion.Trigger>
|
||||
<Accordion.Content>
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Cell class="max-w-[300px] min-w-0 overflow-hidden">
|
||||
<div class="font-mono text-xs break-words whitespace-normal">
|
||||
{file.filename}
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="font-mono text-xs tabular-nums">
|
||||
{formatFileSize(file.size)}
|
||||
</Table.Cell>
|
||||
<Table.Cell><span class="font-mono text-xs">{getFileType(file.filename)}</span></Table.Cell>
|
||||
<Table.Cell class="text-right">
|
||||
<div class="flex justify-end gap-1">
|
||||
{#if getFileType(file.filename) === 'EPUB' || getFileType(file.filename) === 'PDF'}
|
||||
<Table.Head class="w-[300px]">Filename</Table.Head>
|
||||
<Table.Head>Size</Table.Head>
|
||||
<Table.Head>File type</Table.Head>
|
||||
<Table.Head class="text-right">Actions</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each book.files as file (file.id)}
|
||||
<Table.Row>
|
||||
<Table.Cell class="max-w-[300px] min-w-0 overflow-hidden">
|
||||
<div class="font-mono text-xs break-words whitespace-normal">
|
||||
{file.filename}
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="font-mono text-xs tabular-nums">
|
||||
{formatFileSize(file.size)}
|
||||
</Table.Cell>
|
||||
<Table.Cell
|
||||
><span class="font-mono text-xs">{getFileType(file.filename)}</span
|
||||
></Table.Cell
|
||||
>
|
||||
<Table.Cell class="text-right">
|
||||
<div class="flex justify-end gap-1">
|
||||
{#if getFileType(file.filename) === 'EPUB' || getFileType(file.filename) === 'PDF'}
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root ignoreNonKeyboardFocus>
|
||||
<Tooltip.Trigger
|
||||
class="{buttonVariants({
|
||||
variant: 'default',
|
||||
size: 'icon'
|
||||
})} scale-90"
|
||||
onclick={() => openBookInReader(file)}
|
||||
>
|
||||
<BookOpenText />
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content side="bottom">
|
||||
<p>Read</p>
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
{/if}
|
||||
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root ignoreNonKeyboardFocus>
|
||||
<Tooltip.Trigger
|
||||
@@ -473,64 +517,46 @@
|
||||
variant: 'default',
|
||||
size: 'icon'
|
||||
})} scale-90"
|
||||
onclick={() => openBookInReader(file)}
|
||||
onclick={async () => {
|
||||
await bookOps.downloadBookFile(book.id, file.id, file.filename);
|
||||
}}
|
||||
>
|
||||
<BookOpenText />
|
||||
<Download />
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content side="bottom">
|
||||
<p>Read</p>
|
||||
<p>Download</p>
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
{/if}
|
||||
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root ignoreNonKeyboardFocus>
|
||||
<Tooltip.Trigger
|
||||
class="{buttonVariants({
|
||||
variant: 'default',
|
||||
size: 'icon'
|
||||
})} scale-90"
|
||||
onclick={async () => {
|
||||
await bookOps.downloadBookFile(book.id, file.id, file.filename);
|
||||
}}
|
||||
>
|
||||
<Download />
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content side="bottom">
|
||||
<p>Download</p>
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root ignoreNonKeyboardFocus>
|
||||
<Tooltip.Trigger
|
||||
onclick={() => {
|
||||
fileToDelete = file.id;
|
||||
fileDeleteDialogOpen = true;
|
||||
}}
|
||||
class="{buttonVariants({
|
||||
variant: 'destructive',
|
||||
size: 'icon'
|
||||
})} scale-90"
|
||||
>
|
||||
<Trash2 />
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content side="bottom">Delete file</Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
</div>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion.Root>
|
||||
</section>
|
||||
</div>
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root ignoreNonKeyboardFocus>
|
||||
<Tooltip.Trigger
|
||||
onclick={() => {
|
||||
fileToDelete = file.id;
|
||||
fileDeleteDialogOpen = true;
|
||||
}}
|
||||
class="{buttonVariants({
|
||||
variant: 'destructive',
|
||||
size: 'icon'
|
||||
})} scale-90"
|
||||
>
|
||||
<Trash2 />
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content side="bottom">Delete file</Tooltip.Content>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
</div>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion.Root>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -8,11 +8,11 @@
|
||||
const bookId = page.params.bookId!;
|
||||
|
||||
// Fetched by the browser through the proxy, which attaches the auth header
|
||||
const bookUrl = `/api/books/download/${bookId}/${fileId}`;
|
||||
const fileUrl = `/api/books/download/${bookId}/${fileId}`;
|
||||
</script>
|
||||
|
||||
<EpubReader
|
||||
{bookUrl}
|
||||
{fileUrl}
|
||||
{bookId}
|
||||
title={data.title}
|
||||
filename={data.filename}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { resolve } from '$app/paths';
|
||||
import { page } from '$app/state';
|
||||
import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
|
||||
import { Spinner } from '$lib/components/ui/spinner/index';
|
||||
@@ -55,7 +56,7 @@
|
||||
<!-- Same chrome as the EPUB reader, so leaving works the same way in both -->
|
||||
<header class="flex h-12 shrink-0 items-center gap-2 border-b px-3">
|
||||
<a
|
||||
href="/book/{bookId}"
|
||||
href={resolve('/(root)/(library)/book/[bookId]', { bookId: String(bookId) })}
|
||||
class="min-w-0 flex-1 truncate font-serif text-sm hover:underline"
|
||||
title={data?.title}
|
||||
>
|
||||
@@ -76,7 +77,10 @@
|
||||
<RotateCcw class="size-4" />
|
||||
Try again
|
||||
</Button>
|
||||
<a href="/book/{bookId}" class={buttonVariants({ variant: 'outline' })}>
|
||||
<a
|
||||
href={resolve('/(root)/(library)/book/[bookId]', { bookId: String(bookId) })}
|
||||
class={buttonVariants({ variant: 'outline' })}
|
||||
>
|
||||
Back to book
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,25 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
import { resolve } from '$app/paths';
|
||||
|
||||
let { children } = $props();
|
||||
|
||||
// Route ids rather than paths: resolve() is called in the markup so it stays a
|
||||
// direct call the lint rule can see, and the active check compares route ids.
|
||||
// A pathname comparison would miss during SSR, where resolve() returns a
|
||||
// relative path, and only settle after hydration.
|
||||
const items = [
|
||||
{
|
||||
title: 'Account',
|
||||
url: '/settings/account'
|
||||
},
|
||||
{
|
||||
title: 'Appearance',
|
||||
url: '/settings/appearance'
|
||||
},
|
||||
{
|
||||
title: 'Libraries',
|
||||
url: '/settings/libraries'
|
||||
},
|
||||
{
|
||||
title: 'Devices',
|
||||
url: '/settings/devices'
|
||||
}
|
||||
];
|
||||
{ title: 'Account', routeId: '/(root)/settings/account' },
|
||||
{ title: 'Appearance', routeId: '/(root)/settings/appearance' },
|
||||
{ title: 'Libraries', routeId: '/(root)/settings/libraries' },
|
||||
{ title: 'Devices', routeId: '/(root)/settings/devices' }
|
||||
] as const;
|
||||
</script>
|
||||
|
||||
<div class="flex h-[calc(100vh-var(--header-height)-2rem)] flex-col">
|
||||
@@ -28,8 +22,9 @@
|
||||
<nav class="flex w-48 shrink-0 flex-col gap-1">
|
||||
{#each items as item}
|
||||
<a
|
||||
href={item.url}
|
||||
class="rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted {page.url.pathname.endsWith(item.url)
|
||||
href={resolve(item.routeId)}
|
||||
class="rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted {page
|
||||
.route.id === item.routeId
|
||||
? 'bg-muted'
|
||||
: 'text-muted-foreground'}"
|
||||
>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { resolve } from '$app/paths';
|
||||
import { goto } from '$app/navigation';
|
||||
import { logout } from '$lib/api';
|
||||
import { Button } from '$lib/components/ui/button/index.js';
|
||||
@@ -12,7 +13,7 @@
|
||||
<Button
|
||||
onclick={async () => {
|
||||
await logout();
|
||||
goto('/login');
|
||||
goto(resolve('/login'));
|
||||
}}
|
||||
variant="outline"
|
||||
class="w-32"
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { resolve } from '$app/paths';
|
||||
import * as Table from '$lib/components/ui/table/index.js';
|
||||
import * as Card from '$lib/components/ui/card/index.js';
|
||||
import { getLibraryState } from '$lib/state/library.svelte';
|
||||
@@ -36,7 +37,10 @@
|
||||
>{library.name[0]}</Table.Cell
|
||||
>
|
||||
<Table.Cell class="font-medium">
|
||||
<a href={`/library/${library.id}`} class="hover:underline">{library.name}</a>
|
||||
<a
|
||||
href={resolve('/(root)/(library)/library/[libraryId]', { libraryId: String(library.id) })}
|
||||
class="hover:underline">{library.name}</a
|
||||
>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="w-16 text-center">
|
||||
<EllipsisVertical class="scale-75" />
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { resolve } from '$app/paths';
|
||||
import '../../app.css';
|
||||
import favicon from '$lib/assets/favicon.svg';
|
||||
import ThemeToggle from '$lib/components/layout/theme-toggle.svelte';
|
||||
@@ -10,12 +11,11 @@
|
||||
<link rel="icon" href={favicon} />
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<div class="flex h-screen min-h-screen flex-col">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-4 pt-4 pl-6">
|
||||
<p class="text-3xl">📚</p>
|
||||
<a href="/" class="text-2xl font-semibold">chitai</a>
|
||||
<a href={resolve('/')} class="text-2xl font-semibold">chitai</a>
|
||||
|
||||
<ThemeToggle class="mr-4 ml-auto" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user