Scaffold global navigation aligned to routes plan
Build out the full web route map from music-selfhost-routes.md as scaffolding (no functionality on new screens): - Full route tree: /login, /albums/:id, /artists/:id, /playlists(+detail), /discover, /upload, metadata editor (single + batch), /storage/maintenance, /queue, nested /settings and /admin, and a 404. - Sidebar rebuilt to the A1 spec with permission-gated Discover/Upload. - ProtectedRoute gains requirePermission; Permission exported. - AppShell wraps Outlet in a Suspense boundary for lazy routes. - Reusable Placeholder + SubNav; Settings/Admin become nested layouts. - Settings/Profile: wired language + theme selectors. - Remove orphaned Home feature (web has no Home; / -> /library) and the now-unused house icon + nav.home keys. - i18n keys (en + ru) and CSS for page-title/sub-nav. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -723,3 +723,44 @@
|
||||
color: var(--fg-3);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
PAGE HEADER + SECONDARY NAV (Settings, Admin)
|
||||
============================================================ */
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-family: var(--font-display, var(--font-sans));
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: var(--track-snug);
|
||||
color: var(--fg-1);
|
||||
}
|
||||
|
||||
.sub-nav {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
border-bottom: 1px solid var(--hair);
|
||||
}
|
||||
.sub-nav-item {
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--fg-2);
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
transition:
|
||||
color 0.12s ease,
|
||||
border-color 0.12s ease;
|
||||
}
|
||||
.sub-nav-item:hover {
|
||||
color: var(--fg-1);
|
||||
}
|
||||
.sub-nav-item.active {
|
||||
color: var(--fg-1);
|
||||
border-bottom-color: var(--lime);
|
||||
}
|
||||
|
||||
/* Sidebar section header that doubles as a link (Playlists) */
|
||||
.sb-sec-link.active {
|
||||
color: var(--fg-1);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user