feat(phase2): localization EN/RU + additional widget types
- Add svelte-i18n with 224 translation keys (English + Russian) - Language switcher in header (EN/RU toggle, persists to localStorage) - Extract all hardcoded strings from 37 component/page files - Add 4 new widget types: Bookmark, Note (markdown), Embed (iframe), Status - WidgetRenderer dispatches by type, WidgetGrid supports full-width widgets - Type-specific config forms in board editor - Install marked for markdown rendering
This commit is contained in:
@@ -1,8 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { t } from 'svelte-i18n';
|
||||
import type { PageData } from './$types.js';
|
||||
import { enhance } from '$app/forms';
|
||||
import { invalidateAll } from '$app/navigation';
|
||||
import DraggableBoard from '$lib/components/board/DraggableBoard.svelte';
|
||||
import { WidgetType } from '$lib/utils/constants.js';
|
||||
|
||||
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();
|
||||
formData.set('sectionId', sectionId);
|
||||
formData.set('type', 'app');
|
||||
formData.set('appId', appId);
|
||||
formData.set('type', (parsed.type as string) || 'app');
|
||||
|
||||
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 {
|
||||
await fetch(`?/addWidget`, {
|
||||
@@ -63,28 +100,28 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Edit: {data.board.name}</title>
|
||||
<title>{$t('board.edit_board')}: {data.board.name}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="mx-auto max-w-4xl">
|
||||
<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
|
||||
href="/boards/{data.board.id}"
|
||||
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>
|
||||
</div>
|
||||
|
||||
<!-- Board Properties -->
|
||||
<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>
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<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
|
||||
id="board-name"
|
||||
name="name"
|
||||
@@ -95,7 +132,7 @@
|
||||
/>
|
||||
</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
|
||||
id="board-icon"
|
||||
name="icon"
|
||||
@@ -106,7 +143,7 @@
|
||||
/>
|
||||
</div>
|
||||
<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
|
||||
id="board-desc"
|
||||
name="description"
|
||||
@@ -122,7 +159,7 @@
|
||||
checked={data.board.isDefault}
|
||||
class="h-4 w-4 rounded border-input accent-primary"
|
||||
/>
|
||||
Default Board
|
||||
{$t('board.default_board')}
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-foreground">
|
||||
<input
|
||||
@@ -131,7 +168,7 @@
|
||||
checked={data.board.isGuestAccessible}
|
||||
class="h-4 w-4 rounded border-input accent-primary"
|
||||
/>
|
||||
Guest Accessible
|
||||
{$t('board.guest_accessible')}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,7 +177,7 @@
|
||||
type="submit"
|
||||
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>
|
||||
</div>
|
||||
</form>
|
||||
@@ -149,13 +186,13 @@
|
||||
<!-- Sections with Drag-and-Drop -->
|
||||
<section class="mb-8">
|
||||
<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
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
{showAddSection ? 'Cancel' : 'Add Section'}
|
||||
{showAddSection ? $t('common.cancel') : $t('section.add')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -173,7 +210,7 @@
|
||||
>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<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
|
||||
id="section-title"
|
||||
name="title"
|
||||
@@ -183,13 +220,13 @@
|
||||
/>
|
||||
</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
|
||||
id="section-icon"
|
||||
name="icon"
|
||||
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"
|
||||
placeholder="Optional"
|
||||
placeholder={$t('section.icon_placeholder')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -198,7 +235,7 @@
|
||||
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"
|
||||
>
|
||||
Create Section
|
||||
{$t('section.create')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user