alexei.dolgolyov
a6b09aae9c
Replace the disconnected board edit page with inline editing directly on the board view. Toggle with Ctrl+E or the Edit button. Features: - Edit mode store with changeset accumulation and batch save - Floating toolbar (save, discard, add section, board settings, exit) - Widget hover overlays with edit/delete/drag controls - Type-specific widget config panels for all 14 widget types - Section inline editing (title, icon picker, delete) - "+" buttons for adding widgets and sections inline - Section-level drag-and-drop reordering via svelte-dnd-action - Batch save API endpoint (single Prisma transaction) - Board properties side panel with live theme/wallpaper preview - Modal widget type picker with search filtering - Icon picker component with visual grid and search - Confirmation dialog modal for all destructive actions - HTML format support for Note widget (in addition to markdown/text) - Full i18n support (en + ru) for all new UI strings - Legacy edit page banner linking to new inline mode
55 lines
2.4 KiB
Markdown
55 lines
2.4 KiB
Markdown
# Phase 10: Legacy Edit Page Migration & Polish
|
|
|
|
**Status:** ⬜ Not Started
|
|
**Parent plan:** [PLAN.md](./PLAN.md)
|
|
**Domain:** fullstack
|
|
|
|
## Objective
|
|
Migrate remaining functionality from the legacy edit page, add polish, transitions, and ensure full accessibility.
|
|
|
|
## Tasks
|
|
|
|
- [ ] Redirect `/boards/[id]/edit` to `/boards/[id]?edit=true` (auto-enters edit mode)
|
|
- [ ] Handle `?edit=true` query param on board view page to auto-enter edit mode
|
|
- [ ] Migrate permission management: add permissions editor accessible from edit mode (or link to legacy page as "Advanced Settings")
|
|
- [ ] Add smooth transition animations between view and edit modes
|
|
- [ ] Keyboard navigation: Tab through edit controls, Enter to confirm, Escape to cancel/close
|
|
- [ ] ARIA labels on all edit controls (buttons, overlays, panels)
|
|
- [ ] Focus management: auto-focus appropriate elements when panels open
|
|
- [ ] Focus trap in modals/panels
|
|
- [ ] Screen reader announcements for mode changes ("Edit mode enabled", "Widget deleted")
|
|
- [ ] Ensure all existing edit page functionality is accessible through inline UI
|
|
- [ ] Polish: loading states, error boundaries, edge case handling
|
|
- [ ] Mobile responsiveness: touch-friendly edit controls, appropriate sizing
|
|
- [ ] Verify no regressions with guest access (guests should never see edit controls)
|
|
|
|
## Files to Modify/Create
|
|
- `src/routes/boards/[boardId]/edit/+page.server.ts` — add redirect
|
|
- `src/routes/boards/[boardId]/+page.svelte` — handle ?edit=true, transitions
|
|
- Various components — accessibility attributes, animations
|
|
- `src/lib/components/board/BoardAccessControl.svelte` — integrate or link from edit mode
|
|
|
|
## Acceptance Criteria
|
|
- `/boards/[id]/edit` redirects to inline edit mode
|
|
- All functionality from legacy edit page is accessible
|
|
- Keyboard navigation works throughout edit mode
|
|
- Screen readers can use edit mode
|
|
- Transitions are smooth and non-jarring
|
|
- Mobile experience is usable
|
|
- Guest users cannot access edit features
|
|
|
|
## Notes
|
|
- Consider keeping legacy edit page temporarily as "Advanced Edit" for power users
|
|
- Permission management is complex — may be better as a dedicated panel than inline
|
|
- Test with different board sizes (empty, 1 section, 10+ sections with many widgets)
|
|
|
|
## 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 -->
|