feat: shared nav bar on Help and Settings pages

Replaces the lone "← Back to Cortex" link with a consistent page-nav
on both pages: ← Chat | Help | Settings | Sign out

Active page is highlighted purple; others are muted gray.
Settings page gets a {{ help_href }} template var from settings.py.
Help page builds nav links from the existing cfg JS object.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-29 22:09:08 -04:00
parent a94fdc869d
commit bd6532e93a
3 changed files with 63 additions and 18 deletions

View File

@@ -72,6 +72,7 @@ def _settings_page(username: str, personas: list[str], success: str = "", error:
html = html.replace("{{ persona_items }}", persona_items or "<li><em>No personas yet.</em></li>")
back_persona = personas[0] if personas else ""
html = html.replace("{{ back_href }}", f"/{username}/{back_persona}" if back_persona else "/")
html = html.replace("{{ help_href }}", f"/help?persona={back_persona}" if back_persona else "/help")
if success:
html = html.replace("<!-- SUCCESS -->", f'<p class="success">{success}</p>')
if error:

View File

@@ -27,14 +27,30 @@
margin: 0 auto;
}
.back-link {
display: inline-block;
font-size: 0.8rem;
color: #94a3b8;
text-decoration: none;
margin-bottom: 1.5rem;
.page-nav {
display: flex;
align-items: center;
gap: 0.25rem;
margin-bottom: 1.75rem;
flex-wrap: wrap;
}
.back-link:hover { color: #a78bfa; }
.nav-link {
display: inline-flex;
align-items: center;
padding: 0.3rem 0.6rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 500;
color: #64748b;
text-decoration: none;
transition: color 0.15s, background 0.15s;
white-space: nowrap;
}
.nav-link:hover { color: #cbd5e1; background: rgba(255,255,255,0.05); }
.nav-link.active { color: #a78bfa; }
.nav-spacer { flex: 1; min-width: 0.5rem; }
.nav-link.nav-logout { color: #475569; }
.nav-link.nav-logout:hover { color: #94a3b8; background: none; }
header {
margin-bottom: 2rem;
@@ -106,7 +122,13 @@
</head>
<body>
<div class="page">
<a id="back-link" href="/" class="back-link">← Back to Cortex</a>
<nav class="page-nav" id="page-nav">
<a id="nav-chat" href="/" class="nav-link">← Chat</a>
<a href="/help" class="nav-link active">Help</a>
<a href="/settings" class="nav-link" id="nav-settings">Settings</a>
<span class="nav-spacer"></span>
<a href="/logout" class="nav-link nav-logout">Sign out</a>
</nav>
<header>
<h1>Help &amp; Reference</h1>
@@ -122,8 +144,8 @@
const persona = cfg.persona || 'inara';
const params = `user=${encodeURIComponent(user)}&persona=${encodeURIComponent(persona)}`;
// Wire up back link and persona label
document.getElementById('back-link').href = cfg.backHref || '/';
// Wire up nav links and persona label
document.getElementById('nav-chat').href = cfg.backHref || '/';
if (persona) {
document.getElementById('persona-label').textContent =
`${persona.charAt(0).toUpperCase() + persona.slice(1)} · ${user}`;

View File

@@ -33,14 +33,30 @@
max-width: 480px;
}
.back-link {
display: inline-block;
font-size: 0.8rem;
color: #94a3b8;
text-decoration: none;
margin-bottom: 1.5rem;
.page-nav {
display: flex;
align-items: center;
gap: 0.25rem;
margin-bottom: 1.75rem;
flex-wrap: wrap;
}
.back-link:hover { color: #a78bfa; }
.nav-link {
display: inline-flex;
align-items: center;
padding: 0.3rem 0.6rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 500;
color: #64748b;
text-decoration: none;
transition: color 0.15s, background 0.15s;
white-space: nowrap;
}
.nav-link:hover { color: #cbd5e1; background: rgba(255,255,255,0.05); }
.nav-link.active { color: #a78bfa; }
.nav-spacer { flex: 1; min-width: 0.5rem; }
.nav-link.nav-logout { color: #475569; }
.nav-link.nav-logout:hover { color: #94a3b8; background: none; }
.logo {
margin-bottom: 1.75rem;
@@ -192,7 +208,13 @@
</head>
<body>
<div class="card">
<a href="{{ back_href }}" class="back-link">← Back to Cortex</a>
<nav class="page-nav">
<a href="{{ back_href }}" class="nav-link">← Chat</a>
<a href="{{ help_href }}" class="nav-link">Help</a>
<a href="/settings" class="nav-link active">Settings</a>
<span class="nav-spacer"></span>
<a href="/logout" class="nav-link nav-logout">Sign out</a>
</nav>
<div class="logo">
<h1>Account Settings</h1>