Skip to main content
← Back to list
01Issue
FeatureShippedSwamp Club
Assigneeskeebstack72

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 toggles editingTitle signal, swaps text for input
  • Issue body (LabIssueDetail.tsx) — pencil toggles editingBody signal, 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
OPENTRIAGEDIN PROGRESSSHIPPED+ 1 MOREASSIGNED+ 11 MOREREVIEW+ 3 MOREPR_MERGEDSHIPPED

Shipped

4/21/2026, 7:49:18 PM

Click a lifecycle step above to view its details.

03Sludge Pulse
keeb assigned keeb4/14/2026, 4:13:56 PM
stack72 assigned stack724/20/2026, 11:35:13 PM

Sign in to post a ripple.