mmainguy/cameras
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

vrek: retire icons goal, add icon principle

Browse Source 
Retires gol-m8je1wc (icons done for now) and records principle
pri-8ev5m89, derived from dec-1vnz5fw. Icons come from lucide-react,
always accompany text, are aria-hidden, use standard Tailwind sizes,
map one concept to one icon, and are tested by lucide-<name> class.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Mainguy 2026-09-19 12:35:54 -05:00
parent 190191df92
commit b05047d8e5
1 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.vrek/log.ndjson
View File

@ -417,3 +417,9 @@
{"id":"evt-2m9f36a8ak2r","type":"verification.recorded","subject":"ver-7ctbkz0","actor":"prn-q80g8mz","actor_kind":"agent","session":null,"payload":{"result":"pass","evidence":"src/app/icons.test.tsx covers each placement (server components rendered via renderToStaticMarkup, client ones in jsdom); existing security-bar, auth-pages and auth-forms tests still pass unchanged. Full suite 416/416, 2026-09-19. Not yet checked in a real browser."},"at":"2026-09-19T17:32:35.911Z","parents":["evt-6qf34pxqayr8"],"hash":"839cd33945cb92668b475bce329d7688ed9b5aed8c31a72725606ee84643a366"}
{"id":"evt-pj9asf1mqfa2","type":"node.status_changed","subject":"iss-chrdd0v","actor":"prn-q80g8mz","actor_kind":"agent","session":null,"payload":{"from":"open","to":"done"},"at":"2026-09-19T17:32:37.022Z","parents":["evt-2m9f36a8ak2r"],"hash":"4cedeee71ddeff681f58d31259537489eee4a9ca314c172b61a2915365e040e3"}
{"id":"evt-k12ns9yp4phn","type":"node.status_changed","subject":"iss-egy082x","actor":"prn-q80g8mz","actor_kind":"agent","session":null,"payload":{"from":"open","to":"done"},"at":"2026-09-19T17:32:38.169Z","parents":["evt-pj9asf1mqfa2"],"hash":"1a722c19e825f011d1514d9e760af22eb456a129ea8799e1565badfb51d1e88f"}
{"id":"evt-30k66rv28vma","type":"node.status_changed","subject":"gol-m8je1wc","actor":"prn-q80g8mz","actor_kind":"agent","session":null,"payload":{"from":"active","to":"retired"},"at":"2026-09-19T17:34:19.099Z","parents":["evt-k12ns9yp4phn"],"hash":"0e48e6b9a2c915c1d6105233ca3f22d5212c005c941515955f138687500b7c0e"}
{"id":"evt-7avw131w2f8w","type":"node.created","subject":"pri-8ev5m89","actor":"prn-q80g8mz","actor_kind":"agent","session":null,"payload":{"kind":"principle","title":"Icons come from lucide-react, always accompany text, and are accessible","body":"Standing rule derived from dec-1vnz5fw (Lucide chosen 2026-09-19) and applied in iss-scj42jq, iss-chrdd0v and iss-egy082x.\n\n1. Source: icons come from lucide-react, imported by name (`import { KeyRound } from \"lucide-react\"`); Next 16 optimizes those imports by default. No other icon library, icon font or hand-drawn SVG icon without a new dependency question (pri-mz2jxpb). Check that a name exists in the installed version before using it.\n2. Meaning: an icon never carries meaning alone. Status, warnings and actions always have visible text (e.g. the status badge's 'Needs login'), and state is never conveyed by color or icon alone.\n3. Accessibility: icons next to text are decorative and get `aria-hidden`. A control with only an icon must have an `aria-label` that says what it does. Warnings keep role=\"alert\" and their text. Adding an icon must not change a control's accessible name.\n4. Sizing and layout: size with Tailwind classes, not the `size` prop: `size-3.5` in small text and badges, `size-4` in buttons and inline messages, `size-5` in banners, `size-6` in page headings. Lay out with `inline-flex items-center gap-1…2`, and use `shrink-0` beside wrapping text.\n5. Motion and color: spinners use LoaderCircle with `animate-spin motion-reduce:animate-none`. Colored icons and badges have `dark:` variants.\n6. Consistency: one concept, one icon across the app. Current mapping: Cctv = live camera; LoaderCircle = in progress; KeyRound = login; ShieldAlert = unsecured or not activated; ShieldCheck = secured or signed in; WifiOff = offline; CircleAlert = error message; TriangleAlert = setup needed; RefreshCw = retry; Radar = scan; Timer = refresh rate; Trash2 = forget; Lock = save/sign-in heading; LogIn/LogOut = session; ExternalLink = opens another site in a new tab. Reuse these; if a new concept needs an icon, add it here.\n7. Tests: assert icons by their `lucide-<name>` class with toContain, since Lucide also adds alias classes (Trash2 → 'trash' and 'trash-2'), and assert every rendered `svg.lucide` is aria-hidden (see src/app/icons.test.tsx).\n\nWhy: icons should make the dashboard faster to scan without making it less accessible or less consistent. Rules out: icon-only status, icons that change accessible names, ad-hoc SVGs, and mixing icon sets.","status":"active","owner":"prn-q80g8mz","attrs":{},"weight":null},"at":"2026-09-19T17:35:04.935Z","parents":["evt-30k66rv28vma"],"hash":"0b9358f4789dd8dbb79f43cc0e9be9b072aa32331d876bb8e1250014cb3850d0"}
{"id":"evt-20am9fjb935n","type":"edge.added","subject":"pri-8ev5m89","actor":"prn-q80g8mz","actor_kind":"agent","session":null,"payload":{"kind":"guides","from":"pri-8ev5m89","to":"gol-6q1q5mr"},"at":"2026-09-19T17:35:04.937Z","parents":["evt-7avw131w2f8w"],"hash":"d28ca0d0de6cf2b2edeb395f8fb1cba0a447192ace809c31b68f68994e37155b"}
{"id":"evt-0aznmpcdcg5p","type":"edge.added","subject":"pri-8ev5m89","actor":"prn-q80g8mz","actor_kind":"agent","session":null,"payload":{"kind":"guides","from":"pri-8ev5m89","to":"gol-146a3cb"},"at":"2026-09-19T17:35:04.938Z","parents":["evt-20am9fjb935n"],"hash":"3a3810eedfea771a59f6c16952efbf7486403f311c578f2b0aa722195231fa54"}
{"id":"evt-gatzwhb87efd","type":"edge.added","subject":"pri-8ev5m89","actor":"prn-q80g8mz","actor_kind":"agent","session":null,"payload":{"kind":"guides","from":"pri-8ev5m89","to":"gol-wqf95dq"},"at":"2026-09-19T17:35:04.939Z","parents":["evt-0aznmpcdcg5p"],"hash":"a9535734194fc658c2fb9c0094e8b8bcf6be3e3f1f0015f5c3ab985ccba7765c"}
{"id":"evt-n0bphgm2fydj","type":"edge.added","subject":"pri-8ev5m89","actor":"prn-q80g8mz","actor_kind":"agent","session":null,"payload":{"kind":"discovered_from","from":"pri-8ev5m89","to":"dec-1vnz5fw"},"at":"2026-09-19T17:35:09.439Z","parents":["evt-gatzwhb87efd"],"hash":"4594421840fb035833e09ea618381aea810035288b5410e209bd321fae616bc4"}