From 8743f634069d402346e0254115a6ba5623a41042 Mon Sep 17 00:00:00 2001
From: enricobuehler <enrico.buehler@unom.io>
Date: Thu, 9 Jul 2026 22:18:37 +0200
Subject: [PATCH] polish(web): favicon, Punktfunk casing, display-save toast,
 idle stop button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Favicon: the brand-mark lens SVG at /favicon.svg, linked from the root head.
- Branding: user-facing "punktfunk" → "Punktfunk" (tab title, app_name,
  pairing prose, the logo aria-labels/SVG titles) — protocol identifiers
  (punktfunk/1, _punktfunk._udp, binary/module names) stay lowercase.
- The display policy auto-saves on every preset pick / field edit with no
  signal; mount @unom/ui's sonner Toaster in the root and fire a success toast
  from the save funnel's onSuccess (new i18n key, en + de). First toast usage
  in the console — errors stay inline as before.
- The stop-session button rendered destructive-red even with nothing to stop:
  variant switches to the muted `secondary` while no session is active.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/messages/de.json                      |  7 ++++---
 web/messages/en.json                      |  7 ++++---
 web/public/favicon.svg                    |  6 ++++++
 web/src/components/app-shell.tsx          |  2 +-
 web/src/components/brand-mark.tsx         |  4 ++--
 web/src/components/wordmark.tsx           |  4 ++--
 web/src/routes/__root.tsx                 | 10 ++++++++--
 web/src/sections/Dashboard/view.tsx       |  2 +-
 web/src/sections/Displays/DisplayCard.tsx |  4 ++++
 9 files changed, 32 insertions(+), 14 deletions(-)
 create mode 100644 web/public/favicon.svg

diff --git a/web/messages/de.json b/web/messages/de.json
index 8fdeb4d7..3e3ca0be 100644
--- a/web/messages/de.json
+++ b/web/messages/de.json
@@ -1,7 +1,8 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
-	"app_name": "punktfunk",
+	"app_name": "Punktfunk",
 	"app_tagline": "Verwaltungskonsole",
+	"display_settings_saved": "Display-Konfiguration gespeichert",
 	"nav_dashboard": "Übersicht",
 	"nav_host": "Host",
 	"nav_displays": "Virtuelle Anzeigen",
@@ -128,8 +129,8 @@
 	"pairing_success": "Erfolgreich gekoppelt.",
 	"pairing_failed": "Kopplung fehlgeschlagen — PIN prüfen und erneut versuchen.",
 	"pairing_native_title": "Gerät koppeln",
-	"pairing_native_desc": "Zeige hier eine Einmal-PIN an und gib sie in deiner punktfunk-App ein, um dieses Gerät zu koppeln.",
-	"pairing_native_disabled": "Der native Host läuft nicht. Starte ihn mit `serve --native`, um punktfunk-Geräte zu koppeln.",
+	"pairing_native_desc": "Zeige hier eine Einmal-PIN an und gib sie in deiner Punktfunk-App ein, um dieses Gerät zu koppeln.",
+	"pairing_native_disabled": "Der native Host läuft nicht. Starte ihn mit `serve --native`, um Punktfunk-Geräte zu koppeln.",
 	"pairing_native_arm": "Gerät koppeln",
 	"pairing_native_enter": "Gib diese PIN auf deinem Gerät ein:",
 	"pairing_native_expires": "Läuft ab in",
diff --git a/web/messages/en.json b/web/messages/en.json
index a9ef0b65..5ec755c0 100644
--- a/web/messages/en.json
+++ b/web/messages/en.json
@@ -1,7 +1,8 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
-	"app_name": "punktfunk",
+	"app_name": "Punktfunk",
 	"app_tagline": "management console",
+	"display_settings_saved": "Display configuration saved",
 	"nav_dashboard": "Dashboard",
 	"nav_host": "Host",
 	"nav_displays": "Virtual displays",
@@ -128,8 +129,8 @@
 	"pairing_success": "Paired successfully.",
 	"pairing_failed": "Pairing failed — check the PIN and try again.",
 	"pairing_native_title": "Pair a device",
-	"pairing_native_desc": "Show a one-time PIN here, then enter it in your punktfunk app to pair this device.",
-	"pairing_native_disabled": "The native host isn't running. Start it with `serve --native` to pair punktfunk devices.",
+	"pairing_native_desc": "Show a one-time PIN here, then enter it in your Punktfunk app to pair this device.",
+	"pairing_native_disabled": "The native host isn't running. Start it with `serve --native` to pair Punktfunk devices.",
 	"pairing_native_arm": "Pair a device",
 	"pairing_native_enter": "Enter this PIN on your device:",
 	"pairing_native_expires": "Expires in",
diff --git a/web/public/favicon.svg b/web/public/favicon.svg
new file mode 100644
index 00000000..11e273db
--- /dev/null
+++ b/web/public/favicon.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
+  <!-- Punktfunk brand mark: two overlapping circles forming a lens (see src/components/brand-mark.tsx). -->
+  <path d="M403.037,791.672c107.586,0 194.41,-86.824 194.41,-194.41c0,-107.586 -86.824,-194.41 -194.41,-194.41c-107.586,0 -194.41,86.824 -194.41,194.41c0,107.586 86.824,194.41 194.41,194.41Z" fill="#a79ff8"/>
+  <path d="M735.276,540.321c76.075,-76.075 76.075,-198.862 0,-274.937c-76.075,-76.075 -198.862,-76.075 -274.937,0c-76.075,76.075 -76.075,198.862 0,274.937c76.075,76.075 198.862,76.075 274.937,0Z" fill="#6c5bf3"/>
+  <path d="M647.84,590.737c-64.853,17.403 -136.871,0.597 -187.885,-50.416c-51.013,-51.013 -67.819,-123.032 -50.416,-187.885c64.853,-17.403 136.871,-0.597 187.885,50.416c51.013,51.013 67.819,123.032 50.416,187.885Z" fill="#d2c9fb"/>
+</svg>
diff --git a/web/src/components/app-shell.tsx b/web/src/components/app-shell.tsx
index b7693717..e3238500 100644
--- a/web/src/components/app-shell.tsx
+++ b/web/src/components/app-shell.tsx
@@ -48,7 +48,7 @@ export function AppShell({ children }: { children: ReactNode }) {
 			<aside className="sticky top-0 hidden h-dvh w-60 shrink-0 flex-col overflow-y-auto border-r bg-card/40 p-4 sm:flex">
 				<Link
 					to="/"
-					aria-label="punktfunk"
+					aria-label="Punktfunk"
 					className="mb-7 flex items-center gap-2 px-2 pt-1"
 				>
 					<BrandMark className="size-7 drop-shadow-[0_2px_12px_rgba(108,91,243,0.45)]" />
diff --git a/web/src/components/brand-mark.tsx b/web/src/components/brand-mark.tsx
index 0627b8e9..ca61e421 100644
--- a/web/src/components/brand-mark.tsx
+++ b/web/src/components/brand-mark.tsx
@@ -5,13 +5,13 @@
 export function BrandMark({ className }: { className?: string }) {
 	return (
 		<svg
-			aria-label="punktfunk"
+			aria-label="Punktfunk"
 			role="img"
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 1000 1000"
 			className={className}
 		>
-			<title>punktfunk</title>
+			<title>Punktfunk</title>
 			<path
 				d="M403.037,791.672c107.586,0 194.41,-86.824 194.41,-194.41c0,-107.586 -86.824,-194.41 -194.41,-194.41c-107.586,0 -194.41,86.824 -194.41,194.41c0,107.586 86.824,194.41 194.41,194.41Z"
 				fill="#a79ff8"
diff --git a/web/src/components/wordmark.tsx b/web/src/components/wordmark.tsx
index b0802773..acc8a20d 100644
--- a/web/src/components/wordmark.tsx
+++ b/web/src/components/wordmark.tsx
@@ -8,13 +8,13 @@ export function Wordmark({ className }: { className?: string }) {
 	return (
 		<svg
 			role="img"
-			aria-label="punktfunk"
+			aria-label="Punktfunk"
 			xmlns="http://www.w3.org/2000/svg"
 			viewBox="0 0 579 136"
 			fill="currentColor"
 			className={cn("w-auto text-highlight", className)}
 		>
-			<title>punktfunk</title>
+			<title>Punktfunk</title>
 			<path d="M16.782,16.051l0,102.687l31.253,0l0,-35.563l73.436,0l0,-23.555l-73.436,0l0,-19.398l77.285,0l0,-24.171l-108.537,0Z" />
 			<path d="M131.785,16.051l0,47.264c0.154,16.627 0.154,16.627 0.308,20.014c0.77,15.087 2.463,21.4 7.544,26.634c7.698,8.16 20.014,10.315 59.272,10.315c23.863,0 34.178,-0.616 43.415,-2.463c11.7,-2.463 19.552,-10.623 21.246,-22.323c0.924,-7.236 1.078,-8.929 1.54,-32.176l0,-47.264l-31.253,0l0,47.264c0,2.155 -0.154,7.082 -0.308,10.623c-0.462,9.699 -1.232,12.47 -3.695,15.087c-3.387,3.695 -9.853,4.619 -31.407,4.619c-26.634,0 -32.638,-1.693 -34.332,-9.853c-0.77,-4.157 -0.77,-4.311 -1.078,-20.476l0,-47.264l-31.253,0Z" />
 			<path d="M271.575,15.943l0,102.687l31.868,0l-0.77,-76.669l3.387,0l54.038,76.669l54.346,0l0,-102.687l-31.868,0l0.77,76.515l-3.233,0l-53.73,-76.515l-54.808,0Z" />
diff --git a/web/src/routes/__root.tsx b/web/src/routes/__root.tsx
index a024425f..58b80678 100644
--- a/web/src/routes/__root.tsx
+++ b/web/src/routes/__root.tsx
@@ -9,6 +9,7 @@ import {
 	useRouterState,
 } from "@tanstack/react-router";
 import "@fontsource-variable/geist";
+import { Toaster } from "@unom/ui/toast";
 import { AppShell } from "@/components/app-shell";
 import appCss from "@/styles.css?url";
 
@@ -22,9 +23,12 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 			{ charSet: "utf-8" },
 			{ name: "viewport", content: "width=device-width, initial-scale=1" },
 			{ name: "color-scheme", content: "dark light" },
-			{ title: "punktfunk" },
+			{ title: "Punktfunk" },
+		],
+		links: [
+			{ rel: "stylesheet", href: appCss },
+			{ rel: "icon", type: "image/svg+xml", href: "/favicon.svg" },
 		],
-		links: [{ rel: "stylesheet", href: appCss }],
 	}),
 	component: RootComponent,
 });
@@ -47,6 +51,8 @@ function RootComponent() {
 						<Outlet />
 					</AppShell>
 				)}
+				{/* Sonner toaster (lazy client-side) — success feedback for auto-saved settings. */}
+				<Toaster />
 				<Scripts />
 			</body>
 		</html>
diff --git a/web/src/sections/Dashboard/view.tsx b/web/src/sections/Dashboard/view.tsx
index 382aec47..e40f7041 100644
--- a/web/src/sections/Dashboard/view.tsx
+++ b/web/src/sections/Dashboard/view.tsx
@@ -78,7 +78,7 @@ export const DashboardView: FC<{
 											{m.action_request_idr()}
 										</Button>
 										<Button
-											variant="destructive"
+											variant={s.session ? "destructive" : "secondary"}
 											size="sm"
 											disabled={!s.session || isStopping}
 											onClick={onStopSession}
diff --git a/web/src/sections/Displays/DisplayCard.tsx b/web/src/sections/Displays/DisplayCard.tsx
index 70ee540e..9f75ac9b 100644
--- a/web/src/sections/Displays/DisplayCard.tsx
+++ b/web/src/sections/Displays/DisplayCard.tsx
@@ -1,5 +1,6 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { Button } from "@unom/ui/button";
+import { toast } from "@unom/ui/toast";
 import { Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
 import { type FC, type MouseEvent, type ReactNode, useEffect, useState } from "react";
 import {
@@ -62,6 +63,9 @@ export const DisplaySection: FC = () => {
 				onSuccess: (res) => {
 					setDraft(res.settings);
 					qc.invalidateQueries({ queryKey: getGetDisplaySettingsQueryKey() });
+					// The policy auto-saves on every preset pick / field edit — without a signal
+					// users kept looking for a Save button. Errors stay inline (apiErrorMessage).
+					toast.success(m.display_settings_saved());
 				},
 			},
 		);