fix: local fonts via @fontsource, favicon, autocomplete attrs

- Replace Google Fonts with @fontsource/dm-sans and @fontsource/jetbrains-mono
- Add SVG favicon
- Add autocomplete attributes to login/setup form inputs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/package-lock.json

@@ -13,6 +13,8 @@
 				"@codemirror/state": "^6.6.0",
 				"@codemirror/theme-one-dark": "^6.1.3",
 				"@codemirror/view": "^6.40.0",
+				"@fontsource/dm-sans": "^5.2.8",
+				"@fontsource/jetbrains-mono": "^5.2.8",
 				"@mdi/js": "^7.4.47",
 				"codemirror": "^6.0.2"
 			},
@@ -602,6 +604,22 @@
 			"integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
 			"dev": true
 		},
+		"node_modules/@fontsource/dm-sans": {
+			"version": "5.2.8",
+			"resolved": "https://registry.npmjs.org/@fontsource/dm-sans/-/dm-sans-5.2.8.tgz",
+			"integrity": "sha512-tlovG42m9ESG28WiHpLq3F5umAlm64rv0RkqTbYowRn70e9OlRr5a3yTJhrhrY+k5lftR/OFJjPzOLQzk8EfCA==",
+			"funding": {
+				"url": "https://github.com/sponsors/ayuhito"
+			}
+		},
+		"node_modules/@fontsource/jetbrains-mono": {
+			"version": "5.2.8",
+			"resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+			"integrity": "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ==",
+			"funding": {
+				"url": "https://github.com/sponsors/ayuhito"
+			}
+		},
 		"node_modules/@internationalized/date": {
 			"version": "3.12.0",
 			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.0.tgz",
@@ -2851,6 +2869,16 @@
 			"integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
 			"dev": true
 		},
+		"@fontsource/dm-sans": {
+			"version": "5.2.8",
+			"resolved": "https://registry.npmjs.org/@fontsource/dm-sans/-/dm-sans-5.2.8.tgz",
+			"integrity": "sha512-tlovG42m9ESG28WiHpLq3F5umAlm64rv0RkqTbYowRn70e9OlRr5a3yTJhrhrY+k5lftR/OFJjPzOLQzk8EfCA=="
+		},
+		"@fontsource/jetbrains-mono": {
+			"version": "5.2.8",
+			"resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+			"integrity": "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ=="
+		},
 		"@internationalized/date": {
 			"version": "3.12.0",
 			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.0.tgz",

frontend/package.json

@@ -34,6 +34,8 @@
 		"@codemirror/state": "^6.6.0",
 		"@codemirror/theme-one-dark": "^6.1.3",
 		"@codemirror/view": "^6.40.0",
+		"@fontsource/dm-sans": "^5.2.8",
+		"@fontsource/jetbrains-mono": "^5.2.8",
 		"@mdi/js": "^7.4.47",
 		"codemirror": "^6.0.2"
 	}

frontend/src/app.css

@@ -1,3 +1,11 @@
+@import '@fontsource/dm-sans/300.css';
+@import '@fontsource/dm-sans/400.css';
+@import '@fontsource/dm-sans/500.css';
+@import '@fontsource/dm-sans/600.css';
+@import '@fontsource/dm-sans/700.css';
+@import '@fontsource/jetbrains-mono/400.css';
+@import '@fontsource/jetbrains-mono/500.css';
+@import '@fontsource/jetbrains-mono/600.css';
 @import 'tailwindcss';
 
 @theme {
@@ -23,8 +31,8 @@
 	--color-glow-strong: rgba(13, 148, 136, 0.3);
 	--color-sidebar: #ffffff;
 	--color-sidebar-active: rgba(13, 148, 136, 0.08);
-	--font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+	--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-	--font-mono: 'JetBrains Mono', ui-monospace, monospace;
+	--font-mono: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
 	--radius: 0.625rem;
 }
 

frontend/src/app.html

@@ -4,9 +4,6 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
 		<title>Notify Bridge</title>
 		%sveltekit.head%
 	</head>

frontend/src/routes/login/+page.svelte

@@ -28,11 +28,11 @@
 		<form onsubmit={(e) => { e.preventDefault(); handleLogin(); }} class="space-y-4">
 			<div>
 				<label class="block text-sm font-medium text-muted-foreground mb-1">{t('auth.username')}</label>
-				<input type="text" bind:value={username} class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required />
+				<input type="text" bind:value={username} autocomplete="username" class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required />
 			</div>
 			<div>
 				<label class="block text-sm font-medium text-muted-foreground mb-1">{t('auth.password')}</label>
-				<input type="password" bind:value={password} class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required />
+				<input type="password" bind:value={password} autocomplete="current-password" class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required />
 			</div>
 
 			{#if error}

frontend/src/routes/setup/+page.svelte

@@ -29,11 +29,11 @@
 		<form onsubmit={(e) => { e.preventDefault(); handleSetup(); }} class="space-y-4">
 			<div>
 				<label class="block text-sm font-medium text-muted-foreground mb-1">{t('auth.username')}</label>
-				<input type="text" bind:value={username} class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required />
+				<input type="text" bind:value={username} autocomplete="username" class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required />
 			</div>
 			<div>
 				<label class="block text-sm font-medium text-muted-foreground mb-1">{t('auth.password')}</label>
-				<input type="password" bind:value={password} class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required minlength="6" />
+				<input type="password" bind:value={password} autocomplete="new-password" class="w-full px-3 py-2 border border-border rounded-[var(--radius)]" required minlength="6" />
 			</div>
 
 			{#if error}

frontend/static/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#0d9488"/>
+  <path d="M8 12l8-5 8 5v10l-8 5-8-5z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>
+  <circle cx="16" cy="17" r="3" fill="#fff"/>
+</svg>