From 3ea1bab3d7d5f6c10ee132af30993a2d8fb1d04f Mon Sep 17 00:00:00 2001
From: Alex Blank <alexblank@fastmail.com>
Date: Mon, 4 May 2026 20:20:54 +0200
Subject: [PATCH] small design changes

---
 docs/REQUIREMENTS.md |   2 +
 frontend/src/App.tsx | 118 ++++++++++++++++++++++++++++++-------------
 2 files changed, 84 insertions(+), 36 deletions(-)

diff --git a/docs/REQUIREMENTS.md b/docs/REQUIREMENTS.md
index 3464d18..ac0dda1 100644
--- a/docs/REQUIREMENTS.md
+++ b/docs/REQUIREMENTS.md
@@ -61,6 +61,7 @@ Phase 1: Jellyfin media index, SSH-based remote filesystem inspection, server mo
 - The shared session table should keep a compact overall status summary line above the rows that reports total sessions plus playing, paused, and idle counts.
 - The shared session table should keep the session identifier under the user name in a caption instead of giving it a full column, to keep the table tighter.
 - The Users tab may open a read-only detail drawer for a selected user, but any communication actions in that drawer should remain clearly disabled/placeholders until the workflow is implemented.
+- The frontend shell should use a polished two-row header with branding on the left, user/logout controls on the right, and primary navigation in a dedicated tab row beneath.
 - The frontend shell and primary pages should remain responsive and mobile-safe, with compact navigation, stacked controls on narrow screens, and reduced table column density where needed.
 - Backend startup should log a secret-safe configuration summary and request/activity diagnostics so configuration issues can be debugged without exposing API keys.
 
@@ -175,3 +176,4 @@ Phase 1: Jellyfin media index, SSH-based remote filesystem inspection, server mo
 - 2026-05-03: Added OIDC/JWT auth support plus root-level Docker Compose deployment files for production and dev workflows.
 - 2026-05-04: Backend Docker Compose now mounts a host SSH directory into `/root/.ssh` so Paramiko can use a private key and strict host-key checking without baking secrets into the image.
 - 2026-05-04: The frontend was adjusted to be more mobile-safe by making the app shell tabs scrollable, stacking header controls on narrow screens, and hiding low-priority table columns on smaller displays.
+- 2026-05-04: The app header was upgraded to a two-row branded layout with a left logo mark, right-side username/logout controls, and a separate navigation row.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e8299d2..db810d7 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,7 +9,6 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ThemeProvider } from "@mui/material/styles";
 import {
 	AppBar,
-	Toolbar,
 	Typography,
 	Box,
 	Tabs,
@@ -54,53 +53,98 @@ function Shell({
 	return (
 		<>
 			<CssBaseline />
-			<AppBar position="sticky" color="inherit" elevation={0}>
-				<Toolbar
+			<AppBar
+				position="sticky"
+				color="inherit"
+				elevation={0}
+				sx={{
+					borderBottom: 1,
+					borderColor: "divider",
+					backgroundImage: "none",
+				}}
+			>
+				<Box
 					sx={{
 						display: "flex",
 						flexDirection: { xs: "column", md: "row" },
 						alignItems: { xs: "stretch", md: "center" },
-						gap: 1,
-						py: { xs: 1, md: 0 },
-						minHeight: { xs: "auto", md: 68 },
+						justifyContent: "space-between",
+						gap: 1.5,
+						px: { xs: 1.5, sm: 2.5, md: 3 },
+						py: { xs: 1, md: 1.25 },
 					}}
 				>
 					<Box
 						sx={{
 							display: "flex",
 							alignItems: "center",
-							justifyContent: "space-between",
-							width: "100%",
 							gap: 1.5,
+							minWidth: 0,
 						}}
 					>
-						<Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1 }}>
-							Manage
-						</Typography>
-						<Stack
-							direction="row"
-							spacing={0.75}
+						<Box
 							sx={{
-								alignItems: "center",
-								flexWrap: "wrap",
-								justifyContent: "flex-end",
+								width: 42,
+								height: 42,
+								borderRadius: 2,
+								display: "grid",
+								placeItems: "center",
+								fontWeight: 800,
+								fontSize: 20,
+								color: "primary.contrastText",
+								bgcolor: "primary.main",
+								backgroundImage:
+									"linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0))",
+								boxShadow: 1,
+								flexShrink: 0,
 							}}
 						>
-							{authLabel && (
-								<Chip size="small" variant="outlined" label={authLabel} />
-							)}
-							<Chip
-								size="small"
-								variant="outlined"
-								label={darkMode ? "Dark" : "Light"}
-							/>
-							{onSignOut && (
-								<Button size="small" variant="text" onClick={onSignOut}>
-									Sign out
-								</Button>
-							)}
-						</Stack>
+							M
+						</Box>
+						<Box sx={{ minWidth: 0 }}>
+							<Typography
+								variant="h6"
+								sx={{ fontWeight: 800, lineHeight: 1.05 }}
+							>
+								Manage
+							</Typography>
+							<Typography variant="caption" color="text.secondary" noWrap>
+								Media operations dashboard
+							</Typography>
+						</Box>
 					</Box>
+
+					<Stack
+						direction="row"
+						spacing={1}
+						sx={{
+							alignItems: "center",
+							flexWrap: "wrap",
+							justifyContent: { xs: "flex-start", md: "flex-end" },
+							width: { xs: "100%", md: "auto" },
+						}}
+					>
+						{authLabel && (
+							<Chip
+								label={authLabel}
+								variant="outlined"
+								sx={{ maxWidth: { xs: "100%", sm: 220 } }}
+							/>
+						)}
+						<Chip label={darkMode ? "Dark" : "Light"} variant="outlined" />
+						{onSignOut && (
+							<Button
+								variant="outlined"
+								onClick={onSignOut}
+								sx={{ whiteSpace: "nowrap" }}
+							>
+								Logout
+							</Button>
+						)}
+					</Stack>
+				</Box>
+
+				<Box sx={{ borderTop: 1, borderColor: "divider" }}>
 					<Tabs
 						value={current}
 						textColor="primary"
@@ -109,13 +153,15 @@ function Shell({
 						scrollButtons="auto"
 						allowScrollButtonsMobile
 						sx={{
-							width: "100%",
-							minHeight: 40,
+							px: { xs: 0.75, sm: 1.5, md: 3 },
+							minHeight: 44,
 							"& .MuiTab-root": {
-								minHeight: 40,
+								minHeight: 44,
 								py: 1,
-								px: 1.25,
+								px: 1.5,
 								minWidth: { xs: 96, md: 120 },
+								textTransform: "none",
+								fontWeight: 600,
 							},
 						}}
 					>
@@ -130,7 +176,7 @@ function Shell({
 						<Tab value="/users" label="Users" component={NavLink} to="/users" />
 						<Tab value="/files" label="Files" component={NavLink} to="/files" />
 					</Tabs>
-				</Toolbar>
+				</Box>
 			</AppBar>
 			<Container
 				maxWidth={false}