feat: Phases 4-7 — Full Feature Expansion (26 features)
Phase 4 — New Widget Types: - Clock/Weather, System Stats, RSS/Feed, Calendar, Markdown, Metric/Counter, Link Group, Camera/Stream widgets - Backend services with caching for each data source - Full creation form with dynamic config fields per type Phase 5 — Visual & Styling Enhancements: - Glassmorphism card style (solid/glass/outline) - Board-level themes with per-board hue/saturation - Animated SVG status rings replacing static dots - Card size options (compact/medium/large) - Custom CSS injection (admin + per-board, sanitized) - Wallpaper backgrounds with blur/overlay/parallax Phase 6 — Functional Features: - Favorites bar with drag-and-drop reordering - Recent apps tracking with privacy toggle - Uptime dashboard page (/status, guest-accessible) - Notifications system (Discord/Slack/Telegram/HTTP webhooks) - App tags with filtering in board view - Multi-URL app cards with expandable sub-links - Personal API tokens with scoped permissions - Audit log with retention and admin viewer Phase 7 — Quality of Life: - Onboarding wizard (5-step first-launch setup) - App URL health preview with favicon/title detection - Board templates (4 built-in + custom import/export) - Keyboard shortcut overlay (j/k nav, 1-9 boards, ? help) 212 files changed, 15641 insertions, 980 deletions. Build, lint, type check, and 222 tests all pass.
This commit is contained in:
@@ -0,0 +1,185 @@
|
||||
<script lang="ts">
|
||||
import DynamicIcon from '$lib/components/ui/DynamicIcon.svelte';
|
||||
|
||||
interface TemplateSection {
|
||||
readonly title: string;
|
||||
readonly icon: string | null;
|
||||
readonly order: number;
|
||||
}
|
||||
|
||||
interface Template {
|
||||
readonly id: string;
|
||||
readonly name: string;
|
||||
readonly description: string | null;
|
||||
readonly icon: string | null;
|
||||
readonly config: {
|
||||
readonly sections: readonly TemplateSection[];
|
||||
};
|
||||
readonly isBuiltin: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
onSelect: (templateId: string | null) => void;
|
||||
}
|
||||
|
||||
let { onSelect }: Props = $props();
|
||||
|
||||
let templates = $state<Template[]>([]);
|
||||
let loading = $state(true);
|
||||
let errorMsg = $state<string | null>(null);
|
||||
let selected = $state<string | null>(null);
|
||||
let importing = $state(false);
|
||||
|
||||
async function loadTemplates() {
|
||||
loading = true;
|
||||
errorMsg = null;
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/templates');
|
||||
const json = await res.json();
|
||||
|
||||
if (json.success && Array.isArray(json.data)) {
|
||||
templates = json.data;
|
||||
} else {
|
||||
errorMsg = json.error ?? 'Failed to load templates';
|
||||
}
|
||||
} catch {
|
||||
errorMsg = 'Failed to load templates';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function selectTemplate(id: string | null) {
|
||||
selected = id;
|
||||
onSelect(id);
|
||||
}
|
||||
|
||||
async function handleImport() {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.json';
|
||||
|
||||
input.onchange = async () => {
|
||||
const file = input.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
importing = true;
|
||||
errorMsg = null;
|
||||
|
||||
try {
|
||||
const text = await file.text();
|
||||
const data = JSON.parse(text);
|
||||
|
||||
const res = await fetch('/api/templates/import', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
const json = await res.json();
|
||||
if (json.success) {
|
||||
await loadTemplates();
|
||||
selectTemplate(json.data.id);
|
||||
} else {
|
||||
errorMsg = json.error ?? 'Failed to import template';
|
||||
}
|
||||
} catch {
|
||||
errorMsg = 'Failed to import template: invalid JSON file';
|
||||
} finally {
|
||||
importing = false;
|
||||
}
|
||||
};
|
||||
|
||||
input.click();
|
||||
}
|
||||
|
||||
// Load templates on mount
|
||||
$effect(() => {
|
||||
loadTemplates();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="space-y-3">
|
||||
<p class="text-sm font-medium text-foreground">Choose a template (optional)</p>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex items-center justify-center py-8 text-muted-foreground">
|
||||
<svg class="mr-2 h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25" />
|
||||
<path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" class="opacity-75" />
|
||||
</svg>
|
||||
Loading templates...
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
||||
<!-- Blank Board -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => selectTemplate(null)}
|
||||
class="flex flex-col items-center gap-2 rounded-lg border-2 p-4 text-center transition-colors {selected === null ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'}"
|
||||
>
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
|
||||
<svg class="h-5 w-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-foreground">Blank Board</span>
|
||||
<span class="text-xs text-muted-foreground">Start from scratch</span>
|
||||
</button>
|
||||
|
||||
<!-- Templates -->
|
||||
{#each templates as template (template.id)}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => selectTemplate(template.id)}
|
||||
class="flex flex-col items-center gap-2 rounded-lg border-2 p-4 text-center transition-colors {selected === template.id ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'}"
|
||||
>
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
|
||||
{#if template.icon}
|
||||
<DynamicIcon name={template.icon} size={20} />
|
||||
{:else}
|
||||
<svg class="h-5 w-5 text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="3" y1="9" x2="21" y2="9" />
|
||||
<line x1="9" y1="21" x2="9" y2="9" />
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
<span class="text-sm font-medium text-foreground">{template.name}</span>
|
||||
{#if template.description}
|
||||
<span class="line-clamp-2 text-xs text-muted-foreground">{template.description}</span>
|
||||
{/if}
|
||||
{#if template.config.sections.length > 0}
|
||||
<div class="flex flex-wrap justify-center gap-1">
|
||||
{#each template.config.sections as section (section.title)}
|
||||
<span class="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
|
||||
{section.title}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Import button -->
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleImport}
|
||||
disabled={importing}
|
||||
class="text-xs text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
|
||||
>
|
||||
{importing ? 'Importing...' : 'Import template from file'}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if errorMsg}
|
||||
<div class="rounded-lg bg-destructive/10 p-2 text-xs text-destructive">
|
||||
{errorMsg}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user