From f8e2f64316354b36099a01eef0735ec0970f5b99 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Wed, 26 Mar 2025 19:40:28 +0100
Subject: frontend: Migrate to eslint-plugin-svelte 3.0

This includes a migration to a flat eslint.config.js, which will now
also automatically ignore items from .gitignore. eslint-plugin-svelte
3.0 comes with a couple of changes to recommended rules as well, these
are also addressed in this commit.
---
 frontend/src/gql/Utils.ts                                     | 2 ++
 frontend/src/lib/Shortcuts.ts                                 | 2 +-
 frontend/src/lib/Toasts.ts                                    | 2 +-
 frontend/src/lib/Utils.ts                                     | 1 -
 frontend/src/lib/components/Dialog.svelte                     | 1 +
 frontend/src/lib/dialogs/ConfirmDeletion.svelte               | 2 +-
 frontend/src/lib/dialogs/components/UpdateModeSelector.svelte | 2 +-
 frontend/src/lib/gallery/Gallery.svelte                       | 2 +-
 frontend/src/lib/pagination/Pagination.svelte                 | 2 +-
 frontend/src/lib/reader/PageView.svelte                       | 3 ++-
 frontend/src/lib/scraper/ComicScrapeForm.svelte               | 3 ++-
 frontend/src/lib/scraper/components/SelectorGroup.svelte      | 1 +
 frontend/src/lib/tabs/ArchiveDetails.svelte                   | 2 +-
 frontend/src/lib/tabs/ArchiveEdit.svelte                      | 2 +-
 frontend/src/lib/tabs/Tabs.svelte                             | 2 +-
 frontend/src/lib/toolbar/SelectItems.svelte                   | 2 +-
 frontend/src/lib/toolbar/SelectSort.svelte                    | 2 +-
 frontend/src/routes/+page.svelte                              | 6 +++---
 18 files changed, 22 insertions(+), 17 deletions(-)

(limited to 'frontend/src')

diff --git a/frontend/src/gql/Utils.ts b/frontend/src/gql/Utils.ts
index 177dff0..6fedd05 100644
--- a/frontend/src/gql/Utils.ts
+++ b/frontend/src/gql/Utils.ts
@@ -19,6 +19,7 @@ export function omitIdentifiers<T extends { __typename?: unknown; id: number }>(
 	return omit(obj, '__typename', 'id');
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isSuccess(object: any): object is gql.Success {
 	if (object.__typename === undefined) {
 		return false;
@@ -27,6 +28,7 @@ export function isSuccess(object: any): object is gql.Success {
 	return object.__typename.endsWith('Success') && (object as gql.Success).message !== undefined;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isError(object: any): object is gql.Error {
 	if (object.__typename === undefined) {
 		return false;
diff --git a/frontend/src/lib/Shortcuts.ts b/frontend/src/lib/Shortcuts.ts
index 82f19ac..259500c 100644
--- a/frontend/src/lib/Shortcuts.ts
+++ b/frontend/src/lib/Shortcuts.ts
@@ -35,7 +35,7 @@ const modeSwitches = ['n', 'g', 'i', 'e'] 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
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	return modeSwitches.includes(s as any);
 }
 
diff --git a/frontend/src/lib/Toasts.ts b/frontend/src/lib/Toasts.ts
index abc9a7d..224989b 100644
--- a/frontend/src/lib/Toasts.ts
+++ b/frontend/src/lib/Toasts.ts
@@ -15,5 +15,5 @@ export function toastError(message: string) {
 	});
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const toastFinally = (reason: any) => toastError(reason);
diff --git a/frontend/src/lib/Utils.ts b/frontend/src/lib/Utils.ts
index df7dad8..c347544 100644
--- a/frontend/src/lib/Utils.ts
+++ b/frontend/src/lib/Utils.ts
@@ -35,7 +35,6 @@ export function getResultState(state: OperationResultState): ResultState {
 	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;
diff --git a/frontend/src/lib/components/Dialog.svelte b/frontend/src/lib/components/Dialog.svelte
index d300369..721d670 100644
--- a/frontend/src/lib/components/Dialog.svelte
+++ b/frontend/src/lib/components/Dialog.svelte
@@ -10,6 +10,7 @@
 		children?: Snippet;
 	}
 
+	// eslint-disable-next-line svelte/no-unused-props
 	let { isOpen, close, title, children }: Props = $props();
 </script>
 
diff --git a/frontend/src/lib/dialogs/ConfirmDeletion.svelte b/frontend/src/lib/dialogs/ConfirmDeletion.svelte
index dde4ea7..53b1dd4 100644
--- a/frontend/src/lib/dialogs/ConfirmDeletion.svelte
+++ b/frontend/src/lib/dialogs/ConfirmDeletion.svelte
@@ -31,7 +31,7 @@
 			</p>
 			{#if multiple}
 				<ul class="mb-3 ml-8 list-disc">
-					{#each names.slice(0, 10) as name}
+					{#each names.slice(0, 10) as name (name)}
 						<li>{name}</li>
 					{/each}
 				</ul>
diff --git a/frontend/src/lib/dialogs/components/UpdateModeSelector.svelte b/frontend/src/lib/dialogs/components/UpdateModeSelector.svelte
index 1a2307d..876657e 100644
--- a/frontend/src/lib/dialogs/components/UpdateModeSelector.svelte
+++ b/frontend/src/lib/dialogs/components/UpdateModeSelector.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div class="flex gap-1 pb-1 text-xs">
-	{#each Object.entries(UpdateModeLabel) as [e, label]}
+	{#each Object.entries(UpdateModeLabel) as [e, label] (e)}
 		<button
 			type="button"
 			class:active={mode === e}
diff --git a/frontend/src/lib/gallery/Gallery.svelte b/frontend/src/lib/gallery/Gallery.svelte
index 0480026..f94747a 100644
--- a/frontend/src/lib/gallery/Gallery.svelte
+++ b/frontend/src/lib/gallery/Gallery.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <div class="max-h-full gap-2 overflow-auto p-1 pr-3" tabindex="-1">
-	{#each pages as page, index}
+	{#each pages as page, index (page.id)}
 		<GalleryPage {page} {index} {open} {updateCover} />
 	{/each}
 </div>
diff --git a/frontend/src/lib/pagination/Pagination.svelte b/frontend/src/lib/pagination/Pagination.svelte
index fc2935c..28fbeb2 100644
--- a/frontend/src/lib/pagination/Pagination.svelte
+++ b/frontend/src/lib/pagination/Pagination.svelte
@@ -37,7 +37,7 @@
 		<Target disabled={leftmost} target={pagination.page - 1}>
 			<span class="icon-base icon-[material-symbols--keyboard-arrow-left]"></span>
 		</Target>
-		{#each Array.from({ length: end + 1 - start }, (_, i) => i + start) as target}
+		{#each Array.from({ length: end + 1 - start }, (_, i) => i + start) as target (target)}
 			<Target active={pagination.page === target} {target}>
 				<p>{target.toString()}</p>
 			</Target>
diff --git a/frontend/src/lib/reader/PageView.svelte b/frontend/src/lib/reader/PageView.svelte
index 50c0873..4eb3d56 100644
--- a/frontend/src/lib/reader/PageView.svelte
+++ b/frontend/src/lib/reader/PageView.svelte
@@ -102,6 +102,7 @@
 			{@render pagesIn(currentChunk)}
 		</SliderMargin>
 		<div class:reverse class="flex w-full bg-gray-400/60 backdrop-blur-2xl">
+			<!-- eslint-disable-next-line svelte/require-each-key -->
 			{#each chunks as chunk, index}
 				<button
 					type="button"
@@ -123,7 +124,7 @@
 </div>
 
 <div class="invisible absolute">
-	{#each pagesAround(reader.page) as page}
+	{#each pagesAround(reader.page) as page (page.id)}
 		<img src={src(page.image, 'full')} alt="" />
 	{/each}
 </div>
diff --git a/frontend/src/lib/scraper/ComicScrapeForm.svelte b/frontend/src/lib/scraper/ComicScrapeForm.svelte
index 6cc3451..6f995a9 100644
--- a/frontend/src/lib/scraper/ComicScrapeForm.svelte
+++ b/frontend/src/lib/scraper/ComicScrapeForm.svelte
@@ -80,7 +80,7 @@
 					<Select
 						id="scrapers"
 						options={scrapers}
-						placeholder={'Select scraper...'}
+						placeholder="Select scraper..."
 						bind:value={context.scraper}
 					/>
 				</div>
@@ -96,6 +96,7 @@
 			<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">
+					<!-- eslint-disable-next-line svelte/require-each-key -->
 					{#each context.warnings as warning}
 						<li>{warning}</li>
 					{/each}
diff --git a/frontend/src/lib/scraper/components/SelectorGroup.svelte b/frontend/src/lib/scraper/components/SelectorGroup.svelte
index 11489b1..5cf0cf0 100644
--- a/frontend/src/lib/scraper/components/SelectorGroup.svelte
+++ b/frontend/src/lib/scraper/components/SelectorGroup.svelte
@@ -32,6 +32,7 @@
 			</button>
 		</div>
 		<div class="flex flex-wrap gap-y-1">
+			<!-- eslint-disable-next-line svelte/require-each-key -->
 			{#each selectors as selector}
 				<SelectorButton {selector} />
 			{/each}
diff --git a/frontend/src/lib/tabs/ArchiveDetails.svelte b/frontend/src/lib/tabs/ArchiveDetails.svelte
index 1243162..c1ad68e 100644
--- a/frontend/src/lib/tabs/ArchiveDetails.svelte
+++ b/frontend/src/lib/tabs/ArchiveDetails.svelte
@@ -38,7 +38,7 @@
 		<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}
+				{#each archive.comics as comic (comic.id)}
 					<ComicCard compact {comic} />
 				{/each}
 			</div>
diff --git a/frontend/src/lib/tabs/ArchiveEdit.svelte b/frontend/src/lib/tabs/ArchiveEdit.svelte
index 2ed0523..c6ea684 100644
--- a/frontend/src/lib/tabs/ArchiveEdit.svelte
+++ b/frontend/src/lib/tabs/ArchiveEdit.svelte
@@ -55,7 +55,7 @@
 		<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}
+				{#each archive.comics as comic (comic.id)}
 					<ComicCard compact {comic}>
 						{#snippet overlay()}
 							<AddOverlay id={comic.id} />
diff --git a/frontend/src/lib/tabs/Tabs.svelte b/frontend/src/lib/tabs/Tabs.svelte
index c2b12af..59b3220 100644
--- a/frontend/src/lib/tabs/Tabs.svelte
+++ b/frontend/src/lib/tabs/Tabs.svelte
@@ -31,7 +31,7 @@
 <div class="flex h-full max-h-full flex-col">
 	<nav>
 		<ul class="ms-1 me-3 flex border-b-2 border-slate-700 text-sm">
-			{#each Object.entries(context.tabs) as [id, { title }]}
+			{#each Object.entries(context.tabs) as [id, { title }] (id)}
 				<li class="-mb-0.5">
 					<button
 						type="button"
diff --git a/frontend/src/lib/toolbar/SelectItems.svelte b/frontend/src/lib/toolbar/SelectItems.svelte
index 68a0652..ce8045e 100644
--- a/frontend/src/lib/toolbar/SelectItems.svelte
+++ b/frontend/src/lib/toolbar/SelectItems.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <select class="btn-slate" value={pagination.items} {onchange} title="Limit displayed items to...">
-	{#each values as value}
+	{#each values as value (value)}
 		<option {value}>{value}</option>
 	{/each}
 </select>
diff --git a/frontend/src/lib/toolbar/SelectSort.svelte b/frontend/src/lib/toolbar/SelectSort.svelte
index 0e59df6..a7d56c7 100644
--- a/frontend/src/lib/toolbar/SelectSort.svelte
+++ b/frontend/src/lib/toolbar/SelectSort.svelte
@@ -41,7 +41,7 @@
 
 <div class="rounded-group flex flex-row">
 	<select class="btn-slate" value={sort.on} {onchange} title="Sort on...">
-		{#each Object.entries(labels) as [value, label]}
+		{#each Object.entries(labels) as [value, label] (value)}
 			<option {value}>{label}</option>
 		{/each}
 	</select>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 237b573..4b921bb 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -51,21 +51,21 @@
 		<div class="flex flex-col gap-8" in:fade={fadeDefault}>
 			{#if recent && recent.count > 0}
 				<Carousel title="Recently added" href={recentLink}>
-					{#each recent.edges as comic}
+					{#each recent.edges as comic (comic.id)}
 						<ComicCard coverOnly {comic} />
 					{/each}
 				</Carousel>
 			{/if}
 			{#if favourites && favourites.count > 0}
 				<Carousel title="Favourites" href={favouriteLink}>
-					{#each favourites.edges as comic}
+					{#each favourites.edges as comic (comic.id)}
 						<ComicCard coverOnly {comic} />
 					{/each}
 				</Carousel>
 			{/if}
 			{#if bookmarked && bookmarked.count > 0}
 				<Carousel title="Bookmarks" href={bookmarkLink}>
-					{#each bookmarked.edges as comic}
+					{#each bookmarked.edges as comic (comic.id)}
 						<ComicCard coverOnly {comic} />
 					{/each}
 				</Carousel>
-- 
cgit v1.2.3-2-gb3c3