From 3e32968df8b5027a128bcb5fbb10c0fad0ab2751 Mon Sep 17 00:00:00 2001
From: cclohmar <claus.lohmar@lohmar.co.uk>
Date: Sun, 14 Jun 2026 18:10:15 +0000
Subject: [PATCH] feat(ui): settings modal (lang/timezone), fix app navigation,
 user dropdown

---
 src/core/ui/app-grid.templ    |  6 ++--
 src/core/ui/app-grid_templ.go |  2 +-
 src/core/ui/launcher.templ    | 60 +++++++++++++++++++++++++++++++++++
 src/core/ui/launcher_templ.go | 18 +++++------
 4 files changed, 73 insertions(+), 13 deletions(-)

diff --git a/src/core/ui/app-grid.templ b/src/core/ui/app-grid.templ
index 0a1a1dd..9be2f88 100644
--- a/src/core/ui/app-grid.templ
+++ b/src/core/ui/app-grid.templ
@@ -95,10 +95,10 @@ templ appTile(a AppTile) {
 		</div>
 	} else {
 		<div class="app-card"
-			onclick="openApp('{ a.URL }')"
+			onclick="window.location.href='{ a.URL }'"
 			oncontextmenu="return false"
-			ontouchstart="startLongPress(event, '{ a.URL }')" ontouchend="cancelLongPress()"
-			onmousedown="startLongPress(event, '{ a.URL }')" onmouseup="cancelLongPress()">
+			ontouchstart="startLongPress(event)" ontouchend="cancelLongPress()"
+			onmousedown="startLongPress(event)" onmouseup="cancelLongPress()">
 			<div class="app-icon" style={ "background:" + a.Color }>@templ.Raw(a.Icon)</div>
 			<div class="app-name">{ a.Name }</div>
 			<div class="app-badge">Available</div>
diff --git a/src/core/ui/app-grid_templ.go b/src/core/ui/app-grid_templ.go
index 6e0e751..e2a3bbb 100644
--- a/src/core/ui/app-grid_templ.go
+++ b/src/core/ui/app-grid_templ.go
@@ -183,7 +183,7 @@ func appTile(a AppTile) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div class=\"app-card\" onclick=\"openApp('{ a.URL }')\" oncontextmenu=\"return false\" ontouchstart=\"startLongPress(event, '{ a.URL }')\" ontouchend=\"cancelLongPress()\" onmousedown=\"startLongPress(event, '{ a.URL }')\" onmouseup=\"cancelLongPress()\"><div class=\"app-icon\" style=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div class=\"app-card\" onclick=\"window.location.href='{ a.URL }'\" oncontextmenu=\"return false\" ontouchstart=\"startLongPress(event)\" ontouchend=\"cancelLongPress()\" onmousedown=\"startLongPress(event)\" onmouseup=\"cancelLongPress()\"><div class=\"app-icon\" style=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
diff --git a/src/core/ui/launcher.templ b/src/core/ui/launcher.templ
index 2805b05..7ee86d4 100644
--- a/src/core/ui/launcher.templ
+++ b/src/core/ui/launcher.templ
@@ -41,6 +41,36 @@ templ LauncherPage(userName string, role string, apps []AppTile) {
 				</div>
 			</div>
 
+			<!-- Settings Modal -->
+			<div id="settings-overlay" class="overlay" style="display:none" onclick="closeSettings()">
+				<div class="modal" onclick="event.stopPropagation()">
+					<div class="modal-head">
+						<h2>Settings</h2>
+						<button class="close-btn" onclick="closeSettings()">&times;</button>
+					</div>
+					<div class="modal-body">
+						<div class="setting-group">
+							<label>Language</label>
+							<select id="setting-lang" class="form-select">
+								<option value="en">English</option>
+								<option value="de">Deutsch</option>
+							</select>
+						</div>
+						<div class="setting-group">
+							<label>Timezone</label>
+							<select id="setting-tz" class="form-select">
+								<option value="UTC">UTC</option>
+								<option value="Europe/London">London</option>
+								<option value="Europe/Berlin">Berlin</option>
+								<option value="Europe/Paris">Paris</option>
+								<option value="America/New_York">New York</option>
+							</select>
+						</div>
+						<button class="btn" onclick="saveSettings()">Save</button>
+					</div>
+				</div>
+			</div>
+
 			@launcherJS()
 		</body>
 	</html>
@@ -70,6 +100,10 @@ templ topBar(userName string, role string) {
 				<div class="avatar sm">{ initials(userName) }</div>
 				<div class="dropdown" id="userDropdown">
 					<div class="dropdown-header">{ userName }</div>
+					<div class="dropdown-item" onclick="window.showSettings()">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l-.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+						Settings
+					</div>
 					<div class="dropdown-item" onclick="window.location.href='/auth/logout'">
 						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
 						Logout
@@ -177,6 +211,14 @@ templ workspaceCSS() {
 			text-align:center;padding:16px;color:var(--text3);font-size:0.7rem;
 			border-top:1px solid var(--border);margin-top:auto
 		}
+		/* Settings */
+		.setting-group{margin-bottom:14px}
+		.setting-group label{display:block;font-size:0.8rem;color:var(--text2);margin-bottom:4px;font-weight:500}
+		.form-select{
+			width:100%;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);
+			border-radius:8px;color:var(--text);font-size:0.9rem;outline:none;appearance:none
+		}
+		.form-select:focus{border-color:var(--blue)}
 	</style>
 }
 
@@ -260,6 +302,24 @@ templ launcherJS() {
 			if (d) d.classList.remove('show');
 		});
 
+		window.showSettings = function() {
+			document.getElementById('settings-overlay').style.display = 'flex';
+			document.getElementById('userDropdown').classList.remove('show');
+			// Load saved
+			document.getElementById('setting-lang').value = localStorage.getItem('lang')||'en';
+			document.getElementById('setting-tz').value = localStorage.getItem('tz')||'UTC';
+		};
+
+		function closeSettings() {
+			document.getElementById('settings-overlay').style.display = 'none';
+		}
+
+		function saveSettings() {
+			localStorage.setItem('lang', document.getElementById('setting-lang').value);
+			localStorage.setItem('tz', document.getElementById('setting-tz').value);
+			closeSettings();
+		}
+
 		// PWA install handler
 		let deferredPrompt = null;
 		window.addEventListener('beforeinstallprompt', function(e) {
diff --git a/src/core/ui/launcher_templ.go b/src/core/ui/launcher_templ.go
index 6a0bcbe..49babc0 100644
--- a/src/core/ui/launcher_templ.go
+++ b/src/core/ui/launcher_templ.go
@@ -80,7 +80,7 @@ func LauncherPage(userName string, role string, apps []AppTile) templ.Component
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</div></div></div><!-- Settings Modal --><div id=\"settings-overlay\" class=\"overlay\" style=\"display:none\" onclick=\"closeSettings()\"><div class=\"modal\" onclick=\"event.stopPropagation()\"><div class=\"modal-head\"><h2>Settings</h2><button class=\"close-btn\" onclick=\"closeSettings()\">&times;</button></div><div class=\"modal-body\"><div class=\"setting-group\"><label>Language</label> <select id=\"setting-lang\" class=\"form-select\"><option value=\"en\">English</option> <option value=\"de\">Deutsch</option></select></div><div class=\"setting-group\"><label>Timezone</label> <select id=\"setting-tz\" class=\"form-select\"><option value=\"UTC\">UTC</option> <option value=\"Europe/London\">London</option> <option value=\"Europe/Berlin\">Berlin</option> <option value=\"Europe/Paris\">Paris</option> <option value=\"America/New_York\">New York</option></select></div><button class=\"btn\" onclick=\"saveSettings()\">Save</button></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -124,7 +124,7 @@ func greetingSection(userName string) templ.Component {
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(initials(userName))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `core/ui/launcher.templ`, Line: 51, Col: 42}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `core/ui/launcher.templ`, Line: 81, Col: 42}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -137,7 +137,7 @@ func greetingSection(userName string) templ.Component {
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(timeOfDay())
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `core/ui/launcher.templ`, Line: 53, Col: 25}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `core/ui/launcher.templ`, Line: 83, Col: 25}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -150,7 +150,7 @@ func greetingSection(userName string) templ.Component {
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(userName)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `core/ui/launcher.templ`, Line: 53, Col: 39}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `core/ui/launcher.templ`, Line: 83, Col: 39}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -192,7 +192,7 @@ func topBar(userName string, role string) templ.Component {
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(initials(userName))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `core/ui/launcher.templ`, Line: 70, Col: 47}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `core/ui/launcher.templ`, Line: 100, Col: 47}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
@@ -205,13 +205,13 @@ func topBar(userName string, role string) templ.Component {
 		var templ_7745c5c3_Var9 string
 		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(userName)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `core/ui/launcher.templ`, Line: 72, Col: 44}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `core/ui/launcher.templ`, Line: 102, Col: 44}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</div><div class=\"dropdown-item\" onclick=\"window.location.href='/auth/logout'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4\"></path><polyline points=\"16 17 21 12 16 7\"></polyline><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"></line></svg> Logout</div></div></div></div></header>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</div><div class=\"dropdown-item\" onclick=\"window.showSettings()\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"3\"></circle><path d=\"M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l-.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z\"></path></svg> Settings</div><div class=\"dropdown-item\" onclick=\"window.location.href='/auth/logout'\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4\"></path><polyline points=\"16 17 21 12 16 7\"></polyline><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"></line></svg> Logout</div></div></div></div></header>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -240,7 +240,7 @@ func workspaceCSS() templ.Component {
 			templ_7745c5c3_Var10 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<style type=\"text/css\">\n\t\t*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\n\t\t:root{\n\t\t\t--bg:#0d1117; --surface:#161b22; --surface2:#21262d; --surface3:#30363d;\n\t\t\t--border:#30363d; --text:#e6edf3; --text2:#8b949e; --text3:#6e7681;\n\t\t\t--blue:#58a6ff; --green:#3fb950; --orange:#d2991d; --red:#f85149;\n\t\t\t--purple:#a371f7; --pink:#db61a2; --teal:#39d353;\n\t\t\t--radius:16px; --radius-sm:10px\n\t\t}\n\t\thtml{font-size:15px}\n\t\tbody{\n\t\t\tfont-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;\n\t\t\tbackground:var(--bg); color:var(--text); min-height:100vh; min-height:100dvh;\n\t\t\t-webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none\n\t\t}\n\t\t.shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}\n\t\t.topbar{\n\t\t\tdisplay:flex; justify-content:space-between; align-items:center;\n\t\t\tpadding:12px 16px; background:var(--surface); border-bottom:1px solid var(--border);\n\t\t\tposition:sticky; top:0; z-index:100\n\t\t}\n\t\t.topbar-left{display:flex;align-items:center;gap:10px}\n\t\t.logo-icon{\n\t\t\twidth:32px;height:32px;border-radius:8px;background:var(--blue);\n\t\t\tdisplay:flex;align-items:center;justify-content:center;\n\t\t\tfont-weight:700;font-size:16px;color:#fff\n\t\t}\n\t\t.logo-text{font-weight:600;font-size:18px;color:var(--text)}\n\t\t.topbar-right{display:flex;align-items:center;gap:8px}\n\t\t.icon-btn{\n\t\t\twidth:36px;height:36px;border-radius:50%;border:none;background:transparent;\n\t\t\tcolor:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;\n\t\t\ttransition:all 0.15s\n\t\t}\n\t\t.icon-btn:hover{background:var(--surface2);color:var(--text)}\n\t\t.avatar{\n\t\t\twidth:40px;height:40px;border-radius:50%;background:var(--purple);\n\t\t\tdisplay:flex;align-items:center;justify-content:center;\n\t\t\tfont-weight:600;font-size:15px;color:#fff;flex-shrink:0\n\t\t}\n\t\t.avatar.sm{width:32px;height:32px;font-size:13px}\n\n\t\t/* User Dropdown */\n\t\t.user-menu{position:relative;cursor:pointer}\n\t\t.dropdown{\n\t\t\tdisplay:none;position:absolute;right:0;top:44px;\n\t\t\tbackground:var(--surface);border:1px solid var(--border);border-radius:12px;\n\t\t\tmin-width:180px;padding:6px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,0.4)\n\t\t}\n\t\t.dropdown.show{display:block}\n\t\t.dropdown-header{padding:10px 12px;font-size:0.85rem;font-weight:500;border-bottom:1px solid var(--border);margin-bottom:4px}\n\t\t.dropdown-item{\n\t\t\tdisplay:flex;align-items:center;gap:10px;padding:10px 12px;\n\t\t\tborder-radius:8px;font-size:0.85rem;color:var(--text);cursor:pointer;transition:background 0.1s\n\t\t}\n\t\t.dropdown-item:hover{background:var(--surface2)}\n\t\t.dropdown-item svg{flex-shrink:0}\n\t\t.content{flex:1;padding:24px 16px;max-width:900px;margin:0 auto;width:100%}\n\t\t.greeting{display:flex;align-items:center;gap:12px;margin-bottom:24px}\n\t\t@media(min-width:600px){.greeting{margin-bottom:32px}}\n\t\t.greeting-text h1{font-size:1.25rem;font-weight:600;color:var(--text);line-height:1.3}\n\t\t.greeting-text p{color:var(--text2);font-size:0.85rem;margin-top:2px}\n\n\t\t/* App Grid — RADICAL REDESIGN */\n\t\t.app-grid{\n\t\t\tdisplay:grid;\n\t\t\tgrid-template-columns:repeat(3,1fr);\n\t\t\tgap:0px; padding:0;\n\t\t}\n\t\t@media(min-width:600px){.app-grid{grid-template-columns:repeat(4,1fr)}}\n\t\t@media(min-width:900px){.app-grid{grid-template-columns:repeat(6,1fr)}}\n\n\t\t.app-card{\n\t\t\tdisplay:flex; flex-direction:column; align-items:center; gap:4px;\n\t\t\tcursor:pointer; text-decoration:none; color:inherit; padding:12px 6px;\n\t\t\tborder-radius:16px; transition:all 0.15s; border:none; background:none\n\t\t}\n\t\t.app-card:active{transform:scale(0.9)}\n\t\t.app-card .app-icon{\n\t\t\twidth:56px;height:56px;border-radius:14px;\n\t\t\tdisplay:flex;align-items:center;justify-content:center;flex-shrink:0\n\t\t}\n\t\t.app-card .app-icon svg{width:28px;height:28px}\n\t\t.app-card .app-name{font-size:0.72rem;font-weight:400;color:var(--text);text-align:center;line-height:1.2;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\t\t.app-card .app-badge{display:none}\n\t\t.app-card.disabled{opacity:0.3;cursor:default}\n\t\t.app-card.disabled:active{transform:none}\n\n\t\t/* RADICAL: hot pink border on every card to verify CSS updates */\n\t\t.app-card .app-icon{outline:2px solid #ff1493}\n\n\t\t/* Footer */\n\t\t.footer{\n\t\t\ttext-align:center;padding:16px;color:var(--text3);font-size:0.7rem;\n\t\t\tborder-top:1px solid var(--border);margin-top:auto\n\t\t}\n\t</style>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<style type=\"text/css\">\n\t\t*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\n\t\t:root{\n\t\t\t--bg:#0d1117; --surface:#161b22; --surface2:#21262d; --surface3:#30363d;\n\t\t\t--border:#30363d; --text:#e6edf3; --text2:#8b949e; --text3:#6e7681;\n\t\t\t--blue:#58a6ff; --green:#3fb950; --orange:#d2991d; --red:#f85149;\n\t\t\t--purple:#a371f7; --pink:#db61a2; --teal:#39d353;\n\t\t\t--radius:16px; --radius-sm:10px\n\t\t}\n\t\thtml{font-size:15px}\n\t\tbody{\n\t\t\tfont-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;\n\t\t\tbackground:var(--bg); color:var(--text); min-height:100vh; min-height:100dvh;\n\t\t\t-webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none\n\t\t}\n\t\t.shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}\n\t\t.topbar{\n\t\t\tdisplay:flex; justify-content:space-between; align-items:center;\n\t\t\tpadding:12px 16px; background:var(--surface); border-bottom:1px solid var(--border);\n\t\t\tposition:sticky; top:0; z-index:100\n\t\t}\n\t\t.topbar-left{display:flex;align-items:center;gap:10px}\n\t\t.logo-icon{\n\t\t\twidth:32px;height:32px;border-radius:8px;background:var(--blue);\n\t\t\tdisplay:flex;align-items:center;justify-content:center;\n\t\t\tfont-weight:700;font-size:16px;color:#fff\n\t\t}\n\t\t.logo-text{font-weight:600;font-size:18px;color:var(--text)}\n\t\t.topbar-right{display:flex;align-items:center;gap:8px}\n\t\t.icon-btn{\n\t\t\twidth:36px;height:36px;border-radius:50%;border:none;background:transparent;\n\t\t\tcolor:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;\n\t\t\ttransition:all 0.15s\n\t\t}\n\t\t.icon-btn:hover{background:var(--surface2);color:var(--text)}\n\t\t.avatar{\n\t\t\twidth:40px;height:40px;border-radius:50%;background:var(--purple);\n\t\t\tdisplay:flex;align-items:center;justify-content:center;\n\t\t\tfont-weight:600;font-size:15px;color:#fff;flex-shrink:0\n\t\t}\n\t\t.avatar.sm{width:32px;height:32px;font-size:13px}\n\n\t\t/* User Dropdown */\n\t\t.user-menu{position:relative;cursor:pointer}\n\t\t.dropdown{\n\t\t\tdisplay:none;position:absolute;right:0;top:44px;\n\t\t\tbackground:var(--surface);border:1px solid var(--border);border-radius:12px;\n\t\t\tmin-width:180px;padding:6px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,0.4)\n\t\t}\n\t\t.dropdown.show{display:block}\n\t\t.dropdown-header{padding:10px 12px;font-size:0.85rem;font-weight:500;border-bottom:1px solid var(--border);margin-bottom:4px}\n\t\t.dropdown-item{\n\t\t\tdisplay:flex;align-items:center;gap:10px;padding:10px 12px;\n\t\t\tborder-radius:8px;font-size:0.85rem;color:var(--text);cursor:pointer;transition:background 0.1s\n\t\t}\n\t\t.dropdown-item:hover{background:var(--surface2)}\n\t\t.dropdown-item svg{flex-shrink:0}\n\t\t.content{flex:1;padding:24px 16px;max-width:900px;margin:0 auto;width:100%}\n\t\t.greeting{display:flex;align-items:center;gap:12px;margin-bottom:24px}\n\t\t@media(min-width:600px){.greeting{margin-bottom:32px}}\n\t\t.greeting-text h1{font-size:1.25rem;font-weight:600;color:var(--text);line-height:1.3}\n\t\t.greeting-text p{color:var(--text2);font-size:0.85rem;margin-top:2px}\n\n\t\t/* App Grid — RADICAL REDESIGN */\n\t\t.app-grid{\n\t\t\tdisplay:grid;\n\t\t\tgrid-template-columns:repeat(3,1fr);\n\t\t\tgap:0px; padding:0;\n\t\t}\n\t\t@media(min-width:600px){.app-grid{grid-template-columns:repeat(4,1fr)}}\n\t\t@media(min-width:900px){.app-grid{grid-template-columns:repeat(6,1fr)}}\n\n\t\t.app-card{\n\t\t\tdisplay:flex; flex-direction:column; align-items:center; gap:4px;\n\t\t\tcursor:pointer; text-decoration:none; color:inherit; padding:12px 6px;\n\t\t\tborder-radius:16px; transition:all 0.15s; border:none; background:none\n\t\t}\n\t\t.app-card:active{transform:scale(0.9)}\n\t\t.app-card .app-icon{\n\t\t\twidth:56px;height:56px;border-radius:14px;\n\t\t\tdisplay:flex;align-items:center;justify-content:center;flex-shrink:0\n\t\t}\n\t\t.app-card .app-icon svg{width:28px;height:28px}\n\t\t.app-card .app-name{font-size:0.72rem;font-weight:400;color:var(--text);text-align:center;line-height:1.2;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\t\t.app-card .app-badge{display:none}\n\t\t.app-card.disabled{opacity:0.3;cursor:default}\n\t\t.app-card.disabled:active{transform:none}\n\n\t\t/* RADICAL: hot pink border on every card to verify CSS updates */\n\t\t.app-card .app-icon{outline:2px solid #ff1493}\n\n\t\t/* Footer */\n\t\t.footer{\n\t\t\ttext-align:center;padding:16px;color:var(--text3);font-size:0.7rem;\n\t\t\tborder-top:1px solid var(--border);margin-top:auto\n\t\t}\n\t\t/* Settings */\n\t\t.setting-group{margin-bottom:14px}\n\t\t.setting-group label{display:block;font-size:0.8rem;color:var(--text2);margin-bottom:4px;font-weight:500}\n\t\t.form-select{\n\t\t\twidth:100%;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);\n\t\t\tborder-radius:8px;color:var(--text);font-size:0.9rem;outline:none;appearance:none\n\t\t}\n\t\t.form-select:focus{border-color:var(--blue)}\n\t</style>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -321,7 +321,7 @@ func launcherJS() templ.Component {
 			templ_7745c5c3_Var12 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<script type=\"text/javascript\">\n\t\tlet longPressTimer = null;\n\t\tlet currentUrl = null;\n\n\t\tfunction openApp(url) {\n\t\t\twindow.open(url, '_blank');\n\t\t}\n\n\t\tfunction startLongPress(e, url) {\n\t\t\tcurrentUrl = url || null;\n\t\t\tlongPressTimer = setTimeout(function() {\n\t\t\t\tshowPWA();\n\t\t\t}, 600);\n\t\t}\n\n\t\tfunction cancelLongPress() {\n\t\t\tif (longPressTimer) {\n\t\t\t\tclearTimeout(longPressTimer);\n\t\t\t\tlongPressTimer = null;\n\t\t\t}\n\t\t}\n\n\t\tfunction showPWA() {\n\t\t\tdocument.getElementById('pwa-overlay').style.display = 'flex';\n\t\t}\n\n\t\tfunction closePWA() {\n\t\t\tdocument.getElementById('pwa-overlay').style.display = 'none';\n\t\t}\n\n\t\tfunction toggleUserMenu(e) {\n\t\t\te.stopPropagation();\n\t\t\tdocument.getElementById('userDropdown').classList.toggle('show');\n\t\t}\n\t\tdocument.addEventListener('click', function() {\n\t\t\tvar d = document.getElementById('userDropdown');\n\t\t\tif (d) d.classList.remove('show');\n\t\t});\n\n\t\t// PWA install handler\n\t\tlet deferredPrompt = null;\n\t\twindow.addEventListener('beforeinstallprompt', function(e) {\n\t\t\te.preventDefault();\n\t\t\tdeferredPrompt = e;\n\t\t});\n\n\t\t// Override showPWA to try native prompt first\n\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\tvar origShowPWA = showPWA;\n\t\t\tshowPWA = function() {\n\t\t\t\tif (deferredPrompt) {\n\t\t\t\t\tdeferredPrompt.prompt();\n\t\t\t\t\tdeferredPrompt.userChoice.then(function() { deferredPrompt = null; });\n\t\t\t\t} else {\n\t\t\t\t\torigShowPWA();\n\t\t\t\t}\n\t\t\t};\n\t\t});\n\t</script>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<script type=\"text/javascript\">\n\t\tlet longPressTimer = null;\n\t\tlet currentUrl = null;\n\n\t\tfunction openApp(url) {\n\t\t\twindow.open(url, '_blank');\n\t\t}\n\n\t\tfunction startLongPress(e, url) {\n\t\t\tcurrentUrl = url || null;\n\t\t\tlongPressTimer = setTimeout(function() {\n\t\t\t\tshowPWA();\n\t\t\t}, 600);\n\t\t}\n\n\t\tfunction cancelLongPress() {\n\t\t\tif (longPressTimer) {\n\t\t\t\tclearTimeout(longPressTimer);\n\t\t\t\tlongPressTimer = null;\n\t\t\t}\n\t\t}\n\n\t\tfunction showPWA() {\n\t\t\tdocument.getElementById('pwa-overlay').style.display = 'flex';\n\t\t}\n\n\t\tfunction closePWA() {\n\t\t\tdocument.getElementById('pwa-overlay').style.display = 'none';\n\t\t}\n\n\t\tfunction toggleUserMenu(e) {\n\t\t\te.stopPropagation();\n\t\t\tdocument.getElementById('userDropdown').classList.toggle('show');\n\t\t}\n\t\tdocument.addEventListener('click', function() {\n\t\t\tvar d = document.getElementById('userDropdown');\n\t\t\tif (d) d.classList.remove('show');\n\t\t});\n\n\t\twindow.showSettings = function() {\n\t\t\tdocument.getElementById('settings-overlay').style.display = 'flex';\n\t\t\tdocument.getElementById('userDropdown').classList.remove('show');\n\t\t\t// Load saved\n\t\t\tdocument.getElementById('setting-lang').value = localStorage.getItem('lang')||'en';\n\t\t\tdocument.getElementById('setting-tz').value = localStorage.getItem('tz')||'UTC';\n\t\t};\n\n\t\tfunction closeSettings() {\n\t\t\tdocument.getElementById('settings-overlay').style.display = 'none';\n\t\t}\n\n\t\tfunction saveSettings() {\n\t\t\tlocalStorage.setItem('lang', document.getElementById('setting-lang').value);\n\t\t\tlocalStorage.setItem('tz', document.getElementById('setting-tz').value);\n\t\t\tcloseSettings();\n\t\t}\n\n\t\t// PWA install handler\n\t\tlet deferredPrompt = null;\n\t\twindow.addEventListener('beforeinstallprompt', function(e) {\n\t\t\te.preventDefault();\n\t\t\tdeferredPrompt = e;\n\t\t});\n\n\t\t// Override showPWA to try native prompt first\n\t\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\t\tvar origShowPWA = showPWA;\n\t\t\tshowPWA = function() {\n\t\t\t\tif (deferredPrompt) {\n\t\t\t\t\tdeferredPrompt.prompt();\n\t\t\t\t\tdeferredPrompt.userChoice.then(function() { deferredPrompt = null; });\n\t\t\t\t} else {\n\t\t\t\t\torigShowPWA();\n\t\t\t\t}\n\t\t\t};\n\t\t});\n\t</script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}