Migrate bos-settings from GTK4 to Tauri + Svelte 5

Ports every remaining view (Keybinds, the last one — dual Flat/MultiLayout
schema detection, per-action dedicated fields with a raw-JSON fallback for
anything not modeled) and removes the now-fully-dead GTK4 crate (root
Cargo.toml + src/), leaving src-tauri/ as the single Rust binary crate.

Also folds in the UX pass done alongside the migration: responsive
multi-column layout instead of a single centered column, chip/dropdown
pickers replacing free-typed fields (Wi-Fi networks, Bar style, keyboard
layout, tag lists), consistent pill-switch toggles and boxed-list card
styling across every page, and a sidebar scroll-chaining fix.

frontend/src/lib/components/Sidebar.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { SIDEBAR_SECTIONS } from "$lib/sidebar";
+
+	let { activePage = $bindable() }: { activePage: string } = $props();
+</script>
+
+<nav class="sidebar">
+	{#each SIDEBAR_SECTIONS as section (section.title ?? "untitled")}
+		{#if section.title}
+			<div class="section-header">{section.title}</div>
+		{/if}
+		{#each section.items as item (item.id)}
+			<button
+				class="row"
+				class:selected={activePage === item.id}
+				onclick={() => (activePage = item.id)}
+			>
+				<item.icon size={16} />
+				<span class="label">{item.label}</span>
+			</button>
+		{/each}
+	{/each}
+</nav>
+
+<style>
+	.sidebar {
+		display: flex;
+		flex-direction: column;
+		width: 220px;
+		flex-shrink: 0;
+		min-height: 0;
+		background-color: var(--surface);
+		color: var(--on-surface);
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		padding: var(--space-sm, 8px);
+		gap: 1px;
+	}
+
+	.section-header {
+		padding: var(--space-lg, 16px) var(--space-sm, 8px) var(--space-xs, 4px);
+		font-size: 11px;
+		font-weight: 700;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		opacity: 0.5;
+	}
+
+	.section-header:first-child {
+		padding-top: var(--space-xs, 4px);
+	}
+
+	.row {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		width: 100%;
+		border: none;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		text-align: left;
+		cursor: pointer;
+		padding: 9px var(--space-md, 12px);
+		border-radius: var(--radius-secondary, 6px);
+		transition: background-color 0.1s ease;
+	}
+
+	.row:hover {
+		background-color: color-mix(in srgb, var(--on-surface) 8%, transparent);
+	}
+
+	.row.selected {
+		background-color: var(--accent);
+		color: var(--on-accent);
+		font-weight: 500;
+	}
+
+	.label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>