Files

BOHA fd2e613aa5 feat(ui): sidebar icon refresh + unified detail-page headers

Sidebar (user-approved design, docs/superpowers/specs/2026-06-12-sidebar-
icons-design.md): all 31 menu items get unique contextual stroke glyphs in
rounded-square tiles tinted per section (Docházka blue, Kniha jízd teal,
Administrativa amber, Sklad violet, Systém slate; new teal/violet/slate
palette entries with channel tokens in both schemes). Replaces the old set
where 13 items shared a glyph (3x people, 3x sliders, ...) and Faktury was a
dollar sign. Odin stays the only solid + animated tile. Uniqueness pinned by
navdata-icons.test.ts (tsconfig.test.json gains jsx for the .tsx import).

Headers: ProjectDetail and OrderDetail now match the Offer/Invoice shell —
number rendered in secondary color at regular weight next to the bold
entity word, and flexWrap on both left header boxes so the title drops
below Zpět on phones instead of overflowing the viewport (the reported
mobile bug on received orders).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

2026-06-12 23:37:44 +02:00

2.6 KiB

Raw Blame History

Sidebar icon refresh — design

Date: 2026-06-12 · Status: approved (visual companion session, 3 screens)

Problem

All 31 sidebar items have icons, but 13 share a glyph with another item (3× "people", 3× "sliders", 2× grid/bar-chart/box/history-clock) and Faktury uses a dollar sign in an app that bills in Kč/EUR. Duplicated glyphs defeat the purpose of icons as unique visual anchors.

Decisions (user-approved)

Full refresh of all items (option B over targeted fix).
Tile language (option B of 3 rendered directions): every item's glyph sits in a rounded-square tile (border-radius 32%, echoing OdinMark), as a soft color wash — one muted hue per menu section: Přehled primary (red) · Docházka info (blue) · Kniha jízd teal · Administrativa warning (amber) · Sklad violet · Systém slate.
Odin stays unique: the only solid (gradient) tile and the only animated icon. No animation anywhere else. Red stays reserved for Odin/primary.
Glyph set approved on the full-set screen: receipt for Faktury, business card for Zákazníci, truck for Dodavatelé, stamp for Schvalování, ledger ± for Správa bilancí, route/pin/car for Kniha jízd, barcode for Inventura, shelf rack for Lokace, arrows into/out of a box for Příjmy/Výdeje, warehouse hall for Sklad přehled, tag/cart/folder for Nabídky/Objednávky/Projekty, gauge for Přehled, paper plane for Žádosti, timesheet for Moje historie (docházka), shapes for Kategorie, chart frame for Reporty, magnifier-over-list for Audit log. Kept concepts (now unique in the set): clock (Záznam docházky), calendar (Plán prací), people (Uživatelé), gear (Nastavení), box (Položky).

Implementation

theme.ts: add teal, violet, slate palette entries (light + dark mains, full main/light/dark/contrastText so cssVariables emits *Channel tokens) + TS module augmentation.
navData.tsx: MenuSection.hue (palette key), new glyph SVGs (stroke, 24-viewBox, width 2, round caps), MenuItem.rawIcon flag for Odin (its icon ships its own tile).
SidebarNav.tsx: renders the tile (26 px, radius 32%, bgcolor: rgba(<hue>.mainChannel / 0.12), glyph color <hue>.main, svg 16 px) around every non-rawIcon item. No hardcoded hex; washes are channel-alpha so both schemes work.
Pinning test navdata-icons.test.ts: every non-raw icon renders to unique static markup (no two items may ever share a glyph again).

Out of scope

Animation for non-Odin icons (explicitly rejected), page-level icons, mobile drawer changes (it reuses SidebarNav).

2.6 KiB Raw Blame History Unescape Escape