From c21793baaf439c22e90bedb8a2ca7671535fc30f Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Fri, 3 Apr 2026 12:01:17 +0200
Subject: [PATCH] fix: resolve all 40 Svelte dev warnings for clean startup

- Add $state() to 4 reactive variables (guestMode, emailInput, passwordInput, searchInputElement)
- Replace 3 deprecated <svelte:component> with direct component references
- Fix 8 a11y issues: add ARIA roles, tabindex, keyboard handlers to click-handler divs
- Remove 22 unused CSS selectors across 8 shared-ui components

Zero warnings on dev startup.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../onboarding/steps/ProfileStep.svelte       |  2 +-
 .../apps/web/src/routes/(app)/+layout.svelte  |  2 +-
 .../src/components/AuthGateModal.svelte       | 10 +++++--
 .../src/components/GuestWelcomeModal.svelte   |  4 ++-
 .../shared-auth-ui/src/pages/LoginPage.svelte |  4 +--
 .../src/bottom-stack/NotificationBar.svelte   |  3 ++-
 .../src/command-bar/CommandBar.svelte         | 20 --------------
 .../src/context-menu/ContextMenu.svelte       |  6 ++++-
 packages/shared-ui/src/dnd/ActionZone.svelte  |  3 ++-
 .../src/molecules/ConfirmationPopover.svelte  | 12 +++++++--
 .../src/navigation/GlobalSpotlight.svelte     | 15 ++++++++---
 .../src/navigation/PillDropdown.svelte        |  5 ----
 .../src/navigation/PillTabGroup.svelte        |  6 -----
 .../navigation/PillTimeRangeSelector.svelte   | 17 ------------
 .../src/navigation/PillViewSwitcher.svelte    |  6 -----
 .../shared-ui/src/navigation/TagStrip.svelte  | 16 -----------
 .../ExpandableToolbar.svelte                  | 15 -----------
 .../organisms/network/NetworkControls.svelte  |  2 +-
 .../shared-ui/src/quick-input/InputBar.svelte | 27 -------------------
 packages/shared-uload/src/ShareModal.svelte   | 13 +++++----
 20 files changed, 55 insertions(+), 133 deletions(-)

diff --git a/apps/manacore/apps/web/src/lib/components/onboarding/steps/ProfileStep.svelte b/apps/manacore/apps/web/src/lib/components/onboarding/steps/ProfileStep.svelte
index c4164340e..7d04d112e 100644
--- a/apps/manacore/apps/web/src/lib/components/onboarding/steps/ProfileStep.svelte
+++ b/apps/manacore/apps/web/src/lib/components/onboarding/steps/ProfileStep.svelte
@@ -146,7 +146,7 @@
 
 		<!-- Email (readonly) -->
 		<div>
-			<label class="block text-sm font-medium mb-2 text-muted-foreground">E-Mail</label>
+			<p class="block text-sm font-medium mb-2 text-muted-foreground">E-Mail</p>
 			<div class="px-4 py-3 border rounded-xl bg-muted text-muted-foreground">
 				{authStore.user?.email || 'Nicht verfügbar'}
 			</div>
diff --git a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte b/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
index 6455d399c..97a9a9910 100644
--- a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
@@ -229,7 +229,7 @@
 	}
 
 	// ── Guest Mode ──────────────────────────────────────────
-	let guestMode: GuestMode | null = null;
+	let guestMode = $state<GuestMode | null>(null);
 
 	// ── Onboarding ──────────────────────────────────────────
 	function handleOnboardingComplete() {
diff --git a/packages/shared-auth-ui/src/components/AuthGateModal.svelte b/packages/shared-auth-ui/src/components/AuthGateModal.svelte
index d6855cf23..c6faeb4df 100644
--- a/packages/shared-auth-ui/src/components/AuthGateModal.svelte
+++ b/packages/shared-auth-ui/src/components/AuthGateModal.svelte
@@ -203,16 +203,21 @@
 <svelte:window onkeydown={handleKeydown} />
 
 {#if visible}
-	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 	<div
 		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
 		onclick={handleBackdropClick}
+		onkeydown={(e) => {
+			if (e.key === 'Escape') handleBackdropClick();
+		}}
+		role="presentation"
+		tabindex="-1"
 	>
 		<div
 			class="bg-card border-border relative mx-4 w-full max-w-md rounded-xl border p-6 shadow-2xl"
 			role="dialog"
 			aria-modal="true"
 			aria-labelledby="auth-gate-title"
+			tabindex="-1"
 			onclick={(e) => e.stopPropagation()}
 			use:trapFocus
 		>
@@ -230,7 +235,8 @@
 			<div
 				class="bg-primary/10 mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full"
 			>
-				<svelte:component this={ActionIcon()} size={32} class="text-primary" />
+				{@const Icon = ActionIcon()}
+				<Icon size={32} class="text-primary" />
 			</div>
 
 			<!-- Title -->
diff --git a/packages/shared-auth-ui/src/components/GuestWelcomeModal.svelte b/packages/shared-auth-ui/src/components/GuestWelcomeModal.svelte
index ce93ce7aa..8fb0bab4c 100644
--- a/packages/shared-auth-ui/src/components/GuestWelcomeModal.svelte
+++ b/packages/shared-auth-ui/src/components/GuestWelcomeModal.svelte
@@ -238,10 +238,12 @@
 
 {#if visible && appInfo}
 	<!-- Modal Backdrop -->
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<div
 		class="modal-backdrop"
 		onclick={handleBackdropClick}
+		onkeydown={(e) => {
+			if (e.key === 'Escape') handleBackdropClick();
+		}}
 		role="dialog"
 		aria-modal="true"
 		aria-labelledby="welcome-title"
diff --git a/packages/shared-auth-ui/src/pages/LoginPage.svelte b/packages/shared-auth-ui/src/pages/LoginPage.svelte
index de37b9210..874f90ba7 100644
--- a/packages/shared-auth-ui/src/pages/LoginPage.svelte
+++ b/packages/shared-auth-ui/src/pages/LoginPage.svelte
@@ -172,8 +172,8 @@
 	let rememberMe = $state(false);
 	let showSuccess = $state(false);
 	let shakeError = $state(false);
-	let emailInput: HTMLInputElement;
-	let passwordInput: HTMLInputElement;
+	let emailInput = $state<HTMLInputElement | undefined>(undefined);
+	let passwordInput = $state<HTMLInputElement | undefined>(undefined);
 	let successAnnouncement = $state('');
 	let showVerifiedBanner = $state(verified);
 	let showEmailNotVerified = $state(false);
diff --git a/packages/shared-ui/src/bottom-stack/NotificationBar.svelte b/packages/shared-ui/src/bottom-stack/NotificationBar.svelte
index 3926b26fb..7e4ff5ecd 100644
--- a/packages/shared-ui/src/bottom-stack/NotificationBar.svelte
+++ b/packages/shared-ui/src/bottom-stack/NotificationBar.svelte
@@ -32,7 +32,8 @@
 			{#if active.action}
 				<button class="notification-action" onclick={active.action.onClick}>
 					{#if active.action.icon}
-						<svelte:component this={active.action.icon} size={14} weight="bold" />
+						{@const ActionIcon = active.action.icon}
+						<ActionIcon size={14} weight="bold" />
 					{/if}
 					{active.action.label}
 					<ArrowRight size={12} />
diff --git a/packages/shared-ui/src/command-bar/CommandBar.svelte b/packages/shared-ui/src/command-bar/CommandBar.svelte
index b1656a282..d9626ede1 100644
--- a/packages/shared-ui/src/command-bar/CommandBar.svelte
+++ b/packages/shared-ui/src/command-bar/CommandBar.svelte
@@ -439,13 +439,6 @@
 		border-bottom: 1px solid hsl(var(--color-border));
 	}
 
-	.command-icon {
-		width: 1.25rem;
-		height: 1.25rem;
-		color: hsl(var(--color-muted-foreground));
-		flex-shrink: 0;
-	}
-
 	/* Input with syntax highlighting overlay */
 	.input-highlight-container {
 		position: relative;
@@ -668,13 +661,6 @@
 		text-overflow: ellipsis;
 	}
 
-	.result-favorite {
-		width: 1rem;
-		height: 1rem;
-		color: hsl(var(--color-error));
-		flex-shrink: 0;
-	}
-
 	.quick-actions-list {
 		padding: 0.5rem;
 	}
@@ -699,12 +685,6 @@
 		background: hsl(var(--color-surface-hover));
 	}
 
-	.quick-action-icon {
-		width: 1.25rem;
-		height: 1.25rem;
-		color: hsl(var(--color-muted-foreground));
-	}
-
 	.quick-action span {
 		flex: 1;
 		font-size: 0.9375rem;
diff --git a/packages/shared-ui/src/context-menu/ContextMenu.svelte b/packages/shared-ui/src/context-menu/ContextMenu.svelte
index 64fe9650e..cd848fa1c 100644
--- a/packages/shared-ui/src/context-menu/ContextMenu.svelte
+++ b/packages/shared-ui/src/context-menu/ContextMenu.svelte
@@ -86,7 +86,6 @@
 
 {#if visible}
 	<!-- Backdrop to block clicks on elements behind -->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="context-menu-backdrop"
 		onpointerdown={(e) => {
@@ -104,6 +103,11 @@
 			e.stopPropagation();
 			onClose();
 		}}
+		onkeydown={(e) => {
+			if (e.key === 'Escape') onClose();
+		}}
+		role="presentation"
+		tabindex="-1"
 	></div>
 
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
diff --git a/packages/shared-ui/src/dnd/ActionZone.svelte b/packages/shared-ui/src/dnd/ActionZone.svelte
index 6df0a59ba..8dfbb44ca 100644
--- a/packages/shared-ui/src/dnd/ActionZone.svelte
+++ b/packages/shared-ui/src/dnd/ActionZone.svelte
@@ -60,7 +60,8 @@
 		role="button"
 		tabindex="-1"
 	>
-		<svelte:component this={iconComponent} size={20} weight="bold" />
+		{@const Icon = iconComponent}
+		<Icon size={20} weight="bold" />
 		{#if label}
 			<span class="action-label">{label}</span>
 		{/if}
diff --git a/packages/shared-ui/src/molecules/ConfirmationPopover.svelte b/packages/shared-ui/src/molecules/ConfirmationPopover.svelte
index 1acabb8e0..bedfc21d0 100644
--- a/packages/shared-ui/src/molecules/ConfirmationPopover.svelte
+++ b/packages/shared-ui/src/molecules/ConfirmationPopover.svelte
@@ -217,8 +217,16 @@
 <svelte:window onkeydown={handleKeydown} onclick={handleClickOutside} />
 
 <!-- Trigger wrapper -->
-<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-<div class="confirmation-popover-trigger" bind:this={triggerRef} onclick={handleTriggerClick}>
+<div
+	class="confirmation-popover-trigger"
+	bind:this={triggerRef}
+	onclick={handleTriggerClick}
+	onkeydown={(e) => {
+		if (e.key === 'Enter' || e.key === ' ') handleTriggerClick();
+	}}
+	role="button"
+	tabindex="0"
+>
 	{@render children()}
 </div>
 
diff --git a/packages/shared-ui/src/navigation/GlobalSpotlight.svelte b/packages/shared-ui/src/navigation/GlobalSpotlight.svelte
index 005ae84b0..fd3d7d1d9 100644
--- a/packages/shared-ui/src/navigation/GlobalSpotlight.svelte
+++ b/packages/shared-ui/src/navigation/GlobalSpotlight.svelte
@@ -291,10 +291,19 @@
 </script>
 
 {#if open}
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="spotlight-overlay" onclick={onClose} onkeydown={handleKeydown}>
+	<div
+		class="spotlight-overlay"
+		onclick={onClose}
+		onkeydown={handleKeydown}
+		role="presentation"
+		tabindex="-1"
+	>
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="spotlight-modal" onclick={(e) => e.stopPropagation()}>
+		<div
+			class="spotlight-modal"
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => e.stopPropagation()}
+		>
 			<!-- Search input -->
 			<div class="spotlight-input-wrapper">
 				<svg class="spotlight-search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/packages/shared-ui/src/navigation/PillDropdown.svelte b/packages/shared-ui/src/navigation/PillDropdown.svelte
index ef35d6ddc..25889ea8b 100644
--- a/packages/shared-ui/src/navigation/PillDropdown.svelte
+++ b/packages/shared-ui/src/navigation/PillDropdown.svelte
@@ -591,11 +591,6 @@
 		border-color: var(--color-primary-800, rgba(59, 130, 246, 0.4));
 	}
 
-	.split-icon {
-		width: 0.875rem;
-		height: 0.875rem;
-	}
-
 	/* Footer for custom content (e.g., a11y toggles) */
 	.dropdown-footer {
 		animation: fanIn 0.15s ease-out forwards;
diff --git a/packages/shared-ui/src/navigation/PillTabGroup.svelte b/packages/shared-ui/src/navigation/PillTabGroup.svelte
index 4f7159a5d..316720fc8 100644
--- a/packages/shared-ui/src/navigation/PillTabGroup.svelte
+++ b/packages/shared-ui/src/navigation/PillTabGroup.svelte
@@ -208,12 +208,6 @@
 		background: rgba(255, 255, 255, 0.15);
 	}
 
-	.tab-icon {
-		width: 1.125rem;
-		height: 1.125rem;
-		flex-shrink: 0;
-	}
-
 	.tab-label {
 		font-size: 0.8125rem;
 		font-weight: 500;
diff --git a/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte b/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
index c5a51427f..c4e640f46 100644
--- a/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
+++ b/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
@@ -273,12 +273,6 @@
 			0 4px 6px -2px hsl(var(--color-foreground) / 0.05);
 	}
 
-	.pill-icon {
-		width: 1rem;
-		height: 1rem;
-		flex-shrink: 0;
-	}
-
 	.pill-label {
 		font-size: 0.8125rem;
 	}
@@ -316,17 +310,6 @@
 		color: hsl(var(--color-primary));
 	}
 
-	.chevron-icon {
-		width: 0.75rem;
-		height: 0.75rem;
-		transition: transform 0.2s;
-		margin-left: 0.125rem;
-	}
-
-	.chevron-icon.rotated {
-		transform: rotate(180deg);
-	}
-
 	.backdrop {
 		position: fixed;
 		inset: 0;
diff --git a/packages/shared-ui/src/navigation/PillViewSwitcher.svelte b/packages/shared-ui/src/navigation/PillViewSwitcher.svelte
index 4befb2869..87a03314a 100644
--- a/packages/shared-ui/src/navigation/PillViewSwitcher.svelte
+++ b/packages/shared-ui/src/navigation/PillViewSwitcher.svelte
@@ -174,12 +174,6 @@
 		cursor: not-allowed;
 	}
 
-	.switcher-icon {
-		width: 1rem;
-		height: 1rem;
-		flex-shrink: 0;
-	}
-
 	.switcher-label {
 		line-height: 1;
 	}
diff --git a/packages/shared-ui/src/navigation/TagStrip.svelte b/packages/shared-ui/src/navigation/TagStrip.svelte
index 6d0d13086..cd90b639a 100644
--- a/packages/shared-ui/src/navigation/TagStrip.svelte
+++ b/packages/shared-ui/src/navigation/TagStrip.svelte
@@ -381,22 +381,6 @@
 		transform: scale(0.95) !important;
 	}
 
-	/* DnD: Item hovering over tag pill */
-	.tag-drop-highlight {
-		transform: scale(1.15) !important;
-		background: var(--tag-color) !important;
-		border-color: var(--tag-color) !important;
-		box-shadow: 0 0 16px color-mix(in srgb, var(--tag-color) 40%, transparent) !important;
-	}
-
-	.tag-drop-highlight .tag-dot {
-		background-color: white !important;
-	}
-
-	.tag-drop-highlight .tag-name {
-		color: white !important;
-	}
-
 	/* DnD: Success flash after drop */
 	:global(.tag-pill.mana-passive-zone-success) {
 		animation: tag-drop-success 400ms ease-out;
diff --git a/packages/shared-ui/src/navigation/expandable-toolbar/ExpandableToolbar.svelte b/packages/shared-ui/src/navigation/expandable-toolbar/ExpandableToolbar.svelte
index 5742a1b1c..4a56ce0aa 100644
--- a/packages/shared-ui/src/navigation/expandable-toolbar/ExpandableToolbar.svelte
+++ b/packages/shared-ui/src/navigation/expandable-toolbar/ExpandableToolbar.svelte
@@ -181,21 +181,6 @@
 		background: hsl(var(--color-muted));
 	}
 
-	.toolbar-fab.active .fab-icon {
-		color: hsl(var(--color-primary));
-	}
-
-	.fab-icon {
-		width: 1.5rem;
-		height: 1.5rem;
-		color: hsl(var(--color-muted-foreground));
-		transition: color 0.2s ease;
-	}
-
-	.toolbar-fab:hover .fab-icon {
-		color: hsl(var(--color-foreground));
-	}
-
 	.toolbar-divider {
 		width: 1px;
 		height: 1.5rem;
diff --git a/packages/shared-ui/src/organisms/network/NetworkControls.svelte b/packages/shared-ui/src/organisms/network/NetworkControls.svelte
index 8fd953b13..86a0cafe6 100644
--- a/packages/shared-ui/src/organisms/network/NetworkControls.svelte
+++ b/packages/shared-ui/src/organisms/network/NetworkControls.svelte
@@ -65,7 +65,7 @@
 	let showFilters = $state(false);
 	let showKeyboardHelp = $state(false);
 	let strengthValue = $state(minStrength);
-	let searchInputElement: HTMLInputElement;
+	let searchInputElement = $state<HTMLInputElement | undefined>(undefined);
 
 	// Sync searchInput with external searchQuery
 	$effect(() => {
diff --git a/packages/shared-ui/src/quick-input/InputBar.svelte b/packages/shared-ui/src/quick-input/InputBar.svelte
index 7484bc1d1..e374f969c 100644
--- a/packages/shared-ui/src/quick-input/InputBar.svelte
+++ b/packages/shared-ui/src/quick-input/InputBar.svelte
@@ -688,11 +688,6 @@
 		flex-shrink: 0;
 	}
 
-	.app-icon svg {
-		width: 100%;
-		height: 100%;
-	}
-
 	.input-wrapper {
 		position: relative;
 		flex: 1;
@@ -799,11 +794,6 @@
 		transform: none;
 	}
 
-	.submit-btn svg {
-		width: 1rem;
-		height: 1rem;
-	}
-
 	/* Results Panel */
 	.results-panel {
 		position: absolute;
@@ -878,11 +868,6 @@
 		background: hsl(var(--color-success));
 	}
 
-	.result-avatar.create-avatar svg {
-		width: 1.25rem;
-		height: 1.25rem;
-	}
-
 	.result-item.search-option:hover,
 	.result-item.search-option.selected {
 		background: hsl(var(--color-primary) / 0.1);
@@ -892,11 +877,6 @@
 		background: hsl(var(--color-muted-foreground) / 0.3);
 	}
 
-	.result-avatar.search-avatar svg {
-		width: 1.125rem;
-		height: 1.125rem;
-	}
-
 	.result-info {
 		flex: 1;
 		min-width: 0;
@@ -918,13 +898,6 @@
 		text-overflow: ellipsis;
 	}
 
-	.favorite-icon {
-		width: 1rem;
-		height: 1rem;
-		color: hsl(var(--color-error, 0 84% 60%));
-		flex-shrink: 0;
-	}
-
 	.create-shortcut {
 		padding: 0.25rem 0.5rem;
 		font-size: 0.6875rem;
diff --git a/packages/shared-uload/src/ShareModal.svelte b/packages/shared-uload/src/ShareModal.svelte
index 88e8d9e78..aee95fbe5 100644
--- a/packages/shared-uload/src/ShareModal.svelte
+++ b/packages/shared-uload/src/ShareModal.svelte
@@ -101,18 +101,21 @@
 <svelte:window onkeydown={handleKeydown} />
 
 {#if visible}
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<div
 		class="fixed inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
 		style="z-index: 9990;"
 		onclick={handleBackdropClick}
-		role="dialog"
-		aria-modal="true"
+		onkeydown={(e) => {
+			if (e.key === 'Escape') handleBackdropClick();
+		}}
+		role="presentation"
 		tabindex="-1"
 	>
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			class="w-full max-w-md rounded-2xl border border-white/10 bg-gray-900 shadow-2xl"
+			role="dialog"
+			aria-modal="true"
+			tabindex="-1"
 			onclick={(e) => e.stopPropagation()}
 			onkeydown={(e) => e.stopPropagation()}
 		>
@@ -143,7 +146,7 @@
 
 						{#if title}
 							<div>
-								<label class="block text-xs text-gray-400 mb-1">Titel</label>
+								<p class="block text-xs text-gray-400 mb-1">Titel</p>
 								<p class="text-sm text-white">{title}</p>
 							</div>
 						{/if}