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:
@@ -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:
|
||||
|
||||
@@ -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 & 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}`;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user