From 44e1849821d03e03f44a084c95309415583e990d Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Fri, 10 Apr 2026 19:05:25 +0300
Subject: [PATCH] fix: resolve all linter errors and a11y warnings

- Fix TS errors: editMode property order, implicit any, string|undefined
- Add $state() to bind:this element refs (IconGrid, EntityPicker, etc.)
- Fix a11y: labels, aria-labels, roles, tabindex on dialogs
- Remove unused imports (tick, svelte-i18n)
- Make AutocompleteInput/TagsInput accept optional string values
---
 .../components/admin/PermissionEditor.svelte  |  5 ++++
 src/lib/components/app/AppForm.svelte         |  1 +
 src/lib/components/app/AppIconPicker.svelte   |  1 +
 src/lib/components/app/AppLinksEditor.svelte  |  1 +
 .../board/BoardPropertiesPanel.svelte         |  2 ++
 .../components/board/BoardShareDialog.svelte  |  3 ++-
 src/lib/components/search/SearchDialog.svelte |  7 ++---
 .../settings/CustomCssEditor.svelte           |  1 +
 .../settings/ThemeCustomizer.svelte           |  4 ++-
 .../components/ui/AutocompleteInput.svelte    |  6 ++---
 src/lib/components/ui/ConfirmDialog.svelte    |  1 +
 src/lib/components/ui/EntityPicker.svelte     |  4 +--
 src/lib/components/ui/IconGrid.svelte         |  5 ++--
 src/lib/components/ui/TagsInput.svelte        | 10 +++----
 src/lib/components/widget/AppWidget.svelte    |  2 ++
 .../widget/WidgetCreationForm.svelte          |  5 ++++
 src/routes/+layout.svelte                     | 26 +++++++++++--------
 src/routes/boards/[boardId]/+page.server.ts   |  2 +-
 src/routes/boards/[boardId]/edit/+page.svelte |  2 ++
 src/routes/login/+page.svelte                 |  4 +--
 20 files changed, 59 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/admin/PermissionEditor.svelte b/src/lib/components/admin/PermissionEditor.svelte
index 70dcd2a..9f538a7 100644
--- a/src/lib/components/admin/PermissionEditor.svelte
+++ b/src/lib/components/admin/PermissionEditor.svelte
@@ -133,6 +133,7 @@
 		<h3 class="mb-3 text-sm font-semibold text-card-foreground">{$t('admin.perm_title')}</h3>
 		<div class="grid grid-cols-1 gap-3 sm:grid-cols-5">
 			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label class="mb-1 block text-xs text-muted-foreground">{$t('admin.perm_entity_type')}</label>
 				<IconGrid
 					items={entityTypeItems}
@@ -142,6 +143,7 @@
 				/>
 			</div>
 			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label class="mb-1 block text-xs text-muted-foreground">{$t('admin.perm_entity')}</label>
 				<EntityPicker
 					items={entityPickerItems}
@@ -151,6 +153,7 @@
 				/>
 			</div>
 			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label class="mb-1 block text-xs text-muted-foreground">{$t('admin.perm_target_type')}</label>
 				<IconGrid
 					items={targetTypeItems}
@@ -160,6 +163,7 @@
 				/>
 			</div>
 			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label class="mb-1 block text-xs text-muted-foreground">{$t('admin.perm_target')}</label>
 				<EntityPicker
 					items={targetPickerItems}
@@ -169,6 +173,7 @@
 				/>
 			</div>
 			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label class="mb-1 block text-xs text-muted-foreground">{$t('admin.perm_level')}</label>
 				<div class="flex gap-1">
 					<div class="flex-1">
diff --git a/src/lib/components/app/AppForm.svelte b/src/lib/components/app/AppForm.svelte
index 42930df..9877762 100644
--- a/src/lib/components/app/AppForm.svelte
+++ b/src/lib/components/app/AppForm.svelte
@@ -227,6 +227,7 @@
 			{#if $form.healthcheckEnabled}
 				<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
 					<div>
+						<!-- svelte-ignore a11y_label_has_associated_control -->
 						<label
 							class="mb-1 block text-sm font-medium text-card-foreground"
 						>
diff --git a/src/lib/components/app/AppIconPicker.svelte b/src/lib/components/app/AppIconPicker.svelte
index 2200cf5..99d48b6 100644
--- a/src/lib/components/app/AppIconPicker.svelte
+++ b/src/lib/components/app/AppIconPicker.svelte
@@ -39,6 +39,7 @@
 </script>
 
 <div class="space-y-2">
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="block text-sm font-medium text-card-foreground">{$t('app.icon')}</label>
 
 	<div class="flex gap-2">
diff --git a/src/lib/components/app/AppLinksEditor.svelte b/src/lib/components/app/AppLinksEditor.svelte
index c879a87..e85725a 100644
--- a/src/lib/components/app/AppLinksEditor.svelte
+++ b/src/lib/components/app/AppLinksEditor.svelte
@@ -144,6 +144,7 @@
 					<button
 						type="button"
 						onclick={() => removeLink(link.id)}
+						aria-label="Remove link"
 						class="flex-shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
 					>
 						<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
diff --git a/src/lib/components/board/BoardPropertiesPanel.svelte b/src/lib/components/board/BoardPropertiesPanel.svelte
index 2ab7381..d28b022 100644
--- a/src/lib/components/board/BoardPropertiesPanel.svelte
+++ b/src/lib/components/board/BoardPropertiesPanel.svelte
@@ -91,6 +91,7 @@
 		<button
 			type="button"
 			onclick={onClose}
+			aria-label="Close"
 			class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
 		>
 			<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -111,6 +112,7 @@
 
 			<!-- Icon -->
 			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label class="mb-1 block text-sm font-medium text-foreground">{$t('app.icon') ?? 'Icon'}</label>
 				<IconPickerButton value={icon} onchange={(v) => { icon = v; }} />
 			</div>
diff --git a/src/lib/components/board/BoardShareDialog.svelte b/src/lib/components/board/BoardShareDialog.svelte
index 74d920c..906bd4c 100644
--- a/src/lib/components/board/BoardShareDialog.svelte
+++ b/src/lib/components/board/BoardShareDialog.svelte
@@ -148,10 +148,11 @@
 <svelte:window onkeydown={handleKeydown} />
 
 <!-- Backdrop -->
-<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
 	class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
 	onclick={handleBackdropClick}
+	role="presentation"
 >
 	<div class="mx-4 w-full max-w-lg rounded-xl border border-border bg-card p-6 shadow-xl" role="dialog" aria-modal="true">
 		<!-- Header -->
diff --git a/src/lib/components/search/SearchDialog.svelte b/src/lib/components/search/SearchDialog.svelte
index 97d17b4..7316de0 100644
--- a/src/lib/components/search/SearchDialog.svelte
+++ b/src/lib/components/search/SearchDialog.svelte
@@ -4,8 +4,8 @@
 	import SearchResult from './SearchResult.svelte';
 	import { goto } from '$app/navigation';
 
-	let inputEl: HTMLInputElement;
-	let resultsEl: HTMLDivElement;
+	let inputEl: HTMLInputElement = $state() as HTMLInputElement;
+	let resultsEl: HTMLDivElement = $state() as HTMLDivElement;
 
 	$effect(() => {
 		if (search.open && inputEl) {
@@ -68,10 +68,11 @@
 </script>
 
 {#if search.open}
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<div
 		class="fixed inset-0 z-50 flex items-start justify-center bg-black/50 pt-[15vh] backdrop-blur-sm"
 		onclick={handleBackdropClick}
+		role="presentation"
 		style="animation: searchFadeIn 0.15s ease-out"
 	>
 		<!-- Dialog -->
diff --git a/src/lib/components/settings/CustomCssEditor.svelte b/src/lib/components/settings/CustomCssEditor.svelte
index 915037b..31c5f6f 100644
--- a/src/lib/components/settings/CustomCssEditor.svelte
+++ b/src/lib/components/settings/CustomCssEditor.svelte
@@ -80,6 +80,7 @@
 
 <div class="space-y-3">
 	{#if label}
+		<!-- svelte-ignore a11y_label_has_associated_control -->
 		<label class="block text-sm font-medium text-foreground">{label}</label>
 	{/if}
 
diff --git a/src/lib/components/settings/ThemeCustomizer.svelte b/src/lib/components/settings/ThemeCustomizer.svelte
index 9c8ed21..55c398a 100644
--- a/src/lib/components/settings/ThemeCustomizer.svelte
+++ b/src/lib/components/settings/ThemeCustomizer.svelte
@@ -154,6 +154,7 @@
 
 		<!-- Hue slider -->
 		<div class="mb-4">
+			<!-- svelte-ignore a11y_label_has_associated_control -->
 			<label class="mb-1.5 block text-sm text-muted-foreground">{$t('settings.hue')}</label>
 			<div class="relative">
 				<div
@@ -174,7 +175,8 @@
 
 		<!-- Saturation slider -->
 		<div>
-			<label class="mb-1.5 block text-sm text-muted-foreground">{$t('settings.saturation')}</label>
+			<!-- svelte-ignore a11y_label_has_associated_control -->
+				<label class="mb-1.5 block text-sm text-muted-foreground">{$t('settings.saturation')}</label>
 			<div class="relative">
 				<div
 					class="h-3 w-full rounded-full"
diff --git a/src/lib/components/ui/AutocompleteInput.svelte b/src/lib/components/ui/AutocompleteInput.svelte
index 27c327d..b3abfe9 100644
--- a/src/lib/components/ui/AutocompleteInput.svelte
+++ b/src/lib/components/ui/AutocompleteInput.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-	import { tick } from 'svelte';
-
 	interface Props {
 		id?: string;
 		name?: string;
-		value: string;
+		value: string | undefined;
 		suggestions: string[];
 		placeholder?: string;
 		class?: string;
@@ -25,7 +23,7 @@
 	let containerEl: HTMLDivElement | undefined = $state();
 
 	const filtered = $derived.by(() => {
-		const q = value.trim().toLowerCase();
+		const q = (value ?? '').trim().toLowerCase();
 		if (!q) return suggestions;
 		return suggestions.filter((s) => s.toLowerCase().includes(q));
 	});
diff --git a/src/lib/components/ui/ConfirmDialog.svelte b/src/lib/components/ui/ConfirmDialog.svelte
index 7c807ba..025ff84 100644
--- a/src/lib/components/ui/ConfirmDialog.svelte
+++ b/src/lib/components/ui/ConfirmDialog.svelte
@@ -46,6 +46,7 @@
 		onclick={(e) => e.stopPropagation()}
 		transition:scale={{ start: 0.95, duration: 150 }}
 		role="alertdialog"
+		tabindex="-1"
 		aria-labelledby="confirm-dialog-title"
 		aria-describedby="confirm-dialog-message"
 	>
diff --git a/src/lib/components/ui/EntityPicker.svelte b/src/lib/components/ui/EntityPicker.svelte
index de9306a..3b752a3 100644
--- a/src/lib/components/ui/EntityPicker.svelte
+++ b/src/lib/components/ui/EntityPicker.svelte
@@ -34,8 +34,8 @@
 	let open = $state(false);
 	let query = $state('');
 	let highlightIdx = $state(0);
-	let listEl: HTMLDivElement;
-	let inputEl: HTMLInputElement;
+	let listEl = $state<HTMLDivElement>();
+	let inputEl = $state<HTMLInputElement>();
 
 	const selectedItem = $derived(items.find((i) => i.value === value));
 
diff --git a/src/lib/components/ui/IconGrid.svelte b/src/lib/components/ui/IconGrid.svelte
index 76ce866..b5c364a 100644
--- a/src/lib/components/ui/IconGrid.svelte
+++ b/src/lib/components/ui/IconGrid.svelte
@@ -21,8 +21,8 @@
 		$props();
 
 	let open = $state(false);
-	let triggerEl: HTMLButtonElement;
-	let popupEl: HTMLDivElement;
+	let triggerEl = $state<HTMLButtonElement>();
+	let popupEl = $state<HTMLDivElement>();
 	let filterQuery = $state('');
 
 	const selectedItem = $derived(items.find((i) => i.value === value));
@@ -135,6 +135,7 @@
 	>
 		{#if showFilter}
 			<div class="border-b border-border px-3 py-2">
+				<!-- svelte-ignore a11y_autofocus -->
 				<input
 					type="text"
 					bind:value={filterQuery}
diff --git a/src/lib/components/ui/TagsInput.svelte b/src/lib/components/ui/TagsInput.svelte
index a388636..dac142e 100644
--- a/src/lib/components/ui/TagsInput.svelte
+++ b/src/lib/components/ui/TagsInput.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-	import { t } from 'svelte-i18n';
-
 	interface Props {
 		id?: string;
 		name?: string;
-		value: string;
+		value: string | undefined;
 		suggestions: string[];
 		placeholder?: string;
 		class?: string;
@@ -25,11 +23,11 @@
 	let containerEl: HTMLDivElement | undefined = $state();
 
 	// Parse comma-separated tags
-	const tags = $derived(value.split(',').map((t) => t.trim()).filter(Boolean));
+	const tags = $derived((value ?? '').split(',').map((t) => t.trim()).filter(Boolean));
 
 	// Get the current partial tag being typed (after last comma)
 	const currentPartial = $derived.by(() => {
-		const parts = value.split(',');
+		const parts = (value ?? '').split(',');
 		return parts[parts.length - 1]?.trim() ?? '';
 	});
 
@@ -53,7 +51,7 @@
 
 	function selectItem(item: string) {
 		// Replace the current partial with the selected tag
-		const parts = value.split(',').map((p) => p.trim());
+		const parts = (value ?? '').split(',').map((p) => p.trim());
 		parts[parts.length - 1] = item;
 		value = parts.join(',') + ',';
 		open = false;
diff --git a/src/lib/components/widget/AppWidget.svelte b/src/lib/components/widget/AppWidget.svelte
index 158bc47..8c5f1ac 100644
--- a/src/lib/components/widget/AppWidget.svelte
+++ b/src/lib/components/widget/AppWidget.svelte
@@ -196,6 +196,7 @@
 	{/if}
 {:else if cardSize === 'large'}
 	<!-- Large: icon + name + description + sparkline + tags + links -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="card-hover group rounded-xl {cardStyleClass} p-5 transition-colors hover:border-primary/50"
 		data-app-widget
@@ -291,6 +292,7 @@
 	</div>
 {:else}
 	<!-- Medium (default): icon + name + status + sparkline on hover + links -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="card-hover group rounded-xl {cardStyleClass} p-4 transition-colors hover:border-primary/50"
 		data-app-widget
diff --git a/src/lib/components/widget/WidgetCreationForm.svelte b/src/lib/components/widget/WidgetCreationForm.svelte
index a50fce7..bfb21d5 100644
--- a/src/lib/components/widget/WidgetCreationForm.svelte
+++ b/src/lib/components/widget/WidgetCreationForm.svelte
@@ -363,6 +363,7 @@
 <div class="mb-3 rounded-lg border border-border bg-muted/50 p-3">
 	<!-- Widget Type Selector (Icon Grid) -->
 	<div class="mb-3">
+		<!-- svelte-ignore a11y_label_has_associated_control -->
 		<label class="mb-1 block text-sm font-medium text-foreground">
 			Widget Type
 		</label>
@@ -376,6 +377,7 @@
 	<!-- Type-specific config forms -->
 	{#if selectedWidgetType === 'app'}
 		<div>
+			<!-- svelte-ignore a11y_label_has_associated_control -->
 			<label class="mb-1 block text-sm font-medium text-foreground">
 				{$t('widget.select_app')}
 			</label>
@@ -434,6 +436,7 @@
 	{:else if selectedWidgetType === 'note'}
 		<div class="space-y-3">
 			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label class="mb-1 block text-sm font-medium text-foreground">Format</label>
 				<IconGrid
 					items={noteFormatItems}
@@ -516,6 +519,7 @@
 	{:else if selectedWidgetType === 'clock'}
 		<div class="space-y-3">
 			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label class="mb-1 block text-sm font-medium text-foreground">Clock Style</label>
 				<IconGrid
 					items={clockStyleItems}
@@ -760,6 +764,7 @@
 				/>
 			</div>
 			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label class="mb-1 block text-sm font-medium text-foreground">Source Type</label>
 				<IconGrid
 					items={metricSourceItems}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 52c6a3f..532ebbe 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
 	import type { LayoutData } from './$types.js';
 	import MainLayout from '$lib/components/layout/MainLayout.svelte';
 	import { page } from '$app/stores';
-	import { fade } from 'svelte/transition';
+	import { fly } from 'svelte/transition';
 	import { theme } from '$lib/stores/theme.svelte';
 	import { ui } from '$lib/stores/ui.svelte';
 	import { search } from '$lib/stores/search.svelte';
@@ -22,12 +22,14 @@
 	let { data, children }: { data: LayoutData; children: Snippet } = $props();
 
 	// Apply user preferences from server (overrides localStorage defaults)
-	if (data.userPreferences) {
-		theme.loadFromServer(data.userPreferences);
-		if (data.userPreferences.locale) {
-			i18nLocale.set(data.userPreferences.locale);
+	$effect(() => {
+		if (data.userPreferences) {
+			theme.loadFromServer(data.userPreferences);
+			if (data.userPreferences.locale) {
+				i18nLocale.set(data.userPreferences.locale);
+			}
 		}
-	}
+	});
 
 	// Initialize store effects within component context
 	theme.initEffects();
@@ -38,9 +40,11 @@
 	keyboard.init();
 
 	// Load favorites for authenticated users
-	if (data.user) {
-		favorites.load();
-	}
+	$effect(() => {
+		if (data.user) {
+			favorites.load();
+		}
+	});
 
 	// Listen for cross-tab sync messages (theme changes & data invalidation)
 	const cleanupSync = onSyncMessage((msg) => {
@@ -82,14 +86,14 @@
 		boards={data.sidebarBoards ?? []}
 	>
 		{#key pageKey}
-			<div in:fade={{ duration: 150, delay: 75 }} out:fade={{ duration: 75 }}>
+			<div in:fly={{ y: 6, duration: 150 }}>
 				{@render children()}
 			</div>
 		{/key}
 	</MainLayout>
 {:else}
 	{#key pageKey}
-		<div in:fade={{ duration: 150, delay: 75 }} out:fade={{ duration: 75 }}>
+		<div in:fly={{ y: 6, duration: 150 }}>
 			{@render children()}
 		</div>
 	{/key}
diff --git a/src/routes/boards/[boardId]/+page.server.ts b/src/routes/boards/[boardId]/+page.server.ts
index fe7a54a..c5cd9dd 100644
--- a/src/routes/boards/[boardId]/+page.server.ts
+++ b/src/routes/boards/[boardId]/+page.server.ts
@@ -89,7 +89,7 @@ export const load: PageServerLoad = async ({ params, locals }) => {
 		const appHistories: Record<string, { history: { status: string; responseTime: number | null; checkedAt: string }[]; uptimePercent: number }> = {};
 		for (const [appId, data] of historyMap) {
 			appHistories[appId] = {
-				history: data.history.map((h) => ({ ...h, checkedAt: h.checkedAt.toISOString() })),
+				history: data.history.map((h: { status: string; responseTime: number | null; checkedAt: Date }) => ({ ...h, checkedAt: h.checkedAt.toISOString() })),
 				uptimePercent: data.uptimePercent
 			};
 		}
diff --git a/src/routes/boards/[boardId]/edit/+page.svelte b/src/routes/boards/[boardId]/edit/+page.svelte
index 2246632..2771e88 100644
--- a/src/routes/boards/[boardId]/edit/+page.svelte
+++ b/src/routes/boards/[boardId]/edit/+page.svelte
@@ -318,6 +318,7 @@
 
 					<!-- Background Type -->
 					<div>
+						<!-- svelte-ignore a11y_label_has_associated_control -->
 						<label class="mb-1 block text-sm font-medium text-foreground">{$t('settings.background') ?? 'Background'}</label>
 						<div class="flex flex-wrap gap-1 rounded-lg border border-border bg-muted/50 p-1">
 							{#each ['mesh', 'particles', 'aurora', 'wallpaper', 'none'] as bg (bg)}
@@ -333,6 +334,7 @@
 
 					<!-- Card Size -->
 					<div>
+						<!-- svelte-ignore a11y_label_has_associated_control -->
 						<label class="mb-1 block text-sm font-medium text-foreground">{$t('board.card_size') ?? 'Card Size'}</label>
 						<div class="flex gap-1 rounded-lg border border-border bg-muted/50 p-1">
 							{#each ['compact', 'medium', 'large'] as size (size)}
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index cc35772..5e3652a 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -8,8 +8,8 @@
 
 	const { form, errors, enhance, submitting } = superForm(data.form);
 
-	const showLocalForm = data.authMode === 'local' || data.authMode === 'both';
-	const showOAuthButton = data.authMode === 'oauth' || data.authMode === 'both';
+	const showLocalForm = $derived(data.authMode === 'local' || data.authMode === 'both');
+	const showOAuthButton = $derived(data.authMode === 'oauth' || data.authMode === 'both');
 </script>
 
 <svelte:head>