Projects: convert to display-first pattern (read-only view + Edit button) matching Profile/Experience #273

New issue

Closed

opened 2026-06-24 12:33:19 +00:00 by james · 0 comments

james commented

2026-06-24 12:33:19 +00:00

Owner

Why

The Projects tab currently leads with the create form and offers inline edit-in-place on every row. Profile, Experience, Education, Network, etc. have moved to a display-first pattern: a clean read-only view by default, with a top-right Edit button that toggles the page into edit mode. Bringing Projects in line makes the navigation feel consistent and the default view less visually busy.

Reference pattern

The Profile page-level-edit refactor (PR #266, commit 754046d) — apps/client/app/(app)/profile.tsx. A single editing flag in the screen flips every card on the page between view and edit UI. The header has Edit / Cancel + Done buttons sourced from profile.edit.* in the i18n catalog. Experience (apps/client/app/(app)/experience.tsx) follows the same convention — editing boolean, header buttons, child sections render either read rows or forms.

Scope

apps/client/app/(app)/projects.tsx — convert from inline-edit-on-every-row to view-by-default + page-level Edit toggle.
No detail route exists for Projects today; this is a single-screen change.
Add the small set of new i18n keys needed for the view-mode header (Edit / Cancel / Done aria + labels — reuse Profile's edit.* shape).

Acceptance criteria

Default view is a clean read-only listing of the user's projects (name, description, link). No inline form fields visible.
Top-right Edit button enters edit mode for the whole page.
Edit mode shows the existing create form + per-row Edit/Delete affordances (no behavioural regression vs today's full-edit UI).
Save persists changes and returns the page to view mode; Cancel discards in-progress create-form / row-edit state and returns to view mode.
Empty state (no projects yet) renders a friendly message in view mode and prompts the user to enter Edit mode to add the first.
Matches the visual convention of Profile/Experience (page header styling, button sizing, sentence case, no emoji).

Out of scope

Any API or DB-schema changes; the Projects entity and /api/projects endpoints stay untouched.
The create-project flow's mechanics — same fields, same validation, same submit.
A separate Projects detail route — list-level edit only.

## Why The Projects tab currently leads with the create form and offers inline edit-in-place on every row. Profile, Experience, Education, Network, etc. have moved to a *display-first* pattern: a clean read-only view by default, with a top-right Edit button that toggles the page into edit mode. Bringing Projects in line makes the navigation feel consistent and the default view less visually busy. ## Reference pattern The Profile page-level-edit refactor (PR #266, commit `754046d`) — `apps/client/app/(app)/profile.tsx`. A single `editing` flag in the screen flips every card on the page between view and edit UI. The header has Edit / Cancel + Done buttons sourced from `profile.edit.*` in the i18n catalog. Experience (`apps/client/app/(app)/experience.tsx`) follows the same convention — `editing` boolean, header buttons, child sections render either read rows or forms. ## Scope - `apps/client/app/(app)/projects.tsx` — convert from inline-edit-on-every-row to view-by-default + page-level Edit toggle. - No detail route exists for Projects today; this is a single-screen change. - Add the small set of new i18n keys needed for the view-mode header (Edit / Cancel / Done aria + labels — reuse Profile's `edit.*` shape). ## Acceptance criteria - Default view is a clean read-only listing of the user's projects (name, description, link). No inline form fields visible. - Top-right Edit button enters edit mode for the whole page. - Edit mode shows the existing create form + per-row Edit/Delete affordances (no behavioural regression vs today's full-edit UI). - Save persists changes and returns the page to view mode; Cancel discards in-progress create-form / row-edit state and returns to view mode. - Empty state (no projects yet) renders a friendly message in view mode and prompts the user to enter Edit mode to add the first. - Matches the visual convention of Profile/Experience (page header styling, button sizing, sentence case, no emoji). ## Out of scope - Any API or DB-schema changes; the Projects entity and `/api/projects` endpoints stay untouched. - The create-project flow's mechanics — same fields, same validation, same submit. - A separate Projects detail route — list-level edit only.

james referenced this issue from a commit

2026-06-24 12:40:05 +00:00

feat(client): convert Projects to display-first view with Edit toggle (#273)

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

2026-06-24 12:40:21 +00:00

feat(client): convert Projects to display-first view + Edit toggle (#273) #276

james closed this issue

2026-06-24 12:53:51 +00:00

james referenced this issue from a commit

2026-06-24 12:53:51 +00:00

Merge pull request 'feat(client): convert Projects to display-first view + Edit toggle (#273)' (#276) from 273-projects-display-first into main