summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/lib')
-rw-r--r--frontend/src/lib/Actions.ts109
-rw-r--r--frontend/src/lib/Enums.ts325
-rw-r--r--frontend/src/lib/Filter.ts365
-rw-r--r--frontend/src/lib/Meta.ts1
-rw-r--r--frontend/src/lib/Navigation.ts114
-rw-r--r--frontend/src/lib/Pagination.ts31
-rw-r--r--frontend/src/lib/Reader.ts62
-rw-r--r--frontend/src/lib/Scraper.ts156
-rw-r--r--frontend/src/lib/Selection.ts141
-rw-r--r--frontend/src/lib/Shortcuts.ts153
-rw-r--r--frontend/src/lib/Sort.ts42
-rw-r--r--frontend/src/lib/Tabs.ts18
-rw-r--r--frontend/src/lib/Toasts.ts19
-rw-r--r--frontend/src/lib/Transitions.ts10
-rw-r--r--frontend/src/lib/Update.ts97
-rw-r--r--frontend/src/lib/Utils.ts108
-rw-r--r--frontend/src/lib/assets/logo.webpbin0 -> 89322 bytes
-rw-r--r--frontend/src/lib/components/AddButton.svelte7
-rw-r--r--frontend/src/lib/components/Badge.svelte15
-rw-r--r--frontend/src/lib/components/BookmarkButton.svelte9
-rw-r--r--frontend/src/lib/components/Card.svelte106
-rw-r--r--frontend/src/lib/components/Cardlet.svelte37
-rw-r--r--frontend/src/lib/components/DeleteButton.svelte15
-rw-r--r--frontend/src/lib/components/Dialog.svelte36
-rw-r--r--frontend/src/lib/components/Dropdown.svelte18
-rw-r--r--frontend/src/lib/components/Empty.svelte10
-rw-r--r--frontend/src/lib/components/Expander.svelte17
-rw-r--r--frontend/src/lib/components/Guard.svelte13
-rw-r--r--frontend/src/lib/components/Head.svelte12
-rw-r--r--frontend/src/lib/components/Labelled.svelte10
-rw-r--r--frontend/src/lib/components/LabelledBlock.svelte18
-rw-r--r--frontend/src/lib/components/OrganizedButton.svelte9
-rw-r--r--frontend/src/lib/components/RefreshButton.svelte3
-rw-r--r--frontend/src/lib/components/RemovePageButton.svelte13
-rw-r--r--frontend/src/lib/components/Select.svelte55
-rw-r--r--frontend/src/lib/components/Spinner.svelte36
-rw-r--r--frontend/src/lib/components/SubmitButton.svelte7
-rw-r--r--frontend/src/lib/components/Titlebar.svelte32
-rw-r--r--frontend/src/lib/containers/Cardlets.svelte11
-rw-r--r--frontend/src/lib/containers/Cards.svelte8
-rw-r--r--frontend/src/lib/containers/Carousel.svelte15
-rw-r--r--frontend/src/lib/containers/Column.svelte3
-rw-r--r--frontend/src/lib/containers/Grid.svelte23
-rw-r--r--frontend/src/lib/dialogs/AddArtist.svelte30
-rw-r--r--frontend/src/lib/dialogs/AddCharacter.svelte30
-rw-r--r--frontend/src/lib/dialogs/AddCircle.svelte30
-rw-r--r--frontend/src/lib/dialogs/AddNamespace.svelte30
-rw-r--r--frontend/src/lib/dialogs/AddTag.svelte30
-rw-r--r--frontend/src/lib/dialogs/AddWorld.svelte30
-rw-r--r--frontend/src/lib/dialogs/ConfirmDeletion.svelte51
-rw-r--r--frontend/src/lib/dialogs/EditArtist.svelte46
-rw-r--r--frontend/src/lib/dialogs/EditCharacter.svelte46
-rw-r--r--frontend/src/lib/dialogs/EditCircle.svelte46
-rw-r--r--frontend/src/lib/dialogs/EditNamespace.svelte46
-rw-r--r--frontend/src/lib/dialogs/EditTag.svelte44
-rw-r--r--frontend/src/lib/dialogs/EditWorld.svelte46
-rw-r--r--frontend/src/lib/dialogs/UpdateComics.svelte96
-rw-r--r--frontend/src/lib/dialogs/UpdateTags.svelte45
-rw-r--r--frontend/src/lib/dialogs/components/UpdateModeSelector.svelte24
-rw-r--r--frontend/src/lib/filter/ComicFilterForm.svelte48
-rw-r--r--frontend/src/lib/filter/TagFilterForm.svelte31
-rw-r--r--frontend/src/lib/filter/components/ComicFilterGroup.svelte27
-rw-r--r--frontend/src/lib/filter/components/Filter.svelte77
-rw-r--r--frontend/src/lib/filter/components/FilterForm.svelte47
-rw-r--r--frontend/src/lib/filter/components/TagFilterGroup.svelte14
-rw-r--r--frontend/src/lib/forms/ArtistForm.svelte25
-rw-r--r--frontend/src/lib/forms/CharacterForm.svelte25
-rw-r--r--frontend/src/lib/forms/CircleForm.svelte25
-rw-r--r--frontend/src/lib/forms/ComicForm.svelte100
-rw-r--r--frontend/src/lib/forms/NamespaceForm.svelte28
-rw-r--r--frontend/src/lib/forms/TagForm.svelte42
-rw-r--r--frontend/src/lib/forms/WorldForm.svelte25
-rw-r--r--frontend/src/lib/gallery/Gallery.svelte42
-rw-r--r--frontend/src/lib/gallery/GalleryPage.svelte93
-rw-r--r--frontend/src/lib/icons/Bookmark.svelte10
-rw-r--r--frontend/src/lib/icons/Female.svelte1
-rw-r--r--frontend/src/lib/icons/Location.svelte1
-rw-r--r--frontend/src/lib/icons/Male.svelte1
-rw-r--r--frontend/src/lib/icons/Organized.svelte21
-rw-r--r--frontend/src/lib/icons/Star.svelte25
-rw-r--r--frontend/src/lib/icons/Transgender.svelte1
-rw-r--r--frontend/src/lib/navigation/Link.svelte20
-rw-r--r--frontend/src/lib/navigation/Navigation.svelte5
-rw-r--r--frontend/src/lib/pagination/Pagination.svelte45
-rw-r--r--frontend/src/lib/pagination/Target.svelte21
-rw-r--r--frontend/src/lib/pills/AssociationPill.svelte30
-rw-r--r--frontend/src/lib/pills/ComicPills.svelte37
-rw-r--r--frontend/src/lib/pills/Pill.svelte40
-rw-r--r--frontend/src/lib/pills/TagPill.svelte40
-rw-r--r--frontend/src/lib/reader/PageView.svelte67
-rw-r--r--frontend/src/lib/reader/Reader.svelte39
-rw-r--r--frontend/src/lib/reader/ReaderPage.svelte24
-rw-r--r--frontend/src/lib/reader/components/CloseReaderButton.svelte19
-rw-r--r--frontend/src/lib/reader/components/ReaderMenuButton.svelte16
-rw-r--r--frontend/src/lib/scraper/ComicScrapeForm.svelte138
-rw-r--r--frontend/src/lib/scraper/components/SelectorButton.svelte22
-rw-r--r--frontend/src/lib/scraper/components/SelectorGroup.svelte35
-rw-r--r--frontend/src/lib/scraper/components/SelectorItem.svelte24
-rw-r--r--frontend/src/lib/selection/Selectable.svelte24
-rw-r--r--frontend/src/lib/selection/SelectionOverlay.svelte34
-rw-r--r--frontend/src/lib/tabs/AddOverlay.svelte36
-rw-r--r--frontend/src/lib/tabs/ArchiveDelete.svelte42
-rw-r--r--frontend/src/lib/tabs/ArchiveDetails.svelte50
-rw-r--r--frontend/src/lib/tabs/ArchiveEdit.svelte68
-rw-r--r--frontend/src/lib/tabs/ComicDelete.svelte34
-rw-r--r--frontend/src/lib/tabs/ComicDetails.svelte121
-rw-r--r--frontend/src/lib/tabs/DetailsHeader.svelte11
-rw-r--r--frontend/src/lib/tabs/DetailsSection.svelte10
-rw-r--r--frontend/src/lib/tabs/Tab.svelte14
-rw-r--r--frontend/src/lib/tabs/Tabs.svelte40
-rw-r--r--frontend/src/lib/toolbar/DeleteSelection.svelte26
-rw-r--r--frontend/src/lib/toolbar/EditSelection.svelte29
-rw-r--r--frontend/src/lib/toolbar/FilterBookmarked.svelte24
-rw-r--r--frontend/src/lib/toolbar/FilterFavourites.svelte24
-rw-r--r--frontend/src/lib/toolbar/FilterOrganized.svelte30
-rw-r--r--frontend/src/lib/toolbar/MarkBookmark.svelte27
-rw-r--r--frontend/src/lib/toolbar/MarkFavourite.svelte27
-rw-r--r--frontend/src/lib/toolbar/MarkOrganized.svelte27
-rw-r--r--frontend/src/lib/toolbar/MarkSelection.svelte24
-rw-r--r--frontend/src/lib/toolbar/Search.svelte21
-rw-r--r--frontend/src/lib/toolbar/SelectItems.svelte19
-rw-r--r--frontend/src/lib/toolbar/SelectSort.svelte61
-rw-r--r--frontend/src/lib/toolbar/SelectionControls.svelte57
-rw-r--r--frontend/src/lib/toolbar/ToggleAdvancedFilters.svelte40
-rw-r--r--frontend/src/lib/toolbar/Toolbar.svelte42
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
new file mode 100644
index 0000000..e41cbb0
--- /dev/null
+++ b/frontend/src/lib/assets/logo.webp
Binary files differ
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')}
+ >
+ &forall;
+ </button>
+ <button
+ type="button"
+ title="matches any of"
+ class:active={filter.mode === 'any'}
+ class="btn btn-xs"
+ on:click={() => (filter.mode = 'any')}
+ >
+ &exist;
+ </button>
+ <button
+ type="button"
+ title="matches exactly"
+ class:active={filter.mode === 'exact'}
+ class="btn btn-xs"
+ on:click={() => (filter.mode = 'exact')}
+ >
+ &equals;
+ </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)}
+ >
+ &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>