From bb393b421da8a1f55adfa6b0321f2b434ebf0045 Mon Sep 17 00:00:00 2001
From: Mikkel Georgsen <msgeorgsen@gmail.com>
Date: Tue, 31 Mar 2026 14:20:31 +0200
Subject: [PATCH] feat(07-02): update Layout toggle to cycle three themes with
 next-theme label

- Add THEME_CYCLE map for mocha->tokyo-night->latte->mocha
- Compute nextThemeLabel for descriptive aria-label/title on toggle button
- Update both desktop and mobile toggle button aria-label/title to 'Switch to [theme]'
- Icon logic unchanged: Sun in dark mode, Moon in light mode
---
 ui/src/components/Layout.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
index ad0466fa..6a57e5a1 100644
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -59,6 +59,12 @@ export function Layout() {
     setSelectedCompanyId,
   } = useCompany();
   const { theme, toggleTheme } = useTheme();
+  const THEME_CYCLE: Record<string, string> = {
+    "catppuccin-mocha": "Tokyo Night",
+    "tokyo-night": "Catppuccin Latte",
+    "catppuccin-latte": "Catppuccin Mocha",
+  };
+  const nextThemeLabel = THEME_CYCLE[theme] ?? "next theme";
   const { companyPrefix } = useParams<{ companyPrefix: string }>();
   const navigate = useNavigate();
   const location = useLocation();
@@ -331,8 +337,8 @@ export function Layout() {
                   size="icon-sm"
                   className="text-muted-foreground shrink-0"
                   onClick={toggleTheme}
-                  aria-label="Cycle theme"
-                  title="Cycle theme"
+                  aria-label={`Switch to ${nextThemeLabel}`}
+                  title={`Switch to ${nextThemeLabel}`}
                 >
                   {isDarkTheme ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
                 </Button>
@@ -389,8 +395,8 @@ export function Layout() {
                   size="icon-sm"
                   className="text-muted-foreground shrink-0"
                   onClick={toggleTheme}
-                  aria-label="Cycle theme"
-                  title="Cycle theme"
+                  aria-label={`Switch to ${nextThemeLabel}`}
+                  title={`Switch to ${nextThemeLabel}`}
                 >
                   {isDarkTheme ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
                 </Button>