feat(phase2): localization EN/RU + additional widget types
- Add svelte-i18n with 224 translation keys (English + Russian) - Language switcher in header (EN/RU toggle, persists to localStorage) - Extract all hardcoded strings from 37 component/page files - Add 4 new widget types: Bookmark, Note (markdown), Embed (iframe), Status - WidgetRenderer dispatches by type, WidgetGrid supports full-width widgets - Type-specific config forms in board editor - Install marked for markdown rendering
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
# Phase 3: Additional Widget Types
|
||||
|
||||
**Status:** ⬜ Not Started
|
||||
**Status:** Done
|
||||
**Parent plan:** [PLAN.md](./PLAN.md)
|
||||
**Domain:** fullstack
|
||||
|
||||
@@ -9,28 +9,35 @@ Add four new widget types: Bookmark, Note, Embed, and Status. Extend the widget
|
||||
|
||||
## Tasks
|
||||
|
||||
- [ ] Task 1: Update `src/lib/utils/constants.ts` — ensure WidgetType enum has BOOKMARK, NOTE, EMBED, STATUS
|
||||
- [ ] Task 2: Update `src/lib/utils/validators.ts` — add Zod schemas for each widget type's config
|
||||
- [ ] Task 3: Create `src/lib/components/widget/BookmarkWidget.svelte` — URL + label + optional icon, no healthcheck
|
||||
- [ ] Task 4: Create `src/lib/components/widget/NoteWidget.svelte` — markdown/rich text display with edit mode
|
||||
- [ ] Task 5: Create `src/lib/components/widget/EmbedWidget.svelte` — iframe embed with configurable URL and height
|
||||
- [ ] Task 6: Create `src/lib/components/widget/StatusWidget.svelte` — aggregated status of multiple apps (green/red/yellow summary)
|
||||
- [ ] Task 7: Create `src/lib/components/widget/WidgetRenderer.svelte` — universal widget renderer that switches by type
|
||||
- [ ] Task 8: Update `src/lib/components/widget/WidgetGrid.svelte` — use WidgetRenderer instead of hardcoded AppWidget
|
||||
- [ ] Task 9: Update board editor — add widget type selector when adding widgets
|
||||
- [ ] Task 10: Update `src/routes/boards/[boardId]/edit/+page.svelte` — type-specific config forms for each widget type
|
||||
- [ ] Task 11: Update `src/routes/boards/[boardId]/edit/+page.server.ts` — handle different widget types in create action
|
||||
- [ ] Task 12: Install `marked` or `markdown-it` for Note widget markdown rendering
|
||||
- [x] Task 1: Update `src/lib/utils/constants.ts` — ensure WidgetType enum has BOOKMARK, NOTE, EMBED, STATUS
|
||||
- [x] Task 2: Update `src/lib/utils/validators.ts` — add Zod schemas for each widget type's config
|
||||
- [x] Task 3: Create `src/lib/components/widget/BookmarkWidget.svelte` — URL + label + optional icon, no healthcheck
|
||||
- [x] Task 4: Create `src/lib/components/widget/NoteWidget.svelte` — markdown/rich text display with edit mode
|
||||
- [x] Task 5: Create `src/lib/components/widget/EmbedWidget.svelte` — iframe embed with configurable URL and height
|
||||
- [x] Task 6: Create `src/lib/components/widget/StatusWidget.svelte` — aggregated status of multiple apps (green/red/yellow summary)
|
||||
- [x] Task 7: Create `src/lib/components/widget/WidgetRenderer.svelte` — universal widget renderer that switches by type
|
||||
- [x] Task 8: Update `src/lib/components/widget/WidgetGrid.svelte` — use WidgetRenderer instead of hardcoded AppWidget
|
||||
- [x] Task 9: Update board editor — add widget type selector when adding widgets
|
||||
- [x] Task 10: Update `src/routes/boards/[boardId]/edit/+page.svelte` — type-specific config forms for each widget type
|
||||
- [x] Task 11: Update `src/routes/boards/[boardId]/edit/+page.server.ts` — handle different widget types in create action
|
||||
- [x] Task 12: Install `marked` for Note widget markdown rendering
|
||||
|
||||
## Files to Modify/Create
|
||||
- `src/lib/utils/constants.ts` — MODIFY
|
||||
- `src/lib/utils/constants.ts` — MODIFY (already had all types)
|
||||
- `src/lib/utils/validators.ts` — MODIFY
|
||||
- `src/lib/types/widget.ts` — MODIFY
|
||||
- `src/lib/components/widget/BookmarkWidget.svelte` — NEW
|
||||
- `src/lib/components/widget/NoteWidget.svelte` — NEW
|
||||
- `src/lib/components/widget/EmbedWidget.svelte` — NEW
|
||||
- `src/lib/components/widget/StatusWidget.svelte` — NEW
|
||||
- `src/lib/components/widget/WidgetRenderer.svelte` — NEW
|
||||
- `src/lib/components/widget/WidgetGrid.svelte` — MODIFY
|
||||
- `src/lib/components/board/Board.svelte` — MODIFY
|
||||
- `src/lib/components/board/DraggableBoard.svelte` — MODIFY
|
||||
- `src/lib/components/section/Section.svelte` — MODIFY
|
||||
- `src/lib/components/section/DraggableSection.svelte` — MODIFY
|
||||
- `src/routes/boards/[boardId]/+page.svelte` — MODIFY
|
||||
- `src/routes/boards/[boardId]/+page.server.ts` — MODIFY
|
||||
- `src/routes/boards/[boardId]/edit/+page.svelte` — MODIFY
|
||||
- `src/routes/boards/[boardId]/edit/+page.server.ts` — MODIFY
|
||||
|
||||
@@ -51,14 +58,24 @@ Add four new widget types: Bookmark, Note, Embed, and Status. Extend the widget
|
||||
- EMBED: `{ url: string, height: number, sandbox?: string }`
|
||||
- STATUS: `{ appIds: string[], label?: string }`
|
||||
- Embed widget should use sandbox attribute for security
|
||||
- ⚠️ Big Bang: may need integration fixes in Phase 5
|
||||
- Big Bang strategy: may need integration fixes in Phase 6
|
||||
|
||||
## Review Checklist
|
||||
- [ ] All tasks completed
|
||||
- [ ] Code follows project conventions
|
||||
- [x] All tasks completed
|
||||
- [x] Code follows project conventions
|
||||
- [ ] No unintended side effects
|
||||
- [ ] Build passes
|
||||
- [ ] Tests pass (new + existing)
|
||||
|
||||
## Handoff to Next Phase
|
||||
<!-- Filled in by the implementation agent after completing this phase. -->
|
||||
- Installed `marked` package for markdown rendering in NoteWidget
|
||||
- `WidgetType` enum already had all 5 types from MVP
|
||||
- Updated `validators.ts` with per-type config Zod schemas (appWidgetConfigSchema, bookmarkWidgetConfigSchema, noteWidgetConfigSchema, embedWidgetConfigSchema, statusWidgetConfigSchema)
|
||||
- Created 4 new widget components: BookmarkWidget, NoteWidget, EmbedWidget, StatusWidget
|
||||
- Created WidgetRenderer as the universal type-switch component
|
||||
- Updated WidgetGrid to use WidgetRenderer; note/embed/status widgets span full width
|
||||
- Updated DraggableSection with widget type selector dropdown and type-specific config forms
|
||||
- Updated board view page server to load all apps (needed by StatusWidget)
|
||||
- Plumbed `allApps` prop through Board -> Section -> WidgetGrid -> WidgetRenderer -> StatusWidget
|
||||
- Edit page `handleAddWidget` now sends JSON widget data; server action parses `configJson` field
|
||||
- `onAddWidget` callback signature changed from `(sectionId, appId)` to `(sectionId, widgetDataJson)` throughout DraggableBoard/DraggableSection
|
||||
|
||||
Reference in New Issue
Block a user