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,281 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
interface AuditLogEntry {
|
||||
id: string;
|
||||
userId: string | null;
|
||||
action: string;
|
||||
entityType: string;
|
||||
entityId: string;
|
||||
details: string;
|
||||
createdAt: Date | string;
|
||||
user?: {
|
||||
displayName: string;
|
||||
email: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
interface Filters {
|
||||
action: string;
|
||||
entityType: string;
|
||||
dateFrom: string;
|
||||
dateTo: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
logs: AuditLogEntry[];
|
||||
filters: Filters;
|
||||
page: number;
|
||||
hasMore: boolean;
|
||||
}
|
||||
|
||||
let { logs, filters, page: currentPage, hasMore }: Props = $props();
|
||||
|
||||
let expandedId = $state<string | null>(null);
|
||||
let filterAction = $state(filters.action);
|
||||
let filterEntityType = $state(filters.entityType);
|
||||
let filterDateFrom = $state(filters.dateFrom);
|
||||
let filterDateTo = $state(filters.dateTo);
|
||||
|
||||
const actionOptions = [
|
||||
{ value: '', label: 'All Actions' },
|
||||
{ value: 'user_created', label: 'User Created' },
|
||||
{ value: 'user_deleted', label: 'User Deleted' },
|
||||
{ value: 'user_updated', label: 'User Updated' },
|
||||
{ value: 'board_created', label: 'Board Created' },
|
||||
{ value: 'board_deleted', label: 'Board Deleted' },
|
||||
{ value: 'app_created', label: 'App Created' },
|
||||
{ value: 'app_deleted', label: 'App Deleted' },
|
||||
{ value: 'settings_updated', label: 'Settings Updated' },
|
||||
{ value: 'import', label: 'Import' },
|
||||
{ value: 'export', label: 'Export' }
|
||||
];
|
||||
|
||||
const entityTypeOptions = [
|
||||
{ value: '', label: 'All Entities' },
|
||||
{ value: 'user', label: 'User' },
|
||||
{ value: 'board', label: 'Board' },
|
||||
{ value: 'app', label: 'App' },
|
||||
{ value: 'settings', label: 'Settings' },
|
||||
{ value: 'data', label: 'Data' }
|
||||
];
|
||||
|
||||
function applyFilters() {
|
||||
// eslint-disable-next-line svelte/prefer-svelte-reactivity
|
||||
const params = new URLSearchParams();
|
||||
if (filterAction) params.set('action', filterAction);
|
||||
if (filterEntityType) params.set('entityType', filterEntityType);
|
||||
if (filterDateFrom) params.set('dateFrom', filterDateFrom);
|
||||
if (filterDateTo) params.set('dateTo', filterDateTo);
|
||||
params.set('page', '1');
|
||||
goto(`/admin/audit-log?${params.toString()}`, { replaceState: true });
|
||||
}
|
||||
|
||||
function changePage(delta: number) {
|
||||
// eslint-disable-next-line svelte/prefer-svelte-reactivity
|
||||
const params = new URLSearchParams($page.url.searchParams);
|
||||
params.set('page', String(Math.max(1, currentPage + delta)));
|
||||
goto(`/admin/audit-log?${params.toString()}`, { replaceState: true });
|
||||
}
|
||||
|
||||
function toggleDetails(id: string) {
|
||||
expandedId = expandedId === id ? null : id;
|
||||
}
|
||||
|
||||
function formatDetails(details: string): string {
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(details), null, 2);
|
||||
} catch {
|
||||
return details;
|
||||
}
|
||||
}
|
||||
|
||||
function actionLabel(action: string): string {
|
||||
return action.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
|
||||
}
|
||||
|
||||
function actionBadgeClass(action: string): string {
|
||||
if (action.includes('deleted')) return 'bg-red-500/10 text-red-500';
|
||||
if (action.includes('created')) return 'bg-green-500/10 text-green-500';
|
||||
if (action.includes('updated')) return 'bg-blue-500/10 text-blue-500';
|
||||
if (action === 'import') return 'bg-purple-500/10 text-purple-500';
|
||||
if (action === 'export') return 'bg-yellow-500/10 text-yellow-500';
|
||||
return 'bg-muted text-muted-foreground';
|
||||
}
|
||||
|
||||
function exportCsv() {
|
||||
const headers = ['Timestamp', 'User', 'Action', 'Entity Type', 'Entity ID', 'Details'];
|
||||
const rows = logs.map((log) => [
|
||||
new Date(log.createdAt).toISOString(),
|
||||
log.user?.displayName ?? log.userId ?? 'System',
|
||||
log.action,
|
||||
log.entityType,
|
||||
log.entityId,
|
||||
log.details.replace(/"/g, '""')
|
||||
]);
|
||||
|
||||
const csv = [
|
||||
headers.join(','),
|
||||
...rows.map((row) => row.map((cell) => `"${cell}"`).join(','))
|
||||
].join('\n');
|
||||
|
||||
const blob = new Blob([csv], { type: 'text/csv' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `audit-log-${new Date().toISOString().slice(0, 10)}.csv`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<!-- Filters -->
|
||||
<div class="mb-4 flex flex-wrap items-end gap-3">
|
||||
<div>
|
||||
<label for="filter-action" class="mb-1 block text-xs font-medium text-muted-foreground">Action</label>
|
||||
<select
|
||||
id="filter-action"
|
||||
bind:value={filterAction}
|
||||
class="rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground"
|
||||
>
|
||||
{#each actionOptions as opt (opt.value)}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="filter-entity" class="mb-1 block text-xs font-medium text-muted-foreground">Entity</label>
|
||||
<select
|
||||
id="filter-entity"
|
||||
bind:value={filterEntityType}
|
||||
class="rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground"
|
||||
>
|
||||
{#each entityTypeOptions as opt (opt.value)}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="filter-from" class="mb-1 block text-xs font-medium text-muted-foreground">From</label>
|
||||
<input
|
||||
id="filter-from"
|
||||
type="date"
|
||||
bind:value={filterDateFrom}
|
||||
class="rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="filter-to" class="mb-1 block text-xs font-medium text-muted-foreground">To</label>
|
||||
<input
|
||||
id="filter-to"
|
||||
type="date"
|
||||
bind:value={filterDateTo}
|
||||
class="rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={applyFilters}
|
||||
class="rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
Apply
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={exportCsv}
|
||||
class="ml-auto rounded-md border border-input px-4 py-1.5 text-sm font-medium text-foreground hover:bg-accent"
|
||||
>
|
||||
Export CSV
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
{#if logs.length === 0}
|
||||
<div class="rounded-xl border border-border bg-card/50 p-12 text-center">
|
||||
<p class="text-muted-foreground">No audit log entries found</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto rounded-lg border border-border">
|
||||
<table class="w-full text-left text-sm">
|
||||
<thead class="border-b border-border bg-muted/50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 font-medium text-muted-foreground">Timestamp</th>
|
||||
<th class="px-4 py-3 font-medium text-muted-foreground">User</th>
|
||||
<th class="px-4 py-3 font-medium text-muted-foreground">Action</th>
|
||||
<th class="px-4 py-3 font-medium text-muted-foreground">Entity</th>
|
||||
<th class="px-4 py-3 font-medium text-muted-foreground">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each logs as log (log.id)}
|
||||
<tr class="border-b border-border last:border-0">
|
||||
<td class="whitespace-nowrap px-4 py-3 text-xs text-muted-foreground">
|
||||
{new Date(log.createdAt).toLocaleString()}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-foreground">
|
||||
{log.user?.displayName ?? log.userId ?? 'System'}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-block rounded-full px-2 py-0.5 text-xs font-medium {actionBadgeClass(log.action)}">
|
||||
{actionLabel(log.action)}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="text-xs text-foreground">{log.entityType}</span>
|
||||
<span class="ml-1 text-[10px] text-muted-foreground">{log.entityId.substring(0, 8)}...</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
{#if log.details && log.details !== '{}'}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => toggleDetails(log.id)}
|
||||
class="text-xs text-primary hover:underline"
|
||||
>
|
||||
{expandedId === log.id ? 'Hide' : 'View'}
|
||||
</button>
|
||||
{:else}
|
||||
<span class="text-xs text-muted-foreground">—</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{#if expandedId === log.id}
|
||||
<tr>
|
||||
<td colspan="5" class="bg-muted/30 px-4 py-3">
|
||||
<pre class="max-h-48 overflow-auto rounded-md bg-background p-3 text-xs text-foreground">{formatDetails(log.details)}</pre>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<button
|
||||
type="button"
|
||||
disabled={currentPage === 1}
|
||||
onclick={() => changePage(-1)}
|
||||
class="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span class="text-sm text-muted-foreground">Page {currentPage}</span>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!hasMore}
|
||||
onclick={() => changePage(1)}
|
||||
class="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -3,6 +3,7 @@
|
||||
import { superForm, type SuperValidated } from 'sveltekit-superforms/client';
|
||||
import type { updateSystemSettingsSchema } from '$lib/utils/validators.js';
|
||||
import type { z } from 'zod';
|
||||
import CustomCssEditor from '$lib/components/settings/CustomCssEditor.svelte';
|
||||
|
||||
let {
|
||||
form: formData,
|
||||
@@ -224,6 +225,18 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- System Custom CSS -->
|
||||
<section class="rounded-lg border border-border bg-card p-6">
|
||||
<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('admin.custom_css') ?? 'Custom CSS'}</h2>
|
||||
<p class="mb-4 text-xs text-muted-foreground">{$t('admin.custom_css_description') ?? 'System-wide custom CSS applied to all pages. Scoped to .custom-css-scope to prevent breaking core UI.'}</p>
|
||||
<input type="hidden" name="customCss" value={$form.customCss ?? ''} />
|
||||
<CustomCssEditor
|
||||
value={$form.customCss ?? ''}
|
||||
onchange={(css) => { $form.customCss = css; }}
|
||||
label={$t('admin.custom_css_label') ?? 'System-wide CSS'}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{#if $errors._errors}
|
||||
<p class="text-sm text-destructive">{$errors._errors}</p>
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,248 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
interface Tag {
|
||||
id: string;
|
||||
name: string;
|
||||
color: string | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
let tags = $state<Tag[]>([]);
|
||||
let loading = $state(true);
|
||||
let error = $state<string | null>(null);
|
||||
|
||||
// Create form
|
||||
let newName = $state('');
|
||||
let newColor = $state('#6366f1');
|
||||
let showCreateForm = $state(false);
|
||||
|
||||
// Edit form
|
||||
let editingTag = $state<Tag | null>(null);
|
||||
let editName = $state('');
|
||||
let editColor = $state('#6366f1');
|
||||
|
||||
// Delete confirmation
|
||||
let confirmDeleteId = $state<string | null>(null);
|
||||
|
||||
onMount(async () => {
|
||||
await loadTags();
|
||||
});
|
||||
|
||||
async function loadTags() {
|
||||
loading = true;
|
||||
try {
|
||||
const res = await fetch('/api/tags');
|
||||
if (res.ok) {
|
||||
const json = await res.json();
|
||||
if (json.success && Array.isArray(json.data)) {
|
||||
tags = json.data;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
error = 'Failed to load tags';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createTag() {
|
||||
error = null;
|
||||
try {
|
||||
const res = await fetch('/api/tags', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: newName, color: newColor })
|
||||
});
|
||||
if (res.ok) {
|
||||
newName = '';
|
||||
newColor = '#6366f1';
|
||||
showCreateForm = false;
|
||||
await loadTags();
|
||||
} else {
|
||||
const json = await res.json();
|
||||
error = json.error ?? 'Failed to create tag';
|
||||
}
|
||||
} catch {
|
||||
error = 'Network error creating tag';
|
||||
}
|
||||
}
|
||||
|
||||
function startEdit(tag: Tag) {
|
||||
editingTag = tag;
|
||||
editName = tag.name;
|
||||
editColor = tag.color ?? '#6366f1';
|
||||
}
|
||||
|
||||
async function saveEdit() {
|
||||
if (!editingTag) return;
|
||||
error = null;
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/tags/${editingTag.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: editName, color: editColor })
|
||||
});
|
||||
if (res.ok) {
|
||||
editingTag = null;
|
||||
await loadTags();
|
||||
} else {
|
||||
const json = await res.json();
|
||||
error = json.error ?? 'Failed to update tag';
|
||||
}
|
||||
} catch {
|
||||
error = 'Network error updating tag';
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteTag(tagId: string) {
|
||||
error = null;
|
||||
try {
|
||||
const res = await fetch(`/api/tags/${tagId}`, { method: 'DELETE' });
|
||||
if (res.ok) {
|
||||
confirmDeleteId = null;
|
||||
await loadTags();
|
||||
} else {
|
||||
error = 'Failed to delete tag';
|
||||
}
|
||||
} catch {
|
||||
error = 'Network error deleting tag';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<h2 class="text-xl font-bold text-card-foreground">Tag Management</h2>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (showCreateForm = !showCreateForm)}
|
||||
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
{showCreateForm ? 'Cancel' : 'New Tag'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<div class="mb-4 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Create Form -->
|
||||
{#if showCreateForm}
|
||||
<div class="mb-6 rounded-lg border border-border bg-card p-4">
|
||||
<form onsubmit={(e) => { e.preventDefault(); createTag(); }} class="flex flex-wrap items-end gap-3">
|
||||
<div>
|
||||
<label for="tag-name" class="mb-1 block text-sm font-medium text-foreground">Name</label>
|
||||
<input
|
||||
id="tag-name"
|
||||
type="text"
|
||||
bind:value={newName}
|
||||
placeholder="Tag name"
|
||||
class="rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="tag-color" class="mb-1 block text-sm font-medium text-foreground">Color</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
id="tag-color"
|
||||
type="color"
|
||||
bind:value={newColor}
|
||||
class="h-9 w-9 cursor-pointer rounded border border-input"
|
||||
/>
|
||||
<span class="text-xs text-muted-foreground">{newColor}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
Create Tag
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Tags Grid -->
|
||||
{#if loading}
|
||||
<div class="py-8 text-center text-muted-foreground">Loading tags...</div>
|
||||
{:else if tags.length === 0}
|
||||
<div class="rounded-xl border border-border bg-card/50 p-8 text-center">
|
||||
<p class="text-muted-foreground">No tags created yet</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each tags as tag (tag.id)}
|
||||
<div class="flex items-center justify-between rounded-lg border border-border bg-card p-3">
|
||||
{#if editingTag?.id === tag.id}
|
||||
<form
|
||||
onsubmit={(e) => { e.preventDefault(); saveEdit(); }}
|
||||
class="flex flex-1 items-center gap-2"
|
||||
>
|
||||
<input
|
||||
type="color"
|
||||
bind:value={editColor}
|
||||
class="h-6 w-6 cursor-pointer rounded border border-input"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={editName}
|
||||
class="min-w-0 flex-1 rounded border border-input bg-background px-2 py-1 text-sm text-foreground"
|
||||
required
|
||||
/>
|
||||
<button type="submit" class="text-xs text-primary hover:underline">Save</button>
|
||||
<button type="button" onclick={() => (editingTag = null)} class="text-xs text-muted-foreground hover:underline">
|
||||
Cancel
|
||||
</button>
|
||||
</form>
|
||||
{:else}
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="inline-block h-4 w-4 rounded-full"
|
||||
style="background-color: {tag.color ?? '#6b7280'}"
|
||||
></span>
|
||||
<span class="text-sm font-medium text-foreground">{tag.name}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => startEdit(tag)}
|
||||
class="rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
{#if confirmDeleteId === tag.id}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => deleteTag(tag.id)}
|
||||
class="rounded px-2 py-1 text-xs text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (confirmDeleteId = null)}
|
||||
class="rounded px-2 py-1 text-xs text-muted-foreground"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (confirmDeleteId = tag.id)}
|
||||
class="rounded px-2 py-1 text-xs text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,129 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
status: string;
|
||||
size: number;
|
||||
animated?: boolean;
|
||||
}
|
||||
|
||||
let { status, size, animated = true }: Props = $props();
|
||||
|
||||
const strokeWidth = $derived(Math.max(2, size * 0.06));
|
||||
const radius = $derived((size - strokeWidth) / 2);
|
||||
const circumference = $derived(2 * Math.PI * radius);
|
||||
const center = $derived(size / 2);
|
||||
|
||||
const ringConfig = $derived.by(() => {
|
||||
switch (status) {
|
||||
case 'online':
|
||||
return {
|
||||
color: 'var(--status-online, #22c55e)',
|
||||
dashArray: `${circumference}`,
|
||||
dashOffset: '0',
|
||||
animationClass: animated ? 'status-ring-online' : '',
|
||||
opacity: 1
|
||||
};
|
||||
case 'offline':
|
||||
return {
|
||||
color: 'var(--status-offline, #ef4444)',
|
||||
dashArray: `${circumference}`,
|
||||
dashOffset: '0',
|
||||
animationClass: animated ? 'status-ring-offline' : '',
|
||||
opacity: 1
|
||||
};
|
||||
case 'degraded':
|
||||
return {
|
||||
color: 'var(--status-degraded, #eab308)',
|
||||
dashArray: `${circumference * 0.75} ${circumference * 0.25}`,
|
||||
dashOffset: '0',
|
||||
animationClass: animated ? 'status-ring-degraded' : '',
|
||||
opacity: 1
|
||||
};
|
||||
default:
|
||||
return {
|
||||
color: 'var(--status-unknown, #6b7280)',
|
||||
dashArray: `${circumference * 0.1} ${circumference * 0.1}`,
|
||||
dashOffset: '0',
|
||||
animationClass: animated ? 'status-ring-unknown' : '',
|
||||
opacity: 0.6
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class="pointer-events-none absolute inset-0"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 {size} {size}"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle
|
||||
cx={center}
|
||||
cy={center}
|
||||
r={radius}
|
||||
stroke={ringConfig.color}
|
||||
stroke-width={strokeWidth}
|
||||
fill="none"
|
||||
stroke-dasharray={ringConfig.dashArray}
|
||||
stroke-dashoffset={ringConfig.dashOffset}
|
||||
stroke-linecap="round"
|
||||
opacity={ringConfig.opacity}
|
||||
class={ringConfig.animationClass}
|
||||
style="transform-origin: {center}px {center}px;"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
@keyframes ring-fill-sweep {
|
||||
0% {
|
||||
stroke-dashoffset: 100%;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ring-pulse-opacity {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ring-degraded-pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ring-rotate-dash {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.status-ring-online {
|
||||
animation: ring-fill-sweep 1.5s ease-out forwards;
|
||||
}
|
||||
|
||||
.status-ring-offline {
|
||||
animation: ring-pulse-opacity 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.status-ring-degraded {
|
||||
animation: ring-degraded-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.status-ring-unknown {
|
||||
animation: ring-rotate-dash 8s linear infinite;
|
||||
}
|
||||
</style>
|
||||
@@ -4,6 +4,7 @@
|
||||
import type { z } from 'zod';
|
||||
import type { createAppSchema } from '$lib/utils/validators.js';
|
||||
import AppIconPicker from './AppIconPicker.svelte';
|
||||
import AppUrlPreview from './AppUrlPreview.svelte';
|
||||
import IconGrid from '$lib/components/ui/IconGrid.svelte';
|
||||
import type { IconGridItem } from '$lib/components/ui/IconGrid.svelte';
|
||||
|
||||
@@ -65,6 +66,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- URL Preview / Test Connection -->
|
||||
<AppUrlPreview
|
||||
url={$form.url ?? ''}
|
||||
currentIcon={$form.icon ?? ''}
|
||||
currentName={$form.name ?? ''}
|
||||
onApplyFavicon={(favicon) => {
|
||||
$form.icon = favicon;
|
||||
$form.iconType = 'url';
|
||||
}}
|
||||
onApplyTitle={(title) => {
|
||||
$form.name = title;
|
||||
}}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label for="description" class="mb-1 block text-sm font-medium text-card-foreground">
|
||||
{$t('app.description')}
|
||||
|
||||
@@ -0,0 +1,202 @@
|
||||
<script lang="ts">
|
||||
import { dndzone } from 'svelte-dnd-action';
|
||||
import { flip } from 'svelte/animate';
|
||||
|
||||
interface LinkItem {
|
||||
id: string;
|
||||
label: string;
|
||||
url: string;
|
||||
icon: string | null;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
appId: string;
|
||||
initialLinks?: LinkItem[];
|
||||
}
|
||||
|
||||
let { appId, initialLinks = [] }: Props = $props();
|
||||
|
||||
const flipDurationMs = 200;
|
||||
|
||||
let links = $state<LinkItem[]>(initialLinks.map((l) => ({ ...l })));
|
||||
let saving = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
|
||||
// New link form
|
||||
let newLabel = $state('');
|
||||
let newUrl = $state('');
|
||||
let newIcon = $state('');
|
||||
|
||||
function addLink() {
|
||||
if (!newLabel.trim() || !newUrl.trim()) return;
|
||||
|
||||
const tempId = `temp-${Date.now()}`;
|
||||
links = [...links, { id: tempId, label: newLabel, url: newUrl, icon: newIcon || null }];
|
||||
newLabel = '';
|
||||
newUrl = '';
|
||||
newIcon = '';
|
||||
}
|
||||
|
||||
function removeLink(id: string) {
|
||||
links = links.filter((l) => l.id !== id);
|
||||
}
|
||||
|
||||
function handleDndConsider(e: CustomEvent<{ items: LinkItem[] }>) {
|
||||
links = e.detail.items;
|
||||
}
|
||||
|
||||
function handleDndFinalize(e: CustomEvent<{ items: LinkItem[] }>) {
|
||||
links = e.detail.items;
|
||||
}
|
||||
|
||||
async function saveLinks() {
|
||||
saving = true;
|
||||
error = null;
|
||||
|
||||
try {
|
||||
// First, get existing links from the server to determine what to add/remove
|
||||
const existingRes = await fetch(`/api/apps/${appId}/links`);
|
||||
const existingData = existingRes.ok ? await existingRes.json() : { data: [] };
|
||||
const existingLinks: Array<{ id: string }> = existingData.data ?? [];
|
||||
const existingIds = new Set(existingLinks.map((l) => l.id));
|
||||
|
||||
// Delete links that were removed
|
||||
for (const existing of existingLinks) {
|
||||
if (!links.some((l) => l.id === existing.id)) {
|
||||
await fetch(`/api/apps/${appId}/links`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ linkId: existing.id })
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Add new links (those with temp IDs)
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
const link = links[i];
|
||||
if (!existingIds.has(link.id)) {
|
||||
await fetch(`/api/apps/${appId}/links`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
label: link.label,
|
||||
url: link.url,
|
||||
icon: link.icon,
|
||||
order: i
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Reorder remaining links
|
||||
const reorderIds = links
|
||||
.filter((l) => existingIds.has(l.id))
|
||||
.map((l) => l.id);
|
||||
if (reorderIds.length > 0) {
|
||||
await fetch(`/api/apps/${appId}/links`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ linkIds: reorderIds })
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
error = 'Failed to save links';
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-semibold text-foreground">Secondary Links</h3>
|
||||
|
||||
{#if error}
|
||||
<p class="text-xs text-destructive">{error}</p>
|
||||
{/if}
|
||||
|
||||
<!-- Links List (draggable) -->
|
||||
{#if links.length > 0}
|
||||
<div
|
||||
use:dndzone={{ items: links, flipDurationMs, type: 'app-links' }}
|
||||
onconsider={handleDndConsider}
|
||||
onfinalize={handleDndFinalize}
|
||||
class="space-y-2"
|
||||
>
|
||||
{#each links as link (link.id)}
|
||||
<div
|
||||
animate:flip={{ duration: flipDurationMs }}
|
||||
class="flex items-center gap-2 rounded-md border border-border bg-card p-2"
|
||||
>
|
||||
<span class="cursor-grab text-muted-foreground">
|
||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="8" y1="6" x2="8" y2="6" />
|
||||
<line x1="16" y1="6" x2="16" y2="6" />
|
||||
<line x1="8" y1="12" x2="8" y2="12" />
|
||||
<line x1="16" y1="12" x2="16" y2="12" />
|
||||
<line x1="8" y1="18" x2="8" y2="18" />
|
||||
<line x1="16" y1="18" x2="16" y2="18" />
|
||||
</svg>
|
||||
</span>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm font-medium text-foreground">{link.label}</p>
|
||||
<p class="truncate text-xs text-muted-foreground">{link.url}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => removeLink(link.id)}
|
||||
class="flex-shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Add Link Form -->
|
||||
<div class="rounded-md border border-dashed border-border p-3">
|
||||
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={newLabel}
|
||||
placeholder="Link label"
|
||||
class="rounded-md border border-input bg-background px-2 py-1.5 text-sm text-foreground"
|
||||
/>
|
||||
<input
|
||||
type="url"
|
||||
bind:value={newUrl}
|
||||
placeholder="https://..."
|
||||
class="rounded-md border border-input bg-background px-2 py-1.5 text-sm text-foreground"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={newIcon}
|
||||
placeholder="Icon (optional)"
|
||||
class="flex-1 rounded-md border border-input bg-background px-2 py-1.5 text-sm text-foreground"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onclick={addLink}
|
||||
disabled={!newLabel.trim() || !newUrl.trim()}
|
||||
class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Save Button -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={saveLinks}
|
||||
disabled={saving}
|
||||
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save Links'}
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,169 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
url: string;
|
||||
currentIcon: string;
|
||||
currentName: string;
|
||||
onApplyFavicon?: (faviconUrl: string) => void;
|
||||
onApplyTitle?: (title: string) => void;
|
||||
}
|
||||
|
||||
let { url, currentIcon, currentName, onApplyFavicon, onApplyTitle }: Props = $props();
|
||||
|
||||
let loading = $state(false);
|
||||
let result = $state<{
|
||||
status: number;
|
||||
responseTime: number;
|
||||
favicon: string | null;
|
||||
title: string | null;
|
||||
error: string | null;
|
||||
} | null>(null);
|
||||
|
||||
const statusColor = $derived(() => {
|
||||
if (!result) return '';
|
||||
if (result.error) return 'text-destructive';
|
||||
if (result.status >= 200 && result.status < 300) return 'text-green-500';
|
||||
if (result.status >= 300 && result.status < 400) return 'text-yellow-500';
|
||||
return 'text-destructive';
|
||||
});
|
||||
|
||||
const canApplyFavicon = $derived(
|
||||
result?.favicon && !currentIcon && onApplyFavicon
|
||||
);
|
||||
|
||||
const canApplyTitle = $derived(
|
||||
result?.title && !currentName && onApplyTitle
|
||||
);
|
||||
|
||||
async function testConnection() {
|
||||
if (!url) return;
|
||||
|
||||
loading = true;
|
||||
result = null;
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/apps/preview', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ url })
|
||||
});
|
||||
|
||||
const json = await res.json();
|
||||
if (json.success && json.data) {
|
||||
result = json.data;
|
||||
} else {
|
||||
result = {
|
||||
status: 0,
|
||||
responseTime: 0,
|
||||
favicon: null,
|
||||
title: null,
|
||||
error: json.error ?? 'Preview failed'
|
||||
};
|
||||
}
|
||||
} catch {
|
||||
result = {
|
||||
status: 0,
|
||||
responseTime: 0,
|
||||
favicon: null,
|
||||
title: null,
|
||||
error: 'Failed to test connection'
|
||||
};
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="rounded-lg border border-border p-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onclick={testConnection}
|
||||
disabled={loading || !url}
|
||||
class="rounded-md bg-secondary px-3 py-1.5 text-xs font-medium text-secondary-foreground transition-colors hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{#if loading}
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<svg class="h-3 w-3 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>
|
||||
Testing...
|
||||
</span>
|
||||
{:else}
|
||||
Test Connection
|
||||
{/if}
|
||||
</button>
|
||||
{#if !url}
|
||||
<span class="text-xs text-muted-foreground">Enter a URL first</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if result}
|
||||
<div class="mt-3 space-y-2">
|
||||
{#if result.error}
|
||||
<div class="flex items-center gap-2 text-sm text-destructive">
|
||||
<svg class="h-4 w-4 shrink-0" 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">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="15" y1="9" x2="9" y2="15" />
|
||||
<line x1="9" y1="9" x2="15" y2="15" />
|
||||
</svg>
|
||||
<span>{result.error}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-2 gap-2 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-muted-foreground">Status:</span>
|
||||
<span class={statusColor()} class:font-medium={true}>
|
||||
{result.status}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-muted-foreground">Response:</span>
|
||||
<span class="font-medium text-foreground">{result.responseTime}ms</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if result.title}
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<span class="text-muted-foreground">Title:</span>
|
||||
<span class="truncate text-foreground">{result.title}</span>
|
||||
{#if canApplyTitle}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => onApplyTitle?.(result!.title!)}
|
||||
class="shrink-0 text-xs text-primary hover:underline"
|
||||
>
|
||||
Use as name
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if result.favicon}
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<span class="text-muted-foreground">Favicon:</span>
|
||||
<img
|
||||
src={result.favicon}
|
||||
alt="Detected favicon"
|
||||
class="h-4 w-4 shrink-0"
|
||||
onerror={(e) => {
|
||||
const target = e.currentTarget as HTMLImageElement;
|
||||
target.style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
<span class="max-w-[200px] truncate text-xs text-muted-foreground">{result.favicon}</span>
|
||||
{#if canApplyFavicon}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => onApplyFavicon?.(result!.favicon!)}
|
||||
class="shrink-0 text-xs text-primary hover:underline"
|
||||
>
|
||||
Use as icon
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
name: string;
|
||||
color?: string | null;
|
||||
size?: 'sm' | 'md';
|
||||
removable?: boolean;
|
||||
onRemove?: () => void;
|
||||
}
|
||||
|
||||
let { name, color = null, size = 'sm', removable = false, onRemove }: Props = $props();
|
||||
|
||||
const bgStyle = $derived(
|
||||
color
|
||||
? `background-color: ${color}20; border-color: ${color}40; color: ${color}`
|
||||
: ''
|
||||
);
|
||||
</script>
|
||||
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded-full border font-medium
|
||||
{size === 'sm' ? 'px-1.5 py-0.5 text-[10px]' : 'px-2 py-0.5 text-xs'}
|
||||
{color ? '' : 'border-border bg-muted text-muted-foreground'}"
|
||||
style={bgStyle}
|
||||
>
|
||||
{#if color}
|
||||
<span
|
||||
class="inline-block rounded-full {size === 'sm' ? 'h-1.5 w-1.5' : 'h-2 w-2'}"
|
||||
style="background-color: {color}"
|
||||
></span>
|
||||
{/if}
|
||||
{name}
|
||||
{#if removable && onRemove}
|
||||
<button
|
||||
type="button"
|
||||
onclick={onRemove}
|
||||
class="ml-0.5 rounded-full p-0.5 transition-colors hover:bg-black/10 dark:hover:bg-white/10"
|
||||
title="Remove tag"
|
||||
>
|
||||
<svg class="h-2.5 w-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
@@ -3,6 +3,15 @@
|
||||
import MeshGradient from './MeshGradient.svelte';
|
||||
import ParticleField from './ParticleField.svelte';
|
||||
import AuroraEffect from './AuroraEffect.svelte';
|
||||
import WallpaperBackground from './WallpaperBackground.svelte';
|
||||
|
||||
interface Props {
|
||||
wallpaperUrl?: string | null;
|
||||
wallpaperBlur?: number;
|
||||
wallpaperOverlay?: number;
|
||||
}
|
||||
|
||||
let { wallpaperUrl = null, wallpaperBlur = 0, wallpaperOverlay = 0.3 }: Props = $props();
|
||||
</script>
|
||||
|
||||
{#if theme.backgroundType !== 'none'}
|
||||
@@ -13,6 +22,8 @@
|
||||
<ParticleField />
|
||||
{:else if theme.backgroundType === 'aurora'}
|
||||
<AuroraEffect />
|
||||
{:else if theme.backgroundType === 'wallpaper' && wallpaperUrl}
|
||||
<WallpaperBackground url={wallpaperUrl} blur={wallpaperBlur} overlayOpacity={wallpaperOverlay} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
url: string;
|
||||
blur?: number;
|
||||
overlayOpacity?: number;
|
||||
parallax?: boolean;
|
||||
position?: 'fixed' | 'scroll';
|
||||
}
|
||||
|
||||
let {
|
||||
url,
|
||||
blur = 0,
|
||||
overlayOpacity = 0.3,
|
||||
parallax = false,
|
||||
position = 'fixed'
|
||||
}: Props = $props();
|
||||
|
||||
let loadError = $state(false);
|
||||
let loaded = $state(false);
|
||||
|
||||
function handleLoad() {
|
||||
loaded = true;
|
||||
loadError = false;
|
||||
}
|
||||
|
||||
function handleError() {
|
||||
loadError = true;
|
||||
loaded = false;
|
||||
}
|
||||
|
||||
const positionClass = $derived(position === 'fixed' ? 'fixed' : 'absolute');
|
||||
const blurValue = $derived(`${Math.max(0, Math.min(20, blur))}px`);
|
||||
const overlayAlpha = $derived(Math.max(0, Math.min(1, overlayOpacity)));
|
||||
</script>
|
||||
|
||||
{#if !loadError}
|
||||
<div
|
||||
class="pointer-events-none {positionClass} inset-0 z-0 overflow-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<!-- Wallpaper image -->
|
||||
<img
|
||||
src={url}
|
||||
alt=""
|
||||
onload={handleLoad}
|
||||
onerror={handleError}
|
||||
class="h-full w-full object-cover transition-opacity duration-500"
|
||||
class:opacity-0={!loaded}
|
||||
class:opacity-100={loaded}
|
||||
style="filter: blur({blurValue});{parallax ? ' transform: translateZ(0); will-change: transform;' : ''}"
|
||||
draggable="false"
|
||||
/>
|
||||
|
||||
<!-- Overlay -->
|
||||
{#if overlayAlpha > 0}
|
||||
<div
|
||||
class="absolute inset-0"
|
||||
style="background: rgba(0, 0, 0, {overlayAlpha});"
|
||||
></div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -36,12 +36,15 @@
|
||||
statuses: Array<{ status: string; responseTime: number | null }>;
|
||||
}
|
||||
|
||||
import type { CardSize } from '$lib/utils/constants.js';
|
||||
|
||||
interface Props {
|
||||
sections: SectionData[];
|
||||
allApps?: AppData[];
|
||||
boardCardSize?: CardSize;
|
||||
}
|
||||
|
||||
let { sections, allApps = [] }: Props = $props();
|
||||
let { sections, allApps = [], boardCardSize = 'medium' }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="space-y-6">
|
||||
@@ -51,7 +54,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
{#each sections as section (section.id)}
|
||||
<Section {section} {allApps} />
|
||||
<Section {section} {allApps} {boardCardSize} />
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy } from 'svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { theme } from '$lib/stores/theme.svelte.js';
|
||||
|
||||
interface BoardTheme {
|
||||
themeHue?: number | null;
|
||||
themeSaturation?: number | null;
|
||||
backgroundType?: string | null;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
board: BoardTheme;
|
||||
children: Snippet;
|
||||
}
|
||||
|
||||
let { board, children }: Props = $props();
|
||||
|
||||
let containerEl: HTMLDivElement | undefined = $state(undefined);
|
||||
|
||||
function restoreGlobalTheme() {
|
||||
if (typeof document === 'undefined') return;
|
||||
const html = document.documentElement;
|
||||
html.style.removeProperty('--board-primary-h');
|
||||
html.style.removeProperty('--board-primary-s');
|
||||
// Re-apply the global theme store values
|
||||
html.style.setProperty('--primary-h', String(theme.primaryHue));
|
||||
html.style.setProperty('--primary-s', `${theme.primarySaturation}%`);
|
||||
}
|
||||
|
||||
// Apply board-level theme overrides via CSS custom properties
|
||||
$effect(() => {
|
||||
if (typeof document === 'undefined') return;
|
||||
const html = document.documentElement;
|
||||
|
||||
if (board.themeHue != null) {
|
||||
html.style.setProperty('--board-primary-h', String(board.themeHue));
|
||||
html.style.setProperty('--primary-h', String(board.themeHue));
|
||||
}
|
||||
if (board.themeSaturation != null) {
|
||||
html.style.setProperty('--board-primary-s', `${board.themeSaturation}%`);
|
||||
html.style.setProperty('--primary-s', `${board.themeSaturation}%`);
|
||||
}
|
||||
|
||||
return () => {
|
||||
restoreGlobalTheme();
|
||||
};
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
restoreGlobalTheme();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div bind:this={containerEl} class="board-theme-scope">
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.board-theme-scope {
|
||||
transition: --primary-h 0.3s ease, --primary-s 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
@@ -39,6 +39,7 @@
|
||||
onDeleteSection: (sectionId: string) => void;
|
||||
onAddWidget: (sectionId: string, widgetData: string) => void;
|
||||
onDeleteWidget: (widgetId: string) => void;
|
||||
onUpdateSection?: (sectionId: string, data: Record<string, unknown>) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
@@ -49,7 +50,8 @@
|
||||
onToggleAddWidget,
|
||||
onDeleteSection,
|
||||
onAddWidget,
|
||||
onDeleteWidget
|
||||
onDeleteWidget,
|
||||
onUpdateSection
|
||||
}: Props = $props();
|
||||
|
||||
let sections = $state<SectionData[]>([...initialSections]);
|
||||
@@ -135,6 +137,7 @@
|
||||
{onDeleteSection}
|
||||
{onAddWidget}
|
||||
{onDeleteWidget}
|
||||
{onUpdateSection}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { theme } from '$lib/stores/theme.svelte.js';
|
||||
|
||||
interface RecentApp {
|
||||
readonly id: string;
|
||||
readonly appId: string;
|
||||
readonly clickedAt: string;
|
||||
readonly app: {
|
||||
readonly id: string;
|
||||
readonly name: string;
|
||||
readonly url: string;
|
||||
readonly icon: string | null;
|
||||
readonly iconType: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface Props {
|
||||
trackRecentApps?: boolean;
|
||||
}
|
||||
|
||||
let { trackRecentApps = true }: Props = $props();
|
||||
|
||||
let recentApps = $state<RecentApp[]>([]);
|
||||
let loading = $state(true);
|
||||
let expanded = $state(true);
|
||||
|
||||
const cardStyleClass = $derived(`card-${theme.cardStyle}`);
|
||||
|
||||
onMount(async () => {
|
||||
if (!trackRecentApps) {
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/recent-apps?limit=10');
|
||||
if (res.ok) {
|
||||
const json = await res.json();
|
||||
if (json.success && Array.isArray(json.data)) {
|
||||
recentApps = json.data;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Silently fail — recent apps is non-critical
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
});
|
||||
|
||||
async function clearHistory() {
|
||||
try {
|
||||
const res = await fetch('/api/recent-apps', { method: 'DELETE' });
|
||||
if (res.ok) {
|
||||
recentApps = [];
|
||||
}
|
||||
} catch {
|
||||
// Silently fail
|
||||
}
|
||||
}
|
||||
|
||||
function formatTimeAgo(dateStr: string): string {
|
||||
const diff = Date.now() - new Date(dateStr).getTime();
|
||||
const minutes = Math.floor(diff / 60_000);
|
||||
if (minutes < 1) return 'just now';
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d ago`;
|
||||
}
|
||||
|
||||
function getIconSrc(app: RecentApp['app']): string | null {
|
||||
if (!app.icon) return null;
|
||||
switch (app.iconType) {
|
||||
case 'url':
|
||||
return app.icon;
|
||||
case 'simple': {
|
||||
const slug = app.icon.toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
return `https://cdn.simpleicons.org/${slug}`;
|
||||
}
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if trackRecentApps && !loading && recentApps.length > 0}
|
||||
<div class="mb-6">
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
|
||||
onclick={() => (expanded = !expanded)}
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4 transition-transform duration-200"
|
||||
class:rotate-90={expanded}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
Recently Used
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs text-muted-foreground transition-colors hover:text-destructive"
|
||||
onclick={clearHistory}
|
||||
>
|
||||
Clear history
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if expanded}
|
||||
<div class="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-6">
|
||||
{#each recentApps as recent (recent.id)}
|
||||
<a
|
||||
href={recent.app.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="group flex items-center gap-2 rounded-lg {cardStyleClass} px-3 py-2 transition-colors hover:border-primary/50"
|
||||
onclick={() => {
|
||||
fetch('/api/recent-apps', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ appId: recent.app.id })
|
||||
});
|
||||
}}
|
||||
>
|
||||
<span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted">
|
||||
{#if recent.app.iconType === 'emoji' && recent.app.icon}
|
||||
<span class="text-sm">{recent.app.icon}</span>
|
||||
{:else if getIconSrc(recent.app)}
|
||||
<img src={getIconSrc(recent.app)} alt="" class="h-4 w-4 object-contain" />
|
||||
{:else}
|
||||
<span class="text-[10px] font-bold text-muted-foreground">
|
||||
{recent.app.name.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-xs font-medium text-foreground group-hover:text-primary">
|
||||
{recent.app.name}
|
||||
</p>
|
||||
<p class="text-[10px] text-muted-foreground">
|
||||
{formatTimeAgo(recent.clickedAt)}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,81 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
interface Tag {
|
||||
id: string;
|
||||
name: string;
|
||||
color: string | null;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
activeTags: string[];
|
||||
onFilterChange: (tagIds: string[]) => void;
|
||||
}
|
||||
|
||||
let { activeTags = [], onFilterChange }: Props = $props();
|
||||
|
||||
let tags = $state<Tag[]>([]);
|
||||
let loading = $state(true);
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/tags');
|
||||
if (res.ok) {
|
||||
const json = await res.json();
|
||||
if (json.success && Array.isArray(json.data)) {
|
||||
tags = json.data;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Silently fail
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
});
|
||||
|
||||
function toggleTag(tagId: string) {
|
||||
const isActive = activeTags.includes(tagId);
|
||||
const updated = isActive
|
||||
? activeTags.filter((id) => id !== tagId)
|
||||
: [...activeTags, tagId];
|
||||
onFilterChange(updated);
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
onFilterChange([]);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if !loading && tags.length > 0}
|
||||
<div class="mb-4 flex flex-wrap items-center gap-2">
|
||||
<span class="text-xs font-medium text-muted-foreground">Filter:</span>
|
||||
{#each tags as tag (tag.id)}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => toggleTag(tag.id)}
|
||||
class="inline-flex items-center gap-1 rounded-full border px-2 py-1 text-xs font-medium transition-colors
|
||||
{activeTags.includes(tag.id)
|
||||
? 'border-primary bg-primary/10 text-primary'
|
||||
: 'border-border bg-muted/50 text-muted-foreground hover:bg-muted'}"
|
||||
>
|
||||
{#if tag.color}
|
||||
<span
|
||||
class="inline-block h-2 w-2 rounded-full"
|
||||
style="background-color: {tag.color}"
|
||||
></span>
|
||||
{/if}
|
||||
{tag.name}
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
{#if activeTags.length > 0}
|
||||
<button
|
||||
type="button"
|
||||
onclick={clearFilters}
|
||||
class="text-xs text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Clear filters
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,47 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
css: string;
|
||||
}
|
||||
|
||||
let { css }: Props = $props();
|
||||
|
||||
/**
|
||||
* Sanitize CSS to prevent XSS vectors while keeping valid styling rules.
|
||||
* All custom CSS is wrapped in .custom-css-scope to prevent breaking critical UI.
|
||||
*/
|
||||
const sanitizedCss = $derived.by(() => {
|
||||
if (!css) return '';
|
||||
|
||||
let cleaned = css;
|
||||
|
||||
// Remove any HTML tags (including <script>)
|
||||
cleaned = cleaned.replace(/<\/?[^>]+(>|$)/g, '');
|
||||
|
||||
// Remove javascript: URLs
|
||||
cleaned = cleaned.replace(/javascript\s*:/gi, '');
|
||||
|
||||
// Remove expression() calls
|
||||
cleaned = cleaned.replace(/expression\s*\(/gi, '');
|
||||
|
||||
// Remove url() with javascript:
|
||||
cleaned = cleaned.replace(/url\s*\(\s*['"]?\s*javascript:/gi, 'url(');
|
||||
|
||||
// Remove @import rules
|
||||
cleaned = cleaned.replace(/@import\s+[^;]+;?/gi, '');
|
||||
|
||||
// Remove behavior: (IE XSS)
|
||||
cleaned = cleaned.replace(/behavior\s*:/gi, '');
|
||||
|
||||
// Remove -moz-binding (Firefox XSS)
|
||||
cleaned = cleaned.replace(/-moz-binding\s*:/gi, '');
|
||||
|
||||
return cleaned;
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if sanitizedCss}
|
||||
<div class="custom-css-scope contents" aria-hidden="true">
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -- CSS is sanitized -->
|
||||
{@html `<style>${sanitizedCss}</style>`}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,114 @@
|
||||
<script lang="ts">
|
||||
import { favorites } from '$lib/stores/favorites.svelte.js';
|
||||
import { dndzone } from 'svelte-dnd-action';
|
||||
import { flip } from 'svelte/animate';
|
||||
|
||||
const flipDurationMs = 200;
|
||||
|
||||
interface DndItem {
|
||||
id: string;
|
||||
appId: string;
|
||||
order: number;
|
||||
app: {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
icon: string | null;
|
||||
iconType: string;
|
||||
};
|
||||
}
|
||||
|
||||
let dndItems = $state<DndItem[]>([]);
|
||||
|
||||
// Sync dndItems with store items
|
||||
$effect(() => {
|
||||
dndItems = favorites.items.map((f) => ({ ...f }));
|
||||
});
|
||||
|
||||
function handleDndConsider(e: CustomEvent<{ items: DndItem[] }>) {
|
||||
dndItems = e.detail.items;
|
||||
}
|
||||
|
||||
function handleDndFinalize(e: CustomEvent<{ items: DndItem[] }>) {
|
||||
dndItems = e.detail.items;
|
||||
const ids = dndItems.map((item) => item.id);
|
||||
favorites.reorder(ids);
|
||||
}
|
||||
|
||||
function handleRemove(e: MouseEvent, appId: string) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
favorites.remove(appId);
|
||||
}
|
||||
|
||||
function getIconSrc(app: DndItem['app']): string | null {
|
||||
if (!app.icon) return null;
|
||||
switch (app.iconType) {
|
||||
case 'url':
|
||||
return app.icon;
|
||||
case 'simple': {
|
||||
const slug = app.icon.toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
return `https://cdn.simpleicons.org/${slug}`;
|
||||
}
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if favorites.hasFavorites}
|
||||
<div class="mb-4 rounded-lg border border-border bg-card/50 px-3 py-2 backdrop-blur-sm">
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-2"
|
||||
use:dndzone={{
|
||||
items: dndItems,
|
||||
flipDurationMs,
|
||||
type: 'favorites-bar',
|
||||
dropTargetStyle: { outline: 'none' }
|
||||
}}
|
||||
onconsider={handleDndConsider}
|
||||
onfinalize={handleDndFinalize}
|
||||
>
|
||||
{#each dndItems as item (item.id)}
|
||||
<div animate:flip={{ duration: flipDurationMs }}>
|
||||
<a
|
||||
href={item.app.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="group relative flex items-center gap-1.5 rounded-md bg-muted/50 px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
title={item.app.name}
|
||||
oncontextmenu={(e) => handleRemove(e, item.appId)}
|
||||
>
|
||||
<span class="flex h-5 w-5 shrink-0 items-center justify-center rounded">
|
||||
{#if item.app.iconType === 'emoji' && item.app.icon}
|
||||
<span class="text-sm">{item.app.icon}</span>
|
||||
{:else if getIconSrc(item.app)}
|
||||
<img
|
||||
src={getIconSrc(item.app)}
|
||||
alt=""
|
||||
class="h-4 w-4 object-contain"
|
||||
/>
|
||||
{:else}
|
||||
<span class="text-[10px] font-bold text-muted-foreground">
|
||||
{item.app.name.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
<span class="max-w-[80px] truncate">{item.app.name}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-0.5 hidden rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-destructive/20 hover:text-destructive group-hover:inline-flex"
|
||||
onclick={(e) => handleRemove(e, item.appId)}
|
||||
title="Remove from favorites"
|
||||
>
|
||||
<svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -3,6 +3,7 @@
|
||||
import ThemeToggle from './ThemeToggle.svelte';
|
||||
import LanguageSwitcher from './LanguageSwitcher.svelte';
|
||||
import SearchTrigger from '$lib/components/search/SearchTrigger.svelte';
|
||||
import NotificationBell from '$lib/components/notifications/NotificationBell.svelte';
|
||||
import { ui } from '$lib/stores/ui.svelte.js';
|
||||
import { theme, type BackgroundType } from '$lib/stores/theme.svelte.js';
|
||||
|
||||
@@ -128,6 +129,11 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Notifications bell (authenticated users only) -->
|
||||
{#if user}
|
||||
<NotificationBell />
|
||||
{/if}
|
||||
|
||||
<!-- Theme toggle -->
|
||||
<ThemeToggle />
|
||||
|
||||
@@ -182,6 +188,27 @@
|
||||
{$t('settings.title')}
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/settings/api-tokens"
|
||||
onclick={() => (showUserMenu = false)}
|
||||
class="flex w-full items-center gap-2 rounded-sm px-3 py-1.5 text-sm text-popover-foreground transition-colors hover:bg-accent"
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4"
|
||||
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="11" width="18" height="11" rx="2" ry="2" />
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
||||
</svg>
|
||||
API Tokens
|
||||
</a>
|
||||
|
||||
<form method="POST" action="/auth/logout">
|
||||
<button
|
||||
type="submit"
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { t } from 'svelte-i18n';
|
||||
import { ui } from '$lib/stores/ui.svelte.js';
|
||||
import { keyboard } from '$lib/stores/keyboard.svelte.js';
|
||||
import { page } from '$app/stores';
|
||||
import DynamicIcon from '$lib/components/ui/DynamicIcon.svelte';
|
||||
|
||||
@@ -129,6 +130,28 @@
|
||||
</svg>
|
||||
{#if !collapsed}<span>{$t('nav.apps')}</span>{/if}
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/status"
|
||||
class="flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors {isActive('/status')
|
||||
? 'bg-sidebar-accent text-sidebar-accent-foreground'
|
||||
: 'text-sidebar-foreground hover:bg-sidebar-accent/50'}"
|
||||
title={collapsed ? 'Status Page' : undefined}
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4 shrink-0"
|
||||
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"
|
||||
>
|
||||
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
|
||||
</svg>
|
||||
{#if !collapsed}<span>Status</span>{/if}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Board List -->
|
||||
@@ -207,9 +230,30 @@
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
<!-- Collapse Toggle (desktop only) -->
|
||||
<!-- Keyboard Shortcuts Hint + Collapse Toggle -->
|
||||
{#if !ui.isMobile}
|
||||
<div class="border-t border-sidebar-border p-2">
|
||||
<div class="border-t border-sidebar-border p-2 flex items-center {collapsed ? 'flex-col gap-1' : 'gap-1'}">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => keyboard.toggleOverlay()}
|
||||
class="flex items-center justify-center rounded-md p-2 text-sidebar-foreground/50 transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
|
||||
title="Keyboard Shortcuts (?)"
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4"
|
||||
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"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
|
||||
<line x1="12" y1="17" x2="12.01" y2="17" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => ui.toggleSidebar()}
|
||||
|
||||
@@ -0,0 +1,175 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { notifications } from '$lib/stores/notifications.svelte.js';
|
||||
|
||||
let showDropdown = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
notifications.load();
|
||||
notifications.startPolling();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
notifications.stopPolling();
|
||||
});
|
||||
|
||||
function handleClickOutside(e: MouseEvent) {
|
||||
const target = e.target as HTMLElement;
|
||||
if (!target.closest('.notification-bell-container')) {
|
||||
showDropdown = false;
|
||||
}
|
||||
}
|
||||
|
||||
function formatTime(dateStr: string): string {
|
||||
const diff = Date.now() - new Date(dateStr).getTime();
|
||||
const minutes = Math.floor(diff / 60_000);
|
||||
if (minutes < 1) return 'just now';
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d ago`;
|
||||
}
|
||||
|
||||
function eventLabel(event: string): string {
|
||||
switch (event) {
|
||||
case 'app_online':
|
||||
return 'Online';
|
||||
case 'app_offline':
|
||||
return 'Offline';
|
||||
case 'app_degraded':
|
||||
return 'Degraded';
|
||||
default:
|
||||
return event;
|
||||
}
|
||||
}
|
||||
|
||||
function eventColor(event: string): string {
|
||||
switch (event) {
|
||||
case 'app_online':
|
||||
return 'text-green-500';
|
||||
case 'app_offline':
|
||||
return 'text-red-500';
|
||||
case 'app_degraded':
|
||||
return 'text-yellow-500';
|
||||
default:
|
||||
return 'text-muted-foreground';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onclick={handleClickOutside} />
|
||||
|
||||
<div class="notification-bell-container relative">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (showDropdown = !showDropdown)}
|
||||
class="relative inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
title="Notifications"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<!-- Bell Icon -->
|
||||
<svg
|
||||
class="h-5 w-5"
|
||||
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"
|
||||
>
|
||||
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
|
||||
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
|
||||
</svg>
|
||||
|
||||
<!-- Unread Badge -->
|
||||
{#if notifications.hasUnread}
|
||||
<span
|
||||
class="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-bold text-destructive-foreground"
|
||||
>
|
||||
{notifications.unreadCount > 99 ? '99+' : notifications.unreadCount}
|
||||
</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if showDropdown}
|
||||
<div
|
||||
class="absolute right-0 top-full z-50 mt-1 w-80 rounded-lg border border-border bg-popover shadow-lg"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between border-b border-border px-4 py-3">
|
||||
<h3 class="text-sm font-semibold text-popover-foreground">Notifications</h3>
|
||||
{#if notifications.hasUnread}
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs text-primary transition-colors hover:text-primary/80"
|
||||
onclick={() => notifications.markAllAsRead()}
|
||||
>
|
||||
Mark all as read
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Notification List -->
|
||||
<div class="max-h-80 overflow-y-auto">
|
||||
{#if notifications.items.length === 0}
|
||||
<div class="p-6 text-center">
|
||||
<p class="text-sm text-muted-foreground">No notifications yet</p>
|
||||
</div>
|
||||
{:else}
|
||||
{#each notifications.items as notification (notification.id)}
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-accent/50 {notification.readAt === null ? 'bg-primary/5' : ''}"
|
||||
onclick={() => {
|
||||
if (notification.readAt === null) {
|
||||
notifications.markAsRead(notification.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<!-- Unread dot -->
|
||||
<span class="mt-1.5 flex-shrink-0">
|
||||
{#if notification.readAt === null}
|
||||
<span class="inline-block h-2 w-2 rounded-full bg-primary"></span>
|
||||
{:else}
|
||||
<span class="inline-block h-2 w-2"></span>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-xs font-medium {eventColor(notification.event)}">
|
||||
{eventLabel(notification.event)}
|
||||
</span>
|
||||
{#if notification.app}
|
||||
<span class="truncate text-xs text-muted-foreground">
|
||||
{notification.app.name}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="mt-0.5 line-clamp-2 text-xs text-popover-foreground">
|
||||
{notification.message}
|
||||
</p>
|
||||
<p class="mt-1 text-[10px] text-muted-foreground">
|
||||
{formatTime(notification.sentAt)}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="border-t border-border p-2">
|
||||
<a
|
||||
href="/settings/notifications"
|
||||
class="block rounded-md px-3 py-1.5 text-center text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
onclick={() => (showDropdown = false)}
|
||||
>
|
||||
Manage notifications
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,257 @@
|
||||
<script lang="ts">
|
||||
import { NotificationType } from '$lib/utils/constants.js';
|
||||
|
||||
interface ChannelData {
|
||||
readonly id?: string;
|
||||
readonly type: string;
|
||||
readonly config: string;
|
||||
readonly enabled: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
channel?: ChannelData | null;
|
||||
onSave: (data: { type: string; config: string; enabled: boolean }) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
let { channel = null, onSave, onCancel }: Props = $props();
|
||||
|
||||
let channelType = $state(channel?.type ?? NotificationType.DISCORD);
|
||||
let enabled = $state(channel?.enabled ?? true);
|
||||
let testing = $state(false);
|
||||
let testResult = $state<string | null>(null);
|
||||
|
||||
// Dynamic config fields
|
||||
let discordWebhookUrl = $state('');
|
||||
let slackWebhookUrl = $state('');
|
||||
let telegramBotToken = $state('');
|
||||
let telegramChatId = $state('');
|
||||
let httpUrl = $state('');
|
||||
let httpMethod = $state('POST');
|
||||
|
||||
// Parse existing config
|
||||
if (channel?.config) {
|
||||
try {
|
||||
const parsed = JSON.parse(channel.config);
|
||||
switch (channel.type) {
|
||||
case 'discord':
|
||||
discordWebhookUrl = parsed.webhookUrl ?? '';
|
||||
break;
|
||||
case 'slack':
|
||||
slackWebhookUrl = parsed.webhookUrl ?? '';
|
||||
break;
|
||||
case 'telegram':
|
||||
telegramBotToken = parsed.botToken ?? '';
|
||||
telegramChatId = parsed.chatId ?? '';
|
||||
break;
|
||||
case 'http':
|
||||
httpUrl = parsed.url ?? '';
|
||||
httpMethod = parsed.method ?? 'POST';
|
||||
break;
|
||||
}
|
||||
} catch {
|
||||
// Invalid config
|
||||
}
|
||||
}
|
||||
|
||||
function buildConfig(): string {
|
||||
switch (channelType) {
|
||||
case 'discord':
|
||||
return JSON.stringify({ webhookUrl: discordWebhookUrl });
|
||||
case 'slack':
|
||||
return JSON.stringify({ webhookUrl: slackWebhookUrl });
|
||||
case 'telegram':
|
||||
return JSON.stringify({ botToken: telegramBotToken, chatId: telegramChatId });
|
||||
case 'http':
|
||||
return JSON.stringify({ url: httpUrl, method: httpMethod });
|
||||
default:
|
||||
return '{}';
|
||||
}
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
onSave({
|
||||
type: channelType,
|
||||
config: buildConfig(),
|
||||
enabled
|
||||
});
|
||||
}
|
||||
|
||||
async function sendTest() {
|
||||
if (!channel?.id) return;
|
||||
testing = true;
|
||||
testResult = null;
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/notifications/channels/${channel.id}/test`, {
|
||||
method: 'POST'
|
||||
});
|
||||
if (res.ok) {
|
||||
testResult = 'Test notification sent successfully!';
|
||||
} else {
|
||||
const json = await res.json();
|
||||
testResult = `Failed: ${json.error ?? 'Unknown error'}`;
|
||||
}
|
||||
} catch {
|
||||
testResult = 'Failed: Network error';
|
||||
} finally {
|
||||
testing = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="rounded-lg border border-border bg-card p-6">
|
||||
<h3 class="mb-4 text-lg font-semibold text-card-foreground">
|
||||
{channel ? 'Edit Channel' : 'Add Notification Channel'}
|
||||
</h3>
|
||||
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
|
||||
<!-- Channel Type -->
|
||||
<div>
|
||||
<label for="channel-type" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Channel Type
|
||||
</label>
|
||||
<select
|
||||
id="channel-type"
|
||||
bind:value={channelType}
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
|
||||
>
|
||||
<option value="discord">Discord</option>
|
||||
<option value="slack">Slack</option>
|
||||
<option value="telegram">Telegram</option>
|
||||
<option value="http">HTTP Webhook</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic Fields -->
|
||||
{#if channelType === 'discord'}
|
||||
<div>
|
||||
<label for="discord-url" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Webhook URL
|
||||
</label>
|
||||
<input
|
||||
id="discord-url"
|
||||
type="url"
|
||||
bind:value={discordWebhookUrl}
|
||||
placeholder="https://discord.com/api/webhooks/..."
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{:else if channelType === 'slack'}
|
||||
<div>
|
||||
<label for="slack-url" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Webhook URL
|
||||
</label>
|
||||
<input
|
||||
id="slack-url"
|
||||
type="url"
|
||||
bind:value={slackWebhookUrl}
|
||||
placeholder="https://hooks.slack.com/services/..."
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{:else if channelType === 'telegram'}
|
||||
<div>
|
||||
<label for="tg-token" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Bot Token
|
||||
</label>
|
||||
<input
|
||||
id="tg-token"
|
||||
type="text"
|
||||
bind:value={telegramBotToken}
|
||||
placeholder="123456:ABC-DEF..."
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="tg-chat" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Chat ID
|
||||
</label>
|
||||
<input
|
||||
id="tg-chat"
|
||||
type="text"
|
||||
bind:value={telegramChatId}
|
||||
placeholder="-1001234567890"
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{:else if channelType === 'http'}
|
||||
<div>
|
||||
<label for="http-url" class="mb-1 block text-sm font-medium text-foreground">
|
||||
URL
|
||||
</label>
|
||||
<input
|
||||
id="http-url"
|
||||
type="url"
|
||||
bind:value={httpUrl}
|
||||
placeholder="https://example.com/webhook"
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="http-method" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Method
|
||||
</label>
|
||||
<select
|
||||
id="http-method"
|
||||
bind:value={httpMethod}
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
|
||||
>
|
||||
<option value="POST">POST</option>
|
||||
<option value="PUT">PUT</option>
|
||||
<option value="PATCH">PATCH</option>
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Enabled Toggle -->
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
id="channel-enabled"
|
||||
type="checkbox"
|
||||
bind:checked={enabled}
|
||||
class="h-4 w-4 rounded border-input"
|
||||
/>
|
||||
<label for="channel-enabled" class="text-sm text-foreground">Enabled</label>
|
||||
</div>
|
||||
|
||||
<!-- Test Result -->
|
||||
{#if testResult}
|
||||
<p class="text-sm {testResult.startsWith('Failed') ? 'text-destructive' : 'text-green-500'}">
|
||||
{testResult}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
{channel ? 'Update' : 'Create'} Channel
|
||||
</button>
|
||||
{#if channel?.id}
|
||||
<button
|
||||
type="button"
|
||||
onclick={sendTest}
|
||||
disabled={testing}
|
||||
class="rounded-md border border-input px-4 py-2 text-sm font-medium text-foreground hover:bg-accent disabled:opacity-50"
|
||||
>
|
||||
{testing ? 'Sending...' : 'Send Test'}
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
onclick={onCancel}
|
||||
class="rounded-md px-4 py-2 text-sm text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,169 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
interface NotificationItem {
|
||||
readonly id: string;
|
||||
readonly appId: string | null;
|
||||
readonly event: string;
|
||||
readonly message: string;
|
||||
readonly sentAt: string;
|
||||
readonly readAt: string | null;
|
||||
readonly app?: {
|
||||
readonly name: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
let allNotifications = $state<NotificationItem[]>([]);
|
||||
let loading = $state(true);
|
||||
let currentPage = $state(1);
|
||||
let hasMore = $state(false);
|
||||
let filterEvent = $state('');
|
||||
let filterAppId = $state('');
|
||||
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
async function loadNotifications(page: number = 1) {
|
||||
loading = true;
|
||||
try {
|
||||
// eslint-disable-next-line svelte/prefer-svelte-reactivity
|
||||
const params = new URLSearchParams({
|
||||
limit: String(PAGE_SIZE),
|
||||
offset: String((page - 1) * PAGE_SIZE)
|
||||
});
|
||||
if (filterEvent) params.set('event', filterEvent);
|
||||
if (filterAppId) params.set('appId', filterAppId);
|
||||
|
||||
const res = await fetch(`/api/notifications?${params.toString()}`);
|
||||
if (res.ok) {
|
||||
const json = await res.json();
|
||||
if (json.success && Array.isArray(json.data)) {
|
||||
allNotifications = json.data;
|
||||
hasMore = json.data.length === PAGE_SIZE;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Silently fail
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
loadNotifications();
|
||||
});
|
||||
|
||||
function changePage(delta: number) {
|
||||
currentPage = Math.max(1, currentPage + delta);
|
||||
loadNotifications(currentPage);
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
currentPage = 1;
|
||||
loadNotifications(1);
|
||||
}
|
||||
|
||||
function eventLabel(event: string): string {
|
||||
switch (event) {
|
||||
case 'app_online': return 'Online';
|
||||
case 'app_offline': return 'Offline';
|
||||
case 'app_degraded': return 'Degraded';
|
||||
default: return event;
|
||||
}
|
||||
}
|
||||
|
||||
function eventBadgeClass(event: string): string {
|
||||
switch (event) {
|
||||
case 'app_online': return 'bg-green-500/10 text-green-500';
|
||||
case 'app_offline': return 'bg-red-500/10 text-red-500';
|
||||
case 'app_degraded': return 'bg-yellow-500/10 text-yellow-500';
|
||||
default: return 'bg-muted text-muted-foreground';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<!-- Filters -->
|
||||
<div class="mb-4 flex flex-wrap items-center gap-3">
|
||||
<select
|
||||
bind:value={filterEvent}
|
||||
onchange={applyFilters}
|
||||
class="rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground"
|
||||
>
|
||||
<option value="">All Events</option>
|
||||
<option value="app_online">Online</option>
|
||||
<option value="app_offline">Offline</option>
|
||||
<option value="app_degraded">Degraded</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
{#if loading}
|
||||
<div class="py-12 text-center text-muted-foreground">Loading...</div>
|
||||
{:else if allNotifications.length === 0}
|
||||
<div class="rounded-xl border border-border bg-card/50 p-12 text-center">
|
||||
<p class="text-muted-foreground">No notifications found</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto rounded-lg border border-border">
|
||||
<table class="w-full text-left text-sm">
|
||||
<thead class="border-b border-border bg-muted/50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 font-medium text-muted-foreground">Time</th>
|
||||
<th class="px-4 py-3 font-medium text-muted-foreground">Event</th>
|
||||
<th class="px-4 py-3 font-medium text-muted-foreground">App</th>
|
||||
<th class="px-4 py-3 font-medium text-muted-foreground">Message</th>
|
||||
<th class="px-4 py-3 font-medium text-muted-foreground">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each allNotifications as notification (notification.id)}
|
||||
<tr class="border-b border-border last:border-0">
|
||||
<td class="whitespace-nowrap px-4 py-3 text-xs text-muted-foreground">
|
||||
{new Date(notification.sentAt).toLocaleString()}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-block rounded-full px-2 py-0.5 text-xs font-medium {eventBadgeClass(notification.event)}">
|
||||
{eventLabel(notification.event)}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-foreground">
|
||||
{notification.app?.name ?? '—'}
|
||||
</td>
|
||||
<td class="max-w-xs truncate px-4 py-3 text-sm text-foreground">
|
||||
{notification.message}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
{#if notification.readAt}
|
||||
<span class="text-xs text-muted-foreground">Read</span>
|
||||
{:else}
|
||||
<span class="text-xs font-medium text-primary">Unread</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<button
|
||||
type="button"
|
||||
disabled={currentPage === 1}
|
||||
onclick={() => changePage(-1)}
|
||||
class="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span class="text-sm text-muted-foreground">Page {currentPage}</span>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!hasMore}
|
||||
onclick={() => changePage(1)}
|
||||
class="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,436 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
const STEPS = ['welcome', 'admin', 'authMode', 'theme', 'complete'] as const;
|
||||
type Step = (typeof STEPS)[number];
|
||||
|
||||
let currentStep = $state<Step>('welcome');
|
||||
let loading = $state(false);
|
||||
let errorMsg = $state<string | null>(null);
|
||||
|
||||
// Admin form
|
||||
let adminEmail = $state('');
|
||||
let adminPassword = $state('');
|
||||
let adminDisplayName = $state('');
|
||||
let adminCreated = $state(false);
|
||||
|
||||
// Auth mode form
|
||||
let authMode = $state<'local' | 'oauth' | 'both'>('local');
|
||||
let oauthClientId = $state('');
|
||||
let oauthClientSecret = $state('');
|
||||
let oauthDiscoveryUrl = $state('');
|
||||
|
||||
// Theme form
|
||||
let defaultTheme = $state<'dark' | 'light'>('dark');
|
||||
let defaultPrimaryColor = $state('#6366f1');
|
||||
|
||||
// Board form
|
||||
let boardName = $state('My Dashboard');
|
||||
|
||||
const currentStepIndex = $derived(STEPS.indexOf(currentStep));
|
||||
const isFirstStep = $derived(currentStepIndex === 0);
|
||||
const isLastStep = $derived(currentStepIndex === STEPS.length - 1);
|
||||
|
||||
function goBack() {
|
||||
if (currentStepIndex > 0) {
|
||||
currentStep = STEPS[currentStepIndex - 1];
|
||||
errorMsg = null;
|
||||
}
|
||||
}
|
||||
|
||||
function skipStep() {
|
||||
if (currentStepIndex < STEPS.length - 1) {
|
||||
currentStep = STEPS[currentStepIndex + 1];
|
||||
errorMsg = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleNext() {
|
||||
errorMsg = null;
|
||||
loading = true;
|
||||
|
||||
try {
|
||||
switch (currentStep) {
|
||||
case 'welcome':
|
||||
currentStep = 'admin';
|
||||
break;
|
||||
|
||||
case 'admin': {
|
||||
if (adminCreated) {
|
||||
currentStep = 'authMode';
|
||||
break;
|
||||
}
|
||||
|
||||
if (!adminEmail || !adminPassword || !adminDisplayName) {
|
||||
errorMsg = 'All fields are required';
|
||||
break;
|
||||
}
|
||||
|
||||
const adminRes = await fetch('/api/onboarding', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
step: 'admin',
|
||||
data: {
|
||||
email: adminEmail,
|
||||
password: adminPassword,
|
||||
displayName: adminDisplayName
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const adminJson = await adminRes.json();
|
||||
if (!adminJson.success) {
|
||||
errorMsg = adminJson.error ?? 'Failed to create admin account';
|
||||
break;
|
||||
}
|
||||
|
||||
adminCreated = true;
|
||||
currentStep = 'authMode';
|
||||
break;
|
||||
}
|
||||
|
||||
case 'authMode': {
|
||||
const authRes = await fetch('/api/onboarding', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
step: 'authMode',
|
||||
data: {
|
||||
authMode,
|
||||
...(authMode !== 'local'
|
||||
? {
|
||||
oauthClientId: oauthClientId || undefined,
|
||||
oauthClientSecret: oauthClientSecret || undefined,
|
||||
oauthDiscoveryUrl: oauthDiscoveryUrl || undefined
|
||||
}
|
||||
: {})
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const authJson = await authRes.json();
|
||||
if (!authJson.success) {
|
||||
errorMsg = authJson.error ?? 'Failed to set auth mode';
|
||||
break;
|
||||
}
|
||||
|
||||
currentStep = 'theme';
|
||||
break;
|
||||
}
|
||||
|
||||
case 'theme': {
|
||||
const themeRes = await fetch('/api/onboarding', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
step: 'theme',
|
||||
data: { defaultTheme, defaultPrimaryColor }
|
||||
})
|
||||
});
|
||||
|
||||
const themeJson = await themeRes.json();
|
||||
if (!themeJson.success) {
|
||||
errorMsg = themeJson.error ?? 'Failed to save theme';
|
||||
break;
|
||||
}
|
||||
|
||||
currentStep = 'complete';
|
||||
break;
|
||||
}
|
||||
|
||||
case 'complete': {
|
||||
const completeRes = await fetch('/api/onboarding', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
step: 'complete',
|
||||
data: {
|
||||
boardName: boardName || undefined
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const completeJson = await completeRes.json();
|
||||
if (!completeJson.success) {
|
||||
errorMsg = completeJson.error ?? 'Failed to complete onboarding';
|
||||
break;
|
||||
}
|
||||
|
||||
// Redirect to login page
|
||||
goto('/login');
|
||||
break;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
errorMsg = 'An unexpected error occurred';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
const primaryColorOptions = [
|
||||
{ label: 'Indigo', value: '#6366f1' },
|
||||
{ label: 'Blue', value: '#3b82f6' },
|
||||
{ label: 'Emerald', value: '#10b981' },
|
||||
{ label: 'Rose', value: '#f43f5e' },
|
||||
{ label: 'Amber', value: '#f59e0b' },
|
||||
{ label: 'Violet', value: '#8b5cf6' },
|
||||
{ label: 'Cyan', value: '#06b6d4' },
|
||||
{ label: 'Orange', value: '#f97316' }
|
||||
] as const;
|
||||
</script>
|
||||
|
||||
<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm">
|
||||
<div
|
||||
class="mx-4 w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl"
|
||||
>
|
||||
<!-- Progress bar -->
|
||||
<div class="border-b border-border px-6 py-4">
|
||||
<div class="mb-2 flex justify-between text-xs text-muted-foreground">
|
||||
{#each STEPS as step, i (step)}
|
||||
<span
|
||||
class="font-medium capitalize"
|
||||
class:text-primary={i <= currentStepIndex}
|
||||
class:text-muted-foreground={i > currentStepIndex}
|
||||
>
|
||||
{step === 'authMode' ? 'Auth' : step}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="h-1.5 w-full rounded-full bg-muted">
|
||||
<div
|
||||
class="h-full rounded-full bg-primary transition-all duration-300"
|
||||
style="width: {((currentStepIndex + 1) / STEPS.length) * 100}%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step content -->
|
||||
<div class="px-6 py-6">
|
||||
{#if currentStep === 'welcome'}
|
||||
<div class="text-center">
|
||||
<div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10">
|
||||
<svg class="h-8 w-8 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="7" height="7" />
|
||||
<rect x="14" y="3" width="7" height="7" />
|
||||
<rect x="14" y="14" width="7" height="7" />
|
||||
<rect x="3" y="14" width="7" height="7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="mb-2 text-2xl font-bold text-foreground">Welcome to Web App Launcher</h2>
|
||||
<p class="text-muted-foreground">
|
||||
Let's get your dashboard set up. This wizard will guide you through the initial
|
||||
configuration in a few quick steps.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{:else if currentStep === 'admin'}
|
||||
<h2 class="mb-4 text-xl font-bold text-foreground">Create Admin Account</h2>
|
||||
{#if adminCreated}
|
||||
<div class="rounded-lg bg-green-500/10 p-4 text-sm text-green-600 dark:text-green-400">
|
||||
Admin account created successfully. You can proceed to the next step.
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label for="ob-display-name" class="mb-1 block text-sm font-medium text-foreground">Display Name</label>
|
||||
<input
|
||||
id="ob-display-name"
|
||||
type="text"
|
||||
bind:value={adminDisplayName}
|
||||
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="Admin"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="ob-email" class="mb-1 block text-sm font-medium text-foreground">Email</label>
|
||||
<input
|
||||
id="ob-email"
|
||||
type="email"
|
||||
bind:value={adminEmail}
|
||||
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="admin@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="ob-password" class="mb-1 block text-sm font-medium text-foreground">Password</label>
|
||||
<input
|
||||
id="ob-password"
|
||||
type="password"
|
||||
bind:value={adminPassword}
|
||||
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="Min. 6 characters"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{:else if currentStep === 'authMode'}
|
||||
<h2 class="mb-4 text-xl font-bold text-foreground">Authentication Mode</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each [
|
||||
{ value: 'local', label: 'Local Only', desc: 'Email + password authentication' },
|
||||
{ value: 'oauth', label: 'OAuth Only', desc: 'External identity provider (OIDC)' },
|
||||
{ value: 'both', label: 'Both', desc: 'Local accounts and OAuth' }
|
||||
] as option (option.value)}
|
||||
<label
|
||||
class="flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition-colors {authMode === option.value ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'}"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="authMode"
|
||||
value={option.value}
|
||||
bind:group={authMode}
|
||||
class="mt-0.5"
|
||||
/>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-foreground">{option.label}</span>
|
||||
<p class="text-xs text-muted-foreground">{option.desc}</p>
|
||||
</div>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if authMode !== 'local'}
|
||||
<div class="space-y-2 rounded-lg border border-border p-3">
|
||||
<p class="text-xs font-medium text-muted-foreground">OAuth Configuration (optional — can be set later)</p>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={oauthClientId}
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none"
|
||||
placeholder="Client ID"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
bind:value={oauthClientSecret}
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none"
|
||||
placeholder="Client Secret"
|
||||
/>
|
||||
<input
|
||||
type="url"
|
||||
bind:value={oauthDiscoveryUrl}
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none"
|
||||
placeholder="Discovery URL (https://.../.well-known/openid-configuration)"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{:else if currentStep === 'theme'}
|
||||
<h2 class="mb-4 text-xl font-bold text-foreground">Theme & Appearance</h2>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-foreground">Default Theme</p>
|
||||
<div class="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (defaultTheme = 'dark')}
|
||||
class="flex-1 rounded-lg border-2 px-4 py-3 text-sm font-medium transition-colors {defaultTheme === 'dark' ? 'border-primary bg-primary/10 text-foreground' : 'border-border text-muted-foreground hover:border-primary/50'}"
|
||||
>
|
||||
Dark
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (defaultTheme = 'light')}
|
||||
class="flex-1 rounded-lg border-2 px-4 py-3 text-sm font-medium transition-colors {defaultTheme === 'light' ? 'border-primary bg-primary/10 text-foreground' : 'border-border text-muted-foreground hover:border-primary/50'}"
|
||||
>
|
||||
Light
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-foreground">Accent Color</p>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
{#each primaryColorOptions as color (color.value)}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (defaultPrimaryColor = color.value)}
|
||||
class="flex flex-col items-center gap-1 rounded-lg border-2 p-2 transition-colors {defaultPrimaryColor === color.value ? 'border-primary' : 'border-border hover:border-primary/50'}"
|
||||
>
|
||||
<span
|
||||
class="h-6 w-6 rounded-full"
|
||||
style="background-color: {color.value}"
|
||||
></span>
|
||||
<span class="text-xs text-muted-foreground">{color.label}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{:else if currentStep === 'complete'}
|
||||
<h2 class="mb-4 text-xl font-bold text-foreground">Create First Board</h2>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label for="ob-board-name" class="mb-1 block text-sm font-medium text-foreground">Board Name</label>
|
||||
<input
|
||||
id="ob-board-name"
|
||||
type="text"
|
||||
bind:value={boardName}
|
||||
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="My Dashboard"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
A default board will be created for you. You can customize it later.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if errorMsg}
|
||||
<div class="mt-4 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{errorMsg}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center justify-between border-t border-border px-6 py-4">
|
||||
<div>
|
||||
{#if !isFirstStep}
|
||||
<button
|
||||
type="button"
|
||||
onclick={goBack}
|
||||
disabled={loading}
|
||||
class="rounded-lg border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-accent disabled:opacity-50"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
{#if !isFirstStep && !isLastStep && currentStep !== 'admin'}
|
||||
<button
|
||||
type="button"
|
||||
onclick={skipStep}
|
||||
disabled={loading}
|
||||
class="rounded-lg px-4 py-2 text-sm text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
|
||||
>
|
||||
Skip
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleNext}
|
||||
disabled={loading}
|
||||
class="rounded-lg bg-primary px-6 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
|
||||
>
|
||||
{#if loading}
|
||||
Processing...
|
||||
{:else if isLastStep}
|
||||
Finish Setup
|
||||
{:else if isFirstStep}
|
||||
Get Started
|
||||
{:else}
|
||||
Next
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -28,6 +28,7 @@
|
||||
icon: string | null;
|
||||
order: number;
|
||||
isExpandedByDefault: boolean;
|
||||
cardSize?: string | null;
|
||||
widgets: WidgetData[];
|
||||
}
|
||||
|
||||
@@ -40,6 +41,7 @@
|
||||
onDeleteSection: (sectionId: string) => void;
|
||||
onAddWidget: (sectionId: string, widgetData: string) => void;
|
||||
onDeleteWidget: (widgetId: string) => void;
|
||||
onUpdateSection?: (sectionId: string, data: Record<string, unknown>) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
@@ -50,9 +52,18 @@
|
||||
onToggleAddWidget,
|
||||
onDeleteSection,
|
||||
onAddWidget,
|
||||
onDeleteWidget
|
||||
onDeleteWidget,
|
||||
onUpdateSection
|
||||
}: Props = $props();
|
||||
|
||||
const cardSizeOptions = ['compact', 'medium', 'large'] as const;
|
||||
|
||||
function handleCardSizeChange(event: Event) {
|
||||
const select = event.target as HTMLSelectElement;
|
||||
const value = select.value || null;
|
||||
onUpdateSection?.(section.id, { cardSize: value });
|
||||
}
|
||||
|
||||
let widgets = $state<WidgetData[]>([...section.widgets]);
|
||||
let dirty = $state(false);
|
||||
|
||||
@@ -128,6 +139,17 @@
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Card size selector -->
|
||||
<select
|
||||
onchange={handleCardSizeChange}
|
||||
class="rounded-md border border-input bg-background px-2 py-1 text-xs text-foreground transition-colors focus:border-primary focus:outline-none"
|
||||
title={$t('board.card_size') ?? 'Card size'}
|
||||
>
|
||||
<option value="" selected={!section.cardSize}>{$t('section.inherit_size') ?? 'Inherit'}</option>
|
||||
{#each cardSizeOptions as size (size)}
|
||||
<option value={size} selected={section.cardSize === size}>{size}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => onToggleAddWidget(section.id)}
|
||||
|
||||
@@ -20,12 +20,15 @@
|
||||
} | null;
|
||||
}
|
||||
|
||||
import type { CardSize } from '$lib/utils/constants.js';
|
||||
|
||||
interface SectionData {
|
||||
id: string;
|
||||
title: string;
|
||||
icon: string | null;
|
||||
order: number;
|
||||
isExpandedByDefault: boolean;
|
||||
cardSize?: string | null;
|
||||
widgets: WidgetData[];
|
||||
}
|
||||
|
||||
@@ -42,9 +45,15 @@
|
||||
interface Props {
|
||||
section: SectionData;
|
||||
allApps?: AppData[];
|
||||
boardCardSize?: CardSize;
|
||||
}
|
||||
|
||||
let { section, allApps = [] }: Props = $props();
|
||||
let { section, allApps = [], boardCardSize = 'medium' }: Props = $props();
|
||||
|
||||
// Section-level cardSize overrides board-level
|
||||
const effectiveCardSize = $derived<CardSize>(
|
||||
(section.cardSize as CardSize) ?? boardCardSize
|
||||
);
|
||||
|
||||
let expanded = $state(section.isExpandedByDefault);
|
||||
</script>
|
||||
@@ -59,7 +68,7 @@
|
||||
|
||||
<SectionCollapsible {expanded}>
|
||||
<div class="px-4 pb-4">
|
||||
<WidgetGrid widgets={section.widgets} {allApps} />
|
||||
<WidgetGrid widgets={section.widgets} {allApps} cardSize={effectiveCardSize} />
|
||||
</div>
|
||||
</SectionCollapsible>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
|
||||
interface Props {
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
let { onCancel }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="rounded-lg border border-border bg-card p-6">
|
||||
<h2 class="mb-4 text-lg font-semibold text-card-foreground">Generate API Token</h2>
|
||||
|
||||
<form method="POST" action="?/create" use:enhance class="space-y-4">
|
||||
<div>
|
||||
<label for="token-name" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Token Name
|
||||
</label>
|
||||
<input
|
||||
id="token-name"
|
||||
name="name"
|
||||
type="text"
|
||||
placeholder="e.g., CI/CD Pipeline"
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
|
||||
required
|
||||
/>
|
||||
<p class="mt-1 text-xs text-muted-foreground">A descriptive name to identify this token</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="token-scope" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Scope
|
||||
</label>
|
||||
<select
|
||||
id="token-scope"
|
||||
name="scope"
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
|
||||
>
|
||||
<option value="read">Read — View apps, boards, and status</option>
|
||||
<option value="write">Write — Modify apps, boards, and settings</option>
|
||||
<option value="admin">Admin — Full access including user management</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="token-expires" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Expiration (optional)
|
||||
</label>
|
||||
<input
|
||||
id="token-expires"
|
||||
name="expiresAt"
|
||||
type="datetime-local"
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
|
||||
/>
|
||||
<p class="mt-1 text-xs text-muted-foreground">Leave empty for a non-expiring token</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
|
||||
>
|
||||
Generate Token
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={onCancel}
|
||||
class="rounded-md px-4 py-2 text-sm text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,127 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
|
||||
interface Token {
|
||||
id: string;
|
||||
name: string;
|
||||
scope: string;
|
||||
lastUsedAt: Date | string | null;
|
||||
expiresAt: Date | string | null;
|
||||
createdAt: Date | string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
tokens: Token[];
|
||||
}
|
||||
|
||||
let { tokens }: Props = $props();
|
||||
|
||||
let confirmRevokeId = $state<string | null>(null);
|
||||
|
||||
function formatDate(dateVal: Date | string | null): string {
|
||||
if (!dateVal) return 'Never';
|
||||
return new Date(dateVal).toLocaleDateString();
|
||||
}
|
||||
|
||||
function isExpired(expiresAt: Date | string | null): boolean {
|
||||
if (!expiresAt) return false;
|
||||
return new Date(expiresAt) < new Date();
|
||||
}
|
||||
|
||||
function scopeLabel(scope: string): string {
|
||||
switch (scope) {
|
||||
case 'read': return 'Read';
|
||||
case 'write': return 'Write';
|
||||
case 'admin': return 'Admin';
|
||||
default: return scope;
|
||||
}
|
||||
}
|
||||
|
||||
function scopeBadgeClass(scope: string): string {
|
||||
switch (scope) {
|
||||
case 'admin': return 'bg-red-500/10 text-red-500';
|
||||
case 'write': return 'bg-yellow-500/10 text-yellow-500';
|
||||
default: return 'bg-green-500/10 text-green-500';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if tokens.length === 0}
|
||||
<div class="rounded-xl border border-border bg-card/50 p-8 text-center">
|
||||
<p class="text-muted-foreground">No API tokens created yet</p>
|
||||
<p class="mt-1 text-xs text-muted-foreground">
|
||||
API tokens allow programmatic access to your dashboard
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto rounded-lg border border-border">
|
||||
<table class="w-full text-left text-sm">
|
||||
<thead class="border-b border-border bg-muted/50">
|
||||
<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">Scope</th>
|
||||
<th class="px-4 py-3 font-medium text-muted-foreground">Created</th>
|
||||
<th class="px-4 py-3 font-medium text-muted-foreground">Last Used</th>
|
||||
<th class="px-4 py-3 font-medium text-muted-foreground">Expires</th>
|
||||
<th class="px-4 py-3 font-medium text-muted-foreground">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each tokens as token (token.id)}
|
||||
<tr class="border-b border-border last:border-0">
|
||||
<td class="px-4 py-3 font-medium text-foreground">{token.name}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-block rounded-full px-2 py-0.5 text-xs font-medium {scopeBadgeClass(token.scope)}">
|
||||
{scopeLabel(token.scope)}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-xs text-muted-foreground">{formatDate(token.createdAt)}</td>
|
||||
<td class="px-4 py-3 text-xs text-muted-foreground">{formatDate(token.lastUsedAt)}</td>
|
||||
<td class="px-4 py-3">
|
||||
{#if token.expiresAt}
|
||||
<span class="text-xs {isExpired(token.expiresAt) ? 'text-destructive' : 'text-muted-foreground'}">
|
||||
{formatDate(token.expiresAt)}
|
||||
{#if isExpired(token.expiresAt)}
|
||||
(expired)
|
||||
{/if}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-xs text-muted-foreground">Never</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
{#if confirmRevokeId === token.id}
|
||||
<form method="POST" action="?/revoke" use:enhance>
|
||||
<input type="hidden" name="tokenId" value={token.id} />
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded px-2 py-1 text-xs font-medium text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (confirmRevokeId = null)}
|
||||
class="rounded px-2 py-1 text-xs text-muted-foreground"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (confirmRevokeId = token.id)}
|
||||
class="rounded px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
Revoke
|
||||
</button>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,120 @@
|
||||
<script lang="ts">
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
value: string;
|
||||
onchange?: (css: string) => void;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
let { value, onchange, label }: Props = $props();
|
||||
|
||||
let localValue = $state(value);
|
||||
let livePreview = $state(false);
|
||||
let validationError = $state('');
|
||||
|
||||
// Sync external value changes
|
||||
$effect(() => {
|
||||
localValue = value;
|
||||
});
|
||||
|
||||
/**
|
||||
* Sanitize CSS to prevent script injection and limit scope.
|
||||
* Strips dangerous patterns while allowing normal CSS within .custom-css-scope.
|
||||
*/
|
||||
function sanitizeCss(css: string): string {
|
||||
// Remove any <script> or HTML tags
|
||||
let cleaned = css.replace(/<\/?[^>]+(>|$)/g, '');
|
||||
|
||||
// Remove javascript: URLs
|
||||
cleaned = cleaned.replace(/javascript\s*:/gi, '');
|
||||
|
||||
// Remove expression() calls (IE legacy XSS vector)
|
||||
cleaned = cleaned.replace(/expression\s*\(/gi, '');
|
||||
|
||||
// Remove url() calls that contain javascript:
|
||||
cleaned = cleaned.replace(/url\s*\(\s*['"]?\s*javascript:/gi, 'url(');
|
||||
|
||||
// Remove @import rules (prevent external resource loading)
|
||||
cleaned = cleaned.replace(/@import\s+[^;]+;?/gi, '');
|
||||
|
||||
// Remove behavior: property (IE-specific XSS)
|
||||
cleaned = cleaned.replace(/behavior\s*:/gi, '');
|
||||
|
||||
// Remove -moz-binding (Firefox XSS vector)
|
||||
cleaned = cleaned.replace(/-moz-binding\s*:/gi, '');
|
||||
|
||||
return cleaned;
|
||||
}
|
||||
|
||||
function validate(css: string): boolean {
|
||||
validationError = '';
|
||||
|
||||
// Check for dangerous patterns
|
||||
if (/<script/i.test(css)) {
|
||||
validationError = 'Script tags are not allowed in custom CSS';
|
||||
return false;
|
||||
}
|
||||
if (/javascript\s*:/i.test(css)) {
|
||||
validationError = 'JavaScript URLs are not allowed';
|
||||
return false;
|
||||
}
|
||||
if (/expression\s*\(/i.test(css)) {
|
||||
validationError = 'CSS expressions are not allowed';
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function handleInput(event: Event) {
|
||||
const target = event.target as HTMLTextAreaElement;
|
||||
localValue = target.value;
|
||||
|
||||
if (validate(localValue)) {
|
||||
const sanitized = sanitizeCss(localValue);
|
||||
onchange?.(sanitized);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-3">
|
||||
{#if label}
|
||||
<label class="block text-sm font-medium text-foreground">{label}</label>
|
||||
{/if}
|
||||
|
||||
<textarea
|
||||
value={localValue}
|
||||
oninput={handleInput}
|
||||
rows="8"
|
||||
class="w-full rounded-lg border border-input bg-background px-3 py-2 font-mono text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
|
||||
placeholder={`/* Custom CSS */\n.custom-css-scope .my-widget {\n background: #333;\n}`}
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
|
||||
{#if validationError}
|
||||
<p class="text-xs text-destructive">{validationError}</p>
|
||||
{/if}
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<label class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={livePreview}
|
||||
class="h-4 w-4 rounded border-input accent-primary"
|
||||
/>
|
||||
{$t('settings.live_preview') ?? 'Live preview'}
|
||||
</label>
|
||||
<span class="text-xs text-muted-foreground">
|
||||
{$t('settings.custom_css_hint') ?? 'CSS is scoped to .custom-css-scope to prevent breaking core UI'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{#if livePreview && localValue && !validationError}
|
||||
<div class="custom-css-scope rounded-lg border border-border bg-card/50 p-4">
|
||||
<p class="text-sm text-muted-foreground">{$t('settings.preview_area') ?? 'Preview area'}</p>
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -- CSS is sanitized -->
|
||||
{@html `<style>${sanitizeCss(localValue)}</style>`}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { t, locale as i18nLocale } from 'svelte-i18n';
|
||||
import { theme, type ThemeMode, type BackgroundType } from '$lib/stores/theme.svelte.js';
|
||||
import { theme, type ThemeMode, type BackgroundType, type CardStyle } from '$lib/stores/theme.svelte.js';
|
||||
|
||||
interface UserPreferences {
|
||||
themeMode: string | null;
|
||||
@@ -34,6 +34,12 @@
|
||||
{ value: 'aurora', labelKey: 'bg.aurora' }
|
||||
];
|
||||
|
||||
const cardStyleOptions: { value: CardStyle; labelKey: string }[] = [
|
||||
{ value: 'solid', labelKey: 'card_style.solid' },
|
||||
{ value: 'glass', labelKey: 'card_style.glass' },
|
||||
{ value: 'outline', labelKey: 'card_style.outline' }
|
||||
];
|
||||
|
||||
const localeOptions = [
|
||||
{ value: 'en', label: 'English' },
|
||||
{ value: 'ru', label: 'Русский' }
|
||||
@@ -66,6 +72,10 @@
|
||||
theme.setBackground(bg);
|
||||
}
|
||||
|
||||
function setCardStyle(style: CardStyle) {
|
||||
theme.setCardStyle(style);
|
||||
}
|
||||
|
||||
function setLocale(loc: string) {
|
||||
i18nLocale.set(loc);
|
||||
}
|
||||
@@ -201,6 +211,24 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Card Style -->
|
||||
<section>
|
||||
<h2 class="mb-3 text-lg font-semibold text-foreground">{$t('settings.card_style') ?? 'Card Style'}</h2>
|
||||
<div class="flex gap-1 rounded-lg border border-border bg-muted/50 p-1">
|
||||
{#each cardStyleOptions as opt (opt.value)}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => setCardStyle(opt.value)}
|
||||
class="flex-1 rounded-md px-3 py-2 text-sm font-medium transition-colors {theme.cardStyle === opt.value
|
||||
? 'bg-background text-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground'}"
|
||||
>
|
||||
{$t(opt.labelKey) ?? opt.value}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Locale -->
|
||||
<section>
|
||||
<h2 class="mb-3 text-lg font-semibold text-foreground">{$t('settings.language')}</h2>
|
||||
|
||||
@@ -118,6 +118,7 @@
|
||||
|
||||
// Reset highlight when query changes
|
||||
$effect(() => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
||||
query; // track
|
||||
highlightIdx = 0;
|
||||
});
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
<script lang="ts">
|
||||
import { keyboard } from '$lib/stores/keyboard.svelte.js';
|
||||
|
||||
interface ShortcutItem {
|
||||
readonly keys: string;
|
||||
readonly description: string;
|
||||
}
|
||||
|
||||
interface ShortcutCategory {
|
||||
readonly name: string;
|
||||
readonly shortcuts: readonly ShortcutItem[];
|
||||
}
|
||||
|
||||
const categories: readonly ShortcutCategory[] = [
|
||||
{
|
||||
name: 'Global',
|
||||
shortcuts: [
|
||||
{ keys: 'Ctrl+K / Cmd+K', description: 'Open search' },
|
||||
{ keys: '?', description: 'Toggle keyboard shortcuts' },
|
||||
{ keys: '1-9', description: 'Switch to board by index' },
|
||||
{ keys: 'f', description: 'Toggle favorites bar' },
|
||||
{ keys: 'Escape', description: 'Close dialogs / overlays' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Board View',
|
||||
shortcuts: [
|
||||
{ keys: 'j', description: 'Navigate to next app' },
|
||||
{ keys: 'k', description: 'Navigate to previous app' },
|
||||
{ keys: 'Enter', description: 'Open selected app' },
|
||||
{ keys: 'e', description: 'Toggle edit mode' }
|
||||
]
|
||||
}
|
||||
] as const;
|
||||
|
||||
function handleBackdropClick(e: MouseEvent) {
|
||||
if (e.target === e.currentTarget) {
|
||||
keyboard.closeOverlay();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if keyboard.overlayOpen}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="fixed inset-0 z-[90] flex items-center justify-center bg-black/60 backdrop-blur-sm"
|
||||
onclick={handleBackdropClick}
|
||||
onkeydown={(e) => e.key === 'Escape' && keyboard.closeOverlay()}
|
||||
>
|
||||
<div
|
||||
class="mx-4 w-full max-w-xl rounded-2xl border border-border bg-card shadow-2xl"
|
||||
role="dialog"
|
||||
aria-label="Keyboard Shortcuts"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between border-b border-border px-6 py-4">
|
||||
<h2 class="text-lg font-semibold text-foreground">Keyboard Shortcuts</h2>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => keyboard.closeOverlay()}
|
||||
class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
aria-label="Close"
|
||||
>
|
||||
<svg class="h-5 w-5" 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="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="px-6 py-5">
|
||||
<div class="grid gap-6 sm:grid-cols-2">
|
||||
{#each categories as category (category.name)}
|
||||
<div>
|
||||
<h3 class="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
{category.name}
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
{#each category.shortcuts as shortcut (shortcut.keys)}
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<span class="text-sm text-foreground">{shortcut.description}</span>
|
||||
<div class="flex shrink-0 gap-1">
|
||||
{#each shortcut.keys.split(' / ') as keyCombo (keyCombo)}
|
||||
<kbd
|
||||
class="inline-flex items-center rounded border border-border bg-muted px-1.5 py-0.5 text-xs font-mono text-muted-foreground"
|
||||
>
|
||||
{keyCombo}
|
||||
</kbd>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer hint -->
|
||||
<div class="border-t border-border px-6 py-3 text-center">
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Shortcuts are disabled when typing in text fields
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -1,7 +1,26 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import AppHealthBadge from '$lib/components/app/AppHealthBadge.svelte';
|
||||
import AnimatedStatusRing from '$lib/components/app/AnimatedStatusRing.svelte';
|
||||
import SparklineChart from '$lib/components/app/SparklineChart.svelte';
|
||||
import TagBadge from '$lib/components/app/TagBadge.svelte';
|
||||
import { theme } from '$lib/stores/theme.svelte.js';
|
||||
import { favorites } from '$lib/stores/favorites.svelte.js';
|
||||
import { slide } from 'svelte/transition';
|
||||
|
||||
interface AppLink {
|
||||
id: string;
|
||||
label: string;
|
||||
url: string;
|
||||
icon: string | null;
|
||||
order: number;
|
||||
}
|
||||
|
||||
interface AppTag {
|
||||
id: string;
|
||||
name: string;
|
||||
color: string | null;
|
||||
}
|
||||
|
||||
interface AppData {
|
||||
id: string;
|
||||
@@ -11,6 +30,8 @@
|
||||
iconType: string;
|
||||
description: string | null;
|
||||
statuses: Array<{ status: string; responseTime: number | null }>;
|
||||
links?: AppLink[];
|
||||
tags?: AppTag[];
|
||||
}
|
||||
|
||||
interface StatusPoint {
|
||||
@@ -20,15 +41,23 @@
|
||||
|
||||
interface Props {
|
||||
app: AppData;
|
||||
cardSize?: 'compact' | 'medium' | 'large';
|
||||
}
|
||||
|
||||
let { app }: Props = $props();
|
||||
let { app, cardSize = 'medium' }: Props = $props();
|
||||
|
||||
const cardStyleClass = $derived(`card-${theme.cardStyle}`);
|
||||
|
||||
let historyData: StatusPoint[] = $state([]);
|
||||
let uptimePercent: number | null = $state(null);
|
||||
let historyLoading = $state(true);
|
||||
let linksExpanded = $state(false);
|
||||
let showContextMenu = $state(false);
|
||||
let contextMenuPos = $state({ x: 0, y: 0 });
|
||||
|
||||
const latestStatus = $derived(app.statuses[0]?.status ?? 'unknown');
|
||||
const hasLinks = $derived(Array.isArray(app.links) && app.links.length > 0);
|
||||
const hasTags = $derived(Array.isArray(app.tags) && app.tags.length > 0);
|
||||
|
||||
const iconSrc = $derived.by(() => {
|
||||
if (!app.icon) return null;
|
||||
@@ -61,48 +90,299 @@
|
||||
historyLoading = false;
|
||||
}
|
||||
});
|
||||
|
||||
function handleContextMenu(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
contextMenuPos = { x: e.clientX, y: e.clientY };
|
||||
showContextMenu = true;
|
||||
}
|
||||
|
||||
function handleWindowClick() {
|
||||
showContextMenu = false;
|
||||
}
|
||||
|
||||
function toggleFavorite() {
|
||||
showContextMenu = false;
|
||||
if (favorites.isFavorite(app.id)) {
|
||||
favorites.remove(app.id);
|
||||
} else {
|
||||
favorites.add(app.id);
|
||||
}
|
||||
}
|
||||
|
||||
function recordClick() {
|
||||
fetch('/api/recent-apps', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ appId: app.id })
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
function toggleLinks(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
linksExpanded = !linksExpanded;
|
||||
}
|
||||
</script>
|
||||
|
||||
<a
|
||||
href={app.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 app.iconType === 'emoji' && app.icon}
|
||||
<span class="text-2xl">{app.icon}</span>
|
||||
{:else if iconSrc}
|
||||
<img
|
||||
src={iconSrc}
|
||||
alt="{app.name} icon"
|
||||
class="h-8 w-8 object-contain"
|
||||
/>
|
||||
{:else}
|
||||
<span class="text-lg font-bold text-muted-foreground">
|
||||
{app.name.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
<svelte:window onclick={handleWindowClick} />
|
||||
|
||||
{#if cardSize === 'compact'}
|
||||
<!-- Compact: icon + name only, inline layout -->
|
||||
<a
|
||||
href={app.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="card-hover group flex items-center gap-2 rounded-lg {cardStyleClass} px-3 py-2 text-left transition-colors hover:border-primary/50"
|
||||
oncontextmenu={handleContextMenu}
|
||||
onclick={recordClick}
|
||||
>
|
||||
<div class="relative flex-shrink-0">
|
||||
<div class="flex h-8 w-8 items-center justify-center rounded-md bg-muted transition-colors group-hover:bg-accent">
|
||||
{#if app.iconType === 'emoji' && app.icon}
|
||||
<span class="text-base">{app.icon}</span>
|
||||
{:else if iconSrc}
|
||||
<img src={iconSrc} alt="{app.name} icon" class="h-5 w-5 object-contain" />
|
||||
{:else}
|
||||
<span class="text-xs font-bold text-muted-foreground">{app.name.charAt(0).toUpperCase()}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<AnimatedStatusRing status={latestStatus} size={32} animated />
|
||||
</div>
|
||||
<span class="truncate text-xs font-medium text-foreground transition-colors group-hover:text-primary">
|
||||
{app.name}
|
||||
</span>
|
||||
{#if hasLinks}
|
||||
<button
|
||||
type="button"
|
||||
onclick={toggleLinks}
|
||||
class="ml-auto flex-shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground"
|
||||
title="Show links"
|
||||
>
|
||||
<svg class="h-3 w-3 transition-transform" class:rotate-90={linksExpanded} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Name -->
|
||||
<span class="w-full truncate text-sm font-medium text-foreground transition-colors group-hover:text-primary">
|
||||
{app.name}
|
||||
</span>
|
||||
|
||||
<!-- Status -->
|
||||
<AppHealthBadge status={latestStatus} />
|
||||
|
||||
<!-- Sparkline -->
|
||||
{#if historyLoading}
|
||||
<div class="h-5 w-20 animate-pulse rounded bg-muted"></div>
|
||||
{:else if historyData.length > 0}
|
||||
<div class="flex items-center gap-1">
|
||||
<SparklineChart data={historyData} />
|
||||
{#if uptimePercent !== null}
|
||||
<span class="text-[10px] text-muted-foreground">{uptimePercent}%</span>
|
||||
{/if}
|
||||
<!-- Expanded links for compact -->
|
||||
{#if linksExpanded && hasLinks}
|
||||
<div transition:slide={{ duration: 200 }} class="ml-10 space-y-0.5 pb-1">
|
||||
{#each app.links ?? [] as link (link.id)}
|
||||
<a
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-1.5 rounded px-2 py-1 text-[11px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<svg class="h-3 w-3 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
||||
<polyline points="15 3 21 3 21 9" />
|
||||
<line x1="10" y1="14" x2="21" y2="3" />
|
||||
</svg>
|
||||
{link.label}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
{:else if cardSize === 'large'}
|
||||
<!-- Large: icon + name + description + sparkline + tags + links -->
|
||||
<div
|
||||
class="card-hover group rounded-xl {cardStyleClass} p-5 transition-colors hover:border-primary/50"
|
||||
oncontextmenu={handleContextMenu}
|
||||
>
|
||||
<a
|
||||
href={app.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex flex-col items-center gap-3 text-center"
|
||||
onclick={recordClick}
|
||||
>
|
||||
<div class="relative">
|
||||
<div class="flex h-16 w-16 items-center justify-center rounded-xl bg-muted transition-colors group-hover:bg-accent">
|
||||
{#if app.iconType === 'emoji' && app.icon}
|
||||
<span class="text-3xl">{app.icon}</span>
|
||||
{:else if iconSrc}
|
||||
<img src={iconSrc} alt="{app.name} icon" class="h-10 w-10 object-contain" />
|
||||
{:else}
|
||||
<span class="text-xl font-bold text-muted-foreground">{app.name.charAt(0).toUpperCase()}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<AnimatedStatusRing status={latestStatus} size={64} animated />
|
||||
</div>
|
||||
|
||||
<span class="w-full truncate text-base font-semibold text-foreground transition-colors group-hover:text-primary">
|
||||
{app.name}
|
||||
</span>
|
||||
|
||||
{#if app.description}
|
||||
<p class="line-clamp-2 w-full text-xs text-muted-foreground">{app.description}</p>
|
||||
{/if}
|
||||
|
||||
<AppHealthBadge status={latestStatus} />
|
||||
|
||||
{#if historyLoading}
|
||||
<div class="h-5 w-24 animate-pulse rounded bg-muted"></div>
|
||||
{:else if historyData.length > 0}
|
||||
<div class="flex items-center gap-1">
|
||||
<SparklineChart data={historyData} />
|
||||
{#if uptimePercent !== null}
|
||||
<span class="text-[10px] text-muted-foreground">{uptimePercent}%</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
|
||||
<!-- Tags -->
|
||||
{#if hasTags}
|
||||
<div class="mt-2 flex flex-wrap justify-center gap-1">
|
||||
{#each app.tags ?? [] as tag (tag.id)}
|
||||
<TagBadge name={tag.name} color={tag.color} size="sm" />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Expandable Links -->
|
||||
{#if hasLinks}
|
||||
<div class="mt-2 border-t border-border pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onclick={toggleLinks}
|
||||
class="flex w-full items-center justify-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
<svg class="h-3 w-3 transition-transform" class:rotate-180={linksExpanded} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
{linksExpanded ? 'Hide' : `${app.links?.length ?? 0} more`} links
|
||||
</button>
|
||||
|
||||
{#if linksExpanded}
|
||||
<div transition:slide={{ duration: 200 }} class="mt-1.5 space-y-1">
|
||||
{#each app.links ?? [] as link (link.id)}
|
||||
<a
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-2 rounded-md px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<svg class="h-3.5 w-3.5 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
||||
<polyline points="15 3 21 3 21 9" />
|
||||
<line x1="10" y1="14" x2="21" y2="3" />
|
||||
</svg>
|
||||
{link.label}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Medium (default): icon + name + status + sparkline on hover + links -->
|
||||
<div
|
||||
class="card-hover group rounded-xl {cardStyleClass} p-4 transition-colors hover:border-primary/50"
|
||||
oncontextmenu={handleContextMenu}
|
||||
>
|
||||
<a
|
||||
href={app.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex flex-col items-center gap-2 text-center"
|
||||
onclick={recordClick}
|
||||
>
|
||||
<div class="relative">
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-muted transition-colors group-hover:bg-accent">
|
||||
{#if app.iconType === 'emoji' && app.icon}
|
||||
<span class="text-2xl">{app.icon}</span>
|
||||
{:else if iconSrc}
|
||||
<img src={iconSrc} alt="{app.name} icon" class="h-8 w-8 object-contain" />
|
||||
{:else}
|
||||
<span class="text-lg font-bold text-muted-foreground">{app.name.charAt(0).toUpperCase()}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<AnimatedStatusRing status={latestStatus} size={48} animated />
|
||||
</div>
|
||||
|
||||
<span class="w-full truncate text-sm font-medium text-foreground transition-colors group-hover:text-primary">
|
||||
{app.name}
|
||||
</span>
|
||||
|
||||
<AppHealthBadge status={latestStatus} />
|
||||
|
||||
{#if historyLoading}
|
||||
<div class="h-5 w-20 animate-pulse rounded bg-muted"></div>
|
||||
{:else if historyData.length > 0}
|
||||
<div class="flex items-center gap-1">
|
||||
<SparklineChart data={historyData} />
|
||||
{#if uptimePercent !== null}
|
||||
<span class="text-[10px] text-muted-foreground">{uptimePercent}%</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
|
||||
<!-- Expandable Links -->
|
||||
{#if hasLinks}
|
||||
<div class="mt-2 border-t border-border pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onclick={toggleLinks}
|
||||
class="flex w-full items-center justify-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
<svg class="h-3 w-3 transition-transform" class:rotate-180={linksExpanded} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
{linksExpanded ? 'Hide' : `${app.links?.length ?? 0} more`}
|
||||
</button>
|
||||
|
||||
{#if linksExpanded}
|
||||
<div transition:slide={{ duration: 200 }} class="mt-1 space-y-0.5">
|
||||
{#each app.links ?? [] as link (link.id)}
|
||||
<a
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-1.5 rounded px-2 py-1 text-[11px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<svg class="h-3 w-3 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
||||
<polyline points="15 3 21 3 21 9" />
|
||||
<line x1="10" y1="14" x2="21" y2="3" />
|
||||
</svg>
|
||||
{link.label}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Context Menu -->
|
||||
{#if showContextMenu}
|
||||
<div
|
||||
class="fixed z-50 rounded-lg border border-border bg-popover p-1 shadow-lg"
|
||||
style="left: {contextMenuPos.x}px; top: {contextMenuPos.y}px"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-sm px-3 py-1.5 text-sm text-popover-foreground transition-colors hover:bg-accent"
|
||||
onclick={toggleFavorite}
|
||||
>
|
||||
{#if favorites.isFavorite(app.id)}
|
||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
||||
</svg>
|
||||
Remove from favorites
|
||||
{:else}
|
||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
||||
</svg>
|
||||
Add to favorites
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,177 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { Calendar, MapPin, Clock } from 'lucide-svelte';
|
||||
import type { CalendarWidgetConfig } from '$lib/types/widget.js';
|
||||
|
||||
interface Props {
|
||||
config: CalendarWidgetConfig;
|
||||
}
|
||||
|
||||
let { config }: Props = $props();
|
||||
|
||||
interface CalendarEvent {
|
||||
summary: string;
|
||||
start: string;
|
||||
end: string;
|
||||
location?: string;
|
||||
calendarLabel?: string;
|
||||
calendarColor?: string;
|
||||
}
|
||||
|
||||
let events: CalendarEvent[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let error = $state(false);
|
||||
|
||||
function groupLabel(dateStr: string): string {
|
||||
const date = new Date(dateStr);
|
||||
/* eslint-disable svelte/prefer-svelte-reactivity */
|
||||
const today = new Date();
|
||||
const tomorrow = new Date();
|
||||
/* eslint-enable svelte/prefer-svelte-reactivity */
|
||||
tomorrow.setDate(today.getDate() + 1);
|
||||
|
||||
if (date.toDateString() === today.toDateString()) return 'Today';
|
||||
if (date.toDateString() === tomorrow.toDateString()) return 'Tomorrow';
|
||||
return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
function formatTimeRange(start: string, end: string): string {
|
||||
const s = new Date(start);
|
||||
const e = new Date(end);
|
||||
// Check if all-day (midnight to midnight or close to it)
|
||||
if (s.getHours() === 0 && s.getMinutes() === 0 && e.getHours() === 0 && e.getMinutes() === 0) {
|
||||
return 'All day';
|
||||
}
|
||||
const fmt = new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: '2-digit' });
|
||||
return `${fmt.format(s)} - ${fmt.format(e)}`;
|
||||
}
|
||||
|
||||
interface GroupedEvents {
|
||||
label: string;
|
||||
events: CalendarEvent[];
|
||||
}
|
||||
|
||||
const grouped = $derived.by((): GroupedEvents[] => {
|
||||
// eslint-disable-next-line svelte/prefer-svelte-reactivity
|
||||
const groups: Map<string, CalendarEvent[]> = new Map();
|
||||
for (const evt of events) {
|
||||
const key = new Date(evt.start).toDateString();
|
||||
const existing = groups.get(key);
|
||||
if (existing) {
|
||||
existing.push(evt);
|
||||
} else {
|
||||
groups.set(key, [evt]);
|
||||
}
|
||||
}
|
||||
const result: GroupedEvents[] = [];
|
||||
for (const [, evts] of groups) {
|
||||
result.push({
|
||||
label: groupLabel(evts[0].start),
|
||||
events: evts
|
||||
});
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
async function fetchEvents() {
|
||||
error = false;
|
||||
try {
|
||||
const res = await fetch('/api/widgets/calendar', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
icalUrls: config.icalUrls,
|
||||
daysAhead: config.daysAhead ?? 7
|
||||
})
|
||||
});
|
||||
if (res.ok) {
|
||||
const json = await res.json();
|
||||
if (json.success && json.data) {
|
||||
events = json.data;
|
||||
}
|
||||
} else {
|
||||
error = true;
|
||||
}
|
||||
} catch {
|
||||
error = true;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchEvents();
|
||||
});
|
||||
|
||||
// Refresh every 30 minutes
|
||||
$effect(() => {
|
||||
const interval = setInterval(fetchEvents, 30 * 60 * 1000);
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col rounded-xl border border-border bg-card p-4">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<Calendar class="h-4 w-4 text-muted-foreground" />
|
||||
<span class="text-sm font-medium text-foreground">Calendar</span>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="space-y-3">
|
||||
{#each [1, 2, 3] as _n (_n)}
|
||||
<div class="space-y-1">
|
||||
<div class="h-3 w-16 animate-pulse rounded bg-muted"></div>
|
||||
<div class="h-4 w-3/4 animate-pulse rounded bg-muted"></div>
|
||||
<div class="h-3 w-1/3 animate-pulse rounded bg-muted"></div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="flex flex-1 items-center justify-center">
|
||||
<span class="text-xs text-muted-foreground">Failed to load events</span>
|
||||
</div>
|
||||
{:else if events.length === 0}
|
||||
<div class="flex flex-1 items-center justify-center text-center">
|
||||
<div>
|
||||
<Calendar class="mx-auto mb-2 h-8 w-8 text-muted-foreground/50" />
|
||||
<span class="text-xs text-muted-foreground">No upcoming events</span>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex-1 space-y-3 overflow-y-auto">
|
||||
{#each grouped as group (group.label)}
|
||||
<div>
|
||||
<p class="mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
{group.label}
|
||||
</p>
|
||||
<div class="space-y-1.5">
|
||||
{#each group.events as evt (evt.summary + evt.start)}
|
||||
<div class="flex items-start gap-2 rounded-lg px-2 py-1.5 transition-colors hover:bg-muted/50">
|
||||
<!-- Color dot -->
|
||||
<span
|
||||
class="mt-1.5 inline-block h-2 w-2 flex-shrink-0 rounded-full"
|
||||
style="background-color: {evt.calendarColor || 'hsl(var(--primary))'}"
|
||||
></span>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm leading-tight text-foreground">{evt.summary}</p>
|
||||
<div class="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5">
|
||||
<span class="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<Clock class="h-3 w-3" />
|
||||
{formatTimeRange(evt.start, evt.end)}
|
||||
</span>
|
||||
{#if evt.location}
|
||||
<span class="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<MapPin class="h-3 w-3" />
|
||||
<span class="truncate">{evt.location}</span>
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,226 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { Maximize2, X, AlertCircle } from 'lucide-svelte';
|
||||
import type { CameraWidgetConfig } from '$lib/types/widget.js';
|
||||
|
||||
interface Props {
|
||||
config: CameraWidgetConfig;
|
||||
}
|
||||
|
||||
let { config }: Props = $props();
|
||||
|
||||
let imgSrc = $state('');
|
||||
let loading = $state(true);
|
||||
let error = $state(false);
|
||||
let fullscreen = $state(false);
|
||||
let videoEl: HTMLVideoElement | null = $state(null);
|
||||
|
||||
const streamType = $derived(config.type ?? 'image');
|
||||
const refreshMs = $derived((config.refreshInterval ?? 10) * 1000);
|
||||
const aspectRatio = $derived(config.aspectRatio ?? '16/9');
|
||||
|
||||
// For snapshot mode, fetch through our proxy
|
||||
function buildProxyUrl(): string {
|
||||
const params = new URLSearchParams({ streamUrl: config.streamUrl });
|
||||
return `/api/widgets/camera?${params}&t=${Date.now()}`;
|
||||
}
|
||||
|
||||
async function fetchSnapshot() {
|
||||
error = false;
|
||||
try {
|
||||
const url = buildProxyUrl();
|
||||
// Pre-validate the response
|
||||
const res = await fetch(url);
|
||||
if (res.ok) {
|
||||
const blob = await res.blob();
|
||||
if (imgSrc) URL.revokeObjectURL(imgSrc);
|
||||
imgSrc = URL.createObjectURL(blob);
|
||||
} else {
|
||||
error = true;
|
||||
}
|
||||
} catch {
|
||||
error = true;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (streamType === 'image') {
|
||||
fetchSnapshot();
|
||||
} else if (streamType === 'mjpeg') {
|
||||
// MJPEG streams directly via img src
|
||||
imgSrc = config.streamUrl;
|
||||
loading = false;
|
||||
} else if (streamType === 'hls') {
|
||||
loading = false;
|
||||
// HLS setup via $effect below
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (imgSrc && streamType === 'image') {
|
||||
URL.revokeObjectURL(imgSrc);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
// Auto-refresh for snapshot mode
|
||||
$effect(() => {
|
||||
if (streamType !== 'image') return;
|
||||
const interval = setInterval(fetchSnapshot, refreshMs);
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
|
||||
// HLS.js lazy loading
|
||||
$effect(() => {
|
||||
if (streamType !== 'hls' || !videoEl) return;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let hls: any = null;
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const { default: Hls } = await import('hls.js');
|
||||
if (Hls.isSupported()) {
|
||||
hls = new Hls();
|
||||
hls.loadSource(config.streamUrl);
|
||||
hls.attachMedia(videoEl!);
|
||||
} else if (videoEl!.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
videoEl!.src = config.streamUrl;
|
||||
} else {
|
||||
error = true;
|
||||
}
|
||||
} catch {
|
||||
// HLS.js not available — try native
|
||||
if (videoEl!.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
videoEl!.src = config.streamUrl;
|
||||
} else {
|
||||
error = true;
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
if (hls) {
|
||||
hls.destroy();
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
function handleImgError() {
|
||||
error = true;
|
||||
loading = false;
|
||||
}
|
||||
|
||||
function handleImgLoad() {
|
||||
loading = false;
|
||||
error = false;
|
||||
}
|
||||
|
||||
function openFullscreen() {
|
||||
fullscreen = true;
|
||||
}
|
||||
|
||||
function closeFullscreen() {
|
||||
fullscreen = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col rounded-xl border border-border bg-card overflow-hidden">
|
||||
<!-- Stream view -->
|
||||
<div
|
||||
class="relative w-full bg-black"
|
||||
style="aspect-ratio: {aspectRatio}"
|
||||
>
|
||||
{#if loading}
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<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}
|
||||
|
||||
{#if error}
|
||||
<div class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-muted/80">
|
||||
<AlertCircle class="h-8 w-8 text-muted-foreground" />
|
||||
<span class="text-xs text-muted-foreground">Stream unavailable</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if streamType === 'hls'}
|
||||
<video
|
||||
bind:this={videoEl}
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
class="h-full w-full object-contain"
|
||||
></video>
|
||||
{:else}
|
||||
<img
|
||||
src={imgSrc}
|
||||
alt="Camera stream"
|
||||
class="h-full w-full object-contain {loading ? 'opacity-0' : 'opacity-100'} transition-opacity"
|
||||
onload={handleImgLoad}
|
||||
onerror={handleImgError}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Fullscreen button overlay -->
|
||||
{#if !error}
|
||||
<button
|
||||
type="button"
|
||||
onclick={openFullscreen}
|
||||
class="absolute bottom-2 right-2 rounded-md bg-black/50 p-1.5 text-white/80 transition-colors hover:bg-black/70 hover:text-white"
|
||||
title="Fullscreen"
|
||||
>
|
||||
<Maximize2 class="h-4 w-4" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fullscreen modal -->
|
||||
{#if fullscreen}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
|
||||
onclick={closeFullscreen}
|
||||
onkeydown={(e) => e.key === 'Escape' && closeFullscreen()}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onclick={closeFullscreen}
|
||||
class="absolute right-4 top-4 rounded-md p-2 text-white/80 transition-colors hover:text-white"
|
||||
>
|
||||
<X class="h-6 w-6" />
|
||||
</button>
|
||||
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<div class="max-h-[90vh] max-w-[90vw]" onclick={(e) => e.stopPropagation()}>
|
||||
{#if streamType === 'hls'}
|
||||
<video
|
||||
src={config.streamUrl}
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
controls
|
||||
class="max-h-[90vh] max-w-[90vw] object-contain"
|
||||
></video>
|
||||
{:else}
|
||||
<img
|
||||
src={imgSrc}
|
||||
alt="Camera stream fullscreen"
|
||||
class="max-h-[90vh] max-w-[90vw] object-contain"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,182 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { Cloud, Sun, CloudRain, CloudSnow, CloudLightning, CloudDrizzle, Wind, Thermometer } from 'lucide-svelte';
|
||||
import type { ClockWeatherWidgetConfig } from '$lib/types/widget.js';
|
||||
|
||||
interface Props {
|
||||
config: ClockWeatherWidgetConfig;
|
||||
}
|
||||
|
||||
let { config }: Props = $props();
|
||||
|
||||
let now = $state(new Date());
|
||||
let weatherData: { temp: number; condition: string; location?: string } | null = $state(null);
|
||||
let weatherError = $state(false);
|
||||
let weatherLoading = $state(false);
|
||||
|
||||
const clockStyle = $derived(config.clockStyle ?? 'digital');
|
||||
const showWeather = $derived(config.showWeather ?? false);
|
||||
|
||||
const timeFormatter = $derived(
|
||||
new Intl.DateTimeFormat('en-US', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: clockStyle !== '24h',
|
||||
timeZone: config.timezone || undefined
|
||||
})
|
||||
);
|
||||
|
||||
const dateFormatter = $derived(
|
||||
new Intl.DateTimeFormat('en-US', {
|
||||
weekday: 'short',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
timeZone: config.timezone || undefined
|
||||
})
|
||||
);
|
||||
|
||||
const timeStr = $derived(timeFormatter.format(now));
|
||||
const dateStr = $derived(dateFormatter.format(now));
|
||||
|
||||
// Analog clock hand angles
|
||||
const hours = $derived.by(() => {
|
||||
const d = new Date(now.toLocaleString('en-US', { timeZone: config.timezone || undefined }));
|
||||
return d.getHours() % 12;
|
||||
});
|
||||
const minutes = $derived.by(() => {
|
||||
const d = new Date(now.toLocaleString('en-US', { timeZone: config.timezone || undefined }));
|
||||
return d.getMinutes();
|
||||
});
|
||||
const seconds = $derived.by(() => {
|
||||
const d = new Date(now.toLocaleString('en-US', { timeZone: config.timezone || undefined }));
|
||||
return d.getSeconds();
|
||||
});
|
||||
|
||||
const hourAngle = $derived((hours + minutes / 60) * 30);
|
||||
const minuteAngle = $derived((minutes + seconds / 60) * 6);
|
||||
const secondAngle = $derived(seconds * 6);
|
||||
|
||||
async function fetchWeather() {
|
||||
if (!showWeather || !config.latitude || !config.longitude) return;
|
||||
weatherLoading = true;
|
||||
weatherError = false;
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/widgets/weather?lat=${config.latitude}&lng=${config.longitude}`
|
||||
);
|
||||
if (res.ok) {
|
||||
const json = await res.json();
|
||||
if (json.success && json.data) {
|
||||
weatherData = json.data;
|
||||
}
|
||||
} else {
|
||||
weatherError = true;
|
||||
}
|
||||
} catch {
|
||||
weatherError = true;
|
||||
} finally {
|
||||
weatherLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchWeather();
|
||||
});
|
||||
|
||||
// Tick clock every second
|
||||
$effect(() => {
|
||||
const interval = setInterval(() => {
|
||||
now = new Date();
|
||||
}, 1000);
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
|
||||
// Refresh weather every 30 minutes
|
||||
$effect(() => {
|
||||
if (!showWeather) return;
|
||||
const interval = setInterval(fetchWeather, 30 * 60 * 1000);
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
|
||||
function getWeatherIcon(condition: string) {
|
||||
const c = condition.toLowerCase();
|
||||
if (c.includes('rain')) return CloudRain;
|
||||
if (c.includes('drizzle')) return CloudDrizzle;
|
||||
if (c.includes('snow')) return CloudSnow;
|
||||
if (c.includes('thunder') || c.includes('lightning')) return CloudLightning;
|
||||
if (c.includes('wind')) return Wind;
|
||||
if (c.includes('cloud') || c.includes('overcast')) return Cloud;
|
||||
return Sun;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col items-center justify-center rounded-xl border border-border bg-card p-4">
|
||||
{#if clockStyle === 'analog'}
|
||||
<!-- Analog clock face -->
|
||||
<svg viewBox="0 0 100 100" class="h-32 w-32">
|
||||
<!-- Clock face -->
|
||||
<circle cx="50" cy="50" r="48" fill="none" stroke="currentColor" stroke-width="1.5" class="text-border" />
|
||||
<!-- Hour markers -->
|
||||
<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
|
||||
{#each {length: 12} as _, i (i)}
|
||||
{@const angle = (i * 30 * Math.PI) / 180}
|
||||
{@const x1 = 50 + 42 * Math.sin(angle)}
|
||||
{@const y1 = 50 - 42 * Math.cos(angle)}
|
||||
{@const x2 = 50 + 46 * Math.sin(angle)}
|
||||
{@const y2 = 50 - 46 * Math.cos(angle)}
|
||||
<line {x1} {y1} {x2} {y2} stroke="currentColor" stroke-width={i % 3 === 0 ? '2' : '1'} class="text-foreground" />
|
||||
{/each}
|
||||
<!-- Hour hand -->
|
||||
<line
|
||||
x1="50" y1="50"
|
||||
x2={50 + 24 * Math.sin((hourAngle * Math.PI) / 180)}
|
||||
y2={50 - 24 * Math.cos((hourAngle * Math.PI) / 180)}
|
||||
stroke="currentColor" stroke-width="2.5" stroke-linecap="round" class="text-foreground"
|
||||
/>
|
||||
<!-- Minute hand -->
|
||||
<line
|
||||
x1="50" y1="50"
|
||||
x2={50 + 34 * Math.sin((minuteAngle * Math.PI) / 180)}
|
||||
y2={50 - 34 * Math.cos((minuteAngle * Math.PI) / 180)}
|
||||
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" class="text-foreground"
|
||||
/>
|
||||
<!-- Second hand -->
|
||||
<line
|
||||
x1="50" y1="50"
|
||||
x2={50 + 38 * Math.sin((secondAngle * Math.PI) / 180)}
|
||||
y2={50 - 38 * Math.cos((secondAngle * Math.PI) / 180)}
|
||||
stroke="currentColor" stroke-width="0.8" stroke-linecap="round" class="text-primary"
|
||||
/>
|
||||
<!-- Center dot -->
|
||||
<circle cx="50" cy="50" r="2" fill="currentColor" class="text-primary" />
|
||||
</svg>
|
||||
<p class="mt-2 text-xs text-muted-foreground">{dateStr}</p>
|
||||
{:else}
|
||||
<!-- Digital clock -->
|
||||
<p class="font-mono text-4xl font-bold tabular-nums text-foreground">{timeStr}</p>
|
||||
<p class="mt-1 text-sm text-muted-foreground">{dateStr}</p>
|
||||
{#if config.timezone}
|
||||
<p class="mt-0.5 text-xs text-muted-foreground/70">{config.timezone.replace(/_/g, ' ')}</p>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Weather section -->
|
||||
{#if showWeather}
|
||||
<div class="mt-3 flex items-center gap-2 border-t border-border pt-3">
|
||||
{#if weatherLoading}
|
||||
<div class="h-5 w-20 animate-pulse rounded bg-muted"></div>
|
||||
{:else if weatherError}
|
||||
<span class="text-xs text-muted-foreground">Weather unavailable</span>
|
||||
{:else if weatherData}
|
||||
{@const WeatherIcon = getWeatherIcon(weatherData.condition)}
|
||||
<WeatherIcon class="h-5 w-5 text-muted-foreground" />
|
||||
<span class="text-lg font-semibold text-foreground">{Math.round(weatherData.temp)}°</span>
|
||||
<span class="text-xs text-muted-foreground">{weatherData.condition}</span>
|
||||
{:else}
|
||||
<Thermometer class="h-4 w-4 text-muted-foreground" />
|
||||
<span class="text-xs text-muted-foreground">No weather data</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,68 @@
|
||||
<script lang="ts">
|
||||
import { ExternalLink, ChevronDown, Link } from 'lucide-svelte';
|
||||
import { slide } from 'svelte/transition';
|
||||
import type { LinkGroupWidgetConfig } from '$lib/types/widget.js';
|
||||
|
||||
interface Props {
|
||||
config: LinkGroupWidgetConfig;
|
||||
}
|
||||
|
||||
let { config }: Props = $props();
|
||||
|
||||
let collapsed = $state(false);
|
||||
|
||||
const isCollapsible = $derived(config.collapsible ?? false);
|
||||
const links = $derived(config.links ?? []);
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col rounded-xl border border-border bg-card p-4">
|
||||
<!-- Header -->
|
||||
{#if isCollapsible}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (collapsed = !collapsed)}
|
||||
class="mb-2 flex w-full items-center justify-between text-left"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<Link class="h-4 w-4 text-muted-foreground" />
|
||||
<span class="text-sm font-medium text-foreground">Links</span>
|
||||
<span class="text-xs text-muted-foreground">({links.length})</span>
|
||||
</div>
|
||||
<ChevronDown
|
||||
class="h-4 w-4 text-muted-foreground transition-transform {collapsed ? '-rotate-90' : ''}"
|
||||
/>
|
||||
</button>
|
||||
{:else}
|
||||
<div class="mb-2 flex items-center gap-2">
|
||||
<Link class="h-4 w-4 text-muted-foreground" />
|
||||
<span class="text-sm font-medium text-foreground">Links</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Links list -->
|
||||
{#if !collapsed}
|
||||
<div transition:slide={{ duration: 200 }}>
|
||||
{#if links.length === 0}
|
||||
<p class="text-xs text-muted-foreground">No links configured</p>
|
||||
{:else}
|
||||
<div class="space-y-0.5">
|
||||
{#each links as link (link.url + link.label)}
|
||||
<a
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-foreground transition-colors hover:bg-muted/50 hover:text-primary"
|
||||
>
|
||||
{#if link.icon}
|
||||
<span class="flex-shrink-0 text-base">{link.icon}</span>
|
||||
{:else}
|
||||
<ExternalLink class="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
|
||||
{/if}
|
||||
<span class="min-w-0 flex-1 truncate">{link.label}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,101 @@
|
||||
<script lang="ts">
|
||||
import { marked } from 'marked';
|
||||
import DOMPurify from 'isomorphic-dompurify';
|
||||
import { Pencil, Eye } from 'lucide-svelte';
|
||||
import type { MarkdownWidgetConfig } from '$lib/types/widget.js';
|
||||
|
||||
interface Props {
|
||||
config: MarkdownWidgetConfig;
|
||||
widgetId?: string;
|
||||
}
|
||||
|
||||
let { config, widgetId }: Props = $props();
|
||||
|
||||
let editMode = $state(false);
|
||||
let editContent = $state(config.content ?? '');
|
||||
let saving = $state(false);
|
||||
|
||||
marked.setOptions({
|
||||
breaks: true,
|
||||
gfm: true
|
||||
});
|
||||
|
||||
const renderedHtml = $derived.by(() => {
|
||||
const source = editMode ? editContent : (config.content ?? '');
|
||||
const raw = marked.parse(source, { async: false }) as string;
|
||||
return DOMPurify.sanitize(raw);
|
||||
});
|
||||
|
||||
async function saveContent() {
|
||||
if (!widgetId) return;
|
||||
saving = true;
|
||||
try {
|
||||
const newConfig = { ...config, content: editContent };
|
||||
await fetch(`/api/widgets/${widgetId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ config: JSON.stringify(newConfig) })
|
||||
});
|
||||
} catch {
|
||||
// Silently fail — user can retry
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleEdit() {
|
||||
if (editMode) {
|
||||
saveContent();
|
||||
} else {
|
||||
editContent = config.content ?? '';
|
||||
}
|
||||
editMode = !editMode;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col rounded-xl border border-border bg-card">
|
||||
<!-- Toolbar -->
|
||||
<div class="flex items-center justify-end border-b border-border px-3 py-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onclick={toggleEdit}
|
||||
class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||
disabled={saving}
|
||||
>
|
||||
{#if editMode}
|
||||
<Eye class="h-3.5 w-3.5" />
|
||||
<span>{saving ? 'Saving...' : 'Preview'}</span>
|
||||
{:else}
|
||||
<Pencil class="h-3.5 w-3.5" />
|
||||
<span>Edit</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if editMode}
|
||||
<!-- Split pane: editor + preview -->
|
||||
<div class="flex flex-1 divide-x divide-border overflow-hidden">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<textarea
|
||||
bind:value={editContent}
|
||||
class="h-full w-full resize-none border-0 bg-background p-3 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
|
||||
placeholder="Write markdown here..."
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="flex-1 overflow-auto p-3">
|
||||
<div class="prose prose-sm prose-invert max-w-none text-foreground">
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized with DOMPurify -->
|
||||
{@html renderedHtml}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- View mode -->
|
||||
<div class="flex-1 overflow-auto p-4">
|
||||
<div class="prose prose-sm prose-invert max-w-none text-foreground">
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized with DOMPurify -->
|
||||
{@html renderedHtml}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,108 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { TrendingUp, TrendingDown, Minus } from 'lucide-svelte';
|
||||
import type { MetricWidgetConfig } from '$lib/types/widget.js';
|
||||
|
||||
interface Props {
|
||||
config: MetricWidgetConfig;
|
||||
}
|
||||
|
||||
let { config }: Props = $props();
|
||||
|
||||
let currentValue: number | null = $state(null);
|
||||
let trend: 'up' | 'down' | 'flat' | null = $state(null);
|
||||
let loading = $state(true);
|
||||
let error = $state(false);
|
||||
|
||||
const refreshMs = $derived((config.refreshInterval ?? 60) * 1000);
|
||||
|
||||
function formatNumber(n: number): string {
|
||||
if (Math.abs(n) >= 1_000_000) {
|
||||
return (n / 1_000_000).toFixed(1) + 'M';
|
||||
}
|
||||
if (Math.abs(n) >= 1_000) {
|
||||
return (n / 1_000).toFixed(1) + 'K';
|
||||
}
|
||||
// Use locale formatting for smaller numbers
|
||||
return n.toLocaleString('en-US', { maximumFractionDigits: 2 });
|
||||
}
|
||||
|
||||
async function fetchMetric() {
|
||||
error = false;
|
||||
try {
|
||||
// eslint-disable-next-line svelte/prefer-svelte-reactivity
|
||||
const params = new URLSearchParams({ source: config.source });
|
||||
if (config.value) params.set('value', config.value);
|
||||
if (config.url) params.set('url', config.url);
|
||||
if (config.jsonPath) params.set('jsonPath', config.jsonPath);
|
||||
if (config.query) params.set('query', config.query);
|
||||
|
||||
const res = await fetch(`/api/widgets/metric?${params}`);
|
||||
if (res.ok) {
|
||||
const json = await res.json();
|
||||
if (json.success && json.data) {
|
||||
currentValue = json.data.value;
|
||||
trend = json.data.trend ?? null;
|
||||
}
|
||||
} else {
|
||||
error = true;
|
||||
}
|
||||
} catch {
|
||||
error = true;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchMetric();
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
const interval = setInterval(fetchMetric, refreshMs);
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
|
||||
const trendColor = $derived.by(() => {
|
||||
if (trend === 'up') return 'text-green-500';
|
||||
if (trend === 'down') return 'text-red-500';
|
||||
return 'text-muted-foreground';
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col items-center justify-center rounded-xl border border-border bg-card p-4">
|
||||
{#if loading}
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="h-10 w-24 animate-pulse rounded bg-muted"></div>
|
||||
<div class="h-4 w-16 animate-pulse rounded bg-muted"></div>
|
||||
</div>
|
||||
{:else if error}
|
||||
<span class="text-xs text-muted-foreground">Failed to load metric</span>
|
||||
{:else if currentValue !== null}
|
||||
<!-- Trend arrow -->
|
||||
<div class="mb-1 {trendColor}">
|
||||
{#if trend === 'up'}
|
||||
<TrendingUp class="h-5 w-5" />
|
||||
{:else if trend === 'down'}
|
||||
<TrendingDown class="h-5 w-5" />
|
||||
{:else}
|
||||
<Minus class="h-5 w-5" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Big number -->
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-4xl font-bold tabular-nums text-foreground">
|
||||
{formatNumber(currentValue)}
|
||||
</span>
|
||||
{#if config.unit}
|
||||
<span class="text-lg text-muted-foreground">{config.unit}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Label -->
|
||||
<p class="mt-1 text-sm text-muted-foreground">{config.label}</p>
|
||||
{:else}
|
||||
<span class="text-xs text-muted-foreground">No data</span>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,148 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { ExternalLink, ChevronDown, Rss } from 'lucide-svelte';
|
||||
import { slide } from 'svelte/transition';
|
||||
import type { RssWidgetConfig } from '$lib/types/widget.js';
|
||||
|
||||
interface Props {
|
||||
config: RssWidgetConfig;
|
||||
}
|
||||
|
||||
let { config }: Props = $props();
|
||||
|
||||
interface FeedItem {
|
||||
title: string;
|
||||
link: string;
|
||||
pubDate: string;
|
||||
summary: string;
|
||||
}
|
||||
|
||||
let items: FeedItem[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let error = $state(false);
|
||||
let expandedIndex: number | null = $state(null);
|
||||
|
||||
const showSummary = $derived(config.showSummary ?? true);
|
||||
|
||||
function relativeTime(dateStr: string): string {
|
||||
try {
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMin = Math.floor(diffMs / 60000);
|
||||
if (diffMin < 1) return 'just now';
|
||||
if (diffMin < 60) return `${diffMin}m ago`;
|
||||
const diffHr = Math.floor(diffMin / 60);
|
||||
if (diffHr < 24) return `${diffHr}h ago`;
|
||||
const diffDays = Math.floor(diffHr / 24);
|
||||
if (diffDays < 7) return `${diffDays}d ago`;
|
||||
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchFeed() {
|
||||
error = false;
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
feedUrl: config.feedUrl,
|
||||
maxItems: String(config.maxItems ?? 10)
|
||||
});
|
||||
const res = await fetch(`/api/widgets/rss?${params}`);
|
||||
if (res.ok) {
|
||||
const json = await res.json();
|
||||
if (json.success && json.data) {
|
||||
items = json.data;
|
||||
}
|
||||
} else {
|
||||
error = true;
|
||||
}
|
||||
} catch {
|
||||
error = true;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchFeed();
|
||||
});
|
||||
|
||||
// Refresh every 15 minutes
|
||||
$effect(() => {
|
||||
const interval = setInterval(fetchFeed, 15 * 60 * 1000);
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
|
||||
function toggleExpand(index: number) {
|
||||
expandedIndex = expandedIndex === index ? null : index;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col rounded-xl border border-border bg-card p-4">
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<Rss class="h-4 w-4 text-muted-foreground" />
|
||||
<span class="text-sm font-medium text-foreground">RSS Feed</span>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="space-y-3">
|
||||
{#each [1, 2, 3, 4] as _n (_n)}
|
||||
<div class="space-y-1">
|
||||
<div class="h-4 w-3/4 animate-pulse rounded bg-muted"></div>
|
||||
<div class="h-3 w-1/4 animate-pulse rounded bg-muted"></div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="flex flex-1 items-center justify-center">
|
||||
<span class="text-xs text-muted-foreground">Failed to load feed</span>
|
||||
</div>
|
||||
{:else if items.length === 0}
|
||||
<div class="flex flex-1 items-center justify-center">
|
||||
<span class="text-xs text-muted-foreground">No feed items</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex-1 space-y-1 overflow-y-auto">
|
||||
{#each items as item, i (item.link + i)}
|
||||
<div class="rounded-lg px-2 py-1.5 transition-colors hover:bg-muted/50">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="flex flex-1 items-start gap-1.5 text-left"
|
||||
onclick={() => toggleExpand(i)}
|
||||
>
|
||||
{#if showSummary && item.summary}
|
||||
<ChevronDown
|
||||
class="mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-muted-foreground transition-transform {expandedIndex === i ? 'rotate-180' : ''}"
|
||||
/>
|
||||
{/if}
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm leading-tight text-foreground line-clamp-2">{item.title}</p>
|
||||
<p class="mt-0.5 text-xs text-muted-foreground">{relativeTime(item.pubDate)}</p>
|
||||
</div>
|
||||
</button>
|
||||
<a
|
||||
href={item.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="mt-0.5 flex-shrink-0 text-muted-foreground transition-colors hover:text-primary"
|
||||
title="Open in new tab"
|
||||
>
|
||||
<ExternalLink class="h-3.5 w-3.5" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{#if showSummary && expandedIndex === i && item.summary}
|
||||
<div transition:slide={{ duration: 200 }}>
|
||||
<p class="mt-1.5 pl-5 text-xs leading-relaxed text-muted-foreground">
|
||||
{item.summary}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,142 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import type { SystemStatsWidgetConfig } from '$lib/types/widget.js';
|
||||
|
||||
interface Props {
|
||||
config: SystemStatsWidgetConfig;
|
||||
}
|
||||
|
||||
let { config }: Props = $props();
|
||||
|
||||
interface MetricData {
|
||||
metric: string;
|
||||
value: number;
|
||||
unit: string;
|
||||
}
|
||||
|
||||
let metrics: MetricData[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let error = $state(false);
|
||||
|
||||
const refreshMs = $derived((config.refreshInterval ?? 30) * 1000);
|
||||
|
||||
function thresholdColor(value: number): string {
|
||||
if (value >= 85) return 'text-red-500';
|
||||
if (value >= 60) return 'text-yellow-500';
|
||||
return 'text-green-500';
|
||||
}
|
||||
|
||||
function thresholdStroke(value: number): string {
|
||||
if (value >= 85) return 'stroke-red-500';
|
||||
if (value >= 60) return 'stroke-yellow-500';
|
||||
return 'stroke-green-500';
|
||||
}
|
||||
|
||||
function thresholdTrack(_value: number): string {
|
||||
return 'stroke-muted';
|
||||
}
|
||||
|
||||
async function fetchStats() {
|
||||
error = false;
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
sourceUrl: config.sourceUrl,
|
||||
sourceType: config.sourceType
|
||||
});
|
||||
const res = await fetch(`/api/widgets/system-stats?${params}`);
|
||||
if (res.ok) {
|
||||
const json = await res.json();
|
||||
if (json.success && json.data) {
|
||||
// Filter to only configured metrics if specified
|
||||
const allMetrics: MetricData[] = json.data;
|
||||
metrics =
|
||||
config.metrics.length > 0
|
||||
? allMetrics.filter((m) =>
|
||||
config.metrics.some((cm) => m.metric.toLowerCase().includes(cm.toLowerCase()))
|
||||
)
|
||||
: allMetrics;
|
||||
}
|
||||
} else {
|
||||
error = true;
|
||||
}
|
||||
} catch {
|
||||
error = true;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchStats();
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
const interval = setInterval(fetchStats, refreshMs);
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
|
||||
// SVG donut chart constants
|
||||
const RADIUS = 36;
|
||||
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col rounded-xl border border-border bg-card p-4">
|
||||
<span class="mb-3 text-sm font-medium text-foreground">System Stats</span>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex flex-1 items-center justify-center gap-4">
|
||||
{#each [1, 2, 3] as _n (_n)}
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
<div class="h-20 w-20 animate-pulse rounded-full bg-muted"></div>
|
||||
<div class="h-3 w-12 animate-pulse rounded bg-muted"></div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="flex flex-1 items-center justify-center">
|
||||
<span class="text-xs text-muted-foreground">Failed to load stats</span>
|
||||
</div>
|
||||
{:else if metrics.length === 0}
|
||||
<div class="flex flex-1 items-center justify-center">
|
||||
<span class="text-xs text-muted-foreground">No metrics available</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-1 flex-wrap items-center justify-center gap-4">
|
||||
{#each metrics as m (m.metric)}
|
||||
{@const pct = Math.min(100, Math.max(0, m.value))}
|
||||
{@const dashOffset = CIRCUMFERENCE - (pct / 100) * CIRCUMFERENCE}
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<div class="relative h-20 w-20">
|
||||
<svg viewBox="0 0 80 80" class="h-full w-full -rotate-90">
|
||||
<!-- Track -->
|
||||
<circle
|
||||
cx="40" cy="40" r={RADIUS}
|
||||
fill="none"
|
||||
stroke-width="6"
|
||||
class={thresholdTrack(pct)}
|
||||
/>
|
||||
<!-- Value arc -->
|
||||
<circle
|
||||
cx="40" cy="40" r={RADIUS}
|
||||
fill="none"
|
||||
stroke-width="6"
|
||||
stroke-linecap="round"
|
||||
stroke-dasharray={CIRCUMFERENCE}
|
||||
stroke-dashoffset={dashOffset}
|
||||
class={thresholdStroke(pct)}
|
||||
style="transition: stroke-dashoffset 0.5s ease"
|
||||
/>
|
||||
</svg>
|
||||
<!-- Center text -->
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<span class="text-sm font-bold {thresholdColor(pct)}">
|
||||
{Math.round(pct)}{m.unit}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs text-muted-foreground capitalize">{m.metric}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -35,12 +35,69 @@
|
||||
let statusLabel = $state('');
|
||||
let statusAppIds = $state<string[]>([]);
|
||||
|
||||
// Clock/Weather fields
|
||||
let clockTimezone = $state('');
|
||||
let clockStyle = $state<'digital' | 'analog' | '24h'>('digital');
|
||||
let clockShowWeather = $state(false);
|
||||
let clockLatitude = $state('');
|
||||
let clockLongitude = $state('');
|
||||
|
||||
// System Stats fields
|
||||
let sysStatsSourceUrl = $state('');
|
||||
let sysStatsSourceType = $state<'glances' | 'prometheus' | 'custom'>('custom');
|
||||
let sysStatsMetrics = $state<string[]>(['cpu', 'ram', 'disk']);
|
||||
let sysStatsRefreshInterval = $state(30);
|
||||
|
||||
// RSS fields
|
||||
let rssFeedUrl = $state('');
|
||||
let rssMaxItems = $state(10);
|
||||
let rssShowSummary = $state(true);
|
||||
|
||||
// Calendar fields
|
||||
let calendarUrls = $state<Array<{ url: string; color: string; label: string }>>([
|
||||
{ url: '', color: '#6366f1', label: '' }
|
||||
]);
|
||||
let calendarDaysAhead = $state(7);
|
||||
|
||||
// Markdown fields
|
||||
let markdownContent = $state('');
|
||||
|
||||
// Metric fields
|
||||
let metricLabel = $state('');
|
||||
let metricSource = $state<'static' | 'json' | 'prometheus'>('static');
|
||||
let metricValue = $state('');
|
||||
let metricUrl = $state('');
|
||||
let metricJsonPath = $state('');
|
||||
let metricQuery = $state('');
|
||||
let metricUnit = $state('');
|
||||
let metricRefreshInterval = $state(60);
|
||||
|
||||
// Link Group fields
|
||||
let linkGroupLinks = $state<Array<{ label: string; url: string; icon: string }>>([
|
||||
{ label: '', url: '', icon: '' }
|
||||
]);
|
||||
let linkGroupCollapsible = $state(false);
|
||||
|
||||
// Camera fields
|
||||
let cameraStreamUrl = $state('');
|
||||
let cameraType = $state<'image' | 'mjpeg' | 'hls'>('image');
|
||||
let cameraRefreshInterval = $state(10);
|
||||
let cameraAspectRatio = $state('16/9');
|
||||
|
||||
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' }
|
||||
{ value: 'status', icon: '📊', label: 'Status' },
|
||||
{ value: 'clock', icon: '🕐', label: 'Clock' },
|
||||
{ value: 'system_stats', icon: '💻', label: 'System' },
|
||||
{ value: 'rss', icon: '📡', label: 'RSS' },
|
||||
{ value: 'calendar', icon: '📅', label: 'Calendar' },
|
||||
{ value: 'markdown', icon: '📄', label: 'Markdown' },
|
||||
{ value: 'metric', icon: '📈', label: 'Metric' },
|
||||
{ value: 'link_group', icon: '🔗', label: 'Links' },
|
||||
{ value: 'camera', icon: '📷', label: 'Camera' }
|
||||
];
|
||||
|
||||
const noteFormatItems: IconGridItem[] = [
|
||||
@@ -48,6 +105,18 @@
|
||||
{ value: 'text', icon: '📄', label: 'Plain Text' }
|
||||
];
|
||||
|
||||
const clockStyleItems: IconGridItem[] = [
|
||||
{ value: 'digital', icon: '🔢', label: 'Digital' },
|
||||
{ value: 'analog', icon: '🕐', label: 'Analog' },
|
||||
{ value: '24h', icon: '⏰', label: '24h' }
|
||||
];
|
||||
|
||||
const metricSourceItems: IconGridItem[] = [
|
||||
{ value: 'static', icon: '📌', label: 'Static' },
|
||||
{ value: 'json', icon: '🔗', label: 'JSON' },
|
||||
{ value: 'prometheus', icon: '📊', label: 'Prometheus' }
|
||||
];
|
||||
|
||||
const appPickerItems: EntityPickerItem[] = $derived(
|
||||
apps.map((app) => ({
|
||||
value: app.id,
|
||||
@@ -68,6 +137,35 @@
|
||||
embedHeight = 300;
|
||||
statusLabel = '';
|
||||
statusAppIds = [];
|
||||
clockTimezone = '';
|
||||
clockStyle = 'digital';
|
||||
clockShowWeather = false;
|
||||
clockLatitude = '';
|
||||
clockLongitude = '';
|
||||
sysStatsSourceUrl = '';
|
||||
sysStatsSourceType = 'custom';
|
||||
sysStatsMetrics = ['cpu', 'ram', 'disk'];
|
||||
sysStatsRefreshInterval = 30;
|
||||
rssFeedUrl = '';
|
||||
rssMaxItems = 10;
|
||||
rssShowSummary = true;
|
||||
calendarUrls = [{ url: '', color: '#6366f1', label: '' }];
|
||||
calendarDaysAhead = 7;
|
||||
markdownContent = '';
|
||||
metricLabel = '';
|
||||
metricSource = 'static';
|
||||
metricValue = '';
|
||||
metricUrl = '';
|
||||
metricJsonPath = '';
|
||||
metricQuery = '';
|
||||
metricUnit = '';
|
||||
metricRefreshInterval = 60;
|
||||
linkGroupLinks = [{ label: '', url: '', icon: '' }];
|
||||
linkGroupCollapsible = false;
|
||||
cameraStreamUrl = '';
|
||||
cameraType = 'image';
|
||||
cameraRefreshInterval = 10;
|
||||
cameraAspectRatio = '16/9';
|
||||
}
|
||||
|
||||
function handleSubmitWidget() {
|
||||
@@ -100,6 +198,73 @@
|
||||
widgetData.appIds = statusAppIds;
|
||||
if (statusLabel) widgetData.label = statusLabel;
|
||||
break;
|
||||
case 'clock':
|
||||
if (clockTimezone) widgetData.timezone = clockTimezone;
|
||||
widgetData.clockStyle = clockStyle;
|
||||
widgetData.showWeather = clockShowWeather;
|
||||
if (clockShowWeather && clockLatitude && clockLongitude) {
|
||||
widgetData.latitude = parseFloat(clockLatitude);
|
||||
widgetData.longitude = parseFloat(clockLongitude);
|
||||
}
|
||||
break;
|
||||
case 'system_stats':
|
||||
if (!sysStatsSourceUrl) return;
|
||||
widgetData.sourceUrl = sysStatsSourceUrl;
|
||||
widgetData.sourceType = sysStatsSourceType;
|
||||
widgetData.metrics = sysStatsMetrics;
|
||||
widgetData.refreshInterval = sysStatsRefreshInterval;
|
||||
break;
|
||||
case 'rss':
|
||||
if (!rssFeedUrl) return;
|
||||
widgetData.feedUrl = rssFeedUrl;
|
||||
widgetData.maxItems = rssMaxItems;
|
||||
widgetData.showSummary = rssShowSummary;
|
||||
break;
|
||||
case 'calendar': {
|
||||
const validUrls = calendarUrls.filter((c) => c.url.trim() !== '');
|
||||
if (validUrls.length === 0) return;
|
||||
widgetData.icalUrls = validUrls;
|
||||
widgetData.daysAhead = calendarDaysAhead;
|
||||
break;
|
||||
}
|
||||
case 'markdown':
|
||||
if (!markdownContent) return;
|
||||
widgetData.content = markdownContent;
|
||||
break;
|
||||
case 'metric':
|
||||
if (!metricLabel) return;
|
||||
widgetData.label = metricLabel;
|
||||
widgetData.source = metricSource;
|
||||
if (metricSource === 'static') widgetData.value = metricValue;
|
||||
if (metricSource === 'json') {
|
||||
widgetData.url = metricUrl;
|
||||
widgetData.jsonPath = metricJsonPath;
|
||||
}
|
||||
if (metricSource === 'prometheus') {
|
||||
widgetData.url = metricUrl;
|
||||
widgetData.query = metricQuery;
|
||||
}
|
||||
if (metricUnit) widgetData.unit = metricUnit;
|
||||
widgetData.refreshInterval = metricRefreshInterval;
|
||||
break;
|
||||
case 'link_group': {
|
||||
const validLinks = linkGroupLinks.filter((l) => l.label.trim() && l.url.trim());
|
||||
if (validLinks.length === 0) return;
|
||||
widgetData.links = validLinks.map((l) => ({
|
||||
label: l.label,
|
||||
url: l.url,
|
||||
...(l.icon ? { icon: l.icon } : {})
|
||||
}));
|
||||
widgetData.collapsible = linkGroupCollapsible;
|
||||
break;
|
||||
}
|
||||
case 'camera':
|
||||
if (!cameraStreamUrl) return;
|
||||
widgetData.streamUrl = cameraStreamUrl;
|
||||
widgetData.type = cameraType;
|
||||
widgetData.refreshInterval = cameraRefreshInterval;
|
||||
widgetData.aspectRatio = cameraAspectRatio;
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
@@ -115,6 +280,34 @@
|
||||
statusAppIds = [...statusAppIds, appId];
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSysStatsMetric(metric: string) {
|
||||
if (sysStatsMetrics.includes(metric)) {
|
||||
sysStatsMetrics = sysStatsMetrics.filter((m) => m !== metric);
|
||||
} else {
|
||||
sysStatsMetrics = [...sysStatsMetrics, metric];
|
||||
}
|
||||
}
|
||||
|
||||
function addCalendarUrl() {
|
||||
calendarUrls = [...calendarUrls, { url: '', color: '#6366f1', label: '' }];
|
||||
}
|
||||
|
||||
function removeCalendarUrl(index: number) {
|
||||
calendarUrls = calendarUrls.filter((_, i) => i !== index);
|
||||
}
|
||||
|
||||
function addLinkGroupLink() {
|
||||
linkGroupLinks = [...linkGroupLinks, { label: '', url: '', icon: '' }];
|
||||
}
|
||||
|
||||
function removeLinkGroupLink(index: number) {
|
||||
linkGroupLinks = linkGroupLinks.filter((_, i) => i !== index);
|
||||
}
|
||||
|
||||
// Input CSS class for reuse
|
||||
const inputClass =
|
||||
'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';
|
||||
</script>
|
||||
|
||||
<div class="mb-3 rounded-lg border border-border bg-muted/50 p-3">
|
||||
@@ -152,7 +345,7 @@
|
||||
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"
|
||||
class={inputClass}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
@@ -163,7 +356,7 @@
|
||||
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"
|
||||
class={inputClass}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
@@ -174,7 +367,7 @@
|
||||
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"
|
||||
class={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -184,7 +377,7 @@
|
||||
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"
|
||||
class={inputClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -205,7 +398,7 @@
|
||||
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"
|
||||
class={inputClass}
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
@@ -219,7 +412,7 @@
|
||||
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"
|
||||
class={inputClass}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
@@ -231,7 +424,7 @@
|
||||
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"
|
||||
class={inputClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -244,7 +437,7 @@
|
||||
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"
|
||||
class={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -267,6 +460,463 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- === NEW WIDGET TYPE FORMS === -->
|
||||
|
||||
{:else if selectedWidgetType === 'clock'}
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-foreground">Clock Style</label>
|
||||
<IconGrid
|
||||
items={clockStyleItems}
|
||||
bind:value={clockStyle}
|
||||
columns={3}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="clock-tz-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Timezone (optional)</label>
|
||||
<input
|
||||
id="clock-tz-{sectionId}"
|
||||
type="text"
|
||||
bind:value={clockTimezone}
|
||||
placeholder="e.g. America/New_York"
|
||||
class={inputClass}
|
||||
/>
|
||||
<p class="mt-0.5 text-xs text-muted-foreground">Leave empty for local time</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="flex items-center gap-2 text-sm font-medium text-foreground">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={clockShowWeather}
|
||||
class="h-4 w-4 rounded border-input accent-primary"
|
||||
/>
|
||||
Show Weather
|
||||
</label>
|
||||
</div>
|
||||
{#if clockShowWeather}
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label for="clock-lat-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Latitude</label>
|
||||
<input
|
||||
id="clock-lat-{sectionId}"
|
||||
type="text"
|
||||
bind:value={clockLatitude}
|
||||
placeholder="e.g. 40.7128"
|
||||
class={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="clock-lng-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Longitude</label>
|
||||
<input
|
||||
id="clock-lng-{sectionId}"
|
||||
type="text"
|
||||
bind:value={clockLongitude}
|
||||
placeholder="e.g. -74.0060"
|
||||
class={inputClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{:else if selectedWidgetType === 'system_stats'}
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label for="sys-url-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Source URL</label>
|
||||
<input
|
||||
id="sys-url-{sectionId}"
|
||||
type="url"
|
||||
bind:value={sysStatsSourceUrl}
|
||||
placeholder="https://your-server:61208/api/3"
|
||||
class={inputClass}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="sys-type-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Source Type</label>
|
||||
<select
|
||||
id="sys-type-{sectionId}"
|
||||
bind:value={sysStatsSourceType}
|
||||
class={inputClass}
|
||||
>
|
||||
<option value="glances">Glances</option>
|
||||
<option value="prometheus">Prometheus</option>
|
||||
<option value="custom">Custom JSON</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<span class="mb-1 block text-sm font-medium text-foreground">Metrics</span>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#each ['cpu', 'ram', 'disk', 'swap', 'network'] as metric (metric)}
|
||||
<label class="flex items-center gap-1.5 rounded-md border border-input px-2 py-1 text-sm text-foreground hover:bg-accent">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={sysStatsMetrics.includes(metric)}
|
||||
onchange={() => toggleSysStatsMetric(metric)}
|
||||
class="h-3.5 w-3.5 rounded border-input accent-primary"
|
||||
/>
|
||||
<span class="capitalize">{metric}</span>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="sys-refresh-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Refresh Interval: {sysStatsRefreshInterval}s
|
||||
</label>
|
||||
<input
|
||||
id="sys-refresh-{sectionId}"
|
||||
type="range"
|
||||
bind:value={sysStatsRefreshInterval}
|
||||
min="5"
|
||||
max="300"
|
||||
step="5"
|
||||
class="w-full accent-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{:else if selectedWidgetType === 'rss'}
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label for="rss-url-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Feed URL</label>
|
||||
<input
|
||||
id="rss-url-{sectionId}"
|
||||
type="url"
|
||||
bind:value={rssFeedUrl}
|
||||
placeholder="https://example.com/feed.xml"
|
||||
class={inputClass}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="rss-max-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Max Items: {rssMaxItems}
|
||||
</label>
|
||||
<input
|
||||
id="rss-max-{sectionId}"
|
||||
type="range"
|
||||
bind:value={rssMaxItems}
|
||||
min="3"
|
||||
max="30"
|
||||
step="1"
|
||||
class="w-full accent-primary"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="flex items-center gap-2 text-sm font-medium text-foreground">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={rssShowSummary}
|
||||
class="h-4 w-4 rounded border-input accent-primary"
|
||||
/>
|
||||
Show Summaries
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{:else if selectedWidgetType === 'calendar'}
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<span class="mb-1 block text-sm font-medium text-foreground">iCal URLs</span>
|
||||
<div class="space-y-2">
|
||||
{#each calendarUrls as _cal, i (i)}
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="flex-1 space-y-1">
|
||||
<input
|
||||
type="url"
|
||||
bind:value={calendarUrls[i].url}
|
||||
placeholder="https://example.com/calendar.ics"
|
||||
class={inputClass}
|
||||
/>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={calendarUrls[i].label}
|
||||
placeholder="Label (optional)"
|
||||
class="{inputClass} flex-1"
|
||||
/>
|
||||
<input
|
||||
type="color"
|
||||
bind:value={calendarUrls[i].color}
|
||||
class="h-9 w-9 cursor-pointer rounded-lg border border-input bg-background"
|
||||
title="Calendar color"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{#if calendarUrls.length > 1}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => removeCalendarUrl(i)}
|
||||
class="mt-2 text-xs text-muted-foreground transition-colors hover:text-destructive"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={addCalendarUrl}
|
||||
class="mt-1 text-xs text-primary transition-colors hover:text-primary/80"
|
||||
>
|
||||
+ Add calendar
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<label for="cal-days-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Days Ahead: {calendarDaysAhead}
|
||||
</label>
|
||||
<input
|
||||
id="cal-days-{sectionId}"
|
||||
type="range"
|
||||
bind:value={calendarDaysAhead}
|
||||
min="1"
|
||||
max="30"
|
||||
step="1"
|
||||
class="w-full accent-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{:else if selectedWidgetType === 'markdown'}
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label for="md-content-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Markdown Content</label>
|
||||
<textarea
|
||||
id="md-content-{sectionId}"
|
||||
bind:value={markdownContent}
|
||||
rows="8"
|
||||
placeholder="# Hello World Write your markdown here..."
|
||||
class="{inputClass} font-mono"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{:else if selectedWidgetType === 'metric'}
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label for="metric-label-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Label</label>
|
||||
<input
|
||||
id="metric-label-{sectionId}"
|
||||
type="text"
|
||||
bind:value={metricLabel}
|
||||
placeholder="e.g. Active Users"
|
||||
class={inputClass}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-foreground">Source Type</label>
|
||||
<IconGrid
|
||||
items={metricSourceItems}
|
||||
bind:value={metricSource}
|
||||
columns={3}
|
||||
/>
|
||||
</div>
|
||||
{#if metricSource === 'static'}
|
||||
<div>
|
||||
<label for="metric-val-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Value</label>
|
||||
<input
|
||||
id="metric-val-{sectionId}"
|
||||
type="text"
|
||||
bind:value={metricValue}
|
||||
placeholder="e.g. 42"
|
||||
class={inputClass}
|
||||
/>
|
||||
</div>
|
||||
{:else if metricSource === 'json'}
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div class="sm:col-span-2">
|
||||
<label for="metric-url-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">JSON URL</label>
|
||||
<input
|
||||
id="metric-url-{sectionId}"
|
||||
type="url"
|
||||
bind:value={metricUrl}
|
||||
placeholder="https://api.example.com/stats"
|
||||
class={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label for="metric-path-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">JSON Path</label>
|
||||
<input
|
||||
id="metric-path-{sectionId}"
|
||||
type="text"
|
||||
bind:value={metricJsonPath}
|
||||
placeholder="e.g. data.count"
|
||||
class={inputClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{:else if metricSource === 'prometheus'}
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div class="sm:col-span-2">
|
||||
<label for="metric-prom-url-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Prometheus URL</label>
|
||||
<input
|
||||
id="metric-prom-url-{sectionId}"
|
||||
type="url"
|
||||
bind:value={metricUrl}
|
||||
placeholder="https://prometheus.example.com"
|
||||
class={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label for="metric-query-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">PromQL Query</label>
|
||||
<input
|
||||
id="metric-query-{sectionId}"
|
||||
type="text"
|
||||
bind:value={metricQuery}
|
||||
placeholder='e.g. sum(rate(http_requests_total[5m]))'
|
||||
class={inputClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label for="metric-unit-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Unit (optional)</label>
|
||||
<input
|
||||
id="metric-unit-{sectionId}"
|
||||
type="text"
|
||||
bind:value={metricUnit}
|
||||
placeholder="e.g. req/s, %, ms"
|
||||
class={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="metric-refresh-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Refresh: {metricRefreshInterval}s
|
||||
</label>
|
||||
<input
|
||||
id="metric-refresh-{sectionId}"
|
||||
type="range"
|
||||
bind:value={metricRefreshInterval}
|
||||
min="10"
|
||||
max="600"
|
||||
step="10"
|
||||
class="w-full accent-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{:else if selectedWidgetType === 'link_group'}
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<span class="mb-1 block text-sm font-medium text-foreground">Links</span>
|
||||
<div class="space-y-2">
|
||||
{#each linkGroupLinks as _link, i (i)}
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="flex-1 grid gap-2 sm:grid-cols-3">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={linkGroupLinks[i].label}
|
||||
placeholder="Label"
|
||||
class={inputClass}
|
||||
/>
|
||||
<input
|
||||
type="url"
|
||||
bind:value={linkGroupLinks[i].url}
|
||||
placeholder="https://..."
|
||||
class={inputClass}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={linkGroupLinks[i].icon}
|
||||
placeholder="Icon (emoji)"
|
||||
class={inputClass}
|
||||
/>
|
||||
</div>
|
||||
{#if linkGroupLinks.length > 1}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => removeLinkGroupLink(i)}
|
||||
class="mt-2 text-xs text-muted-foreground transition-colors hover:text-destructive"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={addLinkGroupLink}
|
||||
class="mt-1 text-xs text-primary transition-colors hover:text-primary/80"
|
||||
>
|
||||
+ Add link
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<label class="flex items-center gap-2 text-sm font-medium text-foreground">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={linkGroupCollapsible}
|
||||
class="h-4 w-4 rounded border-input accent-primary"
|
||||
/>
|
||||
Collapsible
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{:else if selectedWidgetType === 'camera'}
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label for="cam-url-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Stream URL</label>
|
||||
<input
|
||||
id="cam-url-{sectionId}"
|
||||
type="url"
|
||||
bind:value={cameraStreamUrl}
|
||||
placeholder="https://camera.example.com/stream"
|
||||
class={inputClass}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="cam-type-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Stream Type</label>
|
||||
<select
|
||||
id="cam-type-{sectionId}"
|
||||
bind:value={cameraType}
|
||||
class={inputClass}
|
||||
>
|
||||
<option value="image">Snapshot (Image)</option>
|
||||
<option value="mjpeg">MJPEG Stream</option>
|
||||
<option value="hls">HLS Stream</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label for="cam-refresh-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Refresh: {cameraRefreshInterval}s
|
||||
</label>
|
||||
<input
|
||||
id="cam-refresh-{sectionId}"
|
||||
type="range"
|
||||
bind:value={cameraRefreshInterval}
|
||||
min="1"
|
||||
max="120"
|
||||
step="1"
|
||||
class="w-full accent-primary"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="cam-ratio-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Aspect Ratio</label>
|
||||
<select
|
||||
id="cam-ratio-{sectionId}"
|
||||
bind:value={cameraAspectRatio}
|
||||
class={inputClass}
|
||||
>
|
||||
<option value="16/9">16:9</option>
|
||||
<option value="4/3">4:3</option>
|
||||
<option value="1/1">1:1</option>
|
||||
<option value="21/9">21:9</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-3">
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { t } from 'svelte-i18n';
|
||||
import WidgetRenderer from './WidgetRenderer.svelte';
|
||||
import WidgetContainer from './WidgetContainer.svelte';
|
||||
import type { CardSize } from '$lib/utils/constants.js';
|
||||
|
||||
interface AppData {
|
||||
id: string;
|
||||
@@ -25,23 +26,47 @@
|
||||
interface Props {
|
||||
widgets: WidgetData[];
|
||||
allApps?: AppData[];
|
||||
cardSize?: CardSize;
|
||||
}
|
||||
|
||||
let { widgets, allApps = [] }: Props = $props();
|
||||
let { widgets, allApps = [], cardSize = 'medium' }: Props = $props();
|
||||
|
||||
// Widgets that should span full width
|
||||
const fullWidthTypes = new Set(['note', 'embed', 'status']);
|
||||
const fullWidthTypes = new Set(['note', 'embed', 'status', 'system_stats', 'rss', 'calendar', 'markdown', 'camera']);
|
||||
|
||||
// Grid column classes based on card size
|
||||
const gridClass = $derived.by(() => {
|
||||
switch (cardSize) {
|
||||
case 'compact':
|
||||
return 'grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6';
|
||||
case 'large':
|
||||
return 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3';
|
||||
default:
|
||||
return 'grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4';
|
||||
}
|
||||
});
|
||||
|
||||
const fullWidthClass = $derived.by(() => {
|
||||
switch (cardSize) {
|
||||
case 'compact':
|
||||
return 'col-span-2 sm:col-span-3 md:col-span-4 lg:col-span-6';
|
||||
case 'large':
|
||||
return 'col-span-1 sm:col-span-2 lg:col-span-3';
|
||||
default:
|
||||
return 'col-span-2 sm:col-span-3 lg:col-span-4';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if widgets.length === 0}
|
||||
<p class="text-sm text-muted-foreground">{$t('widget.no_widgets')}</p>
|
||||
{:else}
|
||||
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
|
||||
<div class={gridClass}>
|
||||
{#each widgets as widget (widget.id)}
|
||||
{@const isFullWidth = fullWidthTypes.has(widget.type)}
|
||||
<div class={isFullWidth ? 'col-span-2 sm:col-span-3 lg:col-span-4' : ''}>
|
||||
<div class={isFullWidth ? fullWidthClass : ''}>
|
||||
<WidgetContainer>
|
||||
<WidgetRenderer {widget} {allApps} />
|
||||
<WidgetRenderer {widget} {allApps} {cardSize} />
|
||||
</WidgetContainer>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
@@ -5,6 +5,14 @@
|
||||
import NoteWidget from './NoteWidget.svelte';
|
||||
import EmbedWidget from './EmbedWidget.svelte';
|
||||
import StatusWidget from './StatusWidget.svelte';
|
||||
import ClockWeatherWidget from './ClockWeatherWidget.svelte';
|
||||
import SystemStatsWidget from './SystemStatsWidget.svelte';
|
||||
import RssFeedWidget from './RssFeedWidget.svelte';
|
||||
import CalendarWidget from './CalendarWidget.svelte';
|
||||
import MarkdownWidget from './MarkdownWidget.svelte';
|
||||
import MetricWidget from './MetricWidget.svelte';
|
||||
import LinkGroupWidget from './LinkGroupWidget.svelte';
|
||||
import CameraStreamWidget from './CameraStreamWidget.svelte';
|
||||
|
||||
interface AppData {
|
||||
id: string;
|
||||
@@ -25,12 +33,15 @@
|
||||
app: AppData | null;
|
||||
}
|
||||
|
||||
import type { CardSize } from '$lib/utils/constants.js';
|
||||
|
||||
interface Props {
|
||||
widget: WidgetData;
|
||||
allApps?: AppData[];
|
||||
cardSize?: CardSize;
|
||||
}
|
||||
|
||||
let { widget, allApps = [] }: Props = $props();
|
||||
let { widget, allApps = [], cardSize = 'medium' }: Props = $props();
|
||||
|
||||
const parsedConfig = $derived.by(() => {
|
||||
try {
|
||||
@@ -42,7 +53,7 @@
|
||||
</script>
|
||||
|
||||
{#if widget.type === 'app' && widget.app}
|
||||
<AppWidget app={widget.app} />
|
||||
<AppWidget app={widget.app} {cardSize} />
|
||||
{:else if widget.type === 'bookmark'}
|
||||
<BookmarkWidget config={parsedConfig} />
|
||||
{:else if widget.type === 'note'}
|
||||
@@ -51,6 +62,60 @@
|
||||
<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 if widget.type === 'clock'}
|
||||
<ClockWeatherWidget config={{
|
||||
timezone: parsedConfig.timezone,
|
||||
showWeather: parsedConfig.showWeather ?? false,
|
||||
latitude: parsedConfig.latitude,
|
||||
longitude: parsedConfig.longitude,
|
||||
clockStyle: parsedConfig.clockStyle ?? 'digital'
|
||||
}} />
|
||||
{:else if widget.type === 'system_stats'}
|
||||
<SystemStatsWidget config={{
|
||||
sourceUrl: parsedConfig.sourceUrl ?? '',
|
||||
sourceType: parsedConfig.sourceType ?? 'custom',
|
||||
metrics: parsedConfig.metrics ?? [],
|
||||
refreshInterval: parsedConfig.refreshInterval ?? 30
|
||||
}} />
|
||||
{:else if widget.type === 'rss'}
|
||||
<RssFeedWidget config={{
|
||||
feedUrl: parsedConfig.feedUrl ?? '',
|
||||
maxItems: parsedConfig.maxItems ?? 10,
|
||||
showSummary: parsedConfig.showSummary ?? true
|
||||
}} />
|
||||
{:else if widget.type === 'calendar'}
|
||||
<CalendarWidget config={{
|
||||
icalUrls: parsedConfig.icalUrls ?? [],
|
||||
daysAhead: parsedConfig.daysAhead ?? 7
|
||||
}} />
|
||||
{:else if widget.type === 'markdown'}
|
||||
<MarkdownWidget
|
||||
config={{ content: parsedConfig.content ?? '', syntaxTheme: parsedConfig.syntaxTheme }}
|
||||
widgetId={widget.id}
|
||||
/>
|
||||
{:else if widget.type === 'metric'}
|
||||
<MetricWidget config={{
|
||||
label: parsedConfig.label ?? 'Metric',
|
||||
source: parsedConfig.source ?? 'static',
|
||||
value: parsedConfig.value,
|
||||
url: parsedConfig.url,
|
||||
jsonPath: parsedConfig.jsonPath,
|
||||
query: parsedConfig.query,
|
||||
unit: parsedConfig.unit,
|
||||
refreshInterval: parsedConfig.refreshInterval ?? 60
|
||||
}} />
|
||||
{:else if widget.type === 'link_group'}
|
||||
<LinkGroupWidget config={{
|
||||
links: parsedConfig.links ?? [],
|
||||
collapsible: parsedConfig.collapsible ?? false
|
||||
}} />
|
||||
{:else if widget.type === 'camera'}
|
||||
<CameraStreamWidget config={{
|
||||
streamUrl: parsedConfig.streamUrl ?? '',
|
||||
type: parsedConfig.type ?? 'image',
|
||||
refreshInterval: parsedConfig.refreshInterval ?? 10,
|
||||
aspectRatio: parsedConfig.aspectRatio ?? '16/9'
|
||||
}} />
|
||||
{: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>
|
||||
|
||||
Reference in New Issue
Block a user