# 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