Mobile Edit/Delete Custom Ideas — Design Spec

Date: 2026-04-05 Linear: SUR-31 (edit custom ideas)

Context

The edit and delete actions for custom ideas were implemented in the desktop/tablet ideas sidebar (long-press → action sheet). Mobile users never see the sidebar, so they have no way to edit or delete custom ideas they’ve created. The Settings modal is the right home for this on mobile — it already hosts the “Add a Custom Idea” workflow. This spec adds long-press → action sheet to the custom ideas list in Settings, bringing mobile to feature parity with desktop.

Approach

Thread one new prop (onLongPressIdea) into SettingsModal. Reuse the existing IdeaActionSheet, IdeaEditForm, useLongPress, and all business logic in useSettings. No new state, no new handlers.

Data Flow

User long-presses idea row in SettingsModal
  → onLongPressIdea(idea)                        [prop passed from App.jsx]
  → handleLongPressIdea(idea)                    [App.jsx:55-59]
  → activeIdea = idea, activeIdeaAction = 'sheet'

IdeaActionSheet renders at App level (above SettingsModal)
  → Edit  → activeIdeaAction = 'edit' → IdeaEditForm
             → onSave calls handleEditCustomIdea  [useSettings.js:49-81]
             → cascade rename to all tagged notes
             → cloud sync
  → Delete → handleDeleteCustomIdea              [useSettings.js:83-90]
             → soft delete, cloud sync, untag notes

Files Changed

`src/components/SettingsModal.jsx`

Accept new prop: onLongPressIdea
Import useLongPress and useRef
Replace the custom-idea-row div mapping with a CustomIdeaSettingsRow inner component that:
- Uses useLongPress(() => onLongPressIdea(idea))
- Uses a longPressFired ref to suppress the click after long-press (same pattern as CustomIdeaButton in IdeasSidebar.jsx:5-40)
- Renders as a <button> for accessibility
- Includes a <span className="idea-row-menu-icon">⋮</span> on the right
Add a hint caption below the list: "Long press to edit or delete"
Rename section title from "Your Ideas" to "Your Custom Ideas" for clarity

`src/App.jsx`

Add onLongPressIdea={handleLongPressIdea} to the <SettingsModal> props (alongside the existing onAddCustomIdea etc.)

`src/styles.css`

.custom-idea-row (button variant): reset button styles, full-width, cursor default, same visual as current div
.idea-row-menu-icon: muted color, non-interactive, right-aligned
.custom-ideas-hint: small caption text, muted, centered, margin-top

Visual Design

Each row: [Idea name + description] … [⋮]

Below list: Long press to edit or delete (small, muted)

Row interaction: no visible change on short tap; long-press fires action sheet. Same IdeaActionSheet and IdeaEditForm modals used on desktop.

What Is Not Changing

src/db.js — no schema or query changes
src/hooks/useSettings.js — all edit/delete logic already exists
src/components/IdeaActionSheet.jsx — reused as-is
src/components/IdeaEditForm.jsx — reused as-is
src/hooks/useLongPress.js — reused as-is
Desktop/tablet sidebar — unaffected

Verification

Open app on mobile (or narrow browser window)
Tap Settings → scroll to “Your Custom Ideas”
Long-press any idea → IdeaActionSheet appears
Tap Edit → IdeaEditForm pre-populated with name + description
- Rename → all notes previously tagged with old name now show new name
Tap Delete → confirm → idea removed, tagged notes untagged
Short tap on a row → nothing happens (click suppressed)
Open desktop sidebar → edit/delete still works there unchanged
npm run build → zero errors