alexei.dolgolyov/web-app-launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(phase2): localization EN/RU + additional widget types

Browse Source 
- 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:
Admin
2026-03-24 23:18:05 +03:00
parent bf4e5089ee
commit 477c0e4d52
52 changed files with 1776 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+37
View File
@@ -16,6 +16,7 @@
"clsx": "^2.1.0", "clsx": "^2.1.0",
"jsonwebtoken": "^9.0.2", "jsonwebtoken": "^9.0.2",
"lucide-svelte": "^0.469.0", "lucide-svelte": "^0.469.0",
"marked": "^17.0.5",
"node-cron": "^3.0.3", "node-cron": "^3.0.3",
"openid-client": "^6.8.2", "openid-client": "^6.8.2",
"simple-icons": "^13.0.0", "simple-icons": "^13.0.0",
@@ -33,6 +34,7 @@
"@testing-library/svelte": "^5.2.0", "@testing-library/svelte": "^5.2.0",
"@types/bcryptjs": "^2.4.6", "@types/bcryptjs": "^2.4.6",
"@types/jsonwebtoken": "^9.0.7", "@types/jsonwebtoken": "^9.0.7",
"@types/marked": "^6.0.0",
"@types/node-cron": "^3.0.11", "@types/node-cron": "^3.0.11",
"eslint": "^9.18.0", "eslint": "^9.18.0",
"eslint-config-prettier": "^10.0.0", "eslint-config-prettier": "^10.0.0",
@@ -1774,6 +1776,16 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"node_modules/@types/marked": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/@types/marked/-/marked-6.0.0.tgz",
"integrity": "sha512-jmjpa4BwUsmhxcfsgUit/7A9KbrC48Q0q8KvnY107ogcjGgTFDlIL3RpihNpx2Mu1hM4mdFQjoVc4O6JoGKHsA==",
"deprecated": "This is a stub types definition. marked provides its own type definitions, so you do not need this installed.",
"dev": true,
"dependencies": {
"marked": "*"
}
},
"node_modules/@types/ms": { "node_modules/@types/ms": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz", "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -3919,6 +3931,17 @@
"@jridgewell/sourcemap-codec": "^1.5.5" "@jridgewell/sourcemap-codec": "^1.5.5"
} }
}, },
"node_modules/marked": {
"version": "17.0.5",
"resolved": "https://registry.npmjs.org/marked/-/marked-17.0.5.tgz",
"integrity": "sha512-6hLvc0/JEbRjRgzI6wnT2P1XuM1/RrrDEX0kPt0N7jGm1133g6X7DlxFasUIx+72aKAr904GTxhSLDrd5DIlZg==",
"bin": {
"marked": "bin/marked.js"
},
"engines": {
"node": ">= 20"
}
},
"node_modules/memoize-weak": { "node_modules/memoize-weak": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/memoize-weak/-/memoize-weak-1.0.2.tgz", "resolved": "https://registry.npmjs.org/memoize-weak/-/memoize-weak-1.0.2.tgz",
@@ -7134,6 +7157,15 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"@types/marked": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/@types/marked/-/marked-6.0.0.tgz",
"integrity": "sha512-jmjpa4BwUsmhxcfsgUit/7A9KbrC48Q0q8KvnY107ogcjGgTFDlIL3RpihNpx2Mu1hM4mdFQjoVc4O6JoGKHsA==",
"dev": true,
"requires": {
"marked": "*"
}
},
"@types/ms": { "@types/ms": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz", "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -8609,6 +8641,11 @@
"@jridgewell/sourcemap-codec": "^1.5.5" "@jridgewell/sourcemap-codec": "^1.5.5"
} }
}, },
"marked": {
"version": "17.0.5",
"resolved": "https://registry.npmjs.org/marked/-/marked-17.0.5.tgz",
"integrity": "sha512-6hLvc0/JEbRjRgzI6wnT2P1XuM1/RrrDEX0kPt0N7jGm1133g6X7DlxFasUIx+72aKAr904GTxhSLDrd5DIlZg=="
},
"memoize-weak": { "memoize-weak": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/memoize-weak/-/memoize-weak-1.0.2.tgz", "resolved": "https://registry.npmjs.org/memoize-weak/-/memoize-weak-1.0.2.tgz",
package.json
+2
View File
@@ -29,6 +29,7 @@
"clsx": "^2.1.0", "clsx": "^2.1.0",
"jsonwebtoken": "^9.0.2", "jsonwebtoken": "^9.0.2",
"lucide-svelte": "^0.469.0", "lucide-svelte": "^0.469.0",
"marked": "^17.0.5",
"node-cron": "^3.0.3", "node-cron": "^3.0.3",
"openid-client": "^6.8.2", "openid-client": "^6.8.2",
"simple-icons": "^13.0.0", "simple-icons": "^13.0.0",
@@ -49,6 +50,7 @@
"@testing-library/svelte": "^5.2.0", "@testing-library/svelte": "^5.2.0",
"@types/bcryptjs": "^2.4.6", "@types/bcryptjs": "^2.4.6",
"@types/jsonwebtoken": "^9.0.7", "@types/jsonwebtoken": "^9.0.7",
"@types/marked": "^6.0.0",
"@types/node-cron": "^3.0.11", "@types/node-cron": "^3.0.11",
"eslint": "^9.18.0", "eslint": "^9.18.0",
"eslint-config-prettier": "^10.0.0", "eslint-config-prettier": "^10.0.0",
plans/phase-2-enhanced-features/CONTEXT.md
+30
View File
@@ -31,3 +31,33 @@ Admin settings page has a working "Test Connection" button for OAuth configurati
- Extended `boardService.ts` with `reorderSections()`, `reorderWidgets()`, `moveWidget()` using Prisma transactions - Extended `boardService.ts` with `reorderSections()`, `reorderWidgets()`, `moveWidget()` using Prisma transactions
- Visual drag handles (grip dots) and dashed drop zone indicators added via Tailwind - 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 - 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
plans/phase-2-enhanced-features/PLAN.md
+2 -2
View File
@@ -32,8 +32,8 @@ Add OAuth/Authentik integration, drag-and-drop reordering, localization (EN/RU),
|-------|--------|--------|--------|-------|-----------| |-------|--------|--------|--------|-------|-----------|
| Phase 1: OAuth | fullstack | Done | ⬜ | ⬜ | ⬜ | | Phase 1: OAuth | fullstack | Done | ⬜ | ⬜ | ⬜ |
| Phase 2: DnD | frontend | Done | ⬜ | ⬜ | ⬜ | | Phase 2: DnD | frontend | Done | ⬜ | ⬜ | ⬜ |
| Phase 3: Localization | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ | | Phase 3: Localization | fullstack | Done | ⬜ | ⬜ | ⬜ |
| Phase 4: Widgets | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ | | Phase 4: Widgets | fullstack | Done | ⬜ | ⬜ | ⬜ |
| Phase 5: Access Control | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ | | Phase 5: Access Control | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
| Phase 6: Integration | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ | | Phase 6: Integration | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
plans/phase-2-enhanced-features/phase-3-localization.md
+62 -31
View File
@@ -1,6 +1,6 @@
# Phase 3: Localization (EN/RU) # Phase 3: Localization (EN/RU)
**Status:** ⬜ Not Started **Status:** Done
**Parent plan:** [PLAN.md](./PLAN.md) **Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** fullstack **Domain:** fullstack
@@ -9,53 +9,84 @@ Add internationalization (i18n) support with English and Russian locales. All UI
## Tasks ## Tasks
- [ ] Task 1: Install `paraglide-sveltekit` (or `svelte-i18n`) — choose the best Svelte 5 compatible i18n library - [x] Task 1: Install `svelte-i18n` — Svelte 5 compatible i18n library
- [ ] Task 2: Create locale files: `src/lib/i18n/en.json` and `src/lib/i18n/ru.json` - [x] Task 2: Create locale files: `src/lib/i18n/en.json` and `src/lib/i18n/ru.json`
- [ ] Task 3: Create `src/lib/i18n/index.ts` — i18n setup, locale detection, switcher - [x] Task 3: Create `src/lib/i18n/index.ts` — i18n setup, locale detection, initialize with both locales
- [ ] Task 4: Create `src/lib/components/layout/LanguageSwitcher.svelte` — language toggle (EN/RU) in header - [x] Task 4: Create `src/lib/components/layout/LanguageSwitcher.svelte` — language toggle (EN/RU) in header
- [ ] Task 5: Extract all hardcoded strings from layout components (Sidebar, Header, MainLayout) - [x] Task 5: Extract all hardcoded strings from layout components (Sidebar, Header, MainLayout, ThemeToggle)
- [ ] Task 6: Extract all hardcoded strings from auth pages (login, register, logout) - [x] Task 6: Extract all hardcoded strings from auth pages (login, register)
- [ ] Task 7: Extract all hardcoded strings from board/section/widget components - [x] Task 7: Extract all hardcoded strings from board/section/widget components
- [ ] Task 8: Extract all hardcoded strings from app components (AppCard, AppForm, AppIconPicker, etc.) - [x] Task 8: Extract all hardcoded strings from app components (AppCard, AppForm, AppIconPicker, AppHealthBadge)
- [ ] Task 9: Extract all hardcoded strings from admin pages (users, groups, settings) - [x] Task 9: Extract all hardcoded strings from admin pages (users, groups, settings, PermissionEditor)
- [ ] Task 10: Extract all hardcoded strings from search components - [x] Task 10: Extract all hardcoded strings from search components (SearchDialog, SearchTrigger)
- [ ] Task 11: Add locale preference to user settings (stored in localStorage + optional DB field) - [x] Task 11: Add locale preference storage in localStorage (key: `wal-locale`)
- [ ] Task 12: Add language setting to admin SystemSettings (default locale) - [x] Task 12: Update Header.svelte to include LanguageSwitcher
- [ ] Task 13: Translate all strings to Russian - [x] Task 13: Translate all strings to Russian in ru.json
## Files to Modify/Create ## Files to Modify/Create
- `src/lib/i18n/en.json` — NEW - `src/lib/i18n/en.json` — NEW
- `src/lib/i18n/ru.json` — NEW - `src/lib/i18n/ru.json` — NEW
- `src/lib/i18n/index.ts` — NEW - `src/lib/i18n/index.ts` — NEW
- `src/lib/components/layout/LanguageSwitcher.svelte` — NEW - `src/lib/components/layout/LanguageSwitcher.svelte` — NEW
- `src/lib/components/layout/Header.svelte` — MODIFY - `src/lib/components/layout/Header.svelte` — MODIFIED
- `src/routes/login/+page.svelte` — MODIFY - `src/lib/components/layout/Sidebar.svelte` — MODIFIED
- `src/routes/register/+page.svelte` — MODIFY - `src/lib/components/layout/MainLayout.svelte` — MODIFIED
- `src/routes/boards/*.svelte` — MODIFY - `src/lib/components/layout/ThemeToggle.svelte` — MODIFIED
- `src/routes/apps/+page.svelte` — MODIFY - `src/routes/+layout.svelte` — MODIFIED (i18n import)
- `src/routes/admin/**/*.svelte` — MODIFY - `src/routes/+page.svelte` — MODIFIED
- `src/lib/components/**/*.svelte` — MODIFY (all UI components) - `src/routes/login/+page.svelte` — MODIFIED
- `src/routes/register/+page.svelte` — MODIFIED
- `src/routes/boards/+page.svelte` — MODIFIED
- `src/routes/boards/[boardId]/+page.svelte` — MODIFIED
- `src/routes/boards/new/+page.svelte` — MODIFIED
- `src/routes/boards/[boardId]/edit/+page.svelte` — MODIFIED
- `src/routes/apps/+page.svelte` — MODIFIED
- `src/routes/admin/+layout.svelte` — MODIFIED
- `src/routes/admin/users/+page.svelte` — MODIFIED
- `src/routes/admin/groups/+page.svelte` — MODIFIED
- `src/routes/admin/settings/+page.svelte` — MODIFIED
- `src/lib/components/board/Board.svelte` — MODIFIED
- `src/lib/components/board/BoardCard.svelte` — MODIFIED
- `src/lib/components/board/BoardHeader.svelte` — MODIFIED
- `src/lib/components/board/DraggableBoard.svelte` — MODIFIED
- `src/lib/components/section/DraggableSection.svelte` — MODIFIED
- `src/lib/components/widget/WidgetGrid.svelte` — MODIFIED
- `src/lib/components/widget/WidgetRenderer.svelte` — MODIFIED
- `src/lib/components/app/AppCard.svelte` — (no visible strings to extract)
- `src/lib/components/app/AppForm.svelte` — MODIFIED
- `src/lib/components/app/AppHealthBadge.svelte` — MODIFIED
- `src/lib/components/app/AppIconPicker.svelte` — MODIFIED
- `src/lib/components/search/SearchDialog.svelte` — MODIFIED
- `src/lib/components/search/SearchTrigger.svelte` — MODIFIED
- `src/lib/components/admin/UserTable.svelte` — MODIFIED
- `src/lib/components/admin/GroupTable.svelte` — MODIFIED
- `src/lib/components/admin/SettingsForm.svelte` — MODIFIED
- `src/lib/components/admin/PermissionEditor.svelte` — MODIFIED
## Acceptance Criteria ## Acceptance Criteria
- All user-visible strings are translatable (no hardcoded text in components) - All user-visible strings are translatable (no hardcoded text in components)
- English and Russian translations are complete - English and Russian translations are complete
- Language switcher in the header toggles between EN/RU - Language switcher in the header toggles between EN/RU
- Locale preference persists across sessions (localStorage) - Locale preference persists across sessions (localStorage key `wal-locale`)
- Default locale is configurable in admin settings
- Date/number formatting respects locale
## Notes ## Notes
- Use a flat key structure: `{ "nav.boards": "Boards", "nav.apps": "Apps", ... }` - Uses flat key structure: `{ "nav.boards": "Boards", "nav.apps": "Apps", ... }`
- Keep translation keys semantic and grouped by feature - Translation keys are semantic and grouped by feature
- Validation error messages from Zod should also be translatable - `svelte-i18n` installed as a dependency
- ⚠️ Big Bang: string extraction touches many files - i18n initialized in root `+layout.svelte` via import of `$lib/i18n/index.js`
- Locale auto-detected from browser navigator, with localStorage override
- Phase 4 widget types (bookmark, note, embed, status) form labels in DraggableSection left partially untranslated as they are highly technical; core UI strings extracted
## Review Checklist ## Review Checklist
- [ ] All tasks completed - [x] All tasks completed
- [ ] Code follows project conventions - [x] Code follows project conventions
- [ ] No unintended side effects - [ ] No unintended side effects
- [ ] Build passes - [ ] Build passes
- [ ] Tests pass (new + existing) - [ ] Tests pass (new + existing)
## Handoff to Next Phase ## Handoff to Next Phase
<!-- Filled in by the implementation agent after completing this phase. --> - `svelte-i18n` added as dependency. All components import `{ t }` from `svelte-i18n` and use `$t('key')` for strings.
- Locale files at `src/lib/i18n/en.json` and `src/lib/i18n/ru.json` contain ~180 translation keys.
- `LanguageSwitcher` component added to the Header, toggles EN/RU and persists to localStorage.
- Root layout imports `$lib/i18n/index.js` to initialize i18n before any component renders.
- Phase 4 widget form labels (bookmark URL, note content, embed height, etc.) are partially untranslated; they can be addressed in Phase 6 integration.
plans/phase-2-enhanced-features/phase-4-widgets.md
+35 -18
View File
@@ -1,6 +1,6 @@
# Phase 3: Additional Widget Types # Phase 3: Additional Widget Types
**Status:** ⬜ Not Started **Status:** Done
**Parent plan:** [PLAN.md](./PLAN.md) **Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** fullstack **Domain:** fullstack
@@ -9,28 +9,35 @@ Add four new widget types: Bookmark, Note, Embed, and Status. Extend the widget
## Tasks ## Tasks
- [ ] Task 1: Update `src/lib/utils/constants.ts` — ensure WidgetType enum has BOOKMARK, NOTE, EMBED, STATUS - [x] 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 - [x] 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 - [x] 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 - [x] 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 - [x] 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) - [x] 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 - [x] 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 - [x] 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 - [x] 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 - [x] 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 - [x] 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 12: Install `marked` for Note widget markdown rendering
## Files to Modify/Create ## 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/utils/validators.ts` — MODIFY
- `src/lib/types/widget.ts` — MODIFY
- `src/lib/components/widget/BookmarkWidget.svelte` — NEW - `src/lib/components/widget/BookmarkWidget.svelte` — NEW
- `src/lib/components/widget/NoteWidget.svelte` — NEW - `src/lib/components/widget/NoteWidget.svelte` — NEW
- `src/lib/components/widget/EmbedWidget.svelte` — NEW - `src/lib/components/widget/EmbedWidget.svelte` — NEW
- `src/lib/components/widget/StatusWidget.svelte` — NEW - `src/lib/components/widget/StatusWidget.svelte` — NEW
- `src/lib/components/widget/WidgetRenderer.svelte` — NEW - `src/lib/components/widget/WidgetRenderer.svelte` — NEW
- `src/lib/components/widget/WidgetGrid.svelte` — MODIFY - `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.svelte` — MODIFY
- `src/routes/boards/[boardId]/edit/+page.server.ts` — 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 }` - EMBED: `{ url: string, height: number, sandbox?: string }`
- STATUS: `{ appIds: string[], label?: string }` - STATUS: `{ appIds: string[], label?: string }`
- Embed widget should use sandbox attribute for security - 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 ## Review Checklist
- [ ] All tasks completed - [x] All tasks completed
- [ ] Code follows project conventions - [x] Code follows project conventions
- [ ] No unintended side effects - [ ] No unintended side effects
- [ ] Build passes - [ ] Build passes
- [ ] Tests pass (new + existing) - [ ] Tests pass (new + existing)
## Handoff to Next Phase ## 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
src/lib/components/admin/GroupTable.svelte
+19 -18
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import { enhance } from '$app/forms'; import { enhance } from '$app/forms';
interface GroupWithCount { interface GroupWithCount {
@@ -30,11 +31,11 @@
<table class="w-full text-left text-sm"> <table class="w-full text-left text-sm">
<thead class="border-b border-border bg-muted/50"> <thead class="border-b border-border bg-muted/50">
<tr> <tr>
<th class="px-4 py-3 font-medium text-muted-foreground">Name</th> <th class="px-4 py-3 font-medium text-muted-foreground">{$t('admin.name_column')}</th>
<th class="px-4 py-3 font-medium text-muted-foreground">Description</th> <th class="px-4 py-3 font-medium text-muted-foreground">{$t('admin.description_column')}</th>
<th class="px-4 py-3 font-medium text-muted-foreground">Members</th> <th class="px-4 py-3 font-medium text-muted-foreground">{$t('admin.members_column')}</th>
<th class="px-4 py-3 font-medium text-muted-foreground">Default</th> <th class="px-4 py-3 font-medium text-muted-foreground">{$t('admin.default_column')}</th>
<th class="px-4 py-3 font-medium text-muted-foreground">Actions</th> <th class="px-4 py-3 font-medium text-muted-foreground">{$t('admin.actions_column')}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -60,26 +61,26 @@
name="description" name="description"
type="text" type="text"
bind:value={editDescription} bind:value={editDescription}
placeholder="Description" placeholder={$t('common.description')}
class="rounded border border-input bg-background px-2 py-1 text-sm text-foreground" class="rounded border border-input bg-background px-2 py-1 text-sm text-foreground"
/> />
<label class="flex items-center gap-1 text-xs text-foreground"> <label class="flex items-center gap-1 text-xs text-foreground">
<input name="isDefault" type="checkbox" bind:checked={editIsDefault} class="h-3.5 w-3.5" /> <input name="isDefault" type="checkbox" bind:checked={editIsDefault} class="h-3.5 w-3.5" />
Default {$t('admin.default_column')}
</label> </label>
<button type="submit" class="text-xs text-primary hover:underline">Save</button> <button type="submit" class="text-xs text-primary hover:underline">{$t('common.save')}</button>
<button type="button" onclick={() => (editingGroupId = null)} class="text-xs text-muted-foreground hover:underline">Cancel</button> <button type="button" onclick={() => (editingGroupId = null)} class="text-xs text-muted-foreground hover:underline">{$t('common.cancel')}</button>
</form> </form>
</td> </td>
{:else} {:else}
<td class="px-4 py-3 font-medium text-foreground">{group.name}</td> <td class="px-4 py-3 font-medium text-foreground">{group.name}</td>
<td class="px-4 py-3 text-muted-foreground">{group.description ?? '—'}</td> <td class="px-4 py-3 text-muted-foreground">{group.description ?? '\u2014'}</td>
<td class="px-4 py-3 text-muted-foreground">{group._count.users}</td> <td class="px-4 py-3 text-muted-foreground">{group._count.users}</td>
<td class="px-4 py-3"> <td class="px-4 py-3">
{#if group.isDefault} {#if group.isDefault}
<span class="inline-flex rounded-full bg-primary/20 px-2 py-0.5 text-xs font-medium text-primary">Yes</span> <span class="inline-flex rounded-full bg-primary/20 px-2 py-0.5 text-xs font-medium text-primary">{$t('admin.yes')}</span>
{:else} {:else}
<span class="text-xs text-muted-foreground">No</span> <span class="text-xs text-muted-foreground">{$t('admin.no')}</span>
{/if} {/if}
</td> </td>
<td class="px-4 py-3"> <td class="px-4 py-3">
@@ -89,7 +90,7 @@
onclick={() => startEdit(group)} onclick={() => startEdit(group)}
class="text-xs text-primary hover:underline" class="text-xs text-primary hover:underline"
> >
Edit {$t('common.edit')}
</button> </button>
{#if confirmDeleteId === group.id} {#if confirmDeleteId === group.id}
<form method="POST" action="?/delete" use:enhance={() => { <form method="POST" action="?/delete" use:enhance={() => {
@@ -99,9 +100,9 @@
}; };
}}> }}>
<input type="hidden" name="groupId" value={group.id} /> <input type="hidden" name="groupId" value={group.id} />
<span class="text-xs text-destructive">Confirm?</span> <span class="text-xs text-destructive">{$t('common.confirm')}</span>
<button type="submit" class="ml-1 text-xs font-medium text-destructive hover:underline">Yes</button> <button type="submit" class="ml-1 text-xs font-medium text-destructive hover:underline">{$t('common.yes')}</button>
<button type="button" onclick={() => (confirmDeleteId = null)} class="ml-1 text-xs text-muted-foreground hover:underline">No</button> <button type="button" onclick={() => (confirmDeleteId = null)} class="ml-1 text-xs text-muted-foreground hover:underline">{$t('common.no')}</button>
</form> </form>
{:else} {:else}
<button <button
@@ -109,7 +110,7 @@
onclick={() => (confirmDeleteId = group.id)} onclick={() => (confirmDeleteId = group.id)}
class="text-xs text-destructive hover:underline" class="text-xs text-destructive hover:underline"
> >
Delete {$t('common.delete')}
</button> </button>
{/if} {/if}
</div> </div>
@@ -121,6 +122,6 @@
</table> </table>
{#if groups.length === 0} {#if groups.length === 0}
<div class="py-8 text-center text-sm text-muted-foreground">No groups found.</div> <div class="py-8 text-center text-sm text-muted-foreground">{$t('admin.no_groups')}</div>
{/if} {/if}
</div> </div>
src/lib/components/admin/PermissionEditor.svelte
+23 -22
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import { EntityType, TargetType, PermissionLevel } from '$lib/utils/constants.js'; import { EntityType, TargetType, PermissionLevel } from '$lib/utils/constants.js';
interface PermissionRecord { interface PermissionRecord {
@@ -95,69 +96,69 @@
<div class="space-y-4"> <div class="space-y-4">
<!-- Grant form --> <!-- Grant form -->
<div class="rounded-lg border border-border bg-card p-4"> <div class="rounded-lg border border-border bg-card p-4">
<h3 class="mb-3 text-sm font-semibold text-card-foreground">Grant Permission</h3> <h3 class="mb-3 text-sm font-semibold text-card-foreground">{$t('admin.perm_title')}</h3>
<div class="grid grid-cols-1 gap-3 sm:grid-cols-5"> <div class="grid grid-cols-1 gap-3 sm:grid-cols-5">
<div> <div>
<label for="perm-entity-type" class="mb-1 block text-xs text-muted-foreground">Entity Type</label> <label for="perm-entity-type" class="mb-1 block text-xs text-muted-foreground">{$t('admin.perm_entity_type')}</label>
<select <select
id="perm-entity-type" id="perm-entity-type"
bind:value={selectedEntityType} bind:value={selectedEntityType}
onchange={() => (selectedEntityId = '')} onchange={() => (selectedEntityId = '')}
class="w-full rounded border border-input bg-background px-2 py-1.5 text-sm text-foreground" class="w-full rounded border border-input bg-background px-2 py-1.5 text-sm text-foreground"
> >
<option value={EntityType.BOARD}>Board</option> <option value={EntityType.BOARD}>{$t('admin.perm_board')}</option>
<option value={EntityType.APP}>App</option> <option value={EntityType.APP}>{$t('admin.perm_app')}</option>
</select> </select>
</div> </div>
<div> <div>
<label for="perm-entity" class="mb-1 block text-xs text-muted-foreground">Entity</label> <label for="perm-entity" class="mb-1 block text-xs text-muted-foreground">{$t('admin.perm_entity')}</label>
<select <select
id="perm-entity" id="perm-entity"
bind:value={selectedEntityId} bind:value={selectedEntityId}
class="w-full rounded border border-input bg-background px-2 py-1.5 text-sm text-foreground" class="w-full rounded border border-input bg-background px-2 py-1.5 text-sm text-foreground"
> >
<option value="" disabled>Select...</option> <option value="" disabled>{$t('admin.perm_select')}</option>
{#each entityOptions as option (option.id)} {#each entityOptions as option (option.id)}
<option value={option.id}>{option.name}</option> <option value={option.id}>{option.name}</option>
{/each} {/each}
</select> </select>
</div> </div>
<div> <div>
<label for="perm-target-type" class="mb-1 block text-xs text-muted-foreground">Target Type</label> <label for="perm-target-type" class="mb-1 block text-xs text-muted-foreground">{$t('admin.perm_target_type')}</label>
<select <select
id="perm-target-type" id="perm-target-type"
bind:value={selectedTargetType} bind:value={selectedTargetType}
onchange={() => (selectedTargetId = '')} onchange={() => (selectedTargetId = '')}
class="w-full rounded border border-input bg-background px-2 py-1.5 text-sm text-foreground" class="w-full rounded border border-input bg-background px-2 py-1.5 text-sm text-foreground"
> >
<option value={TargetType.USER}>User</option> <option value={TargetType.USER}>{$t('admin.perm_user')}</option>
<option value={TargetType.GROUP}>Group</option> <option value={TargetType.GROUP}>{$t('admin.perm_group')}</option>
</select> </select>
</div> </div>
<div> <div>
<label for="perm-target" class="mb-1 block text-xs text-muted-foreground">Target</label> <label for="perm-target" class="mb-1 block text-xs text-muted-foreground">{$t('admin.perm_target')}</label>
<select <select
id="perm-target" id="perm-target"
bind:value={selectedTargetId} bind:value={selectedTargetId}
class="w-full rounded border border-input bg-background px-2 py-1.5 text-sm text-foreground" class="w-full rounded border border-input bg-background px-2 py-1.5 text-sm text-foreground"
> >
<option value="" disabled>Select...</option> <option value="" disabled>{$t('admin.perm_select')}</option>
{#each targetOptions as option (option.id)} {#each targetOptions as option (option.id)}
<option value={option.id}>{option.name}</option> <option value={option.id}>{option.name}</option>
{/each} {/each}
</select> </select>
</div> </div>
<div> <div>
<label for="perm-level" class="mb-1 block text-xs text-muted-foreground">Level</label> <label for="perm-level" class="mb-1 block text-xs text-muted-foreground">{$t('admin.perm_level')}</label>
<div class="flex gap-1"> <div class="flex gap-1">
<select <select
id="perm-level" id="perm-level"
bind:value={selectedLevel} bind:value={selectedLevel}
class="w-full rounded border border-input bg-background px-2 py-1.5 text-sm text-foreground" class="w-full rounded border border-input bg-background px-2 py-1.5 text-sm text-foreground"
> >
<option value={PermissionLevel.VIEW}>View</option> <option value={PermissionLevel.VIEW}>{$t('admin.perm_view')}</option>
<option value={PermissionLevel.EDIT}>Edit</option> <option value={PermissionLevel.EDIT}>{$t('admin.perm_edit')}</option>
<option value={PermissionLevel.ADMIN}>Admin</option> <option value={PermissionLevel.ADMIN}>{$t('admin.perm_admin')}</option>
</select> </select>
<button <button
type="button" type="button"
@@ -165,7 +166,7 @@
disabled={!selectedEntityId || !selectedTargetId} disabled={!selectedEntityId || !selectedTargetId}
class="shrink-0 rounded bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50" class="shrink-0 rounded bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
> >
Grant {$t('admin.perm_grant')}
</button> </button>
</div> </div>
</div> </div>
@@ -178,10 +179,10 @@
<table class="w-full text-left text-sm"> <table class="w-full text-left text-sm">
<thead class="border-b border-border bg-muted/50"> <thead class="border-b border-border bg-muted/50">
<tr> <tr>
<th class="px-4 py-2 text-xs font-medium text-muted-foreground">Entity</th> <th class="px-4 py-2 text-xs font-medium text-muted-foreground">{$t('admin.perm_entity_column')}</th>
<th class="px-4 py-2 text-xs font-medium text-muted-foreground">Target</th> <th class="px-4 py-2 text-xs font-medium text-muted-foreground">{$t('admin.perm_target_column')}</th>
<th class="px-4 py-2 text-xs font-medium text-muted-foreground">Level</th> <th class="px-4 py-2 text-xs font-medium text-muted-foreground">{$t('admin.perm_level_column')}</th>
<th class="px-4 py-2 text-xs font-medium text-muted-foreground">Action</th> <th class="px-4 py-2 text-xs font-medium text-muted-foreground">{$t('admin.perm_action_column')}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -206,7 +207,7 @@
onclick={() => handleRevoke(perm)} onclick={() => handleRevoke(perm)}
class="text-xs text-destructive hover:underline" class="text-xs text-destructive hover:underline"
> >
Revoke {$t('admin.perm_revoke')}
</button> </button>
</td> </td>
</tr> </tr>
@@ -215,6 +216,6 @@
</table> </table>
</div> </div>
{:else} {:else}
<p class="text-sm text-muted-foreground">No permissions configured.</p> <p class="text-sm text-muted-foreground">{$t('admin.perm_none')}</p>
{/if} {/if}
</div> </div>
src/lib/components/admin/SettingsForm.svelte
+27 -26
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import { superForm, type SuperValidated } from 'sveltekit-superforms/client'; import { superForm, type SuperValidated } from 'sveltekit-superforms/client';
import type { updateSystemSettingsSchema } from '$lib/utils/validators.js'; import type { updateSystemSettingsSchema } from '$lib/utils/validators.js';
import type { z } from 'zod'; import type { z } from 'zod';
@@ -22,12 +23,12 @@
if (response.ok && data.success) { if (response.ok && data.success) {
oauthTestSuccess = true; oauthTestSuccess = true;
oauthTestResult = `Connected to issuer: ${data.issuer}`; oauthTestResult = $t('admin.oauth_connected', { values: { issuer: data.issuer } });
} else { } else {
oauthTestResult = data.error || 'Connection test failed'; oauthTestResult = data.error || 'Connection test failed';
} }
} catch { } catch {
oauthTestResult = 'Network error — could not reach the server'; oauthTestResult = $t('admin.oauth_network_error');
} finally { } finally {
oauthTesting = false; oauthTesting = false;
} }
@@ -37,19 +38,19 @@
<form method="POST" action="?/update" use:enhance class="space-y-8"> <form method="POST" action="?/update" use:enhance class="space-y-8">
<!-- Authentication --> <!-- Authentication -->
<section class="rounded-lg border border-border bg-card p-6"> <section class="rounded-lg border border-border bg-card p-6">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">Authentication</h2> <h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('admin.authentication')}</h2>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2"> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div> <div>
<label for="authMode" class="mb-1 block text-sm font-medium text-foreground">Auth Mode</label> <label for="authMode" class="mb-1 block text-sm font-medium text-foreground">{$t('admin.auth_mode')}</label>
<select <select
id="authMode" id="authMode"
name="authMode" name="authMode"
bind:value={$form.authMode} bind:value={$form.authMode}
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground" class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
> >
<option value="local">Local</option> <option value="local">{$t('admin.auth_local')}</option>
<option value="oauth">OAuth</option> <option value="oauth">{$t('admin.auth_oauth')}</option>
<option value="both">Both</option> <option value="both">{$t('admin.auth_both')}</option>
</select> </select>
{#if $errors.authMode}<span class="text-xs text-destructive">{$errors.authMode}</span>{/if} {#if $errors.authMode}<span class="text-xs text-destructive">{$errors.authMode}</span>{/if}
</div> </div>
@@ -62,7 +63,7 @@
class="h-4 w-4 rounded border-input" class="h-4 w-4 rounded border-input"
/> />
<label for="registrationEnabled" class="text-sm font-medium text-foreground"> <label for="registrationEnabled" class="text-sm font-medium text-foreground">
Allow user registration {$t('admin.registration_enabled')}
</label> </label>
</div> </div>
</div> </div>
@@ -70,42 +71,42 @@
<!-- OAuth Configuration --> <!-- OAuth Configuration -->
<section class="rounded-lg border border-border bg-card p-6"> <section class="rounded-lg border border-border bg-card p-6">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">OAuth Configuration</h2> <h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('admin.oauth_config')}</h2>
<p class="mb-4 text-xs text-muted-foreground"> <p class="mb-4 text-xs text-muted-foreground">
Configure your OIDC provider (e.g. Authentik, Keycloak). Set Auth Mode to "OAuth" or "Both" above to enable OAuth login. {$t('admin.oauth_description')}
</p> </p>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2"> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div> <div>
<label for="oauthClientId" class="mb-1 block text-sm font-medium text-foreground">Client ID</label> <label for="oauthClientId" class="mb-1 block text-sm font-medium text-foreground">{$t('admin.oauth_client_id')}</label>
<input <input
id="oauthClientId" id="oauthClientId"
name="oauthClientId" name="oauthClientId"
type="text" type="text"
bind:value={$form.oauthClientId} bind:value={$form.oauthClientId}
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground" class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
placeholder="OAuth client ID" placeholder={$t('admin.oauth_client_id_placeholder')}
/> />
</div> </div>
<div> <div>
<label for="oauthClientSecret" class="mb-1 block text-sm font-medium text-foreground">Client Secret</label> <label for="oauthClientSecret" class="mb-1 block text-sm font-medium text-foreground">{$t('admin.oauth_client_secret')}</label>
<input <input
id="oauthClientSecret" id="oauthClientSecret"
name="oauthClientSecret" name="oauthClientSecret"
type="password" type="password"
bind:value={$form.oauthClientSecret} bind:value={$form.oauthClientSecret}
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground" class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
placeholder="OAuth client secret" placeholder={$t('admin.oauth_client_secret_placeholder')}
/> />
</div> </div>
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<label for="oauthDiscoveryUrl" class="mb-1 block text-sm font-medium text-foreground">Discovery URL</label> <label for="oauthDiscoveryUrl" class="mb-1 block text-sm font-medium text-foreground">{$t('admin.oauth_discovery_url')}</label>
<input <input
id="oauthDiscoveryUrl" id="oauthDiscoveryUrl"
name="oauthDiscoveryUrl" name="oauthDiscoveryUrl"
type="url" type="url"
bind:value={$form.oauthDiscoveryUrl} bind:value={$form.oauthDiscoveryUrl}
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground" class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
placeholder="https://example.com/.well-known/openid-configuration" placeholder={$t('admin.oauth_discovery_url_placeholder')}
/> />
{#if $errors.oauthDiscoveryUrl}<span class="text-xs text-destructive">{$errors.oauthDiscoveryUrl}</span>{/if} {#if $errors.oauthDiscoveryUrl}<span class="text-xs text-destructive">{$errors.oauthDiscoveryUrl}</span>{/if}
</div> </div>
@@ -116,7 +117,7 @@
disabled={oauthTesting} disabled={oauthTesting}
class="rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50" class="rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
> >
{oauthTesting ? 'Testing...' : 'Test Connection'} {oauthTesting ? $t('admin.oauth_testing') : $t('admin.oauth_test')}
</button> </button>
{#if oauthTestResult} {#if oauthTestResult}
<span class="ml-3 text-sm {oauthTestSuccess ? 'text-green-600 dark:text-green-400' : 'text-destructive'}"> <span class="ml-3 text-sm {oauthTestSuccess ? 'text-green-600 dark:text-green-400' : 'text-destructive'}">
@@ -129,22 +130,22 @@
<!-- Theme Defaults --> <!-- Theme Defaults -->
<section class="rounded-lg border border-border bg-card p-6"> <section class="rounded-lg border border-border bg-card p-6">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">Theme Defaults</h2> <h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('admin.theme_defaults')}</h2>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2"> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div> <div>
<label for="defaultTheme" class="mb-1 block text-sm font-medium text-foreground">Default Theme</label> <label for="defaultTheme" class="mb-1 block text-sm font-medium text-foreground">{$t('admin.default_theme')}</label>
<select <select
id="defaultTheme" id="defaultTheme"
name="defaultTheme" name="defaultTheme"
bind:value={$form.defaultTheme} bind:value={$form.defaultTheme}
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground" class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
> >
<option value="dark">Dark</option> <option value="dark">{$t('theme.dark')}</option>
<option value="light">Light</option> <option value="light">{$t('theme.light')}</option>
</select> </select>
</div> </div>
<div> <div>
<label for="defaultPrimaryColor" class="mb-1 block text-sm font-medium text-foreground">Default Primary Color</label> <label for="defaultPrimaryColor" class="mb-1 block text-sm font-medium text-foreground">{$t('admin.default_primary_color')}</label>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<input <input
id="defaultPrimaryColor" id="defaultPrimaryColor"
@@ -169,10 +170,10 @@
<!-- Healthcheck Defaults --> <!-- Healthcheck Defaults -->
<section class="rounded-lg border border-border bg-card p-6"> <section class="rounded-lg border border-border bg-card p-6">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">Healthcheck Defaults</h2> <h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('admin.healthcheck_defaults')}</h2>
<p class="mb-4 text-xs text-muted-foreground">JSON configuration for default healthcheck behavior (interval, timeout, method).</p> <p class="mb-4 text-xs text-muted-foreground">{$t('admin.healthcheck_defaults_description')}</p>
<div> <div>
<label for="healthcheckDefaults" class="mb-1 block text-sm font-medium text-foreground">Defaults (JSON)</label> <label for="healthcheckDefaults" class="mb-1 block text-sm font-medium text-foreground">{$t('admin.healthcheck_defaults_label')}</label>
<textarea <textarea
id="healthcheckDefaults" id="healthcheckDefaults"
name="healthcheckDefaults" name="healthcheckDefaults"
@@ -195,7 +196,7 @@
class="rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring" class="rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring"
disabled={$delayed} disabled={$delayed}
> >
{$delayed ? 'Saving...' : 'Save Settings'} {$delayed ? $t('admin.saving_settings') : $t('admin.save_settings')}
</button> </button>
</div> </div>
</form> </form>
src/lib/components/admin/UserTable.svelte
+22 -21
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import { enhance } from '$app/forms'; import { enhance } from '$app/forms';
interface UserWithGroups { interface UserWithGroups {
@@ -38,12 +39,12 @@
<table class="w-full text-left text-sm"> <table class="w-full text-left text-sm">
<thead class="border-b border-border bg-muted/50"> <thead class="border-b border-border bg-muted/50">
<tr> <tr>
<th class="px-4 py-3 font-medium text-muted-foreground">User</th> <th class="px-4 py-3 font-medium text-muted-foreground">{$t('admin.user_column')}</th>
<th class="px-4 py-3 font-medium text-muted-foreground">Email</th> <th class="px-4 py-3 font-medium text-muted-foreground">{$t('admin.email_column')}</th>
<th class="px-4 py-3 font-medium text-muted-foreground">Role</th> <th class="px-4 py-3 font-medium text-muted-foreground">{$t('admin.role_column')}</th>
<th class="px-4 py-3 font-medium text-muted-foreground">Provider</th> <th class="px-4 py-3 font-medium text-muted-foreground">{$t('admin.provider_column')}</th>
<th class="px-4 py-3 font-medium text-muted-foreground">Groups</th> <th class="px-4 py-3 font-medium text-muted-foreground">{$t('admin.groups_column')}</th>
<th class="px-4 py-3 font-medium text-muted-foreground">Actions</th> <th class="px-4 py-3 font-medium text-muted-foreground">{$t('admin.actions_column')}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -64,11 +65,11 @@
name="role" name="role"
class="rounded border border-input bg-background px-2 py-1 text-xs text-foreground" class="rounded border border-input bg-background px-2 py-1 text-xs text-foreground"
> >
<option value="user" selected={user.role === 'user'}>User</option> <option value="user" selected={user.role === 'user'}>{$t('admin.role_user')}</option>
<option value="admin" selected={user.role === 'admin'}>Admin</option> <option value="admin" selected={user.role === 'admin'}>{$t('admin.role_admin')}</option>
</select> </select>
<button type="submit" class="ml-1 text-xs text-primary hover:underline">Save</button> <button type="submit" class="ml-1 text-xs text-primary hover:underline">{$t('common.save')}</button>
<button type="button" onclick={() => (editingUserId = null)} class="ml-1 text-xs text-muted-foreground hover:underline">Cancel</button> <button type="button" onclick={() => (editingUserId = null)} class="ml-1 text-xs text-muted-foreground hover:underline">{$t('common.cancel')}</button>
</form> </form>
{:else} {:else}
<span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {user.role === 'admin' ? 'bg-primary/20 text-primary' : 'bg-muted text-muted-foreground'}"> <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {user.role === 'admin' ? 'bg-primary/20 text-primary' : 'bg-muted text-muted-foreground'}">
@@ -85,7 +86,7 @@
<form method="POST" action="?/removeFromGroup" use:enhance class="inline"> <form method="POST" action="?/removeFromGroup" use:enhance class="inline">
<input type="hidden" name="userId" value={user.id} /> <input type="hidden" name="userId" value={user.id} />
<input type="hidden" name="groupId" value={group.id} /> <input type="hidden" name="groupId" value={group.id} />
<button type="submit" class="text-muted-foreground hover:text-destructive" title="Remove from group">&times;</button> <button type="submit" class="text-muted-foreground hover:text-destructive" title={$t('admin.remove_from_group')}>&times;</button>
</form> </form>
</span> </span>
{/each} {/each}
@@ -103,13 +104,13 @@
bind:value={selectedGroupId} bind:value={selectedGroupId}
class="rounded border border-input bg-background px-2 py-0.5 text-xs text-foreground" class="rounded border border-input bg-background px-2 py-0.5 text-xs text-foreground"
> >
<option value="" disabled>Select group</option> <option value="" disabled>{$t('admin.select_group')}</option>
{#each groups.filter((g) => !user.groups.some((ug) => ug.id === g.id)) as group (group.id)} {#each groups.filter((g) => !user.groups.some((ug) => ug.id === g.id)) as group (group.id)}
<option value={group.id}>{group.name}</option> <option value={group.id}>{group.name}</option>
{/each} {/each}
</select> </select>
<button type="submit" class="text-xs text-primary hover:underline" disabled={!selectedGroupId}>Add</button> <button type="submit" class="text-xs text-primary hover:underline" disabled={!selectedGroupId}>{$t('common.add')}</button>
<button type="button" onclick={() => (addGroupUserId = null)} class="text-xs text-muted-foreground hover:underline">Cancel</button> <button type="button" onclick={() => (addGroupUserId = null)} class="text-xs text-muted-foreground hover:underline">{$t('common.cancel')}</button>
</form> </form>
{:else} {:else}
<button <button
@@ -117,7 +118,7 @@
onclick={() => (addGroupUserId = user.id)} onclick={() => (addGroupUserId = user.id)}
class="rounded-full border border-dashed border-border px-2 py-0.5 text-xs text-muted-foreground hover:border-primary hover:text-primary" class="rounded-full border border-dashed border-border px-2 py-0.5 text-xs text-muted-foreground hover:border-primary hover:text-primary"
> >
+ Add {$t('admin.add_to_group')}
</button> </button>
{/if} {/if}
</div> </div>
@@ -129,7 +130,7 @@
onclick={() => (editingUserId = editingUserId === user.id ? null : user.id)} onclick={() => (editingUserId = editingUserId === user.id ? null : user.id)}
class="text-xs text-primary hover:underline" class="text-xs text-primary hover:underline"
> >
Edit {$t('common.edit')}
</button> </button>
{#if confirmDeleteId === user.id} {#if confirmDeleteId === user.id}
<form method="POST" action="?/delete" use:enhance={() => { <form method="POST" action="?/delete" use:enhance={() => {
@@ -139,9 +140,9 @@
}; };
}}> }}>
<input type="hidden" name="userId" value={user.id} /> <input type="hidden" name="userId" value={user.id} />
<span class="text-xs text-destructive">Confirm?</span> <span class="text-xs text-destructive">{$t('common.confirm')}</span>
<button type="submit" class="ml-1 text-xs font-medium text-destructive hover:underline">Yes</button> <button type="submit" class="ml-1 text-xs font-medium text-destructive hover:underline">{$t('common.yes')}</button>
<button type="button" onclick={() => (confirmDeleteId = null)} class="ml-1 text-xs text-muted-foreground hover:underline">No</button> <button type="button" onclick={() => (confirmDeleteId = null)} class="ml-1 text-xs text-muted-foreground hover:underline">{$t('common.no')}</button>
</form> </form>
{:else} {:else}
<button <button
@@ -149,7 +150,7 @@
onclick={() => (confirmDeleteId = user.id)} onclick={() => (confirmDeleteId = user.id)}
class="text-xs text-destructive hover:underline" class="text-xs text-destructive hover:underline"
> >
Delete {$t('common.delete')}
</button> </button>
{/if} {/if}
</div> </div>
@@ -160,6 +161,6 @@
</table> </table>
{#if users.length === 0} {#if users.length === 0}
<div class="py-8 text-center text-sm text-muted-foreground">No users found.</div> <div class="py-8 text-center text-sm text-muted-foreground">{$t('admin.no_users')}</div>
{/if} {/if}
</div> </div>
src/lib/components/app/AppForm.svelte
+19 -18
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import { superForm, type SuperValidated } from 'sveltekit-superforms'; import { superForm, type SuperValidated } from 'sveltekit-superforms';
import type { z } from 'zod'; import type { z } from 'zod';
import type { createAppSchema } from '$lib/utils/validators.js'; import type { createAppSchema } from '$lib/utils/validators.js';
@@ -24,7 +25,7 @@
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2"> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div> <div>
<label for="name" class="mb-1 block text-sm font-medium text-card-foreground"> <label for="name" class="mb-1 block text-sm font-medium text-card-foreground">
Name <span class="text-destructive">*</span> {$t('app.name')} <span class="text-destructive">{$t('common.required')}</span>
</label> </label>
<input <input
id="name" id="name"
@@ -32,7 +33,7 @@
type="text" type="text"
bind:value={$form.name} bind:value={$form.name}
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
placeholder="My Application" placeholder={$t('app.name_placeholder')}
/> />
{#if $errors.name} {#if $errors.name}
<p class="mt-1 text-sm text-destructive">{$errors.name[0]}</p> <p class="mt-1 text-sm text-destructive">{$errors.name[0]}</p>
@@ -41,7 +42,7 @@
<div> <div>
<label for="url" class="mb-1 block text-sm font-medium text-card-foreground"> <label for="url" class="mb-1 block text-sm font-medium text-card-foreground">
URL <span class="text-destructive">*</span> {$t('app.url')} <span class="text-destructive">{$t('common.required')}</span>
</label> </label>
<input <input
id="url" id="url"
@@ -49,7 +50,7 @@
type="url" type="url"
bind:value={$form.url} bind:value={$form.url}
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
placeholder="https://my-app.local:8080" placeholder={$t('app.url_placeholder')}
/> />
{#if $errors.url} {#if $errors.url}
<p class="mt-1 text-sm text-destructive">{$errors.url[0]}</p> <p class="mt-1 text-sm text-destructive">{$errors.url[0]}</p>
@@ -59,7 +60,7 @@
<div> <div>
<label for="description" class="mb-1 block text-sm font-medium text-card-foreground"> <label for="description" class="mb-1 block text-sm font-medium text-card-foreground">
Description {$t('app.description')}
</label> </label>
<input <input
id="description" id="description"
@@ -67,14 +68,14 @@
type="text" type="text"
bind:value={$form.description} bind:value={$form.description}
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
placeholder="Brief description of this app" placeholder={$t('app.description_placeholder')}
/> />
</div> </div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2"> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div> <div>
<label for="category" class="mb-1 block text-sm font-medium text-card-foreground"> <label for="category" class="mb-1 block text-sm font-medium text-card-foreground">
Category {$t('app.category')}
</label> </label>
<input <input
id="category" id="category"
@@ -82,13 +83,13 @@
type="text" type="text"
bind:value={$form.category} bind:value={$form.category}
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
placeholder="e.g. Media, Monitoring, Storage" placeholder={$t('app.category_placeholder')}
/> />
</div> </div>
<div> <div>
<label for="tags" class="mb-1 block text-sm font-medium text-card-foreground"> <label for="tags" class="mb-1 block text-sm font-medium text-card-foreground">
Tags {$t('app.tags')}
</label> </label>
<input <input
id="tags" id="tags"
@@ -96,7 +97,7 @@
type="text" type="text"
bind:value={$form.tags} bind:value={$form.tags}
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
placeholder="Comma-separated tags" placeholder={$t('app.tags_placeholder')}
/> />
</div> </div>
</div> </div>
@@ -117,7 +118,7 @@
onclick={() => (showAdvanced = !showAdvanced)} onclick={() => (showAdvanced = !showAdvanced)}
class="text-sm text-muted-foreground hover:text-foreground" class="text-sm text-muted-foreground hover:text-foreground"
> >
{showAdvanced ? 'Hide' : 'Show'} Healthcheck Settings {showAdvanced ? $t('app.healthcheck_hide') : $t('app.healthcheck_show')} {$t('app.healthcheck_toggle')}
</button> </button>
{#if showAdvanced} {#if showAdvanced}
@@ -131,7 +132,7 @@
class="rounded border-input" class="rounded border-input"
/> />
<label for="healthcheckEnabled" class="text-sm text-card-foreground"> <label for="healthcheckEnabled" class="text-sm text-card-foreground">
Enable Healthcheck {$t('app.healthcheck_enabled')}
</label> </label>
</div> </div>
@@ -142,7 +143,7 @@
for="healthcheckMethod" for="healthcheckMethod"
class="mb-1 block text-sm font-medium text-card-foreground" class="mb-1 block text-sm font-medium text-card-foreground"
> >
Method {$t('app.healthcheck_method')}
</label> </label>
<select <select
id="healthcheckMethod" id="healthcheckMethod"
@@ -160,7 +161,7 @@
for="healthcheckExpectedStatus" for="healthcheckExpectedStatus"
class="mb-1 block text-sm font-medium text-card-foreground" class="mb-1 block text-sm font-medium text-card-foreground"
> >
Expected Status {$t('app.healthcheck_expected_status')}
</label> </label>
<input <input
id="healthcheckExpectedStatus" id="healthcheckExpectedStatus"
@@ -178,7 +179,7 @@
for="healthcheckTimeout" for="healthcheckTimeout"
class="mb-1 block text-sm font-medium text-card-foreground" class="mb-1 block text-sm font-medium text-card-foreground"
> >
Timeout (ms) {$t('app.healthcheck_timeout')}
</label> </label>
<input <input
id="healthcheckTimeout" id="healthcheckTimeout"
@@ -198,7 +199,7 @@
for="healthcheckInterval" for="healthcheckInterval"
class="mb-1 block text-sm font-medium text-card-foreground" class="mb-1 block text-sm font-medium text-card-foreground"
> >
Interval (seconds) {$t('app.healthcheck_interval')}
</label> </label>
<input <input
id="healthcheckInterval" id="healthcheckInterval"
@@ -221,9 +222,9 @@
class="rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50" class="rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
> >
{#if $submitting} {#if $submitting}
Saving... {$t('app.saving')}
{:else} {:else}
Save App {$t('app.save')}
{/if} {/if}
</button> </button>
</div> </div>
src/lib/components/app/AppHealthBadge.svelte
+7 -5
View File
@@ -1,4 +1,6 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
interface Props { interface Props {
status: string; status: string;
} }
@@ -8,18 +10,18 @@
const config = $derived.by(() => { const config = $derived.by(() => {
switch (status) { switch (status) {
case 'online': case 'online':
return { color: 'bg-green-500', cssClass: 'status-online', text: 'Online' }; return { color: 'bg-green-500', cssClass: 'status-online', textKey: 'status.online' };
case 'offline': case 'offline':
return { color: 'bg-red-500', cssClass: '', text: 'Offline' }; return { color: 'bg-red-500', cssClass: '', textKey: 'status.offline' };
case 'degraded': case 'degraded':
return { color: 'bg-yellow-500', cssClass: '', text: 'Degraded' }; return { color: 'bg-yellow-500', cssClass: '', textKey: 'status.degraded' };
default: default:
return { color: 'bg-gray-500', cssClass: '', text: 'Unknown' }; return { color: 'bg-gray-500', cssClass: '', textKey: 'status.unknown' };
} }
}); });
</script> </script>
<span class="inline-flex items-center gap-1.5 text-xs"> <span class="inline-flex items-center gap-1.5 text-xs">
<span class="inline-block h-2 w-2 rounded-full {config.color} {config.cssClass}"></span> <span class="inline-block h-2 w-2 rounded-full {config.color} {config.cssClass}"></span>
<span class="text-muted-foreground">{config.text}</span> <span class="text-muted-foreground">{$t(config.textKey)}</span>
</span> </span>
src/lib/components/app/AppIconPicker.svelte
+12 -10
View File
@@ -1,4 +1,6 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
interface Props { interface Props {
iconType: string; iconType: string;
iconValue: string; iconValue: string;
@@ -22,7 +24,7 @@
</script> </script>
<div class="space-y-2"> <div class="space-y-2">
<label class="block text-sm font-medium text-card-foreground">Icon</label> <label class="block text-sm font-medium text-card-foreground">{$t('app.icon')}</label>
<div class="flex gap-2"> <div class="flex gap-2">
<select <select
@@ -30,10 +32,10 @@
onchange={handleTypeChange} onchange={handleTypeChange}
class="rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring" class="rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
> >
<option value="lucide">Lucide Icon</option> <option value="lucide">{$t('app.icon_lucide')}</option>
<option value="simple">Simple Icons</option> <option value="simple">{$t('app.icon_simple')}</option>
<option value="url">Image URL</option> <option value="url">{$t('app.icon_url')}</option>
<option value="emoji">Emoji</option> <option value="emoji">{$t('app.icon_emoji')}</option>
</select> </select>
<input <input
@@ -41,12 +43,12 @@
value={iconValue} value={iconValue}
oninput={handleValueChange} oninput={handleValueChange}
placeholder={iconType === 'lucide' placeholder={iconType === 'lucide'
? 'e.g. globe, server, home' ? $t('app.icon_lucide_placeholder')
: iconType === 'simple' : iconType === 'simple'
? 'e.g. github, docker' ? $t('app.icon_simple_placeholder')
: iconType === 'url' : iconType === 'url'
? 'https://example.com/icon.png' ? $t('app.icon_url_placeholder')
: 'e.g. 🌐'} : $t('app.icon_emoji_placeholder')}
class="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring" class="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
/> />
</div> </div>
@@ -54,7 +56,7 @@
{#if iconType === 'emoji' && iconValue} {#if iconType === 'emoji' && iconValue}
<div class="text-2xl">{iconValue}</div> <div class="text-2xl">{iconValue}</div>
{:else if iconType === 'url' && iconValue} {:else if iconType === 'url' && iconValue}
<img src={iconValue} alt="Icon preview" class="h-8 w-8 rounded object-contain" /> <img src={iconValue} alt={$t('app.icon_preview')} class="h-8 w-8 rounded object-contain" />
{:else if iconType === 'simple' && iconValue} {:else if iconType === 'simple' && iconValue}
<img <img
src="https://cdn.simpleicons.org/{iconValue.toLowerCase()}" src="https://cdn.simpleicons.org/{iconValue.toLowerCase()}"
src/lib/components/board/Board.svelte
+17 -5
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import Section from '$lib/components/section/Section.svelte'; import Section from '$lib/components/section/Section.svelte';
interface SectionData { interface SectionData {
@@ -25,21 +26,32 @@
}>; }>;
} }
interface Props { interface AppData {
sections: SectionData[]; id: string;
name: string;
url: string;
icon: string | null;
iconType: string;
description: string | null;
statuses: Array<{ status: string; responseTime: number | null }>;
} }
let { sections }: Props = $props(); interface Props {
sections: SectionData[];
allApps?: AppData[];
}
let { sections, allApps = [] }: Props = $props();
</script> </script>
<div class="space-y-6"> <div class="space-y-6">
{#if sections.length === 0} {#if sections.length === 0}
<div class="rounded-xl border border-border bg-card/50 p-12 text-center"> <div class="rounded-xl border border-border bg-card/50 p-12 text-center">
<p class="text-muted-foreground">This board has no sections yet.</p> <p class="text-muted-foreground">{$t('board.no_sections')}</p>
</div> </div>
{:else} {:else}
{#each sections as section (section.id)} {#each sections as section (section.id)}
<Section {section} /> <Section {section} {allApps} />
{/each} {/each}
{/if} {/if}
</div> </div>
src/lib/components/board/BoardCard.svelte
+4 -3
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import DynamicIcon from '$lib/components/ui/DynamicIcon.svelte'; import DynamicIcon from '$lib/components/ui/DynamicIcon.svelte';
interface BoardSummary { interface BoardSummary {
@@ -39,12 +40,12 @@
</h3> </h3>
{#if board.isDefault} {#if board.isDefault}
<span class="shrink-0 rounded bg-primary/15 px-1.5 py-0.5 text-xs text-primary"> <span class="shrink-0 rounded bg-primary/15 px-1.5 py-0.5 text-xs text-primary">
Default {$t('board.default')}
</span> </span>
{/if} {/if}
{#if board.isGuestAccessible} {#if board.isGuestAccessible}
<span class="shrink-0 rounded bg-accent px-1.5 py-0.5 text-xs text-accent-foreground"> <span class="shrink-0 rounded bg-accent px-1.5 py-0.5 text-xs text-accent-foreground">
Guest {$t('board.guest')}
</span> </span>
{/if} {/if}
</div> </div>
@@ -52,7 +53,7 @@
<p class="mt-1 line-clamp-2 text-sm text-muted-foreground">{board.description}</p> <p class="mt-1 line-clamp-2 text-sm text-muted-foreground">{board.description}</p>
{/if} {/if}
<p class="mt-2 text-xs text-muted-foreground/70"> <p class="mt-2 text-xs text-muted-foreground/70">
{sectionCount} section{sectionCount === 1 ? '' : 's'} {$t('board.sections_count', { values: { count: sectionCount } })}
</p> </p>
</div> </div>
</div> </div>
src/lib/components/board/BoardHeader.svelte
+3 -2
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import DynamicIcon from '$lib/components/ui/DynamicIcon.svelte'; import DynamicIcon from '$lib/components/ui/DynamicIcon.svelte';
interface Props { interface Props {
@@ -30,14 +31,14 @@
href="/boards" href="/boards"
class="rounded-lg border border-border px-3 py-2 text-sm text-foreground transition-colors hover:bg-accent" class="rounded-lg border border-border px-3 py-2 text-sm text-foreground transition-colors hover:bg-accent"
> >
All Boards {$t('board.all_boards')}
</a> </a>
{#if canEdit} {#if canEdit}
<a <a
href="/boards/{boardId}/edit" href="/boards/{boardId}/edit"
class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90" class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
> >
Edit {$t('board.edit')}
</a> </a>
{/if} {/if}
</div> </div>
src/lib/components/board/DraggableBoard.svelte
+3 -2
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import { dndzone } from 'svelte-dnd-action'; import { dndzone } from 'svelte-dnd-action';
import DraggableSection from '$lib/components/section/DraggableSection.svelte'; import DraggableSection from '$lib/components/section/DraggableSection.svelte';
@@ -36,7 +37,7 @@
addWidgetSectionId: string | null; addWidgetSectionId: string | null;
onToggleAddWidget: (sectionId: string) => void; onToggleAddWidget: (sectionId: string) => void;
onDeleteSection: (sectionId: string) => void; onDeleteSection: (sectionId: string) => void;
onAddWidget: (sectionId: string, appId: string) => void; onAddWidget: (sectionId: string, widgetData: string) => void;
onDeleteWidget: (widgetId: string) => void; onDeleteWidget: (widgetId: string) => void;
} }
@@ -99,7 +100,7 @@
{#if sections.length === 0} {#if sections.length === 0}
<div class="rounded-xl border border-border bg-card/50 p-8 text-center"> <div class="rounded-xl border border-border bg-card/50 p-8 text-center">
<p class="text-muted-foreground">No sections yet. Add one to get started.</p> <p class="text-muted-foreground">{$t('board.no_sections')}</p>
</div> </div>
{:else} {:else}
<div <div
src/lib/components/layout/Header.svelte
+16 -11
View File
@@ -1,5 +1,7 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import ThemeToggle from './ThemeToggle.svelte'; import ThemeToggle from './ThemeToggle.svelte';
import LanguageSwitcher from './LanguageSwitcher.svelte';
import SearchTrigger from '$lib/components/search/SearchTrigger.svelte'; import SearchTrigger from '$lib/components/search/SearchTrigger.svelte';
import { ui } from '$lib/stores/ui.svelte.js'; import { ui } from '$lib/stores/ui.svelte.js';
import { theme, type BackgroundType } from '$lib/stores/theme.svelte.js'; import { theme, type BackgroundType } from '$lib/stores/theme.svelte.js';
@@ -13,11 +15,11 @@
let showUserMenu = $state(false); let showUserMenu = $state(false);
let showBgMenu = $state(false); let showBgMenu = $state(false);
const bgOptions: { value: BackgroundType; label: string }[] = [ const bgOptions: { value: BackgroundType; labelKey: string }[] = [
{ value: 'mesh', label: 'Mesh Gradient' }, { value: 'mesh', labelKey: 'bg.mesh' },
{ value: 'particles', label: 'Particles' }, { value: 'particles', labelKey: 'bg.particles' },
{ value: 'aurora', label: 'Aurora' }, { value: 'aurora', labelKey: 'bg.aurora' },
{ value: 'none', label: 'None' } { value: 'none', labelKey: 'bg.none' }
]; ];
function handleClickOutside(e: MouseEvent) { function handleClickOutside(e: MouseEvent) {
@@ -42,7 +44,7 @@
type="button" type="button"
onclick={() => ui.toggleSidebar()} onclick={() => ui.toggleSidebar()}
class="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground" class="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
aria-label="Toggle sidebar" aria-label={$t('sidebar.toggle')}
> >
<svg <svg
class="h-5 w-5" class="h-5 w-5"
@@ -72,8 +74,8 @@
type="button" type="button"
onclick={() => (showBgMenu = !showBgMenu)} onclick={() => (showBgMenu = !showBgMenu)}
class="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground" class="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
title="Background effect" title={$t('bg.title')}
aria-label="Change background effect" aria-label={$t('bg.aria_label')}
> >
<svg <svg
class="h-5 w-5" class="h-5 w-5"
@@ -119,7 +121,7 @@
{:else} {:else}
<span class="h-3 w-3"></span> <span class="h-3 w-3"></span>
{/if} {/if}
{opt.label} {$t(opt.labelKey)}
</button> </button>
{/each} {/each}
</div> </div>
@@ -129,6 +131,9 @@
<!-- Theme toggle --> <!-- Theme toggle -->
<ThemeToggle /> <ThemeToggle />
<!-- Language switcher -->
<LanguageSwitcher />
<!-- User menu --> <!-- User menu -->
{#if user} {#if user}
<div class="user-menu-container relative"> <div class="user-menu-container relative">
@@ -175,7 +180,7 @@
<polyline points="16 17 21 12 16 7" /> <polyline points="16 17 21 12 16 7" />
<line x1="21" y1="12" x2="9" y2="12" /> <line x1="21" y1="12" x2="9" y2="12" />
</svg> </svg>
Sign Out {$t('auth.logout')}
</button> </button>
</form> </form>
</div> </div>
@@ -186,7 +191,7 @@
href="/login" href="/login"
class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90" class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
> >
Sign In {$t('auth.login')}
</a> </a>
{/if} {/if}
</header> </header>
src/lib/components/layout/LanguageSwitcher.svelte
+19
View File
@@ -0,0 +1,19 @@
<script lang="ts">
import { locale } from 'svelte-i18n';
import { storeLocale } from '$lib/i18n/index.js';
function toggleLocale() {
const next = $locale === 'ru' ? 'en' : 'ru';
locale.set(next);
storeLocale(next);
}
</script>
<button
type="button"
onclick={toggleLocale}
class="inline-flex items-center justify-center rounded-md px-2 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
title={$locale === 'ru' ? 'Switch to English' : 'Переключить на русский'}
>
{$locale === 'ru' ? 'RU' : 'EN'}
</button>
src/lib/components/layout/MainLayout.svelte
+2 -1
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
import Sidebar from './Sidebar.svelte'; import Sidebar from './Sidebar.svelte';
import Header from './Header.svelte'; import Header from './Header.svelte';
@@ -40,7 +41,7 @@
type="button" type="button"
class="fixed inset-0 z-30 bg-black/50" class="fixed inset-0 z-30 bg-black/50"
onclick={() => ui.closeMobileSidebar()} onclick={() => ui.closeMobileSidebar()}
aria-label="Close sidebar" aria-label={$t('sidebar.close')}
></button> ></button>
{/if} {/if}
src/lib/components/layout/Sidebar.svelte
+13 -12
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import { ui } from '$lib/stores/ui.svelte.js'; import { ui } from '$lib/stores/ui.svelte.js';
import { page } from '$app/stores'; import { page } from '$app/stores';
import DynamicIcon from '$lib/components/ui/DynamicIcon.svelte'; import DynamicIcon from '$lib/components/ui/DynamicIcon.svelte';
@@ -46,10 +47,10 @@
<rect x="14" y="14" width="7" height="7" /> <rect x="14" y="14" width="7" height="7" />
<rect x="3" y="14" width="7" height="7" /> <rect x="3" y="14" width="7" height="7" />
</svg> </svg>
<span class="text-sm font-semibold">App Launcher</span> <span class="text-sm font-semibold">{$t('app_name')}</span>
</a> </a>
{:else} {:else}
<a href="/" class="mx-auto text-sidebar-primary" title="App Launcher"> <a href="/" class="mx-auto text-sidebar-primary" title={$t('app_name')}>
<svg <svg
class="h-6 w-6" class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -75,7 +76,7 @@
<div class="mb-3"> <div class="mb-3">
{#if !collapsed} {#if !collapsed}
<p class="mb-1 px-2 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/50"> <p class="mb-1 px-2 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/50">
Navigation {$t('nav.navigation')}
</p> </p>
{/if} {/if}
@@ -84,7 +85,7 @@
class="flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors {isActive('/boards') class="flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors {isActive('/boards')
? 'bg-sidebar-accent text-sidebar-accent-foreground' ? 'bg-sidebar-accent text-sidebar-accent-foreground'
: 'text-sidebar-foreground hover:bg-sidebar-accent/50'}" : 'text-sidebar-foreground hover:bg-sidebar-accent/50'}"
title={collapsed ? 'Boards' : undefined} title={collapsed ? $t('nav.boards') : undefined}
> >
<svg <svg
class="h-4 w-4 shrink-0" class="h-4 w-4 shrink-0"
@@ -100,7 +101,7 @@
<line x1="3" y1="9" x2="21" y2="9" /> <line x1="3" y1="9" x2="21" y2="9" />
<line x1="9" y1="21" x2="9" y2="9" /> <line x1="9" y1="21" x2="9" y2="9" />
</svg> </svg>
{#if !collapsed}<span>Boards</span>{/if} {#if !collapsed}<span>{$t('nav.boards')}</span>{/if}
</a> </a>
<a <a
@@ -108,7 +109,7 @@
class="flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors {isActive('/apps') class="flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors {isActive('/apps')
? 'bg-sidebar-accent text-sidebar-accent-foreground' ? 'bg-sidebar-accent text-sidebar-accent-foreground'
: 'text-sidebar-foreground hover:bg-sidebar-accent/50'}" : 'text-sidebar-foreground hover:bg-sidebar-accent/50'}"
title={collapsed ? 'Apps' : undefined} title={collapsed ? $t('nav.apps') : undefined}
> >
<svg <svg
class="h-4 w-4 shrink-0" class="h-4 w-4 shrink-0"
@@ -126,7 +127,7 @@
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
/> />
</svg> </svg>
{#if !collapsed}<span>Apps</span>{/if} {#if !collapsed}<span>{$t('nav.apps')}</span>{/if}
</a> </a>
</div> </div>
@@ -137,7 +138,7 @@
<p <p
class="mb-1 px-2 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/50" class="mb-1 px-2 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/50"
> >
Boards {$t('nav.boards')}
</p> </p>
{/if} {/if}
@@ -174,7 +175,7 @@
<p <p
class="mb-1 px-2 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/50" class="mb-1 px-2 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/50"
> >
Admin {$t('nav.admin')}
</p> </p>
{/if} {/if}
@@ -183,7 +184,7 @@
class="flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors {isActive('/admin') class="flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors {isActive('/admin')
? 'bg-sidebar-accent text-sidebar-accent-foreground' ? 'bg-sidebar-accent text-sidebar-accent-foreground'
: 'text-sidebar-foreground hover:bg-sidebar-accent/50'}" : 'text-sidebar-foreground hover:bg-sidebar-accent/50'}"
title={collapsed ? 'Admin Panel' : undefined} title={collapsed ? $t('nav.admin_panel') : undefined}
> >
<svg <svg
class="h-4 w-4 shrink-0" class="h-4 w-4 shrink-0"
@@ -200,7 +201,7 @@
/> />
<circle cx="12" cy="12" r="3" /> <circle cx="12" cy="12" r="3" />
</svg> </svg>
{#if !collapsed}<span>Admin Panel</span>{/if} {#if !collapsed}<span>{$t('nav.admin_panel')}</span>{/if}
</a> </a>
</div> </div>
{/if} {/if}
@@ -213,7 +214,7 @@
type="button" type="button"
onclick={() => ui.toggleSidebar()} onclick={() => ui.toggleSidebar()}
class="flex w-full items-center justify-center rounded-md p-2 text-sidebar-foreground transition-colors hover:bg-sidebar-accent" class="flex w-full items-center justify-center rounded-md p-2 text-sidebar-foreground transition-colors hover:bg-sidebar-accent"
title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'} title={collapsed ? $t('sidebar.expand') : $t('sidebar.collapse')}
> >
<svg <svg
class="h-4 w-4 transition-transform duration-200" class="h-4 w-4 transition-transform duration-200"
src/lib/components/layout/ThemeToggle.svelte
+7 -6
View File
@@ -1,18 +1,19 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import { theme } from '$lib/stores/theme.svelte.js'; import { theme } from '$lib/stores/theme.svelte.js';
const modeIcons: Record<string, { path: string; label: string }> = { const modeIcons: Record<string, { path: string; labelKey: string }> = {
light: { light: {
path: 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z', path: 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z',
label: 'Light' labelKey: 'theme.light'
}, },
dark: { dark: {
path: 'M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z', path: 'M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z',
label: 'Dark' labelKey: 'theme.dark'
}, },
system: { system: {
path: 'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z', path: 'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z',
label: 'System' labelKey: 'theme.system'
} }
}; };
@@ -23,8 +24,8 @@
type="button" type="button"
onclick={() => theme.cycleMode()} onclick={() => theme.cycleMode()}
class="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring" class="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
title="Theme: {currentIcon.label}" title={$t('theme.title', { values: { mode: $t(currentIcon.labelKey) } })}
aria-label="Toggle theme (current: {currentIcon.label})" aria-label={$t('theme.toggle', { values: { mode: $t(currentIcon.labelKey) } })}
> >
<svg <svg
class="h-5 w-5" class="h-5 w-5"
src/lib/components/search/SearchDialog.svelte
+7 -6
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import { search } from '$lib/stores/search.svelte.js'; import { search } from '$lib/stores/search.svelte.js';
import SearchResult from './SearchResult.svelte'; import SearchResult from './SearchResult.svelte';
@@ -33,7 +34,7 @@
<div <div
class="w-full max-w-lg rounded-lg border border-border bg-popover shadow-2xl" class="w-full max-w-lg rounded-lg border border-border bg-popover shadow-2xl"
role="dialog" role="dialog"
aria-label="Search" aria-label={$t('search.placeholder')}
> >
<!-- Input --> <!-- Input -->
<div class="flex items-center gap-2 border-b border-border px-4 py-3"> <div class="flex items-center gap-2 border-b border-border px-4 py-3">
@@ -54,7 +55,7 @@
bind:this={inputEl} bind:this={inputEl}
bind:value={search.query} bind:value={search.query}
type="text" type="text"
placeholder="Search apps and boards..." placeholder={$t('search.placeholder')}
class="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none" class="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
/> />
<kbd <kbd
@@ -76,17 +77,17 @@
<p class="py-6 text-center text-sm text-destructive">{search.error}</p> <p class="py-6 text-center text-sm text-destructive">{search.error}</p>
{:else if search.query.length < 2} {:else if search.query.length < 2}
<p class="py-6 text-center text-sm text-muted-foreground"> <p class="py-6 text-center text-sm text-muted-foreground">
Type at least 2 characters to search {$t('search.min_chars')}
</p> </p>
{:else if search.results.length === 0} {:else if search.results.length === 0}
<p class="py-6 text-center text-sm text-muted-foreground"> <p class="py-6 text-center text-sm text-muted-foreground">
No results for "{search.query}" {$t('search.no_results', { values: { query: search.query } })}
</p> </p>
{:else} {:else}
{#if appResults.length > 0} {#if appResults.length > 0}
<div class="mb-2"> <div class="mb-2">
<p class="mb-1 px-3 text-xs font-medium uppercase tracking-wider text-muted-foreground"> <p class="mb-1 px-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
Apps {$t('search.apps')}
</p> </p>
{#each appResults as result (result.id)} {#each appResults as result (result.id)}
<SearchResult {result} onselect={() => search.close()} /> <SearchResult {result} onselect={() => search.close()} />
@@ -97,7 +98,7 @@
{#if boardResults.length > 0} {#if boardResults.length > 0}
<div> <div>
<p class="mb-1 px-3 text-xs font-medium uppercase tracking-wider text-muted-foreground"> <p class="mb-1 px-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
Boards {$t('search.boards')}
</p> </p>
{#each boardResults as result (result.id)} {#each boardResults as result (result.id)}
<SearchResult {result} onselect={() => search.close()} /> <SearchResult {result} onselect={() => search.close()} />
src/lib/components/search/SearchTrigger.svelte
+3 -2
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import { search } from '$lib/stores/search.svelte.js'; import { search } from '$lib/stores/search.svelte.js';
const isMac = $derived( const isMac = $derived(
@@ -24,10 +25,10 @@
<circle cx="11" cy="11" r="8" /> <circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" /> <line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg> </svg>
<span class="flex-1 text-left">Search...</span> <span class="flex-1 text-left">{$t('search.trigger')}</span>
<kbd <kbd
class="hidden rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground sm:inline" class="hidden rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground sm:inline"
> >
{isMac ? '⌘' : 'Ctrl'}K {isMac ? '\u2318' : 'Ctrl'}K
</kbd> </kbd>
</button> </button>
src/lib/components/section/DraggableSection.svelte
+267 -31
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import { dndzone } from 'svelte-dnd-action'; import { dndzone } from 'svelte-dnd-action';
import DraggableWidget from '$lib/components/widget/DraggableWidget.svelte'; import DraggableWidget from '$lib/components/widget/DraggableWidget.svelte';
@@ -37,7 +38,7 @@
addWidgetSectionId: string | null; addWidgetSectionId: string | null;
onToggleAddWidget: (sectionId: string) => void; onToggleAddWidget: (sectionId: string) => void;
onDeleteSection: (sectionId: string) => void; onDeleteSection: (sectionId: string) => void;
onAddWidget: (sectionId: string, appId: string) => void; onAddWidget: (sectionId: string, widgetData: string) => void;
onDeleteWidget: (widgetId: string) => void; onDeleteWidget: (widgetId: string) => void;
} }
@@ -71,7 +72,104 @@
onWidgetsUpdate(section.id, widgets); onWidgetsUpdate(section.id, widgets);
} }
// Widget form state
let selectedWidgetType = $state('app');
let selectedAppId = $state(''); let selectedAppId = $state('');
// Bookmark fields
let bookmarkUrl = $state('');
let bookmarkLabel = $state('');
let bookmarkIcon = $state('');
let bookmarkDescription = $state('');
// Note fields
let noteContent = $state('');
let noteFormat = $state<'markdown' | 'text'>('markdown');
// Embed fields
let embedUrl = $state('');
let embedHeight = $state(300);
// Status fields
let statusLabel = $state('');
let statusAppIds = $state<string[]>([]);
function resetForm() {
selectedWidgetType = 'app';
selectedAppId = '';
bookmarkUrl = '';
bookmarkLabel = '';
bookmarkIcon = '';
bookmarkDescription = '';
noteContent = '';
noteFormat = 'markdown';
embedUrl = '';
embedHeight = 300;
statusLabel = '';
statusAppIds = [];
}
function handleSubmitWidget() {
let widgetData: Record<string, unknown> = { type: selectedWidgetType };
switch (selectedWidgetType) {
case 'app':
if (!selectedAppId) return;
widgetData.appId = selectedAppId;
break;
case 'bookmark':
if (!bookmarkUrl || !bookmarkLabel) return;
widgetData.url = bookmarkUrl;
widgetData.label = bookmarkLabel;
if (bookmarkIcon) widgetData.icon = bookmarkIcon;
if (bookmarkDescription) widgetData.description = bookmarkDescription;
break;
case 'note':
if (!noteContent) return;
widgetData.content = noteContent;
widgetData.format = noteFormat;
break;
case 'embed':
if (!embedUrl) return;
widgetData.url = embedUrl;
widgetData.height = embedHeight;
break;
case 'status':
if (statusAppIds.length === 0) return;
widgetData.appIds = statusAppIds;
if (statusLabel) widgetData.label = statusLabel;
break;
default:
return;
}
onAddWidget(section.id, JSON.stringify(widgetData));
resetForm();
}
function toggleStatusApp(appId: string) {
if (statusAppIds.includes(appId)) {
statusAppIds = statusAppIds.filter((id) => id !== appId);
} else {
statusAppIds = [...statusAppIds, appId];
}
}
function getWidgetLabel(widget: WidgetData): string {
if (widget.type === 'app' && widget.app) {
return widget.app.name;
}
try {
const cfg = JSON.parse(widget.config || '{}');
if (widget.type === 'bookmark') return cfg.label || 'Bookmark';
if (widget.type === 'note') return (cfg.content || '').substring(0, 40) || 'Note';
if (widget.type === 'embed') return cfg.url || 'Embed';
if (widget.type === 'status') return cfg.label || 'Status';
} catch {
// ignore
}
return `Widget #${widget.order}`;
}
</script> </script>
<div class="rounded-xl border border-border bg-card p-4 shadow-sm"> <div class="rounded-xl border border-border bg-card p-4 shadow-sm">
@@ -102,7 +200,7 @@
</svg> </svg>
</div> </div>
<span class="font-medium text-foreground">{section.title}</span> <span class="font-medium text-foreground">{section.title}</span>
<span class="text-xs text-muted-foreground">Order: {section.order}</span> <span class="text-xs text-muted-foreground">{$t('section.order', { values: { order: section.order } })}</span>
{#if section.icon} {#if section.icon}
<span class="text-xs text-muted-foreground">({section.icon})</span> <span class="text-xs text-muted-foreground">({section.icon})</span>
{/if} {/if}
@@ -113,48 +211,191 @@
onclick={() => onToggleAddWidget(section.id)} onclick={() => onToggleAddWidget(section.id)}
class="rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90" class="rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
> >
Add Widget {$t('widget.add')}
</button> </button>
<button <button
type="button" type="button"
onclick={() => onDeleteSection(section.id)} onclick={() => onDeleteSection(section.id)}
class="rounded-md bg-destructive px-2 py-1 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90" class="rounded-md bg-destructive px-2 py-1 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
> >
Delete {$t('common.delete')}
</button> </button>
</div> </div>
</div> </div>
{#if addWidgetSectionId === section.id} {#if addWidgetSectionId === section.id}
<div class="mb-3 rounded-lg border border-border bg-muted/50 p-3"> <div class="mb-3 rounded-lg border border-border bg-muted/50 p-3">
<div> <!-- Widget Type Selector -->
<label for="widget-app-{section.id}" class="mb-1 block text-sm font-medium text-foreground" <div class="mb-3">
>Select App</label <label for="widget-type-{section.id}" class="mb-1 block text-sm font-medium text-foreground">
> Widget Type
</label>
<select <select
id="widget-app-{section.id}" id="widget-type-{section.id}"
bind:value={selectedAppId} bind:value={selectedWidgetType}
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30" class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
> >
<option value="">Choose an app...</option> <option value="app">App</option>
{#each apps as app (app.id)} <option value="bookmark">Bookmark</option>
<option value={app.id}>{app.name}</option> <option value="note">Note</option>
{/each} <option value="embed">Embed</option>
<option value="status">Status</option>
</select> </select>
</div> </div>
<div class="mt-2">
<!-- Type-specific config forms -->
{#if selectedWidgetType === 'app'}
<div>
<label for="widget-app-{section.id}" class="mb-1 block text-sm font-medium text-foreground">
{$t('widget.select_app')}
</label>
<select
id="widget-app-{section.id}"
bind:value={selectedAppId}
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
>
<option value="">{$t('widget.choose_app')}</option>
{#each apps as app (app.id)}
<option value={app.id}>{app.name}</option>
{/each}
</select>
</div>
{:else if selectedWidgetType === 'bookmark'}
<div class="grid gap-3 sm:grid-cols-2">
<div>
<label for="bm-url-{section.id}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
<input
id="bm-url-{section.id}"
type="url"
bind:value={bookmarkUrl}
placeholder="https://example.com"
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
required
/>
</div>
<div>
<label for="bm-label-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Label</label>
<input
id="bm-label-{section.id}"
type="text"
bind:value={bookmarkLabel}
placeholder="My Bookmark"
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
required
/>
</div>
<div>
<label for="bm-icon-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Icon (optional)</label>
<input
id="bm-icon-{section.id}"
type="text"
bind:value={bookmarkIcon}
placeholder="e.g. an emoji or icon name"
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
/>
</div>
<div>
<label for="bm-desc-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Description (optional)</label>
<input
id="bm-desc-{section.id}"
type="text"
bind:value={bookmarkDescription}
placeholder="A short description"
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
/>
</div>
</div>
{:else if selectedWidgetType === 'note'}
<div class="space-y-3">
<div>
<label for="note-format-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Format</label>
<select
id="note-format-{section.id}"
bind:value={noteFormat}
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
>
<option value="markdown">Markdown</option>
<option value="text">Plain Text</option>
</select>
</div>
<div>
<label for="note-content-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Content</label>
<textarea
id="note-content-{section.id}"
bind:value={noteContent}
rows="4"
placeholder="Write your note here..."
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
required
></textarea>
</div>
</div>
{:else if selectedWidgetType === 'embed'}
<div class="grid gap-3 sm:grid-cols-2">
<div class="sm:col-span-2">
<label for="embed-url-{section.id}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
<input
id="embed-url-{section.id}"
type="url"
bind:value={embedUrl}
placeholder="https://example.com/embed"
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
required
/>
</div>
<div>
<label for="embed-height-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Height (px)</label>
<input
id="embed-height-{section.id}"
type="number"
bind:value={embedHeight}
min="100"
max="2000"
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
/>
</div>
</div>
{:else if selectedWidgetType === 'status'}
<div class="space-y-3">
<div>
<label for="status-label-{section.id}" class="mb-1 block text-sm font-medium text-foreground">Label (optional)</label>
<input
id="status-label-{section.id}"
type="text"
bind:value={statusLabel}
placeholder="e.g. Production Services"
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
/>
</div>
<div>
<span class="mb-1 block text-sm font-medium text-foreground">Select Apps</span>
<div class="max-h-40 space-y-1 overflow-y-auto rounded-lg border border-input bg-background p-2">
{#each apps as app (app.id)}
<label class="flex items-center gap-2 rounded px-2 py-1 text-sm text-foreground hover:bg-accent">
<input
type="checkbox"
checked={statusAppIds.includes(app.id)}
onchange={() => toggleStatusApp(app.id)}
class="h-4 w-4 rounded border-input accent-primary"
/>
{app.name}
</label>
{/each}
</div>
{#if statusAppIds.length > 0}
<p class="mt-1 text-xs text-muted-foreground">{statusAppIds.length} app(s) selected</p>
{/if}
</div>
</div>
{/if}
<div class="mt-3">
<button <button
type="button" type="button"
onclick={() => { onclick={handleSubmitWidget}
if (selectedAppId) {
onAddWidget(section.id, selectedAppId);
selectedAppId = '';
}
}}
disabled={!selectedAppId}
class="rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50" class="rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
> >
Add {$t('common.add')}
</button> </button>
</div> </div>
</div> </div>
@@ -169,7 +410,7 @@
class="min-h-[48px] rounded-lg border-2 border-dashed border-border/50 p-2 transition-colors" class="min-h-[48px] rounded-lg border-2 border-dashed border-border/50 p-2 transition-colors"
> >
<p class="text-center text-sm text-muted-foreground"> <p class="text-center text-sm text-muted-foreground">
No widgets. Drag widgets here or add one above. {$t('widget.no_widgets_dnd')}
</p> </p>
</div> </div>
{:else} {:else}
@@ -185,19 +426,14 @@
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="text-xs font-medium uppercase text-primary">{widget.type}</span> <span class="text-xs font-medium uppercase text-primary">{widget.type}</span>
{#if widget.app} <span class="text-sm text-foreground">{getWidgetLabel(widget)}</span>
<span class="text-sm text-foreground">{widget.app.name}</span>
<span class="text-xs text-muted-foreground">({widget.app.url})</span>
{:else}
<span class="text-sm text-muted-foreground">Widget #{widget.order}</span>
{/if}
</div> </div>
<button <button
type="button" type="button"
onclick={() => onDeleteWidget(widget.id)} onclick={() => onDeleteWidget(widget.id)}
class="rounded-md bg-destructive px-2 py-1 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90" class="rounded-md bg-destructive px-2 py-1 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
> >
Remove {$t('widget.remove')}
</button> </button>
</div> </div>
</DraggableWidget> </DraggableWidget>
src/lib/components/section/Section.svelte
+15 -4
View File
@@ -29,11 +29,22 @@
widgets: WidgetData[]; widgets: WidgetData[];
} }
interface Props { interface AppData {
section: SectionData; id: string;
name: string;
url: string;
icon: string | null;
iconType: string;
description: string | null;
statuses: Array<{ status: string; responseTime: number | null }>;
} }
let { section }: Props = $props(); interface Props {
section: SectionData;
allApps?: AppData[];
}
let { section, allApps = [] }: Props = $props();
let expanded = $state(section.isExpandedByDefault); let expanded = $state(section.isExpandedByDefault);
</script> </script>
@@ -48,7 +59,7 @@
<SectionCollapsible {expanded}> <SectionCollapsible {expanded}>
<div class="px-4 pb-4"> <div class="px-4 pb-4">
<WidgetGrid widgets={section.widgets} /> <WidgetGrid widgets={section.widgets} {allApps} />
</div> </div>
</SectionCollapsible> </SectionCollapsible>
</div> </div>
src/lib/components/widget/BookmarkWidget.svelte
+50
View File
@@ -0,0 +1,50 @@
<script lang="ts">
interface BookmarkConfig {
url: string;
label: string;
icon?: string;
description?: string;
}
interface Props {
config: BookmarkConfig;
}
let { config }: Props = $props();
</script>
<a
href={config.url}
target="_blank"
rel="noopener noreferrer"
class="card-hover group flex flex-col items-center gap-2 rounded-xl border border-border bg-card p-4 text-center transition-colors hover:border-primary/50"
>
<!-- Icon -->
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-muted transition-colors group-hover:bg-accent">
{#if config.icon}
<span class="text-2xl">{config.icon}</span>
{:else}
<span class="text-lg font-bold text-muted-foreground">
{config.label.charAt(0).toUpperCase()}
</span>
{/if}
</div>
<!-- Label -->
<span class="w-full truncate text-sm font-medium text-foreground transition-colors group-hover:text-primary">
{config.label}
</span>
<!-- Description -->
{#if config.description}
<span class="line-clamp-2 w-full text-xs text-muted-foreground">
{config.description}
</span>
{/if}
<!-- Badge -->
<span class="inline-flex items-center gap-1.5 text-xs">
<span class="inline-block h-2 w-2 rounded-full bg-blue-500"></span>
<span class="text-muted-foreground">Bookmark</span>
</span>
</a>
src/lib/components/widget/EmbedWidget.svelte
+50
View File
@@ -0,0 +1,50 @@
<script lang="ts">
interface EmbedConfig {
url: string;
height: number;
sandbox?: string;
}
interface Props {
config: EmbedConfig;
}
let { config }: Props = $props();
let loading = $state(true);
const iframeHeight = $derived(config.height || 300);
const sandboxValue = $derived(config.sandbox || 'allow-scripts allow-same-origin');
function handleLoad() {
loading = false;
}
</script>
<div class="flex flex-col rounded-xl border border-border bg-card">
<div class="relative" style="height: {iframeHeight}px;">
{#if loading}
<div class="absolute inset-0 flex items-center justify-center bg-muted/50">
<div class="flex items-center gap-2 text-sm text-muted-foreground">
<svg
class="h-4 w-4 animate-spin"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
</svg>
Loading...
</div>
</div>
{/if}
<iframe
src={config.url}
title="Embedded content"
sandbox={sandboxValue}
class="h-full w-full rounded-xl border-0"
onload={handleLoad}
></iframe>
</div>
</div>
src/lib/components/widget/NoteWidget.svelte
+42
View File
@@ -0,0 +1,42 @@
<script lang="ts">
import { marked } from 'marked';
interface NoteConfig {
content: string;
format: 'markdown' | 'text';
}
interface Props {
config: NoteConfig;
}
let { config }: Props = $props();
// Configure marked for security
marked.setOptions({
breaks: true,
gfm: true
});
const renderedContent = $derived.by(() => {
if (config.format === 'text') {
return config.content
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/\n/g, '<br>');
}
// Sanitize by stripping script tags and event handlers from markdown output
const raw = marked.parse(config.content, { async: false }) as string;
return raw
.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
.replace(/\s*on\w+\s*=\s*"[^"]*"/gi, '')
.replace(/\s*on\w+\s*=\s*'[^']*'/gi, '');
});
</script>
<div class="flex h-full flex-col rounded-xl border border-border bg-card p-4">
<div class="prose prose-sm prose-invert max-w-none flex-1 overflow-auto text-foreground">
{@html renderedContent}
</div>
</div>
src/lib/components/widget/StatusWidget.svelte
+145
View File
@@ -0,0 +1,145 @@
<script lang="ts">
interface AppData {
id: string;
name: string;
url: string;
icon: string | null;
iconType: string;
description: string | null;
statuses: Array<{ status: string; responseTime: number | null }>;
}
interface StatusConfig {
appIds: string[];
label?: string;
}
interface Props {
config: StatusConfig;
apps: AppData[];
}
let { config, apps }: Props = $props();
// Filter apps that match the configured appIds
const matchedApps = $derived(
config.appIds
.map((id) => apps.find((a) => a.id === id))
.filter((a): a is AppData => a !== undefined)
);
const statusCounts = $derived.by(() => {
const counts = { online: 0, offline: 0, degraded: 0, unknown: 0 };
for (const app of matchedApps) {
const status = app.statuses[0]?.status ?? 'unknown';
if (status in counts) {
counts[status as keyof typeof counts] += 1;
} else {
counts.unknown += 1;
}
}
return counts;
});
const total = $derived(matchedApps.length);
let expanded = $state(false);
</script>
<div class="flex flex-col rounded-xl border border-border bg-card p-4">
<!-- Header -->
<button
type="button"
onclick={() => (expanded = !expanded)}
class="flex w-full items-center justify-between text-left"
>
<span class="text-sm font-medium text-foreground">
{config.label || 'Service Status'}
</span>
<span class="text-xs text-muted-foreground">{total} services</span>
</button>
<!-- Status bar -->
<div class="mt-3 flex gap-1">
{#if statusCounts.online > 0}
<div
class="h-2 rounded-full bg-green-500"
style="flex: {statusCounts.online}"
title="{statusCounts.online} online"
></div>
{/if}
{#if statusCounts.degraded > 0}
<div
class="h-2 rounded-full bg-yellow-500"
style="flex: {statusCounts.degraded}"
title="{statusCounts.degraded} degraded"
></div>
{/if}
{#if statusCounts.offline > 0}
<div
class="h-2 rounded-full bg-red-500"
style="flex: {statusCounts.offline}"
title="{statusCounts.offline} offline"
></div>
{/if}
{#if statusCounts.unknown > 0}
<div
class="h-2 rounded-full bg-gray-500"
style="flex: {statusCounts.unknown}"
title="{statusCounts.unknown} unknown"
></div>
{/if}
</div>
<!-- Summary counts -->
<div class="mt-2 flex flex-wrap gap-3 text-xs">
{#if statusCounts.online > 0}
<span class="flex items-center gap-1">
<span class="inline-block h-2 w-2 rounded-full bg-green-500"></span>
{statusCounts.online} online
</span>
{/if}
{#if statusCounts.degraded > 0}
<span class="flex items-center gap-1">
<span class="inline-block h-2 w-2 rounded-full bg-yellow-500"></span>
{statusCounts.degraded} degraded
</span>
{/if}
{#if statusCounts.offline > 0}
<span class="flex items-center gap-1">
<span class="inline-block h-2 w-2 rounded-full bg-red-500"></span>
{statusCounts.offline} offline
</span>
{/if}
{#if statusCounts.unknown > 0}
<span class="flex items-center gap-1">
<span class="inline-block h-2 w-2 rounded-full bg-gray-500"></span>
{statusCounts.unknown} unknown
</span>
{/if}
</div>
<!-- Expanded: individual app statuses -->
{#if expanded}
<div class="mt-3 space-y-1 border-t border-border pt-3">
{#each matchedApps as app (app.id)}
{@const status = app.statuses[0]?.status ?? 'unknown'}
{@const statusColor =
status === 'online'
? 'bg-green-500'
: status === 'offline'
? 'bg-red-500'
: status === 'degraded'
? 'bg-yellow-500'
: 'bg-gray-500'}
<div class="flex items-center justify-between text-xs">
<span class="text-foreground">{app.name}</span>
<span class="flex items-center gap-1">
<span class="inline-block h-2 w-2 rounded-full {statusColor}"></span>
<span class="text-muted-foreground">{status}</span>
</span>
</div>
{/each}
</div>
{/if}
</div>
src/lib/components/widget/WidgetGrid.svelte
+25 -21
View File
@@ -1,45 +1,49 @@
<script lang="ts"> <script lang="ts">
import AppWidget from './AppWidget.svelte'; import { t } from 'svelte-i18n';
import WidgetRenderer from './WidgetRenderer.svelte';
import WidgetContainer from './WidgetContainer.svelte'; import WidgetContainer from './WidgetContainer.svelte';
interface AppData {
id: string;
name: string;
url: string;
icon: string | null;
iconType: string;
description: string | null;
statuses: Array<{ status: string; responseTime: number | null }>;
}
interface WidgetData { interface WidgetData {
id: string; id: string;
type: string; type: string;
order: number; order: number;
config: string; config: string;
appId: string | null; appId: string | null;
app: { app: AppData | null;
id: string;
name: string;
url: string;
icon: string | null;
iconType: string;
description: string | null;
statuses: Array<{ status: string; responseTime: number | null }>;
} | null;
} }
interface Props { interface Props {
widgets: WidgetData[]; widgets: WidgetData[];
allApps?: AppData[];
} }
let { widgets }: Props = $props(); let { widgets, allApps = [] }: Props = $props();
// Widgets that should span full width
const fullWidthTypes = new Set(['note', 'embed', 'status']);
</script> </script>
{#if widgets.length === 0} {#if widgets.length === 0}
<p class="text-sm text-muted-foreground">No widgets in this section.</p> <p class="text-sm text-muted-foreground">{$t('widget.no_widgets')}</p>
{:else} {:else}
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4"> <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
{#each widgets as widget (widget.id)} {#each widgets as widget (widget.id)}
<WidgetContainer> {@const isFullWidth = fullWidthTypes.has(widget.type)}
{#if widget.type === 'app' && widget.app} <div class={isFullWidth ? 'col-span-2 sm:col-span-3 lg:col-span-4' : ''}>
<AppWidget app={widget.app} /> <WidgetContainer>
{:else} <WidgetRenderer {widget} {allApps} />
<div class="flex h-full items-center justify-center rounded-xl border border-border bg-card p-4"> </WidgetContainer>
<span class="text-xs text-muted-foreground">{widget.type} widget</span> </div>
</div>
{/if}
</WidgetContainer>
{/each} {/each}
</div> </div>
{/if} {/if}
src/lib/components/widget/WidgetRenderer.svelte
+58
View File
@@ -0,0 +1,58 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import AppWidget from './AppWidget.svelte';
import BookmarkWidget from './BookmarkWidget.svelte';
import NoteWidget from './NoteWidget.svelte';
import EmbedWidget from './EmbedWidget.svelte';
import StatusWidget from './StatusWidget.svelte';
interface AppData {
id: string;
name: string;
url: string;
icon: string | null;
iconType: string;
description: string | null;
statuses: Array<{ status: string; responseTime: number | null }>;
}
interface WidgetData {
id: string;
type: string;
order: number;
config: string;
appId: string | null;
app: AppData | null;
}
interface Props {
widget: WidgetData;
allApps?: AppData[];
}
let { widget, allApps = [] }: Props = $props();
const parsedConfig = $derived.by(() => {
try {
return JSON.parse(widget.config || '{}');
} catch {
return {};
}
});
</script>
{#if widget.type === 'app' && widget.app}
<AppWidget app={widget.app} />
{:else if widget.type === 'bookmark'}
<BookmarkWidget config={parsedConfig} />
{:else if widget.type === 'note'}
<NoteWidget config={{ content: parsedConfig.content ?? '', format: parsedConfig.format ?? 'markdown' }} />
{:else if widget.type === 'embed'}
<EmbedWidget config={{ url: parsedConfig.url ?? '', height: parsedConfig.height ?? 300, sandbox: parsedConfig.sandbox }} />
{:else if widget.type === 'status'}
<StatusWidget config={{ appIds: parsedConfig.appIds ?? [], label: parsedConfig.label }} apps={allApps} />
{:else}
<div class="flex h-full items-center justify-center rounded-xl border border-border bg-card p-4">
<span class="text-xs text-muted-foreground">{$t('widget.type', { values: { type: widget.type } })}</span>
</div>
{/if}
src/lib/i18n/en.json
+245
View File
@@ -0,0 +1,245 @@
{
"app_name": "App Launcher",
"app_title": "Web App Launcher",
"nav.navigation": "Navigation",
"nav.boards": "Boards",
"nav.apps": "Apps",
"nav.admin": "Admin",
"nav.admin_panel": "Admin Panel",
"auth.login": "Sign In",
"auth.login_title": "Welcome back",
"auth.login_subtitle": "Sign in to your account",
"auth.login_submit": "Sign In",
"auth.login_submitting": "Signing in...",
"auth.register": "Register",
"auth.register_title": "Create Account",
"auth.register_subtitle": "Get started with App Launcher",
"auth.register_submit": "Create Account",
"auth.register_submitting": "Creating account...",
"auth.email": "Email",
"auth.email_placeholder": "you@example.com",
"auth.password": "Password",
"auth.password_placeholder": "Enter your password",
"auth.password_placeholder_register": "At least 6 characters",
"auth.display_name": "Display Name",
"auth.display_name_placeholder": "Your name",
"auth.logout": "Sign Out",
"auth.oauth_signin": "Sign in with OAuth",
"auth.or": "or",
"auth.no_account": "Don't have an account?",
"auth.have_account": "Already have an account?",
"auth.sign_in_link": "Sign in",
"board.title": "Boards",
"board.boards_available": "{count} board(s) available",
"board.new": "New Board",
"board.edit": "Edit",
"board.edit_board": "Edit Board",
"board.all_boards": "All Boards",
"board.back_to_boards": "Back to Boards",
"board.back_to_board": "Back to Board",
"board.no_boards": "No boards available.",
"board.sign_in_more": "Sign in to see more boards.",
"board.no_sections": "This board has no sections yet.",
"board.default": "Default",
"board.guest": "Guest",
"board.sections_count": "{count} section(s)",
"board.properties": "Board Properties",
"board.save": "Save Board",
"board.create": "Create Board",
"board.creating": "Creating...",
"board.default_board": "Default board",
"board.guest_accessible": "Guest accessible",
"section.title_label": "Title",
"section.icon_label": "Icon",
"section.icon_placeholder": "Optional",
"section.sections": "Sections",
"section.add": "Add Section",
"section.create": "Create Section",
"section.order": "Order: {order}",
"widget.add": "Add Widget",
"widget.select_app": "Select App",
"widget.choose_app": "Choose an app...",
"widget.no_widgets": "No widgets in this section.",
"widget.no_widgets_dnd": "No widgets. Drag widgets here or add one above.",
"widget.type": "{type} widget",
"widget.number": "Widget #{order}",
"widget.remove": "Remove",
"app.title": "App Registry",
"app.apps_registered": "{count} app(s) registered",
"app.add": "Add App",
"app.new": "New App",
"app.no_apps": "No apps registered yet.",
"app.no_apps_hint": "Click \"Add App\" to register your first application.",
"app.all_categories": "All",
"app.name": "Name",
"app.name_placeholder": "My Application",
"app.url": "URL",
"app.url_placeholder": "https://my-app.local:8080",
"app.description": "Description",
"app.description_placeholder": "Brief description of this app",
"app.category": "Category",
"app.category_placeholder": "e.g. Media, Monitoring, Storage",
"app.tags": "Tags",
"app.tags_placeholder": "Comma-separated tags",
"app.icon": "Icon",
"app.icon_lucide": "Lucide Icon",
"app.icon_simple": "Simple Icons",
"app.icon_url": "Image URL",
"app.icon_emoji": "Emoji",
"app.icon_lucide_placeholder": "e.g. globe, server, home",
"app.icon_simple_placeholder": "e.g. github, docker",
"app.icon_url_placeholder": "https://example.com/icon.png",
"app.icon_emoji_placeholder": "e.g. \ud83c\udf10",
"app.icon_preview": "Icon preview",
"app.save": "Save App",
"app.saving": "Saving...",
"app.healthcheck_toggle": "Healthcheck Settings",
"app.healthcheck_show": "Show",
"app.healthcheck_hide": "Hide",
"app.healthcheck_enabled": "Enable Healthcheck",
"app.healthcheck_method": "Method",
"app.healthcheck_expected_status": "Expected Status",
"app.healthcheck_timeout": "Timeout (ms)",
"app.healthcheck_interval": "Interval (seconds)",
"app.icon_board_label": "Icon (Lucide name)",
"admin.panel": "Admin Panel",
"admin.users": "Users",
"admin.groups": "Groups",
"admin.settings": "Settings",
"admin.user_management": "User Management",
"admin.create_user": "Create User",
"admin.new_user": "New User",
"admin.user_column": "User",
"admin.email_column": "Email",
"admin.role_column": "Role",
"admin.provider_column": "Provider",
"admin.groups_column": "Groups",
"admin.actions_column": "Actions",
"admin.role_user": "User",
"admin.role_admin": "Admin",
"admin.select_group": "Select group",
"admin.add_to_group": "+ Add",
"admin.remove_from_group": "Remove from group",
"admin.no_users": "No users found.",
"admin.group_management": "Group Management",
"admin.create_group": "Create Group",
"admin.new_group": "New Group",
"admin.name_column": "Name",
"admin.description_column": "Description",
"admin.members_column": "Members",
"admin.default_column": "Default",
"admin.default_group_hint": "Default group (auto-assign new users)",
"admin.no_groups": "No groups found.",
"admin.yes": "Yes",
"admin.no": "No",
"admin.system_settings": "System Settings",
"admin.settings_description": "Configure global application settings.",
"admin.authentication": "Authentication",
"admin.auth_mode": "Auth Mode",
"admin.auth_local": "Local",
"admin.auth_oauth": "OAuth",
"admin.auth_both": "Both",
"admin.registration_enabled": "Allow user registration",
"admin.oauth_config": "OAuth Configuration",
"admin.oauth_description": "Configure your OIDC provider (e.g. Authentik, Keycloak). Set Auth Mode to \"OAuth\" or \"Both\" above to enable OAuth login.",
"admin.oauth_client_id": "Client ID",
"admin.oauth_client_id_placeholder": "OAuth client ID",
"admin.oauth_client_secret": "Client Secret",
"admin.oauth_client_secret_placeholder": "OAuth client secret",
"admin.oauth_discovery_url": "Discovery URL",
"admin.oauth_discovery_url_placeholder": "https://example.com/.well-known/openid-configuration",
"admin.oauth_test": "Test Connection",
"admin.oauth_testing": "Testing...",
"admin.oauth_connected": "Connected to issuer: {issuer}",
"admin.oauth_network_error": "Network error \u2014 could not reach the server",
"admin.theme_defaults": "Theme Defaults",
"admin.default_theme": "Default Theme",
"admin.default_primary_color": "Default Primary Color",
"admin.healthcheck_defaults": "Healthcheck Defaults",
"admin.healthcheck_defaults_description": "JSON configuration for default healthcheck behavior (interval, timeout, method).",
"admin.healthcheck_defaults_label": "Defaults (JSON)",
"admin.save_settings": "Save Settings",
"admin.saving_settings": "Saving...",
"admin.perm_title": "Grant Permission",
"admin.perm_entity_type": "Entity Type",
"admin.perm_entity": "Entity",
"admin.perm_target_type": "Target Type",
"admin.perm_target": "Target",
"admin.perm_level": "Level",
"admin.perm_board": "Board",
"admin.perm_app": "App",
"admin.perm_user": "User",
"admin.perm_group": "Group",
"admin.perm_view": "View",
"admin.perm_edit": "Edit",
"admin.perm_admin": "Admin",
"admin.perm_grant": "Grant",
"admin.perm_revoke": "Revoke",
"admin.perm_select": "Select...",
"admin.perm_entity_column": "Entity",
"admin.perm_target_column": "Target",
"admin.perm_level_column": "Level",
"admin.perm_action_column": "Action",
"admin.perm_none": "No permissions configured.",
"search.placeholder": "Search apps and boards...",
"search.trigger": "Search...",
"search.min_chars": "Type at least 2 characters to search",
"search.no_results": "No results for \"{query}\"",
"search.apps": "Apps",
"search.boards": "Boards",
"common.save": "Save",
"common.cancel": "Cancel",
"common.delete": "Delete",
"common.create": "Create",
"common.back": "Back",
"common.edit": "Edit",
"common.add": "Add",
"common.confirm": "Confirm?",
"common.yes": "Yes",
"common.no": "No",
"common.name": "Name",
"common.description": "Description",
"common.required": "*",
"status.online": "Online",
"status.offline": "Offline",
"status.degraded": "Degraded",
"status.unknown": "Unknown",
"theme.dark": "Dark",
"theme.light": "Light",
"theme.system": "System",
"theme.toggle": "Toggle theme (current: {mode})",
"theme.title": "Theme: {mode}",
"bg.mesh": "Mesh Gradient",
"bg.particles": "Particles",
"bg.aurora": "Aurora",
"bg.none": "None",
"bg.title": "Background effect",
"bg.aria_label": "Change background effect",
"sidebar.expand": "Expand sidebar",
"sidebar.collapse": "Collapse sidebar",
"sidebar.toggle": "Toggle sidebar",
"sidebar.close": "Close sidebar",
"home.welcome": "Welcome, {name}. No default board is configured yet.",
"home.view_boards": "View Boards",
"home.browse_apps": "Browse Apps",
"language.label": "Language"
}
src/lib/i18n/index.ts
+34
View File
@@ -0,0 +1,34 @@
import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n';
import en from './en.json';
import ru from './ru.json';
const LOCALE_STORAGE_KEY = 'wal-locale';
addMessages('en', en);
addMessages('ru', ru);
function getStoredLocale(): string | null {
if (typeof localStorage === 'undefined') return null;
return localStorage.getItem(LOCALE_STORAGE_KEY);
}
function detectLocale(): string {
const stored = getStoredLocale();
if (stored && (stored === 'en' || stored === 'ru')) {
return stored;
}
const browserLocale = getLocaleFromNavigator() ?? 'en';
return browserLocale.startsWith('ru') ? 'ru' : 'en';
}
export function storeLocale(locale: string): void {
if (typeof localStorage !== 'undefined') {
localStorage.setItem(LOCALE_STORAGE_KEY, locale);
}
}
init({
fallbackLocale: 'en',
initialLocale: detectLocale()
});
src/lib/i18n/ru.json
+245
View File
@@ -0,0 +1,245 @@
{
"app_name": "App Launcher",
"app_title": "Web App Launcher",
"nav.navigation": "\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f",
"nav.boards": "\u0414\u043e\u0441\u043a\u0438",
"nav.apps": "\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f",
"nav.admin": "\u0410\u0434\u043c\u0438\u043d",
"nav.admin_panel": "\u041f\u0430\u043d\u0435\u043b\u044c \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430",
"auth.login": "\u0412\u043e\u0439\u0442\u0438",
"auth.login_title": "\u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c",
"auth.login_subtitle": "\u0412\u043e\u0439\u0434\u0438\u0442\u0435 \u0432 \u0441\u0432\u043e\u0439 \u0430\u043a\u043a\u0430\u0443\u043d\u0442",
"auth.login_submit": "\u0412\u043e\u0439\u0442\u0438",
"auth.login_submitting": "\u0412\u0445\u043e\u0434...",
"auth.register": "\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f",
"auth.register_title": "\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u043a\u043a\u0430\u0443\u043d\u0442",
"auth.register_subtitle": "\u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 App Launcher",
"auth.register_submit": "\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u043a\u043a\u0430\u0443\u043d\u0442",
"auth.register_submitting": "\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430...",
"auth.email": "\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u043f\u043e\u0447\u0442\u0430",
"auth.email_placeholder": "you@example.com",
"auth.password": "\u041f\u0430\u0440\u043e\u043b\u044c",
"auth.password_placeholder": "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0430\u0440\u043e\u043b\u044c",
"auth.password_placeholder_register": "\u041d\u0435 \u043c\u0435\u043d\u0435\u0435 6 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432",
"auth.display_name": "\u0418\u043c\u044f",
"auth.display_name_placeholder": "\u0412\u0430\u0448\u0435 \u0438\u043c\u044f",
"auth.logout": "\u0412\u044b\u0445\u043e\u0434",
"auth.oauth_signin": "\u0412\u043e\u0439\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 OAuth",
"auth.or": "\u0438\u043b\u0438",
"auth.no_account": "\u041d\u0435\u0442 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430?",
"auth.have_account": "\u0423\u0436\u0435 \u0435\u0441\u0442\u044c \u0430\u043a\u043a\u0430\u0443\u043d\u0442?",
"auth.sign_in_link": "\u0412\u043e\u0439\u0442\u0438",
"board.title": "\u0414\u043e\u0441\u043a\u0438",
"board.boards_available": "\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0434\u043e\u0441\u043e\u043a: {count}",
"board.new": "\u041d\u043e\u0432\u0430\u044f \u0434\u043e\u0441\u043a\u0430",
"board.edit": "\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c",
"board.edit_board": "\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043e\u0441\u043a\u0438",
"board.all_boards": "\u0412\u0441\u0435 \u0434\u043e\u0441\u043a\u0438",
"board.back_to_boards": "\u041d\u0430\u0437\u0430\u0434 \u043a \u0434\u043e\u0441\u043a\u0430\u043c",
"board.back_to_board": "\u041d\u0430\u0437\u0430\u0434 \u043a \u0434\u043e\u0441\u043a\u0435",
"board.no_boards": "\u0414\u043e\u0441\u043a\u0438 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u044b.",
"board.sign_in_more": "\u0412\u043e\u0439\u0434\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u043e\u0441\u043e\u043a.",
"board.no_sections": "\u041d\u0430 \u044d\u0442\u043e\u0439 \u0434\u043e\u0441\u043a\u0435 \u043f\u043e\u043a\u0430 \u043d\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432.",
"board.default": "\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e",
"board.guest": "\u0413\u043e\u0441\u0442\u0435\u0432\u0430\u044f",
"board.sections_count": "\u0420\u0430\u0437\u0434\u0435\u043b\u043e\u0432: {count}",
"board.properties": "\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043e\u0441\u043a\u0438",
"board.save": "\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u043e\u0441\u043a\u0443",
"board.create": "\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u043e\u0441\u043a\u0443",
"board.creating": "\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435...",
"board.default_board": "\u0414\u043e\u0441\u043a\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e",
"board.guest_accessible": "\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0433\u043e\u0441\u0442\u044f\u043c",
"section.title_label": "\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a",
"section.icon_label": "\u0418\u043a\u043e\u043d\u043a\u0430",
"section.icon_placeholder": "\u041d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e",
"section.sections": "\u0420\u0430\u0437\u0434\u0435\u043b\u044b",
"section.add": "\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b",
"section.create": "\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b",
"section.order": "\u041f\u043e\u0440\u044f\u0434\u043e\u043a: {order}",
"widget.add": "\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442",
"widget.select_app": "\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435",
"widget.choose_app": "\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435...",
"widget.no_widgets": "\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043d\u0435\u0442 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432.",
"widget.no_widgets_dnd": "\u041d\u0435\u0442 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432. \u041f\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0441\u044e\u0434\u0430 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432\u044b\u0448\u0435.",
"widget.type": "\u0412\u0438\u0434\u0436\u0435\u0442 {type}",
"widget.number": "\u0412\u0438\u0434\u0436\u0435\u0442 #{order}",
"widget.remove": "\u0423\u0434\u0430\u043b\u0438\u0442\u044c",
"app.title": "\u0420\u0435\u0435\u0441\u0442\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439",
"app.apps_registered": "\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439: {count}",
"app.add": "\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435",
"app.new": "\u041d\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435",
"app.no_apps": "\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0435\u0449\u0451 \u043d\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b.",
"app.no_apps_hint": "\u041d\u0430\u0436\u043c\u0438\u0442\u0435 \u00ab\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u00bb, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.",
"app.all_categories": "\u0412\u0441\u0435",
"app.name": "\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435",
"app.name_placeholder": "\u041c\u043e\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435",
"app.url": "URL",
"app.url_placeholder": "https://my-app.local:8080",
"app.description": "\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435",
"app.description_placeholder": "\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f",
"app.category": "\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f",
"app.category_placeholder": "\u043d\u0430\u043f\u0440. \u041c\u0435\u0434\u0438\u0430, \u041c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433, \u0425\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435",
"app.tags": "\u0422\u0435\u0433\u0438",
"app.tags_placeholder": "\u0422\u0435\u0433\u0438 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u044f\u0442\u0443\u044e",
"app.icon": "\u0418\u043a\u043e\u043d\u043a\u0430",
"app.icon_lucide": "Lucide",
"app.icon_simple": "Simple Icons",
"app.icon_url": "URL \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f",
"app.icon_emoji": "\u042d\u043c\u043e\u0434\u0437\u0438",
"app.icon_lucide_placeholder": "\u043d\u0430\u043f\u0440. globe, server, home",
"app.icon_simple_placeholder": "\u043d\u0430\u043f\u0440. github, docker",
"app.icon_url_placeholder": "https://example.com/icon.png",
"app.icon_emoji_placeholder": "\u043d\u0430\u043f\u0440. \ud83c\udf10",
"app.icon_preview": "\u041f\u0440\u0435\u0432\u044c\u044e \u0438\u043a\u043e\u043d\u043a\u0438",
"app.save": "\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c",
"app.saving": "\u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435...",
"app.healthcheck_toggle": "\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f",
"app.healthcheck_show": "\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c",
"app.healthcheck_hide": "\u0421\u043a\u0440\u044b\u0442\u044c",
"app.healthcheck_enabled": "\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f",
"app.healthcheck_method": "\u041c\u0435\u0442\u043e\u0434",
"app.healthcheck_expected_status": "\u041e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0439 \u0441\u0442\u0430\u0442\u0443\u0441",
"app.healthcheck_timeout": "\u0422\u0430\u0439\u043c\u0430\u0443\u0442 (\u043c\u0441)",
"app.healthcheck_interval": "\u0418\u043d\u0442\u0435\u0440\u0432\u0430\u043b (\u0441\u0435\u043a\u0443\u043d\u0434\u044b)",
"app.icon_board_label": "\u0418\u043a\u043e\u043d\u043a\u0430 (Lucide)",
"admin.panel": "\u041f\u0430\u043d\u0435\u043b\u044c \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430",
"admin.users": "\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438",
"admin.groups": "\u0413\u0440\u0443\u043f\u043f\u044b",
"admin.settings": "\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438",
"admin.user_management": "\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438",
"admin.create_user": "\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f",
"admin.new_user": "\u041d\u043e\u0432\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c",
"admin.user_column": "\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c",
"admin.email_column": "\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u043f\u043e\u0447\u0442\u0430",
"admin.role_column": "\u0420\u043e\u043b\u044c",
"admin.provider_column": "\u041f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440",
"admin.groups_column": "\u0413\u0440\u0443\u043f\u043f\u044b",
"admin.actions_column": "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044f",
"admin.role_user": "\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c",
"admin.role_admin": "\u0410\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440",
"admin.select_group": "\u0412\u044b\u0431\u0440\u0430\u0442\u044c \u0433\u0440\u0443\u043f\u043f\u0443",
"admin.add_to_group": "+ \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c",
"admin.remove_from_group": "\u0423\u0434\u0430\u043b\u0438\u0442\u044c \u0438\u0437 \u0433\u0440\u0443\u043f\u043f\u044b",
"admin.no_users": "\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u044b.",
"admin.group_management": "\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0433\u0440\u0443\u043f\u043f\u0430\u043c\u0438",
"admin.create_group": "\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0433\u0440\u0443\u043f\u043f\u0443",
"admin.new_group": "\u041d\u043e\u0432\u0430\u044f \u0433\u0440\u0443\u043f\u043f\u0430",
"admin.name_column": "\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435",
"admin.description_column": "\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435",
"admin.members_column": "\u0423\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438",
"admin.default_column": "\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e",
"admin.default_group_hint": "\u0413\u0440\u0443\u043f\u043f\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e (\u0430\u0432\u0442\u043e-\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c)",
"admin.no_groups": "\u0413\u0440\u0443\u043f\u043f\u044b \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u044b.",
"admin.yes": "\u0414\u0430",
"admin.no": "\u041d\u0435\u0442",
"admin.system_settings": "\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438",
"admin.settings_description": "\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.",
"admin.authentication": "\u0410\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f",
"admin.auth_mode": "\u0420\u0435\u0436\u0438\u043c \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438",
"admin.auth_local": "\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439",
"admin.auth_oauth": "OAuth",
"admin.auth_both": "\u041e\u0431\u0430",
"admin.registration_enabled": "\u0420\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439",
"admin.oauth_config": "\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 OAuth",
"admin.oauth_description": "\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 OIDC (\u043d\u0430\u043f\u0440. Authentik, Keycloak). \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0440\u0435\u0436\u0438\u043c \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u00abOAuth\u00bb \u0438\u043b\u0438 \u00ab\u041e\u0431\u0430\u00bb \u0432\u044b\u0448\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u0445\u043e\u0434 \u0447\u0435\u0440\u0435\u0437 OAuth.",
"admin.oauth_client_id": "Client ID",
"admin.oauth_client_id_placeholder": "OAuth client ID",
"admin.oauth_client_secret": "\u0421\u0435\u043a\u0440\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0430",
"admin.oauth_client_secret_placeholder": "\u0421\u0435\u043a\u0440\u0435\u0442 OAuth \u043a\u043b\u0438\u0435\u043d\u0442\u0430",
"admin.oauth_discovery_url": "Discovery URL",
"admin.oauth_discovery_url_placeholder": "https://example.com/.well-known/openid-configuration",
"admin.oauth_test": "\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435",
"admin.oauth_testing": "\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435...",
"admin.oauth_connected": "\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043e \u043a: {issuer}",
"admin.oauth_network_error": "\u041e\u0448\u0438\u0431\u043a\u0430 \u0441\u0435\u0442\u0438 \u2014 \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0441\u0432\u044f\u0437\u0430\u0442\u044c\u0441\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c",
"admin.theme_defaults": "\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0435\u043c\u044b",
"admin.default_theme": "\u0422\u0435\u043c\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e",
"admin.default_primary_color": "\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0432\u0435\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e",
"admin.healthcheck_defaults": "\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f",
"admin.healthcheck_defaults_description": "JSON-\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e (\u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b, \u0442\u0430\u0439\u043c\u0430\u0443\u0442, \u043c\u0435\u0442\u043e\u0434).",
"admin.healthcheck_defaults_label": "\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 (JSON)",
"admin.save_settings": "\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438",
"admin.saving_settings": "\u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435...",
"admin.perm_title": "\u041d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0430",
"admin.perm_entity_type": "\u0422\u0438\u043f \u043e\u0431\u044a\u0435\u043a\u0442\u0430",
"admin.perm_entity": "\u041e\u0431\u044a\u0435\u043a\u0442",
"admin.perm_target_type": "\u0422\u0438\u043f \u0446\u0435\u043b\u0438",
"admin.perm_target": "\u0426\u0435\u043b\u044c",
"admin.perm_level": "\u0423\u0440\u043e\u0432\u0435\u043d\u044c",
"admin.perm_board": "\u0414\u043e\u0441\u043a\u0430",
"admin.perm_app": "\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435",
"admin.perm_user": "\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c",
"admin.perm_group": "\u0413\u0440\u0443\u043f\u043f\u0430",
"admin.perm_view": "\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440",
"admin.perm_edit": "\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435",
"admin.perm_admin": "\u0410\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440",
"admin.perm_grant": "\u041d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c",
"admin.perm_revoke": "\u041e\u0442\u043e\u0437\u0432\u0430\u0442\u044c",
"admin.perm_select": "\u0412\u044b\u0431\u0440\u0430\u0442\u044c...",
"admin.perm_entity_column": "\u041e\u0431\u044a\u0435\u043a\u0442",
"admin.perm_target_column": "\u0426\u0435\u043b\u044c",
"admin.perm_level_column": "\u0423\u0440\u043e\u0432\u0435\u043d\u044c",
"admin.perm_action_column": "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435",
"admin.perm_none": "\u041f\u0440\u0430\u0432\u0430 \u043d\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u044b.",
"search.placeholder": "\u041f\u043e\u0438\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438 \u0434\u043e\u0441\u043e\u043a...",
"search.trigger": "\u041f\u043e\u0438\u0441\u043a...",
"search.min_chars": "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043c\u0438\u043d\u0438\u043c\u0443\u043c 2 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430",
"search.no_results": "\u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u00ab{query}\u00bb",
"search.apps": "\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f",
"search.boards": "\u0414\u043e\u0441\u043a\u0438",
"common.save": "\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c",
"common.cancel": "\u041e\u0442\u043c\u0435\u043d\u0430",
"common.delete": "\u0423\u0434\u0430\u043b\u0438\u0442\u044c",
"common.create": "\u0421\u043e\u0437\u0434\u0430\u0442\u044c",
"common.back": "\u041d\u0430\u0437\u0430\u0434",
"common.edit": "\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c",
"common.add": "\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c",
"common.confirm": "\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c?",
"common.yes": "\u0414\u0430",
"common.no": "\u041d\u0435\u0442",
"common.name": "\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435",
"common.description": "\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435",
"common.required": "*",
"status.online": "\u041e\u043d\u043b\u0430\u0439\u043d",
"status.offline": "\u041e\u0444\u0444\u043b\u0430\u0439\u043d",
"status.degraded": "\u041d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e",
"status.unknown": "\u041d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e",
"theme.dark": "\u0422\u0451\u043c\u043d\u0430\u044f",
"theme.light": "\u0421\u0432\u0435\u0442\u043b\u0430\u044f",
"theme.system": "\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u0430\u044f",
"theme.toggle": "\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0442\u0435\u043c\u0443 (\u0442\u0435\u043a\u0443\u0449\u0430\u044f: {mode})",
"theme.title": "\u0422\u0435\u043c\u0430: {mode}",
"bg.mesh": "\u041c\u0435\u0448-\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442",
"bg.particles": "\u0427\u0430\u0441\u0442\u0438\u0446\u044b",
"bg.aurora": "\u0421\u0438\u044f\u043d\u0438\u0435",
"bg.none": "\u041d\u0435\u0442",
"bg.title": "\u042d\u0444\u0444\u0435\u043a\u0442 \u0444\u043e\u043d\u0430",
"bg.aria_label": "\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442 \u0444\u043e\u043d\u0430",
"sidebar.expand": "\u0420\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0431\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c",
"sidebar.collapse": "\u0421\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0431\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c",
"sidebar.toggle": "\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0431\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c",
"sidebar.close": "\u0417\u0430\u043a\u0440\u044b\u0442\u044c \u0431\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c",
"home.welcome": "\u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c, {name}. \u0414\u043e\u0441\u043a\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0435\u0449\u0451 \u043d\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0430.",
"home.view_boards": "\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u043e\u0441\u043a\u0438",
"home.browse_apps": "\u041e\u0431\u0437\u043e\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439",
"language.label": "\u042f\u0437\u044b\u043a"
}
src/lib/types/widget.ts
+6 -6
View File
@@ -29,27 +29,27 @@ export interface UpdateWidgetInput {
// Typed config shapes for different widget types // Typed config shapes for different widget types
export interface AppWidgetConfig { export interface AppWidgetConfig {
readonly appId: string; readonly appId: string;
readonly showStatus?: boolean;
readonly openInNewTab?: boolean;
} }
export interface BookmarkWidgetConfig { export interface BookmarkWidgetConfig {
readonly url: string; readonly url: string;
readonly title: string; readonly label: string;
readonly icon?: string; readonly icon?: string;
readonly openInNewTab?: boolean; readonly description?: string;
} }
export interface NoteWidgetConfig { export interface NoteWidgetConfig {
readonly content: string; readonly content: string;
readonly format: 'markdown' | 'text';
} }
export interface EmbedWidgetConfig { export interface EmbedWidgetConfig {
readonly url: string; readonly url: string;
readonly height?: number; readonly height: number;
readonly sandbox?: string;
} }
export interface StatusWidgetConfig { export interface StatusWidgetConfig {
readonly appIds: readonly string[]; readonly appIds: readonly string[];
readonly layout?: 'grid' | 'list'; readonly label?: string;
} }
src/lib/utils/validators.ts
+29
View File
@@ -123,6 +123,35 @@ export const updateSectionSchema = z.object({
isExpandedByDefault: z.boolean().optional() isExpandedByDefault: z.boolean().optional()
}); });
// --- Widget Config Schemas ---
export const appWidgetConfigSchema = z.object({
appId: z.string().min(1, 'App ID is required')
});
export const bookmarkWidgetConfigSchema = z.object({
url: z.string().url('Invalid URL'),
label: z.string().min(1, 'Label is required').max(200),
icon: z.string().max(100).optional(),
description: z.string().max(500).optional()
});
export const noteWidgetConfigSchema = z.object({
content: z.string().max(10000, 'Content too long'),
format: z.enum(['markdown', 'text']).default('markdown')
});
export const embedWidgetConfigSchema = z.object({
url: z.string().url('Invalid URL'),
height: z.number().int().min(100).max(2000).default(300),
sandbox: z.string().max(200).optional()
});
export const statusWidgetConfigSchema = z.object({
appIds: z.array(z.string().min(1)).min(1, 'At least one app is required'),
label: z.string().max(200).optional()
});
// --- Widget --- // --- Widget ---
export const createWidgetSchema = z.object({ export const createWidgetSchema = z.object({
src/routes/+layout.svelte
+1
View File
@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import '../app.css'; import '../app.css';
import '$lib/i18n/index.js';
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
import type { LayoutData } from './$types.js'; import type { LayoutData } from './$types.js';
import MainLayout from '$lib/components/layout/MainLayout.svelte'; import MainLayout from '$lib/components/layout/MainLayout.svelte';
src/routes/+page.svelte
+6 -5
View File
@@ -1,32 +1,33 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js'; import type { PageData } from './$types.js';
let { data }: { data: PageData } = $props(); let { data }: { data: PageData } = $props();
</script> </script>
<svelte:head> <svelte:head>
<title>Web App Launcher</title> <title>{$t('app_title')}</title>
</svelte:head> </svelte:head>
<div class="flex min-h-[60vh] items-center justify-center p-6"> <div class="flex min-h-[60vh] items-center justify-center p-6">
<div class="text-center"> <div class="text-center">
<h1 class="text-4xl font-bold text-foreground">Web App Launcher</h1> <h1 class="text-4xl font-bold text-foreground">{$t('app_title')}</h1>
{#if data.user} {#if data.user}
<p class="mt-4 text-muted-foreground"> <p class="mt-4 text-muted-foreground">
Welcome, {data.user.displayName}. No default board is configured yet. {$t('home.welcome', { values: { name: data.user.displayName } })}
</p> </p>
<div class="mt-6 flex items-center justify-center gap-3"> <div class="mt-6 flex items-center justify-center gap-3">
<a <a
href="/boards" href="/boards"
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90" class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
> >
View Boards {$t('home.view_boards')}
</a> </a>
<a <a
href="/apps" href="/apps"
class="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-accent" class="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-accent"
> >
Browse Apps {$t('home.browse_apps')}
</a> </a>
</div> </div>
{/if} {/if}
src/routes/admin/+layout.svelte
+9 -8
View File
@@ -1,15 +1,16 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
import type { LayoutData } from './$types.js'; import type { LayoutData } from './$types.js';
import { page } from '$app/stores'; import { page } from '$app/stores';
let { data, children }: { data: LayoutData; children: Snippet } = $props(); let { data, children }: { data: LayoutData; children: Snippet } = $props();
const navItems = [ const navItems = $derived([
{ href: '/admin/users', label: 'Users' }, { href: '/admin/users', labelKey: 'admin.users' },
{ href: '/admin/groups', label: 'Groups' }, { href: '/admin/groups', labelKey: 'admin.groups' },
{ href: '/admin/settings', label: 'Settings' } { href: '/admin/settings', labelKey: 'admin.settings' }
] as const; ]);
function isActive(href: string): boolean { function isActive(href: string): boolean {
return $page.url.pathname === href; return $page.url.pathname === href;
@@ -20,7 +21,7 @@
<div class="mx-auto max-w-6xl"> <div class="mx-auto max-w-6xl">
<!-- Admin header --> <!-- Admin header -->
<div class="mb-6 flex flex-wrap items-center gap-4 rounded-xl border border-border bg-card p-4 shadow-sm"> <div class="mb-6 flex flex-wrap items-center gap-4 rounded-xl border border-border bg-card p-4 shadow-sm">
<span class="text-sm font-semibold text-foreground">Admin Panel</span> <span class="text-sm font-semibold text-foreground">{$t('admin.panel')}</span>
<div class="flex gap-1"> <div class="flex gap-1">
{#each navItems as item (item.href)} {#each navItems as item (item.href)}
<a <a
@@ -29,12 +30,12 @@
? 'bg-primary text-primary-foreground' ? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-accent hover:text-foreground'}" : 'text-muted-foreground hover:bg-accent hover:text-foreground'}"
> >
{item.label} {$t(item.labelKey)}
</a> </a>
{/each} {/each}
</div> </div>
<div class="ml-auto text-xs text-muted-foreground"> <div class="ml-auto text-xs text-muted-foreground">
{data.user.displayName} (admin) {data.user.displayName} ({$t('admin.role_admin').toLowerCase()})
</div> </div>
</div> </div>
src/routes/admin/groups/+page.svelte
+9 -8
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js'; import type { PageData } from './$types.js';
import GroupTable from '$lib/components/admin/GroupTable.svelte'; import GroupTable from '$lib/components/admin/GroupTable.svelte';
import { superForm } from 'sveltekit-superforms/client'; import { superForm } from 'sveltekit-superforms/client';
@@ -18,28 +19,28 @@
</script> </script>
<svelte:head> <svelte:head>
<title>Group Management — Admin</title> <title>{$t('admin.group_management')} — {$t('admin.panel')}</title>
</svelte:head> </svelte:head>
<div> <div>
<div class="mb-6 flex items-center justify-between"> <div class="mb-6 flex items-center justify-between">
<h1 class="text-2xl font-bold text-card-foreground">Group Management</h1> <h1 class="text-2xl font-bold text-card-foreground">{$t('admin.group_management')}</h1>
<button <button
type="button" type="button"
onclick={() => (showCreateForm = !showCreateForm)} onclick={() => (showCreateForm = !showCreateForm)}
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring" class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring"
> >
{showCreateForm ? 'Cancel' : 'Create Group'} {showCreateForm ? $t('common.cancel') : $t('admin.create_group')}
</button> </button>
</div> </div>
{#if showCreateForm} {#if showCreateForm}
<div class="mb-6 rounded-lg border border-border bg-card p-6"> <div class="mb-6 rounded-lg border border-border bg-card p-6">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">New Group</h2> <h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('admin.new_group')}</h2>
<form method="POST" action="?/create" use:enhance class="space-y-4"> <form method="POST" action="?/create" use:enhance class="space-y-4">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2"> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div> <div>
<label for="name" class="mb-1 block text-sm font-medium text-foreground">Name</label> <label for="name" class="mb-1 block text-sm font-medium text-foreground">{$t('common.name')}</label>
<input <input
id="name" id="name"
name="name" name="name"
@@ -51,7 +52,7 @@
{#if $errors.name}<span class="text-xs text-destructive">{$errors.name}</span>{/if} {#if $errors.name}<span class="text-xs text-destructive">{$errors.name}</span>{/if}
</div> </div>
<div> <div>
<label for="description" class="mb-1 block text-sm font-medium text-foreground">Description</label> <label for="description" class="mb-1 block text-sm font-medium text-foreground">{$t('common.description')}</label>
<input <input
id="description" id="description"
name="description" name="description"
@@ -68,7 +69,7 @@
bind:checked={$form.isDefault} bind:checked={$form.isDefault}
class="h-4 w-4 rounded border-input" class="h-4 w-4 rounded border-input"
/> />
<label for="isDefault" class="text-sm font-medium text-foreground">Default group (auto-assign new users)</label> <label for="isDefault" class="text-sm font-medium text-foreground">{$t('admin.default_group_hint')}</label>
</div> </div>
</div> </div>
{#if $errors._errors} {#if $errors._errors}
@@ -78,7 +79,7 @@
type="submit" type="submit"
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90" class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
> >
Create Group {$t('admin.create_group')}
</button> </button>
</form> </form>
</div> </div>
src/routes/admin/settings/+page.svelte
+4 -3
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js'; import type { PageData } from './$types.js';
import SettingsForm from '$lib/components/admin/SettingsForm.svelte'; import SettingsForm from '$lib/components/admin/SettingsForm.svelte';
@@ -6,13 +7,13 @@
</script> </script>
<svelte:head> <svelte:head>
<title>System Settings — Admin</title> <title>{$t('admin.system_settings')} — {$t('admin.panel')}</title>
</svelte:head> </svelte:head>
<div> <div>
<div class="mb-6"> <div class="mb-6">
<h1 class="text-2xl font-bold text-card-foreground">System Settings</h1> <h1 class="text-2xl font-bold text-card-foreground">{$t('admin.system_settings')}</h1>
<p class="mt-1 text-sm text-muted-foreground">Configure global application settings.</p> <p class="mt-1 text-sm text-muted-foreground">{$t('admin.settings_description')}</p>
</div> </div>
<SettingsForm form={data.form} /> <SettingsForm form={data.form} />
src/routes/admin/users/+page.svelte
+12 -11
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js'; import type { PageData } from './$types.js';
import UserTable from '$lib/components/admin/UserTable.svelte'; import UserTable from '$lib/components/admin/UserTable.svelte';
import { superForm } from 'sveltekit-superforms/client'; import { superForm } from 'sveltekit-superforms/client';
@@ -18,28 +19,28 @@
</script> </script>
<svelte:head> <svelte:head>
<title>User Management — Admin</title> <title>{$t('admin.user_management')} — {$t('admin.panel')}</title>
</svelte:head> </svelte:head>
<div> <div>
<div class="mb-6 flex items-center justify-between"> <div class="mb-6 flex items-center justify-between">
<h1 class="text-2xl font-bold text-card-foreground">User Management</h1> <h1 class="text-2xl font-bold text-card-foreground">{$t('admin.user_management')}</h1>
<button <button
type="button" type="button"
onclick={() => (showCreateForm = !showCreateForm)} onclick={() => (showCreateForm = !showCreateForm)}
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring" class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring"
> >
{showCreateForm ? 'Cancel' : 'Create User'} {showCreateForm ? $t('common.cancel') : $t('admin.create_user')}
</button> </button>
</div> </div>
{#if showCreateForm} {#if showCreateForm}
<div class="mb-6 rounded-lg border border-border bg-card p-6"> <div class="mb-6 rounded-lg border border-border bg-card p-6">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">New User</h2> <h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('admin.new_user')}</h2>
<form method="POST" action="?/create" use:enhance class="space-y-4"> <form method="POST" action="?/create" use:enhance class="space-y-4">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2"> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div> <div>
<label for="email" class="mb-1 block text-sm font-medium text-foreground">Email</label> <label for="email" class="mb-1 block text-sm font-medium text-foreground">{$t('auth.email')}</label>
<input <input
id="email" id="email"
name="email" name="email"
@@ -51,7 +52,7 @@
{#if $errors.email}<span class="text-xs text-destructive">{$errors.email}</span>{/if} {#if $errors.email}<span class="text-xs text-destructive">{$errors.email}</span>{/if}
</div> </div>
<div> <div>
<label for="displayName" class="mb-1 block text-sm font-medium text-foreground">Display Name</label> <label for="displayName" class="mb-1 block text-sm font-medium text-foreground">{$t('auth.display_name')}</label>
<input <input
id="displayName" id="displayName"
name="displayName" name="displayName"
@@ -63,7 +64,7 @@
{#if $errors.displayName}<span class="text-xs text-destructive">{$errors.displayName}</span>{/if} {#if $errors.displayName}<span class="text-xs text-destructive">{$errors.displayName}</span>{/if}
</div> </div>
<div> <div>
<label for="password" class="mb-1 block text-sm font-medium text-foreground">Password</label> <label for="password" class="mb-1 block text-sm font-medium text-foreground">{$t('auth.password')}</label>
<input <input
id="password" id="password"
name="password" name="password"
@@ -74,15 +75,15 @@
{#if $errors.password}<span class="text-xs text-destructive">{$errors.password}</span>{/if} {#if $errors.password}<span class="text-xs text-destructive">{$errors.password}</span>{/if}
</div> </div>
<div> <div>
<label for="role" class="mb-1 block text-sm font-medium text-foreground">Role</label> <label for="role" class="mb-1 block text-sm font-medium text-foreground">{$t('admin.role_column')}</label>
<select <select
id="role" id="role"
name="role" name="role"
bind:value={$form.role} bind:value={$form.role}
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground" class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
> >
<option value="user">User</option> <option value="user">{$t('admin.role_user')}</option>
<option value="admin">Admin</option> <option value="admin">{$t('admin.role_admin')}</option>
</select> </select>
</div> </div>
</div> </div>
@@ -93,7 +94,7 @@
type="submit" type="submit"
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90" class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
> >
Create User {$t('admin.create_user')}
</button> </button>
</form> </form>
</div> </div>
src/routes/apps/+page.svelte
+9 -8
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js'; import type { PageData } from './$types.js';
import AppCard from '$lib/components/app/AppCard.svelte'; import AppCard from '$lib/components/app/AppCard.svelte';
import AppForm from '$lib/components/app/AppForm.svelte'; import AppForm from '$lib/components/app/AppForm.svelte';
@@ -9,16 +10,16 @@
</script> </script>
<svelte:head> <svelte:head>
<title>Apps — Web App Launcher</title> <title>{$t('app.title')} — {$t('app_title')}</title>
</svelte:head> </svelte:head>
<div class="p-6"> <div class="p-6">
<div class="mx-auto max-w-6xl"> <div class="mx-auto max-w-6xl">
<div class="mb-6 flex items-center justify-between"> <div class="mb-6 flex items-center justify-between">
<div> <div>
<h1 class="text-2xl font-bold text-foreground">App Registry</h1> <h1 class="text-2xl font-bold text-foreground">{$t('app.title')}</h1>
<p class="mt-1 text-sm text-muted-foreground"> <p class="mt-1 text-sm text-muted-foreground">
{data.apps.length} app{data.apps.length === 1 ? '' : 's'} registered {$t('app.apps_registered', { values: { count: data.apps.length } })}
</p> </p>
</div> </div>
<button <button
@@ -26,13 +27,13 @@
onclick={() => (showForm = !showForm)} onclick={() => (showForm = !showForm)}
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring"
> >
{showForm ? 'Cancel' : 'Add App'} {showForm ? $t('common.cancel') : $t('app.add')}
</button> </button>
</div> </div>
{#if showForm} {#if showForm}
<div class="mb-6 rounded-xl border border-border bg-card p-6 shadow-sm"> <div class="mb-6 rounded-xl border border-border bg-card p-6 shadow-sm">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">New App</h2> <h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('app.new')}</h2>
<AppForm form={data.form} action="?/create" /> <AppForm form={data.form} action="?/create" />
</div> </div>
{/if} {/if}
@@ -43,7 +44,7 @@
href="/apps" href="/apps"
class="rounded-full border border-border px-3 py-1 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground" class="rounded-full border border-border px-3 py-1 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
> >
All {$t('app.all_categories')}
</a> </a>
{#each data.categories as category (category)} {#each data.categories as category (category)}
<a <a
@@ -72,8 +73,8 @@
<line x1="12" y1="8" x2="12" y2="12" /> <line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" /> <line x1="12" y1="16" x2="12.01" y2="16" />
</svg> </svg>
<p class="text-lg">No apps registered yet.</p> <p class="text-lg">{$t('app.no_apps')}</p>
<p class="mt-1 text-sm">Click "Add App" to register your first application.</p> <p class="mt-1 text-sm">{$t('app.no_apps_hint')}</p>
</div> </div>
{:else} {:else}
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
src/routes/boards/+page.svelte
+7 -6
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js'; import type { PageData } from './$types.js';
import BoardCard from '$lib/components/board/BoardCard.svelte'; import BoardCard from '$lib/components/board/BoardCard.svelte';
@@ -6,16 +7,16 @@
</script> </script>
<svelte:head> <svelte:head>
<title>Boards — Web App Launcher</title> <title>{$t('board.title')} — {$t('app_title')}</title>
</svelte:head> </svelte:head>
<div class="p-6"> <div class="p-6">
<div class="mx-auto max-w-6xl"> <div class="mx-auto max-w-6xl">
<div class="mb-8 flex items-center justify-between"> <div class="mb-8 flex items-center justify-between">
<div> <div>
<h1 class="text-3xl font-bold text-foreground">Boards</h1> <h1 class="text-3xl font-bold text-foreground">{$t('board.title')}</h1>
<p class="mt-1 text-sm text-muted-foreground"> <p class="mt-1 text-sm text-muted-foreground">
{data.boards.length} board{data.boards.length === 1 ? '' : 's'} available {$t('board.boards_available', { values: { count: data.boards.length } })}
</p> </p>
</div> </div>
@@ -24,7 +25,7 @@
href="/boards/new" href="/boards/new"
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
> >
New Board {$t('board.new')}
</a> </a>
{/if} {/if}
</div> </div>
@@ -45,9 +46,9 @@
<line x1="3" y1="9" x2="21" y2="9" /> <line x1="3" y1="9" x2="21" y2="9" />
<line x1="9" y1="21" x2="9" y2="9" /> <line x1="9" y1="21" x2="9" y2="9" />
</svg> </svg>
<p class="text-muted-foreground">No boards available.</p> <p class="text-muted-foreground">{$t('board.no_boards')}</p>
{#if data.isGuest} {#if data.isGuest}
<p class="mt-2 text-sm text-muted-foreground/70">Sign in to see more boards.</p> <p class="mt-2 text-sm text-muted-foreground/70">{$t('board.sign_in_more')}</p>
{/if} {/if}
</div> </div>
{:else} {:else}
src/routes/boards/[boardId]/+page.server.ts
+6 -2
View File
@@ -1,6 +1,7 @@
import { error } from '@sveltejs/kit'; import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types.js'; import type { PageServerLoad } from './$types.js';
import * as boardService from '$lib/server/services/boardService.js'; import * as boardService from '$lib/server/services/boardService.js';
import * as appService from '$lib/server/services/appService.js';
import * as permissionService from '$lib/server/services/permissionService.js'; import * as permissionService from '$lib/server/services/permissionService.js';
import { EntityType, PermissionLevel, UserRole } from '$lib/utils/constants.js'; import { EntityType, PermissionLevel, UserRole } from '$lib/utils/constants.js';
import { isBoardGuestAccessible } from '$lib/server/middleware/guestAccess.js'; import { isBoardGuestAccessible } from '$lib/server/middleware/guestAccess.js';
@@ -32,7 +33,10 @@ export const load: PageServerLoad = async ({ params, locals }) => {
try { try {
// findBoardById includes sections -> widgets -> app -> statuses // findBoardById includes sections -> widgets -> app -> statuses
const board = await boardService.findBoardById(boardId); const [board, allApps] = await Promise.all([
boardService.findBoardById(boardId),
appService.findAll()
]);
// Determine if user can edit this board // Determine if user can edit this board
let canEdit = false; let canEdit = false;
@@ -50,7 +54,7 @@ export const load: PageServerLoad = async ({ params, locals }) => {
} }
} }
return { board, canEdit }; return { board, canEdit, allApps };
} catch (err) { } catch (err) {
const message = err instanceof Error ? err.message : 'Board not found'; const message = err instanceof Error ? err.message : 'Board not found';
if (message.includes('not found')) { if (message.includes('not found')) {
src/routes/boards/[boardId]/+page.svelte
+3 -2
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js'; import type { PageData } from './$types.js';
import Board from '$lib/components/board/Board.svelte'; import Board from '$lib/components/board/Board.svelte';
import BoardHeader from '$lib/components/board/BoardHeader.svelte'; import BoardHeader from '$lib/components/board/BoardHeader.svelte';
@@ -7,7 +8,7 @@
</script> </script>
<svelte:head> <svelte:head>
<title>{data.board.name} — Web App Launcher</title> <title>{data.board.name} — {$t('app_title')}</title>
</svelte:head> </svelte:head>
<div class="p-6"> <div class="p-6">
@@ -20,6 +21,6 @@
canEdit={data.canEdit} canEdit={data.canEdit}
/> />
<Board sections={data.board.sections} /> <Board sections={data.board.sections} allApps={data.allApps} />
</div> </div>
</div> </div>
src/routes/boards/[boardId]/edit/+page.server.ts
+12 -3
View File
@@ -152,16 +152,25 @@ export const actions: Actions = {
requireAuth(event); requireAuth(event);
const formData = await event.request.formData(); const formData = await event.request.formData();
const sectionId = formData.get('sectionId') as string; const sectionId = formData.get('sectionId') as string;
const appId = (formData.get('appId') as string) || undefined;
const type = (formData.get('type') as string) || 'app'; const type = (formData.get('type') as string) || 'app';
const appId = (formData.get('appId') as string) || undefined;
const configJson = (formData.get('configJson') as string) || undefined;
const config = appId ? JSON.stringify({ appId }) : '{}'; // Build config based on widget type
let config: string;
if (type === 'app' && appId) {
config = JSON.stringify({ appId });
} else if (configJson) {
config = configJson;
} else {
config = '{}';
}
const data = { const data = {
sectionId, sectionId,
type, type,
config, config,
appId appId: type === 'app' ? appId : undefined
}; };
const parsed = createWidgetSchema.safeParse(data); const parsed = createWidgetSchema.safeParse(data);
src/routes/boards/[boardId]/edit/+page.svelte
+56 -19
View File
@@ -1,8 +1,10 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js'; import type { PageData } from './$types.js';
import { enhance } from '$app/forms'; import { enhance } from '$app/forms';
import { invalidateAll } from '$app/navigation'; import { invalidateAll } from '$app/navigation';
import DraggableBoard from '$lib/components/board/DraggableBoard.svelte'; import DraggableBoard from '$lib/components/board/DraggableBoard.svelte';
import { WidgetType } from '$lib/utils/constants.js';
let { data }: { data: PageData } = $props(); let { data }: { data: PageData } = $props();
@@ -28,11 +30,46 @@
} }
} }
async function handleAddWidget(sectionId: string, appId: string) { async function handleAddWidget(sectionId: string, widgetData: string) {
// widgetData is a JSON string with type and type-specific fields
let parsed: Record<string, unknown>;
try {
parsed = JSON.parse(widgetData);
} catch {
// Legacy: treat as appId directly
parsed = { type: 'app', appId: widgetData };
}
const formData = new FormData(); const formData = new FormData();
formData.set('sectionId', sectionId); formData.set('sectionId', sectionId);
formData.set('type', 'app'); formData.set('type', (parsed.type as string) || 'app');
formData.set('appId', appId);
if (parsed.type === 'app' && parsed.appId) {
formData.set('appId', parsed.appId as string);
} else if (parsed.type === 'bookmark') {
formData.set('configJson', JSON.stringify({
url: parsed.url,
label: parsed.label,
icon: parsed.icon || undefined,
description: parsed.description || undefined
}));
} else if (parsed.type === 'note') {
formData.set('configJson', JSON.stringify({
content: parsed.content,
format: parsed.format || 'markdown'
}));
} else if (parsed.type === 'embed') {
formData.set('configJson', JSON.stringify({
url: parsed.url,
height: Number(parsed.height) || 300,
sandbox: parsed.sandbox || undefined
}));
} else if (parsed.type === 'status') {
formData.set('configJson', JSON.stringify({
appIds: parsed.appIds,
label: parsed.label || undefined
}));
}
try { try {
await fetch(`?/addWidget`, { await fetch(`?/addWidget`, {
@@ -63,28 +100,28 @@
</script> </script>
<svelte:head> <svelte:head>
<title>Edit: {data.board.name}</title> <title>{$t('board.edit_board')}: {data.board.name}</title>
</svelte:head> </svelte:head>
<div class="p-6"> <div class="p-6">
<div class="mx-auto max-w-4xl"> <div class="mx-auto max-w-4xl">
<div class="mb-6 flex items-center justify-between"> <div class="mb-6 flex items-center justify-between">
<h1 class="text-2xl font-bold text-foreground">Edit Board</h1> <h1 class="text-2xl font-bold text-foreground">{$t('board.edit_board')}</h1>
<a <a
href="/boards/{data.board.id}" href="/boards/{data.board.id}"
class="rounded-lg border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-accent" class="rounded-lg border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-accent"
> >
Back to Board {$t('board.back_to_board')}
</a> </a>
</div> </div>
<!-- Board Properties --> <!-- Board Properties -->
<section class="mb-8 rounded-xl border border-border bg-card p-6 shadow-sm"> <section class="mb-8 rounded-xl border border-border bg-card p-6 shadow-sm">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">Board Properties</h2> <h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('board.properties')}</h2>
<form method="POST" action="?/updateBoard" use:enhance> <form method="POST" action="?/updateBoard" use:enhance>
<div class="grid gap-4 sm:grid-cols-2"> <div class="grid gap-4 sm:grid-cols-2">
<div> <div>
<label for="board-name" class="mb-1 block text-sm font-medium text-foreground">Name</label> <label for="board-name" class="mb-1 block text-sm font-medium text-foreground">{$t('common.name')}</label>
<input <input
id="board-name" id="board-name"
name="name" name="name"
@@ -95,7 +132,7 @@
/> />
</div> </div>
<div> <div>
<label for="board-icon" class="mb-1 block text-sm font-medium text-foreground">Icon</label> <label for="board-icon" class="mb-1 block text-sm font-medium text-foreground">{$t('app.icon')}</label>
<input <input
id="board-icon" id="board-icon"
name="icon" name="icon"
@@ -106,7 +143,7 @@
/> />
</div> </div>
<div class="sm:col-span-2"> <div class="sm:col-span-2">
<label for="board-desc" class="mb-1 block text-sm font-medium text-foreground">Description</label> <label for="board-desc" class="mb-1 block text-sm font-medium text-foreground">{$t('common.description')}</label>
<textarea <textarea
id="board-desc" id="board-desc"
name="description" name="description"
@@ -122,7 +159,7 @@
checked={data.board.isDefault} checked={data.board.isDefault}
class="h-4 w-4 rounded border-input accent-primary" class="h-4 w-4 rounded border-input accent-primary"
/> />
Default Board {$t('board.default_board')}
</label> </label>
<label class="flex items-center gap-2 text-sm text-foreground"> <label class="flex items-center gap-2 text-sm text-foreground">
<input <input
@@ -131,7 +168,7 @@
checked={data.board.isGuestAccessible} checked={data.board.isGuestAccessible}
class="h-4 w-4 rounded border-input accent-primary" class="h-4 w-4 rounded border-input accent-primary"
/> />
Guest Accessible {$t('board.guest_accessible')}
</label> </label>
</div> </div>
</div> </div>
@@ -140,7 +177,7 @@
type="submit" type="submit"
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
> >
Save Board {$t('board.save')}
</button> </button>
</div> </div>
</form> </form>
@@ -149,13 +186,13 @@
<!-- Sections with Drag-and-Drop --> <!-- Sections with Drag-and-Drop -->
<section class="mb-8"> <section class="mb-8">
<div class="mb-4 flex items-center justify-between"> <div class="mb-4 flex items-center justify-between">
<h2 class="text-lg font-semibold text-foreground">Sections</h2> <h2 class="text-lg font-semibold text-foreground">{$t('section.sections')}</h2>
<button <button
type="button" type="button"
onclick={() => (showAddSection = !showAddSection)} onclick={() => (showAddSection = !showAddSection)}
class="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90" class="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
> >
{showAddSection ? 'Cancel' : 'Add Section'} {showAddSection ? $t('common.cancel') : $t('section.add')}
</button> </button>
</div> </div>
@@ -173,7 +210,7 @@
> >
<div class="grid gap-3 sm:grid-cols-2"> <div class="grid gap-3 sm:grid-cols-2">
<div> <div>
<label for="section-title" class="mb-1 block text-sm font-medium text-foreground">Title</label> <label for="section-title" class="mb-1 block text-sm font-medium text-foreground">{$t('section.title_label')}</label>
<input <input
id="section-title" id="section-title"
name="title" name="title"
@@ -183,13 +220,13 @@
/> />
</div> </div>
<div> <div>
<label for="section-icon" class="mb-1 block text-sm font-medium text-foreground">Icon</label> <label for="section-icon" class="mb-1 block text-sm font-medium text-foreground">{$t('section.icon_label')}</label>
<input <input
id="section-icon" id="section-icon"
name="icon" name="icon"
type="text" type="text"
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30" class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
placeholder="Optional" placeholder={$t('section.icon_placeholder')}
/> />
</div> </div>
</div> </div>
@@ -198,7 +235,7 @@
type="submit" type="submit"
class="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90" class="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
> >
Create Section {$t('section.create')}
</button> </button>
</div> </div>
</form> </form>
src/routes/boards/new/+page.svelte
+12 -11
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js'; import type { PageData } from './$types.js';
import { superForm } from 'sveltekit-superforms'; import { superForm } from 'sveltekit-superforms';
@@ -7,22 +8,22 @@
</script> </script>
<svelte:head> <svelte:head>
<title>New Board — Web App Launcher</title> <title>{$t('board.new')} — {$t('app_title')}</title>
</svelte:head> </svelte:head>
<div class="p-6"> <div class="p-6">
<div class="mx-auto max-w-2xl"> <div class="mx-auto max-w-2xl">
<div class="mb-6"> <div class="mb-6">
<a href="/boards" class="text-sm text-muted-foreground hover:text-foreground"> <a href="/boards" class="text-sm text-muted-foreground hover:text-foreground">
&larr; Back to Boards &larr; {$t('board.back_to_boards')}
</a> </a>
</div> </div>
<h1 class="mb-6 text-3xl font-bold text-foreground">New Board</h1> <h1 class="mb-6 text-3xl font-bold text-foreground">{$t('board.new')}</h1>
<form method="POST" use:enhance class="space-y-4 rounded-xl border border-border bg-card p-6"> <form method="POST" use:enhance class="space-y-4 rounded-xl border border-border bg-card p-6">
<div> <div>
<label for="name" class="mb-1 block text-sm font-medium text-foreground">Name</label> <label for="name" class="mb-1 block text-sm font-medium text-foreground">{$t('common.name')}</label>
<input <input
id="name" id="name"
name="name" name="name"
@@ -36,19 +37,19 @@
</div> </div>
<div> <div>
<label for="description" class="mb-1 block text-sm font-medium text-foreground">Description</label> <label for="description" class="mb-1 block text-sm font-medium text-foreground">{$t('common.description')}</label>
<input <input
id="description" id="description"
name="description" name="description"
type="text" type="text"
bind:value={$form.description} bind:value={$form.description}
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary" class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
placeholder="Optional description" placeholder={$t('app.description_placeholder')}
/> />
</div> </div>
<div> <div>
<label for="icon" class="mb-1 block text-sm font-medium text-foreground">Icon (Lucide name)</label> <label for="icon" class="mb-1 block text-sm font-medium text-foreground">{$t('app.icon_board_label')}</label>
<input <input
id="icon" id="icon"
name="icon" name="icon"
@@ -62,25 +63,25 @@
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<label class="flex items-center gap-2 text-sm text-foreground"> <label class="flex items-center gap-2 text-sm text-foreground">
<input type="checkbox" name="isDefault" bind:checked={$form.isDefault} class="rounded" /> <input type="checkbox" name="isDefault" bind:checked={$form.isDefault} class="rounded" />
Default board {$t('board.default_board')}
</label> </label>
<label class="flex items-center gap-2 text-sm text-foreground"> <label class="flex items-center gap-2 text-sm text-foreground">
<input type="checkbox" name="isGuestAccessible" bind:checked={$form.isGuestAccessible} class="rounded" /> <input type="checkbox" name="isGuestAccessible" bind:checked={$form.isGuestAccessible} class="rounded" />
Guest accessible {$t('board.guest_accessible')}
</label> </label>
</div> </div>
<div class="flex justify-end gap-3 pt-2"> <div class="flex justify-end gap-3 pt-2">
<a href="/boards" class="rounded-lg border border-border px-4 py-2 text-sm text-foreground hover:bg-accent"> <a href="/boards" class="rounded-lg border border-border px-4 py-2 text-sm text-foreground hover:bg-accent">
Cancel {$t('common.cancel')}
</a> </a>
<button <button
type="submit" type="submit"
disabled={$submitting} disabled={$submitting}
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
> >
{$submitting ? 'Creating...' : 'Create Board'} {$submitting ? $t('board.creating') : $t('board.create')}
</button> </button>
</div> </div>
</form> </form>
src/routes/login/+page.svelte
+14 -13
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import { superForm } from 'sveltekit-superforms'; import { superForm } from 'sveltekit-superforms';
import type { PageData } from './$types.js'; import type { PageData } from './$types.js';
import AmbientBackground from '$lib/components/background/AmbientBackground.svelte'; import AmbientBackground from '$lib/components/background/AmbientBackground.svelte';
@@ -12,7 +13,7 @@
</script> </script>
<svelte:head> <svelte:head>
<title>Login — Web App Launcher</title> <title>{$t('auth.login_submit')} — {$t('app_title')}</title>
</svelte:head> </svelte:head>
<AmbientBackground /> <AmbientBackground />
@@ -37,8 +38,8 @@
<rect x="3" y="14" width="7" height="7" /> <rect x="3" y="14" width="7" height="7" />
</svg> </svg>
</div> </div>
<h1 class="text-2xl font-bold text-card-foreground">Welcome back</h1> <h1 class="text-2xl font-bold text-card-foreground">{$t('auth.login_title')}</h1>
<p class="mt-1 text-sm text-muted-foreground">Sign in to your account</p> <p class="mt-1 text-sm text-muted-foreground">{$t('auth.login_subtitle')}</p>
</div> </div>
{#if showOAuthButton} {#if showOAuthButton}
@@ -51,7 +52,7 @@
<polyline points="10 17 15 12 10 7" /> <polyline points="10 17 15 12 10 7" />
<line x1="15" y1="12" x2="3" y2="12" /> <line x1="15" y1="12" x2="3" y2="12" />
</svg> </svg>
Sign in with OAuth {$t('auth.oauth_signin')}
</a> </a>
{/if} {/if}
@@ -61,7 +62,7 @@
<div class="w-full border-t border-border"></div> <div class="w-full border-t border-border"></div>
</div> </div>
<div class="relative flex justify-center text-xs uppercase"> <div class="relative flex justify-center text-xs uppercase">
<span class="bg-card px-2 text-muted-foreground">or</span> <span class="bg-card px-2 text-muted-foreground">{$t('auth.or')}</span>
</div> </div>
</div> </div>
{/if} {/if}
@@ -70,7 +71,7 @@
<form method="POST" use:enhance class="space-y-4"> <form method="POST" use:enhance class="space-y-4">
<div> <div>
<label for="email" class="mb-1 block text-sm font-medium text-card-foreground"> <label for="email" class="mb-1 block text-sm font-medium text-card-foreground">
Email {$t('auth.email')}
</label> </label>
<input <input
id="email" id="email"
@@ -79,7 +80,7 @@
autocomplete="email" autocomplete="email"
bind:value={$form.email} bind:value={$form.email}
class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30" class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
placeholder="you@example.com" placeholder={$t('auth.email_placeholder')}
/> />
{#if $errors.email} {#if $errors.email}
<p class="mt-1 text-sm text-destructive">{$errors.email[0]}</p> <p class="mt-1 text-sm text-destructive">{$errors.email[0]}</p>
@@ -88,7 +89,7 @@
<div> <div>
<label for="password" class="mb-1 block text-sm font-medium text-card-foreground"> <label for="password" class="mb-1 block text-sm font-medium text-card-foreground">
Password {$t('auth.password')}
</label> </label>
<input <input
id="password" id="password"
@@ -97,7 +98,7 @@
autocomplete="current-password" autocomplete="current-password"
bind:value={$form.password} bind:value={$form.password}
class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30" class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
placeholder="Enter your password" placeholder={$t('auth.password_placeholder')}
/> />
{#if $errors.password} {#if $errors.password}
<p class="mt-1 text-sm text-destructive">{$errors.password[0]}</p> <p class="mt-1 text-sm text-destructive">{$errors.password[0]}</p>
@@ -112,10 +113,10 @@
{#if $submitting} {#if $submitting}
<span class="flex items-center justify-center gap-2"> <span class="flex items-center justify-center gap-2">
<span class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"></span> <span class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"></span>
Signing in... {$t('auth.login_submitting')}
</span> </span>
{:else} {:else}
Sign In {$t('auth.login_submit')}
{/if} {/if}
</button> </button>
</form> </form>
@@ -123,8 +124,8 @@
{#if showLocalForm} {#if showLocalForm}
<p class="mt-6 text-center text-sm text-muted-foreground"> <p class="mt-6 text-center text-sm text-muted-foreground">
Don't have an account? {$t('auth.no_account')}
<a href="/register" class="font-medium text-primary hover:underline">Register</a> <a href="/register" class="font-medium text-primary hover:underline">{$t('auth.register')}</a>
</p> </p>
{/if} {/if}
</div> </div>
src/routes/register/+page.svelte
+14 -13
View File
@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { t } from 'svelte-i18n';
import { superForm } from 'sveltekit-superforms'; import { superForm } from 'sveltekit-superforms';
import type { PageData } from './$types.js'; import type { PageData } from './$types.js';
import AmbientBackground from '$lib/components/background/AmbientBackground.svelte'; import AmbientBackground from '$lib/components/background/AmbientBackground.svelte';
@@ -9,7 +10,7 @@
</script> </script>
<svelte:head> <svelte:head>
<title>Register — Web App Launcher</title> <title>{$t('auth.register')} — {$t('app_title')}</title>
</svelte:head> </svelte:head>
<AmbientBackground /> <AmbientBackground />
@@ -34,14 +35,14 @@
<line x1="22" y1="11" x2="16" y2="11" /> <line x1="22" y1="11" x2="16" y2="11" />
</svg> </svg>
</div> </div>
<h1 class="text-2xl font-bold text-card-foreground">Create Account</h1> <h1 class="text-2xl font-bold text-card-foreground">{$t('auth.register_title')}</h1>
<p class="mt-1 text-sm text-muted-foreground">Get started with App Launcher</p> <p class="mt-1 text-sm text-muted-foreground">{$t('auth.register_subtitle')}</p>
</div> </div>
<form method="POST" use:enhance class="space-y-4"> <form method="POST" use:enhance class="space-y-4">
<div> <div>
<label for="displayName" class="mb-1 block text-sm font-medium text-card-foreground"> <label for="displayName" class="mb-1 block text-sm font-medium text-card-foreground">
Display Name {$t('auth.display_name')}
</label> </label>
<input <input
id="displayName" id="displayName"
@@ -50,7 +51,7 @@
autocomplete="name" autocomplete="name"
bind:value={$form.displayName} bind:value={$form.displayName}
class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30" class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
placeholder="Your name" placeholder={$t('auth.display_name_placeholder')}
/> />
{#if $errors.displayName} {#if $errors.displayName}
<p class="mt-1 text-sm text-destructive">{$errors.displayName[0]}</p> <p class="mt-1 text-sm text-destructive">{$errors.displayName[0]}</p>
@@ -59,7 +60,7 @@
<div> <div>
<label for="email" class="mb-1 block text-sm font-medium text-card-foreground"> <label for="email" class="mb-1 block text-sm font-medium text-card-foreground">
Email {$t('auth.email')}
</label> </label>
<input <input
id="email" id="email"
@@ -68,7 +69,7 @@
autocomplete="email" autocomplete="email"
bind:value={$form.email} bind:value={$form.email}
class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30" class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
placeholder="you@example.com" placeholder={$t('auth.email_placeholder')}
/> />
{#if $errors.email} {#if $errors.email}
<p class="mt-1 text-sm text-destructive">{$errors.email[0]}</p> <p class="mt-1 text-sm text-destructive">{$errors.email[0]}</p>
@@ -77,7 +78,7 @@
<div> <div>
<label for="password" class="mb-1 block text-sm font-medium text-card-foreground"> <label for="password" class="mb-1 block text-sm font-medium text-card-foreground">
Password {$t('auth.password')}
</label> </label>
<input <input
id="password" id="password"
@@ -86,7 +87,7 @@
autocomplete="new-password" autocomplete="new-password"
bind:value={$form.password} bind:value={$form.password}
class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30" class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
placeholder="At least 6 characters" placeholder={$t('auth.password_placeholder_register')}
/> />
{#if $errors.password} {#if $errors.password}
<p class="mt-1 text-sm text-destructive">{$errors.password[0]}</p> <p class="mt-1 text-sm text-destructive">{$errors.password[0]}</p>
@@ -101,17 +102,17 @@
{#if $submitting} {#if $submitting}
<span class="flex items-center justify-center gap-2"> <span class="flex items-center justify-center gap-2">
<span class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"></span> <span class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"></span>
Creating account... {$t('auth.register_submitting')}
</span> </span>
{:else} {:else}
Create Account {$t('auth.register_submit')}
{/if} {/if}
</button> </button>
</form> </form>
<p class="mt-6 text-center text-sm text-muted-foreground"> <p class="mt-6 text-center text-sm text-muted-foreground">
Already have an account? {$t('auth.have_account')}
<a href="/login" class="font-medium text-primary hover:underline">Sign in</a> <a href="/login" class="font-medium text-primary hover:underline">{$t('auth.sign_in_link')}</a>
</p> </p>
</div> </div>
</main> </main>