From a774d9f6deb8217fc44121e01d2143eb34ce299e Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 19 Jun 2026 22:49:59 +0000 Subject: [PATCH] fix(sidebar): key nav icon colours off data-section, not DOM order The per-section icon colours used :nth-child(1..6), but the nav grew to 8 items (files, shared, shared-with-me, recent, favorites, photos, music, trash). The colours had drifted out of sync with their labels, and music and trash got no colour at all. Map each item's colour off a stable `data-section` key instead, covering all eight sections with distinct curated calendar-dot hues (sibling blues for the two share directions, purple for music, red for trash). Reordering or adding nav items can no longer desync the colours. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_013J5koaCrHDMvS7uwpawLBN --- frontend/src/lib/components/AppShell.svelte | 25 ++++++--- frontend/src/lib/styles/ported/sidebar.css | 58 +++++++++++++-------- 2 files changed, 53 insertions(+), 30 deletions(-) diff --git a/frontend/src/lib/components/AppShell.svelte b/frontend/src/lib/components/AppShell.svelte index f291aa17..62865fbd 100644 --- a/frontend/src/lib/components/AppShell.svelte +++ b/frontend/src/lib/components/AppShell.svelte @@ -23,22 +23,30 @@ href: string; label: string; icon: string; + /** Stable key driving the per-section icon colour (see sidebar.css). */ + section: string; admin?: boolean; } const LINKS: NavLink[] = [ - { href: '/files', label: t('nav.files', 'Files'), icon: 'folder' }, - { href: '/shared', label: t('nav.shared', 'Shared'), icon: 'oxiexport' }, + { href: '/files', label: t('nav.files', 'Files'), icon: 'folder', section: 'files' }, + { href: '/shared', label: t('nav.shared', 'Shared'), icon: 'oxiexport', section: 'shared' }, { href: '/shared-with-me', label: t('nav.shared_with_me', 'Shared with me'), - icon: 'oxiimport' + icon: 'oxiimport', + section: 'shared-with-me' }, - { href: '/recent', label: t('nav.recent', 'Recent'), icon: 'clock' }, - { href: '/favorites', label: t('nav.favorites', 'Favorites'), icon: 'star' }, - { href: '/photos', label: t('nav.photos', 'Photos'), icon: 'images' }, - { href: '/music', label: t('nav.music', 'Music'), icon: 'music' }, - { href: '/trash', label: t('nav.trash', 'Trash'), icon: 'trash' } + { href: '/recent', label: t('nav.recent', 'Recent'), icon: 'clock', section: 'recent' }, + { + href: '/favorites', + label: t('nav.favorites', 'Favorites'), + icon: 'star', + section: 'favorites' + }, + { href: '/photos', label: t('nav.photos', 'Photos'), icon: 'images', section: 'photos' }, + { href: '/music', label: t('nav.music', 'Music'), icon: 'music', section: 'music' }, + { href: '/trash', label: t('nav.trash', 'Trash'), icon: 'trash', section: 'trash' } ]; const isAdmin = $derived(session.user?.role === 'admin'); @@ -256,6 +264,7 @@ class="nav-item" class:active={active(link.href)} href={link.href} + data-section={link.section} onclick={() => (sidebarOpen = false)} > diff --git a/frontend/src/lib/styles/ported/sidebar.css b/frontend/src/lib/styles/ported/sidebar.css index 445c54fc..17a41a9e 100644 --- a/frontend/src/lib/styles/ported/sidebar.css +++ b/frontend/src/lib/styles/ported/sidebar.css @@ -175,30 +175,44 @@ } } -/* Colored icons per section */ -.nav-item:nth-child(1) i, -.nav-item:nth-child(1) .oxi-icon { - color: var(--color-cal-1); -} /* Files - orange */ -.nav-item:nth-child(2) i, -.nav-item:nth-child(2) .oxi-icon { +/* Colored icons per section. + Keyed off the stable `data-section` attribute (set in AppShell's LINKS), NOT + DOM order — adding/reordering nav items can no longer desync the colours from + their labels. Each section maps to one curated calendar-dot hue (the same + --color-cal-* family used elsewhere), spread around the wheel so they read as + a set: the two share directions are sibling blues, music is purple to match + its gradient, and trash is red as a soft "destructive" affordance. */ +.nav-item[data-section="files"] i, +.nav-item[data-section="files"] .oxi-icon { color: var(--color-cal-2); -} /* Shared - blue */ -.nav-item:nth-child(3) i, -.nav-item:nth-child(3) .oxi-icon { - color: var(--color-cal-3); -} /* Recent - teal */ -.nav-item:nth-child(4) i, -.nav-item:nth-child(4) .oxi-icon { - color: var(--color-cal-4); -} /* Favorites - gold */ -.nav-item:nth-child(5) i, -.nav-item:nth-child(5) .oxi-icon { - color: var(--color-cal-5); -} /* Photos - pink */ -.nav-item:nth-child(6) i, -.nav-item:nth-child(6) .oxi-icon { +} /* Files - amber */ +.nav-item[data-section="shared"] i, +.nav-item[data-section="shared"] .oxi-icon { + color: var(--color-cal-7); +} /* Shared (outbound) - sky */ +.nav-item[data-section="shared-with-me"] i, +.nav-item[data-section="shared-with-me"] .oxi-icon { + color: var(--color-cal-8); +} /* Shared with me (inbound) - blue */ +.nav-item[data-section="recent"] i, +.nav-item[data-section="recent"] .oxi-icon { color: var(--color-cal-6); +} /* Recent - teal */ +.nav-item[data-section="favorites"] i, +.nav-item[data-section="favorites"] .oxi-icon { + color: var(--color-cal-3); +} /* Favorites - gold */ +.nav-item[data-section="photos"] i, +.nav-item[data-section="photos"] .oxi-icon { + color: var(--color-cal-10); +} /* Photos - magenta */ +.nav-item[data-section="music"] i, +.nav-item[data-section="music"] .oxi-icon { + color: var(--color-cal-9); +} /* Music - purple */ +.nav-item[data-section="trash"] i, +.nav-item[data-section="trash"] .oxi-icon { + color: var(--color-cal-1); } /* Trash - red */ /* Colourful icons at rest, but the ACTIVE item is always accent — one