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

Merged

james merged 1 commit from 143-skills-ds-rebuild into main 2026-06-20 03:45:24 +00:00

Conversation 2 Commits 1 Files changed 2 +514 -346

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

Owner

Copy link

Closes #143.

Summary

• /skills now opens read-only. Each section is a Card with a chevron toggle, the section name, and a neutral count Badge. Skills render as pill chips in view mode.
• A page-level Edit (secondary, pencil-led) reveals tools; header flips to ghost Cancel + primary Done. Both are no-op exits — every per-row / per-section mutation already persists eagerly, so there's no buffered state to flush. This is the simpler read of the ticket text and matches the existing model from #69.
• Edit mode adds:
  • Per-section IconButton toolbar: ArrowUp / ArrowDown / Pencil (rename) / Trash2. Rename swaps the section header into an inline input + Save/Cancel.
  • Per-skill-row hover-revealed toolbar: ArrowUp / ArrowDown / X. Opacity transition is 150ms per the DS motion guidance.
  • Inline Add a skill… input + secondary Add button per section.
  • Page-level Section name… + primary Add section row at the bottom.
• Following the design, the per-skill rename pencil is dropped — the design's hover toolbar only shows up / down / remove. PATCH /api/skills/:id still exists; a follow-up can re-expose rename via click-to-edit if users miss it. Noted in the source comment so future-me can find it.
• Collapse state still persists in localStorage and survives the Edit toggle (acceptance criterion).
• Carol DS token aliases throughout; no inline styles. New skills.module.css ports cax-skillsec / cax-chip / cax-inlineinput from the design.

Test plan

• npm run lint / npx tsc --noEmit / npm test all clean (440 passed).
• View mode in both themes — chevron, name, count badge, pill chips per section.
• Edit mode in both themes — section tools visible, hover-revealed skill-row tools (verified by hovering one row in the screenshot capture).
• Collapse a section in view mode → chevron flips to chevron-right, body hides.
• Edit → click section pencil → inline rename form (input + Save / Cancel) replaces the header.
• Scroll-to-bottom in edit mode shows the Section name… / Add section row.
• HTML inline-style grep returns only style="color:transparent" on the sidebar <img> (Next.js Image default).

🤖 Generated with Claude Code

Closes #143. ## Summary - `/skills` now opens read-only. Each section is a `Card` with a chevron toggle, the section name, and a neutral count `Badge`. Skills render as pill chips in view mode. - A page-level `Edit` (secondary, pencil-led) reveals tools; header flips to ghost `Cancel` + primary `Done`. **Both are no-op exits** — every per-row / per-section mutation already persists eagerly, so there's no buffered state to flush. This is the simpler read of the ticket text and matches the existing model from #69. - **Edit mode adds**: - Per-section `IconButton` toolbar: `ArrowUp` / `ArrowDown` / `Pencil` (rename) / `Trash2`. Rename swaps the section header into an inline input + Save/Cancel. - Per-skill-row hover-revealed toolbar: `ArrowUp` / `ArrowDown` / `X`. Opacity transition is 150ms per the DS motion guidance. - Inline `Add a skill…` input + `secondary` Add button per section. - Page-level `Section name…` + `primary` Add section row at the bottom. - Following the design, the per-skill rename pencil is **dropped** — the design's hover toolbar only shows up / down / remove. PATCH `/api/skills/:id` still exists; a follow-up can re-expose rename via click-to-edit if users miss it. Noted in the source comment so future-me can find it. - Collapse state still persists in `localStorage` and survives the Edit toggle (acceptance criterion). - Carol DS token aliases throughout; no inline styles. New `skills.module.css` ports `cax-skillsec` / `cax-chip` / `cax-inlineinput` from the design. ## Test plan - [x] `npm run lint` / `npx tsc --noEmit` / `npm test` all clean (440 passed). - [x] View mode in both themes — chevron, name, count badge, pill chips per section. - [x] Edit mode in both themes — section tools visible, hover-revealed skill-row tools (verified by hovering one row in the screenshot capture). - [x] Collapse a section in view mode → chevron flips to `chevron-right`, body hides. - [x] Edit → click section pencil → inline rename form (input + Save / Cancel) replaces the header. - [x] Scroll-to-bottom in edit mode shows the `Section name… / Add section` row. - [x] HTML inline-style grep returns only `style="color:transparent"` on the sidebar `<img>` (Next.js Image default). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

james added 1 commit 2026-06-20 03:44:08 +00:00

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

The skills screen now opens read-only with pill chips inside
collapsible sections; a page-level Edit button reveals section + row
toolbars and the inline add inputs. Each section header carries the
chevron toggle, the section name, and a neutral count Badge — collapse
state still survives across the Edit toggle (and across reloads via
localStorage from #69).

Edit mode adds: per-section IconButton tools (Move up / Move down /
Pencil rename / Trash delete); per-row hover-revealed tools (Move up
/ Move down / X remove) with the design's 150ms opacity transition;
an inline "Add a skill…" input per section; and a page-level
"Section name…" + primary "Add section" row at the bottom of the
list. Cancel and Done are both no-op exits — every per-row / per-
section mutation has already persisted, matching the existing eager
model.

Following the design, the per-skill rename pencil is dropped (the
design's hover toolbar shows only up / down / remove). The PATCH
endpoint is still wired; a future ticket can re-expose rename via
click-to-edit on the row name if users miss it.

Carol DS token aliases throughout; no inline styles; new
skills.module.css carries the layout, chip surface, hover-tools
transition, and the inline-input rules ported from the design's
.cax-inlineinput.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

james merged commit d24a0f9869 into main 2026-06-20 03:45:24 +00:00

james deleted branch 143-skills-ds-rebuild 2026-06-20 03:45:24 +00:00

james referenced this pull request from a commit 2026-06-20 03:45:26 +00:00

Merge pull request 'feat(pwa): rebuild /skills against DS primitives + view/edit toggle (#143)' (#170) from 143-skills-ds-rebuild into main

forgejo-actions commented 2026-06-20 03:45:48 +00:00

Copy link

Trivy (container image)

Threshold: high  ·  Total findings: 121  ·  At/above threshold: 1

critical	high	medium	low
0	1	50	70

severity	id	package	installed / range	fix
high	CVE-2026-12151	undici	6.25.0	6.27.0, 7.28.0, 8.5.0

<!-- scanner-comment: trivy --> ### Trivy (container image) **Threshold:** `high` &nbsp;·&nbsp; **Total findings:** 121 &nbsp;·&nbsp; **At/above threshold:** 1 | critical | high | medium | low | |---:|---:|---:|---:| | 0 | 1 | 50 | 70 | | severity | id | package | installed / range | fix | |---|---|---|---|---| | high | [CVE-2026-12151](https://avd.aquasec.com/nvd/cve-2026-12151) | undici | 6.25.0 | `6.27.0, 7.28.0, 8.5.0` |

forgejo-actions commented 2026-06-20 03:53:04 +00:00

Copy link

📊 Test coverage

Patch coverage: no testable lines changed.

Overall (app/, lib/, db/, excluding UI per ADR-0019):

Metric	Value	Soft target
Lines	80.8% ✅	≥ 50%
Branches	80.8% ✅	≥ 75%
Functions	88.5%	informational

Soft thresholds per ADR-0019. Coverage is informational and does not block merge.

<!-- coverage-comment --> ## 📊 Test coverage **Patch coverage:** no testable lines changed. **Overall** (`app/`, `lib/`, `db/`, excluding UI per ADR-0019): | Metric | Value | Soft target | |---|---|---| | Lines | 80.8% ✅ | ≥ 50% | | Branches | 80.8% ✅ | ≥ 75% | | Functions | 88.5% | informational | Soft thresholds per [ADR-0019](docs/adr/0019-coverage-soft-targets.md). Coverage is informational and does not block merge.

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

area:auth

Authentication and authorization

  

area:ci

Forgejo Actions, build, test, security, release

  

area:db

Database abstraction, migrations, persistence

  

area:infra

Containerization, deployment, foundational tooling

  

area:native

React Native app (Android + Linux Flatpak)

  

area:pwa

PWA / web frontend

  

area:service

Backend service, API routes, persistence

  

epic

High-level tracker; links several feature tickets

  

feature

A user-facing feature

  

foundation

Foundational work that other tickets build on

No labels

area:auth

area:ci

area:db

area:infra

area:native

area:pwa

area:service

epic

feature

foundation

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

james/carol!170

No description provided.