Skills screen rebuild — collapsible sections + view-by-default chips + Edit toggle reveals reorder/add/delete #143

New issue

Closed

opened 2026-06-19 17:34:49 +00:00 by james · 0 comments

james commented

2026-06-19 17:34:49 +00:00

Owner

Existing /skills (#69) is always-editable. The design (../carol-design/design_files/SkillsScreen.jsx) defaults to view mode (skills as pill chips, no tools), with collapsible sections (chevron + name + count Badge). Edit mode reveals reorder/rename/delete tools per section, hover-revealed move/remove tools per skill row, an inline "Add a skill…" input, and a page-level "New section name…" + Add section row at the bottom.

Scope

Rebuild app/(app)/skills/page.tsx + client against the new primitives and tokens.
View mode: sections collapsed/open via chevron toggle; skills render as pill chips (padding: 5px 11px, radius full, 1px var(--border), var(--surface-2) background).
Edit mode: per-section toolbar (move up/down, rename, delete); per-row hover tools (move up/down, remove); inline "Add a skill…" input per section; page-level "New section name…" + Add at the bottom.
Collapse state is per-section, independent of edit mode (chevron flips chevron-down / chevron-right).
Done / Cancel semantics: discuss in the PR — Done as a no-op commit boundary (mutations have already persisted as each tool was clicked) is the simplest read of the design; alternatively buffer locally and persist on Done. Recommend the former for parity with the existing eager-persist behaviour.

Acceptance criteria

View ↔ Edit toggle as designed.
Reorder, rename, delete, add — all preserved; cross-user isolation tests still pass.
Collapse state survives an Edit toggle.
Hover-revealed tools have a 120–180ms transition per the DS motion guidance.
No inline styles in the rebuilt files.

Out of scope

Drag-and-drop reorder (arrow buttons only, matching the design).
Voice / copy rewrite.

Composes with

Design package, token-foundation ticket, component-primitives ticket, sidebar-shell ticket, #69.

Existing `/skills` (#69) is always-editable. The design (`../carol-design/design_files/SkillsScreen.jsx`) defaults to view mode (skills as pill chips, no tools), with collapsible sections (chevron + name + count `Badge`). Edit mode reveals reorder/rename/delete tools per section, hover-revealed move/remove tools per skill row, an inline "Add a skill…" input, and a page-level "New section name…" + Add section row at the bottom. ## Scope - Rebuild `app/(app)/skills/page.tsx` + client against the new primitives and tokens. - **View mode:** sections collapsed/open via chevron toggle; skills render as pill chips (`padding: 5px 11px`, `radius full`, `1px var(--border)`, `var(--surface-2)` background). - **Edit mode:** per-section toolbar (move up/down, rename, delete); per-row hover tools (move up/down, remove); inline "Add a skill…" input per section; page-level "New section name…" + Add at the bottom. - Collapse state is per-section, independent of edit mode (chevron flips `chevron-down` / `chevron-right`). - **Done / Cancel semantics:** discuss in the PR — Done as a no-op commit boundary (mutations have already persisted as each tool was clicked) is the simplest read of the design; alternatively buffer locally and persist on Done. Recommend the former for parity with the existing eager-persist behaviour. ## Acceptance criteria - [ ] View ↔ Edit toggle as designed. - [ ] Reorder, rename, delete, add — all preserved; cross-user isolation tests still pass. - [ ] Collapse state survives an Edit toggle. - [ ] Hover-revealed tools have a 120–180ms transition per the DS motion guidance. - [ ] No inline styles in the rebuilt files. ## Out of scope - Drag-and-drop reorder (arrow buttons only, matching the design). - Voice / copy rewrite. ## Composes with Design package, token-foundation ticket, component-primitives ticket, sidebar-shell ticket, #69.

james added the

area:pwa

feature

labels

2026-06-19 17:36:11 +00:00

james referenced this issue from a commit

2026-06-20 03:43:46 +00:00

feat(pwa): rebuild /skills against DS primitives + view/edit toggle (#143)

james referenced this issue from a pull request that will close it,

2026-06-20 03:44:08 +00:00

feat(pwa): rebuild /skills against DS primitives + view/edit toggle (#143) #170

james closed this issue