Animated completed section, updated PLAN.md and CLAUDE.md with current status

CLAUDE.md

@@ -17,12 +17,14 @@ cargo run -p bevy-tasks-cli -- <args>  # Run CLI with arguments
 
 # Tauri GUI
 cd apps/tauri && npm install       # Install frontend dependencies
-npm run tauri dev                  # Run Tauri in dev mode
+WEBKIT_DISABLE_DMABUF_RENDERER=1 npm run tauri dev  # Run Tauri in dev mode (Wayland)
 npm run tauri build                # Build for production
 ```
 
 The CLI binary is named `bevy-tasks` (from the `bevy-tasks-cli` crate).
 
+The Tauri dev server runs on port 1422 (`vite.config.ts` and `tauri.conf.json`).
+
 ## Architecture
 
 Two-crate workspace (`resolver = "2"`, edition 2021) plus a Tauri app:
@@ -41,6 +43,47 @@ Two-crate workspace (`resolver = "2"`, edition 2021) plus a Tauri app:
 
 Workspaces are plain folders. Each task list is a subfolder containing `.listdata.json` (metadata/ordering) and one `.md` file per task. The workspace root has `.metadata.json` for list ordering.
 
+### Tauri GUI structure
+
+The GUI uses Svelte 5 runes mode (`$state`, `$derived`, `$effect`, `$props()`). Key UI patterns:
+
+- **Sliding drawer**: Left panel (lists) slides with main content as one piece via `translateX`. 80vw wide.
+- **Settings popup**: Floating overlay card with backdrop, not a sliding panel.
+- **Workspace switcher**: Custom drop-up menu in drawer footer (left), settings gear (right).
+- **Task animations**: Grid-rows `0fr`/`1fr` trick for smooth collapse/expand. Module-level `animateInIds` Set coordinates expand-in after toggle.
+- **Inline editing**: Click task to edit, auto-save on blur, shared `editingTaskId` across instances.
+- **Kebab menus**: Tasks, lists, and workspaces all use kebab → submenu pattern for delete.
+- **New task**: FAB button opens bottom toast sheet (outside sliding container for fixed positioning).
+
+### Current state (2026-03-29)
+
+- **Phase 1** (Core + CLI): Complete
+- **Phase 2** (WebDAV sync): Backend done, CLI done, GUI partially wired (empty credentials issue)
+- **Phase 3** (GUI MVP): In progress — core task CRUD working, UI polished with animations
+
+### GUI features done
+
+- Task CRUD (create, read, update, delete)
+- Task completion/restoration with animated transitions
+- Drag-and-drop task reordering
+- Inline task editing (auto-save on blur)
+- Sliding lists drawer with checkmark selection
+- Settings popup overlay
+- Workspace switcher drop-up with add/remove
+- Dark mode (GNOME-style neutral grays, cyan-blue accent)
+- Completed tasks section with animated show/hide
+
+### GUI features NOT yet done (CLI has these)
+
+- Due date editing (model supports it, not exposed in UI)
+- WebDAV setup flow (GUI passes empty credentials)
+- Push-only / pull-only sync modes
+- Sync status view
+- Workspace retarget/migrate
+- Group-by-due-date toggle
+- Subtask hierarchy (data model exists, not used anywhere)
+- List/workspace rename
+
 ## Roadmap
 
-See `PLAN.md` for the 7-phase roadmap. Phase 1 is complete. Detailed API docs in `docs/API.md`, development practices in `docs/DEVELOPMENT.md`.
+See `PLAN.md` for the 7-phase roadmap. Detailed API docs in `docs/API.md`, development practices in `docs/DEVELOPMENT.md`.

PLAN.md

@@ -692,24 +692,32 @@ WorkspaceConfig {
 
 ### Features
 
-- [ ] Tauri v2 + Svelte 5 + Tailwind CSS 4 framework integration
-- [ ] Workspace setup dialog on first launch
-- [ ] Workspace selector in toolbar
-- [ ] Quick-switch between workspaces
-- [ ] Basic task list view
-- [ ] Create new tasks
-- [ ] Edit existing tasks
-- [ ] Delete tasks
-- [ ] Mark tasks complete/incomplete
-- [ ] Settings screen (manage workspaces, WebDAV config)
+- [x] Tauri v2 + Svelte 5 + Tailwind CSS 4 framework integration
+- [x] Workspace setup dialog on first launch
+- [x] Workspace selector (drop-up menu in drawer footer)
+- [x] Quick-switch between workspaces
+- [x] Basic task list view with pending/completed sections
+- [x] Create new tasks (FAB + bottom toast sheet with title/description)
+- [x] Edit existing tasks (inline editing, auto-save on blur)
+- [x] Delete tasks (kebab menu → delete)
+- [x] Mark tasks complete/incomplete with animated transitions
+- [x] Drag-and-drop task reordering
+- [x] Sliding lists drawer (80vw, left side)
+- [x] Settings popup overlay (WebDAV config, dark mode toggle)
+- [x] Dark mode (GNOME-style neutral theme, cyan-blue accent)
+- [x] Animated completed section show/hide
+- [ ] Due date picker/editor
+- [ ] WebDAV setup flow with credentials
 - [ ] Sync status indicators (per workspace)
-- [ ] Desktop support (Windows, Linux, macOS)
+- [ ] Push/pull sync mode selection
+- [ ] List/workspace rename
+- [ ] Desktop packaging (Windows, Linux, macOS)
 
 ### Deliverables
 
-- [ ] Functional desktop GUI app
-- [ ] Sub-300ms startup time
-- [ ] Clean, minimal UI
+- [x] Functional desktop GUI app (Linux verified, Wayland native)
+- [ ] Sub-300ms startup time (not yet measured/optimized)
+- [x] Clean, minimal UI
 - [ ] Feature parity with CLI
 
 ### Build & Release
@@ -802,23 +810,23 @@ Tauri v2 supports iOS and Android natively. The same Svelte frontend and Rust ba
 ### Features
 
 #### Desktop & Mobile
-- [ ] Multiple task lists (folders)
-- [ ] Switch between lists
+- [x] Multiple task lists (folders)
+- [x] Switch between lists
 - [ ] Subtasks support
 - [ ] Due dates with date picker
 - [ ] Rich markdown editor for task notes
 - [ ] Move tasks between lists
 - [ ] Change storage folder location in settings
 - [ ] Search functionality
-- [ ] Theme selection (light/dark mode)
+- [x] Theme selection (light/dark mode)
 
 #### Desktop-Specific
-- [ ] Drag & drop reordering
+- [x] Drag & drop reordering
 - [ ] Keyboard shortcuts
 - [ ] Multiple windows (optional)
 
 #### Mobile-Specific
-- [ ] Swipe gestures (swipe to complete, swipe to delete)
+- [x] Swipe gestures (swipe to complete, swipe to delete)
 - [ ] Pull-to-refresh
 - [ ] Touch-optimized UI elements
 - [ ] Larger touch targets

apps/tauri/src/lib/screens/TasksScreen.svelte

@@ -24,6 +24,7 @@
   }
   let newListName = $state("");
   let showCompleted = $state(true);
+  let completedVisible = $state(true);
   let listMenuId = $state<string | null>(null);
   let wsMenuName = $state<string | null>(null);
   let dragId = $state<string | null>(null);
@@ -356,8 +357,16 @@
         {#if app.completedTasks.length > 0}
           <div class="h-4"></div>
           <button
-            onclick={() => (showCompleted = !showCompleted)}
-            class="flex w-full items-center justify-between border-t border-border-light px-4 py-3 text-sm font-medium text-text-secondary-light transition-colors hover:bg-black/5 dark:border-border-dark dark:text-text-secondary-dark dark:hover:bg-white/5"
+            onclick={() => {
+              if (showCompleted) {
+                showCompleted = false;
+                setTimeout(() => (completedVisible = false), 300);
+              } else {
+                completedVisible = true;
+                requestAnimationFrame(() => (showCompleted = true));
+              }
+            }}
+            class="relative z-10 flex w-full items-center justify-between border-t border-border-light bg-surface-light px-4 py-3 text-sm font-medium text-text-secondary-light transition-colors hover:bg-black/5 dark:border-border-dark dark:bg-surface-dark dark:text-text-secondary-dark dark:hover:bg-white/5"
           >
             Completed ({app.completedTasks.length})
             <svg
@@ -371,10 +380,12 @@
               />
             </svg>
           </button>
-          {#if showCompleted}
+          {#if completedVisible}
+            <div class="transition-all duration-300 ease-out {showCompleted ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-4'}">
               {#each app.completedTasks as task (task.id)}
                 <TaskItem {task} />
               {/each}
+            </div>
           {/if}
         {/if}
       {/if}