fix: resolve eslint errors for CI compliance

jkalasas · jkalasas · commit 4920e7e4f884 · 2026-01-15T01:11:33.000+08:00
- remove unused imports across components and routes
- add keys to all {#each} blocks to fix svelte/require-each-key
- configure no-unused-vars to allow underscore-prefixed variables
- fix $effect patterns to avoid no-unused-expressions
- disable svelte/no-navigation-without-resolve (Button handles internally)
- Button component now resolves hrefs internally using resolveRoute
diff --git a/eslint.config.js b/eslint.config.js
@@ -24,7 +24,11 @@ export default defineConfig(
 		rules: {
 			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
 			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
-			'no-undef': 'off'
+			'no-undef': 'off',
+			'@typescript-eslint/no-unused-vars': [
+				'error',
+				{ argsIgnorePattern: '^_', varsIgnorePattern: '^_' }
+			]
 		}
 	},
 	{
@@ -36,6 +40,10 @@ export default defineConfig(
 				parser: ts.parser,
 				svelteConfig
 			}
+		},
+		rules: {
+			// Disabled: Button component handles resolveRoute internally
+			'svelte/no-navigation-without-resolve': 'off'
 		}
 	}
 );
diff --git a/src/lib/components/custom/assessment-results.svelte b/src/lib/components/custom/assessment-results.svelte
@@ -48,7 +48,7 @@
 				Strengths
 			</h3>
 			<ul class="space-y-3">
-				{#each assessment.pros as pro}
+				{#each assessment.pros as pro, i (i)}
 					<li class="flex items-start gap-3">
 						<CheckCircle2 class="mt-0.5 h-5 w-5 flex-shrink-0 text-green-600 dark:text-green-400" />
 						<span class="text-sm leading-relaxed">{pro}</span>
@@ -68,7 +68,7 @@
 				Concerns
 			</h3>
 			<ul class="space-y-3">
-				{#each assessment.cons as con}
+				{#each assessment.cons as con, i (i)}
 					<li class="flex items-start gap-3">
 						<XCircle class="mt-0.5 h-5 w-5 flex-shrink-0 text-red-600 dark:text-red-400" />
 						<span class="text-sm leading-relaxed">{con}</span>
diff --git a/src/lib/components/custom/history-item.svelte b/src/lib/components/custom/history-item.svelte
@@ -28,12 +28,6 @@
 		}
 	}
 
-	function getScoreColor(score: number): string {
-		if (score >= 8) return 'bg-green-500';
-		if (score >= 6) return 'bg-yellow-500';
-		return 'bg-red-500';
-	}
-
 	function getScoreVariant(score: number): 'default' | 'secondary' | 'destructive' | 'outline' {
 		if (score >= 8) return 'default';
 		if (score >= 6) return 'secondary';
@@ -84,7 +78,7 @@
 					<div>
 						<h4 class="mb-2 text-sm font-semibold text-green-600 dark:text-green-500">Pros</h4>
 						<ul class="space-y-1 text-sm">
-							{#each entry.assessment.pros.slice(0, 3) as pro}
+							{#each entry.assessment.pros.slice(0, 3) as pro, i (i)}
 								<li class="text-muted-foreground">• {pro}</li>
 							{/each}
 							{#if entry.assessment.pros.length > 3}
@@ -100,7 +94,7 @@
 					<div>
 						<h4 class="mb-2 text-sm font-semibold text-red-600 dark:text-red-500">Cons</h4>
 						<ul class="space-y-1 text-sm">
-							{#each entry.assessment.cons.slice(0, 3) as con}
+							{#each entry.assessment.cons.slice(0, 3) as con, i (i)}
 								<li class="text-muted-foreground">• {con}</li>
 							{/each}
 							{#if entry.assessment.cons.length > 3}
@@ -117,7 +111,7 @@
 				<div class="mt-4 border-t pt-4">
 					<h4 class="mb-2 text-xs font-semibold text-muted-foreground">Key Ingredients</h4>
 					<div class="flex flex-wrap gap-1">
-						{#each entry.product.ingredients.slice(0, 5) as ingredient}
+						{#each entry.product.ingredients.slice(0, 5) as ingredient, i (i)}
 							<Badge variant="outline" class="text-xs">{ingredient}</Badge>
 						{/each}
 						{#if entry.product.ingredients.length > 5}
diff --git a/src/lib/components/custom/image-upload.svelte b/src/lib/components/custom/image-upload.svelte
@@ -4,15 +4,7 @@
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
 	import { Badge } from '$lib/components/ui/badge';
-	import {
-		Camera,
-		Upload,
-		SwitchCamera,
-		X,
-		Sparkles,
-		RefreshCw,
-		Image as ImageIcon
-	} from '@lucide/svelte';
+	import { Camera, SwitchCamera, X, Sparkles, RefreshCw, Image as ImageIcon } from '@lucide/svelte';
 	import { onMount } from 'svelte';
 
 	interface Props {
@@ -292,7 +284,7 @@
 
 						<!-- Image Previews Grid -->
 						<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
-							{#each images as image, index}
+							{#each images as image, index (index)}
 								<div
 									class="group relative aspect-square overflow-hidden rounded-xl border-2 bg-muted shadow-sm transition-shadow hover:shadow-md"
 								>
diff --git a/src/lib/components/custom/product-info.svelte b/src/lib/components/custom/product-info.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 	import { Badge } from '$lib/components/ui/badge';
 	import { Package, FileText, FlaskConical } from '@lucide/svelte';
@@ -47,7 +46,7 @@
 					Ingredients ({product.ingredients.length})
 				</h3>
 				<div class="flex flex-wrap gap-2">
-					{#each product.ingredients as ingredient}
+					{#each product.ingredients as ingredient, i (i)}
 						<Badge variant="secondary" class="px-3 py-1.5 text-sm">{ingredient}</Badge>
 					{/each}
 				</div>
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
@@ -42,6 +42,8 @@
 </script>
 
 <script lang="ts">
+	import { resolveRoute } from '$app/paths';
+
 	let {
 		class: className,
 		variant = 'default',
@@ -53,14 +55,17 @@
 		children,
 		...restProps
 	}: ButtonProps = $props();
+
+	// Resolve the route for internal navigation
+	const resolvedHref = $derived(href ? resolveRoute(href as '/') : undefined);
 </script>
 
 {#if href}
 	<a
 		bind:this={ref}
 		data-slot="button"
 		class={cn(buttonVariants({ variant, size }), className)}
-		href={disabled ? undefined : href}
+		href={disabled ? undefined : resolvedHref}
 		aria-disabled={disabled}
 		role={disabled ? 'link' : undefined}
 		tabindex={disabled ? -1 : undefined}
diff --git a/src/lib/db/firestore-history.ts b/src/lib/db/firestore-history.ts
@@ -9,7 +9,6 @@ import {
 	query,
 	orderBy,
 	where,
-	type DocumentData,
 	Timestamp
 } from 'firebase/firestore';
 import type { Product, ProductAssessment } from '$lib/ai/base';
diff --git a/src/lib/db/firestore-products.ts b/src/lib/db/firestore-products.ts
@@ -52,7 +52,7 @@ class FirestoreProductsDB {
 		}
 
 		const docRef = doc(this.getCollectionRef(), product.id);
-		const { id, ...updateData } = product;
+		const { id: _id, ...updateData } = product;
 		await updateDoc(docRef, {
 			...updateData,
 			updatedAt: Timestamp.now()
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import '../app.css';
 	import SkeenLogo from '$lib/assets/skeen.svg';
+	import { resolveRoute } from '$app/paths';
 	import { page } from '$app/state';
 	import Button from '$lib/components/ui/button/button.svelte';
 	import { History, User, GitCompare, Heart, Package, LogOut, LogIn } from '@lucide/svelte';
@@ -62,7 +63,7 @@
 		>
 			<div class="container mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
 				<div class="flex h-16 items-center justify-between">
-					<a href="/" class="flex items-center text-xl font-bold">
+					<a href={resolveRoute('/')} class="flex items-center text-xl font-bold">
 						<!-- <Sparkles class="h-6 w-6 text-primary" /> -->
 						<img src={SkeenLogo} alt="Skeen Logo" class="h-6 w-6" />
 						<span class="text-2xl">keen</span>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -4,7 +4,7 @@
 	import * as Dialog from '$lib/components/ui/dialog';
 	import * as Tabs from '$lib/components/ui/tabs';
 	import { Button } from '$lib/components/ui/button';
-	import { Sparkles, AlertCircle, User, Info, Save, Search, Database } from '@lucide/svelte';
+	import { AlertCircle, User, Info, Save, Search } from '@lucide/svelte';
 	import type { BaseAIClient, Product, ProductAssessment } from '$lib/ai/base';
 	import ImageUpload from '$lib/components/custom/image-upload.svelte';
 	import ProductEntry from '$lib/components/custom/product-entry.svelte';
diff --git a/src/routes/companion/+page.svelte b/src/routes/companion/+page.svelte
@@ -222,7 +222,7 @@
 			</div>
 
 			<div class="grid gap-6 lg:grid-cols-2 xl:grid-cols-3">
-				{#each products as product, index (index)}
+				{#each products as _product, index (index)}
 					<MultiProductEntry
 						bind:this={productComponents[index]}
 						bind:product={products[index]}
diff --git a/src/routes/comparison/+page.svelte b/src/routes/comparison/+page.svelte
@@ -226,7 +226,7 @@
 			</div>
 
 			<div class="grid gap-6 lg:grid-cols-2 xl:grid-cols-3">
-				{#each products as product, index (index)}
+				{#each products as _product, index (index)}
 					<MultiProductEntry
 						bind:this={productComponents[index]}
 						bind:product={products[index]}
diff --git a/src/routes/history/+page.svelte b/src/routes/history/+page.svelte
@@ -42,8 +42,9 @@
 
 	// Reset to page 1 when search changes
 	$effect(() => {
-		searchQuery;
-		currentPage = 1;
+		if (searchQuery !== undefined) {
+			currentPage = 1;
+		}
 	});
 
 	onMount(() => {
@@ -188,7 +189,7 @@
 							<ChevronLeft class="h-4 w-4" />
 						</Button>
 
-						{#each getPaginationRange() as page}
+						{#each getPaginationRange() as page, i (i)}
 							{#if page === '...'}
 								<span class="px-2 text-muted-foreground">…</span>
 							{:else}
diff --git a/src/routes/products/+page.svelte b/src/routes/products/+page.svelte
@@ -3,7 +3,6 @@
 	import { productsStore } from '$lib/stores/products.svelte';
 	import type { StoredProduct } from '$lib/db/firestore-products';
 	import type { Product } from '$lib/ai/base';
-	import ProductInfo from '$lib/components/custom/product-info.svelte';
 	import ImageUpload from '$lib/components/custom/image-upload.svelte';
 	import ProductEntry from '$lib/components/custom/product-entry.svelte';
 	import * as Alert from '$lib/components/ui/alert';
@@ -69,8 +68,9 @@
 
 	// Reset to page 1 when search changes
 	$effect(() => {
-		searchQuery;
-		currentPage = 1;
+		if (searchQuery !== undefined) {
+			currentPage = 1;
+		}
 	});
 
 	onMount(() => {
@@ -345,7 +345,7 @@
 								<div class="mb-3">
 									<p class="mb-1 text-xs font-medium text-muted-foreground">Key Ingredients:</p>
 									<div class="flex flex-wrap gap-1">
-										{#each product.ingredients.slice(0, 3) as ingredient}
+										{#each product.ingredients.slice(0, 3) as ingredient, i (i)}
 											<span
 												class="rounded-md bg-secondary px-2 py-0.5 text-xs text-secondary-foreground"
 											>
@@ -390,7 +390,7 @@
 					</Button>
 
 					<div class="flex items-center gap-1">
-						{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
+						{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page (page)}
 							{#if page === 1 || page === totalPages || (page >= currentPage - 1 && page <= currentPage + 1)}
 								<Button
 									variant={currentPage === page ? 'default' : 'outline'}
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import ProfileForm from '$lib/components/custom/profile-form.svelte';
 	import AuthGuard from '$lib/components/custom/auth-guard.svelte';
-	import * as Alert from '$lib/components/ui/alert';
 	import { profileStore } from '$lib/stores/profile.svelte';
 	import type { UserProfile } from '$lib/types/profile';
 	import { User } from '@lucide/svelte';

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,11 @@ export default defineConfig(`
`24`	`24`	`rules: {`
`25`	`25`	`// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.`
`26`	`26`	`// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors`
`27`		`- 'no-undef': 'off'`
	`27`	`+ 'no-undef': 'off',`
	`28`	`+ '@typescript-eslint/no-unused-vars': [`
	`29`	`+ 'error',`
	`30`	`+ { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }`
	`31`	`+ ]`
`28`	`32`	`}`
`29`	`33`	`},`
`30`	`34`	`{`
`@@ -36,6 +40,10 @@ export default defineConfig(`
`36`	`40`	`parser: ts.parser,`
`37`	`41`	`svelteConfig`
`38`	`42`	`}`
	`43`	`+ },`
	`44`	`+ rules: {`
	`45`	`+ // Disabled: Button component handles resolveRoute internally`
	`46`	`+ 'svelte/no-navigation-without-resolve': 'off'`
`39`	`47`	`}`
`40`	`48`	`}`
`41`	`49`	`);`
Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@ class FirestoreProductsDB {`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`const docRef = doc(this.getCollectionRef(), product.id);`
`55`		`- const { id, ...updateData } = product;`
	`55`	`+ const { id: _id, ...updateData } = product;`
`56`	`56`	`await updateDoc(docRef, {`
`57`	`57`	`...updateData,`
`58`	`58`	`updatedAt: Timestamp.now()`