← Back to list
01Issue
FeatureShippedSwamp Club
Inline editing: click-to-edit fields instead of pencil icons
Opened by keeb · 4/13/2026· Shipped 4/21/2026
Problem
Every editable field in the app (issue title, body, comments, profile fields, admin metadata) requires clicking a pencil icon to enter edit mode. This adds an extra click to every edit and clutters the UI with pencil icons. It should feel more like Notion — click the content itself and start editing.
Current behavior
Pencil icons gate editing across the app:
- Issue title (
LabIssueDetail.tsx) — pencil toggleseditingTitlesignal, swaps text for input - Issue body (
LabIssueDetail.tsx) — pencil toggleseditingBodysignal, swaps markdown for textarea - Comments (
LabIssueDetail.tsx) — pencil on each comment toggles inline textarea - Issue type & source (
LabIssueDetail.tsx, admin-only) — pencil toggles select dropdowns - Assignees (
LabIssueDetail.tsx, admin-only) — pencil toggles multi-select picker - Profile fields (
ProfileEditor.tsx) — pencil expands the entire edit form (name, bio, website, etc.)
All use Preact signals as boolean toggles (editingTitle, editingBody, editingCommentId, etc.) to swap between display and edit views.
Proposed solution
Replace the pencil-to-edit pattern with click-to-edit on the content itself:
- Text fields (title, comment body): clicking the text focuses an inline input/textarea. Show a subtle hover state (cursor change, faint border or underline) to signal editability.
- Issue body: clicking the rendered markdown switches to the textarea editor. A hover indicator (e.g. faint outline) hints that it's editable.
- Dropdowns (type, source): clicking the badge/label opens the select inline. No pencil needed.
- Assignees: clicking the assignee section opens the picker.
- Profile: clicking individual fields makes them editable inline rather than expanding a full form.
Key considerations:
- Respect existing permission checks (
canEdit,isAdmin, comment author) — only show the editable hover state for users who have permission - Keep keyboard support (Enter to save, Escape to cancel)
- Read-only users should see no hover affordance — fields look static
- Mobile: tap-to-edit should work the same way; consider slightly larger tap targets
Alternatives considered
- Keep pencils but add click-to-edit as well: Redundant UI, defeats the purpose
- Double-click to edit: Less discoverable than single-click with hover hints
02Bog Flow
Shipped
Click a lifecycle step above to view its details.
03Sludge Pulse
Sign in to post a ripple.