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.
64 lines
1.7 KiB
Svelte
64 lines
1.7 KiB
Svelte
<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>
|