diff options
Diffstat (limited to 'frontend/src/lib')
125 files changed, 5252 insertions, 0 deletions
diff --git a/frontend/src/lib/Actions.ts b/frontend/src/lib/Actions.ts new file mode 100644 index 0000000..7231c2f --- /dev/null +++ b/frontend/src/lib/Actions.ts @@ -0,0 +1,109 @@ +export function debounce( + node: HTMLInputElement, + { callback, timeout = 500 }: { callback: () => void; timeout?: number } +) { + let timer: NodeJS.Timeout; + + function trigger(event: KeyboardEvent) { + clearTimeout(timer); + if (event.key !== 'Enter') { + timer = setTimeout(callback, timeout); + } else { + callback(); + } + } + + node.addEventListener('keyup', trigger); + + return { + destroy() { + clearTimeout(timer); + node.removeEventListener('keyup', trigger); + } + }; +} + +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]', + 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])', + 'select:not([disabled]):not([aria-hidden])', + 'textarea:not([disabled]):not([aria-hidden])', + 'button:not([disabled]):not([aria-hidden])', + 'iframe', + 'object', + 'embed', + '[contenteditable]', + '[tabindex]:not([tabindex^="-"])' +]; + +let trapped: HTMLElement[] = []; + +export function trapFocus(node: HTMLElement) { + function handler(event: KeyboardEvent) { + if (event.target === window) return; + + // return if we're not the topmost node to handle + if (trapped.at(0) !== node) return; + + const focusable = node.querySelectorAll<HTMLElement>(focusableElements.join()); + + const first = focusable[0]; + const last = focusable[focusable.length - 1]; + + if (event.key === 'Tab') { + if (!node.contains(document.activeElement)) { + first.focus(); + event.preventDefault(); + } + + if (event.shiftKey && event.target === first) { + last.focus(); + event.preventDefault(); + } else if (!event.shiftKey && event.target === last) { + first.focus(); + event.preventDefault(); + } + } + } + + if (document.activeElement instanceof HTMLElement) { + // if we trap focus, make sure to blur any previously selected external + // item such that focus does not remain outside of the node + if (!node.contains(document.activeElement)) { + document.activeElement.blur(); + } + } + + document.addEventListener('keydown', handler); + trapped.unshift(node); + + return { + destroy() { + document.removeEventListener('keydown', handler); + trapped = trapped.filter((i) => i !== node); + } + }; +} diff --git a/frontend/src/lib/Enums.ts b/frontend/src/lib/Enums.ts new file mode 100644 index 0000000..876aec8 --- /dev/null +++ b/frontend/src/lib/Enums.ts @@ -0,0 +1,325 @@ +import { + ArchiveSort, + ArtistSort, + Category, + Censorship, + CharacterSort, + CircleSort, + ComicSort, + Direction, + Language, + Layout, + NamespaceSort, + Rating, + TagSort, + UpdateMode, + WorldSort +} from '$gql/graphql'; + +export interface EnumOption<T> { + id: T; + name: string; +} + +export const DirectionLabel: Record<Direction, string> = { + [Direction.LeftToRight]: 'Left to Right', + [Direction.RightToLeft]: 'Right to Left' +}; + +export const LayoutLabel: Record<Layout, string> = { + [Layout.Single]: 'Single Page', + [Layout.Double]: 'Double Page', + [Layout.DoubleOffset]: 'Double Page, offset' +}; + +export const RatingLabel: Record<Rating, string> = { + [Rating.Safe]: 'Safe', + [Rating.Questionable]: 'Questionable', + [Rating.Explicit]: 'Explicit' +}; + +export const CensorshipLabel: Record<Censorship, string> = { + [Censorship.None]: 'None', + [Censorship.Bar]: 'Bars', + [Censorship.Mosaic]: 'Mosaic', + [Censorship.Full]: 'Full' +}; + +export const CategoryLabel: Record<Category, string> = { + [Category.Manga]: 'Manga', + [Category.Doujinshi]: 'Doujinshi', + [Category.Comic]: 'Comic', + [Category.Artbook]: 'Artbook', + [Category.GameCg]: 'Game CG', + [Category.ImageSet]: 'Image Set', + [Category.VariantSet]: 'Variant Set', + [Category.Webtoon]: 'Webtoon' +}; + +export const ArchiveSortLabel: Record<ArchiveSort, string> = { + [ArchiveSort.Path]: 'Path', + [ArchiveSort.Size]: 'File Size', + [ArchiveSort.CreatedAt]: 'Created At', + [ArchiveSort.PageCount]: 'Page Count', + [ArchiveSort.Random]: 'Random' +}; + +export const ComicSortLabel: Record<ComicSort, string> = { + [ComicSort.Title]: 'Title', + [ComicSort.OriginalTitle]: 'Original Title', + [ComicSort.Date]: 'Date', + [ComicSort.CreatedAt]: 'Created At', + [ComicSort.UpdatedAt]: 'Updated At', + [ComicSort.TagCount]: 'Tag Count', + [ComicSort.PageCount]: 'Page Count', + [ComicSort.Random]: 'Random' +}; + +export const ArtistSortLabel: Record<ArtistSort, string> = { + [ArtistSort.Name]: 'Name', + [ArtistSort.CreatedAt]: 'Created At', + [ArtistSort.UpdatedAt]: 'Updated At', + [ArchiveSort.Random]: 'Random' +}; + +export const CharacterSortLabel: Record<CharacterSort, string> = { + [CharacterSort.Name]: 'Name', + [CharacterSort.CreatedAt]: 'Created At', + [CharacterSort.UpdatedAt]: 'Updated At', + [ArchiveSort.Random]: 'Random' +}; + +export const CircleSortLabel: Record<CircleSort, string> = { + [CircleSort.Name]: 'Name', + [CircleSort.CreatedAt]: 'Created At', + [CircleSort.UpdatedAt]: 'Updated At', + [ArchiveSort.Random]: 'Random' +}; + +export const NamespaceSortLabel: Record<NamespaceSort, string> = { + [NamespaceSort.Name]: 'Name', + [NamespaceSort.SortName]: 'Sort Name', + [NamespaceSort.CreatedAt]: 'Created At', + [NamespaceSort.UpdatedAt]: 'Updated At', + [ArchiveSort.Random]: 'Random' +}; + +export const TagSortLabel: Record<TagSort, string> = { + [TagSort.Name]: 'Name', + [TagSort.CreatedAt]: 'Created At', + [TagSort.UpdatedAt]: 'Updated At', + [ArchiveSort.Random]: 'Random' +}; + +export const WorldSortLabel: Record<WorldSort, string> = { + [WorldSort.Name]: 'Name', + [WorldSort.CreatedAt]: 'Created At', + [WorldSort.UpdatedAt]: 'Updated At', + [ArchiveSort.Random]: 'Random' +}; + +export const UpdateModeLabel: Record<UpdateMode, string> = { + [UpdateMode.Add]: 'Add', + [UpdateMode.Remove]: 'Remove', + [UpdateMode.Replace]: 'Replace' +}; + +export const LanguageLabel: Record<Language, string> = { + [Language.Ab]: 'Abkhazian', + [Language.Aa]: 'Afar', + [Language.Af]: 'Afrikaans', + [Language.Ak]: 'Akan', + [Language.Sq]: 'Albanian', + [Language.Am]: 'Amharic', + [Language.Ar]: 'Arabic', + [Language.An]: 'Aragonese', + [Language.Hy]: 'Armenian', + [Language.As]: 'Assamese', + [Language.Av]: 'Avaric', + [Language.Ae]: 'Avestan', + [Language.Ay]: 'Aymara', + [Language.Az]: 'Azerbaijani', + [Language.Bm]: 'Bambara', + [Language.Ba]: 'Bashkir', + [Language.Eu]: 'Basque', + [Language.Be]: 'Belarusian', + [Language.Bn]: 'Bengali', + [Language.Bh]: 'Bihari languages', + [Language.Bi]: 'Bislama', + [Language.Bs]: 'Bosnian', + [Language.Br]: 'Breton', + [Language.Bg]: 'Bulgarian', + [Language.My]: 'Burmese', + [Language.Ca]: 'Catalan', + [Language.Km]: 'Central Khmer', + [Language.Ch]: 'Chamorro', + [Language.Ce]: 'Chechen', + [Language.Ny]: 'Chichewa', + [Language.Zh]: 'Chinese', + [Language.Cu]: 'Church Slavic', + [Language.Cv]: 'Chuvash', + [Language.Kw]: 'Cornish', + [Language.Co]: 'Corsican', + [Language.Cr]: 'Cree', + [Language.Hr]: 'Croatian', + [Language.Cs]: 'Czech', + [Language.Da]: 'Danish', + [Language.Dv]: 'Divehi', + [Language.Nl]: 'Dutch', + [Language.Dz]: 'Dzongkha', + [Language.En]: 'English', + [Language.Eo]: 'Esperanto', + [Language.Et]: 'Estonian', + [Language.Ee]: 'Ewe', + [Language.Fo]: 'Faroese', + [Language.Fj]: 'Fijian', + [Language.Fi]: 'Finnish', + [Language.Fr]: 'French', + [Language.Ff]: 'Fulah', + [Language.Gd]: 'Gaelic', + [Language.Gl]: 'Galician', + [Language.Lg]: 'Ganda', + [Language.Ka]: 'Georgian', + [Language.De]: 'German', + [Language.Gn]: 'Guarani', + [Language.Gu]: 'Gujarati', + [Language.Ht]: 'Haitian', + [Language.Ha]: 'Hausa', + [Language.He]: 'Hebrew', + [Language.Hz]: 'Herero', + [Language.Hi]: 'Hindi', + [Language.Ho]: 'Hiri Motu', + [Language.Hu]: 'Hungarian', + [Language.Is]: 'Icelandic', + [Language.Io]: 'Ido', + [Language.Ig]: 'Igbo', + [Language.Id]: 'Indonesian', + [Language.Ia]: 'Interlingua', + [Language.Ie]: 'Interlingue', + [Language.Iu]: 'Inuktitut', + [Language.Ik]: 'Inupiaq', + [Language.Ga]: 'Irish', + [Language.It]: 'Italian', + [Language.Ja]: 'Japanese', + [Language.Jv]: 'Javanese', + [Language.Kl]: 'Kalaallisut', + [Language.Kn]: 'Kannada', + [Language.Kr]: 'Kanuri', + [Language.Ks]: 'Kashmiri', + [Language.Kk]: 'Kazakh', + [Language.Ki]: 'Kikuyu', + [Language.Rw]: 'Kinyarwanda', + [Language.Ky]: 'Kirghiz', + [Language.Kv]: 'Komi', + [Language.Kg]: 'Kongo', + [Language.Ko]: 'Korean', + [Language.Kj]: 'Kuanyama', + [Language.Ku]: 'Kurdish', + [Language.Lo]: 'Lao', + [Language.La]: 'Latin', + [Language.Lv]: 'Latvian', + [Language.Li]: 'Limburgan', + [Language.Ln]: 'Lingala', + [Language.Lt]: 'Lithuanian', + [Language.Lu]: 'Luba-Katanga', + [Language.Lb]: 'Luxembourgish', + [Language.Mk]: 'Macedonian', + [Language.Mg]: 'Malagasy', + [Language.Ms]: 'Malay', + [Language.Ml]: 'Malayalam', + [Language.Mt]: 'Maltese', + [Language.Gv]: 'Manx', + [Language.Mi]: 'Maori', + [Language.Mr]: 'Marathi', + [Language.Mh]: 'Marshallese', + [Language.El]: 'Modern Greek', + [Language.Mn]: 'Mongolian', + [Language.Na]: 'Nauru', + [Language.Nv]: 'Navajo', + [Language.Ng]: 'Ndonga', + [Language.Ne]: 'Nepali', + [Language.Se]: 'Northern Sami', + [Language.Nd]: 'North Ndebele', + [Language.No]: 'Norwegian', + [Language.Nb]: 'Norwegian BokmÃ¥l', + [Language.Nn]: 'Norwegian Nynorsk', + [Language.Oc]: 'Occitan', + [Language.Oj]: 'Ojibwa', + [Language.Or]: 'Oriya', + [Language.Om]: 'Oromo', + [Language.Os]: 'Ossetian', + [Language.Pi]: 'Pali', + [Language.Pa]: 'Panjabi', + [Language.Fa]: 'Persian', + [Language.Pl]: 'Polish', + [Language.Pt]: 'Portuguese', + [Language.Ps]: 'Pushto', + [Language.Qu]: 'Quechua', + [Language.Ro]: 'Romanian', + [Language.Rm]: 'Romansh', + [Language.Rn]: 'Rundi', + [Language.Ru]: 'Russian', + [Language.Sm]: 'Samoan', + [Language.Sg]: 'Sango', + [Language.Sa]: 'Sanskrit', + [Language.Sc]: 'Sardinian', + [Language.Sr]: 'Serbian', + [Language.Sn]: 'Shona', + [Language.Ii]: 'Sichuan Yi', + [Language.Sd]: 'Sindhi', + [Language.Si]: 'Sinhala', + [Language.Sk]: 'Slovak', + [Language.Sl]: 'Slovenian', + [Language.So]: 'Somali', + [Language.St]: 'Southern Sotho', + [Language.Nr]: 'South Ndebele', + [Language.Es]: 'Spanish', + [Language.Su]: 'Sundanese', + [Language.Sw]: 'Swahili', + [Language.Ss]: 'Swati', + [Language.Sv]: 'Swedish', + [Language.Tl]: 'Tagalog', + [Language.Ty]: 'Tahitian', + [Language.Tg]: 'Tajik', + [Language.Ta]: 'Tamil', + [Language.Tt]: 'Tatar', + [Language.Te]: 'Telugu', + [Language.Th]: 'Thai', + [Language.Bo]: 'Tibetan', + [Language.Ti]: 'Tigrinya', + [Language.To]: 'Tonga', + [Language.Ts]: 'Tsonga', + [Language.Tn]: 'Tswana', + [Language.Tr]: 'Turkish', + [Language.Tk]: 'Turkmen', + [Language.Tw]: 'Twi', + [Language.Ug]: 'Uighur', + [Language.Uk]: 'Ukrainian', + [Language.Ur]: 'Urdu', + [Language.Uz]: 'Uzbek', + [Language.Ve]: 'Venda', + [Language.Vi]: 'Vietnamese', + [Language.Vo]: 'Volapük', + [Language.Wa]: 'Walloon', + [Language.Cy]: 'Welsh', + [Language.Fy]: 'Western Frisian', + [Language.Wo]: 'Wolof', + [Language.Xh]: 'Xhosa', + [Language.Yi]: 'Yiddish', + [Language.Yo]: 'Yoruba', + [Language.Za]: 'Zhuang', + [Language.Zu]: 'Zulu' +}; + +export const directions: EnumOption<Direction>[] = optionsFromLabel(DirectionLabel); +export const layouts: EnumOption<Layout>[] = optionsFromLabel(LayoutLabel); +export const ratings: EnumOption<Rating>[] = optionsFromLabel(RatingLabel); +export const censorships: EnumOption<Censorship>[] = optionsFromLabel(CensorshipLabel); +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>[] { + 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.ts new file mode 100644 index 0000000..8e419f3 --- /dev/null +++ b/frontend/src/lib/Filter.ts @@ -0,0 +1,365 @@ +import { + type ArchiveFilter, + type ArchiveFilterInput, + type ComicFilter, + type ComicFilterInput, + type StringFilter, + 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'; + +interface FilterInput<T> { + include?: T | null; + exclude?: T | null; +} + +interface BasicFilter { + name?: { contains?: string | null } | null; +} + +type FilterMode = 'any' | 'all' | 'exact'; + +type Key = string | number | symbol; + +type Filter<T, K extends Key> = { + [Property in K]?: T | null; +}; + +type AssocFilter<T, K extends Key> = Filter< + { + any?: T[] | null; + all?: T[] | null; + exact?: T[] | null; + empty?: boolean | null; + }, + K +>; + +type EnumFilter<K extends Key> = Filter< + { + any?: string[] | null; + empty?: boolean | null; + }, + K +>; + +interface Integrateable<F> { + integrate(filter: F): void; +} + +class ComplexMember<K extends Key> { + values: unknown[] = []; + key: K; + mode: FilterMode; + empty?: boolean | null; + + constructor(key: K, mode: FilterMode) { + this.key = key; + this.mode = mode; + } + + integrate(filter: AssocFilter<unknown, K>) { + if (this.values.length > 0) { + filter[this.key] = { [this.mode]: this.values }; + } + + if (this.empty) { + filter[this.key] = { ...filter[this.key], empty: this.empty }; + } + } +} + +export class Association<K extends Key> extends ComplexMember<K> { + values: (string | number)[] = []; + + constructor(key: K, mode: FilterMode, filter?: AssocFilter<string | number, K> | null) { + super(key, mode); + + if (!filter) { + return; + } + + const prop = filter[key]; + this.empty = prop?.empty; + + if (prop?.all && prop.all.length > 0) { + this.mode = 'all'; + this.values = prop.all; + } else if (prop?.any && prop.any.length > 0) { + this.mode = 'any'; + this.values = prop.any; + } else if (prop?.exact && prop.exact.length > 0) { + this.mode = 'exact'; + this.values = prop.exact; + } + } +} + +export class Enum<K extends Key> extends ComplexMember<K> { + values: string[] = []; + + constructor(key: K, filter?: EnumFilter<K> | null) { + super(key, 'any'); + + if (!filter) { + return; + } + + this.empty = filter[key]?.empty; + + const prop = filter[key]; + if (prop?.any) { + this.values = prop.any; + } + } +} + +class Bool<K extends Key> { + key: K; + value?: boolean = undefined; + + constructor(key: K, filter?: Filter<boolean, K> | null) { + this.key = key; + + if (filter) { + this.value = filter[key] ?? undefined; + } + } + + integrate(filter: Filter<boolean, K>) { + if (this.value !== undefined) { + filter[this.key] = this.value; + } + } +} + +class Str<K extends Key> { + key: K; + contains = ''; + + constructor(key: K, filter?: Filter<StringFilter, K> | null) { + this.key = key; + + if (filter) { + this.contains = filter[key]?.contains ?? ''; + } + } + + integrate(filter: Filter<StringFilter, K>) { + if (this.contains) { + filter[this.key] = { contains: this.contains }; + } + } +} + +abstract class Controls<F> { + buildFilter() { + const filter = {} as F; + Object.values(this).forEach((v: Integrateable<F>) => v.integrate(filter)); + return filter; + } +} + +export class ArchiveFilterControls extends Controls<ArchiveFilter> { + path: Str<'path'>; + organized: Bool<'organized'>; + + constructor(filter: ArchiveFilter | null | undefined) { + super(); + + this.path = new Str('path', filter); + this.organized = new Bool('organized', filter); + } +} + +export class ComicFilterControls extends Controls<ComicFilter> { + title: Str<'title'>; + categories: Enum<'category'>; + censorships: Enum<'censorship'>; + ratings: Enum<'rating'>; + tags: Association<'tags'>; + languages: Enum<'language'>; + artists: Association<'artists'>; + circles: Association<'circles'>; + characters: Association<'characters'>; + worlds: Association<'worlds'>; + favourite: Bool<'favourite'>; + organized: Bool<'organized'>; + bookmarked: Bool<'bookmarked'>; + + constructor(filter: ComicFilter | null | undefined, mode: FilterMode); + constructor(filter: ComicFilter | null | undefined, mode: FilterMode); + constructor(filter: ComicFilter | null | undefined, mode: FilterMode) { + super(); + + this.title = new Str('title', filter); + this.favourite = new Bool('favourite', filter); + this.organized = new Bool('organized', filter); + this.bookmarked = new Bool('bookmarked', filter); + this.tags = new Association('tags', mode, filter); + this.languages = new Enum('language', filter); + this.categories = new Enum('category', filter); + this.censorships = new Enum('censorship', filter); + this.ratings = new Enum('rating', filter); + this.artists = new Association('artists', mode, filter); + this.circles = new Association('circles', mode, filter); + this.characters = new Association('characters', mode, filter); + this.worlds = new Association('worlds', mode, filter); + } +} + +export class BasicFilterControls extends Controls<BasicFilter> { + name: Str<'name'>; + + constructor(filter?: BasicFilter | null) { + super(); + + this.name = new Str('name', filter); + } +} + +export class TagFilterControls extends BasicFilterControls { + namespaces: Association<'namespaces'>; + + constructor(filter: TagFilter | null | undefined, mode: FilterMode) { + super(filter); + + this.namespaces = new Association('namespaces', mode, filter); + } +} + +function buildFilterInput<F>(include?: F, exclude?: F) { + const input: FilterInput<F> = {}; + + if (include && Object.keys(include).length > 0) { + input.include = include; + } + + if (exclude && Object.keys(exclude).length > 0) { + input.exclude = exclude; + } + + return input; +} + +abstract class FilterContext<F> { + include!: { controls: Controls<F>; size: number }; + exclude!: { controls: Controls<F>; size: number }; + + apply(params: URLSearchParams) { + navigate( + { + filter: buildFilterInput( + this.include.controls.buildFilter(), + this.exclude.controls.buildFilter() + ) + }, + params + ); + } +} + +export class ArchiveFilterContext extends FilterContext<ArchiveFilter> { + include: { controls: ArchiveFilterControls; size: number }; + exclude: { controls: ArchiveFilterControls; size: number }; + 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) + }; + } +} + +export class ComicFilterContext extends FilterContext<ComicFilter> { + include: { controls: ComicFilterControls; size: number }; + exclude: { controls: ComicFilterControls; size: number }; + 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) + }; + } +} + +export class BasicFilterContext extends FilterContext<BasicFilter> { + include: { controls: BasicFilterControls; size: number }; + exclude: { controls: BasicFilterControls; size: number }; + + constructor(filter: FilterInput<BasicFilter>) { + super(); + + this.include = { + controls: new BasicFilterControls(filter.include), + size: numKeys(filter.include) + }; + this.exclude = { + controls: new BasicFilterControls(), + size: 0 + }; + } +} + +export class TagFilterContext extends FilterContext<TagFilter> { + include: { controls: TagFilterControls; size: number }; + exclude: { controls: TagFilterControls; size: number }; + 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) + }; + } +} + +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) { + return true; + } else if (value) { + return false; + } else { + return undefined; + } + } else { + if (value) { + return undefined; + } else { + return true; + } + } +} diff --git a/frontend/src/lib/Meta.ts b/frontend/src/lib/Meta.ts new file mode 100644 index 0000000..8cfad6b --- /dev/null +++ b/frontend/src/lib/Meta.ts @@ -0,0 +1 @@ +export const codename = 'Satanic Satyr'; diff --git a/frontend/src/lib/Navigation.ts b/frontend/src/lib/Navigation.ts new file mode 100644 index 0000000..e6b17cd --- /dev/null +++ b/frontend/src/lib/Navigation.ts @@ -0,0 +1,114 @@ +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'; + +function paramToNum<T>(value: string | null, fallback: T) { + if (value) { + const number = +value; + + if (Number.isNaN(number) || number < 0) { + return fallback; + } + + return number; + } + + return fallback; +} + +export function parseSortData<T>(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) + }; +} + +export function parsePaginationData(params: URLSearchParams, defaultItems = 120): PaginationData { + return { + page: paramToNum(params.get('p'), 1), + items: paramToNum(params.get('i'), defaultItems) + }; +} + +export function parseFilter<T>(params: URLSearchParams): T { + const param = params.get('f'); + + if (!param) return {} as T; + + try { + return JsonURL.parse(param, { AQF: true, impliedObject: {} }) as T; + } catch (e) { + return {} as T; + } +} + +interface NavigationOptions { + to?: string; + params: URLSearchParams; + options?: Parameters<typeof svelteGoto>[1]; +} + +export function goto({ to = '', params, options }: NavigationOptions) { + svelteGoto(`${to}?${params.toString()}`, options).catch(() => toastError('Navigation failed')); +} + +interface NavigationParameters<T> { + filter?: T; + sort?: Partial<SortData<string>>; + pagination?: Partial<PaginationData>; +} + +function paramsFrom<T>( + { pagination, filter, sort }: NavigationParameters<T>, + current?: URLSearchParams +) { + const params = new URLSearchParams(current); + + if (filter !== undefined) { + const json = JsonURL.stringify(filter, { AQF: true, impliedObject: true }); + if (json) { + params.set('f', json); + } else { + params.delete('f'); + } + } + + if (sort !== undefined) { + if (sort.on !== undefined) { + params.set('s', sort.on); + } + if (sort.direction !== undefined) { + params.set('d', sort.direction); + } + if (sort.seed !== undefined) { + params.set('r', sort.seed.toString()); + } + } + + params.delete('p'); + + if (pagination?.items) { + params.set('i', pagination.items.toString()); + } + + if (pagination?.page) { + params.set('p', pagination.page.toString()); + } + + return params; +} + +export function navigate(parameters: NavigationParameters<object>, current?: URLSearchParams) { + goto({ + params: paramsFrom(parameters, current), + options: { noScroll: false, keepFocus: true, replaceState: true } + }); +} + +export function href<T>(base: string, params: NavigationParameters<T>) { + return `/${base}/?${paramsFrom(params).toString()}`; +} diff --git a/frontend/src/lib/Pagination.ts b/frontend/src/lib/Pagination.ts new file mode 100644 index 0000000..f05492b --- /dev/null +++ b/frontend/src/lib/Pagination.ts @@ -0,0 +1,31 @@ +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 new file mode 100644 index 0000000..8777b9b --- /dev/null +++ b/frontend/src/lib/Reader.ts @@ -0,0 +1,62 @@ +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/Scraper.ts b/frontend/src/lib/Scraper.ts new file mode 100644 index 0000000..4baf370 --- /dev/null +++ b/frontend/src/lib/Scraper.ts @@ -0,0 +1,156 @@ +import { + Category, + Censorship, + Direction, + Language, + Layout, + OnMissing, + Rating, + type FullComicFragment, + type ScrapedComic, + type UpsertComicInput, + type UpsertOptions +} from '$gql/graphql'; +import { + CategoryLabel, + CensorshipLabel, + DirectionLabel, + LanguageLabel, + LayoutLabel, + RatingLabel +} from '$lib/Enums'; +import { getContext, setContext } from 'svelte'; +import { writable, type Writable } from 'svelte/store'; + +interface ScraperContext { + scraper: string; + warnings: string[]; + selector?: ScrapedComicSelector; +} + +export function initScraperContext() { + return setContext<Writable<ScraperContext>>('scraper', writable({ scraper: '', warnings: [] })); +} + +export function getScraperContext() { + return getContext<Writable<ScraperContext>>('scraper'); +} + +export class Selector<T extends string> { + keep = true; + value: T; + display: string | undefined; + + constructor(value: T, display?: string) { + this.value = value; + this.display = display; + } + + toString() { + return this.display ?? this.value; + } + + static from<T extends string>( + scraped: T | undefined | null, + have: string | undefined | null, + label?: Record<string, string> + ) { + if (scraped && have !== scraped) { + return new Selector(scraped, label ? label[scraped] : undefined); + } + return undefined; + } + + static fromList(scraped: string[], have: { name: string }[]) { + const haves = new Set(have.map((i) => i.name)); + + return scraped.filter((i) => !haves.has(i)).map((i) => new Selector(i)); + } +} + +function keepItem<T extends string>(selector?: Selector<T>): T | undefined | null { + if (selector?.keep) { + return selector.value; + } + return undefined; +} + +function keepList<T extends string>( + selectorList: Selector<T>[], + onMissing: OnMissing +): { names: T[]; options: UpsertOptions } { + return { + names: selectorList.filter((v) => v.keep).map((v) => v.value), + options: { onMissing } + }; +} + +export class ScrapedComicSelector { + title?: Selector<string>; + originalTitle?: Selector<string>; + url?: Selector<string>; + date?: Selector<string>; + category?: Selector<Category>; + censorship?: Selector<Censorship>; + rating?: Selector<Rating>; + language?: Selector<Language>; + direction?: Selector<Direction>; + layout?: Selector<Layout>; + artists: Selector<string>[]; + circles: Selector<string>[]; + characters: Selector<string>[]; + worlds: Selector<string>[]; + tags: Selector<string>[]; + + constructor(scraped: ScrapedComic, comic: FullComicFragment) { + this.title = Selector.from(scraped.title, comic.title); + this.originalTitle = Selector.from(scraped.originalTitle, comic.originalTitle); + this.url = Selector.from(scraped.url, comic.url); + this.date = Selector.from(scraped.date, comic.date); + this.category = Selector.from(scraped.category, comic.category, CategoryLabel); + this.censorship = Selector.from(scraped.censorship, comic.censorship, CensorshipLabel); + this.rating = Selector.from(scraped.rating, comic.rating, RatingLabel); + this.language = Selector.from(scraped.language, comic.language, LanguageLabel); + this.direction = Selector.from(scraped.direction, comic.direction, DirectionLabel); + this.layout = Selector.from(scraped.layout, comic.layout, LayoutLabel); + + this.artists = Selector.fromList(scraped.artists, comic.artists); + this.circles = Selector.fromList(scraped.circles, comic.circles); + this.characters = Selector.fromList(scraped.characters, comic.characters); + this.tags = Selector.fromList(scraped.tags, comic.tags); + this.worlds = Selector.fromList(scraped.worlds, comic.worlds); + } + + hasData() { + return ( + Object.values(this).filter((i) => { + if (i === undefined) { + return false; + } else if (Array.isArray(i) && i.length === 0) { + return false; + } + return true; + }).length > 0 + ); + } + + toInput(onMissing: OnMissing): UpsertComicInput { + return { + title: keepItem(this.title), + originalTitle: keepItem(this.originalTitle), + url: keepItem(this.url), + date: keepItem(this.date), + category: keepItem(this.category), + censorship: keepItem(this.censorship), + rating: keepItem(this.rating), + language: keepItem(this.language), + direction: keepItem(this.direction), + layout: keepItem(this.layout), + artists: keepList(this.artists, onMissing), + circles: keepList(this.circles, onMissing), + characters: keepList(this.characters, onMissing), + worlds: keepList(this.worlds, onMissing), + tags: keepList(this.tags, onMissing) + }; + } +} diff --git a/frontend/src/lib/Selection.ts b/frontend/src/lib/Selection.ts new file mode 100644 index 0000000..0ea85cc --- /dev/null +++ b/frontend/src/lib/Selection.ts @@ -0,0 +1,141 @@ +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 new file mode 100644 index 0000000..063bd40 --- /dev/null +++ b/frontend/src/lib/Shortcuts.ts @@ -0,0 +1,153 @@ +import { closeModal, modals } from 'svelte-modals'; +import { get } from 'svelte/store'; + +type LowercaseLetter = + | 'a' + | 'b' + | 'c' + | 'd' + | 'e' + | 'f' + | 'g' + | 'h' + | 'i' + | 'j' + | 'l' + | 'm' + | 'n' + | 'o' + | 'p' + | 'q' + | 'r' + | 's' + | 't' + | 'u' + | 'v' + | 'w' + | 'x' + | 'y' + | 'z'; + +type UppercaseLetter = Uppercase<LowercaseLetter>; +type Letter = LowercaseLetter | UppercaseLetter; +type Special = '?' | 'Enter' | 'Escape' | 'Delete'; + +const modeSwitches = ['n', 'g', 'i'] as const; +type ModeSwitch = (typeof modeSwitches)[number]; + +function isModeSwitch(s: string): s is ModeSwitch { + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument + return modeSwitches.indexOf(s as any) !== -1; +} + +type Key = Letter | Special; +type KeyCombo = `${ModeSwitch}${Letter}`; +export type Shortcut = Key | KeyCombo; + +type EventAction = (event: KeyboardEvent) => void; +type FocusAction = HTMLInputElement; +type ClickAction = HTMLElement; + +type Action = EventAction | FocusAction | ClickAction; + +const handlers = new Map<string, Action>(); +let mode: ModeSwitch | undefined; + +export function handleShortcuts(event: KeyboardEvent) { + if (isInputElement(event.target)) { + if (event.key === 'Escape') { + event.target.blur(); + event.preventDefault(); + event.stopImmediatePropagation(); + } + return; + } + + if (event.ctrlKey) { + return; + } + + if (event.key === 'Escape') { + if (get(modals).length > 0) { + closeModal(); + event.preventDefault(); + event.stopImmediatePropagation(); + return; + } + } + + if (isModeSwitch(event.key) && mode === undefined) { + mode = event.key; + event.preventDefault(); + return; + } + + const handler = handlers.get(mode === undefined ? event.key : `${mode}${event.key}`); + + if (!handler || get(modals).length > 0) { + mode = undefined; + return; + } + + if (handler instanceof HTMLInputElement) { + handler.focus(); + } else if (handler instanceof HTMLElement) { + handler.click(); + } else { + handler(event); + } + + mode = undefined; + event.preventDefault(); +} + +export function accelerator(node: HTMLElement | HTMLInputElement, sc: Shortcut) { + handlers.set(sc, node); + + return { + destroy() { + handlers.delete(sc); + } + }; +} + +export function binds(node: Document, scs: [string, EventAction][]) { + const handlers = new Map<string, EventAction>(); + + for (const [k, a] of scs) { + handlers.set(k, a); + } + + function keydown(event: KeyboardEvent) { + if (isInputElement(event.target)) return; + + const handler = handlers.get(event.key); + + if (!handler) return; + + handler(event); + event.preventDefault(); + } + + node.addEventListener('keydown', keydown); + + return { + destroy() { + node.removeEventListener('keydown', keydown); + } + }; +} + +export function addShortcut(sc: Shortcut, action: EventAction) { + handlers.set(sc, action); +} + +function isInputElement(target: EventTarget | null): target is HTMLElement { + return ( + target instanceof HTMLElement && + (target instanceof HTMLInputElement || + target instanceof HTMLSelectElement || + target instanceof HTMLTextAreaElement || + target.isContentEditable) + ); +} diff --git a/frontend/src/lib/Sort.ts b/frontend/src/lib/Sort.ts new file mode 100644 index 0000000..4c9a353 --- /dev/null +++ b/frontend/src/lib/Sort.ts @@ -0,0 +1,42 @@ +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 new file mode 100644 index 0000000..1c43068 --- /dev/null +++ b/frontend/src/lib/Tabs.ts @@ -0,0 +1,18 @@ +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/Toasts.ts b/frontend/src/lib/Toasts.ts new file mode 100644 index 0000000..abc9a7d --- /dev/null +++ b/frontend/src/lib/Toasts.ts @@ -0,0 +1,19 @@ +import { toast } from '@zerodevx/svelte-toast'; + +export function toastSuccess(message: string) { + toast.push(message, { + theme: { '--toastBackground': 'rgba(72, 187, 120, 0.9)', '--toastColor': 'mintcream' }, + duration: 1000 + }); +} + +export function toastError(message: string) { + toast.push(message, { + theme: { '--toastBackground': 'rgba(187, 72, 72, 0.9)', '--toastColor': 'lavenderblush' }, + duration: 5000, + pausable: true + }); +} + +// eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any +export const toastFinally = (reason: any) => toastError(reason); diff --git a/frontend/src/lib/Transitions.ts b/frontend/src/lib/Transitions.ts new file mode 100644 index 0000000..59ebaf2 --- /dev/null +++ b/frontend/src/lib/Transitions.ts @@ -0,0 +1,10 @@ +import { quartInOut } from 'svelte/easing'; +import type { FadeParams, SlideParams } from 'svelte/transition'; + +export const fadeFast: FadeParams = { duration: 60 }; +export const fadeDefault: FadeParams = { duration: 100 }; + +export const slideYDefault: SlideParams = { axis: 'y', duration: 300, easing: quartInOut }; + +export const slideXDefault: SlideParams = { axis: 'x', duration: 300, easing: quartInOut }; +export const slideXFast: SlideParams = { axis: 'x', duration: 200 }; diff --git a/frontend/src/lib/Update.ts b/frontend/src/lib/Update.ts new file mode 100644 index 0000000..507dd52 --- /dev/null +++ b/frontend/src/lib/Update.ts @@ -0,0 +1,97 @@ +import { + UpdateMode, + type UpdateComicInput, + type UpdateOptions, + type UpdateTagInput +} from '$gql/graphql'; + +type Key = string | number | symbol; + +interface AssociationUpdate { + ids?: number[] | string[] | null; + options?: UpdateOptions | null; +} + +type Input<T, K extends Key> = { + [Property in K]?: T | null; +}; + +abstract class Entry<K extends Key> { + key: K; + + constructor(key: K) { + this.key = key; + } + + abstract integrate(input: Input<unknown, K>): void; + abstract hasInput(): boolean; +} + +class Association<K extends Key> extends Entry<K> { + ids = []; + options = { + mode: UpdateMode.Add + }; + + constructor(key: K) { + super(key); + } + + integrate(input: Input<AssociationUpdate, K>) { + if (this.hasInput()) { + input[this.key] = { ids: this.ids, options: this.options }; + } + } + + hasInput() { + return this.ids.length > 0; + } +} + +class Enum<K extends Key> extends Entry<K> { + value?: string = undefined; + + constructor(key: K) { + super(key); + } + + integrate(input: Input<string, K>): void { + if (this.hasInput()) { + input[this.key] = this.value; + } + } + + hasInput() { + return this.value !== undefined && this.value !== null; + } +} + +abstract class Controls<I> { + toInput() { + const input = {} as I; + Object.values(this).forEach((v: Entry<keyof I>) => v.integrate(input)); + return input; + } + + hasInput() { + return Object.values(this).some((i: Entry<keyof I>) => i.hasInput()); + } +} + +export class UpdateTagsControls extends Controls<UpdateTagInput> { + namespaces = new Association('namespaces'); +} + +export class UpdateComicsControls extends Controls<UpdateComicInput> { + artists = new Association('artists'); + category = new Enum('category'); + censorship = new Enum('censorship'); + direction = new Enum('direction'); + layout = new Enum('layout'); + characters = new Association('characters'); + circles = new Association('circles'); + language = new Enum('language'); + rating = new Enum('rating'); + tags = new Association('tags'); + worlds = new Association('worlds'); +} diff --git a/frontend/src/lib/Utils.ts b/frontend/src/lib/Utils.ts new file mode 100644 index 0000000..1a07be1 --- /dev/null +++ b/frontend/src/lib/Utils.ts @@ -0,0 +1,108 @@ +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 ConfirmDeletion from './dialogs/ConfirmDeletion.svelte'; + +export function range(from: number, to: number) { + return Array.from({ length: to - from + 1 }, (_, k) => k + from); +} + +export function getRandomInt(min: number, max: number) { + const minCeiled = Math.ceil(min); + const maxFloored = Math.floor(max); + + return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled); +} + +export interface ListItem { + id: number | string; + name: string; +} + +export interface ResultState { + fetching: boolean; + message?: string; +} + +export function getResultState(state: OperationResultState): ResultState { + let message: string | undefined; + + if (state.error) { + message = `${state.error.name}: ${state.error.message}`; + } else if (state.data) { + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + const obj = Object.values(state.data)[0]; + if (isError(obj)) { + message = obj.message; + } + } + + return { fetching: state.fetching, message: message }; +} + +export function src(image: ImageFragment, type: 'full' | 'thumb' = 'thumb') { + const dir = image.hash.slice(0, 2); + const file = image.hash.slice(2); + + return `/objects/${dir}/${file}_${type}.webp`; +} + +export function numKeys(obj?: object | null, ignore: string[] = []) { + if (!obj) return 0; + + const len = Object.keys(obj).length; + let ignored = 0; + + for (const i of ignore) { + if (Object.hasOwn(obj, i)) ignored++; + } + + return len - ignored; +} + +export function confirmDeletion( + typename: string, + names: string | string[], + callback: () => void, + warning?: string +) { + openModal( + ConfirmDeletion, + { names: Array.isArray(names) ? names : [names], typename, callback: callback, warning }, + { replace: true } + ); +} + +export function idFromLabel(label: string) { + return label.toLowerCase().replaceAll(' ', '-'); +} + +export function pluralize(singular: string, size: number) { + return `${singular}${size > 1 ? 's' : ''}`; +} + +export function formatListSize(word: string, size: number) { + return `${size} ${pluralize(word, size)}`; +} + +export function joinText(items: string[], separator = ', ') { + return items.filter((i) => i).join(separator); +} + +export function confirmPending() { + return confirm('There are pending changes. Click Cancel to keep editing or OK to dismiss them.'); +} + +export function preventOnPending({ to, cancel }: BeforeNavigate, pending: boolean) { + if (!pending) return; + + if (to) { + if (confirmPending()) { + return; + } + } + + cancel(); +} diff --git a/frontend/src/lib/assets/logo.webp b/frontend/src/lib/assets/logo.webp Binary files differnew file mode 100644 index 0000000..e41cbb0 --- /dev/null +++ b/frontend/src/lib/assets/logo.webp diff --git a/frontend/src/lib/components/AddButton.svelte b/frontend/src/lib/components/AddButton.svelte new file mode 100644 index 0000000..9c0ab29 --- /dev/null +++ b/frontend/src/lib/components/AddButton.svelte @@ -0,0 +1,7 @@ +<script lang="ts"> + export let title: string; +</script> + +<button class="btn-blue" {title} on:click> + <span class="icon-base icon-[material-symbols--add]" /> +</button> diff --git a/frontend/src/lib/components/Badge.svelte b/frontend/src/lib/components/Badge.svelte new file mode 100644 index 0000000..7ad3173 --- /dev/null +++ b/frontend/src/lib/components/Badge.svelte @@ -0,0 +1,15 @@ +<script lang="ts"> + import { fadeDefault } from '$lib/Transitions'; + import { fade } from 'svelte/transition'; + + export let number: number; +</script> + +{#if number > 0} + <span + class="absolute -right-[3px] -top-[6px] z-[1] rounded-lg bg-teal-600 px-1 text-xs" + transition:fade={fadeDefault} + > + {number} + </span> +{/if} diff --git a/frontend/src/lib/components/BookmarkButton.svelte b/frontend/src/lib/components/BookmarkButton.svelte new file mode 100644 index 0000000..89570e6 --- /dev/null +++ b/frontend/src/lib/components/BookmarkButton.svelte @@ -0,0 +1,9 @@ +<script lang="ts"> + import Bookmark from '$lib/icons/Bookmark.svelte'; + + export let bookmarked: boolean; +</script> + +<button type="button" title="Toggle bookmark" class="flex text-base" on:click> + <Bookmark hoverable {bookmarked} /> +</button> diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte new file mode 100644 index 0000000..2384799 --- /dev/null +++ b/frontend/src/lib/components/Card.svelte @@ -0,0 +1,106 @@ +<script lang="ts" context="module"> + import type { ComicFragment, ImageFragment } from '$gql/graphql'; + + interface CardDetails { + title: string; + favourite?: boolean; + subtitle?: string | null; + cover?: ImageFragment; + } + + export function comicCard(comic: ComicFragment) { + return { + href: `/comics/${comic.id.toString()}`, + details: { + title: comic.title, + subtitle: comic.originalTitle, + favourite: comic.favourite, + cover: comic.cover + } + }; + } +</script> + +<script lang="ts"> + import { src } from '$lib/Utils'; + import Star from '$lib/icons/Star.svelte'; + + export let href: string; + export let details: CardDetails; + export let compact = false; + export let coverOnly = false; + export let ellipsis = true; +</script> + +<a + {href} + class="grid-card-v sm:grid-card-h relative grid overflow-hidden rounded bg-slate-900 shadow-md shadow-slate-950/30" + class:compact + class:grid-card-cover-only={coverOnly} + on:click +> + <slot name="overlay" /> + {#if details.cover} + <img + class="h-full w-full object-cover object-[center_top]" + width={details.cover.width} + height={details.cover.height} + src={src(details.cover)} + alt="" + title={details.title} + /> + {/if} + {#if !coverOnly} + <article class="flex h-full flex-col gap-2 p-2"> + <header> + <h2 + class:ellipsis-nowrap={ellipsis} + class="self-center text-sm font-medium [grid-area:title]" + title={details.title} + > + {details.title} + </h2> + {#if details.subtitle} + <h3 + class="ellipsis-nowrap text-xs opacity-60 [grid-area:subtitle]" + title={details.subtitle} + > + {details.subtitle} + </h3> + {/if} + {#if details.favourite} + <div class="flex items-center text-lg [grid-area:fav]"> + <Star favourite /> + </div> + {/if} + </header> + + <section class="max-h-full grow overflow-auto border-t border-slate-800/80 pt-2 text-xs"> + <slot /> + </section> + </article> + {/if} +</a> + +<style> + a.compact { + grid-template-columns: 175px 1fr; + grid-template-rows: 250px; + } + + img { + border-start-start-radius: inherit; + border-end-start-radius: inherit; + } + + article > header { + display: grid; + + grid-template-columns: 1fr auto; + grid-template-rows: auto; + + grid-template-areas: + 'title fav' + 'subtitle fav'; + } +</style> diff --git a/frontend/src/lib/components/Cardlet.svelte b/frontend/src/lib/components/Cardlet.svelte new file mode 100644 index 0000000..04d8599 --- /dev/null +++ b/frontend/src/lib/components/Cardlet.svelte @@ -0,0 +1,37 @@ +<script lang="ts"> + import type { ComicFilter } from '$gql/graphql'; + import { href } from '$lib/Navigation'; + + export let name: string; + export let title: string | null | undefined = undefined; + + export let filter: keyof ComicFilter | undefined = undefined; + export let id: number | string | undefined = undefined; + + const handleAux = (e: MouseEvent) => { + if (filter === undefined || id === undefined || e.button !== 1) return; + window.open(href('comics', { filter: { include: { [filter]: { all: [id] } } } })); + }; +</script> + +<button + 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} +> + <slot name="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> +</button> + +<style> + article { + display: grid; + + grid-template-columns: 1fr auto; + grid-template-rows: 2em; + } +</style> diff --git a/frontend/src/lib/components/DeleteButton.svelte b/frontend/src/lib/components/DeleteButton.svelte new file mode 100644 index 0000000..8f5f116 --- /dev/null +++ b/frontend/src/lib/components/DeleteButton.svelte @@ -0,0 +1,15 @@ +<script> + import { accelerator } from '$lib/Shortcuts'; + + export let prominent = false; +</script> + +<button + type="button" + class={prominent ? 'btn-rose' : 'btn-slate hover:bg-rose-700'} + title="Delete forever" + on:click + use:accelerator={'Delete'} +> + <span class="icon-base icon-[material-symbols--delete-forever]" /> +</button> diff --git a/frontend/src/lib/components/Dialog.svelte b/frontend/src/lib/components/Dialog.svelte new file mode 100644 index 0000000..a0bbe5e --- /dev/null +++ b/frontend/src/lib/components/Dialog.svelte @@ -0,0 +1,36 @@ +<script lang="ts"> + import { trapFocus } from '$lib/Actions'; + import { fadeDefault } from '$lib/Transitions'; + import { closeModal } from 'svelte-modals'; + import { fade } from 'svelte/transition'; + + export let isOpen: boolean; +</script> + +{#if isOpen} + <div + role="dialog" + class="pointer-events-none fixed bottom-0 left-0 right-0 top-0 z-30 flex items-center justify-center" + transition:fade|global={fadeDefault} + use:trapFocus + > + <div + 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" /> + <button + type="button" + class="ml-auto flex items-center text-white/30 hover:text-white" + title="Cancel" + on:click={closeModal} + > + <span class="icon-base icon-[material-symbols--close]" /> + </button> + </header> + <main class="m-3 w-80 sm:w-[34rem]"> + <slot /> + </main> + </div> + </div> +{/if} diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte new file mode 100644 index 0000000..9e935e4 --- /dev/null +++ b/frontend/src/lib/components/Dropdown.svelte @@ -0,0 +1,18 @@ +<script lang="ts"> + import { clickOutside } from '$lib/Actions'; + import { fadeFast } from '$lib/Transitions'; + import { fade } from 'svelte/transition'; + + export let visible: boolean; + export let parent: HTMLElement; +</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} diff --git a/frontend/src/lib/components/Empty.svelte b/frontend/src/lib/components/Empty.svelte new file mode 100644 index 0000000..7f9557c --- /dev/null +++ b/frontend/src/lib/components/Empty.svelte @@ -0,0 +1,10 @@ +<script lang="ts"> + import logo from '$lib/assets/logo.webp'; +</script> + +<div class="col-span-full flex flex-col items-center text-4xl font-medium text-gray-600"> + <img src={logo} class="w-1/5 opacity-60 grayscale" alt="" /> + <div class="flex items-center gap-2"> + <h2>There is nothing here...</h2> + </div> +</div> diff --git a/frontend/src/lib/components/Expander.svelte b/frontend/src/lib/components/Expander.svelte new file mode 100644 index 0000000..a382658 --- /dev/null +++ b/frontend/src/lib/components/Expander.svelte @@ -0,0 +1,17 @@ +<script lang="ts"> + export let expanded: boolean; + export let title: string; +</script> + +<button + class="flex items-center text-base hover:text-white" + type="button" + on:click={() => (expanded = !expanded)} +> + {#if expanded} + <span class="icon-base icon-[material-symbols--expand-less]" /> + {:else} + <span class="icon-base icon-[material-symbols--expand-more]" /> + {/if} + {title} +</button> diff --git a/frontend/src/lib/components/Guard.svelte b/frontend/src/lib/components/Guard.svelte new file mode 100644 index 0000000..fd7ded4 --- /dev/null +++ b/frontend/src/lib/components/Guard.svelte @@ -0,0 +1,13 @@ +<script lang="ts"> + import { getResultState } from '$lib/Utils'; + import Spinner from './Spinner.svelte'; + + export let result; + $: state = getResultState($result); +</script> + +{#if state.fetching} + <Spinner /> +{:else} + <p>{state.message}</p> +{/if} diff --git a/frontend/src/lib/components/Head.svelte b/frontend/src/lib/components/Head.svelte new file mode 100644 index 0000000..b4aed5b --- /dev/null +++ b/frontend/src/lib/components/Head.svelte @@ -0,0 +1,12 @@ +<script lang="ts"> + export let section: string; + export let title = ''; + + function formatTitle(section: string, title?: string) { + return [title, section, 'hircine'].filter((i) => i).join(' · '); + } +</script> + +<svelte:head> + <title>{formatTitle(section, title)}</title> +</svelte:head> diff --git a/frontend/src/lib/components/Labelled.svelte b/frontend/src/lib/components/Labelled.svelte new file mode 100644 index 0000000..4b36ad6 --- /dev/null +++ b/frontend/src/lib/components/Labelled.svelte @@ -0,0 +1,10 @@ +<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 new file mode 100644 index 0000000..feb563e --- /dev/null +++ b/frontend/src/lib/components/LabelledBlock.svelte @@ -0,0 +1,18 @@ +<script lang="ts"> + import { idFromLabel } from '$lib/Utils'; + + export let label: string; + + const id = idFromLabel(label); +</script> + +<div class="flex flex-col"> + <div class="flex"> + <label for={id}>{label}</label> + {#if $$slots.controls} + <div class="grow" /> + <slot name="controls" /> + {/if} + </div> + <slot {id} /> +</div> diff --git a/frontend/src/lib/components/OrganizedButton.svelte b/frontend/src/lib/components/OrganizedButton.svelte new file mode 100644 index 0000000..9be985c --- /dev/null +++ b/frontend/src/lib/components/OrganizedButton.svelte @@ -0,0 +1,9 @@ +<script lang="ts"> + import Organized from '$lib/icons/Organized.svelte'; + + export let organized: boolean; +</script> + +<button type="button" title="Toggle organized" class="flex text-base" on:click> + <Organized hoverable {organized} /> +</button> diff --git a/frontend/src/lib/components/RefreshButton.svelte b/frontend/src/lib/components/RefreshButton.svelte new file mode 100644 index 0000000..afab640 --- /dev/null +++ b/frontend/src/lib/components/RefreshButton.svelte @@ -0,0 +1,3 @@ +<button class="btn-blue" title="Refresh" on:click> + <span class="icon-base icon-[material-symbols--sync]" /> +</button> diff --git a/frontend/src/lib/components/RemovePageButton.svelte b/frontend/src/lib/components/RemovePageButton.svelte new file mode 100644 index 0000000..e23c079 --- /dev/null +++ b/frontend/src/lib/components/RemovePageButton.svelte @@ -0,0 +1,13 @@ +<script lang="ts"> + import { accelerator } from '$lib/Shortcuts'; +</script> + +<button + type="button" + class="btn-rose" + title="Remove selected pages" + on:click + use:accelerator={'Delete'} +> + <span class="icon-base icon-[material-symbols--scan-delete]" /> +</button> diff --git a/frontend/src/lib/components/Select.svelte b/frontend/src/lib/components/Select.svelte new file mode 100644 index 0000000..83f026c --- /dev/null +++ b/frontend/src/lib/components/Select.svelte @@ -0,0 +1,55 @@ +<script lang="ts"> + import type { ListItem } from '$lib/Utils'; + /* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-explicit-any */ + + // @ts-ignore + import Svelecte from 'svelecte'; + + let inputId: string; + let valueAsObject = false; + let multiple = false; + + type Value = (number | string | ListItem)[] | number | string | ListItem | undefined | null; + + export let clearable = false; + export let placeholder = 'Select...'; + export let options: ListItem[] | undefined; + export let value: Value; + + export { inputId as id, valueAsObject as object, multiple as multi }; + + function optionsPlaceholder(from: Value) { + if (from === undefined || from === null) return []; + + return Array.isArray(from) ? value : [value]; + } +</script> + +{#if options !== null && options !== undefined} + <Svelecte + virtualList + valueField="id" + labelField="name" + {options} + {multiple} + {clearable} + {inputId} + {valueAsObject} + {placeholder} + bind:value + /> +{:else} + <Svelecte + virtualList + valueField="id" + labelField="name" + disabled + options={optionsPlaceholder(value)} + {multiple} + {clearable} + {inputId} + {valueAsObject} + {placeholder} + {value} + /> +{/if} diff --git a/frontend/src/lib/components/Spinner.svelte b/frontend/src/lib/components/Spinner.svelte new file mode 100644 index 0000000..946329c --- /dev/null +++ b/frontend/src/lib/components/Spinner.svelte @@ -0,0 +1,36 @@ +<script lang="ts"> + import { onDestroy } from 'svelte'; + + let show = false; + const timeout = setTimeout(() => (show = true), 150); + + onDestroy(() => clearTimeout(timeout)); +</script> + +{#if show} + <div class="flex h-full w-full items-center justify-center"> + <span class="spinner" /> + </div> +{/if} + +<style lang="postcss"> + .spinner { + width: 64px; + height: 64px; + border: 5px solid theme(colors.gray.200); + border-bottom-color: transparent; + border-radius: 50%; + display: inline-block; + box-sizing: border-box; + animation: rotation 1s linear infinite; + } + + @keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } +</style> diff --git a/frontend/src/lib/components/SubmitButton.svelte b/frontend/src/lib/components/SubmitButton.svelte new file mode 100644 index 0000000..8ac90b9 --- /dev/null +++ b/frontend/src/lib/components/SubmitButton.svelte @@ -0,0 +1,7 @@ +<script lang="ts"> + export let active = false; + + $: title = active ? 'Save pending changes' : 'Save (no changes pending)'; +</script> + +<button type="submit" class:active class="btn-slate [&.active]:btn-blue" {title}>Save</button> diff --git a/frontend/src/lib/components/Titlebar.svelte b/frontend/src/lib/components/Titlebar.svelte new file mode 100644 index 0000000..8aab2dd --- /dev/null +++ b/frontend/src/lib/components/Titlebar.svelte @@ -0,0 +1,32 @@ +<script lang="ts"> + import Star from '$lib/icons/Star.svelte'; + import { createEventDispatcher } from 'svelte'; + + export let title: string; + export let subtitle: string | null = ''; + export let favourite: boolean | undefined = undefined; + + const dispatch = createEventDispatcher<{ favourite: null }>(); +</script> + +<div class="flex flex-wrap gap-x-4"> + <div class="flex overflow-hidden"> + {#if favourite !== undefined} + <button + type="button" + class="mr-1 flex items-center" + title="Toggle favourite" + on:click={() => dispatch('favourite')} + > + <Star large hoverable {favourite} /> + </button> + {/if} + <h1 class="xl:ellipsis-nowrap text-2xl font-semibold">{title}</h1> + </div> + + {#if subtitle} + <h2 class="xl:ellipsis-nowrap self-end text-lg font-light text-gray-400"> + {subtitle} + </h2> + {/if} +</div> diff --git a/frontend/src/lib/containers/Cardlets.svelte b/frontend/src/lib/containers/Cardlets.svelte new file mode 100644 index 0000000..129da61 --- /dev/null +++ b/frontend/src/lib/containers/Cardlets.svelte @@ -0,0 +1,11 @@ +<script> + import { fadeDefault } from '$lib/Transitions'; + import { fade } from 'svelte/transition'; +</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 /> +</div> diff --git a/frontend/src/lib/containers/Cards.svelte b/frontend/src/lib/containers/Cards.svelte new file mode 100644 index 0000000..a19e8be --- /dev/null +++ b/frontend/src/lib/containers/Cards.svelte @@ -0,0 +1,8 @@ +<script> + import { fadeDefault } from '$lib/Transitions'; + import { fade } from 'svelte/transition'; +</script> + +<div class="grid gap-4 xl:grid-cols-2 min-[1920px]:grid-cols-3" in:fade|global={fadeDefault}> + <slot /> +</div> diff --git a/frontend/src/lib/containers/Carousel.svelte b/frontend/src/lib/containers/Carousel.svelte new file mode 100644 index 0000000..1268a78 --- /dev/null +++ b/frontend/src/lib/containers/Carousel.svelte @@ -0,0 +1,15 @@ +<script lang="ts"> + export let title: string; + export let href: string; +</script> + +<div class="flex flex-col gap-1"> + <h2 class="flex text-2xl font-medium"> + <a class="hover:text-white" {href}> + {title} + </a> + </h2> + <div class="flex flex-wrap gap-5"> + <slot /> + </div> +</div> diff --git a/frontend/src/lib/containers/Column.svelte b/frontend/src/lib/containers/Column.svelte new file mode 100644 index 0000000..05daece --- /dev/null +++ b/frontend/src/lib/containers/Column.svelte @@ -0,0 +1,3 @@ +<div class="flex flex-col gap-4"> + <slot /> +</div> diff --git a/frontend/src/lib/containers/Grid.svelte b/frontend/src/lib/containers/Grid.svelte new file mode 100644 index 0000000..1224156 --- /dev/null +++ b/frontend/src/lib/containers/Grid.svelte @@ -0,0 +1,23 @@ +<script> + import { fadeDefault } from '$lib/Transitions'; + + import { fade } from 'svelte/transition'; +</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 /> +</div> + +<style> + div { + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr; + + grid-template-areas: + 'header header' + 'sidebar main'; + } +</style> diff --git a/frontend/src/lib/dialogs/AddArtist.svelte b/frontend/src/lib/dialogs/AddArtist.svelte new file mode 100644 index 0000000..6ec93c5 --- /dev/null +++ b/frontend/src/lib/dialogs/AddArtist.svelte @@ -0,0 +1,30 @@ +<script lang="ts"> + import { addArtist, type ArtistInput } 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'; + + const client = getContextClient(); + + export let isOpen: boolean; + + let artist = { name: '' }; + + function add(event: CustomEvent<ArtistInput>) { + addArtist(client, { input: event.detail }).then(closeModal).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> diff --git a/frontend/src/lib/dialogs/AddCharacter.svelte b/frontend/src/lib/dialogs/AddCharacter.svelte new file mode 100644 index 0000000..23fea08 --- /dev/null +++ b/frontend/src/lib/dialogs/AddCharacter.svelte @@ -0,0 +1,30 @@ +<script lang="ts"> + import { addCharacter, type CharacterInput } 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'; + + const client = getContextClient(); + + export let isOpen: boolean; + + let character = { name: '' }; + + function add(event: CustomEvent<CharacterInput>) { + addCharacter(client, { input: event.detail }).then(closeModal).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> diff --git a/frontend/src/lib/dialogs/AddCircle.svelte b/frontend/src/lib/dialogs/AddCircle.svelte new file mode 100644 index 0000000..f0ef014 --- /dev/null +++ b/frontend/src/lib/dialogs/AddCircle.svelte @@ -0,0 +1,30 @@ +<script lang="ts"> + import { addCircle, type CircleInput } 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'; + + const client = getContextClient(); + + export let isOpen: boolean; + + let circle = { name: '' }; + + function add(event: CustomEvent<CircleInput>) { + addCircle(client, { input: event.detail }).then(closeModal).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> diff --git a/frontend/src/lib/dialogs/AddNamespace.svelte b/frontend/src/lib/dialogs/AddNamespace.svelte new file mode 100644 index 0000000..e81b22a --- /dev/null +++ b/frontend/src/lib/dialogs/AddNamespace.svelte @@ -0,0 +1,30 @@ +<script lang="ts"> + import { addNamespace, type NamespaceInput } 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'; + + const client = getContextClient(); + + export let isOpen: boolean; + + let namespace = { name: '' }; + + function add(event: CustomEvent<NamespaceInput>) { + addNamespace(client, { input: event.detail }).then(closeModal).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> diff --git a/frontend/src/lib/dialogs/AddTag.svelte b/frontend/src/lib/dialogs/AddTag.svelte new file mode 100644 index 0000000..00d3a03 --- /dev/null +++ b/frontend/src/lib/dialogs/AddTag.svelte @@ -0,0 +1,30 @@ +<script lang="ts"> + import { addTag, type TagInput } 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'; + + const client = getContextClient(); + + export let isOpen: boolean; + + let tag = { name: '', namespaces: [] }; + + function add(event: CustomEvent<TagInput>) { + addTag(client, { input: event.detail }).then(closeModal).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> diff --git a/frontend/src/lib/dialogs/AddWorld.svelte b/frontend/src/lib/dialogs/AddWorld.svelte new file mode 100644 index 0000000..ceb946e --- /dev/null +++ b/frontend/src/lib/dialogs/AddWorld.svelte @@ -0,0 +1,30 @@ +<script lang="ts"> + import { addWorld, type WorldInput } 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'; + + const client = getContextClient(); + + export let isOpen: boolean; + + let world = { name: '' }; + + function add(event: CustomEvent<WorldInput>) { + addWorld(client, { input: event.detail }).then(closeModal).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> diff --git a/frontend/src/lib/dialogs/ConfirmDeletion.svelte b/frontend/src/lib/dialogs/ConfirmDeletion.svelte new file mode 100644 index 0000000..6b0cbf8 --- /dev/null +++ b/frontend/src/lib/dialogs/ConfirmDeletion.svelte @@ -0,0 +1,51 @@ +<script lang="ts"> + import { accelerator } from '$lib/Shortcuts'; + import Dialog from '$lib/components/Dialog.svelte'; + import { closeModal } from 'svelte-modals'; + + export let isOpen: boolean; + export let callback: () => void; + + 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() { + callback(); + closeModal(); + } +</script> + +<Dialog {isOpen}> + <svelte:fragment slot="header"> + <h2>Delete {formattedTypename}</h2> + </svelte:fragment> + <form on:submit|preventDefault={confirm}> + <div class="flex flex-col"> + <p class="mb-3"> + Are you sure you want to delete <span class="font-semibold">{formattedNames}</span>? + </p> + {#if multiple} + <ul class="mb-3 ml-8 list-disc"> + {#each names.slice(0, 10) as name} + <li>{name}</li> + {/each} + </ul> + {#if names.length - 10 > 0} + <p>... and {names.length - 10} more.</p> + {/if} + {/if} + {#if warning} + <p class="font-medium text-red-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> + </div> + </form> +</Dialog> diff --git a/frontend/src/lib/dialogs/EditArtist.svelte b/frontend/src/lib/dialogs/EditArtist.svelte new file mode 100644 index 0000000..dd08bc6 --- /dev/null +++ b/frontend/src/lib/dialogs/EditArtist.svelte @@ -0,0 +1,46 @@ +<script lang="ts"> + import { deleteArtists, updateArtists, type ArtistInput } from '$gql/Mutations'; + import { itemEquals } from '$gql/Utils'; + import { type Artist } 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'; + + const client = getContextClient(); + + export let isOpen: boolean; + + export let artist: Artist; + const original = structuredClone(artist); + $: pending = !itemEquals(artist, original); + + function save(event: CustomEvent<ArtistInput>) { + updateArtists(client, { ids: artist.id, input: event.detail }) + .then(closeModal) + .catch(toastFinally); + } + + function deleteArtist() { + confirmDeletion('Artist', artist.name, () => { + deleteArtists(client, { ids: artist.id }).then(closeModal).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> + </ArtistForm> +</Dialog> diff --git a/frontend/src/lib/dialogs/EditCharacter.svelte b/frontend/src/lib/dialogs/EditCharacter.svelte new file mode 100644 index 0000000..3b45e78 --- /dev/null +++ b/frontend/src/lib/dialogs/EditCharacter.svelte @@ -0,0 +1,46 @@ +<script lang="ts"> + import { deleteCharacters, updateCharacters, type CharacterInput } from '$gql/Mutations'; + import { itemEquals } from '$gql/Utils'; + import { type Character } 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'; + + const client = getContextClient(); + + export let isOpen: boolean; + + export let character: Character; + const original = structuredClone(character); + $: pending = !itemEquals(original, character); + + function save(event: CustomEvent<CharacterInput>) { + updateCharacters(client, { ids: character.id, input: event.detail }) + .then(closeModal) + .catch(toastFinally); + } + + function deleteCharacter() { + confirmDeletion('Character', character.name, () => { + deleteCharacters(client, { ids: character.id }).then(closeModal).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> + </CharacterForm> +</Dialog> diff --git a/frontend/src/lib/dialogs/EditCircle.svelte b/frontend/src/lib/dialogs/EditCircle.svelte new file mode 100644 index 0000000..bdc1217 --- /dev/null +++ b/frontend/src/lib/dialogs/EditCircle.svelte @@ -0,0 +1,46 @@ +<script lang="ts"> + import { deleteCircles, updateCircles, type CircleInput } from '$gql/Mutations'; + import { itemEquals } from '$gql/Utils'; + import { type Circle } 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'; + + const client = getContextClient(); + + export let isOpen: boolean; + + export let circle: Circle; + const original = structuredClone(circle); + $: pending = !itemEquals(original, circle); + + function save(event: CustomEvent<CircleInput>) { + updateCircles(client, { ids: circle.id, input: event.detail }) + .then(closeModal) + .catch(toastFinally); + } + + function deleteCircle() { + confirmDeletion('Circle', circle.name, () => { + deleteCircles(client, { ids: circle.id }).then(closeModal).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> + </CircleForm> +</Dialog> diff --git a/frontend/src/lib/dialogs/EditNamespace.svelte b/frontend/src/lib/dialogs/EditNamespace.svelte new file mode 100644 index 0000000..f398b21 --- /dev/null +++ b/frontend/src/lib/dialogs/EditNamespace.svelte @@ -0,0 +1,46 @@ +<script lang="ts"> + import { deleteNamespaces, updateNamespaces, type NamespaceInput } from '$gql/Mutations'; + import { itemEquals } from '$gql/Utils'; + import { type Namespace } 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'; + + const client = getContextClient(); + + export let isOpen: boolean; + + export let namespace: Namespace; + const original = structuredClone(namespace); + $: pending = !itemEquals(original, namespace); + + function save(event: CustomEvent<NamespaceInput>) { + updateNamespaces(client, { ids: namespace.id, input: event.detail }) + .then(closeModal) + .catch(toastFinally); + } + + function deleteNamespace() { + confirmDeletion('Namespace', namespace.name, () => { + deleteNamespaces(client, { ids: namespace.id }).then(closeModal).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> + </NamespaceForm> +</Dialog> diff --git a/frontend/src/lib/dialogs/EditTag.svelte b/frontend/src/lib/dialogs/EditTag.svelte new file mode 100644 index 0000000..d2d0013 --- /dev/null +++ b/frontend/src/lib/dialogs/EditTag.svelte @@ -0,0 +1,44 @@ +<script lang="ts"> + import { deleteTags, updateTags, type TagInput } from '$gql/Mutations'; + import { tagEquals } from '$gql/Utils'; + import { type FullTag } 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'; + + const client = getContextClient(); + + export let isOpen: boolean; + + export let tag: FullTag; + const original = structuredClone(tag); + $: pending = !tagEquals(original, tag); + + function save(event: CustomEvent<TagInput>) { + updateTags(client, { ids: tag.id, input: event.detail }).then(closeModal).catch(toastFinally); + } + + function deleteTag() { + confirmDeletion('Tag', tag.name, () => { + deleteTags(client, { ids: tag.id }).then(closeModal).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> + </TagForm> +</Dialog> diff --git a/frontend/src/lib/dialogs/EditWorld.svelte b/frontend/src/lib/dialogs/EditWorld.svelte new file mode 100644 index 0000000..82afe6a --- /dev/null +++ b/frontend/src/lib/dialogs/EditWorld.svelte @@ -0,0 +1,46 @@ +<script lang="ts"> + import { type World } from '$gql/graphql'; + import { deleteWorlds, updateWorlds, type WorldInput } from '$gql/Mutations'; + import { itemEquals } from '$gql/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'; + + const client = getContextClient(); + + export let isOpen: boolean; + + export let world: World; + const original = structuredClone(world); + $: pending = !itemEquals(original, world); + + function save(event: CustomEvent<WorldInput>) { + updateWorlds(client, { ids: world.id, input: event.detail }) + .then(closeModal) + .catch(toastFinally); + } + + function deleteWorld() { + confirmDeletion('World', world.name, () => { + deleteWorlds(client, { ids: world.id }).then(closeModal).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> + </WorldForm> +</Dialog> diff --git a/frontend/src/lib/dialogs/UpdateComics.svelte b/frontend/src/lib/dialogs/UpdateComics.svelte new file mode 100644 index 0000000..8de9622 --- /dev/null +++ b/frontend/src/lib/dialogs/UpdateComics.svelte @@ -0,0 +1,96 @@ +<script lang="ts"> + import { updateComics } from '$gql/Mutations'; + 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 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 UpdateModeSelector from './components/UpdateModeSelector.svelte'; + + const client = getContextClient(); + + export let isOpen: boolean; + export let ids: number[]; + + $: 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; + + const controls = new UpdateComicsControls(); + + const update = () => { + updateComics(client, { + ids: ids, + input: controls.toInput() + }) + .then(closeModal) + .catch(toastFinally); + }; +</script> + +<Dialog {isOpen}> + <svelte:fragment slot="header"> + <h2>Edit Comics</h2> + </svelte:fragment> + <form on:submit|preventDefault={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> + </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> + <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> + <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> + <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> + <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> + + <div class="flex justify-end gap-4"> + <SubmitButton active={controls.hasInput()} /> + </div> + </form> +</Dialog> diff --git a/frontend/src/lib/dialogs/UpdateTags.svelte b/frontend/src/lib/dialogs/UpdateTags.svelte new file mode 100644 index 0000000..f753c7f --- /dev/null +++ b/frontend/src/lib/dialogs/UpdateTags.svelte @@ -0,0 +1,45 @@ +<script lang="ts"> + import { updateTags } from '$gql/Mutations'; + import { namespaceList } from '$gql/Queries'; + import { toastFinally } from '$lib/Toasts'; + import { UpdateTagsControls } from '$lib/Update'; + 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 UpdateModeSelector from './components/UpdateModeSelector.svelte'; + + const client = getContextClient(); + + $: namespaceQuery = namespaceList(client); + $: namespaces = $namespaceQuery.data?.namespaces.edges; + + export let isOpen: boolean; + export let ids: number[]; + + const controls = new UpdateTagsControls(); + + const update = () => { + updateTags(client, { ids: ids, input: controls.toInput() }) + .then(closeModal) + .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" /> + </LabelledBlock> + + <div class="flex justify-end gap-4"> + <SubmitButton active={controls.hasInput()} /> + </div> + </form> +</Dialog> diff --git a/frontend/src/lib/dialogs/components/UpdateModeSelector.svelte b/frontend/src/lib/dialogs/components/UpdateModeSelector.svelte new file mode 100644 index 0000000..e4b4479 --- /dev/null +++ b/frontend/src/lib/dialogs/components/UpdateModeSelector.svelte @@ -0,0 +1,24 @@ +<script lang="ts"> + import { UpdateMode } from '$gql/graphql'; + import { UpdateModeLabel } from '$lib/Enums'; + + export let mode: UpdateMode; + + function select(e: string) { + mode = e as UpdateMode; + } +</script> + +<div class="flex gap-1 pb-1 text-xs"> + {#each Object.entries(UpdateModeLabel) as [e, label]} + <button + type="button" + 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)} + > + {label} + </button> + {/each} +</div> diff --git a/frontend/src/lib/filter/ComicFilterForm.svelte b/frontend/src/lib/filter/ComicFilterForm.svelte new file mode 100644 index 0000000..13b5320 --- /dev/null +++ b/frontend/src/lib/filter/ComicFilterForm.svelte @@ -0,0 +1,48 @@ +<script lang="ts"> + import { page } from '$app/stores'; + import { artistList, characterList, circleList, comicTagList, worldList } from '$gql/Queries'; + import { ComicFilterContext, getFilterContext } from '$lib/Filter'; + import { getContextClient } from '@urql/svelte'; + import ComicFilterGroup from './components/ComicFilterGroup.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); + + $: 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; + + const filter = getFilterContext<ComicFilterContext>(); + const apply = () => $filter.apply($page.url.searchParams); +</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> diff --git a/frontend/src/lib/filter/TagFilterForm.svelte b/frontend/src/lib/filter/TagFilterForm.svelte new file mode 100644 index 0000000..be5996e --- /dev/null +++ b/frontend/src/lib/filter/TagFilterForm.svelte @@ -0,0 +1,31 @@ +<script lang="ts"> + import { page } from '$app/stores'; + import { namespaceList } from '$gql/Queries'; + import { TagFilterContext, getFilterContext } from '$lib/Filter'; + import { getContextClient } from '@urql/svelte'; + import FilterForm from './components/FilterForm.svelte'; + import TagFilterGroup from './components/TagFilterGroup.svelte'; + + const client = getContextClient(); + + $: namespaceQuery = namespaceList(client); + $: namespaces = $namespaceQuery.data?.namespaces.edges; + + const filter = getFilterContext<TagFilterContext>(); + const apply = () => $filter.apply($page.url.searchParams); +</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> diff --git a/frontend/src/lib/filter/components/ComicFilterGroup.svelte b/frontend/src/lib/filter/components/ComicFilterGroup.svelte new file mode 100644 index 0000000..d302de4 --- /dev/null +++ b/frontend/src/lib/filter/components/ComicFilterGroup.svelte @@ -0,0 +1,27 @@ +<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 new file mode 100644 index 0000000..ead5c4d --- /dev/null +++ b/frontend/src/lib/filter/components/Filter.svelte @@ -0,0 +1,77 @@ +<script lang="ts"> + import { Association, Enum } from '$lib/Filter'; + 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'; + + const id = `${context}-${title.toLowerCase()}`; + + export let options: ListItem[] | undefined; + export let filter: Association<string> | Enum<string>; +</script> + +<div class:exclude class="filter-container"> + <div class="flex gap-2"> + <label for={id}>{title}</label> + <div class="ml-auto flex items-center gap-1 self-center text-xs"> + {#if filter instanceof Association} + <button + type="button" + title="matches all" + class:active={filter.mode === 'all'} + class="btn btn-xs" + on:click={() => (filter.mode = 'all')} + > + ∀ + </button> + <button + type="button" + title="matches any of" + class:active={filter.mode === 'any'} + class="btn btn-xs" + on:click={() => (filter.mode = 'any')} + > + ∃ + </button> + <button + type="button" + title="matches exactly" + class:active={filter.mode === 'exact'} + class="btn btn-xs" + on:click={() => (filter.mode = 'exact')} + > + = + </button> + <hr class="border-px border-slate-600" /> + {/if} + <button + type="button" + title="empty" + class:active={filter.empty} + class="btn btn-xs" + on:click={() => (filter.empty = !filter.empty)} + > + ∅ + </button> + </div> + </div> + <Select multi clearable {options} {id} bind:value={filter.values} /> +</div> + +<style lang="postcss"> + button:hover { + @apply bg-slate-700; + } + + button.active { + @apply bg-indigo-800; + } + + .filter-container { + grid-column: var(--grid-column); + } +</style> diff --git a/frontend/src/lib/filter/components/FilterForm.svelte b/frontend/src/lib/filter/components/FilterForm.svelte new file mode 100644 index 0000000..6fc4c90 --- /dev/null +++ b/frontend/src/lib/filter/components/FilterForm.svelte @@ -0,0 +1,47 @@ +<script lang="ts"> + import Expander from '$lib/components/Expander.svelte'; + import { getFilterContext } from '$lib/Filter'; + + const filter = getFilterContext(); + export let type: 'grid' | 'row' = 'row'; + + let exclude = false; + + $: if ($filter.exclude.size > 0) { + exclude = true; + } +</script> + +<form on:submit|preventDefault 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" /> + </div> + <div class="my-2 flex justify-start"> + <Expander title="Exclude" bind:expanded={exclude} /> + </div> + {#if exclude} + <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" /> + </div> + {/if} + {:else} + <div + 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" /> + </div> + <div class="bg-rose-950/50 p-2"> + <slot name="exclude" /> + </div> + </div> + {/if} + <div class=" mt-4 flex items-center"> + <hr class="flex-1 border-slate-700/70" /> + <button type="submit" class="btn-blue mx-2">Apply</button> + <hr class="flex-1 border-slate-700/70" /> + </div> +</form> diff --git a/frontend/src/lib/filter/components/TagFilterGroup.svelte b/frontend/src/lib/filter/components/TagFilterGroup.svelte new file mode 100644 index 0000000..83b6997 --- /dev/null +++ b/frontend/src/lib/filter/components/TagFilterGroup.svelte @@ -0,0 +1,14 @@ +<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 new file mode 100644 index 0000000..7df5e8b --- /dev/null +++ b/frontend/src/lib/forms/ArtistForm.svelte @@ -0,0 +1,25 @@ +<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'; + + const dispatch = createEventDispatcher<{ submit: ArtistInput }>(); + + export let artist: OmitIdentifiers<Artist>; + + function submit() { + dispatch('submit', { name: artist.name }); + } +</script> + +<form on:submit|preventDefault={submit}> + <div class="grid-labels"> + <Labelled label="Name" let:id> + <!-- svelte-ignore a11y-autofocus --> + <input autofocus required {id} bind:value={artist.name} /> + </Labelled> + </div> + <slot /> +</form> diff --git a/frontend/src/lib/forms/CharacterForm.svelte b/frontend/src/lib/forms/CharacterForm.svelte new file mode 100644 index 0000000..4cec37c --- /dev/null +++ b/frontend/src/lib/forms/CharacterForm.svelte @@ -0,0 +1,25 @@ +<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'; + + const dispatch = createEventDispatcher<{ submit: CharacterInput }>(); + + export let character: OmitIdentifiers<Character>; + + function submit() { + dispatch('submit', { name: character.name }); + } +</script> + +<form on:submit|preventDefault={submit}> + <div class="grid-labels"> + <Labelled label="Name" let:id> + <!-- svelte-ignore a11y-autofocus --> + <input autofocus required {id} bind:value={character.name} /> + </Labelled> + </div> + <slot /> +</form> diff --git a/frontend/src/lib/forms/CircleForm.svelte b/frontend/src/lib/forms/CircleForm.svelte new file mode 100644 index 0000000..b71256c --- /dev/null +++ b/frontend/src/lib/forms/CircleForm.svelte @@ -0,0 +1,25 @@ +<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'; + + const dispatch = createEventDispatcher<{ submit: CircleInput }>(); + + export let circle: OmitIdentifiers<Circle>; + + function submit() { + dispatch('submit', { name: circle.name }); + } +</script> + +<form on:submit|preventDefault={submit}> + <div class="grid-labels"> + <Labelled label="Name" let:id> + <!-- svelte-ignore a11y-autofocus --> + <input required autofocus {id} bind:value={circle.name} /> + </Labelled> + </div> + <slot /> +</form> diff --git a/frontend/src/lib/forms/ComicForm.svelte b/frontend/src/lib/forms/ComicForm.svelte new file mode 100644 index 0000000..74051c8 --- /dev/null +++ b/frontend/src/lib/forms/ComicForm.svelte @@ -0,0 +1,100 @@ +<script lang="ts"> + import { artistList, characterList, circleList, comicTagList, worldList } from '$gql/Queries'; + 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'; + + 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) } + }); + } +</script> + +<form on:submit|preventDefault={submit}> + <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> + </div> + + <LabelledBlock label="Artists" let:id> + <Select multi object {id} options={artists} bind:value={comic.artists} /> + </LabelledBlock> + <LabelledBlock label="Circles" let:id> + <Select multi object {id} options={circles} bind:value={comic.circles} /> + </LabelledBlock> + <LabelledBlock label="Characters" let:id> + <Select multi object {id} options={characters} bind:value={comic.characters} /> + </LabelledBlock> + <LabelledBlock label="Worlds" let:id> + <Select multi object {id} options={worlds} bind:value={comic.worlds} /> + </LabelledBlock> + <LabelledBlock label="Tags" let:id> + <Select multi object {id} options={tags} bind:value={comic.tags} /> + </LabelledBlock> + <slot /> +</form> diff --git a/frontend/src/lib/forms/NamespaceForm.svelte b/frontend/src/lib/forms/NamespaceForm.svelte new file mode 100644 index 0000000..c05b6d8 --- /dev/null +++ b/frontend/src/lib/forms/NamespaceForm.svelte @@ -0,0 +1,28 @@ +<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'; + + const dispatch = createEventDispatcher<{ submit: NamespaceInput }>(); + + export let namespace: OmitIdentifiers<Namespace>; + + function submit() { + dispatch('submit', { name: namespace.name, sortName: namespace.sortName }); + } +</script> + +<form on:submit|preventDefault={submit}> + <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> + </div> + <slot /> +</form> diff --git a/frontend/src/lib/forms/TagForm.svelte b/frontend/src/lib/forms/TagForm.svelte new file mode 100644 index 0000000..6cc2227 --- /dev/null +++ b/frontend/src/lib/forms/TagForm.svelte @@ -0,0 +1,42 @@ +<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 Select from '$lib/components/Select.svelte'; + import { getContextClient } from '@urql/svelte'; + import { createEventDispatcher } from 'svelte'; + + const client = getContextClient(); + const dispatch = createEventDispatcher<{ submit: TagInput }>(); + + export let tag: OmitIdentifiers<FullTag>; + + $: namespaceQuery = namespaceList(client); + $: namespaces = $namespaceQuery.data?.namespaces.edges; + + function submit() { + dispatch('submit', { + name: tag.name, + description: tag.description, + namespaces: { ids: tag.namespaces.map((n) => n.id) } + }); + } +</script> + +<form on:submit|preventDefault={submit}> + <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> + </div> + <slot /> +</form> diff --git a/frontend/src/lib/forms/WorldForm.svelte b/frontend/src/lib/forms/WorldForm.svelte new file mode 100644 index 0000000..103dd5b --- /dev/null +++ b/frontend/src/lib/forms/WorldForm.svelte @@ -0,0 +1,25 @@ +<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'; + + const dispatch = createEventDispatcher<{ submit: WorldInput }>(); + + export let world: OmitIdentifiers<World>; + + function submit() { + dispatch('submit', { name: world.name }); + } +</script> + +<form on:submit|preventDefault={submit}> + <div class="grid-labels"> + <Labelled label="Name" let:id> + <!-- svelte-ignore a11y-autofocus --> + <input autofocus required {id} bind:value={world.name} /> + </Labelled> + </div> + <slot /> +</form> diff --git a/frontend/src/lib/gallery/Gallery.svelte b/frontend/src/lib/gallery/Gallery.svelte new file mode 100644 index 0000000..c3b6386 --- /dev/null +++ b/frontend/src/lib/gallery/Gallery.svelte @@ -0,0 +1,42 @@ +<script lang="ts"> + import type { PageFragment } from '$gql/graphql'; + import GalleryPage from './GalleryPage.svelte'; + + export let pages: PageFragment[]; +</script> + +<div class="max-h-full gap-2 overflow-auto p-1 pr-3"> + {#each pages as page, index} + <GalleryPage {page} {index} on:open on:cover /> + {/each} +</div> + +<style> + :root { + --gallery-image-size: 100px; + } + + @media (min-width: 1280px) { + :root { + --gallery-image-size: 180px; + } + } + + @media (min-width: 1600px) { + :root { + --gallery-image-size: 200px; + } + } + + @media (min-width: 1920px) { + :root { + --gallery-image-size: 240px; + } + } + + div { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(var(--gallery-image-size), 1fr)); + grid-auto-rows: fit-content(400px); + } +</style> diff --git a/frontend/src/lib/gallery/GalleryPage.svelte b/frontend/src/lib/gallery/GalleryPage.svelte new file mode 100644 index 0000000..449321c --- /dev/null +++ b/frontend/src/lib/gallery/GalleryPage.svelte @@ -0,0 +1,93 @@ +<script lang="ts"> + import type { PageFragment } from '$gql/graphql'; + import { getSelectionContext } from '$lib/Selection'; + 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>(); + + let span: 'single' | 'double' | 'triple'; + + $: page.image.aspectRatio, updateSpan(); + + function updateSpan() { + const aspectRatio = page.image.aspectRatio; + + if (aspectRatio <= 1) { + span = 'single'; + } else if (aspectRatio > 1 && aspectRatio <= 2) { + span = 'double'; + } else if (aspectRatio > 2) { + span = '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 (event.ctrlKey) { + dispatch('open', index); + } else if (selectable) { + $selection = $selection.update(index, event.shiftKey); + } + } else if (event.ctrlKey) { + dispatch('cover', page.id); + } else { + dispatch('open', index); + } + + event.preventDefault(); + } + + $: selectable = $selection.selectable(page); + $: dim = $selection.active && !selectable; + $: selected = $selection.contains(page.id); +</script> + +<div + class:dim + role="button" + tabindex="0" + class="{span} relative overflow-hidden rounded" + on:click={press} + on:keydown={press} +> + <SelectionOverlay position="top" {selected} /> + <img + class="h-full w-full object-cover object-[center_top] transition-opacity" + loading="lazy" + alt="" + width={page.image.width} + height={page.image.height} + src={src(page.image)} + title={`${page.path} (${page.image.width} x ${page.image.height})`} + /> +</div> + +<style> + .dim { + cursor: not-allowed; + } + + .dim > img { + opacity: 0.2; + filter: grayscale(1); + } + + .double { + grid-column: span 2; + } + + .triple { + grid-column: span 3; + } +</style> diff --git a/frontend/src/lib/icons/Bookmark.svelte b/frontend/src/lib/icons/Bookmark.svelte new file mode 100644 index 0000000..6f8e192 --- /dev/null +++ b/frontend/src/lib/icons/Bookmark.svelte @@ -0,0 +1,10 @@ +<script lang="ts"> + export let bookmarked: boolean | undefined = undefined; + export let hoverable = false; +</script> + +{#if bookmarked} + <span class:hoverable class="icon-gray icon-base icon-[material-symbols--bookmark]" /> +{:else} + <span class:hoverable class="icon-gray icon-base dim icon-[material-symbols--bookmark-outline]" /> +{/if} diff --git a/frontend/src/lib/icons/Female.svelte b/frontend/src/lib/icons/Female.svelte new file mode 100644 index 0000000..c772a6a --- /dev/null +++ b/frontend/src/lib/icons/Female.svelte @@ -0,0 +1 @@ +<span class="icon-xs icon-[material-symbols--female] -mx-[3px]" /> diff --git a/frontend/src/lib/icons/Location.svelte b/frontend/src/lib/icons/Location.svelte new file mode 100644 index 0000000..e345f83 --- /dev/null +++ b/frontend/src/lib/icons/Location.svelte @@ -0,0 +1 @@ +<span class="icon-xs icon-[material-symbols--location-on-outline]" /> diff --git a/frontend/src/lib/icons/Male.svelte b/frontend/src/lib/icons/Male.svelte new file mode 100644 index 0000000..e3578b7 --- /dev/null +++ b/frontend/src/lib/icons/Male.svelte @@ -0,0 +1 @@ +<span class="icon-xs icon-[material-symbols--male] -mx-px" /> diff --git a/frontend/src/lib/icons/Organized.svelte b/frontend/src/lib/icons/Organized.svelte new file mode 100644 index 0000000..66b5b00 --- /dev/null +++ b/frontend/src/lib/icons/Organized.svelte @@ -0,0 +1,21 @@ +<script lang="ts"> + export let organized: boolean | undefined = undefined; + export let hoverable = false; + export let tristate = false; + export let dim = false; +</script> + +{#if organized} + <span class:hoverable class="icon-gray icon-base icon-[material-symbols--check-circle]" /> +{:else if organized === undefined || !tristate} + <span + class:hoverable + class="icon-gray dim icon-base icon-[material-symbols--check-circle-outline]" + /> +{:else} + <span + class:hoverable + class:dim + class="icon-gray icon-base icon-[material-symbols--unpublished]" + /> +{/if} diff --git a/frontend/src/lib/icons/Star.svelte b/frontend/src/lib/icons/Star.svelte new file mode 100644 index 0000000..7613c55 --- /dev/null +++ b/frontend/src/lib/icons/Star.svelte @@ -0,0 +1,25 @@ +<script lang="ts"> + export let large = false; + export let favourite: boolean | undefined = undefined; + export let hoverable = false; +</script> + +{#if favourite} + <span class:hoverable class:large class="icon-yellow icon-[material-symbols--star-rounded]" /> +{:else} + <span + class:hoverable + class:large + class="icon-yellow dim icon-[material-symbols--star-outline-rounded]" + /> +{/if} + +<style lang="postcss"> + span { + @apply -m-px -translate-y-px text-[26px]; + } + + span.large { + @apply text-[34px]; + } +</style> diff --git a/frontend/src/lib/icons/Transgender.svelte b/frontend/src/lib/icons/Transgender.svelte new file mode 100644 index 0000000..7d9adc6 --- /dev/null +++ b/frontend/src/lib/icons/Transgender.svelte @@ -0,0 +1 @@ +<span class="icon-xs icon-[material-symbols--transgender]" /> diff --git a/frontend/src/lib/navigation/Link.svelte b/frontend/src/lib/navigation/Link.svelte new file mode 100644 index 0000000..7297a69 --- /dev/null +++ b/frontend/src/lib/navigation/Link.svelte @@ -0,0 +1,20 @@ +<script lang="ts"> + import { page } from '$app/stores'; + import { accelerator, type Shortcut } from '$lib/Shortcuts'; + import type { HTMLAttributeAnchorTarget } 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); +</script> + +<li class:active class="items-center hover:bg-indigo-700 [&.active]:bg-indigo-700"> + <a class="flex items-center" {target} {title} {href} use:accelerator={accel}> + <div class="flex p-3"> + <slot /> + </div> + </a> +</li> diff --git a/frontend/src/lib/navigation/Navigation.svelte b/frontend/src/lib/navigation/Navigation.svelte new file mode 100644 index 0000000..76096c8 --- /dev/null +++ b/frontend/src/lib/navigation/Navigation.svelte @@ -0,0 +1,5 @@ +<nav> + <ul class="flex h-full flex-col bg-slate-700/70 font-medium"> + <slot /> + </ul> +</nav> diff --git a/frontend/src/lib/pagination/Pagination.svelte b/frontend/src/lib/pagination/Pagination.svelte new file mode 100644 index 0000000..51612f4 --- /dev/null +++ b/frontend/src/lib/pagination/Pagination.svelte @@ -0,0 +1,45 @@ +<script lang="ts"> + import { getPaginationContext } from '$lib/Pagination'; + import Target from './Target.svelte'; + + const pagination = getPaginationContext(); + export let context = 2; + + $: totalPages = Math.ceil($pagination.total / $pagination.items); + $: rightBoundary = $pagination.page - context; + $: leftBoundary = $pagination.page + context; + + $: shiftRight = leftBoundary - totalPages; + $: shiftLeft = 1 - rightBoundary; + + $: containedLeft = leftBoundary <= totalPages; + $: containedRight = rightBoundary > 0; + + $: start = Math.max(1, containedLeft ? rightBoundary : rightBoundary - shiftRight); + $: end = Math.min(totalPages, containedRight ? leftBoundary : leftBoundary + shiftLeft); + + $: leftmost = $pagination.page <= 1; + $: rightmost = $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> + <Target disabled={leftmost} page={$pagination.page - 1}> + <span class="icon-base icon-[material-symbols--keyboard-arrow-left]" /> + </Target> + {#each Array.from({ length: end + 1 - start }, (_, i) => i + start) as page} + <Target active={$pagination.page === page} {page}> + <p>{page.toString()}</p> + </Target> + {/each} + <Target disabled={rightmost} page={$pagination.page + 1}> + <span class="icon-base icon-[material-symbols--keyboard-arrow-right]" /> + </Target> + <Target disabled={rightmost} page={totalPages}> + <span class="icon-base icon-[material-symbols--keyboard-double-arrow-right]" /> + </Target> + </div> +{/if} diff --git a/frontend/src/lib/pagination/Target.svelte b/frontend/src/lib/pagination/Target.svelte new file mode 100644 index 0000000..9044bb9 --- /dev/null +++ b/frontend/src/lib/pagination/Target.svelte @@ -0,0 +1,21 @@ +<script lang="ts"> + import { page as pageStore } from '$app/stores'; + import { navigate } from '$lib/Navigation'; + + export let active = false; + + export let disabled = false; + export let page: number; +</script> + +<button + on:click={() => { + navigate({ pagination: { page: page } }, $pageStore.url.searchParams); + }} + 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 /> +</button> diff --git a/frontend/src/lib/pills/AssociationPill.svelte b/frontend/src/lib/pills/AssociationPill.svelte new file mode 100644 index 0000000..85dbe39 --- /dev/null +++ b/frontend/src/lib/pills/AssociationPill.svelte @@ -0,0 +1,30 @@ +<script lang="ts"> + import Pill from './Pill.svelte'; + + type Association = 'artist' | 'circle' | 'world' | 'character'; + + export let name: string; + export let type: Association; +</script> + +<Pill {name}> + <span class={`${type} icon-xs`} slot="icon" /> +</Pill> + +<style lang="postcss"> + .artist { + @apply icon-[material-symbols--person] -mx-px; + } + + .character { + @apply icon-[material-symbols--face]; + } + + .circle { + @apply icon-[material-symbols--group] mx-px; + } + + .world { + @apply icon-[material-symbols--public]; + } +</style> diff --git a/frontend/src/lib/pills/ComicPills.svelte b/frontend/src/lib/pills/ComicPills.svelte new file mode 100644 index 0000000..671bbf2 --- /dev/null +++ b/frontend/src/lib/pills/ComicPills.svelte @@ -0,0 +1,37 @@ +<script lang="ts"> + import type { ComicFragment } from '$gql/graphql'; + import AssociationPill from '$lib/pills/AssociationPill.svelte'; + import TagPill from '$lib/pills/TagPill.svelte'; + + export let comic: ComicFragment; +</script> + +<div class="flex flex-col gap-1"> + {#if comic.artists.length || comic.circles.length} + <div class="flex flex-wrap gap-1"> + {#each comic.artists as { name } (name)} + <AssociationPill {name} type="artist" /> + {/each} + {#each comic.circles as { name } (name)} + <AssociationPill {name} type="circle" /> + {/each} + </div> + {/if} + {#if comic.characters.length || comic.worlds.length} + <div class="flex flex-wrap gap-1"> + {#each comic.worlds as { name } (name)} + <AssociationPill {name} type="world" /> + {/each} + {#each comic.characters as { name } (name)} + <AssociationPill {name} type="character" /> + {/each} + </div> + {/if} + {#if comic.tags.length} + <div class="flex flex-wrap gap-1"> + {#each comic.tags as { name, description } (name)} + <TagPill {name} {description} /> + {/each} + </div> + {/if} +</div> diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte new file mode 100644 index 0000000..7aa9670 --- /dev/null +++ b/frontend/src/lib/pills/Pill.svelte @@ -0,0 +1,40 @@ +<script lang="ts" context="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'; +</script> + +<div class="flex items-center rounded border p-0.5 {colour}" title={tooltip}> + <slot name="icon" /> + <span>{name}</span> +</div> + +<style lang="postcss"> + .pink { + @apply border-pink-800 bg-pink-800/20 text-pink-200; + } + + .blue { + @apply border-blue-800 bg-blue-800/20 text-blue-200; + } + + .violet { + @apply border-violet-800 bg-violet-800/20 text-violet-200; + } + + .amber { + @apply border-amber-800 bg-amber-800/20 text-amber-200; + } + + .sky { + @apply border-sky-800 bg-sky-800/20 text-sky-200; + } + + .zinc { + @apply border-zinc-700 bg-zinc-700/20 text-zinc-300; + } +</style> diff --git a/frontend/src/lib/pills/TagPill.svelte b/frontend/src/lib/pills/TagPill.svelte new file mode 100644 index 0000000..60221bd --- /dev/null +++ b/frontend/src/lib/pills/TagPill.svelte @@ -0,0 +1,40 @@ +<script lang="ts"> + import Female from '$lib/icons/Female.svelte'; + 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 Pill, { type PillColour } from './Pill.svelte'; + + export let name: string; + export let description: string | undefined | null = undefined; + + let [namespace, tag] = name.split(':'); + + const styles: Record<string, PillColour> = { + female: 'pink', + male: 'blue', + trans: 'violet', + mixed: 'amber', + location: 'sky', + rest: 'zinc' + }; + + const icons: Record<string, typeof SvelteComponent<Record<string, unknown>>> = { + female: Female, + male: Male, + trans: Transgender, + location: Location + }; + + const colour = styles[namespace] ?? styles.rest; + const icon = icons[namespace]; + + function formatTooltip() { + return [name, description].filter((v) => v).join('\n\n'); + } +</script> + +<Pill name={tag} tooltip={formatTooltip()} {colour}> + <svelte:component this={icon} slot="icon" /> +</Pill> diff --git a/frontend/src/lib/reader/PageView.svelte b/frontend/src/lib/reader/PageView.svelte new file mode 100644 index 0000000..cc4d10e --- /dev/null +++ b/frontend/src/lib/reader/PageView.svelte @@ -0,0 +1,67 @@ +<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 ReaderPage from './ReaderPage.svelte'; + + const reader = getReaderContext(); + + export let direction: Direction; + export let layout: Layout; + + let chunks: Chunk[] = []; + let lookup: number[] = []; + + let main: PageFragment; + let secondary: PageFragment | undefined; + + function gotoChunk(to: number) { + if (to < 0 || to >= chunks.length) return; + + $reader.page = chunks[to].index; + } + + 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()); + + function clickMain(event: MouseEvent & { currentTarget: EventTarget | null }) { + if (event.currentTarget instanceof Element) { + const rect = event.currentTarget.getBoundingClientRect(); + + if (event.clientX - rect.left < rect.width / 2) { + clickLeft(); + } else { + clickRight(); + } + } + } + + $: [chunks, lookup] = partition($reader.pages, layout); + $: layout, ({ main, secondary } = chunks[lookup[$reader.page]]); +</script> + +<svelte:document + use:binds={[ + ['ArrowLeft', clickLeft], + ['ArrowRight', clickRight], + ['ArrowUp', prev], + ['ArrowDown', next], + ['PageUp', prev], + ['PageDown', next], + [' ', next], + ['Backspace', prev] + ]} +/> + +{#if !secondary} + <ReaderPage page={main} on:click={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" /> +{:else} + <ReaderPage page={secondary} on:click={next} --justify="flex-end" /> + <ReaderPage page={main} on:click={prev} --justify="flex-start" /> +{/if} diff --git a/frontend/src/lib/reader/Reader.svelte b/frontend/src/lib/reader/Reader.svelte new file mode 100644 index 0000000..0b1450a --- /dev/null +++ b/frontend/src/lib/reader/Reader.svelte @@ -0,0 +1,39 @@ +<script lang="ts"> + import { trapFocus } from '$lib/Actions'; + import { getReaderContext } from '$lib/Reader'; + import { fadeDefault, slideXDefault } from '$lib/Transitions'; + import { fade, slide } from 'svelte/transition'; + import CloseReaderButton from './components/CloseReaderButton.svelte'; + import ReaderMenuButton from './components/ReaderMenuButton.svelte'; + + const reader = getReaderContext(); +</script> + +{#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} + <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" /> + </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} + <ReaderMenuButton /> + {/if} + <CloseReaderButton /> + </div> + + <div class="flex grow"> + <slot /> + </div> + </main> + </div> +{/if} diff --git a/frontend/src/lib/reader/ReaderPage.svelte b/frontend/src/lib/reader/ReaderPage.svelte new file mode 100644 index 0000000..fb3e780 --- /dev/null +++ b/frontend/src/lib/reader/ReaderPage.svelte @@ -0,0 +1,24 @@ +<script lang="ts"> + import type { PageFragment } from '$gql/graphql'; + import { src } from '$lib/Utils'; + + export let page: PageFragment; +</script> + +<!-- svelte-ignore a11y-click-events-have-key-events --> +<!-- svelte-ignore a11y-no-static-element-interactions --> +<div class="flex grow" on:click> + <img + class="h-auto w-auto object-contain" + width={page.image.width} + height={page.image.height} + src={src(page.image, 'full')} + alt={page.path} + /> +</div> + +<style> + div { + justify-content: var(--justify); + } +</style> diff --git a/frontend/src/lib/reader/components/CloseReaderButton.svelte b/frontend/src/lib/reader/components/CloseReaderButton.svelte new file mode 100644 index 0000000..0c88323 --- /dev/null +++ b/frontend/src/lib/reader/components/CloseReaderButton.svelte @@ -0,0 +1,19 @@ +<script lang="ts"> + import { getReaderContext } from '$lib/Reader'; + import { accelerator } from '$lib/Shortcuts'; + + const reader = getReaderContext(); +</script> + +<button + type="button" + class="btn floating" + title="Close reader" + on:click={() => { + $reader.visible = false; + $reader.sidebar = false; + }} + use:accelerator={'Escape'} +> + <span class="icon-lg icon-[material-symbols--close]" /> +</button> diff --git a/frontend/src/lib/reader/components/ReaderMenuButton.svelte b/frontend/src/lib/reader/components/ReaderMenuButton.svelte new file mode 100644 index 0000000..aa20206 --- /dev/null +++ b/frontend/src/lib/reader/components/ReaderMenuButton.svelte @@ -0,0 +1,16 @@ +<script lang="ts"> + import { getReaderContext } from '$lib/Reader'; + import { accelerator } from '$lib/Shortcuts'; + + const reader = getReaderContext(); +</script> + +<button + type="button" + class="btn floating invisible xl:visible" + title={`${$reader.sidebar ? 'Hide' : 'Show'} menu`} + on:click={() => ($reader.sidebar = !$reader.sidebar)} + use:accelerator={'z'} +> + <span class="icon-lg icon-[material-symbols--dock-to-right]" /> +</button> diff --git a/frontend/src/lib/scraper/ComicScrapeForm.svelte b/frontend/src/lib/scraper/ComicScrapeForm.svelte new file mode 100644 index 0000000..30ad89b --- /dev/null +++ b/frontend/src/lib/scraper/ComicScrapeForm.svelte @@ -0,0 +1,138 @@ +<script lang="ts"> + 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 { 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 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; + + $: scrapersResult = comicScrapersQuery(client, { id: comic.id }); + $: scrapers = $scrapersResult.data?.comicScrapers; + + function scrape() { + loading = true; + scrapeComic(client, { id: comic.id, scraper: $context.scraper }) + .then((result) => { + 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; + } + } + }) + .catch(toastFinally) + .finally(() => (loading = false)); + } + + function updateFromScrape(createMissing: boolean) { + if (!$context.selector) return; + + upsertComics(client, { + ids: comic.id, + input: $context.selector.toInput(createMissing ? OnMissing.Create : OnMissing.Ignore) + }) + .then(() => { + $context.selector = undefined; + $context.warnings = []; + }) + .catch(toastFinally); + } +</script> + +<div class="flex flex-col gap-4 text-sm"> + {#if scrapers && scrapers.length === 0} + <h2 class="text-base">No scrapers available.</h2> + {:else} + <form on:submit|preventDefault={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} + /> + </div> + <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} + <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} + <li>{warning}</li> + {/each} + </ul> + </div> + {/if} + {#if !$context.selector.hasData()} + <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)}> + <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} /> + </div> + <div class="flex flex-col gap-2"> + <h2 class="border-b border-slate-700 text-base font-medium">Options</h2> + <div class="flex items-center gap-1"> + <input + class="h-4 w-4" + type="checkbox" + id="create-missing" + bind:checked={createMissing} + /> + <label class="shrink-0" for="create-missing">Create missing items</label> + </div> + </div> + <div class="flex gap-4"> + <button type="submit" class="btn-blue">Merge</button> + </div> + </form> + </div> + {/if} + {/if} +</div> diff --git a/frontend/src/lib/scraper/components/SelectorButton.svelte b/frontend/src/lib/scraper/components/SelectorButton.svelte new file mode 100644 index 0000000..b786f89 --- /dev/null +++ b/frontend/src/lib/scraper/components/SelectorButton.svelte @@ -0,0 +1,22 @@ +<script lang="ts"> + import { Selector } from '$lib/Scraper'; + + export let selector: Selector<string>; +</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)} +> + <div class="flex self-center pl-1"> + {#if selector.keep} + <span class="icon-base icon-[material-symbols--check] text-green-400" /> + {:else} + <span class="icon-base icon-[material-symbols--close] text-red-400" /> + {/if} + </div> + <p class:opacity-50={!selector.keep} class="p-1 text-left"> + {selector} + </p> +</button> diff --git a/frontend/src/lib/scraper/components/SelectorGroup.svelte b/frontend/src/lib/scraper/components/SelectorGroup.svelte new file mode 100644 index 0000000..ae7287a --- /dev/null +++ b/frontend/src/lib/scraper/components/SelectorGroup.svelte @@ -0,0 +1,35 @@ +<script lang="ts"> + import { Selector } from '$lib/Scraper'; + import SelectorButton from './SelectorButton.svelte'; + + export let title: string; + export let selectors: Selector<string>[]; + + function invert() { + for (let selector of selectors) { + selector.keep = !selector.keep; + } + selectors = selectors; + } +</script> + +{#if selectors.length > 0} + <div class="group col-span-6 flex flex-col gap-1"> + <div class="flex gap-2"> + <h2>{title}</h2> + <button + type="button" + class="flex items-end opacity-0 brightness-75 transition-opacity hover:brightness-110 group-hover:opacity-100" + on:click={invert} + title="Invert selection" + > + <span class="icon-xs icon-[material-symbols--compare-arrows]"></span> + </button> + </div> + <div class="flex flex-wrap gap-y-1"> + {#each selectors as selector} + <SelectorButton {selector} /> + {/each} + </div> + </div> +{/if} diff --git a/frontend/src/lib/scraper/components/SelectorItem.svelte b/frontend/src/lib/scraper/components/SelectorItem.svelte new file mode 100644 index 0000000..dd3f5b4 --- /dev/null +++ b/frontend/src/lib/scraper/components/SelectorItem.svelte @@ -0,0 +1,24 @@ +<script lang="ts"> + import { Selector } from '$lib/Scraper'; + import SelectorButton from './SelectorButton.svelte'; + + export let title: string; + export let selector: Selector<string> | undefined; +</script> + +{#if selector} + <div class="flex flex-col gap-1"> + <h2>{title}</h2> + <SelectorButton {selector} /> + </div> +{/if} + +<style> + :root { + --span: 6; + } + + div { + grid-column: span var(--span) / span var(--span); + } +</style> diff --git a/frontend/src/lib/selection/Selectable.svelte b/frontend/src/lib/selection/Selectable.svelte new file mode 100644 index 0000000..48b6ac7 --- /dev/null +++ b/frontend/src/lib/selection/Selectable.svelte @@ -0,0 +1,24 @@ +<script lang="ts"> + import { getSelectionContext } from '$lib/Selection'; + + export let id: number; + export let index: number; + + export let edit: ((id: number) => void) | undefined = undefined; + + const selection = getSelectionContext(); + + $: selected = $selection.contains(id); + + const handle = (event: MouseEvent) => { + if ($selection.active) { + $selection = $selection.update(index, event.shiftKey); + event.preventDefault(); + } else if (edit) { + edit(id); + event.preventDefault(); + } + }; +</script> + +<slot {handle} {selected} /> diff --git a/frontend/src/lib/selection/SelectionOverlay.svelte b/frontend/src/lib/selection/SelectionOverlay.svelte new file mode 100644 index 0000000..04ff382 --- /dev/null +++ b/frontend/src/lib/selection/SelectionOverlay.svelte @@ -0,0 +1,34 @@ +<script lang="ts"> + export let selected: boolean; + export let position: 'top' | 'right' | 'left' | 'bottom'; + export let centered = false; +</script> + +{#if selected} + <div + 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]" /> + </div> +{/if} + +<style lang="postcss"> + .top, + .bottom { + width: 100%; + } + + .left, + .right { + height: 100%; + } + + .bottom { + bottom: 0; + } + + .right { + right: 0; + } +</style> diff --git a/frontend/src/lib/tabs/AddOverlay.svelte b/frontend/src/lib/tabs/AddOverlay.svelte new file mode 100644 index 0000000..b1c98bf --- /dev/null +++ b/frontend/src/lib/tabs/AddOverlay.svelte @@ -0,0 +1,36 @@ +<script lang="ts"> + import { updateComics } from '$gql/Mutations'; + import { UpdateMode } from '$gql/graphql'; + import { getSelectionContext } from '$lib/Selection'; + import { toastFinally } from '$lib/Toasts'; + import { fadeDefault } from '$lib/Transitions'; + import { getContextClient } from '@urql/svelte'; + import { fade } from 'svelte/transition'; + + const client = getContextClient(); + const selection = getSelectionContext(); + + export let id: number; + + function addPages() { + updateComics(client, { + ids: id, + input: { pages: { ids: $selection.ids, options: { mode: UpdateMode.Add } } } + }) + .then(() => ($selection = $selection.none())) + .catch(toastFinally); + } +</script> + +{#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} + > + <span class="icon-base icon-[material-symbols--note-add]" /> + </button> + </div> +{/if} diff --git a/frontend/src/lib/tabs/ArchiveDelete.svelte b/frontend/src/lib/tabs/ArchiveDelete.svelte new file mode 100644 index 0000000..b0e3c58 --- /dev/null +++ b/frontend/src/lib/tabs/ArchiveDelete.svelte @@ -0,0 +1,42 @@ +<script lang="ts"> + import { goto } from '$app/navigation'; + import { deleteArchives } from '$gql/Mutations'; + import type { FullArchiveFragment } from '$gql/graphql'; + 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(); + + export let archive: FullArchiveFragment; + + function deleteArchive() { + confirmDeletion('Archive', archive.name, () => { + deleteArchives(client, { ids: archive.id }) + .then(() => goto('/archives/')) + .catch(toastFinally); + }); + } +</script> + +<div class="flex flex-col gap-2"> + <div> + <p> + Deleting this archive will remove the + <span class="cursor-help font-medium underline" title={archive.path}>archive file</span> on disk. + </p> + {#if archive.comics.length > 0} + <p>The following comics will also be deleted:</p> + <ul class="ml-8 list-disc"> + {#each archive.comics as comic} + <li><a href="/comics/{comic.id}" class="underline">{comic.title}</a></li> + {/each} + </ul> + {/if} + <p class="mt-2 font-medium">This action is irrevocable.</p> + </div> + <div class="flex"> + <DeleteButton prominent on:click={deleteArchive} /> + </div> +</div> diff --git a/frontend/src/lib/tabs/ArchiveDetails.svelte b/frontend/src/lib/tabs/ArchiveDetails.svelte new file mode 100644 index 0000000..9554557 --- /dev/null +++ b/frontend/src/lib/tabs/ArchiveDetails.svelte @@ -0,0 +1,50 @@ +<script lang="ts"> + import type { FullArchiveFragment } from '$gql/graphql'; + import { formatListSize, joinText } from '$lib/Utils'; + import Card, { comicCard } from '$lib/components/Card.svelte'; + import ComicPills from '$lib/pills/ComicPills.svelte'; + import { formatDistance, formatISO9075 } from 'date-fns'; + import { filesize } from 'filesize'; + import Header from './DetailsHeader.svelte'; + import Section from './DetailsSection.svelte'; + + export let archive: FullArchiveFragment; + + const now = Date.now(); + const modifiedDate = new Date(archive.mtime); + const createdDate = new Date(archive.createdAt); + + const title = joinText(['Archive', formatListSize('image', archive.pageCount)]); +</script> + +<div class="flex flex-col gap-4 text-sm"> + <Header {title} /> + <div class="grid grid-cols-3 gap-4"> + <Section title="Size"> + <span>{filesize(archive.size, { base: 2 })}</span> + </Section> + <Section title="Created"> + <span title={formatISO9075(createdDate)}> + {formatDistance(createdDate, now, { addSuffix: true })} + </span> + </Section> + <Section title="File last modified"> + <span title={formatISO9075(modifiedDate)}> + {formatDistance(modifiedDate, now, { addSuffix: true })} + </span> + </Section> + </div> + + {#if archive.comics.length > 0} + <div class="flex flex-col gap-1"> + <h2 class="text-base font-medium">Comics</h2> + <div class="flex shrink-0 flex-col gap-4"> + {#each archive.comics as comic} + <Card compact {...comicCard(comic)}> + <ComicPills {comic} /> + </Card> + {/each} + </div> + </div> + {/if} +</div> diff --git a/frontend/src/lib/tabs/ArchiveEdit.svelte b/frontend/src/lib/tabs/ArchiveEdit.svelte new file mode 100644 index 0000000..80efaed --- /dev/null +++ b/frontend/src/lib/tabs/ArchiveEdit.svelte @@ -0,0 +1,68 @@ +<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 SelectionControls from '$lib/toolbar/SelectionControls.svelte'; + import { getContextClient } from '@urql/svelte'; + import AddOverlay from './AddOverlay.svelte'; + + const client = getContextClient(); + const selection = getSelectionContext(); + + export let archive: FullArchiveFragment; + + 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 } + } + }) + .then((mutatation) => { + const data = mutatation.addComic; + if (data.__typename === 'AddComicSuccess' && !data.archivePagesRemaining) { + $selection = $selection.clear(); + } else { + $selection = $selection.none(); + } + }) + .catch(toastFinally); + } + + function toggleOrganized() { + updateArchives(client, { ids: archive.id, input: { organized: !archive.organized } }).catch( + toastFinally + ); + } +</script> + +<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} /> + </SelectionControls> + <div class="grow" /> + <OrganizedButton organized={archive.organized} on:click={toggleOrganized} /> + </div> + + {#if archive.comics.length > 0} + <div class="flex flex-col gap-1"> + <h2 class="text-base font-medium">Comics</h2> + <div class="flex shrink-0 flex-col gap-4"> + {#each archive.comics as comic} + <Card compact {...comicCard(comic)}> + <AddOverlay slot="overlay" id={comic.id} /> + <ComicPills {comic} /> + </Card> + {/each} + </div> + </div> + {/if} +</div> diff --git a/frontend/src/lib/tabs/ComicDelete.svelte b/frontend/src/lib/tabs/ComicDelete.svelte new file mode 100644 index 0000000..a10f6b2 --- /dev/null +++ b/frontend/src/lib/tabs/ComicDelete.svelte @@ -0,0 +1,34 @@ +<script lang="ts"> + import { goto } from '$app/navigation'; + import { deleteComics } from '$gql/Mutations'; + import type { FullComicFragment } from '$gql/graphql'; + 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(); + + export let comic: FullComicFragment; + + function deleteComic() { + confirmDeletion('Comic', comic.title, () => { + deleteComics(client, { ids: comic.id }) + .then(() => goto('/comics/')) + .catch(toastFinally); + }); + } +</script> + +<div class="flex flex-col gap-2"> + <div> + <p> + Deleting this comic will make all of its pages available again for allocation. All of its + metadata will be lost. + </p> + <p class="mt-2 font-medium">This action is irrevocable.</p> + </div> + <div class="flex"> + <DeleteButton prominent on:click={deleteComic} /> + </div> +</div> diff --git a/frontend/src/lib/tabs/ComicDetails.svelte b/frontend/src/lib/tabs/ComicDetails.svelte new file mode 100644 index 0000000..0a131af --- /dev/null +++ b/frontend/src/lib/tabs/ComicDetails.svelte @@ -0,0 +1,121 @@ +<script lang="ts"> + import type { ComicFilter, FullComicFragment } from '$gql/graphql'; + import { CategoryLabel, CensorshipLabel, LanguageLabel, RatingLabel } from '$lib/Enums'; + import { href } from '$lib/Navigation'; + import { formatListSize, joinText } from '$lib/Utils'; + import AssociationPill from '$lib/pills/AssociationPill.svelte'; + import TagPill from '$lib/pills/TagPill.svelte'; + import { formatDistance, formatISO9075 } from 'date-fns'; + import Header from './DetailsHeader.svelte'; + import Section from './DetailsSection.svelte'; + + export let comic: FullComicFragment; + + const now = Date.now(); + const updatedDate = new Date(comic.updatedAt); + const createdDate = new Date(comic.createdAt); + + const title = joinText([ + comic.category ? CategoryLabel[comic.category] : '', + formatListSize('page', comic.pages.length) + ]); + + function filterFor(filter: keyof ComicFilter, id: number | string) { + return href('comics', { filter: { include: { [filter]: { all: [id] } } } }); + } +</script> + +<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> + {/if} + <a href={`/archives/${comic.archive.id}`} class="btn-slate" title="Go to Archive"> + <span class="icon-base icon-[material-symbols--folder-zip]" /> + </a> + </Header> + + <div class="grid grid-cols-3 gap-4"> + {#if comic.language} + <Section title="Language"> + <span>{LanguageLabel[comic.language]}</span> + </Section> + {/if} + {#if comic.censorship} + <Section title="Censorship"> + <span>{CensorshipLabel[comic.censorship]}</span> + </Section> + {/if} + {#if comic.rating} + <Section title="Rating"> + <span>{RatingLabel[comic.rating]}</span> + </Section> + {/if} + </div> + + <div class="grid grid-cols-3 gap-4"> + {#if comic.date} + <Section title="Released"> + <span>{formatISO9075(new Date(comic.date), { representation: 'date' })}</span> + </Section> + {/if} + <Section title="Created"> + <span title={formatISO9075(createdDate)}> + {formatDistance(createdDate, now, { addSuffix: true })} + </span> + </Section> + <Section title="Updated"> + <span title={formatISO9075(updatedDate)}> + {formatDistance(updatedDate, now, { addSuffix: true })} + </span> + </Section> + </div> + + {#if comic.artists.length} + <Section title="Artists"> + {#each comic.artists as { id, name } (id)} + <a href={filterFor('artists', id)}> + <AssociationPill {name} type="artist" /> + </a> + {/each} + </Section> + {/if} + {#if comic.circles.length} + <Section title="Circles"> + {#each comic.circles as { id, name } (id)} + <a href={filterFor('circles', id)}> + <AssociationPill {name} type="circle" /> + </a> + {/each} + </Section> + {/if} + {#if comic.characters.length} + <Section title="Characters"> + {#each comic.characters as { id, name } (id)} + <a href={filterFor('characters', id)}> + <AssociationPill {name} type="character" /> + </a> + {/each} + </Section> + {/if} + {#if comic.worlds.length} + <Section title="Worlds"> + {#each comic.worlds as { id, name } (id)} + <a href={filterFor('worlds', id)}> + <AssociationPill {name} type="world" /> + </a> + {/each} + </Section> + {/if} + {#if comic.tags.length} + <Section title="Tags"> + {#each comic.tags as { id, name, description } (id)} + <a href={filterFor('tags', id)}> + <TagPill {name} {description} /> + </a> + {/each} + </Section> + {/if} +</div> diff --git a/frontend/src/lib/tabs/DetailsHeader.svelte b/frontend/src/lib/tabs/DetailsHeader.svelte new file mode 100644 index 0000000..f980f75 --- /dev/null +++ b/frontend/src/lib/tabs/DetailsHeader.svelte @@ -0,0 +1,11 @@ +<script lang="ts"> + export let title: string; +</script> + +<div class="flex items-center gap-2"> + <h2 class="flex text-base"> + {title} + </h2> + <div class="grow"></div> + <slot /> +</div> diff --git a/frontend/src/lib/tabs/DetailsSection.svelte b/frontend/src/lib/tabs/DetailsSection.svelte new file mode 100644 index 0000000..9a6ad51 --- /dev/null +++ b/frontend/src/lib/tabs/DetailsSection.svelte @@ -0,0 +1,10 @@ +<script lang="ts"> + export let title: string; +</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 /> + </div> +</section> diff --git a/frontend/src/lib/tabs/Tab.svelte b/frontend/src/lib/tabs/Tab.svelte new file mode 100644 index 0000000..0a6be57 --- /dev/null +++ b/frontend/src/lib/tabs/Tab.svelte @@ -0,0 +1,14 @@ +<script lang="ts"> + import { getTabContext } from '$lib/Tabs'; + import { fadeDefault } from '$lib/Transitions'; + import { fade } from 'svelte/transition'; + + const context = getTabContext(); + export let id: string; +</script> + +{#if $context.current === id} + <div class="h-full overflow-auto py-2 pe-3" in:fade={fadeDefault}> + <slot /> + </div> +{/if} diff --git a/frontend/src/lib/tabs/Tabs.svelte b/frontend/src/lib/tabs/Tabs.svelte new file mode 100644 index 0000000..09cdbdd --- /dev/null +++ b/frontend/src/lib/tabs/Tabs.svelte @@ -0,0 +1,40 @@ +<script lang="ts"> + import { getTabContext } from '$lib/Tabs'; + import { fadeFast } from '$lib/Transitions'; + import { fade } from 'svelte/transition'; + + const context = getTabContext(); +</script> + +<div class="flex h-full max-h-full flex-col"> + <nav> + <ul class="me-3 flex border-b-2 border-slate-700 text-sm"> + {#each Object.entries($context.tabs) as [id, { title, badge }]} + <li class="-mb-0.5"> + <button + type="button" + class:active={$context.current === id} + class="relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200" + on:click={() => ($context.current = id)} + > + {#if badge} + <div + class="absolute right-0 top-1 h-2 w-2 rounded-full bg-emerald-400" + title="There are pending changes" + transition:fade={fadeFast} + /> + {/if} + <span>{title}</span> + </button> + </li> + {/each} + </ul> + </nav> + <slot /> +</div> + +<style lang="postcss"> + button.active { + @apply border-b-2 border-indigo-500; + } +</style> diff --git a/frontend/src/lib/toolbar/DeleteSelection.svelte b/frontend/src/lib/toolbar/DeleteSelection.svelte new file mode 100644 index 0000000..7459a87 --- /dev/null +++ b/frontend/src/lib/toolbar/DeleteSelection.svelte @@ -0,0 +1,26 @@ +<script lang="ts"> + import type { DeleteMutation } from '$gql/Mutations'; + import { getSelectionContext } from '$lib/Selection'; + 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; + + function remove() { + const mutate = () => { + mutation(client, { ids: $selection.ids }) + .then(() => ($selection = $selection.clear())) + .catch(toastFinally); + }; + + confirmDeletion($selection.typename, $selection.names, mutate, warning); + } +</script> + +<DeleteButton on:click={remove} /> diff --git a/frontend/src/lib/toolbar/EditSelection.svelte b/frontend/src/lib/toolbar/EditSelection.svelte new file mode 100644 index 0000000..50e6656 --- /dev/null +++ b/frontend/src/lib/toolbar/EditSelection.svelte @@ -0,0 +1,29 @@ +<script lang="ts"> + import { getSelectionContext } from '$lib/Selection'; + import { accelerator } from '$lib/Shortcuts'; + import type { SvelteComponent } from 'svelte'; + import { openModal } from 'svelte-modals'; + + const selection = getSelectionContext(); + + export let dialog: typeof SvelteComponent<{ + isOpen: boolean; + ids: number[]; + }>; + + function edit() { + openModal(dialog, { + ids: $selection.ids + }); + } +</script> + +<button + type="button" + class="btn-slate hover:bg-blue-700" + title="Edit selection" + on:click={edit} + use:accelerator={'e'} +> + <span class="icon-base icon-[material-symbols--edit]" /> +</button> diff --git a/frontend/src/lib/toolbar/FilterBookmarked.svelte b/frontend/src/lib/toolbar/FilterBookmarked.svelte new file mode 100644 index 0000000..bcbe295 --- /dev/null +++ b/frontend/src/lib/toolbar/FilterBookmarked.svelte @@ -0,0 +1,24 @@ +<script lang="ts"> + import { page } from '$app/stores'; + import { ComicFilterContext, cycleBooleanFilter, getFilterContext } from '$lib/Filter'; + import { accelerator } from '$lib/Shortcuts'; + import Bookmark from '$lib/icons/Bookmark.svelte'; + + const filter = getFilterContext<ComicFilterContext>(); + $: bookmarked = $filter.include.controls.bookmarked.value; + + const toggle = () => { + $filter.include.controls.bookmarked.value = cycleBooleanFilter(bookmarked, false); + $filter.apply($page.url.searchParams); + }; +</script> + +<button + class:toggled={bookmarked} + class="btn-slate" + title="Filter bookmarked" + on:click={toggle} + use:accelerator={'b'} +> + <Bookmark {bookmarked} /> +</button> diff --git a/frontend/src/lib/toolbar/FilterFavourites.svelte b/frontend/src/lib/toolbar/FilterFavourites.svelte new file mode 100644 index 0000000..6591cef --- /dev/null +++ b/frontend/src/lib/toolbar/FilterFavourites.svelte @@ -0,0 +1,24 @@ +<script lang="ts"> + import { page } from '$app/stores'; + import { ComicFilterContext, cycleBooleanFilter, getFilterContext } from '$lib/Filter'; + import { accelerator } from '$lib/Shortcuts'; + import Star from '$lib/icons/Star.svelte'; + + const filter = getFilterContext<ComicFilterContext>(); + $: favourite = $filter.include.controls.favourite.value; + + const toggle = () => { + $filter.include.controls.favourite.value = cycleBooleanFilter(favourite, false); + $filter.apply($page.url.searchParams); + }; +</script> + +<button + class:toggled={favourite} + class="btn-slate" + title="Filter favourites" + on:click={toggle} + use:accelerator={'f'} +> + <Star {favourite} /> +</button> diff --git a/frontend/src/lib/toolbar/FilterOrganized.svelte b/frontend/src/lib/toolbar/FilterOrganized.svelte new file mode 100644 index 0000000..754e663 --- /dev/null +++ b/frontend/src/lib/toolbar/FilterOrganized.svelte @@ -0,0 +1,30 @@ +<script lang="ts"> + import { page } from '$app/stores'; + import { + ArchiveFilterContext, + ComicFilterContext, + cycleBooleanFilter, + getFilterContext + } from '$lib/Filter'; + import { accelerator } from '$lib/Shortcuts'; + import Organized from '$lib/icons/Organized.svelte'; + + const filter = getFilterContext<ArchiveFilterContext | ComicFilterContext>(); + $: organized = $filter.include.controls.organized.value; + + const toggle = () => { + $filter.include.controls.organized.value = cycleBooleanFilter(organized); + $filter.apply($page.url.searchParams); + }; +</script> + +<button + type="button" + class:toggled={organized !== undefined} + class="btn-slate" + title="Filter organized" + on:click={toggle} + use:accelerator={'o'} +> + <Organized tristate {organized} /> +</button> diff --git a/frontend/src/lib/toolbar/MarkBookmark.svelte b/frontend/src/lib/toolbar/MarkBookmark.svelte new file mode 100644 index 0000000..792b84f --- /dev/null +++ b/frontend/src/lib/toolbar/MarkBookmark.svelte @@ -0,0 +1,27 @@ +<script lang="ts"> + import { getSelectionContext } from '$lib/Selection'; + import { toastFinally } from '$lib/Toasts'; + import Bookmark from '$lib/icons/Bookmark.svelte'; + import { Client, getContextClient } from '@urql/svelte'; + + const client = getContextClient(); + const selection = getSelectionContext(); + + export let mutation: ( + client: Client, + args: { ids: number[]; input: { bookmarked: boolean } } + ) => Promise<unknown>; + + function mutate(bookmarked: boolean) { + 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)}> + <Bookmark bookmarked={true} /> + <span>Bookmark</span> +</button> +<button type="button" class="btn-slate flex justify-start gap-1" on:click={() => 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 new file mode 100644 index 0000000..42eaa39 --- /dev/null +++ b/frontend/src/lib/toolbar/MarkFavourite.svelte @@ -0,0 +1,27 @@ +<script lang="ts"> + import { getSelectionContext } from '$lib/Selection'; + import { toastFinally } from '$lib/Toasts'; + import Star from '$lib/icons/Star.svelte'; + import { Client, getContextClient } from '@urql/svelte'; + + const client = getContextClient(); + const selection = getSelectionContext(); + + export let mutation: ( + client: Client, + args: { ids: number[]; input: { favourite: boolean } } + ) => Promise<unknown>; + + function mutate(favourite: boolean) { + mutation(client, { ids: $selection.ids, input: { favourite } }).catch(toastFinally); + } +</script> + +<button type="button" class="btn-slate justify-start gap-1" on:click={() => mutate(true)}> + <Star favourite={true} /> + <span>Favourite</span> +</button> +<button type="button" class="btn-slate justify-start gap-1" on:click={() => 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 new file mode 100644 index 0000000..4dc3a83 --- /dev/null +++ b/frontend/src/lib/toolbar/MarkOrganized.svelte @@ -0,0 +1,27 @@ +<script lang="ts"> + import { getSelectionContext } from '$lib/Selection'; + import { toastFinally } from '$lib/Toasts'; + import Organized from '$lib/icons/Organized.svelte'; + import { Client, getContextClient } from '@urql/svelte'; + + const client = getContextClient(); + const selection = getSelectionContext(); + + export let mutation: ( + client: Client, + args: { ids: number[]; input: { organized: boolean } } + ) => Promise<unknown>; + + function mutate(organized: boolean) { + 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)}> + <Organized tristate organized={true} /> + <span>Organized</span> +</button> +<button type="button" class="btn-slate flex justify-start gap-1" on:click={() => 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 new file mode 100644 index 0000000..27eb2c7 --- /dev/null +++ b/frontend/src/lib/toolbar/MarkSelection.svelte @@ -0,0 +1,24 @@ +<script lang="ts"> + import Dropdown from '$lib/components/Dropdown.svelte'; + + let visible = false; + let button: HTMLElement; +</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> diff --git a/frontend/src/lib/toolbar/Search.svelte b/frontend/src/lib/toolbar/Search.svelte new file mode 100644 index 0000000..f033258 --- /dev/null +++ b/frontend/src/lib/toolbar/Search.svelte @@ -0,0 +1,21 @@ +<script lang="ts"> + import { page } from '$app/stores'; + import { debounce } from '$lib/Actions'; + import { BasicFilterContext, getFilterContext } from '$lib/Filter'; + import { accelerator } from '$lib/Shortcuts'; + + const filter = getFilterContext<BasicFilterContext>(); + + export let name: string; + export let field: string; +</script> + +<input + type="text" + size={25} + class="btn-slate w-min" + placeholder="Search {name}..." + bind:value={field} + 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 new file mode 100644 index 0000000..7ff339e --- /dev/null +++ b/frontend/src/lib/toolbar/SelectItems.svelte @@ -0,0 +1,19 @@ +<script lang="ts"> + import { page } from '$app/stores'; + import { getPaginationContext } from '$lib/Pagination'; + + const pagination = getPaginationContext(); + + $: values = new Set([24, 48, 72, 90, 120, 150, 180, $pagination.items].sort((a, b) => a - b)); +</script> + +<select + class="btn-slate" + bind:value={$pagination.items} + on:change={() => $pagination.apply($page.url.searchParams)} + title="Limit displayed items to..." +> + {#each values as value} + <option {value}>{value}</option> + {/each} +</select> diff --git a/frontend/src/lib/toolbar/SelectSort.svelte b/frontend/src/lib/toolbar/SelectSort.svelte new file mode 100644 index 0000000..fdcb057 --- /dev/null +++ b/frontend/src/lib/toolbar/SelectSort.svelte @@ -0,0 +1,61 @@ +<script lang="ts"> + import { page } from '$app/stores'; + import { SortDirection } from '$gql/graphql'; + + import { getSortContext } from '$lib/Sort'; + import { slideXFast } from '$lib/Transitions'; + import { getRandomInt } from '$lib/Utils'; + import { slide } from 'svelte/transition'; + + const sort = getSortContext(); + + function toggle() { + if ($sort.direction === SortDirection.Ascending) { + $sort.direction = SortDirection.Descending; + } else { + $sort.direction = SortDirection.Ascending; + } + + apply(); + } + + function apply() { + if ($sort.on === 'RANDOM' && $sort.seed === undefined) { + $sort.seed = getRandomInt(0, 1000000000); + } + $sort.apply($page.url.searchParams); + } + + function reshuffle() { + $sort.seed = undefined; + apply(); + } +</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]} + <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" /> + {:else} + <span class="icon-base icon-[material-symbols--sort]" /> + {/if} + </button> + {#if $sort.on === 'RANDOM'} + <button + type="button" + class="btn-slate" + title="Reshuffle" + on:click={reshuffle} + transition:slide={slideXFast} + > + <div class="flex"> + <span class="icon-base icon-[material-symbols--shuffle]" /> + </div> + </button> + {/if} +</div> diff --git a/frontend/src/lib/toolbar/SelectionControls.svelte b/frontend/src/lib/toolbar/SelectionControls.svelte new file mode 100644 index 0000000..4d309df --- /dev/null +++ b/frontend/src/lib/toolbar/SelectionControls.svelte @@ -0,0 +1,57 @@ +<script lang="ts"> + import { getSelectionContext } from '$lib/Selection'; + import { accelerator } from '$lib/Shortcuts'; + import { fadeDefault, slideXFast } from '$lib/Transitions'; + import Badge from '$lib/components/Badge.svelte'; + import { onDestroy } 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()); + + onDestroy(() => ($selection = $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} + use:accelerator={'s'} + > + {#if $selection.active} + {#if page} + <span class="icon-base icon-[material-symbols--edit-document]" /> + {:else} + <span class="icon-base icon-[material-symbols--remove-selection]" /> + {/if} + {:else if page} + <span class="icon-base icon-[material-symbols--edit-document-outline]" /> + {:else} + <span class="icon-base icon-[material-symbols--select]" /> + {/if} + <Badge number={$selection.size} /> + </button> + {#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> + <button type="button" class="btn-slate" title="Select none" on:click={none}> + <span class="icon-base icon-[material-symbols--deselect]" /> + </button> + </div> + {/if} +</div> +{#if $selection.size > 0} + <div class="rounded-group flex" transition:fade={fadeDefault}> + <slot /> + </div> +{/if} diff --git a/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte b/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte new file mode 100644 index 0000000..2e7869f --- /dev/null +++ b/frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte @@ -0,0 +1,40 @@ +<script lang="ts"> + import { page } from '$app/stores'; + import { getFilterContext } from '$lib/Filter'; + 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'; + + const toolbar = getToolbarContext(); + const filter = getFilterContext(); +</script> + +<div class="rounded-group flex"> + <button + class:toggled={$toolbar.expand} + class="btn-slate relative" + title={`${$toolbar.expand ? 'Hide' : 'Show'} filters`} + on:click={() => ($toolbar.expand = !$toolbar.expand)} + > + {#if $toolbar.expand} + <span class="icon-base icon-[material-symbols--filter-alt]" /> + {:else} + <span class="icon-base icon-[material-symbols--filter-alt-outline]" /> + {/if} + <Badge number={$filter.include.size + $filter.exclude.size} /> + </button> + {#if $filter.include.size + $filter.exclude.size > 0} + <button + class="btn-slate relative hover:bg-rose-700" + on:click={() => navigate({ filter: {} }, $page.url.searchParams)} + transition:slide={slideXFast} + title="Reset filters" + > + <div class="flex"> + <span class="icon-base icon-[material-symbols--filter-alt-off]" /> + </div> + </button> + {/if} +</div> diff --git a/frontend/src/lib/toolbar/Toolbar.svelte b/frontend/src/lib/toolbar/Toolbar.svelte new file mode 100644 index 0000000..e87d731 --- /dev/null +++ b/frontend/src/lib/toolbar/Toolbar.svelte @@ -0,0 +1,42 @@ +<script lang="ts" context="module"> + import { writable, type Writable } from 'svelte/store'; + + interface ToolbarContext { + expand: boolean; + } + + function initToolbarContext() { + return setContext<Writable<ToolbarContext>>('toolbar', writable({ expand: false })); + } + + export function getToolbarContext() { + return getContext<Writable<ToolbarContext>>('toolbar'); + } +</script> + +<script lang="ts"> + import { getContext, setContext } from 'svelte'; + + const toolbar = initToolbarContext(); +</script> + +<div class="flex flex-col"> + <div + 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" /> + </div> + <div class="flex flex-row flex-wrap justify-start gap-2 xl:flex-nowrap xl:justify-center"> + <slot name="center" /> + </div> + <div class="flex flex-row justify-end gap-2"> + <slot name="end" /> + </div> + </div> + {#if $toolbar.expand} + <div class="mt-4"> + <slot /> + </div> + {/if} +</div> |
