|
|
@@ -1,222 +0,0 @@
|
|
|
-# Svelte Todo List - Implementation Plan
|
|
|
-
|
|
|
-Execute this plan using the `superpowers:subagent-driven-development` skill.
|
|
|
-
|
|
|
-## Context
|
|
|
-
|
|
|
-Building a todo list app with Svelte. See `design.md` for full specification.
|
|
|
-
|
|
|
-## Tasks
|
|
|
-
|
|
|
-### Task 1: Project Setup
|
|
|
-
|
|
|
-Create the Svelte project with Vite.
|
|
|
-
|
|
|
-**Do:**
|
|
|
-- Run `npm create vite@latest . -- --template svelte-ts`
|
|
|
-- Install dependencies with `npm install`
|
|
|
-- Verify dev server works
|
|
|
-- Clean up default Vite template content from App.svelte
|
|
|
-
|
|
|
-**Verify:**
|
|
|
-- `npm run dev` starts server
|
|
|
-- App shows minimal "Svelte Todos" heading
|
|
|
-- `npm run build` succeeds
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### Task 2: Todo Store
|
|
|
-
|
|
|
-Create the Svelte store for todo state management.
|
|
|
-
|
|
|
-**Do:**
|
|
|
-- Create `src/lib/store.ts`
|
|
|
-- Define `Todo` interface with id, text, completed
|
|
|
-- Create writable store with initial empty array
|
|
|
-- Export functions: `addTodo(text)`, `toggleTodo(id)`, `deleteTodo(id)`, `clearCompleted()`
|
|
|
-- Create `src/lib/store.test.ts` with tests for each function
|
|
|
-
|
|
|
-**Verify:**
|
|
|
-- Tests pass: `npm run test` (install vitest if needed)
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### Task 3: localStorage Persistence
|
|
|
-
|
|
|
-Add persistence layer for todos.
|
|
|
-
|
|
|
-**Do:**
|
|
|
-- Create `src/lib/storage.ts`
|
|
|
-- Implement `loadTodos(): Todo[]` and `saveTodos(todos: Todo[])`
|
|
|
-- Handle JSON parse errors gracefully (return empty array)
|
|
|
-- Integrate with store: load on init, save on change
|
|
|
-- Add tests for load/save/error handling
|
|
|
-
|
|
|
-**Verify:**
|
|
|
-- Tests pass
|
|
|
-- Manual test: add todo, refresh page, todo persists
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### Task 4: TodoInput Component
|
|
|
-
|
|
|
-Create the input component for adding todos.
|
|
|
-
|
|
|
-**Do:**
|
|
|
-- Create `src/lib/TodoInput.svelte`
|
|
|
-- Text input bound to local state
|
|
|
-- Add button calls `addTodo()` and clears input
|
|
|
-- Enter key also submits
|
|
|
-- Disable Add button when input is empty
|
|
|
-- Add component tests
|
|
|
-
|
|
|
-**Verify:**
|
|
|
-- Tests pass
|
|
|
-- Component renders input and button
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### Task 5: TodoItem Component
|
|
|
-
|
|
|
-Create the single todo item component.
|
|
|
-
|
|
|
-**Do:**
|
|
|
-- Create `src/lib/TodoItem.svelte`
|
|
|
-- Props: `todo: Todo`
|
|
|
-- Checkbox toggles completion (calls `toggleTodo`)
|
|
|
-- Text with strikethrough when completed
|
|
|
-- Delete button (X) calls `deleteTodo`
|
|
|
-- Add component tests
|
|
|
-
|
|
|
-**Verify:**
|
|
|
-- Tests pass
|
|
|
-- Component renders checkbox, text, delete button
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### Task 6: TodoList Component
|
|
|
-
|
|
|
-Create the list container component.
|
|
|
-
|
|
|
-**Do:**
|
|
|
-- Create `src/lib/TodoList.svelte`
|
|
|
-- Props: `todos: Todo[]`
|
|
|
-- Renders TodoItem for each todo
|
|
|
-- Shows "No todos yet" when empty
|
|
|
-- Add component tests
|
|
|
-
|
|
|
-**Verify:**
|
|
|
-- Tests pass
|
|
|
-- Component renders list of TodoItems
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### Task 7: FilterBar Component
|
|
|
-
|
|
|
-Create the filter and status bar component.
|
|
|
-
|
|
|
-**Do:**
|
|
|
-- Create `src/lib/FilterBar.svelte`
|
|
|
-- Props: `todos: Todo[]`, `filter: Filter`, `onFilterChange: (f: Filter) => void`
|
|
|
-- Show count: "X items left" (incomplete count)
|
|
|
-- Three filter buttons: All, Active, Completed
|
|
|
-- Active filter is visually highlighted
|
|
|
-- "Clear completed" button (hidden when no completed todos)
|
|
|
-- Add component tests
|
|
|
-
|
|
|
-**Verify:**
|
|
|
-- Tests pass
|
|
|
-- Component renders count, filters, clear button
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### Task 8: App Integration
|
|
|
-
|
|
|
-Wire all components together in App.svelte.
|
|
|
-
|
|
|
-**Do:**
|
|
|
-- Import all components and store
|
|
|
-- Add filter state (default: 'all')
|
|
|
-- Compute filtered todos based on filter state
|
|
|
-- Render: heading, TodoInput, TodoList, FilterBar
|
|
|
-- Pass appropriate props to each component
|
|
|
-
|
|
|
-**Verify:**
|
|
|
-- App renders all components
|
|
|
-- Adding todos works
|
|
|
-- Toggling works
|
|
|
-- Deleting works
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### Task 9: Filter Functionality
|
|
|
-
|
|
|
-Ensure filtering works end-to-end.
|
|
|
-
|
|
|
-**Do:**
|
|
|
-- Verify filter buttons change displayed todos
|
|
|
-- 'all' shows all todos
|
|
|
-- 'active' shows only incomplete todos
|
|
|
-- 'completed' shows only completed todos
|
|
|
-- Clear completed removes completed todos and resets filter if needed
|
|
|
-- Add integration tests
|
|
|
-
|
|
|
-**Verify:**
|
|
|
-- Filter tests pass
|
|
|
-- Manual verification of all filter states
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### Task 10: Styling and Polish
|
|
|
-
|
|
|
-Add CSS styling for usability.
|
|
|
-
|
|
|
-**Do:**
|
|
|
-- Style the app to match the design mockup
|
|
|
-- Completed todos have strikethrough and muted color
|
|
|
-- Active filter button is highlighted
|
|
|
-- Input has focus styles
|
|
|
-- Delete button appears on hover (or always on mobile)
|
|
|
-- Responsive layout
|
|
|
-
|
|
|
-**Verify:**
|
|
|
-- App is visually usable
|
|
|
-- Styles don't break functionality
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### Task 11: End-to-End Tests
|
|
|
-
|
|
|
-Add Playwright tests for full user flows.
|
|
|
-
|
|
|
-**Do:**
|
|
|
-- Install Playwright: `npm init playwright@latest`
|
|
|
-- Create `tests/todo.spec.ts`
|
|
|
-- Test flows:
|
|
|
- - Add a todo
|
|
|
- - Complete a todo
|
|
|
- - Delete a todo
|
|
|
- - Filter todos
|
|
|
- - Clear completed
|
|
|
- - Persistence (add, reload, verify)
|
|
|
-
|
|
|
-**Verify:**
|
|
|
-- `npx playwright test` passes
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-### Task 12: README
|
|
|
-
|
|
|
-Document the project.
|
|
|
-
|
|
|
-**Do:**
|
|
|
-- Create `README.md` with:
|
|
|
- - Project description
|
|
|
- - Setup: `npm install`
|
|
|
- - Development: `npm run dev`
|
|
|
- - Testing: `npm test` and `npx playwright test`
|
|
|
- - Build: `npm run build`
|
|
|
-
|
|
|
-**Verify:**
|
|
|
-- README accurately describes the project
|
|
|
-- Instructions work
|