feat(mvp): phase 7 - UI polish & ambient backgrounds

Add layout system (sidebar, header, main layout), dark/light/system theme with HSL customization, 3 ambient backgrounds (mesh gradient, particle field, aurora), Cmd/Ctrl+K search dialog, page transitions, card hover effects, status pulse animations, skeleton loaders, and responsive design. Polish all existing pages with consistent theming.
2026-03-24 21:37:16 +03:00
parent c5166ba3a9
commit 0bd30c5e17
41 changed files with 2106 additions and 391 deletions
@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { search } from '$lib/stores/search.svelte.js';
+	import SearchResult from './SearchResult.svelte';
+
+	let inputEl: HTMLInputElement;
+
+	const appResults = $derived(search.results.filter((r) => r.type === 'app'));
+	const boardResults = $derived(search.results.filter((r) => r.type === 'board'));
+
+	$effect(() => {
+		if (search.open && inputEl) {
+			// Focus input when dialog opens
+			requestAnimationFrame(() => inputEl?.focus());
+		}
+	});
+
+	function handleBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) {
+			search.close();
+		}
+	}
+</script>
+
+{#if search.open}
+	<!-- Backdrop -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 z-50 flex items-start justify-center bg-black/50 pt-[15vh] backdrop-blur-sm"
+		onclick={handleBackdropClick}
+		onkeydown={(e) => e.key === 'Escape' && search.close()}
+	>
+		<!-- Dialog -->
+		<div
+			class="w-full max-w-lg rounded-lg border border-border bg-popover shadow-2xl"
+			role="dialog"
+			aria-label="Search"
+		>
+			<!-- Input -->
+			<div class="flex items-center gap-2 border-b border-border px-4 py-3">
+				<svg
+					class="h-5 w-5 shrink-0 text-muted-foreground"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<circle cx="11" cy="11" r="8" />
+					<line x1="21" y1="21" x2="16.65" y2="16.65" />
+				</svg>
+				<input
+					bind:this={inputEl}
+					bind:value={search.query}
+					type="text"
+					placeholder="Search apps and boards..."
+					class="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
+				/>
+				<kbd
+					class="hidden rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground sm:inline"
+				>
+					ESC
+				</kbd>
+			</div>
+
+			<!-- Results -->
+			<div class="max-h-[50vh] overflow-y-auto p-2">
+				{#if search.loading}
+					<div class="flex items-center justify-center py-8">
+						<div
+							class="h-5 w-5 animate-spin rounded-full border-2 border-muted-foreground border-t-primary"
+						></div>
+					</div>
+				{:else if search.error}
+					<p class="py-6 text-center text-sm text-destructive">{search.error}</p>
+				{:else if search.query.length < 2}
+					<p class="py-6 text-center text-sm text-muted-foreground">
+						Type at least 2 characters to search
+					</p>
+				{:else if search.results.length === 0}
+					<p class="py-6 text-center text-sm text-muted-foreground">
+						No results for "{search.query}"
+					</p>
+				{:else}
+					{#if appResults.length > 0}
+						<div class="mb-2">
+							<p class="mb-1 px-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+								Apps
+							</p>
+							{#each appResults as result (result.id)}
+								<SearchResult {result} onselect={() => search.close()} />
+							{/each}
+						</div>
+					{/if}
+
+					{#if boardResults.length > 0}
+						<div>
+							<p class="mb-1 px-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+								Boards
+							</p>
+							{#each boardResults as result (result.id)}
+								<SearchResult {result} onselect={() => search.close()} />
+							{/each}
+						</div>
+					{/if}
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}