diff options
Diffstat (limited to 'frontend/src')
140 files changed, 2375 insertions, 2292 deletions
diff --git a/frontend/src/app.css b/frontend/src/app.css index 07939f6..f8322d0 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -193,6 +193,7 @@ --sv-separator-bg: theme(colors.gray.700); --sv-min-height: 38px; --sv-item-wrap-padding: 3px 3px 3px 5px; + --sv-selection-multi-wrap-padding: 3px 3px 3px 5px; } .svelecte.is-focused { diff --git a/frontend/src/gql/Utils.ts b/frontend/src/gql/Utils.ts index dd21bbe..177dff0 100644 --- a/frontend/src/gql/Utils.ts +++ b/frontend/src/gql/Utils.ts @@ -1,8 +1,23 @@ -import equal from 'fast-deep-equal'; +import { omit } from '$lib/Utils'; +import type { Client } from '@urql/svelte'; import * as gql from './graphql'; -export type OmitIdentifiers<T> = Omit<T, 'id' | '__typename'>; +type Typename = '__typename'; +type Identifiers = Typename | 'id'; + +export type OmitTypename<T> = Omit<T, Typename>; +export type OmitIdentifiers<T> = Omit<T, Identifiers>; export type RequiredName<T> = T & { name: string }; +export type MutationWith<T> = ( + client: Client, + args: { ids: number[] | number; input: T } +) => Promise<unknown>; + +export function omitIdentifiers<T extends { __typename?: unknown; id: number }>( + obj: T +): OmitIdentifiers<T> { + return omit(obj, '__typename', 'id'); +} export function isSuccess(object: any): object is gql.Success { if (object.__typename === undefined) { @@ -18,57 +33,3 @@ export function isError(object: any): object is gql.Error { } return object.__typename.endsWith('Error') && (object as gql.Error).message !== undefined; } - -type Item = { - id: number | string; - name: string; -}; - -export function itemEquals(a: Item, b: Item) { - return a.name == b.name; -} - -function assocEquals(as: Item[], bs: Item[]) { - return equal( - as.map((a) => a.id), - bs.map((b) => b.id) - ); -} - -function stringEquals(a: string | null | undefined, b: string | null | undefined) { - return (a ? a : null) == (b ? b : null); -} - -export function tagEquals(a: gql.FullTag, b: gql.FullTag) { - return ( - itemEquals(a, b) && - stringEquals(a.description, b.description) && - assocEquals(a.namespaces, b.namespaces) - ); -} - -export function comicEquals( - a: gql.FullComicFragment | undefined, - b: gql.FullComicFragment | undefined -) { - if (a === undefined) return b === undefined; - if (b === undefined) return a === undefined; - - return ( - stringEquals(a.title, b.title) && - stringEquals(a.originalTitle, b.originalTitle) && - stringEquals(a.url, b.url) && - stringEquals(a.date, b.date) && - a.category == b.category && - a.rating == b.rating && - a.censorship == b.censorship && - a.language == b.language && - a.direction == b.direction && - a.layout == b.layout && - assocEquals(a.artists, b.artists) && - assocEquals(a.circles, b.circles) && - assocEquals(a.characters, b.characters) && - assocEquals(a.tags, b.tags) && - assocEquals(a.worlds, b.worlds) - ); -} diff --git a/frontend/src/lib/Actions.ts b/frontend/src/lib/Actions.ts index 7231c2f..2c15b61 100644 --- a/frontend/src/lib/Actions.ts +++ b/frontend/src/lib/Actions.ts @@ -23,28 +23,6 @@ export function debounce( }; } -export function clickOutside( - node: HTMLElement, - { handler, ignore }: { handler: () => void; ignore?: HTMLElement } -) { - const handle = (event: Event) => { - const target = event.target as HTMLElement; - if (!target || target === ignore) return; - - if (node && !node.contains(target) && !event.defaultPrevented) { - handler(); - } - }; - - document.addEventListener('click', handle, true); - - return { - destroy() { - document.removeEventListener('click', handle, true); - } - }; -} - export const focusableElements = [ 'a[href]', 'area[href]', diff --git a/frontend/src/lib/Enums.ts b/frontend/src/lib/Enums.ts index 876aec8..3264de4 100644 --- a/frontend/src/lib/Enums.ts +++ b/frontend/src/lib/Enums.ts @@ -15,6 +15,7 @@ import { UpdateMode, WorldSort } from '$gql/graphql'; +import type { Key } from './Utils'; export interface EnumOption<T> { id: T; @@ -318,8 +319,6 @@ export const censorships: EnumOption<Censorship>[] = optionsFromLabel(Censorship export const categories: EnumOption<Category>[] = optionsFromLabel(CategoryLabel); export const languages: EnumOption<Language>[] = optionsFromLabel(LanguageLabel); -function optionsFromLabel<T extends string | number | symbol>( - labels: Record<T, string> -): EnumOption<T>[] { +function optionsFromLabel<T extends Key>(labels: Record<T, string>): EnumOption<T>[] { return Object.entries(labels).map(([k, v]) => ({ id: k as T, name: v as string })); } diff --git a/frontend/src/lib/Filter.ts b/frontend/src/lib/Filter.svelte.ts index 1340eaf..8c0fa82 100644 --- a/frontend/src/lib/Filter.ts +++ b/frontend/src/lib/Filter.svelte.ts @@ -7,10 +7,8 @@ import { type TagFilter, type TagFilterInput } from '$gql/graphql'; -import { getContext, setContext } from 'svelte'; -import { writable, type Writable } from 'svelte/store'; import { navigate } from './Navigation'; -import { numKeys } from './Utils'; +import { numKeys, type Key } from './Utils'; interface FilterInput<T> { include?: T | null; @@ -21,9 +19,9 @@ interface BasicFilter { name?: { contains?: string | null } | null; } -type FilterMode = 'any' | 'all' | 'exact'; +export type FilterType = 'include' | 'exclude'; -type Key = string | number | symbol; +type FilterMode = 'any' | 'all' | 'exact'; type Filter<T, K extends Key> = Partial<Record<K, T | null>>; @@ -50,10 +48,10 @@ interface Integrateable<F> { } class ComplexMember<K extends Key> { - values: unknown[] = []; + values: unknown[] = $state([]); key: K; - mode: FilterMode; - empty?: boolean | null; + mode: FilterMode = $state('all'); + empty?: boolean | null = $state(null); constructor(key: K, mode: FilterMode) { this.key = key; @@ -72,7 +70,7 @@ class ComplexMember<K extends Key> { } export class Association<K extends Key> extends ComplexMember<K> { - values: (string | number)[] = []; + values: (string | number)[] = $state([]); constructor(key: K, mode: FilterMode, filter?: AssocFilter<string | number, K> | null) { super(key, mode); @@ -98,7 +96,7 @@ export class Association<K extends Key> extends ComplexMember<K> { } export class Enum<K extends Key> extends ComplexMember<K> { - values: string[] = []; + values: string[] = $state([]); constructor(key: K, filter?: EnumFilter<K> | null) { super(key, 'any'); @@ -118,7 +116,7 @@ export class Enum<K extends Key> extends ComplexMember<K> { class Bool<K extends Key> { key: K; - value?: boolean = undefined; + value?: boolean = $state(undefined); constructor(key: K, filter?: Filter<boolean, K> | null) { this.key = key; @@ -137,7 +135,7 @@ class Bool<K extends Key> { class Str<K extends Key> { key: K; - contains = ''; + contains = $state(''); constructor(key: K, filter?: Filter<StringFilter, K> | null) { this.key = key; @@ -245,105 +243,78 @@ function buildFilterInput<F>(include?: F, exclude?: F) { } abstract class FilterContext<F> { - include!: { controls: Controls<F>; size: number }; - exclude!: { controls: Controls<F>; size: number }; + include!: Controls<F>; + exclude!: Controls<F>; + includes = 0; + excludes = 0; - apply(params: URLSearchParams) { + apply = (params: URLSearchParams) => { navigate( { - filter: buildFilterInput( - this.include.controls.buildFilter(), - this.exclude.controls.buildFilter() - ) + filter: buildFilterInput(this.include.buildFilter(), this.exclude.buildFilter()) }, params ); - } + }; } export class ArchiveFilterContext extends FilterContext<ArchiveFilter> { - include: { controls: ArchiveFilterControls; size: number }; - exclude: { controls: ArchiveFilterControls; size: number }; + include: ArchiveFilterControls; + exclude: ArchiveFilterControls; private static ignore = ['organized']; constructor(filter: ArchiveFilterInput) { super(); - this.include = { - controls: new ArchiveFilterControls(filter.include), - size: numKeys(filter.include, ArchiveFilterContext.ignore) - }; - this.exclude = { - controls: new ArchiveFilterControls(filter.exclude), - size: numKeys(filter.exclude, ArchiveFilterContext.ignore) - }; + this.include = new ArchiveFilterControls(filter.include); + this.exclude = new ArchiveFilterControls(filter.exclude); + this.includes = numKeys(filter.include, ArchiveFilterContext.ignore); + this.excludes = numKeys(filter.exclude, ArchiveFilterContext.ignore); } } export class ComicFilterContext extends FilterContext<ComicFilter> { - include: { controls: ComicFilterControls; size: number }; - exclude: { controls: ComicFilterControls; size: number }; + include: ComicFilterControls; + exclude: ComicFilterControls; private static ignore = ['title', 'favourite', 'organized', 'bookmarked']; constructor(filter: ComicFilterInput) { super(); - this.include = { - controls: new ComicFilterControls(filter.include, 'all'), - size: numKeys(filter.include, ComicFilterContext.ignore) - }; - this.exclude = { - controls: new ComicFilterControls(filter.exclude, 'any'), - size: numKeys(filter.exclude, ComicFilterContext.ignore) - }; + this.include = new ComicFilterControls(filter.include, 'all'); + this.exclude = new ComicFilterControls(filter.exclude, 'any'); + this.includes = numKeys(filter.include, ComicFilterContext.ignore); + this.excludes = numKeys(filter.exclude, ComicFilterContext.ignore); } } export class BasicFilterContext extends FilterContext<BasicFilter> { - include: { controls: BasicFilterControls; size: number }; - exclude: { controls: BasicFilterControls; size: number }; + include: BasicFilterControls; + exclude: BasicFilterControls; constructor(filter: FilterInput<BasicFilter>) { super(); - this.include = { - controls: new BasicFilterControls(filter.include), - size: numKeys(filter.include) - }; - this.exclude = { - controls: new BasicFilterControls(), - size: 0 - }; + this.include = new BasicFilterControls(filter.include); + this.exclude = new BasicFilterControls(); } } export class TagFilterContext extends FilterContext<TagFilter> { - include: { controls: TagFilterControls; size: number }; - exclude: { controls: TagFilterControls; size: number }; + include: TagFilterControls; + exclude: TagFilterControls; private static ignore = ['name']; constructor(filter: TagFilterInput) { super(); - this.include = { - controls: new TagFilterControls(filter.include, 'all'), - size: numKeys(filter.include, TagFilterContext.ignore) - }; - this.exclude = { - controls: new TagFilterControls(filter.exclude, 'any'), - size: numKeys(filter.exclude, TagFilterContext.ignore) - }; + this.include = new TagFilterControls(filter.include, 'all'); + this.exclude = new TagFilterControls(filter.exclude, 'any'); + this.includes = numKeys(filter.include, TagFilterContext.ignore); + this.excludes = numKeys(filter.exclude, TagFilterContext.ignore); } } -export function initFilterContext<F extends FilterContext<unknown>>() { - return setContext<Writable<F>>('filter', writable()); -} - -export function getFilterContext<F extends FilterContext<unknown>>() { - return getContext<Writable<F>>('filter'); -} - export function cycleBooleanFilter(value: boolean | undefined, tristate = true) { if (tristate) { if (value === undefined) { diff --git a/frontend/src/lib/Form.ts b/frontend/src/lib/Form.ts new file mode 100644 index 0000000..ab0f4f7 --- /dev/null +++ b/frontend/src/lib/Form.ts @@ -0,0 +1,76 @@ +import type { FullComicFragment, FullTag, Namespace } from '$gql/graphql'; +import type { OmitIdentifiers } from '$gql/Utils'; +import equal from 'fast-deep-equal'; +import type { Snippet } from 'svelte'; + +export interface FormProps<I, P> { + initial: OmitIdentifiers<I>; + submit: (input: P) => void; + children?: Snippet; +} + +interface Item { + id: number | string; + name: string; +} + +function stringPending(a?: string | null, b?: string | null) { + if (a?.length === 0) { + a = null; + } + + if (b?.length === 0) { + b = null; + } + + return a !== b; +} + +function associationPending(as: Item[], bs: Item[]) { + return !equal( + as.map((a) => a.id), + bs.map((b) => b.id) + ); +} + +export function itemPending(initial: OmitIdentifiers<Item>, current: OmitIdentifiers<Item>) { + return stringPending(initial.name, current.name); +} + +export function namespacePending( + initial: OmitIdentifiers<Namespace>, + current: OmitIdentifiers<Namespace> +) { + return itemPending(initial, current) || stringPending(initial.sortName, current.sortName); +} + +export function tagPending(a: OmitIdentifiers<FullTag>, b: OmitIdentifiers<FullTag>) { + return ( + itemPending(a, b) || + stringPending(a.description, b.description) || + associationPending(a.namespaces, b.namespaces) + ); +} + +export function comicPending(a?: FullComicFragment, b?: OmitIdentifiers<FullComicFragment>) { + if (a === undefined) return b === undefined; + if (b === undefined) return a === undefined; + + return ( + stringPending(a.title, b.title) || + stringPending(a.originalTitle, b.originalTitle) || + stringPending(a.url, b.url) || + stringPending(a.date, b.date) || + a.category !== b.category || + a.rating !== b.rating || + a.censorship !== b.censorship || + a.language !== b.language || + a.direction !== b.direction || + a.layout !== b.layout || + associationPending(a.artists, b.artists) || + associationPending(a.circles, b.circles) || + associationPending(a.characters, b.characters) || + associationPending(a.tags, b.tags) || + associationPending(a.worlds, b.worlds) + ); +} diff --git a/frontend/src/lib/Navigation.ts b/frontend/src/lib/Navigation.ts index 5ed3ec5..f3bc413 100644 --- a/frontend/src/lib/Navigation.ts +++ b/frontend/src/lib/Navigation.ts @@ -1,36 +1,44 @@ import { goto as svelteGoto } from '$app/navigation'; import { SortDirection } from '$gql/graphql'; import JsonURL from '@jsonurl/jsonurl'; -import { type PaginationData } from './Pagination'; -import { type SortData } from './Sort'; import { toastError } from './Toasts'; +import type { Key } from './Utils'; -function paramToNum<T>(value: string | null, fallback: T) { - if (value) { - const number = +value; +export interface PaginationData { + page: number; + items: number; +} - if (Number.isNaN(number) || number < 0) { - return fallback; - } +export interface SortData<T extends Key> { + on: T; + direction: SortDirection; + seed: number | undefined; +} + +function number<T>(value: string | null, fallback: T) { + if (!value) return fallback; + + const number = +value; - return number; + if (Number.isNaN(number) || number < 0) { + return fallback; } - return fallback; + return number; } -export function parseSortData<T>(params: URLSearchParams, fallback: T): SortData<T> { +export function parseSortData<T extends Key>(params: URLSearchParams, fallback: T): SortData<T> { return { on: (params.get('s') as T) || fallback, direction: (params.get('d') as SortDirection) || SortDirection.Ascending, - seed: paramToNum(params.get('r'), undefined) + seed: number(params.get('r'), undefined) }; } export function parsePaginationData(params: URLSearchParams, defaultItems = 120): PaginationData { return { - page: paramToNum(params.get('p'), 1), - items: paramToNum(params.get('i'), defaultItems) + page: number(params.get('p'), 1), + items: number(params.get('i'), defaultItems) }; } @@ -62,7 +70,7 @@ interface NavigationParameters<T> { pagination?: Partial<PaginationData>; } -function paramsFrom<T>( +function parametersFrom<T>( { pagination, filter, sort }: NavigationParameters<T>, current?: URLSearchParams ) { @@ -102,13 +110,13 @@ function paramsFrom<T>( return params; } -export function navigate(parameters: NavigationParameters<object>, current?: URLSearchParams) { +export function navigate(params: NavigationParameters<object>, current?: URLSearchParams) { goto({ - params: paramsFrom(parameters, current), + params: parametersFrom(params, current), options: { noScroll: false, keepFocus: true, replaceState: true } }); } export function href<T>(base: string, params: NavigationParameters<T>) { - return `/${base}/?${paramsFrom(params).toString()}`; + return `/${base}/?${parametersFrom(params).toString()}`; } diff --git a/frontend/src/lib/Pagination.ts b/frontend/src/lib/Pagination.ts deleted file mode 100644 index f05492b..0000000 --- a/frontend/src/lib/Pagination.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { navigate } from '$lib/Navigation'; -import { getContext, setContext } from 'svelte'; -import { writable, type Writable } from 'svelte/store'; - -export interface PaginationData { - page: number; - items: number; -} - -export class PaginationContext { - page = 0; - items = 0; - total = 0; - - set update({ page, items }: PaginationData) { - this.page = page; - this.items = items; - } - - apply(params: URLSearchParams) { - navigate({ pagination: { items: this.items } }, params); - } -} - -export function initPaginationContext() { - return setContext<Writable<PaginationContext>>('pagination', writable(new PaginationContext())); -} - -export function getPaginationContext() { - return getContext<Writable<PaginationContext>>('pagination'); -} diff --git a/frontend/src/lib/Reader.ts b/frontend/src/lib/Reader.ts deleted file mode 100644 index 8777b9b..0000000 --- a/frontend/src/lib/Reader.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { Layout, type PageFragment } from '$gql/graphql'; -import { getContext, setContext } from 'svelte'; -import { writable, type Writable } from 'svelte/store'; - -export interface Chunk { - main: PageFragment; - secondary?: PageFragment; - index: number; -} - -class ReaderContext { - visible = false; - sidebar = false; - pages: PageFragment[] = []; - page = 0; - - open(page: number) { - this.page = page; - this.visible = true; - - return this; - } -} - -export function initReaderContext() { - return setContext<Writable<ReaderContext>>('reader', writable(new ReaderContext())); -} - -export function getReaderContext() { - return getContext<Writable<ReaderContext>>('reader'); -} - -export function partition(pages: PageFragment[], layout: Layout): [Chunk[], number[]] { - const single = layout === Layout.Single; - const offset = layout === Layout.DoubleOffset; - - const chunks: Chunk[] = []; - const lookup: number[] = Array<number>(pages.length); - - for (let chunkIndex = 0, pageIndex = 0; pageIndex < pages.length; chunkIndex++) { - const wide = () => pages[pageIndex].image.aspectRatio > 1; - - const nextPage = () => { - lookup[pageIndex] = chunkIndex; - return pages[pageIndex++]; - }; - - const offsetFirst = pageIndex === 0 && offset; - const full = single || wide() || offsetFirst; - - const chunk: Chunk = { index: pageIndex, main: nextPage() }; - - if (!full && pageIndex < pages.length) { - if (!wide()) { - chunk.secondary = nextPage(); - } - } - - chunks.push(chunk); - } - return [chunks, lookup]; -} diff --git a/frontend/src/lib/Selection.ts b/frontend/src/lib/Selection.ts deleted file mode 100644 index 0ea85cc..0000000 --- a/frontend/src/lib/Selection.ts +++ /dev/null @@ -1,141 +0,0 @@ -import { getContext, hasContext, setContext } from 'svelte'; -import { writable, type Writable } from 'svelte/store'; -import { range } from './Utils'; - -interface Item { - id: number; -} - -export const hasSelectionContext = () => hasContext('selection'); - -export function getSelectionContext<T extends Item>() { - return getContext<Writable<ItemSelection<T>>>('selection'); -} - -export function initSelectionContext<T extends Item>( - typename?: string, - toName?: (item: T) => string -) { - return setContext<Writable<ItemSelection<T>>>( - 'selection', - writable(new ItemSelection(typename, toName)) - ); -} - -export class ItemSelection<T extends Item> { - active = false; - typename: string; - #toName: (item: T) => string; - - #view: T[] = []; - selectable: (item: T) => boolean = () => true; - - #ids = new Set<number>(); - #masked = new Set<number>(); - - constructor(typename?: string, toName?: (item: T) => string) { - this.typename = typename ?? 'unknown'; - this.#toName = toName ?? (() => 'unknown'); - } - - set view(view: T[]) { - this.#view = view; - this.#updateMasked(); - } - - #indexOf = (id: number) => this.#view.findIndex((v) => v.id === id); - - update(index: number, shift: boolean) { - const id = this.#view[index].id; - - const selectableRange = (first: number, last: number) => - range(first, last) - .filter((i) => this.selectable(this.#view[i])) - .map((i) => this.#view[i].id); - - if (shift) { - const indices = this.indices; - - const first = indices.at(0); - const last = indices.at(-1); - - if (first === undefined || last === undefined) { - this.#ids.add(id); - } else if (index === first || index === last) { - this.#ids.clear(); - } else if (index > last) { - this.#ids = new Set([...this.#ids, ...selectableRange(last, index)]); - } else if (index < last) { - this.#ids = new Set([...this.#ids, ...selectableRange(index, last)]); - } - } else { - if (this.#ids.has(id)) { - this.#ids.delete(id); - } else { - this.#ids.add(id); - } - } - - this.#updateMasked(); - - return this; - } - - toggle() { - this.active = !this.active; - - if (!this.active) { - return this.none(); - } - - return this; - } - - all() { - this.#ids = new Set(this.#view.filter(this.selectable).map((i) => i.id)); - this.#updateMasked(); - - return this; - } - - none() { - this.#ids.clear(); - this.#masked.clear(); - - return this; - } - - clear() { - this.active = false; - - return this.none(); - } - - contains(id: number) { - return this.#masked.has(id); - } - - #updateMasked() { - this.#masked = new Set([...this.#ids].filter((i) => this.#indexOf(i) >= 0)); - } - - get ids() { - return [...this.#masked]; - } - - get size() { - return this.#masked.size; - } - - get indices() { - return [...this.#ids].map(this.#indexOf).filter((i) => i >= 0); - } - - get items() { - return this.indices.map((i) => this.#view[i]); - } - - get names() { - return this.items.map(this.#toName); - } -} diff --git a/frontend/src/lib/Shortcuts.ts b/frontend/src/lib/Shortcuts.ts index 300ddcb..1ff7679 100644 --- a/frontend/src/lib/Shortcuts.ts +++ b/frontend/src/lib/Shortcuts.ts @@ -1,5 +1,4 @@ -import { closeModal, modals } from 'svelte-modals'; -import { get } from 'svelte/store'; +import { modals } from 'svelte-modals'; type LowercaseLetter = | 'a' @@ -68,8 +67,8 @@ export function handleShortcuts(event: KeyboardEvent) { } if (event.key === 'Escape') { - if (get(modals).length > 0) { - closeModal(); + if (modals.stack.length > 0) { + modals.close(); event.preventDefault(); event.stopImmediatePropagation(); return; @@ -84,7 +83,7 @@ export function handleShortcuts(event: KeyboardEvent) { const handler = handlers.get(mode === undefined ? event.key : `${mode}${event.key}`); - if (!handler || get(modals).length > 0) { + if (!handler || modals.stack.length > 0) { mode = undefined; return; } diff --git a/frontend/src/lib/Sort.ts b/frontend/src/lib/Sort.ts deleted file mode 100644 index 4c9a353..0000000 --- a/frontend/src/lib/Sort.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { SortDirection } from '$gql/graphql'; -import { getContext, setContext } from 'svelte'; -import { writable, type Writable } from 'svelte/store'; -import { navigate } from './Navigation'; - -export interface SortData<T> { - on: T; - direction: SortDirection; - seed: number | undefined; -} - -export class SortContext<T extends string> { - on: T; - direction: SortDirection; - seed: number | undefined; - labels: Record<T, string>; - - constructor({ on, direction, seed }: SortData<T>, labels: Record<T, string>) { - this.on = on; - this.direction = direction; - this.seed = seed; - this.labels = labels; - } - - set update({ on, direction, seed }: SortData<T>) { - this.on = on; - this.direction = direction; - this.seed = seed; - } - - apply(params: URLSearchParams) { - navigate({ sort: { on: this.on, direction: this.direction, seed: this.seed } }, params); - } -} - -export function initSortContext<T extends string>(sort: SortData<T>, labels: Record<T, string>) { - return setContext<Writable<SortContext<T>>>('sort', writable(new SortContext(sort, labels))); -} - -export function getSortContext<T extends string>() { - return getContext<Writable<SortContext<T>>>('sort'); -} diff --git a/frontend/src/lib/Tabs.ts b/frontend/src/lib/Tabs.ts deleted file mode 100644 index 1c43068..0000000 --- a/frontend/src/lib/Tabs.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { getContext, setContext } from 'svelte'; -import { writable, type Writable } from 'svelte/store'; - -type Tab = string; -type Tabs = Record<Tab, { title: string; badge?: boolean }>; - -interface TabContext { - tabs: Tabs; - current: Tab; -} - -export function setTabContext(context: TabContext) { - return setContext<Writable<TabContext>>('tabs', writable(context)); -} - -export function getTabContext() { - return getContext<Writable<TabContext>>('tabs'); -} diff --git a/frontend/src/lib/Update.ts b/frontend/src/lib/Update.svelte.ts index 13aec61..1d684d5 100644 --- a/frontend/src/lib/Update.ts +++ b/frontend/src/lib/Update.svelte.ts @@ -4,8 +4,7 @@ import { type UpdateOptions, type UpdateTagInput } from '$gql/graphql'; - -type Key = string | number | symbol; +import type { Key } from './Utils'; interface AssociationUpdate { ids?: number[] | string[] | null; @@ -26,10 +25,10 @@ abstract class Entry<K extends Key> { } class Association<K extends Key> extends Entry<K> { - ids = []; - options = { + ids = $state([]); + options = $state({ mode: UpdateMode.Add - }; + }); constructor(key: K) { super(key); @@ -47,7 +46,7 @@ class Association<K extends Key> extends Entry<K> { } class Enum<K extends Key> extends Entry<K> { - value?: string = undefined; + value?: string = $state(undefined); constructor(key: K) { super(key); @@ -65,13 +64,13 @@ class Enum<K extends Key> extends Entry<K> { } abstract class Controls<I> { - toInput() { + input() { const input = {} as I; Object.values(this).forEach((v: Entry<keyof I>) => v.integrate(input)); return input; } - hasInput() { + pending() { return Object.values(this).some((i: Entry<keyof I>) => i.hasInput()); } } diff --git a/frontend/src/lib/Utils.ts b/frontend/src/lib/Utils.ts index 1a07be1..c0e5b6c 100644 --- a/frontend/src/lib/Utils.ts +++ b/frontend/src/lib/Utils.ts @@ -2,7 +2,8 @@ import { isError } from '$gql/Utils'; import type { ImageFragment } from '$gql/graphql'; import type { BeforeNavigate } from '@sveltejs/kit'; import type { OperationResultState } from '@urql/svelte'; -import { openModal } from 'svelte-modals'; +import { modals } from 'svelte-modals'; +import { toastFinally } from './Toasts'; import ConfirmDeletion from './dialogs/ConfirmDeletion.svelte'; export function range(from: number, to: number) { @@ -16,6 +17,8 @@ export function getRandomInt(min: number, max: number) { return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled); } +export type Key = string | number | symbol; + export interface ListItem { id: number | string; name: string; @@ -68,11 +71,14 @@ export function confirmDeletion( callback: () => void, warning?: string ) { - openModal( - ConfirmDeletion, - { names: Array.isArray(names) ? names : [names], typename, callback: callback, warning }, - { replace: true } - ); + modals + .open(ConfirmDeletion, { + names: Array.isArray(names) ? names : [names], + typename, + callback, + warning + }) + .catch(toastFinally); } export function idFromLabel(label: string) { @@ -106,3 +112,12 @@ export function preventOnPending({ to, cancel }: BeforeNavigate, pending: boolea cancel(); } +export function omit<T, K extends keyof T>(obj: T, ...props: K[]): Omit<T, K> { + return props.reduce( + (o, k) => { + delete o[k]; + return o; + }, + { ...obj } + ); +} diff --git a/frontend/src/lib/components/AddButton.svelte b/frontend/src/lib/components/AddButton.svelte index 9c0ab29..f07eafd 100644 --- a/frontend/src/lib/components/AddButton.svelte +++ b/frontend/src/lib/components/AddButton.svelte @@ -1,7 +1,7 @@ <script lang="ts"> - export let title: string; + let { title, onclick }: { title: string; onclick: () => void } = $props(); </script> -<button class="btn-blue" {title} on:click> - <span class="icon-base icon-[material-symbols--add]" /> +<button class="btn-blue" {title} aria-label={title} {onclick}> + <span class="icon-base icon-[material-symbols--add]"></span> </button> diff --git a/frontend/src/lib/components/Badge.svelte b/frontend/src/lib/components/Badge.svelte index 7ad3173..6f8198a 100644 --- a/frontend/src/lib/components/Badge.svelte +++ b/frontend/src/lib/components/Badge.svelte @@ -2,7 +2,7 @@ import { fadeDefault } from '$lib/Transitions'; import { fade } from 'svelte/transition'; - export let number: number; + let { number }: { number: number } = $props(); </script> {#if number > 0} diff --git a/frontend/src/lib/components/BookmarkButton.svelte b/frontend/src/lib/components/BookmarkButton.svelte index 89570e6..bdcbd75 100644 --- a/frontend/src/lib/components/BookmarkButton.svelte +++ b/frontend/src/lib/components/BookmarkButton.svelte @@ -1,9 +1,15 @@ <script lang="ts"> import Bookmark from '$lib/icons/Bookmark.svelte'; + import type { MouseEventHandler } from 'svelte/elements'; - export let bookmarked: boolean; + interface Props { + bookmarked: boolean; + onclick: MouseEventHandler<HTMLButtonElement>; + } + + let { bookmarked, onclick }: Props = $props(); </script> -<button type="button" title="Toggle bookmark" class="flex text-base" on:click> +<button type="button" title="Toggle bookmark" class="flex text-base" {onclick}> <Bookmark hoverable {bookmarked} /> </button> diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte index d209517..21181dc 100644 --- a/frontend/src/lib/components/Card.svelte +++ b/frontend/src/lib/components/Card.svelte @@ -1,4 +1,4 @@ -<script lang="ts" context="module"> +<script lang="ts" module> import type { ComicFragment, ImageFragment } from '$gql/graphql'; interface CardDetails { @@ -24,12 +24,29 @@ <script lang="ts"> import { src } from '$lib/Utils'; import Star from '$lib/icons/Star.svelte'; + import type { Snippet } from 'svelte'; - export let href: string; - export let details: CardDetails; - export let compact = false; - export let coverOnly = false; - export let ellipsis = true; + interface Props { + href: string; + details: CardDetails; + compact?: boolean; + coverOnly?: boolean; + ellipsis?: boolean; + overlay?: Snippet; + children?: Snippet; + onclick?: (event: MouseEvent) => void; + } + + let { + href, + details, + compact = false, + coverOnly = false, + ellipsis = true, + overlay, + children, + onclick + }: Props = $props(); </script> <a @@ -37,9 +54,9 @@ class="grid-card-v sm:grid-card-h focus-thick focus-blue relative grid overflow-hidden rounded bg-slate-900 shadow-md shadow-slate-950/30" class:compact class:grid-card-cover-only={coverOnly} - on:click + {onclick} > - <slot name="overlay" /> + {@render overlay?.()} {#if details.cover} <img class="h-full w-full object-cover object-[center_top]" @@ -76,7 +93,7 @@ </header> <section class="max-h-full grow overflow-auto border-t border-slate-800/80 pt-2 text-xs"> - <slot /> + {@render children?.()} </section> </article> {/if} diff --git a/frontend/src/lib/components/Cardlet.svelte b/frontend/src/lib/components/Cardlet.svelte index 04d8599..d249cc8 100644 --- a/frontend/src/lib/components/Cardlet.svelte +++ b/frontend/src/lib/components/Cardlet.svelte @@ -1,14 +1,27 @@ <script lang="ts"> import type { ComicFilter } from '$gql/graphql'; import { href } from '$lib/Navigation'; + import type { Snippet } from 'svelte'; - export let name: string; - export let title: string | null | undefined = undefined; + interface Props { + name: string; + title?: string | null; + filter?: keyof ComicFilter; + id?: number | string; + overlay?: Snippet; + onclick: (event: MouseEvent) => void; + } - export let filter: keyof ComicFilter | undefined = undefined; - export let id: number | string | undefined = undefined; + let { + name, + title = undefined, + filter = undefined, + id = undefined, + overlay, + onclick + }: Props = $props(); - const handleAux = (e: MouseEvent) => { + const onauxclick = (e: MouseEvent) => { if (filter === undefined || id === undefined || e.button !== 1) return; window.open(href('comics', { filter: { include: { [filter]: { all: [id] } } } })); }; @@ -18,10 +31,10 @@ type="button" class="relative flex overflow-hidden rounded bg-slate-900 text-left shadow-md shadow-slate-950/20" {title} - on:click - on:auxclick={handleAux} + {onclick} + {onauxclick} > - <slot name="overlay" /> + {@render overlay?.()} <article class="group h-full grow items-center gap-2 p-2 text-xs"> <h2 class="ellipsis-nowrap text-sm font-medium">{name}</h2> </article> diff --git a/frontend/src/lib/components/DeleteButton.svelte b/frontend/src/lib/components/DeleteButton.svelte index 8f5f116..bc94c8c 100644 --- a/frontend/src/lib/components/DeleteButton.svelte +++ b/frontend/src/lib/components/DeleteButton.svelte @@ -1,15 +1,22 @@ -<script> +<script lang="ts"> import { accelerator } from '$lib/Shortcuts'; + import type { MouseEventHandler } from 'svelte/elements'; - export let prominent = false; + interface Props { + prominent?: boolean; + onclick: MouseEventHandler<HTMLButtonElement>; + } + + let { prominent = false, onclick }: Props = $props(); </script> <button type="button" class={prominent ? 'btn-rose' : 'btn-slate hover:bg-rose-700'} title="Delete forever" - on:click + aria-label="Delete forever" + {onclick} use:accelerator={'Delete'} > - <span class="icon-base icon-[material-symbols--delete-forever]" /> + <span class="icon-base icon-[material-symbols--delete-forever]"></span> </button> diff --git a/frontend/src/lib/components/Dialog.svelte b/frontend/src/lib/components/Dialog.svelte index a0bbe5e..d300369 100644 --- a/frontend/src/lib/components/Dialog.svelte +++ b/frontend/src/lib/components/Dialog.svelte @@ -1,10 +1,16 @@ <script lang="ts"> import { trapFocus } from '$lib/Actions'; import { fadeDefault } from '$lib/Transitions'; - import { closeModal } from 'svelte-modals'; + import type { Snippet } from 'svelte'; + import type { ModalProps } from 'svelte-modals'; import { fade } from 'svelte/transition'; - export let isOpen: boolean; + interface Props extends ModalProps { + title: string; + children?: Snippet; + } + + let { isOpen, close, title, children }: Props = $props(); </script> {#if isOpen} @@ -18,18 +24,19 @@ class="pointer-events-auto flex flex-col rounded-md bg-slate-800 shadow-md shadow-slate-900" > <header class="flex items-center gap-1 border-b-2 border-slate-700/50 p-2"> - <slot name="header" /> + <h2>{title}</h2> <button type="button" class="ml-auto flex items-center text-white/30 hover:text-white" title="Cancel" - on:click={closeModal} + aria-label="Cancel" + onclick={close} > - <span class="icon-base icon-[material-symbols--close]" /> + <span class="icon-base icon-[material-symbols--close]"></span> </button> </header> <main class="m-3 w-80 sm:w-[34rem]"> - <slot /> + {@render children?.()} </main> </div> </div> diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte index 9e935e4..ddd20a0 100644 --- a/frontend/src/lib/components/Dropdown.svelte +++ b/frontend/src/lib/components/Dropdown.svelte @@ -1,18 +1,37 @@ <script lang="ts"> - import { clickOutside } from '$lib/Actions'; import { fadeFast } from '$lib/Transitions'; + import type { Snippet } from 'svelte'; import { fade } from 'svelte/transition'; - export let visible: boolean; - export let parent: HTMLElement; + interface Props { + button: Snippet<[() => void]>; + children?: Snippet; + } + + let { button, children }: Props = $props(); + + let visible = $state(false); + + function onfocusout(event: FocusEvent & { currentTarget: EventTarget & HTMLDivElement }) { + if ( + event.relatedTarget instanceof HTMLElement && + event.currentTarget.contains(event.relatedTarget) + ) { + return; + } + + visible = false; + } </script> -{#if visible} - <div - class="absolute z-[1] mt-1 w-max rounded bg-slate-700 p-1 shadow-sm shadow-slate-900" - transition:fade={fadeFast} - use:clickOutside={{ handler: () => (visible = false), ignore: parent }} - > - <slot /> - </div> -{/if} +<div class="relative" {onfocusout}> + {@render button(() => (visible = !visible))} + {#if visible} + <div + class="absolute z-[1] mt-1 w-max rounded bg-slate-700 p-1 shadow-sm shadow-slate-900" + transition:fade={fadeFast} + > + {@render children?.()} + </div> + {/if} +</div> diff --git a/frontend/src/lib/components/Expander.svelte b/frontend/src/lib/components/Expander.svelte index a382658..8f23042 100644 --- a/frontend/src/lib/components/Expander.svelte +++ b/frontend/src/lib/components/Expander.svelte @@ -1,17 +1,21 @@ <script lang="ts"> - export let expanded: boolean; - export let title: string; + interface Props { + expanded: boolean; + title: string; + } + + let { expanded = $bindable(), title }: Props = $props(); + + function onclick() { + expanded = !expanded; + } </script> -<button - class="flex items-center text-base hover:text-white" - type="button" - on:click={() => (expanded = !expanded)} -> +<button class="flex items-center text-base hover:text-white" type="button" {onclick}> {#if expanded} - <span class="icon-base icon-[material-symbols--expand-less]" /> + <span class="icon-base icon-[material-symbols--expand-less]"></span> {:else} - <span class="icon-base icon-[material-symbols--expand-more]" /> + <span class="icon-base icon-[material-symbols--expand-more]"></span> {/if} {title} </button> diff --git a/frontend/src/lib/components/Guard.svelte b/frontend/src/lib/components/Guard.svelte index fd7ded4..38cbd65 100644 --- a/frontend/src/lib/components/Guard.svelte +++ b/frontend/src/lib/components/Guard.svelte @@ -1,9 +1,10 @@ <script lang="ts"> import { getResultState } from '$lib/Utils'; + import type { OperationResultStore } from '@urql/svelte'; import Spinner from './Spinner.svelte'; - export let result; - $: state = getResultState($result); + let { result }: { result: OperationResultStore } = $props(); + let state = $derived(getResultState($result)); </script> {#if state.fetching} diff --git a/frontend/src/lib/components/Head.svelte b/frontend/src/lib/components/Head.svelte index b4aed5b..5ddd543 100644 --- a/frontend/src/lib/components/Head.svelte +++ b/frontend/src/lib/components/Head.svelte @@ -1,6 +1,5 @@ <script lang="ts"> - export let section: string; - export let title = ''; + let { section, title = '' }: { section: string; title?: string } = $props(); function formatTitle(section: string, title?: string) { return [title, section, 'hircine'].filter((i) => i).join(' · '); diff --git a/frontend/src/lib/components/Labelled.svelte b/frontend/src/lib/components/Labelled.svelte deleted file mode 100644 index 4b36ad6..0000000 --- a/frontend/src/lib/components/Labelled.svelte +++ /dev/null @@ -1,10 +0,0 @@ -<script lang="ts"> - import { idFromLabel } from '$lib/Utils'; - - export let label: string; - - const id = idFromLabel(label); -</script> - -<label class="self-center" for={id}>{label}</label> -<slot {id} /> diff --git a/frontend/src/lib/components/LabelledBlock.svelte b/frontend/src/lib/components/LabelledBlock.svelte index feb563e..8f93667 100644 --- a/frontend/src/lib/components/LabelledBlock.svelte +++ b/frontend/src/lib/components/LabelledBlock.svelte @@ -1,7 +1,14 @@ <script lang="ts"> import { idFromLabel } from '$lib/Utils'; + import type { Snippet } from 'svelte'; - export let label: string; + interface Props { + label: string; + side?: Snippet; + children?: Snippet<[{ id: string }]>; + } + + let { label, side, children }: Props = $props(); const id = idFromLabel(label); </script> @@ -9,10 +16,10 @@ <div class="flex flex-col"> <div class="flex"> <label for={id}>{label}</label> - {#if $$slots.controls} - <div class="grow" /> - <slot name="controls" /> + {#if side} + <div class="grow"></div> + {@render side?.()} {/if} </div> - <slot {id} /> + {@render children?.({ id })} </div> diff --git a/frontend/src/lib/components/OrganizedButton.svelte b/frontend/src/lib/components/OrganizedButton.svelte index 9be985c..3838f7d 100644 --- a/frontend/src/lib/components/OrganizedButton.svelte +++ b/frontend/src/lib/components/OrganizedButton.svelte @@ -1,9 +1,15 @@ <script lang="ts"> import Organized from '$lib/icons/Organized.svelte'; + import type { MouseEventHandler } from 'svelte/elements'; - export let organized: boolean; + interface Props { + organized: boolean; + onclick: MouseEventHandler<HTMLButtonElement>; + } + + let { organized, onclick }: Props = $props(); </script> -<button type="button" title="Toggle organized" class="flex text-base" on:click> +<button type="button" title="Toggle organized" class="flex text-base" {onclick}> <Organized hoverable {organized} /> </button> diff --git a/frontend/src/lib/components/RefreshButton.svelte b/frontend/src/lib/components/RefreshButton.svelte index afab640..70ee2d1 100644 --- a/frontend/src/lib/components/RefreshButton.svelte +++ b/frontend/src/lib/components/RefreshButton.svelte @@ -1,3 +1,9 @@ -<button class="btn-blue" title="Refresh" on:click> - <span class="icon-base icon-[material-symbols--sync]" /> +<script lang="ts"> + import type { MouseEventHandler } from 'svelte/elements'; + + let { onclick }: { onclick: MouseEventHandler<HTMLButtonElement> } = $props(); +</script> + +<button class="btn-blue" title="Refresh" aria-label="Refresh" {onclick}> + <span class="icon-base icon-[material-symbols--sync]"></span> </button> diff --git a/frontend/src/lib/components/RemovePageButton.svelte b/frontend/src/lib/components/RemovePageButton.svelte index e23c079..8045f32 100644 --- a/frontend/src/lib/components/RemovePageButton.svelte +++ b/frontend/src/lib/components/RemovePageButton.svelte @@ -1,13 +1,17 @@ <script lang="ts"> import { accelerator } from '$lib/Shortcuts'; + import type { MouseEventHandler } from 'svelte/elements'; + + let { onclick }: { onclick: MouseEventHandler<HTMLButtonElement> } = $props(); </script> <button type="button" class="btn-rose" title="Remove selected pages" - on:click + aria-label="Remove selected pages" + {onclick} use:accelerator={'Delete'} > - <span class="icon-base icon-[material-symbols--scan-delete]" /> + <span class="icon-base icon-[material-symbols--scan-delete]"></span> </button> diff --git a/frontend/src/lib/components/Select.svelte b/frontend/src/lib/components/Select.svelte index dece4a5..44828d3 100644 --- a/frontend/src/lib/components/Select.svelte +++ b/frontend/src/lib/components/Select.svelte @@ -2,19 +2,28 @@ import type { ListItem } from '$lib/Utils'; import Svelecte from 'svelecte'; - let inputId: string; - let valueAsObject = false; - let multiple = false; - type Item = number | string | ListItem; type Value = Item | Item[] | undefined | null; - export let clearable = false; - export let placeholder = 'Select...'; - export let options: ListItem[] | undefined; - export let value: Value; + interface Props { + id: string; + object?: boolean; + multi?: boolean; + clearable?: boolean; + placeholder?: string; + options: ListItem[] | undefined; + value: Value; + } - export { inputId as id, valueAsObject as object, multiple as multi }; + let { + id: inputId, + object: valueAsObject = false, + multi: multiple = false, + clearable = false, + placeholder = 'Select...', + options, + value = $bindable() + }: Props = $props(); </script> {#if options !== null && options !== undefined} diff --git a/frontend/src/lib/components/Spinner.svelte b/frontend/src/lib/components/Spinner.svelte index 946329c..1a471a7 100644 --- a/frontend/src/lib/components/Spinner.svelte +++ b/frontend/src/lib/components/Spinner.svelte @@ -1,7 +1,7 @@ <script lang="ts"> import { onDestroy } from 'svelte'; - let show = false; + let show = $state(false); const timeout = setTimeout(() => (show = true), 150); onDestroy(() => clearTimeout(timeout)); @@ -9,7 +9,7 @@ {#if show} <div class="flex h-full w-full items-center justify-center"> - <span class="spinner" /> + <span class="spinner"></span> </div> {/if} diff --git a/frontend/src/lib/components/SubmitButton.svelte b/frontend/src/lib/components/SubmitButton.svelte index 8ac90b9..3b89ba7 100644 --- a/frontend/src/lib/components/SubmitButton.svelte +++ b/frontend/src/lib/components/SubmitButton.svelte @@ -1,7 +1,7 @@ <script lang="ts"> - export let active = false; + let { pending = false }: { pending?: boolean } = $props(); - $: title = active ? 'Save pending changes' : 'Save (no changes pending)'; + let title = $derived(pending ? 'Save pending changes' : 'Save (no changes pending)'); </script> -<button type="submit" class:active class="btn-slate [&.active]:btn-blue" {title}>Save</button> +<button type="submit" class:pending class="btn-slate [&.pending]:btn-blue" {title}>Save</button> diff --git a/frontend/src/lib/components/Titlebar.svelte b/frontend/src/lib/components/Titlebar.svelte index 2cdfa70..fe28cfe 100644 --- a/frontend/src/lib/components/Titlebar.svelte +++ b/frontend/src/lib/components/Titlebar.svelte @@ -1,12 +1,15 @@ <script lang="ts"> import Star from '$lib/icons/Star.svelte'; - import { createEventDispatcher } from 'svelte'; + import type { MouseEventHandler } from 'svelte/elements'; - export let title: string; - export let subtitle: string | null = ''; - export let favourite: boolean | undefined = undefined; + interface Props { + title: string; + subtitle?: string | null; + favourite?: boolean; + onfavourite?: MouseEventHandler<HTMLButtonElement>; + } - const dispatch = createEventDispatcher<{ favourite: null }>(); + let { title, subtitle, favourite, onfavourite }: Props = $props(); </script> <div class="flex flex-wrap gap-x-4"> @@ -16,7 +19,7 @@ type="button" class="focus-background mr-1 flex items-center" title="Toggle favourite" - on:click={() => dispatch('favourite')} + onclick={onfavourite} > <Star large hoverable {favourite} /> </button> diff --git a/frontend/src/lib/containers/Cardlets.svelte b/frontend/src/lib/containers/Cardlets.svelte index 129da61..5997a69 100644 --- a/frontend/src/lib/containers/Cardlets.svelte +++ b/frontend/src/lib/containers/Cardlets.svelte @@ -1,11 +1,13 @@ <script> import { fadeDefault } from '$lib/Transitions'; import { fade } from 'svelte/transition'; + + let { children } = $props(); </script> <div class="grid gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 min-[1600px]:grid-cols-8 min-[1920px]:grid-cols-10" in:fade={fadeDefault} > - <slot /> + {@render children?.()} </div> diff --git a/frontend/src/lib/containers/Cards.svelte b/frontend/src/lib/containers/Cards.svelte index a19e8be..36a4b86 100644 --- a/frontend/src/lib/containers/Cards.svelte +++ b/frontend/src/lib/containers/Cards.svelte @@ -1,8 +1,10 @@ <script> import { fadeDefault } from '$lib/Transitions'; import { fade } from 'svelte/transition'; + + let { children } = $props(); </script> <div class="grid gap-4 xl:grid-cols-2 min-[1920px]:grid-cols-3" in:fade|global={fadeDefault}> - <slot /> + {@render children?.()} </div> diff --git a/frontend/src/lib/containers/Carousel.svelte b/frontend/src/lib/containers/Carousel.svelte index 1268a78..fb05b7d 100644 --- a/frontend/src/lib/containers/Carousel.svelte +++ b/frontend/src/lib/containers/Carousel.svelte @@ -1,6 +1,13 @@ <script lang="ts"> - export let title: string; - export let href: string; + import type { Snippet } from 'svelte'; + + interface Props { + title: string; + href: string; + children?: Snippet; + } + + let { title, href, children }: Props = $props(); </script> <div class="flex flex-col gap-1"> @@ -10,6 +17,6 @@ </a> </h2> <div class="flex flex-wrap gap-5"> - <slot /> + {@render children?.()} </div> </div> diff --git a/frontend/src/lib/containers/Column.svelte b/frontend/src/lib/containers/Column.svelte index 05daece..fe5ac47 100644 --- a/frontend/src/lib/containers/Column.svelte +++ b/frontend/src/lib/containers/Column.svelte @@ -1,3 +1,7 @@ +<script> + let { children } = $props(); +</script> + <div class="flex flex-col gap-4"> - <slot /> + {@render children?.()} </div> diff --git a/frontend/src/lib/containers/Grid.svelte b/frontend/src/lib/containers/Grid.svelte index 1224156..af5125a 100644 --- a/frontend/src/lib/containers/Grid.svelte +++ b/frontend/src/lib/containers/Grid.svelte @@ -1,14 +1,16 @@ -<script> +<script lang="ts"> import { fadeDefault } from '$lib/Transitions'; - + import type { Snippet } from 'svelte'; import { fade } from 'svelte/transition'; + + let { children }: { children?: Snippet } = $props(); </script> <div class="flex flex-col gap-1 lg:grid lg:h-full lg:max-h-full lg:overflow-auto" in:fade|global={fadeDefault} > - <slot /> + {@render children?.()} </div> <style> diff --git a/frontend/src/lib/dialogs/AddArtist.svelte b/frontend/src/lib/dialogs/AddArtist.svelte index 6ec93c5..9fc2ca1 100644 --- a/frontend/src/lib/dialogs/AddArtist.svelte +++ b/frontend/src/lib/dialogs/AddArtist.svelte @@ -1,30 +1,22 @@ <script lang="ts"> - import { addArtist, type ArtistInput } from '$gql/Mutations'; + import type { AddArtistInput } from '$gql/graphql'; + import { addArtist } from '$gql/Mutations'; import Dialog from '$lib/components/Dialog.svelte'; - import SubmitButton from '$lib/components/SubmitButton.svelte'; import ArtistForm from '$lib/forms/ArtistForm.svelte'; import { toastFinally } from '$lib/Toasts'; import { getContextClient } from '@urql/svelte'; - import { closeModal } from 'svelte-modals'; + import type { ModalProps } from 'svelte-modals'; const client = getContextClient(); - export let isOpen: boolean; + let modal: ModalProps = $props(); + const initial = { name: '' }; - let artist = { name: '' }; - - function add(event: CustomEvent<ArtistInput>) { - addArtist(client, { input: event.detail }).then(closeModal).catch(toastFinally); + function submit(input: AddArtistInput) { + addArtist(client, { input }).then(modal.close).catch(toastFinally); } </script> -<Dialog {isOpen}> - <svelte:fragment slot="header"> - <h2>Add Artist</h2> - </svelte:fragment> - <ArtistForm bind:artist on:submit={add}> - <div class="flex justify-end gap-4"> - <SubmitButton active={artist.name.length > 0} /> - </div> - </ArtistForm> +<Dialog title="Add Artist" {...modal}> + <ArtistForm {initial} {submit} /> </Dialog> diff --git a/frontend/src/lib/dialogs/AddCharacter.svelte b/frontend/src/lib/dialogs/AddCharacter.svelte index 23fea08..1585e34 100644 --- a/frontend/src/lib/dialogs/AddCharacter.svelte +++ b/frontend/src/lib/dialogs/AddCharacter.svelte @@ -1,30 +1,22 @@ <script lang="ts"> - import { addCharacter, type CharacterInput } from '$gql/Mutations'; + import type { AddCharacterInput } from '$gql/graphql'; + import { addCharacter } from '$gql/Mutations'; import Dialog from '$lib/components/Dialog.svelte'; - import SubmitButton from '$lib/components/SubmitButton.svelte'; import CharacterForm from '$lib/forms/CharacterForm.svelte'; import { toastFinally } from '$lib/Toasts'; import { getContextClient } from '@urql/svelte'; - import { closeModal } from 'svelte-modals'; + import type { ModalProps } from 'svelte-modals'; const client = getContextClient(); - export let isOpen: boolean; + let modal: ModalProps = $props(); + const initial = { name: '' }; - let character = { name: '' }; - - function add(event: CustomEvent<CharacterInput>) { - addCharacter(client, { input: event.detail }).then(closeModal).catch(toastFinally); + function submit(input: AddCharacterInput) { + addCharacter(client, { input }).then(modal.close).catch(toastFinally); } </script> -<Dialog {isOpen}> - <svelte:fragment slot="header"> - <h2>Add Character</h2> - </svelte:fragment> - <CharacterForm bind:character on:submit={add}> - <div class="flex justify-end gap-4"> - <SubmitButton active={character.name.length > 0} /> - </div> - </CharacterForm> +<Dialog title="Add Character" {...modal}> + <CharacterForm {initial} {submit} /> </Dialog> diff --git a/frontend/src/lib/dialogs/AddCircle.svelte b/frontend/src/lib/dialogs/AddCircle.svelte index f0ef014..faffc63 100644 --- a/frontend/src/lib/dialogs/AddCircle.svelte +++ b/frontend/src/lib/dialogs/AddCircle.svelte @@ -1,30 +1,22 @@ <script lang="ts"> - import { addCircle, type CircleInput } from '$gql/Mutations'; + import type { AddCircleInput } from '$gql/graphql'; + import { addCircle } from '$gql/Mutations'; import Dialog from '$lib/components/Dialog.svelte'; - import SubmitButton from '$lib/components/SubmitButton.svelte'; import CircleForm from '$lib/forms/CircleForm.svelte'; import { toastFinally } from '$lib/Toasts'; import { getContextClient } from '@urql/svelte'; - import { closeModal } from 'svelte-modals'; + import type { ModalProps } from 'svelte-modals'; const client = getContextClient(); - export let isOpen: boolean; + let modal: ModalProps = $props(); + const initial = { name: '' }; - let circle = { name: '' }; - - function add(event: CustomEvent<CircleInput>) { - addCircle(client, { input: event.detail }).then(closeModal).catch(toastFinally); + function submit(input: AddCircleInput) { + addCircle(client, { input }).then(modal.close).catch(toastFinally); } </script> -<Dialog {isOpen}> - <svelte:fragment slot="header"> - <h2>Add Circle</h2> - </svelte:fragment> - <CircleForm bind:circle on:submit={add}> - <div class="flex justify-end gap-4"> - <SubmitButton active={circle.name.length > 0} /> - </div> - </CircleForm> +<Dialog title="Add Circle" {...modal}> + <CircleForm {initial} {submit} /> </Dialog> diff --git a/frontend/src/lib/dialogs/AddNamespace.svelte b/frontend/src/lib/dialogs/AddNamespace.svelte index e81b22a..45183f4 100644 --- a/frontend/src/lib/dialogs/AddNamespace.svelte +++ b/frontend/src/lib/dialogs/AddNamespace.svelte @@ -1,30 +1,22 @@ <script lang="ts"> - import { addNamespace, type NamespaceInput } from '$gql/Mutations'; + import type { AddNamespaceInput } from '$gql/graphql'; + import { addNamespace } from '$gql/Mutations'; import Dialog from '$lib/components/Dialog.svelte'; - import SubmitButton from '$lib/components/SubmitButton.svelte'; import NamespaceForm from '$lib/forms/NamespaceForm.svelte'; import { toastFinally } from '$lib/Toasts'; import { getContextClient } from '@urql/svelte'; - import { closeModal } from 'svelte-modals'; + import type { ModalProps } from 'svelte-modals'; const client = getContextClient(); - export let isOpen: boolean; + let modal: ModalProps = $props(); + const initial = { name: '' }; - let namespace = { name: '' }; - - function add(event: CustomEvent<NamespaceInput>) { - addNamespace(client, { input: event.detail }).then(closeModal).catch(toastFinally); + function submit(input: AddNamespaceInput) { + addNamespace(client, { input }).then(modal.close).catch(toastFinally); } </script> -<Dialog {isOpen}> - <svelte:fragment slot="header"> - <h2>Add Namespace</h2> - </svelte:fragment> - <NamespaceForm bind:namespace on:submit={add}> - <div class="flex justify-end gap-4"> - <SubmitButton active={namespace.name.length > 0} /> - </div> - </NamespaceForm> +<Dialog title="Add Namespace" {...modal}> + <NamespaceForm {initial} {submit} /> </Dialog> diff --git a/frontend/src/lib/dialogs/AddTag.svelte b/frontend/src/lib/dialogs/AddTag.svelte index 00d3a03..da78bce 100644 --- a/frontend/src/lib/dialogs/AddTag.svelte +++ b/frontend/src/lib/dialogs/AddTag.svelte @@ -1,30 +1,22 @@ <script lang="ts"> - import { addTag, type TagInput } from '$gql/Mutations'; + import type { AddTagInput } from '$gql/graphql'; + import { addTag } from '$gql/Mutations'; import Dialog from '$lib/components/Dialog.svelte'; - import SubmitButton from '$lib/components/SubmitButton.svelte'; import TagForm from '$lib/forms/TagForm.svelte'; import { toastFinally } from '$lib/Toasts'; import { getContextClient } from '@urql/svelte'; - import { closeModal } from 'svelte-modals'; + import { type ModalProps } from 'svelte-modals'; const client = getContextClient(); - export let isOpen: boolean; + let modal: ModalProps = $props(); + const initial = { name: '', namespaces: [] }; - let tag = { name: '', namespaces: [] }; - - function add(event: CustomEvent<TagInput>) { - addTag(client, { input: event.detail }).then(closeModal).catch(toastFinally); + function submit(input: AddTagInput) { + addTag(client, { input }).then(modal.close).catch(toastFinally); } </script> -<Dialog {isOpen}> - <svelte:fragment slot="header"> - <h2>Add Tag</h2> - </svelte:fragment> - <TagForm bind:tag on:submit={add}> - <div class="flex justify-end gap-4"> - <SubmitButton active={tag.name.length > 0} /> - </div> - </TagForm> +<Dialog title="Add Tag" {...modal}> + <TagForm {initial} {submit} /> </Dialog> diff --git a/frontend/src/lib/dialogs/AddWorld.svelte b/frontend/src/lib/dialogs/AddWorld.svelte index ceb946e..075d872 100644 --- a/frontend/src/lib/dialogs/AddWorld.svelte +++ b/frontend/src/lib/dialogs/AddWorld.svelte @@ -1,30 +1,22 @@ <script lang="ts"> - import { addWorld, type WorldInput } from '$gql/Mutations'; + import type { AddWorldInput } from '$gql/graphql'; + import { addWorld } from '$gql/Mutations'; import Dialog from '$lib/components/Dialog.svelte'; - import SubmitButton from '$lib/components/SubmitButton.svelte'; import WorldForm from '$lib/forms/WorldForm.svelte'; import { toastFinally } from '$lib/Toasts'; import { getContextClient } from '@urql/svelte'; - import { closeModal } from 'svelte-modals'; + import type { ModalProps } from 'svelte-modals'; const client = getContextClient(); - export let isOpen: boolean; + let modal: ModalProps = $props(); + const initial = { name: '' }; - let world = { name: '' }; - - function add(event: CustomEvent<WorldInput>) { - addWorld(client, { input: event.detail }).then(closeModal).catch(toastFinally); + function submit(input: AddWorldInput) { + addWorld(client, { input }).then(modal.close).catch(toastFinally); } </script> -<Dialog {isOpen}> - <svelte:fragment slot="header"> - <h2>Add World</h2> - </svelte:fragment> - <WorldForm bind:world on:submit={add}> - <div class="flex justify-end gap-4"> - <SubmitButton active={world.name.length > 0} /> - </div> - </WorldForm> +<Dialog title="Add World" {...modal}> + <WorldForm {initial} {submit} /> </Dialog> diff --git a/frontend/src/lib/dialogs/ConfirmDeletion.svelte b/frontend/src/lib/dialogs/ConfirmDeletion.svelte index 6b0cbf8..571fd05 100644 --- a/frontend/src/lib/dialogs/ConfirmDeletion.svelte +++ b/frontend/src/lib/dialogs/ConfirmDeletion.svelte @@ -1,29 +1,30 @@ <script lang="ts"> import { accelerator } from '$lib/Shortcuts'; import Dialog from '$lib/components/Dialog.svelte'; - import { closeModal } from 'svelte-modals'; + import type { ModalProps } from 'svelte-modals'; - export let isOpen: boolean; - export let callback: () => void; + interface Props extends ModalProps { + callback: () => void; + names: string[]; + typename: string; + warning?: string; + } + + let { callback, names, typename, warning = undefined, ...modal }: Props = $props(); - export let names: string[]; - export let typename: string; - export let warning: string | undefined = undefined; const multiple = names.length > 1; const formattedTypename = multiple ? `${typename}s` : typename; const formattedNames = multiple ? `${names.length} ${formattedTypename}` : names[0]; - function confirm() { + function confirm(event: SubmitEvent) { + event.preventDefault(); callback(); - closeModal(); + modal.close(); } </script> -<Dialog {isOpen}> - <svelte:fragment slot="header"> - <h2>Delete {formattedTypename}</h2> - </svelte:fragment> - <form on:submit|preventDefault={confirm}> +<Dialog title="Delete {formattedTypename}" {...modal}> + <form onsubmit={confirm}> <div class="flex flex-col"> <p class="mb-3"> Are you sure you want to delete <span class="font-semibold">{formattedNames}</span>? @@ -39,13 +40,13 @@ {/if} {/if} {#if warning} - <p class="font-medium text-red-600">Warning: {warning}</p> + <p class="font-semibold text-rose-600">Warning: {warning}</p> {/if} </div> <div class="flex justify-end gap-4"> <button type="submit" class="btn-rose" use:accelerator={'Enter'}>Delete</button> - <button type="button" on:click={closeModal} class="btn-slate">Cancel</button> + <button type="button" onclick={() => modal.close()} class="btn-slate">Cancel</button> </div> </form> </Dialog> diff --git a/frontend/src/lib/dialogs/EditArtist.svelte b/frontend/src/lib/dialogs/EditArtist.svelte index dd08bc6..fa5c143 100644 --- a/frontend/src/lib/dialogs/EditArtist.svelte +++ b/frontend/src/lib/dialogs/EditArtist.svelte @@ -1,46 +1,37 @@ <script lang="ts"> - import { deleteArtists, updateArtists, type ArtistInput } from '$gql/Mutations'; - import { itemEquals } from '$gql/Utils'; - import { type Artist } from '$gql/graphql'; + import { deleteArtists, updateArtists } from '$gql/Mutations'; + import { omitIdentifiers } from '$gql/Utils'; + import type { Artist, UpdateArtistInput } from '$gql/graphql'; import { toastFinally } from '$lib/Toasts'; import { confirmDeletion } from '$lib/Utils'; import DeleteButton from '$lib/components/DeleteButton.svelte'; import Dialog from '$lib/components/Dialog.svelte'; - import SubmitButton from '$lib/components/SubmitButton.svelte'; import ArtistForm from '$lib/forms/ArtistForm.svelte'; import { getContextClient } from '@urql/svelte'; - import { closeModal } from 'svelte-modals'; + import type { ModalProps } from 'svelte-modals'; const client = getContextClient(); - export let isOpen: boolean; + interface Props extends ModalProps { + artist: Artist; + } - export let artist: Artist; - const original = structuredClone(artist); - $: pending = !itemEquals(artist, original); + let { artist, ...modal }: Props = $props(); + const initial = omitIdentifiers(artist); - function save(event: CustomEvent<ArtistInput>) { - updateArtists(client, { ids: artist.id, input: event.detail }) - .then(closeModal) - .catch(toastFinally); + function submit(input: UpdateArtistInput) { + updateArtists(client, { ids: artist.id, input }).then(modal.close).catch(toastFinally); } function deleteArtist() { confirmDeletion('Artist', artist.name, () => { - deleteArtists(client, { ids: artist.id }).then(closeModal).catch(toastFinally); + deleteArtists(client, { ids: artist.id }).then(modal.close).catch(toastFinally); }); } </script> -<Dialog {isOpen}> - <svelte:fragment slot="header"> - <h2>Edit Artist</h2> - </svelte:fragment> - <ArtistForm bind:artist on:submit={save}> - <div class="flex gap-4"> - <DeleteButton on:click={deleteArtist} /> - <div class="grow" /> - <SubmitButton active={pending} /> - </div> +<Dialog title="Edit Artist" {...modal}> + <ArtistForm {initial} {submit}> + <DeleteButton onclick={deleteArtist} /> </ArtistForm> </Dialog> diff --git a/frontend/src/lib/dialogs/EditCharacter.svelte b/frontend/src/lib/dialogs/EditCharacter.svelte index 3b45e78..71125db 100644 --- a/frontend/src/lib/dialogs/EditCharacter.svelte +++ b/frontend/src/lib/dialogs/EditCharacter.svelte @@ -1,46 +1,37 @@ <script lang="ts"> - import { deleteCharacters, updateCharacters, type CharacterInput } from '$gql/Mutations'; - import { itemEquals } from '$gql/Utils'; - import { type Character } from '$gql/graphql'; + import { deleteCharacters, updateCharacters } from '$gql/Mutations'; + import { omitIdentifiers } from '$gql/Utils'; + import type { Character, UpdateCharacterInput } from '$gql/graphql'; import { toastFinally } from '$lib/Toasts'; import { confirmDeletion } from '$lib/Utils'; import DeleteButton from '$lib/components/DeleteButton.svelte'; import Dialog from '$lib/components/Dialog.svelte'; - import SubmitButton from '$lib/components/SubmitButton.svelte'; import CharacterForm from '$lib/forms/CharacterForm.svelte'; import { getContextClient } from '@urql/svelte'; - import { closeModal } from 'svelte-modals'; + import type { ModalProps } from 'svelte-modals'; const client = getContextClient(); - export let isOpen: boolean; + interface Props extends ModalProps { + character: Character; + } - export let character: Character; - const original = structuredClone(character); - $: pending = !itemEquals(original, character); + let { character, ...modal }: Props = $props(); + const initial = omitIdentifiers(character); - function save(event: CustomEvent<CharacterInput>) { - updateCharacters(client, { ids: character.id, input: event.detail }) - .then(closeModal) - .catch(toastFinally); + function submit(input: UpdateCharacterInput) { + updateCharacters(client, { ids: character.id, input }).then(modal.close).catch(toastFinally); } function deleteCharacter() { confirmDeletion('Character', character.name, () => { - deleteCharacters(client, { ids: character.id }).then(closeModal).catch(toastFinally); + deleteCharacters(client, { ids: character.id }).then(modal.close).catch(toastFinally); }); } </script> -<Dialog {isOpen}> - <svelte:fragment slot="header"> - <h2>Edit Character</h2> - </svelte:fragment> - <CharacterForm bind:character on:submit={save}> - <div class="flex gap-4"> - <DeleteButton on:click={deleteCharacter} /> - <div class="grow" /> - <SubmitButton active={pending} /> - </div> +<Dialog title="Edit Character" {...modal}> + <CharacterForm {initial} {submit}> + <DeleteButton onclick={deleteCharacter} /> </CharacterForm> </Dialog> diff --git a/frontend/src/lib/dialogs/EditCircle.svelte b/frontend/src/lib/dialogs/EditCircle.svelte index bdc1217..7cb0f14 100644 --- a/frontend/src/lib/dialogs/EditCircle.svelte +++ b/frontend/src/lib/dialogs/EditCircle.svelte @@ -1,46 +1,37 @@ <script lang="ts"> - import { deleteCircles, updateCircles, type CircleInput } from '$gql/Mutations'; - import { itemEquals } from '$gql/Utils'; - import { type Circle } from '$gql/graphql'; + import { deleteCircles, updateCircles } from '$gql/Mutations'; + import { omitIdentifiers } from '$gql/Utils'; + import type { Circle, UpdateCircleInput } from '$gql/graphql'; import { toastFinally } from '$lib/Toasts'; import { confirmDeletion } from '$lib/Utils'; import DeleteButton from '$lib/components/DeleteButton.svelte'; import Dialog from '$lib/components/Dialog.svelte'; - import SubmitButton from '$lib/components/SubmitButton.svelte'; import CircleForm from '$lib/forms/CircleForm.svelte'; import { getContextClient } from '@urql/svelte'; - import { closeModal } from 'svelte-modals'; + import type { ModalProps } from 'svelte-modals'; const client = getContextClient(); - export let isOpen: boolean; + interface Props extends ModalProps { + circle: Circle; + } - export let circle: Circle; - const original = structuredClone(circle); - $: pending = !itemEquals(original, circle); + let { circle, ...modal }: Props = $props(); + const initial = omitIdentifiers(circle); - function save(event: CustomEvent<CircleInput>) { - updateCircles(client, { ids: circle.id, input: event.detail }) - .then(closeModal) - .catch(toastFinally); + function submit(input: UpdateCircleInput) { + updateCircles(client, { ids: circle.id, input }).then(modal.close).catch(toastFinally); } function deleteCircle() { confirmDeletion('Circle', circle.name, () => { - deleteCircles(client, { ids: circle.id }).then(closeModal).catch(toastFinally); + deleteCircles(client, { ids: circle.id }).then(modal.close).catch(toastFinally); }); } </script> -<Dialog {isOpen}> - <svelte:fragment slot="header"> - <h2>Edit Circle</h2> - </svelte:fragment> - <CircleForm bind:circle on:submit={save}> - <div class="flex gap-4"> - <DeleteButton on:click={deleteCircle} /> - <div class="grow" /> - <SubmitButton active={pending} /> - </div> +<Dialog title="Edit Circle" {...modal}> + <CircleForm {initial} {submit}> + <DeleteButton onclick={deleteCircle} /> </CircleForm> </Dialog> diff --git a/frontend/src/lib/dialogs/EditNamespace.svelte b/frontend/src/lib/dialogs/EditNamespace.svelte index f398b21..b104f83 100644 --- a/frontend/src/lib/dialogs/EditNamespace.svelte +++ b/frontend/src/lib/dialogs/EditNamespace.svelte @@ -1,46 +1,37 @@ <script lang="ts"> - import { deleteNamespaces, updateNamespaces, type NamespaceInput } from '$gql/Mutations'; - import { itemEquals } from '$gql/Utils'; - import { type Namespace } from '$gql/graphql'; + import { deleteNamespaces, updateNamespaces } from '$gql/Mutations'; + import { omitIdentifiers } from '$gql/Utils'; + import type { Namespace, UpdateNamespaceInput } from '$gql/graphql'; import { toastFinally } from '$lib/Toasts'; import { confirmDeletion } from '$lib/Utils'; import DeleteButton from '$lib/components/DeleteButton.svelte'; import Dialog from '$lib/components/Dialog.svelte'; - import SubmitButton from '$lib/components/SubmitButton.svelte'; import NamespaceForm from '$lib/forms/NamespaceForm.svelte'; import { getContextClient } from '@urql/svelte'; - import { closeModal } from 'svelte-modals'; + import type { ModalProps } from 'svelte-modals'; const client = getContextClient(); - export let isOpen: boolean; + interface Props extends ModalProps { + namespace: Namespace; + } - export let namespace: Namespace; - const original = structuredClone(namespace); - $: pending = !itemEquals(original, namespace); + let { namespace, ...modal }: Props = $props(); + const initial = omitIdentifiers(namespace); - function save(event: CustomEvent<NamespaceInput>) { - updateNamespaces(client, { ids: namespace.id, input: event.detail }) - .then(closeModal) - .catch(toastFinally); + function submit(input: UpdateNamespaceInput) { + updateNamespaces(client, { ids: namespace.id, input }).then(modal.close).catch(toastFinally); } function deleteNamespace() { confirmDeletion('Namespace', namespace.name, () => { - deleteNamespaces(client, { ids: namespace.id }).then(closeModal).catch(toastFinally); + deleteNamespaces(client, { ids: namespace.id }).then(modal.close).catch(toastFinally); }); } </script> -<Dialog {isOpen}> - <svelte:fragment slot="header"> - <h2>Edit Namespace</h2> - </svelte:fragment> - <NamespaceForm bind:namespace on:submit={save}> - <div class="flex gap-4"> - <DeleteButton on:click={deleteNamespace} /> - <div class="grow" /> - <SubmitButton active={pending} /> - </div> +<Dialog title="Edit Namespace" {...modal}> + <NamespaceForm {initial} {submit}> + <DeleteButton onclick={deleteNamespace} /> </NamespaceForm> </Dialog> diff --git a/frontend/src/lib/dialogs/EditTag.svelte b/frontend/src/lib/dialogs/EditTag.svelte index d2d0013..555d6d1 100644 --- a/frontend/src/lib/dialogs/EditTag.svelte +++ b/frontend/src/lib/dialogs/EditTag.svelte @@ -1,44 +1,37 @@ <script lang="ts"> - import { deleteTags, updateTags, type TagInput } from '$gql/Mutations'; - import { tagEquals } from '$gql/Utils'; - import { type FullTag } from '$gql/graphql'; + import { deleteTags, updateTags } from '$gql/Mutations'; + import { omitIdentifiers } from '$gql/Utils'; + import { type FullTag, type UpdateTagInput } from '$gql/graphql'; import { toastFinally } from '$lib/Toasts'; import { confirmDeletion } from '$lib/Utils'; import DeleteButton from '$lib/components/DeleteButton.svelte'; import Dialog from '$lib/components/Dialog.svelte'; - import SubmitButton from '$lib/components/SubmitButton.svelte'; import TagForm from '$lib/forms/TagForm.svelte'; import { getContextClient } from '@urql/svelte'; - import { closeModal } from 'svelte-modals'; + import { type ModalProps } from 'svelte-modals'; const client = getContextClient(); - export let isOpen: boolean; + interface Props extends ModalProps { + tag: FullTag; + } - export let tag: FullTag; - const original = structuredClone(tag); - $: pending = !tagEquals(original, tag); + let { tag, ...modal }: Props = $props(); + const initial = omitIdentifiers(tag); - function save(event: CustomEvent<TagInput>) { - updateTags(client, { ids: tag.id, input: event.detail }).then(closeModal).catch(toastFinally); + function submit(input: UpdateTagInput) { + updateTags(client, { ids: tag.id, input }).then(modal.close).catch(toastFinally); } function deleteTag() { confirmDeletion('Tag', tag.name, () => { - deleteTags(client, { ids: tag.id }).then(closeModal).catch(toastFinally); + deleteTags(client, { ids: tag.id }).then(modal.close).catch(toastFinally); }); } </script> -<Dialog {isOpen}> - <svelte:fragment slot="header"> - <h2>Edit Tag</h2> - </svelte:fragment> - <TagForm bind:tag on:submit={save}> - <div class="flex gap-4"> - <DeleteButton on:click={deleteTag} /> - <div class="grow" /> - <SubmitButton active={pending} /> - </div> +<Dialog title="Edit Tag" {...modal}> + <TagForm {initial} {submit}> + <DeleteButton onclick={deleteTag} /> </TagForm> </Dialog> diff --git a/frontend/src/lib/dialogs/EditWorld.svelte b/frontend/src/lib/dialogs/EditWorld.svelte index 82afe6a..869dc21 100644 --- a/frontend/src/lib/dialogs/EditWorld.svelte +++ b/frontend/src/lib/dialogs/EditWorld.svelte @@ -1,46 +1,37 @@ <script lang="ts"> - import { type World } from '$gql/graphql'; - import { deleteWorlds, updateWorlds, type WorldInput } from '$gql/Mutations'; - import { itemEquals } from '$gql/Utils'; + import { deleteWorlds, updateWorlds } from '$gql/Mutations'; + import { omitIdentifiers } from '$gql/Utils'; + import type { UpdateWorldInput, World } from '$gql/graphql'; + import { toastFinally } from '$lib/Toasts'; + import { confirmDeletion } from '$lib/Utils'; import DeleteButton from '$lib/components/DeleteButton.svelte'; import Dialog from '$lib/components/Dialog.svelte'; - import SubmitButton from '$lib/components/SubmitButton.svelte'; import WorldForm from '$lib/forms/WorldForm.svelte'; - import { toastFinally } from '$lib/Toasts'; - import { confirmDeletion } from '$lib/Utils'; import { getContextClient } from '@urql/svelte'; - import { closeModal } from 'svelte-modals'; + import type { ModalProps } from 'svelte-modals'; const client = getContextClient(); - export let isOpen: boolean; + interface Props extends ModalProps { + world: World; + } - export let world: World; - const original = structuredClone(world); - $: pending = !itemEquals(original, world); + let { world, ...modal }: Props = $props(); + const initial = omitIdentifiers(world); - function save(event: CustomEvent<WorldInput>) { - updateWorlds(client, { ids: world.id, input: event.detail }) - .then(closeModal) - .catch(toastFinally); + function submit(input: UpdateWorldInput) { + updateWorlds(client, { ids: world.id, input }).then(modal.close).catch(toastFinally); } function deleteWorld() { confirmDeletion('World', world.name, () => { - deleteWorlds(client, { ids: world.id }).then(closeModal).catch(toastFinally); + deleteWorlds(client, { ids: world.id }).then(modal.close).catch(toastFinally); }); } </script> -<Dialog {isOpen}> - <svelte:fragment slot="header"> - <h2>Edit World</h2> - </svelte:fragment> - <WorldForm bind:world on:submit={save}> - <div class="flex gap-4"> - <DeleteButton on:click={deleteWorld} /> - <div class="grow" /> - <SubmitButton active={pending} /> - </div> +<Dialog title="Edit World" {...modal}> + <WorldForm {initial} {submit}> + <DeleteButton onclick={deleteWorld} /> </WorldForm> </Dialog> diff --git a/frontend/src/lib/dialogs/UpdateComics.svelte b/frontend/src/lib/dialogs/UpdateComics.svelte index 8de9622..483e379 100644 --- a/frontend/src/lib/dialogs/UpdateComics.svelte +++ b/frontend/src/lib/dialogs/UpdateComics.svelte @@ -3,94 +3,109 @@ import { artistList, characterList, circleList, comicTagList, worldList } from '$gql/Queries'; import { categories, censorships, directions, languages, layouts, ratings } from '$lib/Enums'; import { toastFinally } from '$lib/Toasts'; - import { UpdateComicsControls } from '$lib/Update'; + import { UpdateComicsControls } from '$lib/Update.svelte'; import Dialog from '$lib/components/Dialog.svelte'; - import Labelled from '$lib/components/Labelled.svelte'; import LabelledBlock from '$lib/components/LabelledBlock.svelte'; import Select from '$lib/components/Select.svelte'; import SubmitButton from '$lib/components/SubmitButton.svelte'; import { getContextClient } from '@urql/svelte'; - import { closeModal } from 'svelte-modals'; + import type { ModalProps } from 'svelte-modals'; import UpdateModeSelector from './components/UpdateModeSelector.svelte'; const client = getContextClient(); - export let isOpen: boolean; - export let ids: number[]; + interface Props extends ModalProps { + ids: number[]; + } - $: tagsQuery = comicTagList(client); - $: artistsQuery = artistList(client); - $: charactersQuery = characterList(client); - $: circlesQuery = circleList(client); - $: worldsQuery = worldList(client); + let { ids, ...modal }: Props = $props(); - $: tags = $tagsQuery.data?.comicTags.edges; - $: artists = $artistsQuery.data?.artists.edges; - $: characters = $charactersQuery.data?.characters.edges; - $: circles = $circlesQuery.data?.circles.edges; - $: worlds = $worldsQuery.data?.worlds.edges; + let tagsQuery = $derived(comicTagList(client)); + let artistsQuery = $derived(artistList(client)); + let charactersQuery = $derived(characterList(client)); + let circlesQuery = $derived(circleList(client)); + let worldsQuery = $derived(worldList(client)); + + let tags = $derived($tagsQuery.data?.comicTags.edges); + let artists = $derived($artistsQuery.data?.artists.edges); + let characters = $derived($charactersQuery.data?.characters.edges); + let circles = $derived($circlesQuery.data?.circles.edges); + let worlds = $derived($worldsQuery.data?.worlds.edges); const controls = new UpdateComicsControls(); - const update = () => { - updateComics(client, { - ids: ids, - input: controls.toInput() - }) - .then(closeModal) - .catch(toastFinally); - }; + function update(event: SubmitEvent) { + event.preventDefault(); + + updateComics(client, { ids, input: controls.input() }).then(modal.close).catch(toastFinally); + } </script> -<Dialog {isOpen}> - <svelte:fragment slot="header"> - <h2>Edit Comics</h2> - </svelte:fragment> - <form on:submit|preventDefault={update}> +<Dialog title="Edit Comics" {...modal}> + <form onsubmit={update}> <div class="grid-labels"> - <Labelled label="Category" let:id> - <Select clearable {id} options={categories} bind:value={controls.category.value} /> - </Labelled> - <Labelled label="Rating" let:id> - <Select clearable {id} options={ratings} bind:value={controls.rating.value} /> - </Labelled> - <Labelled label="Censorship" let:id> - <Select clearable {id} options={censorships} bind:value={controls.censorship.value} /> - </Labelled> - <Labelled label="Language" let:id> - <Select clearable {id} options={languages} bind:value={controls.language.value} /> - </Labelled> - <Labelled label="Direction" let:id> - <Select clearable {id} options={directions} bind:value={controls.direction.value} /> - </Labelled> - <Labelled label="Layout" let:id> - <Select clearable {id} options={layouts} bind:value={controls.layout.value} /> - </Labelled> + <label class="self-center" for="category">Category</label> + <Select clearable id="category" options={categories} bind:value={controls.category.value} /> + + <label class="self-center" for="rating">Rating</label> + <Select clearable id="rating" options={ratings} bind:value={controls.rating.value} /> + + <label class="self-center" for="censor">Censorship</label> + <Select clearable id="censor" options={censorships} bind:value={controls.censorship.value} /> + + <label class="self-center" for="language">Language</label> + <Select clearable id="language" options={languages} bind:value={controls.language.value} /> + + <label class="self-center" for="direction">Direction</label> + <Select clearable id="direction" options={directions} bind:value={controls.direction.value} /> + + <label class="self-center" for="layout">Layout</label> + <Select clearable id="layout" options={layouts} bind:value={controls.layout.value} /> </div> - <LabelledBlock label="Artists" let:id> - <Select multi {id} options={artists} bind:value={controls.artists.ids} /> - <UpdateModeSelector bind:mode={controls.artists.options.mode} slot="controls" /> + <LabelledBlock label="Artists"> + {#snippet children({ id })} + <Select multi {id} options={artists} bind:value={controls.artists.ids} /> + {/snippet} + {#snippet side()} + <UpdateModeSelector bind:mode={controls.artists.options.mode} /> + {/snippet} </LabelledBlock> - <LabelledBlock label="Circles" let:id> - <Select multi {id} options={circles} bind:value={controls.circles.ids} /> - <UpdateModeSelector bind:mode={controls.circles.options.mode} slot="controls" /> + <LabelledBlock label="Circles"> + {#snippet children({ id })} + <Select multi {id} options={circles} bind:value={controls.circles.ids} /> + {/snippet} + {#snippet side()} + <UpdateModeSelector bind:mode={controls.circles.options.mode} /> + {/snippet} </LabelledBlock> - <LabelledBlock label="Characters" let:id> - <Select multi {id} options={characters} bind:value={controls.characters.ids} /> - <UpdateModeSelector bind:mode={controls.characters.options.mode} slot="controls" /> + <LabelledBlock label="Characters"> + {#snippet children({ id })} + <Select multi {id} options={characters} bind:value={controls.characters.ids} /> + {/snippet} + {#snippet side()} + <UpdateModeSelector bind:mode={controls.characters.options.mode} /> + {/snippet} </LabelledBlock> - <LabelledBlock label="Worlds" let:id> - <Select multi {id} options={worlds} bind:value={controls.worlds.ids} /> - <UpdateModeSelector bind:mode={controls.worlds.options.mode} slot="controls" /> + <LabelledBlock label="Worlds"> + {#snippet children({ id })} + <Select multi {id} options={worlds} bind:value={controls.worlds.ids} /> + {/snippet} + {#snippet side()} + <UpdateModeSelector bind:mode={controls.worlds.options.mode} /> + {/snippet} </LabelledBlock> - <LabelledBlock label="Tags" let:id> - <Select multi {id} options={tags} bind:value={controls.tags.ids} /> - <UpdateModeSelector bind:mode={controls.tags.options.mode} slot="controls" /> + <LabelledBlock label="Tags"> + {#snippet children({ id })} + <Select multi {id} options={tags} bind:value={controls.tags.ids} /> + {/snippet} + {#snippet side()} + <UpdateModeSelector bind:mode={controls.tags.options.mode} /> + {/snippet} </LabelledBlock> <div class="flex justify-end gap-4"> - <SubmitButton active={controls.hasInput()} /> + <SubmitButton pending={controls.pending()} /> </div> </form> </Dialog> diff --git a/frontend/src/lib/dialogs/UpdateTags.svelte b/frontend/src/lib/dialogs/UpdateTags.svelte index f753c7f..840e92e 100644 --- a/frontend/src/lib/dialogs/UpdateTags.svelte +++ b/frontend/src/lib/dialogs/UpdateTags.svelte @@ -2,44 +2,49 @@ import { updateTags } from '$gql/Mutations'; import { namespaceList } from '$gql/Queries'; import { toastFinally } from '$lib/Toasts'; - import { UpdateTagsControls } from '$lib/Update'; + import { UpdateTagsControls } from '$lib/Update.svelte'; import Dialog from '$lib/components/Dialog.svelte'; import LabelledBlock from '$lib/components/LabelledBlock.svelte'; import Select from '$lib/components/Select.svelte'; import SubmitButton from '$lib/components/SubmitButton.svelte'; import { getContextClient } from '@urql/svelte'; - import { closeModal } from 'svelte-modals'; + import { modals, type ModalProps } from 'svelte-modals'; import UpdateModeSelector from './components/UpdateModeSelector.svelte'; const client = getContextClient(); - $: namespaceQuery = namespaceList(client); - $: namespaces = $namespaceQuery.data?.namespaces.edges; + let namespaceQuery = $derived(namespaceList(client)); + let namespaces = $derived($namespaceQuery.data?.namespaces.edges); - export let isOpen: boolean; - export let ids: number[]; + interface Props extends ModalProps { + ids: number[]; + } - const controls = new UpdateTagsControls(); + let { ids, ...modal }: Props = $props(); + let controls = new UpdateTagsControls(); - const update = () => { - updateTags(client, { ids: ids, input: controls.toInput() }) - .then(closeModal) + function update(event: SubmitEvent) { + event.preventDefault(); + + updateTags(client, { ids, input: controls.input() }) + .then(() => modals.close()) .catch(toastFinally); - }; + } </script> -<Dialog {isOpen}> - <svelte:fragment slot="header"> - <h2>Edit Tags</h2> - </svelte:fragment> - <form on:submit|preventDefault={update}> - <LabelledBlock label="Namespaces" let:id> - <Select multi {id} options={namespaces} bind:value={controls.namespaces.ids} /> - <UpdateModeSelector bind:mode={controls.namespaces.options.mode} slot="controls" /> +<Dialog title="Edit Tags" {...modal}> + <form onsubmit={update}> + <LabelledBlock label="Namespaces"> + {#snippet children({ id })} + <Select multi {id} options={namespaces} bind:value={controls.namespaces.ids} /> + {/snippet} + {#snippet side()} + <UpdateModeSelector bind:mode={controls.namespaces.options.mode} /> + {/snippet} </LabelledBlock> <div class="flex justify-end gap-4"> - <SubmitButton active={controls.hasInput()} /> + <SubmitButton pending={controls.pending()} /> </div> </form> </Dialog> diff --git a/frontend/src/lib/dialogs/components/UpdateModeSelector.svelte b/frontend/src/lib/dialogs/components/UpdateModeSelector.svelte index e4b4479..6548fb5 100644 --- a/frontend/src/lib/dialogs/components/UpdateModeSelector.svelte +++ b/frontend/src/lib/dialogs/components/UpdateModeSelector.svelte @@ -2,7 +2,7 @@ import { UpdateMode } from '$gql/graphql'; import { UpdateModeLabel } from '$lib/Enums'; - export let mode: UpdateMode; + let { mode = $bindable() }: { mode: UpdateMode } = $props(); function select(e: string) { mode = e as UpdateMode; @@ -16,7 +16,7 @@ class:active={mode === e} class:dangerous={mode !== UpdateMode.Add} class="btn btn-xs hover:bg-slate-700 [&.active.dangerous]:bg-rose-800 [&.active]:bg-indigo-700" - on:click={() => select(e)} + onclick={() => select(e)} > {label} </button> diff --git a/frontend/src/lib/filter/ComicFilterForm.svelte b/frontend/src/lib/filter/ComicFilterForm.svelte index 13b5320..7f0058d 100644 --- a/frontend/src/lib/filter/ComicFilterForm.svelte +++ b/frontend/src/lib/filter/ComicFilterForm.svelte @@ -1,48 +1,61 @@ <script lang="ts"> - import { page } from '$app/stores'; import { artistList, characterList, circleList, comicTagList, worldList } from '$gql/Queries'; - import { ComicFilterContext, getFilterContext } from '$lib/Filter'; + import { categories, censorships, languages, ratings } from '$lib/Enums'; + import { ComicFilterContext } from '$lib/Filter.svelte'; import { getContextClient } from '@urql/svelte'; - import ComicFilterGroup from './components/ComicFilterGroup.svelte'; + import Filter from './components/Filter.svelte'; import FilterForm from './components/FilterForm.svelte'; const client = getContextClient(); - $: tagsQuery = comicTagList(client, { forFilter: true }); - $: artistsQuery = artistList(client); - $: charactersQuery = characterList(client); - $: circlesQuery = circleList(client); - $: worldsQuery = worldList(client); + let { filter }: { filter: ComicFilterContext } = $props(); - $: tags = $tagsQuery.data?.comicTags.edges; - $: artists = $artistsQuery.data?.artists.edges; - $: characters = $charactersQuery.data?.characters.edges; - $: circles = $circlesQuery.data?.circles.edges; - $: worlds = $worldsQuery.data?.worlds.edges; + let tagsQuery = $derived(comicTagList(client, { forFilter: true })); + let artistsQuery = $derived(artistList(client)); + let charactersQuery = $derived(characterList(client)); + let circlesQuery = $derived(circleList(client)); + let worldsQuery = $derived(worldList(client)); - const filter = getFilterContext<ComicFilterContext>(); - const apply = () => $filter.apply($page.url.searchParams); + let tags = $derived($tagsQuery.data?.comicTags.edges); + let artists = $derived($artistsQuery.data?.artists.edges); + let characters = $derived($charactersQuery.data?.characters.edges); + let circles = $derived($circlesQuery.data?.circles.edges); + let worlds = $derived($worldsQuery.data?.worlds.edges); </script> -<FilterForm type="grid" on:submit={apply}> - <ComicFilterGroup - slot="include" - type="include" - bind:controls={$filter.include.controls} - {tags} - {artists} - {characters} - {circles} - {worlds} - /> - <ComicFilterGroup - slot="exclude" - type="exclude" - bind:controls={$filter.exclude.controls} - {tags} - {artists} - {characters} - {circles} - {worlds} - /> +<FilterForm type="grid" apply={filter.apply} expanded={filter.excludes > 0}> + {#snippet include(type)} + <Filter + {type} + title="Tags" + options={tags} + filter={filter.include.tags} + --grid-column="span 2" + /> + <Filter {type} title="Artists" options={artists} filter={filter.include.artists} /> + <Filter {type} title="Circles" options={circles} filter={filter.include.circles} /> + <Filter {type} title="Characters" options={characters} filter={filter.include.characters} /> + <Filter {type} title="Worlds" options={worlds} filter={filter.include.worlds} /> + <Filter {type} title="Categories" options={categories} filter={filter.include.categories} /> + <Filter {type} title="Ratings" options={ratings} filter={filter.include.ratings} /> + <Filter {type} title="Censorship" options={censorships} filter={filter.include.censorships} /> + <Filter {type} title="Languages" options={languages} filter={filter.include.languages} /> + {/snippet} + {#snippet exclude(type)} + <Filter + {type} + title="Tags" + options={tags} + filter={filter.exclude.tags} + --grid-column="span 2" + /> + <Filter {type} title="Artists" options={artists} filter={filter.exclude.artists} /> + <Filter {type} title="Circles" options={circles} filter={filter.exclude.circles} /> + <Filter {type} title="Characters" options={characters} filter={filter.exclude.characters} /> + <Filter {type} title="Worlds" options={worlds} filter={filter.exclude.worlds} /> + <Filter {type} title="Categories" options={categories} filter={filter.exclude.categories} /> + <Filter {type} title="Ratings" options={ratings} filter={filter.exclude.ratings} /> + <Filter {type} title="Censorship" options={censorships} filter={filter.exclude.censorships} /> + <Filter {type} title="Languages" options={languages} filter={filter.exclude.languages} /> + {/snippet} </FilterForm> diff --git a/frontend/src/lib/filter/TagFilterForm.svelte b/frontend/src/lib/filter/TagFilterForm.svelte index be5996e..280db8a 100644 --- a/frontend/src/lib/filter/TagFilterForm.svelte +++ b/frontend/src/lib/filter/TagFilterForm.svelte @@ -1,31 +1,23 @@ <script lang="ts"> - import { page } from '$app/stores'; import { namespaceList } from '$gql/Queries'; - import { TagFilterContext, getFilterContext } from '$lib/Filter'; + import { TagFilterContext } from '$lib/Filter.svelte'; import { getContextClient } from '@urql/svelte'; + import Filter from './components/Filter.svelte'; import FilterForm from './components/FilterForm.svelte'; - import TagFilterGroup from './components/TagFilterGroup.svelte'; const client = getContextClient(); - $: namespaceQuery = namespaceList(client); - $: namespaces = $namespaceQuery.data?.namespaces.edges; + let { filter }: { filter: TagFilterContext } = $props(); - const filter = getFilterContext<TagFilterContext>(); - const apply = () => $filter.apply($page.url.searchParams); + let namespaceQuery = $derived(namespaceList(client)); + let namespaces = $derived($namespaceQuery.data?.namespaces.edges); </script> -<FilterForm on:submit={apply}> - <TagFilterGroup - slot="include" - type="include" - bind:controls={$filter.include.controls} - {namespaces} - /> - <TagFilterGroup - slot="exclude" - type="exclude" - bind:controls={$filter.exclude.controls} - {namespaces} - /> +<FilterForm apply={filter.apply} expanded={filter.excludes > 0}> + {#snippet include(type)} + <Filter {type} title="Namespaces" options={namespaces} filter={filter.include.namespaces} /> + {/snippet} + {#snippet exclude(type)} + <Filter {type} title="Namespaces" options={namespaces} filter={filter.exclude.namespaces} /> + {/snippet} </FilterForm> diff --git a/frontend/src/lib/filter/components/ComicFilterGroup.svelte b/frontend/src/lib/filter/components/ComicFilterGroup.svelte deleted file mode 100644 index d302de4..0000000 --- a/frontend/src/lib/filter/components/ComicFilterGroup.svelte +++ /dev/null @@ -1,27 +0,0 @@ -<script lang="ts"> - import { categories, censorships, languages, ratings } from '$lib/Enums'; - import { ComicFilterControls } from '$lib/Filter'; - import type { ListItem } from '$lib/Utils'; - import { setContext } from 'svelte'; - import Filter from './Filter.svelte'; - - export let tags: ListItem[] | undefined; - export let artists: ListItem[] | undefined; - export let circles: ListItem[] | undefined; - export let characters: ListItem[] | undefined; - export let worlds: ListItem[] | undefined; - export let controls: ComicFilterControls; - export let type: 'include' | 'exclude'; - - setContext('filter-type', type); -</script> - -<Filter title="Tags" options={tags} bind:filter={controls.tags} --grid-column="span 2" /> -<Filter title="Artists" options={artists} bind:filter={controls.artists} /> -<Filter title="Circles" options={circles} bind:filter={controls.circles} /> -<Filter title="Characters" options={characters} bind:filter={controls.characters} /> -<Filter title="Worlds" options={worlds} bind:filter={controls.worlds} /> -<Filter title="Categories" options={categories} bind:filter={controls.categories} /> -<Filter title="Ratings" options={ratings} bind:filter={controls.ratings} /> -<Filter title="Censorship" options={censorships} bind:filter={controls.censorships} /> -<Filter title="Languages" options={languages} bind:filter={controls.languages} /> diff --git a/frontend/src/lib/filter/components/Filter.svelte b/frontend/src/lib/filter/components/Filter.svelte index ead5c4d..c164cbb 100644 --- a/frontend/src/lib/filter/components/Filter.svelte +++ b/frontend/src/lib/filter/components/Filter.svelte @@ -1,17 +1,19 @@ <script lang="ts"> - import { Association, Enum } from '$lib/Filter'; + import { Association, Enum, type FilterType } from '$lib/Filter.svelte'; import type { ListItem } from '$lib/Utils'; import Select from '$lib/components/Select.svelte'; - import { getContext } from 'svelte'; - export let title: string; - const context: 'include' | 'exclude' = getContext('filter-type'); - $: exclude = context === 'exclude'; + interface Props { + title: string; + type: FilterType; + options: ListItem[] | undefined; + filter: Association<string> | Enum<string>; + } - const id = `${context}-${title.toLowerCase()}`; + let { title, type, options, filter }: Props = $props(); + let exclude = $derived(type === 'exclude'); - export let options: ListItem[] | undefined; - export let filter: Association<string> | Enum<string>; + const id = `${type}-${title.toLowerCase()}`; </script> <div class:exclude class="filter-container"> @@ -24,7 +26,7 @@ title="matches all" class:active={filter.mode === 'all'} class="btn btn-xs" - on:click={() => (filter.mode = 'all')} + onclick={() => (filter.mode = 'all')} > ∀ </button> @@ -33,7 +35,7 @@ title="matches any of" class:active={filter.mode === 'any'} class="btn btn-xs" - on:click={() => (filter.mode = 'any')} + onclick={() => (filter.mode = 'any')} > ∃ </button> @@ -42,7 +44,7 @@ title="matches exactly" class:active={filter.mode === 'exact'} class="btn btn-xs" - on:click={() => (filter.mode = 'exact')} + onclick={() => (filter.mode = 'exact')} > = </button> @@ -53,7 +55,7 @@ title="empty" class:active={filter.empty} class="btn btn-xs" - on:click={() => (filter.empty = !filter.empty)} + onclick={() => (filter.empty = !filter.empty)} > ∅ </button> diff --git a/frontend/src/lib/filter/components/FilterForm.svelte b/frontend/src/lib/filter/components/FilterForm.svelte index 6fc4c90..ed58ed9 100644 --- a/frontend/src/lib/filter/components/FilterForm.svelte +++ b/frontend/src/lib/filter/components/FilterForm.svelte @@ -1,30 +1,40 @@ <script lang="ts"> + import { page } from '$app/state'; import Expander from '$lib/components/Expander.svelte'; - import { getFilterContext } from '$lib/Filter'; + import type { FilterType } from '$lib/Filter.svelte'; + import type { Snippet } from 'svelte'; - const filter = getFilterContext(); - export let type: 'grid' | 'row' = 'row'; + interface Props { + type?: 'grid' | 'row'; + include?: Snippet<[FilterType]>; + exclude?: Snippet<[FilterType]>; + expanded: boolean; + apply: (params: URLSearchParams) => void; + } + + let { type = 'row', include, exclude, expanded: initialExpanded, apply }: Props = $props(); - let exclude = false; + let expanded = $state(initialExpanded); - $: if ($filter.exclude.size > 0) { - exclude = true; + function onsubmit(event: SubmitEvent) { + event.preventDefault(); + apply(page.url.searchParams); } </script> -<form on:submit|preventDefault class="gap-0"> +<form {onsubmit} class="gap-0"> {#if type === 'grid'} <div class="flex flex-col gap-4 px-2 md:grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"> - <slot name="include" /> + {@render include?.('include')} </div> <div class="my-2 flex justify-start"> - <Expander title="Exclude" bind:expanded={exclude} /> + <Expander title="Exclude" bind:expanded /> </div> - {#if exclude} + {#if expanded} <div class="flex flex-col gap-4 bg-rose-950/50 p-2 md:grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6" > - <slot name="exclude" /> + {@render exclude?.('exclude')} </div> {/if} {:else} @@ -32,10 +42,10 @@ class="flex flex-wrap justify-center gap-2 [&>*]:basis-full xl:[&>*]:basis-1/3 2xl:[&>*]:basis-1/5" > <div class="p-2"> - <slot name="include" /> + {@render include?.('include')} </div> <div class="bg-rose-950/50 p-2"> - <slot name="exclude" /> + {@render exclude?.('exclude')} </div> </div> {/if} diff --git a/frontend/src/lib/filter/components/TagFilterGroup.svelte b/frontend/src/lib/filter/components/TagFilterGroup.svelte deleted file mode 100644 index 83b6997..0000000 --- a/frontend/src/lib/filter/components/TagFilterGroup.svelte +++ /dev/null @@ -1,14 +0,0 @@ -<script lang="ts"> - import { TagFilterControls } from '$lib/Filter'; - import type { ListItem } from '$lib/Utils'; - import { setContext } from 'svelte'; - import Filter from './Filter.svelte'; - - export let namespaces: ListItem[] | undefined; - export let controls: TagFilterControls; - export let type: 'include' | 'exclude'; - - setContext('filter-type', type); -</script> - -<Filter title="Namespaces" options={namespaces} bind:filter={controls.namespaces} /> diff --git a/frontend/src/lib/forms/ArtistForm.svelte b/frontend/src/lib/forms/ArtistForm.svelte index 7df5e8b..663c3ae 100644 --- a/frontend/src/lib/forms/ArtistForm.svelte +++ b/frontend/src/lib/forms/ArtistForm.svelte @@ -1,25 +1,29 @@ <script lang="ts"> - import { type ArtistInput } from '$gql/Mutations'; - import { type OmitIdentifiers } from '$gql/Utils'; - import { type Artist } from '$gql/graphql'; - import Labelled from '$lib/components/Labelled.svelte'; - import { createEventDispatcher } from 'svelte'; + import type { AddArtistInput, Artist } from '$gql/graphql'; + import SubmitButton from '$lib/components/SubmitButton.svelte'; + import { itemPending, type FormProps } from '$lib/Form'; - const dispatch = createEventDispatcher<{ submit: ArtistInput }>(); + let { initial, submit, children }: FormProps<Artist, AddArtistInput> = $props(); - export let artist: OmitIdentifiers<Artist>; + let input = $state(initial); + let pending = $derived(input.name.length > 0 && itemPending(initial, input)); - function submit() { - dispatch('submit', { name: artist.name }); + function onsubmit(event: SubmitEvent) { + event.preventDefault(); + + submit({ ...input }); } </script> -<form on:submit|preventDefault={submit}> +<form {onsubmit}> <div class="grid-labels"> - <Labelled label="Name" let:id> - <!-- svelte-ignore a11y-autofocus --> - <input autofocus required {id} bind:value={artist.name} /> - </Labelled> + <label class="self-center" for="name">Name</label> + <!-- svelte-ignore a11y_autofocus --> + <input autofocus required id="name" bind:value={input.name} /> + </div> + <div class="flex gap-4"> + {@render children?.()} + <div class="grow"></div> + <SubmitButton {pending} /> </div> - <slot /> </form> diff --git a/frontend/src/lib/forms/CharacterForm.svelte b/frontend/src/lib/forms/CharacterForm.svelte index 4cec37c..23b3ef7 100644 --- a/frontend/src/lib/forms/CharacterForm.svelte +++ b/frontend/src/lib/forms/CharacterForm.svelte @@ -1,25 +1,29 @@ <script lang="ts"> - import { type CharacterInput } from '$gql/Mutations'; - import { type OmitIdentifiers } from '$gql/Utils'; - import { type Character } from '$gql/graphql'; - import Labelled from '$lib/components/Labelled.svelte'; - import { createEventDispatcher } from 'svelte'; + import type { AddCharacterInput, Character } from '$gql/graphql'; + import SubmitButton from '$lib/components/SubmitButton.svelte'; + import { itemPending, type FormProps } from '$lib/Form'; - const dispatch = createEventDispatcher<{ submit: CharacterInput }>(); + let { initial, submit, children }: FormProps<Character, AddCharacterInput> = $props(); - export let character: OmitIdentifiers<Character>; + let input = $state(initial); + let pending = $derived(input.name.length > 0 && itemPending(initial, input)); - function submit() { - dispatch('submit', { name: character.name }); + function onsubmit(event: SubmitEvent) { + event.preventDefault(); + + submit({ ...input }); } </script> -<form on:submit|preventDefault={submit}> +<form {onsubmit}> <div class="grid-labels"> - <Labelled label="Name" let:id> - <!-- svelte-ignore a11y-autofocus --> - <input autofocus required {id} bind:value={character.name} /> - </Labelled> + <label class="self-center" for="name">Name</label> + <!-- svelte-ignore a11y_autofocus --> + <input autofocus required id="name" bind:value={input.name} /> + </div> + <div class="flex gap-4"> + {@render children?.()} + <div class="grow"></div> + <SubmitButton {pending} /> </div> - <slot /> </form> diff --git a/frontend/src/lib/forms/CircleForm.svelte b/frontend/src/lib/forms/CircleForm.svelte index b71256c..ba6013a 100644 --- a/frontend/src/lib/forms/CircleForm.svelte +++ b/frontend/src/lib/forms/CircleForm.svelte @@ -1,25 +1,29 @@ <script lang="ts"> - import { type CircleInput } from '$gql/Mutations'; - import { type OmitIdentifiers } from '$gql/Utils'; - import { type Circle } from '$gql/graphql'; - import Labelled from '$lib/components/Labelled.svelte'; - import { createEventDispatcher } from 'svelte'; + import type { AddCircleInput, Circle } from '$gql/graphql'; + import SubmitButton from '$lib/components/SubmitButton.svelte'; + import { itemPending, type FormProps } from '$lib/Form'; - const dispatch = createEventDispatcher<{ submit: CircleInput }>(); + let { initial, submit, children }: FormProps<Circle, AddCircleInput> = $props(); - export let circle: OmitIdentifiers<Circle>; + let input = $state(initial); + let pending = $derived(input.name.length > 0 && itemPending(initial, input)); - function submit() { - dispatch('submit', { name: circle.name }); + function onsubmit(event: SubmitEvent) { + event.preventDefault(); + + submit({ ...input }); } </script> -<form on:submit|preventDefault={submit}> +<form {onsubmit}> <div class="grid-labels"> - <Labelled label="Name" let:id> - <!-- svelte-ignore a11y-autofocus --> - <input required autofocus {id} bind:value={circle.name} /> - </Labelled> + <label class="self-center" for="name">Name</label> + <!-- svelte-ignore a11y_autofocus --> + <input autofocus required id="name" bind:value={input.name} /> + </div> + <div class="flex gap-4"> + {@render children?.()} + <div class="grow"></div> + <SubmitButton {pending} /> </div> - <slot /> </form> diff --git a/frontend/src/lib/forms/ComicForm.svelte b/frontend/src/lib/forms/ComicForm.svelte index 74051c8..adc6a34 100644 --- a/frontend/src/lib/forms/ComicForm.svelte +++ b/frontend/src/lib/forms/ComicForm.svelte @@ -3,98 +3,113 @@ import { type OmitIdentifiers } from '$gql/Utils'; import type { FullComicFragment, UpdateComicInput } from '$gql/graphql'; import { categories, censorships, directions, languages, layouts, ratings } from '$lib/Enums'; - import Labelled from '$lib/components/Labelled.svelte'; import LabelledBlock from '$lib/components/LabelledBlock.svelte'; import Select from '$lib/components/Select.svelte'; import { getContextClient } from '@urql/svelte'; - import { createEventDispatcher } from 'svelte'; + import { type Snippet } from 'svelte'; const client = getContextClient(); - const dispatch = createEventDispatcher<{ submit: UpdateComicInput }>(); - - export let comic: OmitIdentifiers<FullComicFragment>; - - $: tagsQuery = comicTagList(client); - $: artistsQuery = artistList(client); - $: charactersQuery = characterList(client); - $: circlesQuery = circleList(client); - $: worldsQuery = worldList(client); - - $: tags = $tagsQuery.data?.comicTags.edges; - $: artists = $artistsQuery.data?.artists.edges; - $: characters = $charactersQuery.data?.characters.edges; - $: circles = $circlesQuery.data?.circles.edges; - $: worlds = $worldsQuery.data?.worlds.edges; - - function submit() { - dispatch('submit', { - direction: comic.direction, - layout: comic.layout, - rating: comic.rating, - category: comic.category, - censorship: comic.censorship, - title: comic.title, - originalTitle: comic.originalTitle, - url: comic.url, - date: comic.date === '' ? null : comic.date, - language: comic.language, - tags: { ids: comic.tags.map((t) => t.id) }, - artists: { ids: comic.artists.map((a) => a.id) }, - characters: { ids: comic.characters.map((c) => c.id) }, - circles: { ids: comic.circles.map((c) => c.id) }, - worlds: { ids: comic.worlds.map((w) => w.id) } + + interface Props { + input: OmitIdentifiers<FullComicFragment>; + submit: (input: UpdateComicInput) => void; + children?: Snippet; + } + + let { input = $bindable(), submit, children }: Props = $props(); + + let tagsQuery = $derived(comicTagList(client)); + let artistsQuery = $derived(artistList(client)); + let charactersQuery = $derived(characterList(client)); + let circlesQuery = $derived(circleList(client)); + let worldsQuery = $derived(worldList(client)); + + let tags = $derived($tagsQuery.data?.comicTags.edges); + let artists = $derived($artistsQuery.data?.artists.edges); + let characters = $derived($charactersQuery.data?.characters.edges); + let circles = $derived($circlesQuery.data?.circles.edges); + let worlds = $derived($worldsQuery.data?.worlds.edges); + + function onsubmit(event: SubmitEvent) { + event.preventDefault(); + + submit({ + direction: input.direction, + layout: input.layout, + rating: input.rating, + category: input.category, + censorship: input.censorship, + title: input.title, + originalTitle: input.originalTitle, + url: input.url, + date: input.date === '' ? null : input.date, + language: input.language, + tags: { ids: input.tags.map((t) => t.id) }, + artists: { ids: input.artists.map((a) => a.id) }, + characters: { ids: input.characters.map((c) => c.id) }, + circles: { ids: input.circles.map((c) => c.id) }, + worlds: { ids: input.worlds.map((w) => w.id) } }); } </script> -<form on:submit|preventDefault={submit}> +<form {onsubmit}> <div class="grid-labels"> - <Labelled label="Title" let:id> - <input required {id} bind:value={comic.title} title={comic.title} /> - </Labelled> - <Labelled label="Original Title" let:id> - <input {id} bind:value={comic.originalTitle} title={comic.originalTitle} /> - </Labelled> - <Labelled label="URL" let:id> - <input {id} bind:value={comic.url} /> - </Labelled> - <Labelled label="Date" let:id> - <input {id} type="date" bind:value={comic.date} pattern={'d{4}-d{2}-d{2}'} /> - </Labelled> - <Labelled label="Category" let:id> - <Select {id} options={categories} bind:value={comic.category} /> - </Labelled> - <Labelled label="Rating" let:id> - <Select {id} options={ratings} bind:value={comic.rating} /> - </Labelled> - <Labelled label="Censorship" let:id> - <Select {id} options={censorships} bind:value={comic.censorship} /> - </Labelled> - <Labelled label="Language" let:id> - <Select {id} options={languages} bind:value={comic.language} /> - </Labelled> - <Labelled label="Direction" let:id> - <Select {id} options={directions} bind:value={comic.direction} /> - </Labelled> - <Labelled label="Layout" let:id> - <Select {id} options={layouts} bind:value={comic.layout} /> - </Labelled> + <label class="self-center" for="title">Title</label> + <input required id="title" bind:value={input.title} title={input.title} /> + + <label class="self-center" for="original-title">Original Title</label> + <input id="original-title" bind:value={input.originalTitle} title={input.originalTitle} /> + + <label class="self-center" for="url">URL</label> + <input id="url" bind:value={input.url} /> + + <label class="self-center" for="date">Date</label> + <input id="date" type="date" bind:value={input.date} pattern={'d{4}-d{2}-d{2}'} /> + + <label class="self-center" for="category">Category</label> + <Select id="category" options={categories} bind:value={input.category} /> + + <label class="self-center" for="rating">Rating</label> + <Select id="rating" options={ratings} bind:value={input.rating} /> + + <label class="self-center" for="censorship">Censorship</label> + <Select id="censorship" options={censorships} bind:value={input.censorship} /> + + <label class="self-center" for="language">Language</label> + <Select id="language" options={languages} bind:value={input.language} /> + + <label class="self-center" for="direction">Direction</label> + <Select id="direction" options={directions} bind:value={input.direction} /> + + <label class="self-center" for="layout">Layout</label> + <Select id="layout" options={layouts} bind:value={input.layout} /> </div> - <LabelledBlock label="Artists" let:id> - <Select multi object {id} options={artists} bind:value={comic.artists} /> + <LabelledBlock label="Artists"> + {#snippet children({ id })} + <Select multi object {id} options={artists} bind:value={input.artists} /> + {/snippet} </LabelledBlock> - <LabelledBlock label="Circles" let:id> - <Select multi object {id} options={circles} bind:value={comic.circles} /> + <LabelledBlock label="Circles"> + {#snippet children({ id })} + <Select multi object {id} options={circles} bind:value={input.circles} /> + {/snippet} </LabelledBlock> - <LabelledBlock label="Characters" let:id> - <Select multi object {id} options={characters} bind:value={comic.characters} /> + <LabelledBlock label="Characters"> + {#snippet children({ id })} + <Select multi object {id} options={characters} bind:value={input.characters} /> + {/snippet} </LabelledBlock> - <LabelledBlock label="Worlds" let:id> - <Select multi object {id} options={worlds} bind:value={comic.worlds} /> + <LabelledBlock label="Worlds"> + {#snippet children({ id })} + <Select multi object {id} options={worlds} bind:value={input.worlds} /> + {/snippet} </LabelledBlock> - <LabelledBlock label="Tags" let:id> - <Select multi object {id} options={tags} bind:value={comic.tags} /> + <LabelledBlock label="Tags"> + {#snippet children({ id })} + <Select multi object {id} options={tags} bind:value={input.tags} /> + {/snippet} </LabelledBlock> - <slot /> + {@render children?.()} </form> diff --git a/frontend/src/lib/forms/NamespaceForm.svelte b/frontend/src/lib/forms/NamespaceForm.svelte index c05b6d8..3631d84 100644 --- a/frontend/src/lib/forms/NamespaceForm.svelte +++ b/frontend/src/lib/forms/NamespaceForm.svelte @@ -1,28 +1,31 @@ <script lang="ts"> - import { type NamespaceInput } from '$gql/Mutations'; - import { type OmitIdentifiers } from '$gql/Utils'; - import { type Namespace } from '$gql/graphql'; - import Labelled from '$lib/components/Labelled.svelte'; - import { createEventDispatcher } from 'svelte'; + import type { AddNamespaceInput, Namespace } from '$gql/graphql'; + import SubmitButton from '$lib/components/SubmitButton.svelte'; + import { namespacePending, type FormProps } from '$lib/Form'; - const dispatch = createEventDispatcher<{ submit: NamespaceInput }>(); + let { initial, submit, children }: FormProps<Namespace, AddNamespaceInput> = $props(); - export let namespace: OmitIdentifiers<Namespace>; + let input = $state(initial); + let pending = $derived(input.name.length > 0 && namespacePending(initial, input)); - function submit() { - dispatch('submit', { name: namespace.name, sortName: namespace.sortName }); + function onsubmit(event: SubmitEvent) { + event.preventDefault(); + + submit({ ...input }); } </script> -<form on:submit|preventDefault={submit}> +<form {onsubmit}> <div class="grid-labels"> - <Labelled label="Name" let:id> - <!-- svelte-ignore a11y-autofocus --> - <input required autofocus {id} bind:value={namespace.name} /> - </Labelled> - <Labelled label="Sort name" let:id> - <input {id} bind:value={namespace.sortName} /> - </Labelled> + <label class="self-center" for="name">Name</label> + <!-- svelte-ignore a11y_autofocus --> + <input autofocus required id="name" bind:value={input.name} /> + <label class="self-center" for="sort-name">Sort name</label> + <input id="name" bind:value={input.sortName} /> + </div> + <div class="flex gap-4"> + {@render children?.()} + <div class="grow"></div> + <SubmitButton {pending} /> </div> - <slot /> </form> diff --git a/frontend/src/lib/forms/TagForm.svelte b/frontend/src/lib/forms/TagForm.svelte index 6cc2227..2789587 100644 --- a/frontend/src/lib/forms/TagForm.svelte +++ b/frontend/src/lib/forms/TagForm.svelte @@ -1,42 +1,41 @@ <script lang="ts"> - import type { TagInput } from '$gql/Mutations'; import { namespaceList } from '$gql/Queries'; - import type { OmitIdentifiers } from '$gql/Utils'; - import type { FullTag } from '$gql/graphql'; - import Labelled from '$lib/components/Labelled.svelte'; + import type { AddTagInput, FullTag } from '$gql/graphql'; + import { tagPending, type FormProps } from '$lib/Form'; import Select from '$lib/components/Select.svelte'; + import SubmitButton from '$lib/components/SubmitButton.svelte'; import { getContextClient } from '@urql/svelte'; - import { createEventDispatcher } from 'svelte'; - const client = getContextClient(); - const dispatch = createEventDispatcher<{ submit: TagInput }>(); + let { initial, submit, children }: FormProps<FullTag, AddTagInput> = $props(); - export let tag: OmitIdentifiers<FullTag>; + let input = $state(initial); + let pending = $derived(input.name.length > 0 && tagPending(initial, input)); - $: namespaceQuery = namespaceList(client); - $: namespaces = $namespaceQuery.data?.namespaces.edges; + let namespaceQuery = $derived(namespaceList(getContextClient())); + let namespaces = $derived($namespaceQuery.data?.namespaces.edges); - function submit() { - dispatch('submit', { - name: tag.name, - description: tag.description, - namespaces: { ids: tag.namespaces.map((n) => n.id) } - }); + function onsubmit(event: SubmitEvent) { + event.preventDefault(); + + submit({ ...input, namespaces: { ids: input.namespaces.map((n) => n.id) } }); } </script> -<form on:submit|preventDefault={submit}> +<form {onsubmit}> <div class="grid-labels"> - <Labelled label="Name" let:id> - <!-- svelte-ignore a11y-autofocus --> - <input autofocus required {id} bind:value={tag.name} /> - </Labelled> - <Labelled label="Description" let:id> - <textarea rows={3} {id} bind:value={tag.description} /> - </Labelled> - <Labelled label="Namespaces" let:id> - <Select multi object {id} options={namespaces} bind:value={tag.namespaces} /> - </Labelled> + <label class="self-center" for="name">Name</label> + <!-- svelte-ignore a11y_autofocus --> + <input autofocus required id="name" bind:value={input.name} /> + + <label class="self-center" for="description">Description</label> + <textarea rows={3} id="description" bind:value={input.description}></textarea> + + <label class="self-center" for="namespaces">Namespaces</label> + <Select multi object id="namespaces" options={namespaces} bind:value={input.namespaces} /> + </div> + <div class="flex gap-4"> + {@render children?.()} + <div class="grow"></div> + <SubmitButton {pending} /> </div> - <slot /> </form> diff --git a/frontend/src/lib/forms/WorldForm.svelte b/frontend/src/lib/forms/WorldForm.svelte index 103dd5b..e6b821f 100644 --- a/frontend/src/lib/forms/WorldForm.svelte +++ b/frontend/src/lib/forms/WorldForm.svelte @@ -1,25 +1,29 @@ <script lang="ts"> - import { type WorldInput } from '$gql/Mutations'; - import { type OmitIdentifiers } from '$gql/Utils'; - import { type World } from '$gql/graphql'; - import Labelled from '$lib/components/Labelled.svelte'; - import { createEventDispatcher } from 'svelte'; + import type { AddWorldInput, World } from '$gql/graphql'; + import SubmitButton from '$lib/components/SubmitButton.svelte'; + import { itemPending, type FormProps } from '$lib/Form'; - const dispatch = createEventDispatcher<{ submit: WorldInput }>(); + let { initial, submit, children }: FormProps<World, AddWorldInput> = $props(); - export let world: OmitIdentifiers<World>; + let input = $state(initial); + let pending = $derived(input.name.length > 0 && itemPending(initial, input)); - function submit() { - dispatch('submit', { name: world.name }); + function onsubmit(event: SubmitEvent) { + event.preventDefault(); + + submit({ ...input }); } </script> -<form on:submit|preventDefault={submit}> +<form {onsubmit}> <div class="grid-labels"> - <Labelled label="Name" let:id> - <!-- svelte-ignore a11y-autofocus --> - <input autofocus required {id} bind:value={world.name} /> - </Labelled> + <label class="self-center" for="name">Name</label> + <!-- svelte-ignore a11y_autofocus --> + <input autofocus required id="name" bind:value={input.name} /> + </div> + <div class="flex gap-4"> + {@render children?.()} + <div class="grow"></div> + <SubmitButton {pending} /> </div> - <slot /> </form> diff --git a/frontend/src/lib/gallery/Gallery.svelte b/frontend/src/lib/gallery/Gallery.svelte index 964c677..0480026 100644 --- a/frontend/src/lib/gallery/Gallery.svelte +++ b/frontend/src/lib/gallery/Gallery.svelte @@ -2,12 +2,18 @@ import type { PageFragment } from '$gql/graphql'; import GalleryPage from './GalleryPage.svelte'; - export let pages: PageFragment[]; + interface Props { + pages: PageFragment[]; + open: (page: number) => void; + updateCover: (page: number) => void; + } + + let { pages, open, updateCover }: Props = $props(); </script> <div class="max-h-full gap-2 overflow-auto p-1 pr-3" tabindex="-1"> {#each pages as page, index} - <GalleryPage {page} {index} on:open on:cover /> + <GalleryPage {page} {index} {open} {updateCover} /> {/each} </div> diff --git a/frontend/src/lib/gallery/GalleryPage.svelte b/frontend/src/lib/gallery/GalleryPage.svelte index f40b889..3169d6d 100644 --- a/frontend/src/lib/gallery/GalleryPage.svelte +++ b/frontend/src/lib/gallery/GalleryPage.svelte @@ -1,56 +1,55 @@ <script lang="ts"> import type { PageFragment } from '$gql/graphql'; - import { getSelectionContext } from '$lib/Selection'; + import { getSelectionContext } from '$lib/selection/Selection.svelte'; import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte'; import { src } from '$lib/Utils'; - import { createEventDispatcher } from 'svelte'; - export let page: PageFragment; - export let index: number; - - const selection = getSelectionContext<PageFragment>(); + interface Props { + page: PageFragment; + index: number; + open: (page: number) => void; + updateCover: (page: number) => void; + } - let span: 'single' | 'double' | 'triple'; + let { page, index, open, updateCover }: Props = $props(); - $: page.image.aspectRatio, updateSpan(); + const selection = getSelectionContext<PageFragment>(); - function updateSpan() { + let span: 'single' | 'double' | 'triple' = $derived.by(() => { const aspectRatio = page.image.aspectRatio; if (aspectRatio <= 1) { - span = 'single'; + return 'single'; } else if (aspectRatio > 1 && aspectRatio <= 2) { - span = 'double'; - } else if (aspectRatio > 2) { - span = 'triple'; + return 'double'; + } else { + return 'triple'; } - } - - const dispatch = createEventDispatcher<{ open: number; cover: number }>(); + }); function press(event: MouseEvent | KeyboardEvent) { if (event instanceof KeyboardEvent && event.key !== 'Enter') { return; } - if ($selection.active) { + if (selection.active) { if (event.ctrlKey) { - dispatch('open', index); + open(index); } else if (selectable) { - $selection = $selection.update(index, event.shiftKey); + selection.update(index, event.shiftKey); } } else if (event.ctrlKey) { - dispatch('cover', page.id); + updateCover(page.id); } else { - dispatch('open', index); + open(index); } event.preventDefault(); } - $: selectable = $selection.selectable(page); - $: dim = $selection.active && !selectable; - $: selected = $selection.contains(page.id); + let selectable = $derived(selection.selectable(page)); + let dim = $derived(selection.active && !selectable); + let selected = $derived(selection.contains(page.id)); </script> <div @@ -58,8 +57,8 @@ role="button" tabindex="0" class="{span} focus-thick focus-blue relative overflow-hidden rounded" - on:click={press} - on:keydown={press} + onclick={press} + onkeydown={press} > <SelectionOverlay position="top" {selected} /> <img diff --git a/frontend/src/lib/icons/Bookmark.svelte b/frontend/src/lib/icons/Bookmark.svelte index 6f8e192..21b54ed 100644 --- a/frontend/src/lib/icons/Bookmark.svelte +++ b/frontend/src/lib/icons/Bookmark.svelte @@ -1,10 +1,15 @@ <script lang="ts"> - export let bookmarked: boolean | undefined = undefined; - export let hoverable = false; + interface Props { + bookmarked?: boolean; + hoverable?: boolean; + } + + let { bookmarked, hoverable = false }: Props = $props(); </script> {#if bookmarked} - <span class:hoverable class="icon-gray icon-base icon-[material-symbols--bookmark]" /> + <span class:hoverable class="icon-gray icon-base icon-[material-symbols--bookmark]"></span> {:else} - <span class:hoverable class="icon-gray icon-base dim icon-[material-symbols--bookmark-outline]" /> + <span class:hoverable class="icon-gray icon-base dim icon-[material-symbols--bookmark-outline]" + ></span> {/if} diff --git a/frontend/src/lib/icons/Female.svelte b/frontend/src/lib/icons/Female.svelte index c772a6a..7bc422b 100644 --- a/frontend/src/lib/icons/Female.svelte +++ b/frontend/src/lib/icons/Female.svelte @@ -1 +1 @@ -<span class="icon-xs icon-[material-symbols--female] -mx-[3px]" /> +<span class="icon-xs icon-[material-symbols--female] -mx-[3px]"></span> diff --git a/frontend/src/lib/icons/Location.svelte b/frontend/src/lib/icons/Location.svelte index e345f83..d785832 100644 --- a/frontend/src/lib/icons/Location.svelte +++ b/frontend/src/lib/icons/Location.svelte @@ -1 +1 @@ -<span class="icon-xs icon-[material-symbols--location-on-outline]" /> +<span class="icon-xs icon-[material-symbols--location-on-outline]"></span> diff --git a/frontend/src/lib/icons/Male.svelte b/frontend/src/lib/icons/Male.svelte index e3578b7..8c72c47 100644 --- a/frontend/src/lib/icons/Male.svelte +++ b/frontend/src/lib/icons/Male.svelte @@ -1 +1 @@ -<span class="icon-xs icon-[material-symbols--male] -mx-px" /> +<span class="icon-xs icon-[material-symbols--male] -mx-px"></span> diff --git a/frontend/src/lib/icons/Organized.svelte b/frontend/src/lib/icons/Organized.svelte index 66b5b00..ff177fa 100644 --- a/frontend/src/lib/icons/Organized.svelte +++ b/frontend/src/lib/icons/Organized.svelte @@ -1,21 +1,22 @@ <script lang="ts"> - export let organized: boolean | undefined = undefined; - export let hoverable = false; - export let tristate = false; - export let dim = false; + interface Props { + organized?: boolean; + hoverable?: boolean; + tristate?: boolean; + dim?: boolean; + } + + let { organized, hoverable = false, tristate = false, dim = false }: Props = $props(); </script> {#if organized} - <span class:hoverable class="icon-gray icon-base icon-[material-symbols--check-circle]" /> + <span class:hoverable class="icon-gray icon-base icon-[material-symbols--check-circle]"></span> {:else if organized === undefined || !tristate} <span class:hoverable class="icon-gray dim icon-base icon-[material-symbols--check-circle-outline]" - /> + ></span> {:else} - <span - class:hoverable - class:dim - class="icon-gray icon-base icon-[material-symbols--unpublished]" - /> + <span class:hoverable class:dim class="icon-gray icon-base icon-[material-symbols--unpublished]" + ></span> {/if} diff --git a/frontend/src/lib/icons/Star.svelte b/frontend/src/lib/icons/Star.svelte index 7613c55..bd8af67 100644 --- a/frontend/src/lib/icons/Star.svelte +++ b/frontend/src/lib/icons/Star.svelte @@ -1,17 +1,22 @@ <script lang="ts"> - export let large = false; - export let favourite: boolean | undefined = undefined; - export let hoverable = false; + interface Props { + large?: boolean; + favourite?: boolean; + hoverable?: boolean; + } + + let { large = false, favourite, hoverable = false }: Props = $props(); </script> {#if favourite} - <span class:hoverable class:large class="icon-yellow icon-[material-symbols--star-rounded]" /> + <span class:hoverable class:large class="icon-yellow icon-[material-symbols--star-rounded]" + ></span> {:else} <span class:hoverable class:large class="icon-yellow dim icon-[material-symbols--star-outline-rounded]" - /> + ></span> {/if} <style lang="postcss"> diff --git a/frontend/src/lib/icons/Transgender.svelte b/frontend/src/lib/icons/Transgender.svelte index 7d9adc6..fa7d38b 100644 --- a/frontend/src/lib/icons/Transgender.svelte +++ b/frontend/src/lib/icons/Transgender.svelte @@ -1 +1 @@ -<span class="icon-xs icon-[material-symbols--transgender]" /> +<span class="icon-xs icon-[material-symbols--transgender]"></span> diff --git a/frontend/src/lib/navigation/Link.svelte b/frontend/src/lib/navigation/Link.svelte index be09a36..9c7e218 100644 --- a/frontend/src/lib/navigation/Link.svelte +++ b/frontend/src/lib/navigation/Link.svelte @@ -1,20 +1,31 @@ <script lang="ts"> - import { page } from '$app/stores'; + import { page } from '$app/state'; import { accelerator, type Shortcut } from '$lib/Shortcuts'; - import type { HTMLAttributeAnchorTarget } from 'svelte/elements'; + import type { Snippet } from 'svelte'; + import type { HTMLAnchorAttributes } from 'svelte/elements'; - export let href: string; - export let title: string; - export let accel: Shortcut; - export let matchExact = false; - export let target: HTMLAttributeAnchorTarget | undefined = undefined; - $: active = matchExact ? $page.url.pathname === href : $page.url.pathname.startsWith(href); + interface Props extends Pick<HTMLAnchorAttributes, 'title' | 'target'> { + href: string; + accel: Shortcut; + matchExact?: boolean; + children?: Snippet; + } + + let { href, title, accel, matchExact = false, target, children }: Props = $props(); + + let active = $derived.by(() => { + if (matchExact) { + return page.url.pathname === href; + } else { + return page.url.pathname.startsWith(href); + } + }); </script> <li class:active class="items-center hover:bg-indigo-700 [&.active]:bg-indigo-700"> <a class="focus-background flex items-center" {target} {title} {href} use:accelerator={accel}> <div class="flex p-3"> - <slot /> + {@render children?.()} </div> </a> </li> diff --git a/frontend/src/lib/navigation/Navigation.svelte b/frontend/src/lib/navigation/Navigation.svelte index 76096c8..6734272 100644 --- a/frontend/src/lib/navigation/Navigation.svelte +++ b/frontend/src/lib/navigation/Navigation.svelte @@ -1,5 +1,11 @@ +<script lang="ts"> + import type { Snippet } from 'svelte'; + + let { children }: { children?: Snippet } = $props(); +</script> + <nav> <ul class="flex h-full flex-col bg-slate-700/70 font-medium"> - <slot /> + {@render children?.()} </ul> </nav> diff --git a/frontend/src/lib/pagination/Pagination.svelte b/frontend/src/lib/pagination/Pagination.svelte index 51612f4..fc2935c 100644 --- a/frontend/src/lib/pagination/Pagination.svelte +++ b/frontend/src/lib/pagination/Pagination.svelte @@ -1,45 +1,52 @@ <script lang="ts"> - import { getPaginationContext } from '$lib/Pagination'; + import type { PaginationData } from '$lib/Navigation'; import Target from './Target.svelte'; - const pagination = getPaginationContext(); - export let context = 2; + interface Props { + context?: number; + pagination: PaginationData; + total: number; + } - $: totalPages = Math.ceil($pagination.total / $pagination.items); - $: rightBoundary = $pagination.page - context; - $: leftBoundary = $pagination.page + context; + let { context = 2, pagination, total }: Props = $props(); - $: shiftRight = leftBoundary - totalPages; - $: shiftLeft = 1 - rightBoundary; + let totalPages = $derived(Math.ceil(total / pagination.items)); + let rightBoundary = $derived(pagination.page - context); + let leftBoundary = $derived(pagination.page + context); - $: containedLeft = leftBoundary <= totalPages; - $: containedRight = rightBoundary > 0; + let shiftRight = $derived(leftBoundary - totalPages); + let shiftLeft = $derived(1 - rightBoundary); - $: start = Math.max(1, containedLeft ? rightBoundary : rightBoundary - shiftRight); - $: end = Math.min(totalPages, containedRight ? leftBoundary : leftBoundary + shiftLeft); + let containedLeft = $derived(leftBoundary <= totalPages); + let containedRight = $derived(rightBoundary > 0); - $: leftmost = $pagination.page <= 1; - $: rightmost = $pagination.page >= totalPages; + let start = $derived(Math.max(1, containedLeft ? rightBoundary : rightBoundary - shiftRight)); + let end = $derived( + Math.min(totalPages, containedRight ? leftBoundary : leftBoundary + shiftLeft) + ); + + let leftmost = $derived(pagination.page <= 1); + let rightmost = $derived(pagination.page >= totalPages); </script> {#if totalPages > 1} <div class="flex justify-center gap-2"> - <Target disabled={leftmost} page={1}> - <span class="icon-base icon-[material-symbols--keyboard-double-arrow-left]" /> + <Target disabled={leftmost} target={1}> + <span class="icon-base icon-[material-symbols--keyboard-double-arrow-left]"></span> </Target> - <Target disabled={leftmost} page={$pagination.page - 1}> - <span class="icon-base icon-[material-symbols--keyboard-arrow-left]" /> + <Target disabled={leftmost} target={pagination.page - 1}> + <span class="icon-base icon-[material-symbols--keyboard-arrow-left]"></span> </Target> - {#each Array.from({ length: end + 1 - start }, (_, i) => i + start) as page} - <Target active={$pagination.page === page} {page}> - <p>{page.toString()}</p> + {#each Array.from({ length: end + 1 - start }, (_, i) => i + start) as target} + <Target active={pagination.page === target} {target}> + <p>{target.toString()}</p> </Target> {/each} - <Target disabled={rightmost} page={$pagination.page + 1}> - <span class="icon-base icon-[material-symbols--keyboard-arrow-right]" /> + <Target disabled={rightmost} target={pagination.page + 1}> + <span class="icon-base icon-[material-symbols--keyboard-arrow-right]"></span> </Target> - <Target disabled={rightmost} page={totalPages}> - <span class="icon-base icon-[material-symbols--keyboard-double-arrow-right]" /> + <Target disabled={rightmost} target={totalPages}> + <span class="icon-base icon-[material-symbols--keyboard-double-arrow-right]"></span> </Target> </div> {/if} diff --git a/frontend/src/lib/pagination/Target.svelte b/frontend/src/lib/pagination/Target.svelte index 9044bb9..6cbacbb 100644 --- a/frontend/src/lib/pagination/Target.svelte +++ b/frontend/src/lib/pagination/Target.svelte @@ -1,21 +1,28 @@ <script lang="ts"> - import { page as pageStore } from '$app/stores'; + import { page } from '$app/state'; import { navigate } from '$lib/Navigation'; + import type { Snippet } from 'svelte'; - export let active = false; + interface Props { + active?: boolean; + disabled?: boolean; + target: number; + children?: Snippet; + } - export let disabled = false; - export let page: number; + let { active = false, disabled = false, target, children }: Props = $props(); + + function onclick() { + navigate({ pagination: { page: target } }, page.url.searchParams); + } </script> <button - on:click={() => { - navigate({ pagination: { page: page } }, $pageStore.url.searchParams); - }} + {onclick} class:bg-slate-700={active} class:bg-slate-800={!active} class="flex h-8 w-8 items-center justify-center rounded-sm p-0 text-base hover:text-white disabled:text-slate-600" {disabled} > - <slot /> + {@render children?.()} </button> diff --git a/frontend/src/lib/pills/AssociationPill.svelte b/frontend/src/lib/pills/AssociationPill.svelte index 85dbe39..ffbc8c4 100644 --- a/frontend/src/lib/pills/AssociationPill.svelte +++ b/frontend/src/lib/pills/AssociationPill.svelte @@ -3,12 +3,13 @@ type Association = 'artist' | 'circle' | 'world' | 'character'; - export let name: string; - export let type: Association; + let { name, type }: { name: string; type: Association } = $props(); </script> <Pill {name}> - <span class={`${type} icon-xs`} slot="icon" /> + {#snippet icon()} + <span class={`${type} icon-xs`}></span> + {/snippet} </Pill> <style lang="postcss"> diff --git a/frontend/src/lib/pills/ComicPills.svelte b/frontend/src/lib/pills/ComicPills.svelte index 671bbf2..45c42fd 100644 --- a/frontend/src/lib/pills/ComicPills.svelte +++ b/frontend/src/lib/pills/ComicPills.svelte @@ -3,7 +3,7 @@ import AssociationPill from '$lib/pills/AssociationPill.svelte'; import TagPill from '$lib/pills/TagPill.svelte'; - export let comic: ComicFragment; + let { comic }: { comic: ComicFragment } = $props(); </script> <div class="flex flex-col gap-1"> diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte index 7aa9670..24d617d 100644 --- a/frontend/src/lib/pills/Pill.svelte +++ b/frontend/src/lib/pills/Pill.svelte @@ -1,15 +1,22 @@ -<script lang="ts" context="module"> +<script lang="ts" module> export type PillColour = 'pink' | 'blue' | 'violet' | 'amber' | 'zinc' | 'sky'; </script> <script lang="ts"> - export let name: string; - export let tooltip: string | null | undefined = undefined; - export let colour: PillColour = 'zinc'; + import type { Snippet } from 'svelte'; + + interface Props { + name: string; + tooltip?: string | null; + colour?: PillColour; + icon?: Snippet; + } + + let { name, tooltip, colour = 'zinc', icon }: Props = $props(); </script> <div class="flex items-center rounded border p-0.5 {colour}" title={tooltip}> - <slot name="icon" /> + {@render icon?.()} <span>{name}</span> </div> diff --git a/frontend/src/lib/pills/TagPill.svelte b/frontend/src/lib/pills/TagPill.svelte index 60221bd..92d2a0b 100644 --- a/frontend/src/lib/pills/TagPill.svelte +++ b/frontend/src/lib/pills/TagPill.svelte @@ -3,11 +3,10 @@ import Location from '$lib/icons/Location.svelte'; import Male from '$lib/icons/Male.svelte'; import Transgender from '$lib/icons/Transgender.svelte'; - import { SvelteComponent } from 'svelte'; + import type { Component } from 'svelte'; import Pill, { type PillColour } from './Pill.svelte'; - export let name: string; - export let description: string | undefined | null = undefined; + let { name, description }: { name: string; description?: string | null } = $props(); let [namespace, tag] = name.split(':'); @@ -20,7 +19,7 @@ rest: 'zinc' }; - const icons: Record<string, typeof SvelteComponent<Record<string, unknown>>> = { + const icons: Record<string, Component> = { female: Female, male: Male, trans: Transgender, @@ -28,7 +27,7 @@ }; const colour = styles[namespace] ?? styles.rest; - const icon = icons[namespace]; + const Icon = icons[namespace]; function formatTooltip() { return [name, description].filter((v) => v).join('\n\n'); @@ -36,5 +35,9 @@ </script> <Pill name={tag} tooltip={formatTooltip()} {colour}> - <svelte:component this={icon} slot="icon" /> + {#snippet icon()} + {#if Icon} + <Icon /> + {/if} + {/snippet} </Pill> diff --git a/frontend/src/lib/reader/PageView.svelte b/frontend/src/lib/reader/PageView.svelte index 08764b7..81fbb97 100644 --- a/frontend/src/lib/reader/PageView.svelte +++ b/frontend/src/lib/reader/PageView.svelte @@ -1,8 +1,8 @@ <script lang="ts"> import { Direction, Layout, type PageFragment } from '$gql/graphql'; - import { getReaderContext, partition, type Chunk } from '$lib/Reader'; import { binds } from '$lib/Shortcuts'; import { src } from '$lib/Utils'; + import { getReaderContext, partition, type Chunk } from './Reader.svelte'; import ReaderPage from './ReaderPage.svelte'; const reader = getReaderContext(); @@ -19,14 +19,14 @@ function gotoChunk(to: number) { if (to < 0 || to >= chunks.length) return; - $reader.page = chunks[to].index; + reader.page = chunks[to].index; } function pagesAround(around: number) { const peek = (at: number) => { if (at < 0 || at >= chunks.length) return []; - const pages = [chunks[at].main]; + const pages: PageFragment[] = [chunks[at].main]; if (chunks[at].secondary) { pages.push(chunks[at].secondary); @@ -38,8 +38,8 @@ return [...peek(lookup[around] + 1), ...peek(lookup[around] - 1)]; } - const next = () => gotoChunk(lookup[$reader.page] + 1); - const prev = () => gotoChunk(lookup[$reader.page] - 1); + const next = () => gotoChunk(lookup[reader.page] + 1); + const prev = () => gotoChunk(lookup[reader.page] - 1); const clickLeft = () => (direction === Direction.LeftToRight ? prev() : next()); const clickRight = () => (direction === Direction.RightToLeft ? prev() : next()); @@ -56,8 +56,8 @@ } } - $: [chunks, lookup] = partition($reader.pages, layout); - $: layout, ({ main, secondary } = chunks[lookup[$reader.page]]); + $: [chunks, lookup] = partition(reader.pages, layout); + $: layout, ({ main, secondary } = chunks[lookup[reader.page]]); </script> <svelte:document @@ -76,16 +76,16 @@ /> {#if !secondary} - <ReaderPage page={main} on:click={clickMain} --justify="center" /> + <ReaderPage page={main} onclick={clickMain} --justify="center" /> {:else if direction === Direction.LeftToRight} - <ReaderPage page={main} on:click={prev} --justify="flex-end" /> - <ReaderPage page={secondary} on:click={next} --justify="flex-start" /> + <ReaderPage page={main} onclick={prev} --justify="flex-end" /> + <ReaderPage page={secondary} onclick={next} --justify="flex-start" /> {:else} - <ReaderPage page={secondary} on:click={next} --justify="flex-end" /> - <ReaderPage page={main} on:click={prev} --justify="flex-start" /> + <ReaderPage page={secondary} onclick={next} --justify="flex-end" /> + <ReaderPage page={main} onclick={prev} --justify="flex-start" /> {/if} <div class="invisible absolute"> - {#each pagesAround($reader.page) as page} + {#each pagesAround(reader.page) as page} <img src={src(page.image, 'full')} alt="" /> {/each} </div> diff --git a/frontend/src/lib/reader/Reader.svelte b/frontend/src/lib/reader/Reader.svelte index 9bc7a82..b5cc725 100644 --- a/frontend/src/lib/reader/Reader.svelte +++ b/frontend/src/lib/reader/Reader.svelte @@ -1,32 +1,96 @@ +<script lang="ts" module> + import { Layout, type PageFragment } from '$gql/graphql'; + import { getContext, setContext } from 'svelte'; + + export interface Chunk { + main: PageFragment; + secondary?: PageFragment; + index: number; + } + + class ReaderContext { + visible = $state(false); + sidebar = $state(false); + pages: PageFragment[] = $state([]); + page = $state(0); + + open = (page: number) => { + this.page = page; + this.visible = true; + }; + } + + export function initReaderContext() { + return setContext<ReaderContext>('reader', new ReaderContext()); + } + + export function getReaderContext() { + return getContext<ReaderContext>('reader'); + } + + export function partition(pages: PageFragment[], layout: Layout): [Chunk[], number[]] { + const single = layout === Layout.Single; + const offset = layout === Layout.DoubleOffset; + + const chunks: Chunk[] = []; + const lookup: number[] = Array<number>(pages.length); + + for (let chunkIndex = 0, pageIndex = 0; pageIndex < pages.length; chunkIndex++) { + const wide = () => pages[pageIndex].image.aspectRatio > 1; + + const nextPage = () => { + lookup[pageIndex] = chunkIndex; + return pages[pageIndex++]; + }; + + const offsetFirst = pageIndex === 0 && offset; + const full = single || wide() || offsetFirst; + + const chunk: Chunk = { index: pageIndex, main: nextPage() }; + + if (!full && pageIndex < pages.length) { + if (!wide()) { + chunk.secondary = nextPage(); + } + } + + chunks.push(chunk); + } + return [chunks, lookup]; + } +</script> + <script lang="ts"> import { trapFocus } from '$lib/Actions'; - import { getReaderContext } from '$lib/Reader'; import { fadeDefault, slideXDefault } from '$lib/Transitions'; + import type { Snippet } from 'svelte'; import { fade, slide } from 'svelte/transition'; import CloseReaderButton from './components/CloseReaderButton.svelte'; import PageIndicator from './components/PageIndicator.svelte'; import ReaderMenuButton from './components/ReaderMenuButton.svelte'; + let { sidebar, children }: { sidebar?: Snippet; children?: Snippet } = $props(); + const reader = getReaderContext(); </script> -{#if $reader.visible} +{#if reader.visible} <div role="dialog" class="fixed bottom-0 left-0 right-0 top-0 z-10 flex h-full w-full bg-black" transition:fade={fadeDefault} use:trapFocus > - {#if $$slots.sidebar && $reader.sidebar} + {#if sidebar && reader.sidebar} <aside class="w-[36rem] shrink-0 bg-slate-800" transition:slide={slideXDefault}> <div class="flex h-full min-w-[36rem] flex-col gap-4 overflow-auto p-4"> - <slot name="sidebar" /> + {@render sidebar?.()} </div> </aside> {/if} <main class="relative flex grow"> <div class="absolute flex w-full p-1 text-lg [&>*:last-child]:ml-auto"> - {#if $$slots.sidebar} + {#if sidebar} <ReaderMenuButton /> {/if} <CloseReaderButton /> @@ -36,7 +100,7 @@ </div> <div class="flex grow"> - <slot /> + {@render children?.()} </div> </main> </div> diff --git a/frontend/src/lib/reader/ReaderPage.svelte b/frontend/src/lib/reader/ReaderPage.svelte index fb3e780..83b2d1b 100644 --- a/frontend/src/lib/reader/ReaderPage.svelte +++ b/frontend/src/lib/reader/ReaderPage.svelte @@ -1,13 +1,19 @@ <script lang="ts"> import type { PageFragment } from '$gql/graphql'; import { src } from '$lib/Utils'; + import type { MouseEventHandler } from 'svelte/elements'; - export let page: PageFragment; + interface Props { + page: PageFragment; + onclick: MouseEventHandler<HTMLDivElement>; + } + + let { page, onclick }: Props = $props(); </script> -<!-- svelte-ignore a11y-click-events-have-key-events --> -<!-- svelte-ignore a11y-no-static-element-interactions --> -<div class="flex grow" on:click> +<!-- svelte-ignore a11y_click_events_have_key_events --> +<!-- svelte-ignore a11y_no_static_element_interactions --> +<div class="flex grow" {onclick}> <img class="h-auto w-auto object-contain" width={page.image.width} diff --git a/frontend/src/lib/reader/components/CloseReaderButton.svelte b/frontend/src/lib/reader/components/CloseReaderButton.svelte index 0c88323..f3eb4ba 100644 --- a/frontend/src/lib/reader/components/CloseReaderButton.svelte +++ b/frontend/src/lib/reader/components/CloseReaderButton.svelte @@ -1,19 +1,22 @@ <script lang="ts"> - import { getReaderContext } from '$lib/Reader'; import { accelerator } from '$lib/Shortcuts'; + import { getReaderContext } from '../Reader.svelte'; const reader = getReaderContext(); + + function onclick() { + reader.visible = false; + reader.sidebar = false; + } </script> <button type="button" class="btn floating" title="Close reader" - on:click={() => { - $reader.visible = false; - $reader.sidebar = false; - }} + aria-label="Close reader" + {onclick} use:accelerator={'Escape'} > - <span class="icon-lg icon-[material-symbols--close]" /> + <span class="icon-lg icon-[material-symbols--close]"></span> </button> diff --git a/frontend/src/lib/reader/components/PageIndicator.svelte b/frontend/src/lib/reader/components/PageIndicator.svelte index f79fc00..35190b3 100644 --- a/frontend/src/lib/reader/components/PageIndicator.svelte +++ b/frontend/src/lib/reader/components/PageIndicator.svelte @@ -1,9 +1,9 @@ <script lang="ts"> - import { getReaderContext } from '$lib/Reader'; + import { getReaderContext } from '../Reader.svelte'; const reader = getReaderContext(); </script> <div class="floating !p-2"> - {$reader.page + 1}/{$reader.pages.length} + {reader.page + 1}/{reader.pages.length} </div> diff --git a/frontend/src/lib/reader/components/ReaderMenuButton.svelte b/frontend/src/lib/reader/components/ReaderMenuButton.svelte index aa20206..58648e8 100644 --- a/frontend/src/lib/reader/components/ReaderMenuButton.svelte +++ b/frontend/src/lib/reader/components/ReaderMenuButton.svelte @@ -1,16 +1,19 @@ <script lang="ts"> - import { getReaderContext } from '$lib/Reader'; import { accelerator } from '$lib/Shortcuts'; + import { getReaderContext } from '../Reader.svelte'; const reader = getReaderContext(); + + let title = $derived(`${reader.sidebar ? 'Hide' : 'Show'} menu`); </script> <button type="button" class="btn floating invisible xl:visible" - title={`${$reader.sidebar ? 'Hide' : 'Show'} menu`} - on:click={() => ($reader.sidebar = !$reader.sidebar)} + {title} + aria-label={title} + onclick={() => (reader.sidebar = !reader.sidebar)} use:accelerator={'z'} > - <span class="icon-lg icon-[material-symbols--dock-to-right]" /> + <span class="icon-lg icon-[material-symbols--dock-to-right]"></span> </button> diff --git a/frontend/src/lib/scraper/ComicScrapeForm.svelte b/frontend/src/lib/scraper/ComicScrapeForm.svelte index 30ad89b..6cc3451 100644 --- a/frontend/src/lib/scraper/ComicScrapeForm.svelte +++ b/frontend/src/lib/scraper/ComicScrapeForm.svelte @@ -2,60 +2,69 @@ import { upsertComics } from '$gql/Mutations'; import { comicScrapersQuery, scrapeComic } from '$gql/Queries'; import { isError } from '$gql/Utils'; - import { OnMissing, type FullComicFragment } from '$gql/graphql'; - import { ScrapedComicSelector, getScraperContext } from '$lib/Scraper'; + import { OnMissing, type FullComicFragment, type ScrapeComicQuery } from '$gql/graphql'; import { toastError, toastFinally } from '$lib/Toasts'; import Select from '$lib/components/Select.svelte'; import Spinner from '$lib/components/Spinner.svelte'; - import { getContextClient } from '@urql/svelte'; + import { getContextClient, type OperationResult } from '@urql/svelte'; + import { getScraperContext, ScrapedComicSelector } from './Scraper.svelte'; import SelectorGroup from './components/SelectorGroup.svelte'; import SelectorItem from './components/SelectorItem.svelte'; let client = getContextClient(); const context = getScraperContext(); - export let comic: FullComicFragment; - let createMissing = false; - let loading = false; + interface Props { + comic: FullComicFragment; + onupsert: () => void; + } - $: scrapersResult = comicScrapersQuery(client, { id: comic.id }); - $: scrapers = $scrapersResult.data?.comicScrapers; + let { comic, onupsert }: Props = $props(); + let createMissing = $state(false); + let loading = $state(false); - function scrape() { - loading = true; - scrapeComic(client, { id: comic.id, scraper: $context.scraper }) - .then((result) => { - if (result.error) { - toastError(result.error.message); - return; - } + let scrapersResult = $derived(comicScrapersQuery(client, { id: comic.id })); + let scrapers = $derived($scrapersResult.data?.comicScrapers); - if (result.data) { - if (isError(result.data.scrapeComic)) { - toastError(result.data.scrapeComic.message); - return; - } + function scrape(event: SubmitEvent) { + event.preventDefault(); + if (!context.scraper) return; - if (result.data.scrapeComic.__typename === 'ScrapeComicResult') { - $context.selector = new ScrapedComicSelector(result.data.scrapeComic.data, comic); - $context.warnings = result.data.scrapeComic.warnings; - } - } - }) + loading = true; + scrapeComic(client, { id: comic.id, scraper: context.scraper }) + .then(handleScrapeResult) .catch(toastFinally) .finally(() => (loading = false)); } - function updateFromScrape(createMissing: boolean) { - if (!$context.selector) return; + function handleScrapeResult(result: OperationResult<ScrapeComicQuery>) { + if (result.error) { + toastError(result.error.message); + return; + } + + if (result.data) { + if (isError(result.data.scrapeComic)) { + toastError(result.data.scrapeComic.message); + return; + } + + if (result.data.scrapeComic.__typename === 'ScrapeComicResult') { + context.selector = new ScrapedComicSelector(result.data.scrapeComic.data, comic); + context.warnings = result.data.scrapeComic.warnings; + } + } + } + + function upsert(event: SubmitEvent) { + event.preventDefault(); + if (!context.selector) return; - upsertComics(client, { - ids: comic.id, - input: $context.selector.toInput(createMissing ? OnMissing.Create : OnMissing.Ignore) - }) + const input = context.selector.input(createMissing ? OnMissing.Create : OnMissing.Ignore); + upsertComics(client, { ids: comic.id, input }) .then(() => { - $context.selector = undefined; - $context.warnings = []; + onupsert(); + context.reset(); }) .catch(toastFinally); } @@ -65,56 +74,56 @@ {#if scrapers && scrapers.length === 0} <h2 class="text-base">No scrapers available.</h2> {:else} - <form on:submit|preventDefault={scrape}> + <form onsubmit={scrape}> <div class="grid grid-cols-6 gap-2"> <div class="col-span-5"> <Select id="scrapers" options={scrapers} placeholder={'Select scraper...'} - bind:value={$context.scraper} + bind:value={context.scraper} /> </div> - <button type="submit" disabled={!$context.scraper} class="btn-blue">Scrape</button> + <button type="submit" disabled={!context.scraper} class="btn-blue">Scrape</button> </div> </form> {/if} {#if loading} <Spinner /> - {:else if $context.selector} - {#if $context.warnings.length > 0} + {:else if context.selector} + {#if context.warnings.length > 0} <div class="flex flex-col gap-2"> <h2 class="flex gap-1 border-b border-slate-700 text-base font-medium">Warnings</h2> <ul class="ml-2 list-inside list-disc"> - {#each $context.warnings as warning} + {#each context.warnings as warning} <li>{warning}</li> {/each} </ul> </div> {/if} - {#if !$context.selector.hasData()} + {#if !context.selector.pending()} <h2 class="text-base">No data to merge.</h2> {:else} <div class="flex flex-col gap-2"> <h2 class="border-b border-slate-700 text-base font-medium">Results</h2> - <form on:submit|preventDefault={() => updateFromScrape(createMissing)}> + <form onsubmit={upsert}> <div class="grid grid-cols-6 gap-4 pb-2"> - <SelectorItem title="Title" selector={$context.selector.title} /> - <SelectorItem title="Original Title" selector={$context.selector.originalTitle} /> - <SelectorItem title="URL" selector={$context.selector.url} /> - <SelectorItem title="Date" selector={$context.selector.date} --span="2" /> - <SelectorItem title="Category" selector={$context.selector.category} --span="2" /> - <SelectorItem title="Language" selector={$context.selector.language} --span="2" /> - <SelectorItem title="Rating" selector={$context.selector.rating} --span="2" /> - <SelectorItem title="Censorship" selector={$context.selector.censorship} --span="2" /> - <SelectorItem title="Direction" selector={$context.selector.direction} --span="2" /> - <SelectorItem title="Layout" selector={$context.selector.layout} --span="2" /> - <SelectorGroup title="Artists" selectors={$context.selector.artists} /> - <SelectorGroup title="Circles" selectors={$context.selector.circles} /> - <SelectorGroup title="Characters" selectors={$context.selector.characters} /> - <SelectorGroup title="Worlds" selectors={$context.selector.worlds} /> - <SelectorGroup title="Tags" selectors={$context.selector.tags} /> + <SelectorItem title="Title" selector={context.selector.title} /> + <SelectorItem title="Original Title" selector={context.selector.originalTitle} /> + <SelectorItem title="URL" selector={context.selector.url} /> + <SelectorItem title="Date" selector={context.selector.date} --span="2" /> + <SelectorItem title="Category" selector={context.selector.category} --span="2" /> + <SelectorItem title="Language" selector={context.selector.language} --span="2" /> + <SelectorItem title="Rating" selector={context.selector.rating} --span="2" /> + <SelectorItem title="Censorship" selector={context.selector.censorship} --span="2" /> + <SelectorItem title="Direction" selector={context.selector.direction} --span="2" /> + <SelectorItem title="Layout" selector={context.selector.layout} --span="2" /> + <SelectorGroup title="Artists" selectors={context.selector.artists} /> + <SelectorGroup title="Circles" selectors={context.selector.circles} /> + <SelectorGroup title="Characters" selectors={context.selector.characters} /> + <SelectorGroup title="Worlds" selectors={context.selector.worlds} /> + <SelectorGroup title="Tags" selectors={context.selector.tags} /> </div> <div class="flex flex-col gap-2"> <h2 class="border-b border-slate-700 text-base font-medium">Options</h2> diff --git a/frontend/src/lib/Scraper.ts b/frontend/src/lib/scraper/Scraper.svelte.ts index 4baf370..93e756b 100644 --- a/frontend/src/lib/Scraper.ts +++ b/frontend/src/lib/scraper/Scraper.svelte.ts @@ -20,24 +20,28 @@ import { RatingLabel } from '$lib/Enums'; import { getContext, setContext } from 'svelte'; -import { writable, type Writable } from 'svelte/store'; -interface ScraperContext { - scraper: string; - warnings: string[]; - selector?: ScrapedComicSelector; +class ScraperContext { + scraper?: string = $state(); + warnings: string[] = $state([]); + selector?: ScrapedComicSelector = $state(); + + reset = () => { + this.selector = undefined; + this.warnings = []; + }; } export function initScraperContext() { - return setContext<Writable<ScraperContext>>('scraper', writable({ scraper: '', warnings: [] })); + return setContext<ScraperContext>('scraper', new ScraperContext()); } export function getScraperContext() { - return getContext<Writable<ScraperContext>>('scraper'); + return getContext<ScraperContext>('scraper'); } export class Selector<T extends string> { - keep = true; + keep = $state(true); value: T; display: string | undefined; @@ -46,6 +50,10 @@ export class Selector<T extends string> { this.display = display; } + toggle = () => { + this.keep = !this.keep; + }; + toString() { return this.display ?? this.value; } @@ -121,7 +129,7 @@ export class ScrapedComicSelector { this.worlds = Selector.fromList(scraped.worlds, comic.worlds); } - hasData() { + pending() { return ( Object.values(this).filter((i) => { if (i === undefined) { @@ -134,7 +142,7 @@ export class ScrapedComicSelector { ); } - toInput(onMissing: OnMissing): UpsertComicInput { + input(onMissing: OnMissing): UpsertComicInput { return { title: keepItem(this.title), originalTitle: keepItem(this.originalTitle), diff --git a/frontend/src/lib/scraper/components/SelectorButton.svelte b/frontend/src/lib/scraper/components/SelectorButton.svelte index b786f89..e976f91 100644 --- a/frontend/src/lib/scraper/components/SelectorButton.svelte +++ b/frontend/src/lib/scraper/components/SelectorButton.svelte @@ -1,19 +1,19 @@ <script lang="ts"> - import { Selector } from '$lib/Scraper'; + import { Selector } from '../Scraper.svelte'; - export let selector: Selector<string>; + let { selector }: { selector: Selector<string> } = $props(); </script> <button type="button" class="ml-1 flex rounded-sm border-slate-700 bg-slate-900 hover:brightness-110" - on:click={() => (selector.keep = !selector.keep)} + onclick={selector.toggle} > <div class="flex self-center pl-1"> {#if selector.keep} - <span class="icon-base icon-[material-symbols--check] text-green-400" /> + <span class="icon-base icon-[material-symbols--check] text-green-400"></span> {:else} - <span class="icon-base icon-[material-symbols--close] text-red-400" /> + <span class="icon-base icon-[material-symbols--close] text-red-400"></span> {/if} </div> <p class:opacity-50={!selector.keep} class="p-1 text-left"> diff --git a/frontend/src/lib/scraper/components/SelectorGroup.svelte b/frontend/src/lib/scraper/components/SelectorGroup.svelte index 1fdb8f2..11489b1 100644 --- a/frontend/src/lib/scraper/components/SelectorGroup.svelte +++ b/frontend/src/lib/scraper/components/SelectorGroup.svelte @@ -1,9 +1,13 @@ <script lang="ts"> - import { Selector } from '$lib/Scraper'; + import { Selector } from '../Scraper.svelte'; import SelectorButton from './SelectorButton.svelte'; - export let title: string; - export let selectors: Selector<string>[]; + interface Props { + title: string; + selectors: Selector<string>[]; + } + + let { title, selectors = $bindable() }: Props = $props(); function invert() { for (let selector of selectors) { @@ -20,8 +24,9 @@ <button type="button" class="flex items-end opacity-75 brightness-75 transition-opacity hover:opacity-100 hover:brightness-110 focus-visible:opacity-100" - on:click={invert} + onclick={invert} title="Invert selection" + aria-label="Invert selection" > <span class="icon-xs icon-[material-symbols--compare-arrows]"></span> </button> diff --git a/frontend/src/lib/scraper/components/SelectorItem.svelte b/frontend/src/lib/scraper/components/SelectorItem.svelte index dd3f5b4..5beba50 100644 --- a/frontend/src/lib/scraper/components/SelectorItem.svelte +++ b/frontend/src/lib/scraper/components/SelectorItem.svelte @@ -1,9 +1,8 @@ <script lang="ts"> - import { Selector } from '$lib/Scraper'; + import { Selector } from '../Scraper.svelte'; import SelectorButton from './SelectorButton.svelte'; - export let title: string; - export let selector: Selector<string> | undefined; + let { title, selector }: { title: string; selector?: Selector<string> } = $props(); </script> {#if selector} diff --git a/frontend/src/lib/selection/Selectable.svelte b/frontend/src/lib/selection/Selectable.svelte index 48b6ac7..4705f44 100644 --- a/frontend/src/lib/selection/Selectable.svelte +++ b/frontend/src/lib/selection/Selectable.svelte @@ -1,18 +1,20 @@ <script lang="ts"> - import { getSelectionContext } from '$lib/Selection'; + import type { Snippet } from 'svelte'; + import { getSelectionContext } from './Selection.svelte'; - export let id: number; - export let index: number; + interface Props { + id: number; + index: number; + edit?: ((id: number) => void) | undefined; + children?: Snippet<[{ onclick: (event: MouseEvent) => void; selected: boolean }]>; + } - export let edit: ((id: number) => void) | undefined = undefined; + let { id, index, edit = undefined, children }: Props = $props(); + let selection = getSelectionContext(); - const selection = getSelectionContext(); - - $: selected = $selection.contains(id); - - const handle = (event: MouseEvent) => { - if ($selection.active) { - $selection = $selection.update(index, event.shiftKey); + const onclick = (event: MouseEvent) => { + if (selection.active) { + selection.update(index, event.shiftKey); event.preventDefault(); } else if (edit) { edit(id); @@ -21,4 +23,4 @@ }; </script> -<slot {handle} {selected} /> +{@render children?.({ onclick, selected: selection.contains(id) })} diff --git a/frontend/src/lib/selection/Selection.svelte.ts b/frontend/src/lib/selection/Selection.svelte.ts new file mode 100644 index 0000000..dc294d0 --- /dev/null +++ b/frontend/src/lib/selection/Selection.svelte.ts @@ -0,0 +1,121 @@ +import { getContext, setContext } from 'svelte'; +import { SvelteSet } from 'svelte/reactivity'; +import { range } from '../Utils'; + +interface Selectable { + id: number; +} + +export function initSelectionContext<T extends Selectable>( + typename: string, + toName: (item: T) => string, + selectable?: (item: T) => boolean +) { + return setContext('selection', new ItemSelection(typename, toName, selectable)); +} + +export function getSelectionContext<T extends Selectable>() { + return getContext<ItemSelection<T>>('selection'); +} + +export class ItemSelection<T extends Selectable> { + active = $state(false); + view: T[] = $state([]); + + #ids = $state(new SvelteSet<number>()); + #masked = $derived(new SvelteSet([...this.#ids].filter((i) => this.#indexOf(i) >= 0))); + + typename: string; + #toName: (item: T) => string; + selectable: (item: T) => boolean; + + constructor( + typename: string, + toName: (item: T) => string, + selectable: (item: T) => boolean = () => true + ) { + this.typename = typename; + this.#toName = toName; + this.selectable = selectable; + } + + #indexOf = (id: number) => this.view.findIndex((v) => v.id === id); + + update = (index: number, shift: boolean) => { + const id = this.view[index].id; + + const selectableRange = (first: number, last: number) => + range(first, last) + .filter((i) => this.selectable(this.view[i])) + .map((i) => this.view[i].id); + + if (shift) { + const indices = this.indices; + + const first = indices.at(0); + const last = indices.at(-1); + + if (first === undefined || last === undefined) { + this.#ids.add(id); + } else if (index === first || index === last) { + this.#ids.clear(); + } else if (index > last) { + this.#ids = new SvelteSet([...this.#ids, ...selectableRange(last, index)]); + } else if (index < last) { + this.#ids = new SvelteSet([...this.#ids, ...selectableRange(index, last)]); + } + } else { + if (this.#ids.has(id)) { + this.#ids.delete(id); + } else { + this.#ids.add(id); + } + } + }; + + toggle = () => { + this.active = !this.active; + + if (!this.active) { + this.none(); + } + }; + + all = () => { + this.#ids = new SvelteSet(this.view.filter(this.selectable).map((i) => i.id)); + }; + + none = () => { + this.#ids.clear(); + this.#masked.clear(); + }; + + clear = () => { + this.active = false; + this.none(); + }; + + contains(id: number) { + return this.#masked.has(id); + } + + get ids() { + return [...this.#masked]; + } + + get size() { + return this.#masked.size; + } + + get indices() { + return [...this.#ids].map(this.#indexOf).filter((i) => i >= 0); + } + + get items() { + return this.indices.map((i) => this.view[i]); + } + + get names() { + return this.items.map(this.#toName); + } +} diff --git a/frontend/src/lib/selection/SelectionOverlay.svelte b/frontend/src/lib/selection/SelectionOverlay.svelte index 04ff382..97421b0 100644 --- a/frontend/src/lib/selection/SelectionOverlay.svelte +++ b/frontend/src/lib/selection/SelectionOverlay.svelte @@ -1,7 +1,11 @@ <script lang="ts"> - export let selected: boolean; - export let position: 'top' | 'right' | 'left' | 'bottom'; - export let centered = false; + interface Props { + selected: boolean; + position: 'top' | 'right' | 'left' | 'bottom'; + centered?: boolean; + } + + let { selected, position, centered = false }: Props = $props(); </script> {#if selected} @@ -9,7 +13,7 @@ class:items-center={centered} class="{position} pointer-events-none absolute z-[1] flex bg-emerald-700/95" > - <span class="icon-base icon-[material-symbols--check] text-[2rem]" /> + <span class="icon-base icon-[material-symbols--check] text-[2rem]"></span> </div> {/if} diff --git a/frontend/src/lib/statistics/Stat.svelte b/frontend/src/lib/statistics/Stat.svelte index c657526..7e03e09 100644 --- a/frontend/src/lib/statistics/Stat.svelte +++ b/frontend/src/lib/statistics/Stat.svelte @@ -1,8 +1,12 @@ <script lang="ts"> - export let title: string; - export let value: number; - export let precision = 0; - export let unit = ''; + interface Props { + title: string; + value: number; + precision?: number; + unit?: string; + } + + let { title, value, precision = 0, unit = '' }: Props = $props(); function format(value: number) { if (Number.isNaN(value) || !Number.isFinite(value)) { diff --git a/frontend/src/lib/statistics/StatGroup.svelte b/frontend/src/lib/statistics/StatGroup.svelte index e1b97da..e84c555 100644 --- a/frontend/src/lib/statistics/StatGroup.svelte +++ b/frontend/src/lib/statistics/StatGroup.svelte @@ -1,5 +1,7 @@ <script lang="ts"> - export let title; + import type { Snippet } from 'svelte'; + + let { title, children }: { title: string; children?: Snippet } = $props(); </script> <section @@ -7,6 +9,6 @@ > <h2 class="text-2xl">{title}</h2> <div class="flex flex-row flex-wrap gap-10"> - <slot /> + {@render children?.()} </div> </section> diff --git a/frontend/src/lib/tabs/AddOverlay.svelte b/frontend/src/lib/tabs/AddOverlay.svelte index b1c98bf..329b259 100644 --- a/frontend/src/lib/tabs/AddOverlay.svelte +++ b/frontend/src/lib/tabs/AddOverlay.svelte @@ -1,7 +1,7 @@ <script lang="ts"> - import { updateComics } from '$gql/Mutations'; import { UpdateMode } from '$gql/graphql'; - import { getSelectionContext } from '$lib/Selection'; + import { updateComics } from '$gql/Mutations'; + import { getSelectionContext } from '$lib/selection/Selection.svelte'; import { toastFinally } from '$lib/Toasts'; import { fadeDefault } from '$lib/Transitions'; import { getContextClient } from '@urql/svelte'; @@ -10,27 +10,30 @@ const client = getContextClient(); const selection = getSelectionContext(); - export let id: number; + let { id }: { id: number } = $props(); + + function onclick(event: MouseEvent) { + event.preventDefault(); - function addPages() { updateComics(client, { ids: id, - input: { pages: { ids: $selection.ids, options: { mode: UpdateMode.Add } } } + input: { pages: { ids: selection.ids, options: { mode: UpdateMode.Add } } } }) - .then(() => ($selection = $selection.none())) + .then(() => selection.none()) .catch(toastFinally); } </script> -{#if $selection.size > 0} +{#if selection.size > 0} <div class="absolute left-1 top-1" transition:fade={fadeDefault}> <button type="button" class="btn-blue rounded-full shadow-sm shadow-black" title="Add to this comic" - on:click|preventDefault={addPages} + aria-label="Add to this comic" + {onclick} > - <span class="icon-base icon-[material-symbols--note-add]" /> + <span class="icon-base icon-[material-symbols--note-add]"></span> </button> </div> {/if} diff --git a/frontend/src/lib/tabs/ArchiveDelete.svelte b/frontend/src/lib/tabs/ArchiveDelete.svelte index b0e3c58..50a99c2 100644 --- a/frontend/src/lib/tabs/ArchiveDelete.svelte +++ b/frontend/src/lib/tabs/ArchiveDelete.svelte @@ -9,7 +9,7 @@ const client = getContextClient(); - export let archive: FullArchiveFragment; + let { archive }: { archive: FullArchiveFragment } = $props(); function deleteArchive() { confirmDeletion('Archive', archive.name, () => { @@ -37,6 +37,6 @@ <p class="mt-2 font-medium">This action is irrevocable.</p> </div> <div class="flex"> - <DeleteButton prominent on:click={deleteArchive} /> + <DeleteButton prominent onclick={deleteArchive} /> </div> </div> diff --git a/frontend/src/lib/tabs/ArchiveDetails.svelte b/frontend/src/lib/tabs/ArchiveDetails.svelte index 9554557..b3d570f 100644 --- a/frontend/src/lib/tabs/ArchiveDetails.svelte +++ b/frontend/src/lib/tabs/ArchiveDetails.svelte @@ -8,7 +8,7 @@ import Header from './DetailsHeader.svelte'; import Section from './DetailsSection.svelte'; - export let archive: FullArchiveFragment; + let { archive }: { archive: FullArchiveFragment } = $props(); const now = Date.now(); const modifiedDate = new Date(archive.mtime); diff --git a/frontend/src/lib/tabs/ArchiveEdit.svelte b/frontend/src/lib/tabs/ArchiveEdit.svelte index 80efaed..83a492b 100644 --- a/frontend/src/lib/tabs/ArchiveEdit.svelte +++ b/frontend/src/lib/tabs/ArchiveEdit.svelte @@ -1,12 +1,12 @@ <script lang="ts"> import { addComic, updateArchives } from '$gql/Mutations'; import { type FullArchiveFragment } from '$gql/graphql'; - import { getSelectionContext } from '$lib/Selection'; import { toastFinally } from '$lib/Toasts'; import AddButton from '$lib/components/AddButton.svelte'; import Card, { comicCard } from '$lib/components/Card.svelte'; import OrganizedButton from '$lib/components/OrganizedButton.svelte'; import ComicPills from '$lib/pills/ComicPills.svelte'; + import { getSelectionContext } from '$lib/selection/Selection.svelte'; import SelectionControls from '$lib/toolbar/SelectionControls.svelte'; import { getContextClient } from '@urql/svelte'; import AddOverlay from './AddOverlay.svelte'; @@ -14,23 +14,23 @@ const client = getContextClient(); const selection = getSelectionContext(); - export let archive: FullArchiveFragment; + let { archive }: { archive: FullArchiveFragment } = $props(); function addNew() { addComic(client, { input: { archive: { id: archive.id }, title: archive.name, - pages: { ids: $selection.ids }, - cover: { id: archive.pages[$selection.indices.toSorted((a, b) => a - b)[0]].id } + pages: { ids: selection.ids }, + cover: { id: archive.pages[selection.indices.toSorted((a, b) => a - b)[0]].id } } }) .then((mutatation) => { const data = mutatation.addComic; if (data.__typename === 'AddComicSuccess' && !data.archivePagesRemaining) { - $selection = $selection.clear(); + selection.clear(); } else { - $selection = $selection.none(); + selection.none(); } }) .catch(toastFinally); @@ -46,10 +46,10 @@ <div class="flex flex-col gap-4"> <div class="flex gap-2 text-sm"> <SelectionControls page> - <AddButton title="Add Comic from selected" on:click={addNew} /> + <AddButton title="Add Comic from selected" onclick={addNew} /> </SelectionControls> - <div class="grow" /> - <OrganizedButton organized={archive.organized} on:click={toggleOrganized} /> + <div class="grow"></div> + <OrganizedButton organized={archive.organized} onclick={toggleOrganized} /> </div> {#if archive.comics.length > 0} @@ -58,7 +58,9 @@ <div class="flex shrink-0 flex-col gap-4"> {#each archive.comics as comic} <Card compact {...comicCard(comic)}> - <AddOverlay slot="overlay" id={comic.id} /> + {#snippet overlay()} + <AddOverlay id={comic.id} /> + {/snippet} <ComicPills {comic} /> </Card> {/each} diff --git a/frontend/src/lib/tabs/ComicDelete.svelte b/frontend/src/lib/tabs/ComicDelete.svelte index a10f6b2..3ae924c 100644 --- a/frontend/src/lib/tabs/ComicDelete.svelte +++ b/frontend/src/lib/tabs/ComicDelete.svelte @@ -9,9 +9,9 @@ const client = getContextClient(); - export let comic: FullComicFragment; + let { comic }: { comic: FullComicFragment } = $props(); - function deleteComic() { + function onclick() { confirmDeletion('Comic', comic.title, () => { deleteComics(client, { ids: comic.id }) .then(() => goto('/comics/')) @@ -29,6 +29,6 @@ <p class="mt-2 font-medium">This action is irrevocable.</p> </div> <div class="flex"> - <DeleteButton prominent on:click={deleteComic} /> + <DeleteButton prominent {onclick} /> </div> </div> diff --git a/frontend/src/lib/tabs/ComicDetails.svelte b/frontend/src/lib/tabs/ComicDetails.svelte index 0a131af..121f068 100644 --- a/frontend/src/lib/tabs/ComicDetails.svelte +++ b/frontend/src/lib/tabs/ComicDetails.svelte @@ -28,12 +28,24 @@ <div class="flex flex-col gap-4 text-sm"> <Header {title}> {#if comic.url} - <a href={comic.url} target="_blank" rel="noreferrer" class="btn-slate" title="Open URL"> - <span class="icon-base icon-[material-symbols--link]" /> + <a + href={comic.url} + target="_blank" + rel="noreferrer" + class="btn-slate" + title="Open URL" + aria-label="Open URL" + > + <span class="icon-base icon-[material-symbols--link]"></span> </a> {/if} - <a href={`/archives/${comic.archive.id}`} class="btn-slate" title="Go to Archive"> - <span class="icon-base icon-[material-symbols--folder-zip]" /> + <a + href={`/archives/${comic.archive.id}`} + class="btn-slate" + title="Go to Archive" + aria-label="Go to Archive" + > + <span class="icon-base icon-[material-symbols--folder-zip]"></span> </a> </Header> diff --git a/frontend/src/lib/tabs/DetailsHeader.svelte b/frontend/src/lib/tabs/DetailsHeader.svelte index f980f75..ee5fa23 100644 --- a/frontend/src/lib/tabs/DetailsHeader.svelte +++ b/frontend/src/lib/tabs/DetailsHeader.svelte @@ -1,5 +1,7 @@ <script lang="ts"> - export let title: string; + import type { Snippet } from 'svelte'; + + let { title, children }: { title: string; children?: Snippet } = $props(); </script> <div class="flex items-center gap-2"> @@ -7,5 +9,5 @@ {title} </h2> <div class="grow"></div> - <slot /> + {@render children?.()} </div> diff --git a/frontend/src/lib/tabs/DetailsSection.svelte b/frontend/src/lib/tabs/DetailsSection.svelte index 9a6ad51..5514aa3 100644 --- a/frontend/src/lib/tabs/DetailsSection.svelte +++ b/frontend/src/lib/tabs/DetailsSection.svelte @@ -1,10 +1,12 @@ <script lang="ts"> - export let title: string; + import type { Snippet } from 'svelte'; + + let { title, children }: { title: string; children?: Snippet } = $props(); </script> <section class="flex flex-col gap-1"> <h2 class="text-base font-medium">{title}</h2> <div class="flex flex-wrap gap-1 text-gray-300"> - <slot /> + {@render children?.()} </div> </section> diff --git a/frontend/src/lib/tabs/Tab.svelte b/frontend/src/lib/tabs/Tab.svelte index cddd072..f8dc67c 100644 --- a/frontend/src/lib/tabs/Tab.svelte +++ b/frontend/src/lib/tabs/Tab.svelte @@ -1,14 +1,28 @@ <script lang="ts"> - import { getTabContext } from '$lib/Tabs'; import { fadeDefault } from '$lib/Transitions'; + import type { Snippet } from 'svelte'; import { fade } from 'svelte/transition'; + import { getTabContext } from './Tabs.svelte'; + + interface Props { + id: string; + title: string; + initial?: boolean; + children: Snippet; + } + + let { id, title, initial = false, children }: Props = $props(); const context = getTabContext(); - export let id: string; + + context.tabs = { ...context.tabs, [id]: { title } }; + if (initial) { + context.current = id; + } </script> -{#if $context.current === id} +{#if context.current === id} <div class="h-full overflow-auto py-2 pe-3 ps-1" in:fade={fadeDefault}> - <slot /> + {@render children?.()} </div> {/if} diff --git a/frontend/src/lib/tabs/Tabs.svelte b/frontend/src/lib/tabs/Tabs.svelte index fd5d08e..1ae7c32 100644 --- a/frontend/src/lib/tabs/Tabs.svelte +++ b/frontend/src/lib/tabs/Tabs.svelte @@ -1,28 +1,50 @@ +<script lang="ts" module> + import { getContext, setContext } from 'svelte'; + + type Tab = string; + type Tabs = Record<Tab, { title: string }>; + + class TabContext { + tabs: Tabs = $state({}); + current: Tab = $state(''); + } + + export function getTabContext() { + return getContext<TabContext>('tabs'); + } + + function initTabContext() { + return setContext('tabs', new TabContext()); + } +</script> + <script lang="ts"> - import { getTabContext } from '$lib/Tabs'; import { fadeFast } from '$lib/Transitions'; + import type { Snippet } from 'svelte'; import { fade } from 'svelte/transition'; - const context = getTabContext(); + let { badges = {}, children }: { badges?: Record<Tab, boolean>; children?: Snippet } = $props(); + + const context = initTabContext(); </script> <div class="flex h-full max-h-full flex-col"> <nav> <ul class="me-3 ms-1 flex border-b-2 border-slate-700 text-sm"> - {#each Object.entries($context.tabs) as [id, { title, badge }]} + {#each Object.entries(context.tabs) as [id, { title }]} <li class="-mb-0.5"> <button type="button" - class:active={$context.current === id} + class:active={context.current === id} class="focus-background relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200" - on:click={() => ($context.current = id)} + onclick={() => (context.current = id)} > - {#if badge} + {#if badges[id]} <div class="absolute right-0 top-1 h-2 w-2 rounded-full bg-emerald-400" title="There are pending changes" transition:fade={fadeFast} - /> + ></div> {/if} <span>{title}</span> </button> @@ -30,7 +52,7 @@ {/each} </ul> </nav> - <slot /> + {@render children?.()} </div> <style lang="postcss"> diff --git a/frontend/src/lib/toolbar/DeleteSelection.svelte b/frontend/src/lib/toolbar/DeleteSelection.svelte index 7459a87..7b37313 100644 --- a/frontend/src/lib/toolbar/DeleteSelection.svelte +++ b/frontend/src/lib/toolbar/DeleteSelection.svelte @@ -1,26 +1,28 @@ <script lang="ts"> import type { DeleteMutation } from '$gql/Mutations'; - import { getSelectionContext } from '$lib/Selection'; + import DeleteButton from '$lib/components/DeleteButton.svelte'; + import { getSelectionContext } from '$lib/selection/Selection.svelte'; import { toastFinally } from '$lib/Toasts'; import { confirmDeletion } from '$lib/Utils'; - import DeleteButton from '$lib/components/DeleteButton.svelte'; import { getContextClient } from '@urql/svelte'; const client = getContextClient(); - const selection = getSelectionContext(); - export let mutation: DeleteMutation; - export let warning: string | undefined = undefined; + interface Props { + mutation: DeleteMutation; + warning?: string; + } + + let { mutation, warning = undefined }: Props = $props(); + let selection = getSelectionContext(); - function remove() { + function onclick() { const mutate = () => { - mutation(client, { ids: $selection.ids }) - .then(() => ($selection = $selection.clear())) - .catch(toastFinally); + mutation(client, { ids: selection.ids }).then(selection.clear).catch(toastFinally); }; - confirmDeletion($selection.typename, $selection.names, mutate, warning); + confirmDeletion(selection.typename, selection.names, mutate, warning); } </script> -<DeleteButton on:click={remove} /> +<DeleteButton {onclick} /> diff --git a/frontend/src/lib/toolbar/EditSelection.svelte b/frontend/src/lib/toolbar/EditSelection.svelte index 50e6656..1803ed4 100644 --- a/frontend/src/lib/toolbar/EditSelection.svelte +++ b/frontend/src/lib/toolbar/EditSelection.svelte @@ -1,20 +1,19 @@ <script lang="ts"> - import { getSelectionContext } from '$lib/Selection'; + import { getSelectionContext } from '$lib/selection/Selection.svelte'; import { accelerator } from '$lib/Shortcuts'; - import type { SvelteComponent } from 'svelte'; - import { openModal } from 'svelte-modals'; + import { toastFinally } from '$lib/Toasts'; + import { modals, type ModalComponent, type ModalProps } from 'svelte-modals'; const selection = getSelectionContext(); - export let dialog: typeof SvelteComponent<{ - isOpen: boolean; + interface DialogProps extends ModalProps { ids: number[]; - }>; + } + + let { dialog }: { dialog: ModalComponent<DialogProps> } = $props(); function edit() { - openModal(dialog, { - ids: $selection.ids - }); + modals.open(dialog, { ids: selection.ids }).catch(toastFinally); } </script> @@ -22,8 +21,9 @@ type="button" class="btn-slate hover:bg-blue-700" title="Edit selection" - on:click={edit} + aria-label="Edit selection" + onclick={edit} use:accelerator={'e'} > - <span class="icon-base icon-[material-symbols--edit]" /> + <span class="icon-base icon-[material-symbols--edit]"></span> </button> diff --git a/frontend/src/lib/toolbar/FilterBookmarked.svelte b/frontend/src/lib/toolbar/FilterBookmarked.svelte index bcbe295..76403ec 100644 --- a/frontend/src/lib/toolbar/FilterBookmarked.svelte +++ b/frontend/src/lib/toolbar/FilterBookmarked.svelte @@ -1,15 +1,16 @@ <script lang="ts"> - import { page } from '$app/stores'; - import { ComicFilterContext, cycleBooleanFilter, getFilterContext } from '$lib/Filter'; + import { page } from '$app/state'; + import { cycleBooleanFilter, type ComicFilterContext } from '$lib/Filter.svelte'; + import { accelerator } from '$lib/Shortcuts'; import Bookmark from '$lib/icons/Bookmark.svelte'; - const filter = getFilterContext<ComicFilterContext>(); - $: bookmarked = $filter.include.controls.bookmarked.value; + let { filter }: { filter: ComicFilterContext } = $props(); + let bookmarked = $derived(filter.include.bookmarked.value); const toggle = () => { - $filter.include.controls.bookmarked.value = cycleBooleanFilter(bookmarked, false); - $filter.apply($page.url.searchParams); + filter.include.bookmarked.value = cycleBooleanFilter(bookmarked, false); + filter.apply(page.url.searchParams); }; </script> @@ -17,7 +18,7 @@ class:toggled={bookmarked} class="btn-slate" title="Filter bookmarked" - on:click={toggle} + onclick={toggle} use:accelerator={'b'} > <Bookmark {bookmarked} /> diff --git a/frontend/src/lib/toolbar/FilterFavourites.svelte b/frontend/src/lib/toolbar/FilterFavourites.svelte index 6591cef..5e9beb7 100644 --- a/frontend/src/lib/toolbar/FilterFavourites.svelte +++ b/frontend/src/lib/toolbar/FilterFavourites.svelte @@ -1,15 +1,15 @@ <script lang="ts"> - import { page } from '$app/stores'; - import { ComicFilterContext, cycleBooleanFilter, getFilterContext } from '$lib/Filter'; + import { page } from '$app/state'; + import { ComicFilterContext, cycleBooleanFilter } from '$lib/Filter.svelte'; import { accelerator } from '$lib/Shortcuts'; import Star from '$lib/icons/Star.svelte'; - const filter = getFilterContext<ComicFilterContext>(); - $: favourite = $filter.include.controls.favourite.value; + let { filter }: { filter: ComicFilterContext } = $props(); + let favourite = $derived(filter.include.favourite.value); const toggle = () => { - $filter.include.controls.favourite.value = cycleBooleanFilter(favourite, false); - $filter.apply($page.url.searchParams); + filter.include.favourite.value = cycleBooleanFilter(favourite, false); + filter.apply(page.url.searchParams); }; </script> @@ -17,7 +17,7 @@ class:toggled={favourite} class="btn-slate" title="Filter favourites" - on:click={toggle} + onclick={toggle} use:accelerator={'f'} > <Star {favourite} /> diff --git a/frontend/src/lib/toolbar/FilterOrganized.svelte b/frontend/src/lib/toolbar/FilterOrganized.svelte index 754e663..0f95e5f 100644 --- a/frontend/src/lib/toolbar/FilterOrganized.svelte +++ b/frontend/src/lib/toolbar/FilterOrganized.svelte @@ -1,20 +1,20 @@ <script lang="ts"> - import { page } from '$app/stores'; + import { page } from '$app/state'; import { ArchiveFilterContext, - ComicFilterContext, cycleBooleanFilter, - getFilterContext - } from '$lib/Filter'; + type ComicFilterContext + } from '$lib/Filter.svelte'; + import { accelerator } from '$lib/Shortcuts'; import Organized from '$lib/icons/Organized.svelte'; - const filter = getFilterContext<ArchiveFilterContext | ComicFilterContext>(); - $: organized = $filter.include.controls.organized.value; + let { filter }: { filter: ComicFilterContext | ArchiveFilterContext } = $props(); + let organized = $derived(filter.include.organized.value); const toggle = () => { - $filter.include.controls.organized.value = cycleBooleanFilter(organized); - $filter.apply($page.url.searchParams); + filter.include.organized.value = cycleBooleanFilter(organized); + filter.apply(page.url.searchParams); }; </script> @@ -23,7 +23,7 @@ class:toggled={organized !== undefined} class="btn-slate" title="Filter organized" - on:click={toggle} + onclick={toggle} use:accelerator={'o'} > <Organized tristate {organized} /> diff --git a/frontend/src/lib/toolbar/MarkBookmark.svelte b/frontend/src/lib/toolbar/MarkBookmark.svelte index 792b84f..776ddd8 100644 --- a/frontend/src/lib/toolbar/MarkBookmark.svelte +++ b/frontend/src/lib/toolbar/MarkBookmark.svelte @@ -1,27 +1,25 @@ <script lang="ts"> - import { getSelectionContext } from '$lib/Selection'; - import { toastFinally } from '$lib/Toasts'; + import type { MutationWith } from '$gql/Utils'; import Bookmark from '$lib/icons/Bookmark.svelte'; - import { Client, getContextClient } from '@urql/svelte'; + import { getSelectionContext } from '$lib/selection/Selection.svelte'; + import { toastFinally } from '$lib/Toasts'; + import { getContextClient } from '@urql/svelte'; const client = getContextClient(); const selection = getSelectionContext(); - export let mutation: ( - client: Client, - args: { ids: number[]; input: { bookmarked: boolean } } - ) => Promise<unknown>; + let { mutation }: { mutation: MutationWith<{ bookmarked: boolean }> } = $props(); function mutate(bookmarked: boolean) { - mutation(client, { ids: $selection.ids, input: { bookmarked } }).catch(toastFinally); + mutation(client, { ids: selection.ids, input: { bookmarked } }).catch(toastFinally); } </script> -<button type="button" class="btn-slate flex justify-start gap-1" on:click={() => mutate(true)}> +<button type="button" class="btn-slate flex justify-start gap-1" onclick={() => mutate(true)}> <Bookmark bookmarked={true} /> <span>Bookmark</span> </button> -<button type="button" class="btn-slate flex justify-start gap-1" on:click={() => mutate(false)}> +<button type="button" class="btn-slate flex justify-start gap-1" onclick={() => mutate(false)}> <Bookmark bookmarked={false} /> <span>Unbookmark</span> </button> diff --git a/frontend/src/lib/toolbar/MarkFavourite.svelte b/frontend/src/lib/toolbar/MarkFavourite.svelte index 42eaa39..1af5d60 100644 --- a/frontend/src/lib/toolbar/MarkFavourite.svelte +++ b/frontend/src/lib/toolbar/MarkFavourite.svelte @@ -1,27 +1,25 @@ <script lang="ts"> - import { getSelectionContext } from '$lib/Selection'; - import { toastFinally } from '$lib/Toasts'; + import type { MutationWith } from '$gql/Utils'; import Star from '$lib/icons/Star.svelte'; - import { Client, getContextClient } from '@urql/svelte'; + import { getSelectionContext } from '$lib/selection/Selection.svelte'; + import { toastFinally } from '$lib/Toasts'; + import { getContextClient } from '@urql/svelte'; const client = getContextClient(); const selection = getSelectionContext(); - export let mutation: ( - client: Client, - args: { ids: number[]; input: { favourite: boolean } } - ) => Promise<unknown>; + let { mutation }: { mutation: MutationWith<{ favourite: boolean }> } = $props(); function mutate(favourite: boolean) { - mutation(client, { ids: $selection.ids, input: { favourite } }).catch(toastFinally); + mutation(client, { ids: selection.ids, input: { favourite } }).catch(toastFinally); } </script> -<button type="button" class="btn-slate justify-start gap-1" on:click={() => mutate(true)}> +<button type="button" class="btn-slate justify-start gap-1" onclick={() => mutate(true)}> <Star favourite={true} /> <span>Favourite</span> </button> -<button type="button" class="btn-slate justify-start gap-1" on:click={() => mutate(false)}> +<button type="button" class="btn-slate justify-start gap-1" onclick={() => mutate(false)}> <Star favourite={false} /> <span>Unfavourite</span> </button> diff --git a/frontend/src/lib/toolbar/MarkOrganized.svelte b/frontend/src/lib/toolbar/MarkOrganized.svelte index 4dc3a83..63c8622 100644 --- a/frontend/src/lib/toolbar/MarkOrganized.svelte +++ b/frontend/src/lib/toolbar/MarkOrganized.svelte @@ -1,27 +1,25 @@ <script lang="ts"> - import { getSelectionContext } from '$lib/Selection'; - import { toastFinally } from '$lib/Toasts'; + import type { MutationWith } from '$gql/Utils'; import Organized from '$lib/icons/Organized.svelte'; - import { Client, getContextClient } from '@urql/svelte'; + import { getSelectionContext } from '$lib/selection/Selection.svelte'; + import { toastFinally } from '$lib/Toasts'; + import { getContextClient } from '@urql/svelte'; const client = getContextClient(); const selection = getSelectionContext(); - export let mutation: ( - client: Client, - args: { ids: number[]; input: { organized: boolean } } - ) => Promise<unknown>; + let { mutation }: { mutation: MutationWith<{ organized: boolean }> } = $props(); function mutate(organized: boolean) { - mutation(client, { ids: $selection.ids, input: { organized } }).catch(toastFinally); + mutation(client, { ids: selection.ids, input: { organized } }).catch(toastFinally); } </script> -<button type="button" class="btn-slate flex justify-start gap-1" on:click={() => mutate(true)}> +<button type="button" class="btn-slate flex justify-start gap-1" onclick={() => mutate(true)}> <Organized tristate organized={true} /> <span>Organized</span> </button> -<button type="button" class="btn-slate flex justify-start gap-1" on:click={() => mutate(false)}> +<button type="button" class="btn-slate flex justify-start gap-1" onclick={() => mutate(false)}> <Organized dim tristate organized={false} /> <span>Unorganized</span> </button> diff --git a/frontend/src/lib/toolbar/MarkSelection.svelte b/frontend/src/lib/toolbar/MarkSelection.svelte index 27eb2c7..1af36ca 100644 --- a/frontend/src/lib/toolbar/MarkSelection.svelte +++ b/frontend/src/lib/toolbar/MarkSelection.svelte @@ -1,24 +1,23 @@ <script lang="ts"> import Dropdown from '$lib/components/Dropdown.svelte'; + import type { Snippet } from 'svelte'; - let visible = false; - let button: HTMLElement; + let { children }: { children: Snippet } = $props(); </script> -<div class="relative"> - <button - type="button" - class="btn-slate rounded-inherit relative hover:bg-blue-700 [&:not(:only-child)]:bg-blue-700" - title="Set flag..." - bind:this={button} - on:click={() => (visible = !visible)} - > - <span class="icon-base icon-[material-symbols--flag] pointer-events-none" /> - </button> - - <Dropdown parent={button} bind:visible> - <div class="grid grid-cols-[min-content_min-content] gap-1"> - <slot /> - </div> - </Dropdown> -</div> +<Dropdown> + {#snippet button(onclick)} + <button + type="button" + class="btn-slate rounded-inherit relative hover:bg-blue-700 [&:not(:only-child)]:bg-blue-700" + title="Set flag..." + aria-label="Set flag..." + {onclick} + > + <span class="icon-base icon-[material-symbols--flag] pointer-events-none"></span> + </button> + {/snippet} + <div class="grid grid-cols-[min-content_min-content] gap-1"> + {@render children?.()} + </div> +</Dropdown> diff --git a/frontend/src/lib/toolbar/Search.svelte b/frontend/src/lib/toolbar/Search.svelte index f033258..4806971 100644 --- a/frontend/src/lib/toolbar/Search.svelte +++ b/frontend/src/lib/toolbar/Search.svelte @@ -1,13 +1,15 @@ <script lang="ts"> - import { page } from '$app/stores'; + import { page } from '$app/state'; import { debounce } from '$lib/Actions'; - import { BasicFilterContext, getFilterContext } from '$lib/Filter'; import { accelerator } from '$lib/Shortcuts'; - const filter = getFilterContext<BasicFilterContext>(); + interface Props { + name: string; + field: string; + filter: { apply: (params: URLSearchParams) => void }; + } - export let name: string; - export let field: string; + let { name, field = $bindable(), filter }: Props = $props(); </script> <input @@ -16,6 +18,6 @@ class="btn-slate w-min" placeholder="Search {name}..." bind:value={field} - use:debounce={{ callback: () => $filter.apply($page.url.searchParams) }} + use:debounce={{ callback: () => filter.apply(page.url.searchParams) }} use:accelerator={'F'} /> diff --git a/frontend/src/lib/toolbar/SelectItems.svelte b/frontend/src/lib/toolbar/SelectItems.svelte index 7ff339e..68a0652 100644 --- a/frontend/src/lib/toolbar/SelectItems.svelte +++ b/frontend/src/lib/toolbar/SelectItems.svelte @@ -1,18 +1,19 @@ <script lang="ts"> - import { page } from '$app/stores'; - import { getPaginationContext } from '$lib/Pagination'; + import { page } from '$app/state'; + import { navigate, type PaginationData } from '$lib/Navigation'; - const pagination = getPaginationContext(); + let { pagination }: { pagination: PaginationData } = $props(); - $: values = new Set([24, 48, 72, 90, 120, 150, 180, $pagination.items].sort((a, b) => a - b)); + let values = $derived( + new Set([24, 48, 72, 90, 120, 150, 180, pagination.items].sort((a, b) => a - b)) + ); + + function onchange(e: Event & { currentTarget: EventTarget & HTMLSelectElement }) { + navigate({ pagination: { items: +e.currentTarget.value } }, page.url.searchParams); + } </script> -<select - class="btn-slate" - bind:value={$pagination.items} - on:change={() => $pagination.apply($page.url.searchParams)} - title="Limit displayed items to..." -> +<select class="btn-slate" value={pagination.items} {onchange} title="Limit displayed items to..."> {#each values as value} <option {value}>{value}</option> {/each} diff --git a/frontend/src/lib/toolbar/SelectSort.svelte b/frontend/src/lib/toolbar/SelectSort.svelte index fdcb057..0e59df6 100644 --- a/frontend/src/lib/toolbar/SelectSort.svelte +++ b/frontend/src/lib/toolbar/SelectSort.svelte @@ -1,60 +1,68 @@ <script lang="ts"> - import { page } from '$app/stores'; + import { page } from '$app/state'; import { SortDirection } from '$gql/graphql'; - - import { getSortContext } from '$lib/Sort'; + import { navigate, type SortData } from '$lib/Navigation'; import { slideXFast } from '$lib/Transitions'; import { getRandomInt } from '$lib/Utils'; import { slide } from 'svelte/transition'; - const sort = getSortContext(); + let { sort, labels }: { sort: SortData<string>; labels: Record<string, string> } = $props(); + + function apply(sort: SortData<string>) { + navigate({ sort }, page.url.searchParams); + } function toggle() { - if ($sort.direction === SortDirection.Ascending) { - $sort.direction = SortDirection.Descending; + if (sort.direction === SortDirection.Ascending) { + apply({ ...sort, direction: SortDirection.Descending }); } else { - $sort.direction = SortDirection.Ascending; + apply({ ...sort, direction: SortDirection.Ascending }); } + } - apply(); + function newSeed() { + return getRandomInt(0, 1000000000); } - function apply() { - if ($sort.on === 'RANDOM' && $sort.seed === undefined) { - $sort.seed = getRandomInt(0, 1000000000); - } - $sort.apply($page.url.searchParams); + function shuffle() { + apply({ ...sort, seed: newSeed() }); } - function reshuffle() { - $sort.seed = undefined; - apply(); + function onchange(e: Event & { currentTarget: EventTarget & HTMLSelectElement }) { + let seed: number | undefined = undefined; + + if (e.currentTarget.value === 'RANDOM') { + seed = newSeed(); + } + + apply({ ...sort, on: e.currentTarget.value, seed }); } </script> <div class="rounded-group flex flex-row"> - <select class="btn-slate" bind:value={$sort.on} on:change={apply} title="Sort on..."> - {#each Object.entries($sort.labels) as [value, label]} + <select class="btn-slate" value={sort.on} {onchange} title="Sort on..."> + {#each Object.entries(labels) as [value, label]} <option {value}>{label}</option> {/each} </select> - <button type="button" class="btn-slate" title="Toggle sort direction" on:click={toggle}> - {#if $sort.direction === SortDirection.Ascending} - <span class="icon-base icon-[material-symbols--sort] -scale-y-100" /> + <button type="button" class="btn-slate" title="Toggle sort direction" onclick={toggle}> + {#if sort.direction === SortDirection.Ascending} + <span class="icon-base icon-[material-symbols--sort] -scale-y-100"></span> {:else} - <span class="icon-base icon-[material-symbols--sort]" /> + <span class="icon-base icon-[material-symbols--sort]"></span> {/if} </button> - {#if $sort.on === 'RANDOM'} + {#if sort.on === 'RANDOM'} <button type="button" class="btn-slate" title="Reshuffle" - on:click={reshuffle} + aria-label="Reshuffle" + onclick={shuffle} transition:slide={slideXFast} > <div class="flex"> - <span class="icon-base icon-[material-symbols--shuffle]" /> + <span class="icon-base icon-[material-symbols--shuffle]"></span> </div> </button> {/if} diff --git a/frontend/src/lib/toolbar/SelectionControls.svelte b/frontend/src/lib/toolbar/SelectionControls.svelte index 4d309df..f0026c8 100644 --- a/frontend/src/lib/toolbar/SelectionControls.svelte +++ b/frontend/src/lib/toolbar/SelectionControls.svelte @@ -1,57 +1,64 @@ <script lang="ts"> - import { getSelectionContext } from '$lib/Selection'; + import Badge from '$lib/components/Badge.svelte'; + import { getSelectionContext } from '$lib/selection/Selection.svelte'; import { accelerator } from '$lib/Shortcuts'; import { fadeDefault, slideXFast } from '$lib/Transitions'; - import Badge from '$lib/components/Badge.svelte'; - import { onDestroy } from 'svelte'; + import { onDestroy, type Snippet } from 'svelte'; import { fade, slide } from 'svelte/transition'; - const selection = getSelectionContext(); - - export let page = false; - - const toggle = () => ($selection = $selection.toggle()); - const all = () => ($selection = $selection.all()); - const none = () => ($selection = $selection.none()); + let { page = false, children }: { page?: boolean; children?: Snippet } = $props(); + let selection = getSelectionContext(); - onDestroy(() => ($selection = $selection.clear())); + onDestroy(selection.clear); </script> <div class="rounded-group flex"> <button type="button" class="btn-slate relative" - class:toggled={$selection.active} - title={`${$selection.active ? 'Exit' : 'Enter'} ${page ? 'page ' : ' '}selection mode`} - on:click={toggle} + class:toggled={selection.active} + title={`${selection.active ? 'Exit' : 'Enter'} ${page ? 'page ' : ' '}selection mode`} + onclick={selection.toggle} use:accelerator={'s'} > - {#if $selection.active} + {#if selection.active} {#if page} - <span class="icon-base icon-[material-symbols--edit-document]" /> + <span class="icon-base icon-[material-symbols--edit-document]"></span> {:else} - <span class="icon-base icon-[material-symbols--remove-selection]" /> + <span class="icon-base icon-[material-symbols--remove-selection]"></span> {/if} {:else if page} - <span class="icon-base icon-[material-symbols--edit-document-outline]" /> + <span class="icon-base icon-[material-symbols--edit-document-outline]"></span> {:else} - <span class="icon-base icon-[material-symbols--select]" /> + <span class="icon-base icon-[material-symbols--select]"></span> {/if} - <Badge number={$selection.size} /> + <Badge number={selection.size} /> </button> - {#if $selection.active} + {#if selection.active} <div class="rounded-group-end flex" transition:slide={slideXFast}> - <button type="button" class="btn-slate" title="Select all" on:click={all}> - <span class="icon-base icon-[material-symbols--select-all]" /> + <button + type="button" + class="btn-slate" + title="Select all" + aria-label="Select all" + onclick={selection.all} + > + <span class="icon-base icon-[material-symbols--select-all]"></span> </button> - <button type="button" class="btn-slate" title="Select none" on:click={none}> - <span class="icon-base icon-[material-symbols--deselect]" /> + <button + type="button" + class="btn-slate" + title="Select none" + aria-label="Select all" + onclick={selection.none} + > + <span class="icon-base icon-[material-symbols--deselect]"></span> </button> </div> {/if} </div> -{#if $selection.size > 0} +{#if selection.size > 0} <div class="rounded-group flex" transition:fade={fadeDefault}> - <slot /> + {@render children?.()} </div> {/if} diff --git a/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte b/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte index 2e7869f..ee07902 100644 --- a/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte +++ b/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte @@ -1,39 +1,42 @@ <script lang="ts"> - import { page } from '$app/stores'; - import { getFilterContext } from '$lib/Filter'; + import { page } from '$app/state'; import { navigate } from '$lib/Navigation'; import { slideXFast } from '$lib/Transitions'; import Badge from '$lib/components/Badge.svelte'; import { slide } from 'svelte/transition'; - import { getToolbarContext } from './Toolbar.svelte'; + import type { ToolbarState } from './Toolbar.svelte'; - const toolbar = getToolbarContext(); - const filter = getFilterContext(); + interface Props extends ToolbarState { + filterSize: number; + } + + let { expanded, toggle, filterSize }: Props = $props(); </script> <div class="rounded-group flex"> <button - class:toggled={$toolbar.expand} + class:toggled={expanded} class="btn-slate relative" - title={`${$toolbar.expand ? 'Hide' : 'Show'} filters`} - on:click={() => ($toolbar.expand = !$toolbar.expand)} + title={`${expanded ? 'Hide' : 'Show'} filters`} + onclick={toggle} > - {#if $toolbar.expand} - <span class="icon-base icon-[material-symbols--filter-alt]" /> + {#if expanded} + <span class="icon-base icon-[material-symbols--filter-alt]"></span> {:else} - <span class="icon-base icon-[material-symbols--filter-alt-outline]" /> + <span class="icon-base icon-[material-symbols--filter-alt-outline]"></span> {/if} - <Badge number={$filter.include.size + $filter.exclude.size} /> + <Badge number={filterSize} /> </button> - {#if $filter.include.size + $filter.exclude.size > 0} + {#if filterSize > 0} <button class="btn-slate relative hover:bg-rose-700" - on:click={() => navigate({ filter: {} }, $page.url.searchParams)} + onclick={() => navigate({ filter: {} }, page.url.searchParams)} transition:slide={slideXFast} title="Reset filters" + aria-label="Reset filters" > <div class="flex"> - <span class="icon-base icon-[material-symbols--filter-alt-off]" /> + <span class="icon-base icon-[material-symbols--filter-alt-off]"></span> </div> </button> {/if} diff --git a/frontend/src/lib/toolbar/Toolbar.svelte b/frontend/src/lib/toolbar/Toolbar.svelte index e87d731..03cd892 100644 --- a/frontend/src/lib/toolbar/Toolbar.svelte +++ b/frontend/src/lib/toolbar/Toolbar.svelte @@ -1,23 +1,25 @@ -<script lang="ts" context="module"> - import { writable, type Writable } from 'svelte/store'; +<script lang="ts"> + import { type Snippet } from 'svelte'; - interface ToolbarContext { - expand: boolean; + export interface ToolbarState { + expanded: boolean; + toggle: () => void; } - function initToolbarContext() { - return setContext<Writable<ToolbarContext>>('toolbar', writable({ expand: false })); + interface Props { + start?: Snippet<[ToolbarState]>; + center?: Snippet<[ToolbarState]>; + end?: Snippet<[ToolbarState]>; + expansion?: Snippet; } - export function getToolbarContext() { - return getContext<Writable<ToolbarContext>>('toolbar'); - } -</script> + let { start, center, end, expansion }: Props = $props(); -<script lang="ts"> - import { getContext, setContext } from 'svelte'; + let expanded = $state(false); - const toolbar = initToolbarContext(); + function toggle() { + expanded = !expanded; + } </script> <div class="flex flex-col"> @@ -25,18 +27,18 @@ class="flex flex-row flex-wrap gap-4 text-sm xl:grid xl:grid-flow-col xl:grid-cols-[1fr_2fr_1fr]" > <div class="flex flex-row justify-start gap-2"> - <slot name="start" /> + {@render start?.({ expanded, toggle })} </div> <div class="flex flex-row flex-wrap justify-start gap-2 xl:flex-nowrap xl:justify-center"> - <slot name="center" /> + {@render center?.({ expanded, toggle })} </div> <div class="flex flex-row justify-end gap-2"> - <slot name="end" /> + {@render end?.({ expanded, toggle })} </div> </div> - {#if $toolbar.expand} + {#if expanded} <div class="mt-4"> - <slot /> + {@render expansion?.()} </div> {/if} </div> diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 6af3b88..29a1c16 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -1,5 +1,6 @@ <script lang="ts"> import { addShortcut, handleShortcuts } from '$lib/Shortcuts'; + import { toastFinally } from '$lib/Toasts'; import { fadeDefault } from '$lib/Transitions'; import AddArtist from '$lib/dialogs/AddArtist.svelte'; import AddCharacter from '$lib/dialogs/AddCharacter.svelte'; @@ -11,7 +12,7 @@ import Navigation from '$lib/navigation/Navigation.svelte'; import { cacheExchange, fetchExchange, initContextClient } from '@urql/svelte'; import { SvelteToast } from '@zerodevx/svelte-toast'; - import { Modals, closeModal, openModal } from 'svelte-modals'; + import { Modals, modals, type ModalComponent } from 'svelte-modals'; import { fade } from 'svelte/transition'; import '../app.css'; @@ -20,12 +21,16 @@ exchanges: [cacheExchange, fetchExchange] }); - addShortcut('na', () => openModal(AddArtist)); - addShortcut('nh', () => openModal(AddCharacter)); - addShortcut('ni', () => openModal(AddCircle)); - addShortcut('nn', () => openModal(AddNamespace)); - addShortcut('nt', () => openModal(AddTag)); - addShortcut('nw', () => openModal(AddWorld)); + function open(modal: ModalComponent) { + modals.open(modal).catch(toastFinally); + } + + addShortcut('na', () => open(AddArtist)); + addShortcut('nh', () => open(AddCharacter)); + addShortcut('ni', () => open(AddCircle)); + addShortcut('nn', () => open(AddNamespace)); + addShortcut('nt', () => open(AddTag)); + addShortcut('nw', () => open(AddWorld)); function keydown(event: KeyboardEvent) { handleShortcuts(event); @@ -36,38 +41,38 @@ <Navigation> <Link matchExact href="/" title="Home" accel="go"> - <span class="icon-base icon-[material-symbols--home]" /> + <span class="icon-base icon-[material-symbols--home]"></span> </Link> <Link href="/comics/" title="Comics" accel="gc"> - <span class="icon-base icon-[material-symbols--menu-book]" /> + <span class="icon-base icon-[material-symbols--menu-book]"></span> </Link> <Link href="/namespaces/" title="Namespaces" accel="gn"> - <span class="icon-base icon-[material-symbols--inbox]" /> + <span class="icon-base icon-[material-symbols--inbox]"></span> </Link> <Link href="/tags/" title="Tags" accel="gt"> - <span class="icon-base icon-[material-symbols--label]" /> + <span class="icon-base icon-[material-symbols--label]"></span> </Link> <Link href="/artists/" title="Artists" accel="ga"> - <span class="icon-base icon-[material-symbols--person]" /> + <span class="icon-base icon-[material-symbols--person]"></span> </Link> <Link href="/circles/" title="Circles" accel="gi"> - <span class="icon-base icon-[material-symbols--group]" /> + <span class="icon-base icon-[material-symbols--group]"></span> </Link> <Link href="/characters/" title="Characters" accel="gh"> - <span class="icon-base icon-[material-symbols--face]" /> + <span class="icon-base icon-[material-symbols--face]"></span> </Link> <Link href="/worlds/" title="Worlds" accel="gw"> - <span class="icon-base icon-[material-symbols--public]" /> + <span class="icon-base icon-[material-symbols--public]"></span> </Link> <Link href="/archives/" title="Archives" accel="gz"> - <span class="icon-base icon-[material-symbols--folder-zip]" /> + <span class="icon-base icon-[material-symbols--folder-zip]"></span> </Link> - <div class="mb-auto" /> + <div class="mb-auto"></div> <Link href="/statistics/" title="Statistics" accel="gs"> - <span class="icon-base icon-[material-symbols--bar-chart]" /> + <span class="icon-base icon-[material-symbols--bar-chart]"></span> </Link> <Link href="/help/" title="Help" accel="?" target="_blank"> - <span class="icon-base icon-[material-symbols--help]" /> + <span class="icon-base icon-[material-symbols--help]"></span> </Link> </Navigation> @@ -76,14 +81,15 @@ </div> <Modals> - <!-- svelte-ignore a11y-no-static-element-interactions --> - <!-- svelte-ignore a11y-click-events-have-key-events --> - <div - slot="backdrop" - on:click={closeModal} - transition:fade={fadeDefault} - class="fixed bottom-0 left-0 right-0 top-0 z-20 bg-stone-800/80" - /> + {#snippet backdrop({ close })} + <!-- svelte-ignore a11y-no-static-element-interactions --> + <!-- svelte-ignore a11y-click-events-have-key-events --> + <div + onclick={() => close()} + transition:fade={fadeDefault} + class="fixed bottom-0 left-0 right-0 top-0 z-20 bg-stone-800/80" + ></div> + {/snippet} </Modals> <SvelteToast options={{ reversed: true, intro: { y: 192 } }} /> diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index 97a7a60..32e4e07 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -19,10 +19,10 @@ }); const favouriteLink = href('comics', { filter: { include: { favourite: true } } }); - $: query = frontpageQuery(getContextClient()); - $: recent = $query.data?.recent; - $: favourites = $query.data?.favourites; - $: bookmarked = $query.data?.bookmarked; + let query = $derived(frontpageQuery(getContextClient())); + let recent = $derived($query.data?.recent); + let favourites = $derived($query.data?.favourites); + let bookmarked = $derived($query.data?.bookmarked); </script> <Head section="Home" /> diff --git a/frontend/src/routes/archives/+page.svelte b/frontend/src/routes/archives/+page.svelte index 545058a..3fc4ed4 100644 --- a/frontend/src/routes/archives/+page.svelte +++ b/frontend/src/routes/archives/+page.svelte @@ -3,10 +3,7 @@ import { archivesQuery } from '$gql/Queries'; import type { ArchiveFragment } from '$gql/graphql'; import { ArchiveSortLabel } from '$lib/Enums'; - import { ArchiveFilterContext, initFilterContext } from '$lib/Filter'; - import { initPaginationContext } from '$lib/Pagination'; - import { initSelectionContext } from '$lib/Selection'; - import { initSortContext } from '$lib/Sort'; + import { ArchiveFilterContext } from '$lib/Filter.svelte'; import Card from '$lib/components/Card.svelte'; import Empty from '$lib/components/Empty.svelte'; import Guard from '$lib/components/Guard.svelte'; @@ -17,6 +14,7 @@ import Pagination from '$lib/pagination/Pagination.svelte'; import Pill from '$lib/pills/Pill.svelte'; import Selectable from '$lib/selection/Selectable.svelte'; + import { initSelectionContext } from '$lib/selection/Selection.svelte'; import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte'; import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte'; import FilterOrganized from '$lib/toolbar/FilterOrganized.svelte'; @@ -29,90 +27,91 @@ import Toolbar from '$lib/toolbar/Toolbar.svelte'; import { getContextClient } from '@urql/svelte'; import { filesize } from 'filesize'; - import type { PageData } from './$types'; + import type { PageProps } from './$types'; - let client = getContextClient(); + let { data }: PageProps = $props(); + let pagination = $derived(data.pagination); + let sort = $derived(data.sort); - export let data: PageData; + const client = getContextClient(); + let result = $derived(archivesQuery(client, { ...data })); + let archives = $derived($result.data?.archives); - $: result = archivesQuery(client, { - pagination: data.pagination, - filter: data.filter, - sort: data.sort + let selection = initSelectionContext<ArchiveFragment>('Archive', (a) => a.name); + $effect(() => { + if (archives) { + selection.view = archives.edges; + } }); - $: archives = $result.data?.archives; - - const selection = initSelectionContext<ArchiveFragment>('Archive', (a) => a.name); - $: if (archives) { - $selection.view = archives.edges; - $pagination.total = archives.count; - } - - const pagination = initPaginationContext(); - $: $pagination.update = data.pagination; - - const filter = initFilterContext<ArchiveFilterContext>(); - $: $filter = new ArchiveFilterContext(data.filter); - - const sort = initSortContext(data.sort, ArchiveSortLabel); - $: $sort.update = data.sort; - - function refresh() { - result.reexecute({ requestPolicy: 'network-only' }); - } + let filter = $state(new ArchiveFilterContext(data.filter)); + $effect(() => { + filter = new ArchiveFilterContext(data.filter); + }); </script> <Head section="Archives" /> <Column> <Toolbar> - <SelectionControls slot="start"> - <MarkSelection> - <MarkOrganized mutation={updateArchives} /> - </MarkSelection> - <DeleteSelection - mutation={deleteArchives} - warning="Deleting an archive will also delete its archive file on disk as well as all comics that belong to it." - /> - </SelectionControls> - <svelte:fragment slot="center"> - <Search name="Archives" bind:field={$filter.include.controls.path.contains} /> - <FilterOrganized /> - <SelectSort /> - <SelectItems /> - </svelte:fragment> - <RefreshButton slot="end" on:click={refresh} /> + {#snippet start()} + <SelectionControls> + <MarkSelection> + <MarkOrganized mutation={updateArchives} /> + </MarkSelection> + <DeleteSelection + mutation={deleteArchives} + warning="Deleting an archive will also delete its archive file on disk as well as all comics that belong to it." + /> + </SelectionControls> + {/snippet} + {#snippet center()} + <Search name="Archives" {filter} bind:field={filter.include.path.contains} /> + <FilterOrganized {filter} /> + <SelectSort {sort} labels={ArchiveSortLabel} /> + <SelectItems {pagination} /> + {/snippet} + {#snippet end()} + <RefreshButton onclick={() => result.reexecute({ requestPolicy: 'network-only' })} /> + {/snippet} </Toolbar> {#if archives} - <Pagination /> + <Pagination {pagination} total={archives.count} /> <main> <Cards> {#each archives.edges as { id, name, cover, size, pageCount }, index (id)} - <Selectable {index} {id} let:handle let:selected> - <Card - ellipsis={false} - href={id.toString()} - details={{ title: name, cover: cover }} - on:click={handle} - > - <SelectionOverlay position="left" {selected} slot="overlay" /> - <div class="flex gap-1 text-xs"> - <Pill name={`${pageCount} pages`}> - <span class="icon-[material-symbols--note] mr-0.5" slot="icon" /> - </Pill> - <Pill name={filesize(size, { base: 2 })}> - <span class="icon-[material-symbols--hard-drive] mr-0.5" slot="icon" /> - </Pill> - </div> - </Card> + <Selectable {index} {id}> + {#snippet children({ onclick, selected })} + <Card + ellipsis={false} + href={id.toString()} + details={{ title: name, cover }} + {onclick} + > + {#snippet overlay()} + <SelectionOverlay position="left" {selected} /> + {/snippet} + <div class="flex gap-1 text-xs"> + <Pill name={`${pageCount} pages`}> + {#snippet icon()} + <span class="icon-[material-symbols--note] mr-0.5"></span> + {/snippet} + </Pill> + <Pill name={filesize(size, { base: 2 })}> + {#snippet icon()} + <span class="icon-[material-symbols--hard-drive] mr-0.5"></span> + {/snippet} + </Pill> + </div> + </Card> + {/snippet} </Selectable> {:else} <Empty /> {/each} </Cards> </main> - <Pagination /> + <Pagination {pagination} total={archives.count} /> {:else} <Guard {result} /> {/if} diff --git a/frontend/src/routes/archives/[id]/+page.svelte b/frontend/src/routes/archives/[id]/+page.svelte index 50a2940..56c3273 100644 --- a/frontend/src/routes/archives/[id]/+page.svelte +++ b/frontend/src/routes/archives/[id]/+page.svelte @@ -2,9 +2,6 @@ import { updateArchives } from '$gql/Mutations'; import { archiveQuery } from '$gql/Queries'; import { Direction, Layout, type FullArchiveFragment, type PageFragment } from '$gql/graphql'; - import { initReaderContext } from '$lib/Reader'; - import { initSelectionContext } from '$lib/Selection'; - import { setTabContext } from '$lib/Tabs'; import { toastFinally } from '$lib/Toasts'; import Guard from '$lib/components/Guard.svelte'; import Head from '$lib/components/Head.svelte'; @@ -12,52 +9,40 @@ import Grid from '$lib/containers/Grid.svelte'; import Gallery from '$lib/gallery/Gallery.svelte'; import PageView from '$lib/reader/PageView.svelte'; - import Reader from '$lib/reader/Reader.svelte'; + import Reader, { initReaderContext } from '$lib/reader/Reader.svelte'; + import { initSelectionContext } from '$lib/selection/Selection.svelte'; import ArchiveDelete from '$lib/tabs/ArchiveDelete.svelte'; import ArchiveDetails from '$lib/tabs/ArchiveDetails.svelte'; import ArchiveEdit from '$lib/tabs/ArchiveEdit.svelte'; import Tab from '$lib/tabs/Tab.svelte'; import Tabs from '$lib/tabs/Tabs.svelte'; import { getContextClient } from '@urql/svelte'; - import type { PageData } from './$types'; + import type { PageProps } from './$types'; - export let data: PageData; + let { data }: PageProps = $props(); const client = getContextClient(); const reader = initReaderContext(); - setTabContext({ - tabs: { - details: { title: 'Details' }, - edit: { title: 'Edit' }, - deletion: { title: 'Delete' } - }, - current: 'details' - }); - - $: result = archiveQuery(client, { id: data.id }); - function updateCover(event: CustomEvent<number>) { - updateArchives(client, { ids: archive.id, input: { cover: { id: event.detail } } }).catch( - toastFinally - ); + function updateCover(id: number) { + updateArchives(client, { ids: data.id, input: { cover: { id } } }).catch(toastFinally); } - let archive: FullArchiveFragment; + let selection = initSelectionContext<PageFragment>( + 'Page', + (p) => p.path, + (p) => p.comicId === null + ); - $: $result, update(); - function update() { - if (!$result.stale && $result.data?.archive.__typename === 'FullArchive') { - archive = structuredClone($result.data.archive); + let result = $derived(archiveQuery(client, { id: data.id })); + let archive: FullArchiveFragment | undefined = $state(); - $reader.pages = archive.pages; + $effect(() => { + if (!$result.stale && $result.data?.archive.__typename === 'FullArchive') { + archive = $result.data.archive; + reader.pages = $result.data.archive.pages; + selection.view = $result.data.archive.pages; } - } - - const selection = initSelectionContext<PageFragment>('Page', (p) => p.path); - $selection.selectable = (p) => p.comicId === null; - - $: if (archive) { - $selection.view = archive.pages; - } + }); </script> <Head section="Archive" title={archive?.name} /> @@ -70,24 +55,20 @@ <aside> <Tabs> - <Tab id="details"> + <Tab initial id="details" title="Details"> <ArchiveDetails {archive} /> </Tab> - <Tab id="edit"> + <Tab id="edit" title="Edit"> <ArchiveEdit {archive} /> </Tab> - <Tab id="deletion"> + <Tab id="deletion" title="Delete"> <ArchiveDelete {archive} /> </Tab> </Tabs> </aside> <main class="overflow-auto"> - <Gallery - pages={archive.pages} - on:open={(e) => ($reader = $reader.open(e.detail))} - on:cover={updateCover} - /> + <Gallery pages={archive.pages} open={reader.open} {updateCover} /> </main> </Grid> {:else} diff --git a/frontend/src/routes/artists/+page.svelte b/frontend/src/routes/artists/+page.svelte index e07338c..c907470 100644 --- a/frontend/src/routes/artists/+page.svelte +++ b/frontend/src/routes/artists/+page.svelte @@ -3,10 +3,7 @@ import { artistsQuery, fetchArtist } from '$gql/Queries'; import type { Artist } from '$gql/graphql'; import { ArtistSortLabel } from '$lib/Enums'; - import { BasicFilterContext, initFilterContext } from '$lib/Filter'; - import { initPaginationContext } from '$lib/Pagination'; - import { initSelectionContext } from '$lib/Selection'; - import { initSortContext } from '$lib/Sort'; + import { BasicFilterContext } from '$lib/Filter.svelte'; import { toastFinally } from '$lib/Toasts'; import AddButton from '$lib/components/AddButton.svelte'; import Cardlet from '$lib/components/Cardlet.svelte'; @@ -19,6 +16,7 @@ import EditArtist from '$lib/dialogs/EditArtist.svelte'; import Pagination from '$lib/pagination/Pagination.svelte'; import Selectable from '$lib/selection/Selectable.svelte'; + import { initSelectionContext } from '$lib/selection/Selection.svelte'; import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte'; import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte'; import Search from '$lib/toolbar/Search.svelte'; @@ -27,38 +25,32 @@ import SelectionControls from '$lib/toolbar/SelectionControls.svelte'; import Toolbar from '$lib/toolbar/Toolbar.svelte'; import { getContextClient } from '@urql/svelte'; - import { openModal } from 'svelte-modals'; - import type { PageData } from './$types'; + import { modals } from 'svelte-modals'; + import type { PageProps } from './$types'; + + let { data }: PageProps = $props(); + let pagination = $derived(data.pagination); + let sort = $derived(data.sort); const client = getContextClient(); - export let data: PageData; + let result = $derived(artistsQuery(client, { ...data })); + let artists = $derived($result.data?.artists); - $: result = artistsQuery(client, { - pagination: data.pagination, - filter: data.filter, - sort: data.sort + let selection = initSelectionContext<Artist>('Artist', (a) => a.name); + $effect(() => { + if (artists) { + selection.view = artists.edges; + } }); - $: artists = $result.data?.artists; - - const selection = initSelectionContext<Artist>('Artist', (a) => a.name); - $: if (artists) { - $selection.view = artists.edges; - $pagination.total = artists.count; - } - - const filter = initFilterContext<BasicFilterContext>(); - $: $filter = new BasicFilterContext(data.filter); - - const sort = initSortContext(data.sort, ArtistSortLabel); - $: $sort.update = data.sort; - - const pagination = initPaginationContext(); - $: $pagination.update = data.pagination; + let filter = $state(new BasicFilterContext(data.filter)); + $effect(() => { + filter = new BasicFilterContext(data.filter); + }); const edit = (id: number) => { fetchArtist(client, id) - .then((artist) => openModal(EditArtist, { artist })) + .then((artist) => modals.open(EditArtist, { artist })) .catch(toastFinally); }; </script> @@ -67,34 +59,40 @@ <Column> <Toolbar> - <SelectionControls slot="start"> - <DeleteSelection mutation={deleteArtists} /> - </SelectionControls> - <svelte:fragment slot="center"> - <Search name="Artists" bind:field={$filter.include.controls.name.contains} /> - <SelectSort /> - <SelectItems /> - </svelte:fragment> - <svelte:fragment slot="end"> - <AddButton title="Add Artist" on:click={() => openModal(AddArtist)} /> - </svelte:fragment> + {#snippet start()} + <SelectionControls> + <DeleteSelection mutation={deleteArtists} /> + </SelectionControls> + {/snippet} + {#snippet center()} + <Search name="Artists" {filter} bind:field={filter.include.name.contains} /> + <SelectSort {sort} labels={ArtistSortLabel} /> + <SelectItems {pagination} /> + {/snippet} + {#snippet end()} + <AddButton title="Add Artist" onclick={() => modals.open(AddArtist)} /> + {/snippet} </Toolbar> {#if artists} - <Pagination /> + <Pagination {pagination} total={artists.count} /> <main> <Cardlets> {#each artists.edges as { id, name }, index (id)} - <Selectable {index} {id} {edit} let:handle let:selected> - <Cardlet {name} on:click={handle} filter="artists" {id}> - <SelectionOverlay slot="overlay" position="right" centered {selected} /> - </Cardlet> + <Selectable {index} {id} {edit}> + {#snippet children({ onclick, selected })} + <Cardlet {name} {onclick} filter="artists" {id}> + {#snippet overlay()} + <SelectionOverlay position="right" centered {selected} /> + {/snippet} + </Cardlet> + {/snippet} </Selectable> {:else} <Empty /> {/each} </Cardlets> </main> - <Pagination /> + <Pagination {pagination} total={artists.count} /> {:else} <Guard {result} /> {/if} diff --git a/frontend/src/routes/characters/+page.svelte b/frontend/src/routes/characters/+page.svelte index 0934bab..04c72cb 100644 --- a/frontend/src/routes/characters/+page.svelte +++ b/frontend/src/routes/characters/+page.svelte @@ -3,10 +3,7 @@ import { charactersQuery, fetchCharacter } from '$gql/Queries'; import type { Character } from '$gql/graphql'; import { CharacterSortLabel } from '$lib/Enums'; - import { BasicFilterContext, initFilterContext } from '$lib/Filter'; - import { initPaginationContext } from '$lib/Pagination'; - import { initSelectionContext } from '$lib/Selection'; - import { initSortContext } from '$lib/Sort'; + import { BasicFilterContext } from '$lib/Filter.svelte'; import { toastFinally } from '$lib/Toasts'; import AddButton from '$lib/components/AddButton.svelte'; import Cardlet from '$lib/components/Cardlet.svelte'; @@ -19,6 +16,7 @@ import EditCharacter from '$lib/dialogs/EditCharacter.svelte'; import Pagination from '$lib/pagination/Pagination.svelte'; import Selectable from '$lib/selection/Selectable.svelte'; + import { initSelectionContext } from '$lib/selection/Selection.svelte'; import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte'; import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte'; import Search from '$lib/toolbar/Search.svelte'; @@ -27,38 +25,32 @@ import SelectionControls from '$lib/toolbar/SelectionControls.svelte'; import Toolbar from '$lib/toolbar/Toolbar.svelte'; import { getContextClient } from '@urql/svelte'; - import { openModal } from 'svelte-modals'; - import type { PageData } from './$types'; + import { modals } from 'svelte-modals'; + import type { PageProps } from './$types'; + + let { data }: PageProps = $props(); + let pagination = $derived(data.pagination); + let sort = $derived(data.sort); const client = getContextClient(); - export let data: PageData; + let result = $derived(charactersQuery(client, { ...data })); + let characters = $derived($result.data?.characters); - $: result = charactersQuery(client, { - pagination: data.pagination, - filter: data.filter, - sort: data.sort + let selection = initSelectionContext<Character>('Character', (a) => a.name); + $effect(() => { + if (characters) { + selection.view = characters.edges; + } }); - $: characters = $result.data?.characters; - - const selection = initSelectionContext<Character>('Character', (c) => c.name); - $: if (characters) { - $selection.view = characters.edges; - $pagination.total = characters.count; - } - - const filter = initFilterContext<BasicFilterContext>(); - $: $filter = new BasicFilterContext(data.filter); - - const sort = initSortContext(data.sort, CharacterSortLabel); - $: $sort.update = data.sort; - - const pagination = initPaginationContext(); - $: $pagination.update = data.pagination; + let filter = $state(new BasicFilterContext(data.filter)); + $effect(() => { + filter = new BasicFilterContext(data.filter); + }); const edit = (id: number) => { fetchCharacter(client, id) - .then((character) => openModal(EditCharacter, { character })) + .then((character) => modals.open(EditCharacter, { character })) .catch(toastFinally); }; </script> @@ -67,34 +59,40 @@ <Column> <Toolbar> - <SelectionControls slot="start"> - <DeleteSelection mutation={deleteCharacters} /> - </SelectionControls> - <svelte:fragment slot="center"> - <Search name="Characters" bind:field={$filter.include.controls.name.contains} /> - <SelectSort /> - <SelectItems /> - </svelte:fragment> - <svelte:fragment slot="end"> - <AddButton title="Add Character" on:click={() => openModal(AddCharacter)} /> - </svelte:fragment> + {#snippet start()} + <SelectionControls> + <DeleteSelection mutation={deleteCharacters} /> + </SelectionControls> + {/snippet} + {#snippet center()} + <Search name="Characters" {filter} bind:field={filter.include.name.contains} /> + <SelectSort {sort} labels={CharacterSortLabel} /> + <SelectItems {pagination} /> + {/snippet} + {#snippet end()} + <AddButton title="Add Character" onclick={() => modals.open(AddCharacter)} /> + {/snippet} </Toolbar> {#if characters} - <Pagination /> + <Pagination {pagination} total={characters.count} /> <main> <Cardlets> {#each characters.edges as { id, name }, index (id)} - <Selectable {index} {id} {edit} let:handle let:selected> - <Cardlet {name} on:click={handle} filter="characters" {id}> - <SelectionOverlay slot="overlay" position="right" centered {selected} /> - </Cardlet> + <Selectable {index} {id} {edit}> + {#snippet children({ onclick, selected })} + <Cardlet {name} {onclick} filter="characters" {id}> + {#snippet overlay()} + <SelectionOverlay position="right" centered {selected} /> + {/snippet} + </Cardlet> + {/snippet} </Selectable> {:else} <Empty /> {/each} </Cardlets> </main> - <Pagination /> + <Pagination {pagination} total={characters.count} /> {:else} <Guard {result} /> {/if} diff --git a/frontend/src/routes/circles/+page.svelte b/frontend/src/routes/circles/+page.svelte index 14b0866..57520f8 100644 --- a/frontend/src/routes/circles/+page.svelte +++ b/frontend/src/routes/circles/+page.svelte @@ -3,10 +3,7 @@ import { circlesQuery, fetchCircle } from '$gql/Queries'; import type { Circle } from '$gql/graphql'; import { CircleSortLabel } from '$lib/Enums'; - import { BasicFilterContext, initFilterContext } from '$lib/Filter'; - import { initPaginationContext } from '$lib/Pagination'; - import { initSelectionContext } from '$lib/Selection'; - import { initSortContext } from '$lib/Sort'; + import { BasicFilterContext } from '$lib/Filter.svelte'; import { toastFinally } from '$lib/Toasts'; import AddButton from '$lib/components/AddButton.svelte'; import Cardlet from '$lib/components/Cardlet.svelte'; @@ -19,6 +16,7 @@ import EditCircle from '$lib/dialogs/EditCircle.svelte'; import Pagination from '$lib/pagination/Pagination.svelte'; import Selectable from '$lib/selection/Selectable.svelte'; + import { initSelectionContext } from '$lib/selection/Selection.svelte'; import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte'; import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte'; import Search from '$lib/toolbar/Search.svelte'; @@ -27,38 +25,32 @@ import SelectionControls from '$lib/toolbar/SelectionControls.svelte'; import Toolbar from '$lib/toolbar/Toolbar.svelte'; import { getContextClient } from '@urql/svelte'; - import { openModal } from 'svelte-modals'; - import type { PageData } from './$types'; + import { modals } from 'svelte-modals'; + import type { PageProps } from './$types'; + + let { data }: PageProps = $props(); + let pagination = $derived(data.pagination); + let sort = $derived(data.sort); const client = getContextClient(); - export let data: PageData; + let result = $derived(circlesQuery(client, { ...data })); + let circles = $derived($result.data?.circles); - $: result = circlesQuery(client, { - pagination: data.pagination, - filter: data.filter, - sort: data.sort + let selection = initSelectionContext<Circle>('Circle', (a) => a.name); + $effect(() => { + if (circles) { + selection.view = circles.edges; + } }); - $: circles = $result.data?.circles; - - const selection = initSelectionContext<Circle>('Circle', (c) => c.name); - $: if (circles) { - $selection.view = circles.edges; - $pagination.total = circles.count; - } - - const filter = initFilterContext<BasicFilterContext>(); - $: $filter = new BasicFilterContext(data.filter); - - const sort = initSortContext(data.sort, CircleSortLabel); - $: $sort.update = data.sort; - - const pagination = initPaginationContext(); - $: $pagination.update = data.pagination; + let filter = $state(new BasicFilterContext(data.filter)); + $effect(() => { + filter = new BasicFilterContext(data.filter); + }); const edit = (id: number) => { fetchCircle(client, id) - .then((circle) => openModal(EditCircle, { circle })) + .then((circle) => modals.open(EditCircle, { circle })) .catch(toastFinally); }; </script> @@ -67,34 +59,40 @@ <Column> <Toolbar> - <SelectionControls slot="start"> - <DeleteSelection mutation={deleteCircles} /> - </SelectionControls> - <svelte:fragment slot="center"> - <Search name="Circles" bind:field={$filter.include.controls.name.contains} /> - <SelectSort /> - <SelectItems /> - </svelte:fragment> - <svelte:fragment slot="end"> - <AddButton title="Add Circle" on:click={() => openModal(AddCircle)} /> - </svelte:fragment> + {#snippet start()} + <SelectionControls> + <DeleteSelection mutation={deleteCircles} /> + </SelectionControls> + {/snippet} + {#snippet center()} + <Search name="Circles" {filter} bind:field={filter.include.name.contains} /> + <SelectSort {sort} labels={CircleSortLabel} /> + <SelectItems {pagination} /> + {/snippet} + {#snippet end()} + <AddButton title="Add Circle" onclick={() => modals.open(AddCircle)} /> + {/snippet} </Toolbar> {#if circles} - <Pagination /> + <Pagination {pagination} total={circles.count} /> <main> <Cardlets> {#each circles.edges as { id, name }, index (id)} - <Selectable {index} {id} {edit} let:handle let:selected> - <Cardlet {name} on:click={handle} filter="circles" {id}> - <SelectionOverlay slot="overlay" position="right" centered {selected} /> - </Cardlet> + <Selectable {index} {id} {edit}> + {#snippet children({ onclick, selected })} + <Cardlet {name} {onclick} filter="circles" {id}> + {#snippet overlay()} + <SelectionOverlay position="right" centered {selected} /> + {/snippet} + </Cardlet> + {/snippet} </Selectable> {:else} <Empty /> {/each} </Cardlets> </main> - <Pagination /> + <Pagination {pagination} total={circles.count} /> {:else} <Guard {result} /> {/if} diff --git a/frontend/src/routes/comics/+page.svelte b/frontend/src/routes/comics/+page.svelte index 353d69c..372fd1a 100644 --- a/frontend/src/routes/comics/+page.svelte +++ b/frontend/src/routes/comics/+page.svelte @@ -3,10 +3,7 @@ import { comicsQuery } from '$gql/Queries'; import { type ComicFragment } from '$gql/graphql'; import { ComicSortLabel } from '$lib/Enums'; - import { ComicFilterContext, initFilterContext } from '$lib/Filter'; - import { initPaginationContext } from '$lib/Pagination'; - import { initSelectionContext } from '$lib/Selection'; - import { initSortContext } from '$lib/Sort'; + import { ComicFilterContext } from '$lib/Filter.svelte'; import Card, { comicCard } from '$lib/components/Card.svelte'; import Empty from '$lib/components/Empty.svelte'; import Guard from '$lib/components/Guard.svelte'; @@ -18,6 +15,7 @@ import Pagination from '$lib/pagination/Pagination.svelte'; import ComicPills from '$lib/pills/ComicPills.svelte'; import Selectable from '$lib/selection/Selectable.svelte'; + import { initSelectionContext } from '$lib/selection/Selection.svelte'; import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte'; import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte'; import EditSelection from '$lib/toolbar/EditSelection.svelte'; @@ -35,81 +33,82 @@ import ToggleAdvancedFilters from '$lib/toolbar/ToggleAdvancedFilters.svelte'; import Toolbar from '$lib/toolbar/Toolbar.svelte'; import { getContextClient } from '@urql/svelte'; - import type { PageData } from './$types'; + import type { PageProps } from './$types'; - export let data: PageData; + let { data }: PageProps = $props(); + let pagination = $derived(data.pagination); + let sort = $derived(data.sort); const client = getContextClient(); - - $: result = comicsQuery(client, { - pagination: data.pagination, - filter: data.filter, - sort: data.sort - }); - - $: comics = $result.data?.comics; + let result = $derived(comicsQuery(client, { ...data })); + let comics = $derived($result.data?.comics); const selection = initSelectionContext<ComicFragment>('Comic', (c) => c.title); - $: if (comics) { - $selection.view = comics.edges; - $pagination.total = comics.count; - } - - const filter = initFilterContext<ComicFilterContext>(); - $: $filter = new ComicFilterContext(data.filter); - - const sort = initSortContext(data.sort, ComicSortLabel); - $: $sort.update = data.sort; + $effect(() => { + if (comics) { + selection.view = comics.edges; + } + }); - const pagination = initPaginationContext(); - $: $pagination.update = data.pagination; + let filter = $state(new ComicFilterContext(data.filter)); + $effect(() => { + filter = new ComicFilterContext(data.filter); + }); </script> <Head section="Comics" /> <Column> <Toolbar> - <SelectionControls slot="start"> - <MarkSelection> - <MarkFavourite mutation={updateComics} /> - <hr class="col-span-2 border-slate-600" /> - <MarkBookmark mutation={updateComics} /> - <hr class="col-span-2 border-slate-600" /> - <MarkOrganized mutation={updateComics} /> - </MarkSelection> - <EditSelection dialog={UpdateComicsDialog} /> - <DeleteSelection mutation={deleteComics} /> - </SelectionControls> - <svelte:fragment slot="center"> - <Search name="Comics" bind:field={$filter.include.controls.title.contains} /> - <ToggleAdvancedFilters /> + {#snippet start()} + <SelectionControls> + <MarkSelection> + <MarkFavourite mutation={updateComics} /> + <hr class="col-span-2 border-slate-600" /> + <MarkBookmark mutation={updateComics} /> + <hr class="col-span-2 border-slate-600" /> + <MarkOrganized mutation={updateComics} /> + </MarkSelection> + <EditSelection dialog={UpdateComicsDialog} /> + <DeleteSelection mutation={deleteComics} /> + </SelectionControls> + {/snippet} + {#snippet center({ expanded, toggle })} + <Search name="Comics" {filter} bind:field={filter.include.title.contains} /> + <ToggleAdvancedFilters {expanded} {toggle} filterSize={filter.includes + filter.excludes} /> <div class="rounded-group flex"> - <FilterFavourites /> - <FilterBookmarked /> - <FilterOrganized /> + <FilterFavourites {filter} /> + <FilterBookmarked {filter} /> + <FilterOrganized {filter} /> </div> - <SelectSort /> - <SelectItems /> - </svelte:fragment> - <ComicFilterForm /> + <SelectSort {sort} labels={ComicSortLabel} /> + <SelectItems {pagination} /> + {/snippet} + {#snippet expansion()} + <ComicFilterForm {filter} /> + {/snippet} </Toolbar> {#if comics} - <Pagination /> + <Pagination {pagination} total={comics.count} /> <main> <Cards> {#each comics.edges as comic, index (comic.id)} - <Selectable {index} id={comic.id} let:handle let:selected> - <Card {...comicCard(comic)} on:click={handle}> - <SelectionOverlay position="left" {selected} slot="overlay" /> - <ComicPills {comic} /> - </Card> + <Selectable {index} id={comic.id}> + {#snippet children({ onclick, selected })} + <Card {...comicCard(comic)} {onclick}> + {#snippet overlay()} + <SelectionOverlay position="left" {selected} /> + {/snippet} + <ComicPills {comic} /> + </Card> + {/snippet} </Selectable> {:else} <Empty /> {/each} </Cards> </main> - <Pagination /> + <Pagination {pagination} total={comics.count} /> {:else} <Guard {result} /> {/if} diff --git a/frontend/src/routes/comics/[id]/+page.svelte b/frontend/src/routes/comics/[id]/+page.svelte index cfc5840..48c588f 100644 --- a/frontend/src/routes/comics/[id]/+page.svelte +++ b/frontend/src/routes/comics/[id]/+page.svelte @@ -2,12 +2,14 @@ import { beforeNavigate } from '$app/navigation'; import { updateComics } from '$gql/Mutations'; import { comicQuery } from '$gql/Queries'; - import { comicEquals } from '$gql/Utils'; - import { UpdateMode, type FullComicFragment, type UpdateComicInput } from '$gql/graphql'; - import { initReaderContext } from '$lib/Reader'; - import { initScraperContext } from '$lib/Scraper'; - import { initSelectionContext } from '$lib/Selection'; - import { setTabContext } from '$lib/Tabs'; + import { omitIdentifiers, type OmitIdentifiers } from '$gql/Utils'; + import { + UpdateMode, + type FullComicFragment, + type PageFragment, + type UpdateComicInput + } from '$gql/graphql'; + import { comicPending } from '$lib/Form'; import { toastFinally } from '$lib/Toasts'; import { preventOnPending } from '$lib/Utils'; import BookmarkButton from '$lib/components/BookmarkButton.svelte'; @@ -21,155 +23,140 @@ import ComicForm from '$lib/forms/ComicForm.svelte'; import Gallery from '$lib/gallery/Gallery.svelte'; import PageView from '$lib/reader/PageView.svelte'; - import Reader from '$lib/reader/Reader.svelte'; + import Reader, { initReaderContext } from '$lib/reader/Reader.svelte'; import ComicScrapeForm from '$lib/scraper/ComicScrapeForm.svelte'; + import { initScraperContext } from '$lib/scraper/Scraper.svelte'; + import { initSelectionContext } from '$lib/selection/Selection.svelte'; import ComicDelete from '$lib/tabs/ComicDelete.svelte'; import ComicDetails from '$lib/tabs/ComicDetails.svelte'; import Tab from '$lib/tabs/Tab.svelte'; import Tabs from '$lib/tabs/Tabs.svelte'; import SelectionControls from '$lib/toolbar/SelectionControls.svelte'; import { getContextClient } from '@urql/svelte'; - import type { PageData } from './$types'; + import { untrack } from 'svelte'; + import type { PageProps } from './$types'; + let { data }: PageProps = $props(); const client = getContextClient(); const reader = initReaderContext(); - const selection = initSelectionContext(); const scraper = initScraperContext(); - const tabContext = setTabContext({ - tabs: { - details: { title: 'Details' }, - edit: { title: 'Edit' }, - scrape: { title: 'Scrape' }, - deletion: { title: 'Delete' } - }, - current: 'details' - }); + const selection = initSelectionContext<PageFragment>('Page', (p) => p.path); - export let data: PageData; - $: result = comicQuery(client, { id: data.id }); - - let comic: FullComicFragment; - let original: Readonly<FullComicFragment>; - let updatePartial = false; - - $: $result, update(); - $: pending = !comicEquals(comic, original); - $: $tabContext.tabs.edit.badge = pending; - - function update() { - if (!$result.stale && $result.data?.comic.__typename === 'FullComic') { - original = $result.data.comic; - if (updatePartial) { - comic.pages = structuredClone(original.pages); - comic.favourite = original.favourite; - comic.bookmarked = original.bookmarked; - comic.organized = original.organized; - comic.updatedAt = original.updatedAt; - updatePartial = false; - } else { - comic = structuredClone(original); - } - - $reader.pages = original.pages; - $selection.view = comic.pages; - $scraper.selector = undefined; - } + let comic: FullComicFragment | undefined = $state(); + let input: OmitIdentifiers<FullComicFragment> | undefined = $state(); + let updateInput = $state(true); + + function invalidateInput() { + updateInput = true; } - function toggle(field: keyof Omit<UpdateComicInput, 'cover'>) { - updateComics(client, { ids: comic.id, input: { [field]: !comic[field] } }) - .then(() => (updatePartial = true)) - .catch(toastFinally); + function submit(input: UpdateComicInput) { + updateComics(client, { ids: data.id, input }).then(invalidateInput).catch(toastFinally); } - function updateComic(event: CustomEvent<UpdateComicInput>) { - updateComics(client, { ids: comic.id, input: event.detail }).catch(toastFinally); + function toggle(field: keyof Pick<UpdateComicInput, 'bookmarked' | 'favourite' | 'organized'>) { + if (!comic) return; + updateComics(client, { ids: data.id, input: { [field]: !comic[field] } }).catch(toastFinally); } - function updateCover(event: CustomEvent<number>) { - updateComics(client, { ids: comic.id, input: { cover: { id: event.detail } } }) - .then(() => (updatePartial = true)) - .catch(toastFinally); + function updateCover(id: number) { + updateComics(client, { ids: data.id, input: { cover: { id } } }).catch(toastFinally); } function removePages() { updateComics(client, { - ids: comic.id, - input: { pages: { ids: $selection.ids, options: { mode: UpdateMode.Remove } } } + ids: data.id, + input: { pages: { ids: selection.ids, options: { mode: UpdateMode.Remove } } } }) - .then(() => { - updatePartial = true; - $selection = $selection.clear(); - }) + .then(selection.clear) .catch(toastFinally); } beforeNavigate((navigation) => preventOnPending(navigation, pending)); + let result = $derived(comicQuery(client, { id: data.id })); + let pending = $derived(comicPending(comic, input)); + + $effect(() => { + if (!$result.stale) { + untrack(() => { + if ($result.data?.comic.__typename === 'FullComic') { + comic = $result.data.comic; + + if (updateInput) { + input = omitIdentifiers($result.data.comic); + updateInput = false; + } + + reader.pages = comic.pages; + selection.view = comic.pages; + scraper.reset(); + } + }); + } + }); </script> -<Head section="Comic" title={original?.title} /> +<Head section="Comic" title={comic?.title} /> -{#if comic} +{#if comic && input} <Grid> <header> <Titlebar - title={original.title} - subtitle={original.originalTitle} - bind:favourite={comic.favourite} - on:favourite={() => toggle('favourite')} + title={comic.title} + subtitle={comic.originalTitle} + favourite={comic.favourite} + onfavourite={() => toggle('favourite')} /> </header> <aside> - <Tabs> - <Tab id="details"> - <ComicDetails comic={original} /> + <Tabs badges={{ edit: pending }}> + <Tab initial id="details" title="Details"> + <ComicDetails {comic} /> </Tab> - <Tab id="edit"> + <Tab id="edit" title="Edit"> <div class="flex flex-col gap-4"> <div class="flex gap-2 text-sm"> <SelectionControls page> - <RemovePageButton on:click={removePages} /> + <RemovePageButton onclick={removePages} /> </SelectionControls> - <div class="grow" /> - <BookmarkButton bookmarked={comic.bookmarked} on:click={() => toggle('bookmarked')} /> - <OrganizedButton organized={comic.organized} on:click={() => toggle('organized')} /> + <div class="grow"></div> + <BookmarkButton bookmarked={comic.bookmarked} onclick={() => toggle('bookmarked')} /> + <OrganizedButton organized={comic.organized} onclick={() => toggle('organized')} /> </div> - <ComicForm bind:comic on:submit={updateComic}> + <ComicForm bind:input {submit}> <div class="flex gap-2"> - <div class="grow" /> - <SubmitButton active={pending} /> + <div class="grow"></div> + <SubmitButton {pending} /> </div> </ComicForm> </div> </Tab> - <Tab id="scrape"> - <ComicScrapeForm {comic} /> + <Tab id="scrape" title="Scrape"> + <ComicScrapeForm {comic} onupsert={invalidateInput} /> </Tab> - <Tab id="deletion"> + <Tab id="deletion" title="Delete"> <ComicDelete {comic} /> </Tab> </Tabs> </aside> <main class="overflow-auto"> - <Gallery - pages={comic.pages} - on:open={(e) => ($reader = $reader.open(e.detail))} - on:cover={updateCover} - /> + <Gallery pages={comic.pages} open={reader.open} {updateCover} /> </main> </Grid> <Reader> <PageView layout={comic.layout} direction={comic.direction} /> - <svelte:fragment slot="sidebar"> - <ComicForm bind:comic on:submit={updateComic}> - <div class="flex justify-end gap-2"> - <SubmitButton active={pending} /> - </div> - </ComicForm> - </svelte:fragment> + {#snippet sidebar()} + {#if input} + <ComicForm bind:input {submit}> + <div class="flex justify-end gap-2"> + <SubmitButton {pending} /> + </div> + </ComicForm> + {/if} + {/snippet} </Reader> {:else} <Guard {result} /> diff --git a/frontend/src/routes/namespaces/+page.svelte b/frontend/src/routes/namespaces/+page.svelte index f6568f9..04f7737 100644 --- a/frontend/src/routes/namespaces/+page.svelte +++ b/frontend/src/routes/namespaces/+page.svelte @@ -3,10 +3,7 @@ import { fetchNamespace, namespacesQuery } from '$gql/Queries'; import type { Namespace } from '$gql/graphql'; import { NamespaceSortLabel } from '$lib/Enums'; - import { BasicFilterContext, initFilterContext } from '$lib/Filter'; - import { initPaginationContext } from '$lib/Pagination'; - import { initSelectionContext } from '$lib/Selection'; - import { initSortContext } from '$lib/Sort'; + import { BasicFilterContext } from '$lib/Filter.svelte'; import { toastFinally } from '$lib/Toasts'; import AddButton from '$lib/components/AddButton.svelte'; import Cardlet from '$lib/components/Cardlet.svelte'; @@ -19,6 +16,7 @@ import EditNamespace from '$lib/dialogs/EditNamespace.svelte'; import Pagination from '$lib/pagination/Pagination.svelte'; import Selectable from '$lib/selection/Selectable.svelte'; + import { initSelectionContext } from '$lib/selection/Selection.svelte'; import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte'; import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte'; import Search from '$lib/toolbar/Search.svelte'; @@ -27,38 +25,32 @@ import SelectionControls from '$lib/toolbar/SelectionControls.svelte'; import Toolbar from '$lib/toolbar/Toolbar.svelte'; import { getContextClient } from '@urql/svelte'; - import { openModal } from 'svelte-modals'; - import type { PageData } from './$types'; + import { modals } from 'svelte-modals'; + import type { PageProps } from './$types'; + + let { data }: PageProps = $props(); + let pagination = $derived(data.pagination); + let sort = $derived(data.sort); const client = getContextClient(); - export let data: PageData; + let result = $derived(namespacesQuery(client, { ...data })); + let namespaces = $derived($result.data?.namespaces); - $: result = namespacesQuery(client, { - pagination: data.pagination, - filter: data.filter, - sort: data.sort + let selection = initSelectionContext<Namespace>('Namespace', (n) => n.name); + $effect(() => { + if (namespaces) { + selection.view = namespaces.edges; + } }); - $: namespaces = $result.data?.namespaces; - - const selection = initSelectionContext<Namespace>('Namespace', (n) => n.name); - $: if (namespaces) { - $selection.view = namespaces.edges; - $pagination.total = namespaces.count; - } - - const filter = initFilterContext<BasicFilterContext>(); - $: $filter = new BasicFilterContext(data.filter); - - const sort = initSortContext(data.sort, NamespaceSortLabel); - $: $sort.update = data.sort; - - const pagination = initPaginationContext(); - $: $pagination.update = data.pagination; + let filter = $state(new BasicFilterContext(data.filter)); + $effect(() => { + filter = new BasicFilterContext(data.filter); + }); const edit = (id: number) => { fetchNamespace(client, id) - .then((namespace) => openModal(EditNamespace, { namespace })) + .then((namespace) => modals.open(EditNamespace, { namespace })) .catch(toastFinally); }; </script> @@ -67,34 +59,40 @@ <Column> <Toolbar> - <SelectionControls slot="start"> - <DeleteSelection mutation={deleteNamespaces} /> - </SelectionControls> - <svelte:fragment slot="center"> - <Search name="Namespaces" bind:field={$filter.include.controls.name.contains} /> - <SelectSort /> - <SelectItems /> - </svelte:fragment> - <svelte:fragment slot="end"> - <AddButton title="Add Namespace" on:click={() => openModal(AddNamespace)} /> - </svelte:fragment> + {#snippet start()} + <SelectionControls> + <DeleteSelection mutation={deleteNamespaces} /> + </SelectionControls> + {/snippet} + {#snippet center()} + <Search name="Namespaces" {filter} bind:field={filter.include.name.contains} /> + <SelectSort {sort} labels={NamespaceSortLabel} /> + <SelectItems {pagination} /> + {/snippet} + {#snippet end()} + <AddButton title="Add Namespace" onclick={() => modals.open(AddNamespace)} /> + {/snippet} </Toolbar> {#if namespaces} - <Pagination /> + <Pagination {pagination} total={namespaces.count} /> <main> <Cardlets> {#each namespaces.edges as { id, name }, index (id)} - <Selectable {index} {id} {edit} let:handle let:selected> - <Cardlet {name} on:click={handle} filter="tags" id={`${id}:`}> - <SelectionOverlay slot="overlay" position="right" centered {selected} /> - </Cardlet> + <Selectable {index} {id} {edit}> + {#snippet children({ onclick, selected })} + <Cardlet {name} {onclick} filter="tags" id={`${id}:`}> + {#snippet overlay()} + <SelectionOverlay position="right" centered {selected} /> + {/snippet} + </Cardlet> + {/snippet} </Selectable> {:else} <Empty /> {/each} </Cardlets> </main> - <Pagination /> + <Pagination {pagination} total={namespaces.count} /> {:else} <Guard {result} /> {/if} diff --git a/frontend/src/routes/statistics/+page.svelte b/frontend/src/routes/statistics/+page.svelte index 7497bcf..1a5bb27 100644 --- a/frontend/src/routes/statistics/+page.svelte +++ b/frontend/src/routes/statistics/+page.svelte @@ -5,8 +5,8 @@ import StatGroup from '$lib/statistics/StatGroup.svelte'; import { getContextClient } from '@urql/svelte'; - $: query = statisticsQuery(getContextClient()); - $: totals = $query.data?.statistics.total; + let query = $derived(statisticsQuery(getContextClient())); + let totals = $derived($query.data?.statistics.total); </script> <Head section="Statistics" /> diff --git a/frontend/src/routes/tags/+page.svelte b/frontend/src/routes/tags/+page.svelte index e0909ad..30554c7 100644 --- a/frontend/src/routes/tags/+page.svelte +++ b/frontend/src/routes/tags/+page.svelte @@ -3,10 +3,7 @@ import { fetchTag, tagsQuery } from '$gql/Queries'; import { type Tag } from '$gql/graphql'; import { TagSortLabel } from '$lib/Enums'; - import { TagFilterContext, initFilterContext } from '$lib/Filter'; - import { initPaginationContext } from '$lib/Pagination'; - import { initSelectionContext } from '$lib/Selection'; - import { initSortContext } from '$lib/Sort'; + import { TagFilterContext } from '$lib/Filter.svelte'; import { toastFinally } from '$lib/Toasts'; import AddButton from '$lib/components/AddButton.svelte'; import Cardlet from '$lib/components/Cardlet.svelte'; @@ -17,10 +14,11 @@ import Column from '$lib/containers/Column.svelte'; import AddTag from '$lib/dialogs/AddTag.svelte'; import EditTag from '$lib/dialogs/EditTag.svelte'; - import UpdateTagsDialog from '$lib/dialogs/UpdateTags.svelte'; + import UpdateTags from '$lib/dialogs/UpdateTags.svelte'; import TagFilterForm from '$lib/filter/TagFilterForm.svelte'; import Pagination from '$lib/pagination/Pagination.svelte'; import Selectable from '$lib/selection/Selectable.svelte'; + import { initSelectionContext } from '$lib/selection/Selection.svelte'; import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte'; import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte'; import EditSelection from '$lib/toolbar/EditSelection.svelte'; @@ -31,39 +29,33 @@ import ToggleAdvancedFilters from '$lib/toolbar/ToggleAdvancedFilters.svelte'; import Toolbar from '$lib/toolbar/Toolbar.svelte'; import { getContextClient } from '@urql/svelte'; - import { openModal } from 'svelte-modals'; - import type { PageData } from './$types'; + import { modals } from 'svelte-modals'; + import type { PageProps } from './$types'; - const client = getContextClient(); - - export let data: PageData; + let { data }: PageProps = $props(); + let pagination = $derived(data.pagination); + let sort = $derived(data.sort); - $: result = tagsQuery(client, { - pagination: data.pagination, - filter: data.filter, - sort: data.sort - }); - - $: tags = $result.data?.tags; + const client = getContextClient(); + let result = $derived(tagsQuery(client, { ...data })); + let tags = $derived($result.data?.tags); const selection = initSelectionContext<Tag>('Tag', (t) => t.name); - $: if (tags) { - $selection.view = tags.edges; - $pagination.total = tags.count; - } - - const filter = initFilterContext<TagFilterContext>(); - $: $filter = new TagFilterContext(data.filter); - - const sort = initSortContext(data.sort, TagSortLabel); - $: $sort.update = data.sort; + $effect(() => { + if (tags) { + selection.view = tags.edges; + } + }); - const pagination = initPaginationContext(); - $: $pagination.update = data.pagination; + let filter = $state(new TagFilterContext(data.filter)); + let filterSize = $derived(filter.includes + filter.excludes); + $effect(() => { + filter = new TagFilterContext(data.filter); + }); const edit = (id: number) => { fetchTag(client, id) - .then((tag) => openModal(EditTag, { tag })) + .then((tag) => modals.open(EditTag, { tag })) .catch(toastFinally); }; </script> @@ -72,37 +64,45 @@ <Column> <Toolbar> - <SelectionControls slot="start"> - <EditSelection dialog={UpdateTagsDialog} /> - <DeleteSelection mutation={deleteTags} /> - </SelectionControls> - <svelte:fragment slot="center"> - <Search name="Tags" bind:field={$filter.include.controls.name.contains} /> - <ToggleAdvancedFilters /> - <SelectSort /> - <SelectItems /> - </svelte:fragment> - <svelte:fragment slot="end"> - <AddButton title="Add Tag" on:click={() => openModal(AddTag)} /> - </svelte:fragment> - <TagFilterForm /> + {#snippet start()} + <SelectionControls> + <EditSelection dialog={UpdateTags} /> + <DeleteSelection mutation={deleteTags} /> + </SelectionControls> + {/snippet} + {#snippet center({ expanded, toggle })} + <Search name="Tags" {filter} bind:field={filter.include.name.contains} /> + <ToggleAdvancedFilters {expanded} {toggle} {filterSize} /> + <SelectSort {sort} labels={TagSortLabel} /> + <SelectItems {pagination} /> + {/snippet} + {#snippet end()} + <AddButton title="Add Tag" onclick={() => modals.open(AddTag)} /> + {/snippet} + {#snippet expansion()} + <TagFilterForm {filter} /> + {/snippet} </Toolbar> {#if tags} - <Pagination /> + <Pagination {pagination} total={tags.count} /> <main> <Cardlets> {#each tags.edges as { id, name, description }, index (id)} - <Selectable {index} {id} {edit} let:handle let:selected> - <Cardlet {name} title={description} on:click={handle} filter="tags" id={`:${id}`}> - <SelectionOverlay slot="overlay" position="right" centered {selected} /> - </Cardlet> + <Selectable {index} {id} {edit}> + {#snippet children({ onclick, selected })} + <Cardlet {name} title={description} {onclick} filter="tags" id={`:${id}`}> + {#snippet overlay()} + <SelectionOverlay position="right" centered {selected} /> + {/snippet} + </Cardlet> + {/snippet} </Selectable> {:else} <Empty /> {/each} </Cardlets> </main> - <Pagination /> + <Pagination {pagination} total={tags.count} /> {:else} <Guard {result} /> {/if} diff --git a/frontend/src/routes/worlds/+page.svelte b/frontend/src/routes/worlds/+page.svelte index e0366e9..f223a61 100644 --- a/frontend/src/routes/worlds/+page.svelte +++ b/frontend/src/routes/worlds/+page.svelte @@ -3,10 +3,7 @@ import { fetchWorld, worldsQuery } from '$gql/Queries'; import type { World } from '$gql/graphql'; import { WorldSortLabel } from '$lib/Enums'; - import { BasicFilterContext, initFilterContext } from '$lib/Filter'; - import { initPaginationContext } from '$lib/Pagination'; - import { initSelectionContext } from '$lib/Selection'; - import { initSortContext } from '$lib/Sort'; + import { BasicFilterContext } from '$lib/Filter.svelte'; import { toastFinally } from '$lib/Toasts'; import AddButton from '$lib/components/AddButton.svelte'; import Cardlet from '$lib/components/Cardlet.svelte'; @@ -19,6 +16,7 @@ import EditWorld from '$lib/dialogs/EditWorld.svelte'; import Pagination from '$lib/pagination/Pagination.svelte'; import Selectable from '$lib/selection/Selectable.svelte'; + import { initSelectionContext } from '$lib/selection/Selection.svelte'; import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte'; import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte'; import Search from '$lib/toolbar/Search.svelte'; @@ -27,75 +25,74 @@ import SelectionControls from '$lib/toolbar/SelectionControls.svelte'; import Toolbar from '$lib/toolbar/Toolbar.svelte'; import { getContextClient } from '@urql/svelte'; - import { openModal } from 'svelte-modals'; - import type { PageData } from './$types'; + import { modals } from 'svelte-modals'; + import type { PageProps } from './$types'; - const client = getContextClient(); + let { data }: PageProps = $props(); + let pagination = $derived(data.pagination); + let sort = $derived(data.sort); - export let data: PageData; + const client = getContextClient(); + let result = $derived(worldsQuery(client, { ...data })); + let worlds = $derived($result.data?.worlds); - $: result = worldsQuery(client, { - pagination: data.pagination, - filter: data.filter, - sort: data.sort + let selection = initSelectionContext<World>('World', (a) => a.name); + $effect(() => { + if (worlds) { + selection.view = worlds.edges; + } }); - $: worlds = $result.data?.worlds; - - const selection = initSelectionContext<World>('World', (w) => w.name); - $: if (worlds) { - $selection.view = worlds.edges; - $pagination.total = worlds.count; - } - - const filter = initFilterContext<BasicFilterContext>(); - $: $filter = new BasicFilterContext(data.filter); - - const sort = initSortContext(data.sort, WorldSortLabel); - $: $sort.update = data.sort; - - const pagination = initPaginationContext(); - $: $pagination.update = data.pagination; + let filter = $state(new BasicFilterContext(data.filter)); + $effect(() => { + filter = new BasicFilterContext(data.filter); + }); const edit = (id: number) => { fetchWorld(client, id) - .then((world) => openModal(EditWorld, { world })) + .then((world) => modals.open(EditWorld, { world })) .catch(toastFinally); }; </script> -<Head section="Worlds" /> +<Head section="worlds" /> <Column> <Toolbar> - <SelectionControls slot="start"> - <DeleteSelection mutation={deleteWorlds} /> - </SelectionControls> - <svelte:fragment slot="center"> - <Search name="Worlds" bind:field={$filter.include.controls.name.contains} /> - <SelectSort /> - <SelectItems /> - </svelte:fragment> - <svelte:fragment slot="end"> - <AddButton title="Add World" on:click={() => openModal(AddWorld)} /> - </svelte:fragment> + {#snippet start()} + <SelectionControls> + <DeleteSelection mutation={deleteWorlds} /> + </SelectionControls> + {/snippet} + {#snippet center()} + <Search name="Worlds" {filter} bind:field={filter.include.name.contains} /> + <SelectSort {sort} labels={WorldSortLabel} /> + <SelectItems {pagination} /> + {/snippet} + {#snippet end()} + <AddButton title="Add World" onclick={() => modals.open(AddWorld)} /> + {/snippet} </Toolbar> {#if worlds} - <Pagination /> + <Pagination {pagination} total={worlds.count} /> <main> <Cardlets> {#each worlds.edges as { id, name }, index (id)} - <Selectable {index} {id} {edit} let:handle let:selected> - <Cardlet {name} on:click={handle} filter="worlds" {id}> - <SelectionOverlay slot="overlay" position="right" centered {selected} /> - </Cardlet> + <Selectable {index} {id} {edit}> + {#snippet children({ onclick, selected })} + <Cardlet {name} {onclick} filter="worlds" {id}> + {#snippet overlay()} + <SelectionOverlay position="right" centered {selected} /> + {/snippet} + </Cardlet> + {/snippet} </Selectable> {:else} <Empty /> {/each} </Cardlets> </main> - <Pagination /> + <Pagination {pagination} total={worlds.count} /> {:else} <Guard {result} /> {/if} |