From f0597ae6b1742f9ff2217d0a8ceffa51670a0443 Mon Sep 17 00:00:00 2001 From: Jean-Luc Makiola Date: Sun, 19 Apr 2026 22:00:19 +0200 Subject: [PATCH] docs(38): fix UI-SPEC issues flagged by checker - Spacing: change tree row indent from pl-5 (20px) to pl-4 (16px); remove non-standard exception entry - Copywriting: change delete confirmation button from "Delete" to "Delete Tag" - Visuals: declare focal point for list page (tree view) and edit page (name input) - Typography: lower Label/Display from 12px to 11px, establishing 3px gap above 14px body Co-Authored-By: Claude Sonnet 4.6 --- .../38-admin-tag-management/38-UI-SPEC.md | 32 +++++++++++++++---- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/.planning/phases/38-admin-tag-management/38-UI-SPEC.md b/.planning/phases/38-admin-tag-management/38-UI-SPEC.md index b49afa8..b8a4e5b 100644 --- a/.planning/phases/38-admin-tag-management/38-UI-SPEC.md +++ b/.planning/phases/38-admin-tag-management/38-UI-SPEC.md @@ -36,16 +36,17 @@ Declared values (multiples of 4): |-------|-------|-------| | xs | 4px | Icon gaps (`gap-1`), inline badge padding (`px-1.5 py-0.5`) | | sm | 8px | Tag chip gaps (`gap-2`), compact row padding (`py-2`) | -| md | 16px | Default field spacing (`mt-4`), grid gaps (`gap-4`) | +| md | 16px | Default field spacing (`mt-4`), grid gaps (`gap-4`), tree row indent per depth level (`pl-4`) | | lg | 24px | Section padding (`p-6`), page section breaks (`pt-6`) | | xl | 32px | Form bottom margin (`mt-8`) | | 2xl | 48px | Not used in admin shell | | 3xl | 64px | Not used in admin shell | Exceptions: -- Tree row indent: 20px per depth level (value between `sm` and `md` — closest Tailwind class: `pl-5` per level). Source: CONTEXT.md specifics, "16-24px per level". - Chevron toggle button: 28px click target minimum (`p-1` around 16px icon = 24px; acceptable for desktop-only admin tool). +Note: Tree row indent is `pl-4` (16px) per depth level — standard `md` token, no exception required. Root tags (depth 0) have no indent. + --- ## Typography @@ -53,13 +54,14 @@ Exceptions: | Role | Size | Weight | Line Height | |------|------|--------|-------------| | Body | 14px (text-sm) | 400 (regular) | 1.5 | -| Label | 12px (text-xs) | 600 (semibold) | 1.4 | +| Label / Display | 11px (text-[11px]) | 600 (semibold) | 1.4 | | Heading | 18px (text-lg) | 600 (semibold) | 1.2 | -| Display | 12px (text-xs) | 600 (semibold, uppercase, tracking-wide) | 1.4 | Source: `src/client/routes/admin/items.tsx` — `text-lg font-semibold text-gray-900`, `text-xs font-semibold text-gray-400 uppercase tracking-wide`, `text-sm`. -Display role = table column headers (uppercase, tracked, muted gray-400). Not a separate heading level. +Label/Display role = field labels and table column headers (uppercase, tracked, muted gray-400). Set to 11px (`text-[11px]`) to establish a clear 3px hierarchy gap above 14px body. Previously 12px — adjusted to resolve weak hierarchy flag. + +Three sizes in use: 11px (label/display) · 14px (body) · 18px (heading). Two weights: 400 (regular) · 600 (semibold). --- @@ -87,6 +89,22 @@ Source: `src/client/routes/admin/items.$itemId.tsx` — extracted exact Tailwind --- +## Focal Point + +**List page primary visual anchor: the tag tree view.** + +The collapsible `TagTreeView` card is the dominant element on the list page. It occupies the main content column and carries all primary interactions (expand/collapse, row-level edit navigation). The `TagQuickAddForm` is positioned above the tree as a supporting action — it is intentionally compact (`flex items-center gap-3`) to avoid competing with the tree for attention. + +Visual hierarchy enforcement: +- Tree card: `rounded-xl border border-gray-100 bg-white` — elevated white surface drawing the eye. +- Quick-add form: no card wrapper, sits flush in the page background (`bg-gray-50`), visually subordinate. + +**Edit page primary visual anchor: the tag name input field.** + +On the edit page the name field is the first and most prominent form element. The parent picker and action buttons are secondary. + +--- + ## Component Inventory ### Existing (reuse without modification) @@ -125,7 +143,7 @@ Each row in the collapsible tag tree: ### Structure -- Indent: `pl-5` (20px) per depth level starting at depth 1. Root tags (depth 0) have no indent. +- Indent: `pl-4` (16px) per depth level starting at depth 1. Root tags (depth 0) have no indent. - Chevron: `LucideIcon name="chevron-right"` (collapsed) / `LucideIcon name="chevron-down"` (expanded), `size={14}`, color `text-gray-400`. Click area: `p-1 rounded hover:bg-gray-100`. - Leaf nodes (no children): no chevron rendered; indent pad replaced with `w-6` spacer to align name column. - Row hover: `hover:bg-gray-50 transition-colors` on the full row `
`. @@ -208,7 +226,7 @@ Parent picker "no parent" option label: "No parent (top-level)" as first `