alexei.dolgolyov
8d7847889e
Port icon grid and entity picker patterns from wled-screen-controller. IconGrid replaces plain <select> elements with visual icon grids for known item sets (widget type, icon type, healthcheck method, permission level). EntityPicker replaces search dropdowns with a command-palette style overlay with keyboard navigation and filtering. Enhance SearchDialog with keyboard navigation (arrow keys, Enter, Escape), grouped results with section headers, active highlight, and a footer with shortcut hints.
282 lines
9.3 KiB
Svelte
282 lines
9.3 KiB
Svelte
<script lang="ts">
|
|
import { t } from 'svelte-i18n';
|
|
import IconGrid from '$lib/components/ui/IconGrid.svelte';
|
|
import EntityPicker from '$lib/components/ui/EntityPicker.svelte';
|
|
import type { IconGridItem } from '$lib/components/ui/IconGrid.svelte';
|
|
import type { EntityPickerItem } from '$lib/components/ui/EntityPicker.svelte';
|
|
|
|
interface Props {
|
|
sectionId: string;
|
|
apps: Array<{ id: string; name: string }>;
|
|
onSubmit: (sectionId: string, widgetData: string) => void;
|
|
}
|
|
|
|
let { sectionId, apps, onSubmit }: Props = $props();
|
|
|
|
// 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[]>([]);
|
|
|
|
const widgetTypeItems: IconGridItem[] = [
|
|
{ value: 'app', icon: '🖥️', label: 'App' },
|
|
{ value: 'bookmark', icon: '🔖', label: 'Bookmark' },
|
|
{ value: 'note', icon: '📝', label: 'Note' },
|
|
{ value: 'embed', icon: '🧩', label: 'Embed' },
|
|
{ value: 'status', icon: '📊', label: 'Status' }
|
|
];
|
|
|
|
const noteFormatItems: IconGridItem[] = [
|
|
{ value: 'markdown', icon: '📝', label: 'Markdown' },
|
|
{ value: 'text', icon: '📄', label: 'Plain Text' }
|
|
];
|
|
|
|
const appPickerItems: EntityPickerItem[] = $derived(
|
|
apps.map((app) => ({
|
|
value: app.id,
|
|
label: app.name
|
|
}))
|
|
);
|
|
|
|
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;
|
|
}
|
|
|
|
onSubmit(sectionId, JSON.stringify(widgetData));
|
|
resetForm();
|
|
}
|
|
|
|
function toggleStatusApp(appId: string) {
|
|
if (statusAppIds.includes(appId)) {
|
|
statusAppIds = statusAppIds.filter((id) => id !== appId);
|
|
} else {
|
|
statusAppIds = [...statusAppIds, appId];
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="mb-3 rounded-lg border border-border bg-muted/50 p-3">
|
|
<!-- Widget Type Selector (Icon Grid) -->
|
|
<div class="mb-3">
|
|
<label class="mb-1 block text-sm font-medium text-foreground">
|
|
Widget Type
|
|
</label>
|
|
<IconGrid
|
|
items={widgetTypeItems}
|
|
bind:value={selectedWidgetType}
|
|
columns={5}
|
|
/>
|
|
</div>
|
|
|
|
<!-- Type-specific config forms -->
|
|
{#if selectedWidgetType === 'app'}
|
|
<div>
|
|
<label class="mb-1 block text-sm font-medium text-foreground">
|
|
{$t('widget.select_app')}
|
|
</label>
|
|
<EntityPicker
|
|
items={appPickerItems}
|
|
bind:value={selectedAppId}
|
|
placeholder={$t('widget.choose_app')}
|
|
searchPlaceholder={$t('widget.choose_app')}
|
|
/>
|
|
</div>
|
|
{:else if selectedWidgetType === 'bookmark'}
|
|
<div class="grid gap-3 sm:grid-cols-2">
|
|
<div>
|
|
<label for="bm-url-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
|
|
<input
|
|
id="bm-url-{sectionId}"
|
|
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-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Label</label>
|
|
<input
|
|
id="bm-label-{sectionId}"
|
|
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-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Icon (optional)</label>
|
|
<input
|
|
id="bm-icon-{sectionId}"
|
|
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-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Description (optional)</label>
|
|
<input
|
|
id="bm-desc-{sectionId}"
|
|
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 class="mb-1 block text-sm font-medium text-foreground">Format</label>
|
|
<IconGrid
|
|
items={noteFormatItems}
|
|
bind:value={noteFormat}
|
|
columns={2}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="note-content-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Content</label>
|
|
<textarea
|
|
id="note-content-{sectionId}"
|
|
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-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
|
|
<input
|
|
id="embed-url-{sectionId}"
|
|
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-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Height (px)</label>
|
|
<input
|
|
id="embed-height-{sectionId}"
|
|
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-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Label (optional)</label>
|
|
<input
|
|
id="status-label-{sectionId}"
|
|
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={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"
|
|
>
|
|
{$t('common.add')}
|
|
</button>
|
|
</div>
|
|
</div>
|