alexei.dolgolyov
1c0a7cb850
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.
75 lines
2.0 KiB
Svelte
75 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
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;
|
|
name: string;
|
|
url: string;
|
|
icon: string | null;
|
|
iconType: string;
|
|
description: string | null;
|
|
statuses: Array<{ status: string; responseTime: number | null }>;
|
|
}
|
|
|
|
interface WidgetData {
|
|
id: string;
|
|
type: string;
|
|
order: number;
|
|
config: string;
|
|
appId: string | null;
|
|
app: AppData | null;
|
|
}
|
|
|
|
interface Props {
|
|
widgets: WidgetData[];
|
|
allApps?: AppData[];
|
|
cardSize?: CardSize;
|
|
}
|
|
|
|
let { widgets, allApps = [], cardSize = 'medium' }: Props = $props();
|
|
|
|
// Widgets that should span full width
|
|
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={gridClass}>
|
|
{#each widgets as widget (widget.id)}
|
|
{@const isFullWidth = fullWidthTypes.has(widget.type)}
|
|
<div class={isFullWidth ? fullWidthClass : ''}>
|
|
<WidgetContainer>
|
|
<WidgetRenderer {widget} {allApps} {cardSize} />
|
|
</WidgetContainer>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|