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,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { t } from 'svelte-i18n';
|
||||
import { dndzone } from 'svelte-dnd-action';
|
||||
import DraggableWidget from '$lib/components/widget/DraggableWidget.svelte';
|
||||
|
||||
@@ -37,7 +38,7 @@
|
||||
addWidgetSectionId: string | null;
|
||||
onToggleAddWidget: (sectionId: string) => void;
|
||||
onDeleteSection: (sectionId: string) => void;
|
||||
onAddWidget: (sectionId: string, appId: string) => void;
|
||||
onAddWidget: (sectionId: string, widgetData: string) => void;
|
||||
onDeleteWidget: (widgetId: string) => void;
|
||||
}
|
||||
|
||||
@@ -71,7 +72,104 @@
|
||||
onWidgetsUpdate(section.id, widgets);
|
||||
}
|
||||
|
||||
// Widget form state
|
||||
let selectedWidgetType = $state('app');
|
||||
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>
|
||||
|
||||
<div class="rounded-xl border border-border bg-card p-4 shadow-sm">
|
||||
@@ -102,7 +200,7 @@
|
||||
</svg>
|
||||
</div>
|
||||
<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}
|
||||
<span class="text-xs text-muted-foreground">({section.icon})</span>
|
||||
{/if}
|
||||
@@ -113,48 +211,191 @@
|
||||
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"
|
||||
>
|
||||
Add Widget
|
||||
{$t('widget.add')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
Delete
|
||||
{$t('common.delete')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if addWidgetSectionId === section.id}
|
||||
<div class="mb-3 rounded-lg border border-border bg-muted/50 p-3">
|
||||
<div>
|
||||
<label for="widget-app-{section.id}" class="mb-1 block text-sm font-medium text-foreground"
|
||||
>Select App</label
|
||||
>
|
||||
<!-- Widget Type Selector -->
|
||||
<div class="mb-3">
|
||||
<label for="widget-type-{section.id}" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Widget Type
|
||||
</label>
|
||||
<select
|
||||
id="widget-app-{section.id}"
|
||||
bind:value={selectedAppId}
|
||||
id="widget-type-{section.id}"
|
||||
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"
|
||||
>
|
||||
<option value="">Choose an app...</option>
|
||||
{#each apps as app (app.id)}
|
||||
<option value={app.id}>{app.name}</option>
|
||||
{/each}
|
||||
<option value="app">App</option>
|
||||
<option value="bookmark">Bookmark</option>
|
||||
<option value="note">Note</option>
|
||||
<option value="embed">Embed</option>
|
||||
<option value="status">Status</option>
|
||||
</select>
|
||||
</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
|
||||
type="button"
|
||||
onclick={() => {
|
||||
if (selectedAppId) {
|
||||
onAddWidget(section.id, selectedAppId);
|
||||
selectedAppId = '';
|
||||
}
|
||||
}}
|
||||
disabled={!selectedAppId}
|
||||
onclick={handleSubmitWidget}
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -169,7 +410,7 @@
|
||||
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">
|
||||
No widgets. Drag widgets here or add one above.
|
||||
{$t('widget.no_widgets_dnd')}
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
@@ -185,19 +426,14 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium uppercase text-primary">{widget.type}</span>
|
||||
{#if widget.app}
|
||||
<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}
|
||||
<span class="text-sm text-foreground">{getWidgetLabel(widget)}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
Remove
|
||||
{$t('widget.remove')}
|
||||
</button>
|
||||
</div>
|
||||
</DraggableWidget>
|
||||
|
||||
Reference in New Issue
Block a user