taskplaner/.planning/phases/02-core-crud/02-04-PLAN.md

---
phase: 02-core-crud
plan: 04
type: execute
wave: 4
depends_on: [02-03]
files_modified:
  - src/lib/components/EntryCard.svelte
  - package.json
autonomous: false

must_haves:
  truths:
    - "User can swipe left on mobile to delete an entry"
    - "Touch targets are at least 44x44px"
    - "UI is usable on mobile devices (tested)"
    - "Delete via swipe shows confirmation before deleting"
  artifacts:
    - path: "src/lib/components/EntryCard.svelte"
      provides: "Swipe-to-delete functionality"
      contains: "svelte-gestures"
    - path: "package.json"
      provides: "svelte-gestures dependency"
      contains: "svelte-gestures"
  key_links:
    - from: "src/lib/components/EntryCard.svelte"
      to: "src/routes/+page.server.ts"
      via: "form action ?/delete"
      pattern: "action=.*\\?/delete"
---

<objective>
Implement swipe-to-delete gesture for mobile and verify overall mobile UX.

Purpose: Mobile users can swipe left to delete entries (common mobile pattern). Final verification ensures all touch targets meet WCAG guidelines and UI works well on mobile.

Output: Swipe-to-delete on EntryCard, verified mobile-friendly UI.
</objective>

<execution_context>
@/home/tho/.claude/get-shit-done/workflows/execute-plan.md
@/home/tho/.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
@.planning/phases/02-core-crud/02-CONTEXT.md
@.planning/phases/02-core-crud/02-RESEARCH.md
@.planning/phases/02-core-crud/02-03-SUMMARY.md
@src/lib/components/EntryCard.svelte
</context>

<tasks>

<task type="auto">
  <name>Task 1: Install svelte-gestures and implement swipe-to-delete</name>
  <files>package.json, src/lib/components/EntryCard.svelte</files>
  <action>
Install svelte-gestures:

```bash
npm install svelte-gestures
```

Update EntryCard.svelte to add swipe-to-delete functionality:

1. Import the swipe action from svelte-gestures
2. Wrap the entry in a swipeable container
3. On left swipe, show confirmation then delete
4. Add visual feedback (red background revealing during swipe)
5. On desktop, keep the delete button in expanded view (swipe is touch-only)

Add to the script section:

```typescript
import { swipe } from 'svelte-gestures';

// Swipe state
let swipeOffset = $state(0);
let isConfirmingDelete = $state(false);

function handleSwipe(event: CustomEvent) {
  const { direction } = event.detail;
  if (direction === 'left') {
    // Show confirmation
    isConfirmingDelete = true;
  }
}

function handleSwipeMove(event: CustomEvent) {
  // Visual feedback during swipe
  const { offsetX } = event.detail;
  if (offsetX < 0) {
    swipeOffset = Math.max(offsetX, -100); // Cap at -100px
  }
}

function handleSwipeEnd() {
  if (!isConfirmingDelete) {
    swipeOffset = 0;
  }
}

function cancelDelete() {
  isConfirmingDelete = false;
  swipeOffset = 0;
}

async function confirmDelete() {
  const formData = new FormData();
  formData.append('id', entry.id);

  await fetch('?/delete', {
    method: 'POST',
    body: formData
  });

  // Refresh page to show updated list
  window.location.reload();
}
```

Update the template to wrap in a swipeable container:

```svelte
<div class="relative overflow-hidden">
  <!-- Delete background revealed during swipe -->
  <div class="absolute inset-y-0 right-0 w-24 bg-red-500 flex items-center justify-center">
    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
    </svg>
  </div>

  <!-- Swipeable entry card -->
  <article
    use:swipe={{ timeframe: 300, minSwipeDistance: 60, touchAction: 'pan-y' }}
    onswipe={handleSwipe}
    style="transform: translateX({swipeOffset}px); transition: {swipeOffset === 0 ? 'transform 0.2s' : 'none'}"
    class="p-4 border-b border-gray-100 md:border md:rounded-lg md:shadow-sm md:mb-3 bg-white relative"
  >
    <!-- ... existing entry content ... -->
  </article>

  <!-- Delete confirmation overlay -->
  {#if isConfirmingDelete}
    <div
      class="absolute inset-0 bg-white/95 flex items-center justify-center gap-4 z-10"
      transition:slide={{ duration: 150 }}
    >
      <button
        onclick={cancelDelete}
        class="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg touch-target"
      >
        Cancel
      </button>
      <button
        onclick={confirmDelete}
        class="px-4 py-2 bg-red-600 text-white rounded-lg touch-target"
      >
        Delete
      </button>
    </div>
  {/if}
</div>
```

Key behaviors:
- Swipe left reveals red delete icon
- If swipe distance > 60px, show confirmation overlay
- Confirmation has Cancel and Delete buttons
- On desktop, swipe doesn't trigger (touch-only)
- Delete button in expanded view still works for desktop users
  </action>
  <verify>
npm install completes.
TypeScript check: `npm run check` passes.
Start dev server: `npm run dev`
Open in browser dev tools mobile view:
- Swipe left on an entry
- Red background should reveal
- Release after 60px+ swipe shows confirmation
- Cancel returns to normal, Delete removes entry
  </verify>
  <done>Swipe-to-delete works on mobile with confirmation overlay</done>
</task>

<task type="checkpoint:human-verify" gate="blocking">
  <what-built>
Complete Phase 2 UI with:
- Entry list showing tasks and thoughts
- Quick capture bar at bottom
- Inline editing with auto-save
- Swipe-to-delete on mobile
- Show/hide completed toggle
- Mobile-responsive layout
  </what-built>
  <how-to-verify>
1. **Desktop verification** (http://localhost:5173):
   - Create a task via quick capture - should appear in list
   - Create a thought - should appear with purple indicator
   - Click an entry - should expand with edit fields
   - Edit title/content - should auto-save (see "Saving...")
   - Mark a task complete - checkbox should fill, task may disappear
   - Check "Show completed" - completed task reappears
   - Delete an entry via expanded view - should prompt then remove

2. **Mobile verification** (use browser dev tools mobile mode OR actual phone):
   - Quick capture bar should be at bottom, thumb-friendly
   - Type selector and Add button should be reachable
   - Entries should be tappable to expand
   - Swipe left on an entry - red trash icon reveals
   - Complete swipe - confirmation appears
   - Tap Delete - entry removed
   - Touch targets feel adequately sized (not too small)
   - Text is readable (not tiny)

3. **Font/Accessibility**:
   - Base text should be at least 16px
   - No text smaller than 14px anywhere
   - Buttons and checkboxes are easy to tap
  </how-to-verify>
  <resume-signal>Type "approved" if all checks pass, or describe any issues found</resume-signal>
</task>

</tasks>

<verification>
After all tasks complete:

1. **TypeScript**: `npm run check` passes
2. **Swipe gesture**: Works on mobile/touch devices
3. **Touch targets**: All interactive elements >= 44x44px
4. **Font sizes**: Base 16px, no text under 14px
5. **Mobile layout**: Compact list, bottom capture bar
6. **Desktop layout**: Card style entries, adequate spacing

Requirements satisfied:
- UX-01: Mobile-friendly ✓
- UX-02: Readable fonts ✓
- UX-03: Cross-browser (SvelteKit handles) ✓
</verification>

<success_criteria>
- Swipe-to-delete works on mobile with confirmation
- All touch targets meet WCAG 44x44px minimum
- UI verified working on both desktop and mobile
- User approves the UI at checkpoint
- All Phase 2 requirements complete
</success_criteria>

<output>
After completion, create `.planning/phases/02-core-crud/02-04-SUMMARY.md`
</output>