client_v2: move mobile Add Spools button into header

Replaces the floating FAB, which overlapped content in the mobile
library view, with a compact accent icon button in the header row
next to the scan button.

Claude-Session: https://claude.ai/code/session_01VQQtwPBPiMCoZCpBbbqS64

client_v2/src/lib/components/TopBar.svelte

@@ -23,6 +23,14 @@
 		<button class="scan-btn" onclick={onscan} aria-label={m['topbar.scan']()} title={m['topbar.scan']()}>
 			<ScanLine size={18} />
 		</button>
+		<button
+			class="add-mobile"
+			onclick={onadd}
+			aria-label={m['topbar.addSpools']()}
+			title={m['topbar.addSpools']()}
+		>
+			<Plus size={18} />
+		</button>
 		<div class="search-desktop">
 			<SearchBox />
 		</div>
@@ -76,6 +84,10 @@
 		border-color: var(--accent);
 	}
 
+	.add-mobile {
+		display: none;
+	}
+
 	.mobile-search,
 	.mobile-nav {
 		display: none;
@@ -87,6 +99,19 @@
 		.add-desktop {
 			display: none;
 		}
+		.add-mobile {
+			flex: none;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			width: 36px;
+			height: 36px;
+			border-radius: var(--radius-md);
+			border: none;
+			background: var(--accent);
+			color: #fff;
+			cursor: pointer;
+		}
 		.row.primary {
 			gap: 12px;
 		}

client_v2/src/routes/+page.svelte

@@ -2,10 +2,8 @@
 	import FilamentList from '$components/library/FilamentList.svelte';
 	import Inspector from '$components/library/Inspector.svelte';
 	import DetailPane from '$components/DetailPane.svelte';
-	import { ui } from '$lib/stores/ui.svelte';
 	import { clearSelection } from '$lib/library/params';
 	import * as m from '$lib/paraglide/messages';
-	import Plus from '@lucide/svelte/icons/plus';
 	import type { PageData } from './$types';
 
 	// The URL is the source of truth: `data.state` is parsed from the query
@@ -31,9 +29,6 @@
 	<DetailPane open={data.state.selection !== null} onclose={() => clearSelection()}>
 		<Inspector selection={data.state.selection} />
 	</DetailPane>
-
-	<!-- Mobile FAB -->
-	<button class="fab" onclick={() => ui.openAddModal()}><Plus size={20} /> {m['topbar.addSpools']()}</button>
 </div>
 
 <style>
@@ -51,33 +46,11 @@
 		flex-direction: column;
 		min-height: 0;
 	}
-	.fab {
-		display: none;
-	}
 
 	@media (max-width: 860px) {
 		.list-pane {
 			width: 100%;
 			border-right: none;
 		}
-		.fab {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			position: fixed;
-			right: 18px;
-			bottom: 22px;
-			z-index: 15;
-			background: var(--accent);
-			color: #fff;
-			border: none;
-			border-radius: 26px;
-			padding: 14px 18px;
-			font-weight: 600;
-			font-size: 14px;
-			box-shadow: 0 8px 24px rgba(190, 104, 47, 0.4);
-			cursor: pointer;
-			font-family: inherit;
-		}
 	}
 </style>