alexei.dolgolyov
1c0a7cb850
Phase 4 — New Widget Types: - Clock/Weather, System Stats, RSS/Feed, Calendar, Markdown, Metric/Counter, Link Group, Camera/Stream widgets - Backend services with caching for each data source - Full creation form with dynamic config fields per type Phase 5 — Visual & Styling Enhancements: - Glassmorphism card style (solid/glass/outline) - Board-level themes with per-board hue/saturation - Animated SVG status rings replacing static dots - Card size options (compact/medium/large) - Custom CSS injection (admin + per-board, sanitized) - Wallpaper backgrounds with blur/overlay/parallax Phase 6 — Functional Features: - Favorites bar with drag-and-drop reordering - Recent apps tracking with privacy toggle - Uptime dashboard page (/status, guest-accessible) - Notifications system (Discord/Slack/Telegram/HTTP webhooks) - App tags with filtering in board view - Multi-URL app cards with expandable sub-links - Personal API tokens with scoped permissions - Audit log with retention and admin viewer Phase 7 — Quality of Life: - Onboarding wizard (5-step first-launch setup) - App URL health preview with favicon/title detection - Board templates (4 built-in + custom import/export) - Keyboard shortcut overlay (j/k nav, 1-9 boards, ? help) 212 files changed, 15641 insertions, 980 deletions. Build, lint, type check, and 222 tests all pass.
101 lines
7.8 KiB
Markdown
101 lines
7.8 KiB
Markdown
# Feature Context: Phase 2 — Enhanced Features
|
|
|
|
## Current State
|
|
|
|
All 6 phases complete. The codebase is fully integrated and passing all checks.
|
|
|
|
- `npm run build` succeeds
|
|
- `npm run check` passes (0 errors)
|
|
- `npm run lint` passes (0 errors)
|
|
- `npm test` passes (175 tests, 14 test files)
|
|
|
|
## Temporary Workarounds
|
|
|
|
- None yet
|
|
|
|
## Cross-Phase Dependencies
|
|
|
|
- Phase 1 (OAuth) is independent — touches auth system only
|
|
- Phase 2 (DnD) is independent — touches board editor UI only
|
|
- Phase 3 (Widgets) depends on existing widget system from MVP
|
|
- Phase 4 (Access Control) depends on existing permission system from MVP
|
|
- Phase 5 (Integration) depends on all prior phases
|
|
|
|
## Implementation Notes
|
|
|
|
- Big Bang strategy: intermediate phases may not build. Phase 6 is the convergence phase.
|
|
- OAuth uses `openid-client` (already installed in MVP dependencies)
|
|
- DnD uses `svelte-dnd-action` (installed in Phase 2)
|
|
- New widget types extend the existing Widget model's `type` and `config` JSON fields
|
|
|
|
## Phase 2 (DnD) — Completed
|
|
|
|
- Installed `svelte-dnd-action` package
|
|
- Created `DraggableBoard.svelte`, `DraggableSection.svelte`, `DraggableWidget.svelte` component hierarchy
|
|
- Board edit page now uses DnD for section and widget reordering (including cross-section widget moves)
|
|
- Added `PUT /api/boards/[id]/reorder` and `PUT /api/boards/[id]/sections/[sid]/reorder` endpoints
|
|
- Extended `boardService.ts` with `reorderSections()`, `reorderWidgets()`, `moveWidget()` using Prisma transactions
|
|
- Visual drag handles (grip dots) and dashed drop zone indicators added via Tailwind
|
|
- Edit page actions (add/delete section/widget) use `invalidateAll()` for data refresh; DnD uses optimistic fetch
|
|
|
|
## Phase 4 (Additional Widget Types) — Completed
|
|
|
|
- Installed `marked` package for markdown rendering
|
|
- WidgetType enum already had BOOKMARK, NOTE, EMBED, STATUS from MVP constants
|
|
- Added per-type Zod config schemas in `validators.ts`: `appWidgetConfigSchema`, `bookmarkWidgetConfigSchema`, `noteWidgetConfigSchema`, `embedWidgetConfigSchema`, `statusWidgetConfigSchema`
|
|
- Updated `src/lib/types/widget.ts` config interfaces to match spec (BookmarkWidgetConfig, NoteWidgetConfig, EmbedWidgetConfig, StatusWidgetConfig)
|
|
- Created 4 new widget components:
|
|
- `BookmarkWidget.svelte` — clickable card with icon, label, description, opens URL in new tab
|
|
- `NoteWidget.svelte` — renders markdown via `marked` with basic HTML sanitization
|
|
- `EmbedWidget.svelte` — iframe with configurable height, sandbox security, loading spinner
|
|
- `StatusWidget.svelte` — aggregated status bar with online/offline/degraded/unknown counts, expandable per-app detail
|
|
- Created `WidgetRenderer.svelte` — universal type-switch component dispatching to correct widget by type
|
|
- Updated `WidgetGrid.svelte` to use WidgetRenderer; note/embed/status widgets span full grid width
|
|
- Updated `DraggableSection.svelte` with widget type selector dropdown and type-specific config forms (app selector, bookmark URL/label/icon/desc, note textarea with format, embed URL/height, status multi-select apps)
|
|
- `onAddWidget` callback changed from `(sectionId, appId)` to `(sectionId, widgetDataJson)` across DraggableBoard and edit page
|
|
- Board view server (`[boardId]/+page.server.ts`) now loads all apps via `appService.findAll()` for StatusWidget
|
|
- Plumbed `allApps` prop through Board -> Section -> WidgetGrid -> WidgetRenderer -> StatusWidget
|
|
- Edit server action `addWidget` now handles `configJson` form field for non-app widget types
|
|
|
|
## Phase 3 (Localization EN/RU) — Completed
|
|
|
|
- Installed `svelte-i18n` package for i18n support
|
|
- Created `src/lib/i18n/en.json` and `src/lib/i18n/ru.json` with ~180 translation keys covering all UI strings
|
|
- Created `src/lib/i18n/index.ts` with locale detection (localStorage > browser navigator > fallback 'en') and `storeLocale()` helper
|
|
- Created `LanguageSwitcher.svelte` — EN/RU toggle button added to Header, persists preference to localStorage key `wal-locale`
|
|
- Root `+layout.svelte` imports `$lib/i18n/index.js` to initialize i18n before any component renders
|
|
- Extracted all hardcoded strings from: layout (Header, Sidebar, MainLayout, ThemeToggle), auth pages (login, register), board/section/widget components, app components (AppForm, AppHealthBadge, AppIconPicker), admin pages (users, groups, settings, PermissionEditor), search components (SearchDialog, SearchTrigger), home page, and DnD components
|
|
- Translation key structure uses dot-notation grouped by feature: `nav.*`, `auth.*`, `board.*`, `section.*`, `widget.*`, `app.*`, `admin.*`, `search.*`, `common.*`, `status.*`, `theme.*`, `bg.*`, `sidebar.*`, `home.*`
|
|
- All status labels (online/offline/degraded/unknown) are now translated via `$t('status.*')` in AppHealthBadge
|
|
- Phase 4 widget type form labels (bookmark, note, embed, status fields) are partially untranslated — can be addressed in Phase 6
|
|
|
|
## Phase 5 (Per-Board Access Control UI) — Completed
|
|
|
|
- Created `src/lib/components/board/BoardAccessControl.svelte` — self-contained board permission manager with search/autocomplete for users and groups, fetches permissions from `/api/boards/[id]/permissions`
|
|
- Created `src/lib/components/board/BoardShareDialog.svelte` — modal dialog with copy link, guest access toggle, quick permission grant, and current access list
|
|
- Created `src/routes/api/boards/[id]/permissions/+server.ts` — REST endpoint for GET (list), POST (grant), DELETE (revoke) board permissions with proper auth checks
|
|
- Enhanced `src/lib/components/admin/PermissionEditor.svelte` — replaced plain select dropdowns with search/autocomplete inputs (onfocus/onblur managed dropdowns)
|
|
- Updated `src/lib/components/board/BoardCard.svelte` — added globe icon for guest-accessible boards, lock icon for private boards, users icon for boards with shared permissions
|
|
- Updated `src/routes/boards/+page.server.ts` — computes `hasSharedPermissions` flag per board for access indicators
|
|
- Updated `src/routes/boards/[boardId]/edit/+page.svelte` — added dedicated "Guest Access" section with status preview and "Permissions" section with `BoardAccessControl` component
|
|
- Updated `src/routes/boards/[boardId]/edit/+page.server.ts` — loads users and groups for permission editor, computes `canManagePermissions` flag
|
|
- Updated `src/lib/components/board/BoardHeader.svelte` — added "Share" button that triggers share dialog callback
|
|
- Updated `src/routes/boards/[boardId]/+page.svelte` — integrated `BoardShareDialog` with guest toggle via PATCH API
|
|
- Updated `src/routes/boards/[boardId]/+page.server.ts` — loads users/groups for share dialog when user can edit
|
|
- Added ~20 new i18n keys (`board.access_*`, `board.share_*`, `board.guest_access_*`, `board.permissions_*`, `admin.perm_search_placeholder`) to both `en.json` and `ru.json`
|
|
- Big Bang strategy: no build/test verification performed — Phase 6 integration may be needed
|
|
|
|
## Phase 6 (Integration & Polish) — Completed
|
|
|
|
- Installed missing `svelte-i18n` dependency
|
|
- Fixed `oauthService.ts` type error: undefined sub claim now guarded before `fetchUserInfo` call
|
|
- Fixed `DynamicIcon.svelte`: replaced deprecated `<svelte:component>` with Svelte 5 dynamic component pattern
|
|
- Fixed lint errors: removed unused imports (`error` in oauth test, `WidgetType` in edit page), suppressed `@html` lint rule on sanitized content, marked unused `boardId` prop in DraggableSection
|
|
- Disabled `svelte/prefer-writable-derived` ESLint rule for Svelte files (DnD requires `$state` + `$effect` pattern)
|
|
- Wrote 60 new tests across 4 test files:
|
|
- `oauthService.test.ts` (10 tests) — PKCE, auth URL, callback, cache invalidation
|
|
- `widgetValidators.test.ts` (28 tests) — all 5 widget config schemas
|
|
- `boardReorder.test.ts` (9 tests) — section/widget reorder, cross-section move
|
|
- `permissions.test.ts` (13 tests) — GET/POST/DELETE board permissions API
|
|
- Updated `prisma/seed.ts` with bookmark, note, embed, status widgets + team board with user/group permissions
|