# Phase 2: Floating Edit Toolbar

**Status:** ⬜ Not Started
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend

## Objective
Create a sticky floating toolbar that appears when edit mode is active, providing quick access to common editing actions.

## Tasks

- [ ] Create `src/lib/components/board/EditToolbar.svelte`
- [ ] Toolbar actions: Save All, Discard, Add Section, Board Settings (gear), Exit Edit Mode
- [ ] Show unsaved change count badge on Save button
- [ ] Position: fixed at bottom-center of viewport (floating pill shape)
- [ ] Entrance animation: slide up from bottom with fade
- [ ] Exit animation: slide down with fade
- [ ] Responsive: collapses to icon-only on small screens
- [ ] Only renders when edit mode is active
- [ ] Wire "Exit Edit Mode" to the store's exitEditMode()
- [ ] Wire "Add Section" to emit event (handled in Phase 6)
- [ ] Wire "Board Settings" to emit event (handled in Phase 9)
- [ ] Wire "Save All" to emit event (handled in Phase 8)
- [ ] Wire "Discard" to revert all changes and exit edit mode

## Files to Modify/Create
- `src/lib/components/board/EditToolbar.svelte` — new component
- `src/routes/boards/[boardId]/+page.svelte` — mount toolbar when edit mode active

## Acceptance Criteria
- Toolbar appears/disappears smoothly with edit mode toggle
- All buttons are present and visually clear
- Change count badge updates reactively
- Responsive layout works on mobile
- Toolbar doesn't obscure board content (proper z-index, positioning)

## Notes
- Use lucide-svelte icons for toolbar buttons
- z-index must be above board content but below modals/dialogs
- "Save" and "Discard" will be wired to real logic in Phase 8

## Review Checklist
- [ ] All tasks completed
- [ ] Code follows project conventions
- [ ] No unintended side effects
- [ ] Build passes
- [ ] Tests pass (new + existing)

## Handoff to Next Phase
<!-- Filled in after completing this phase -->