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.
2026-03-25 14:18:10 +03:00
parent 8d7847889e
commit 1c0a7cb850
212 changed files with 15642 additions and 981 deletions
@@ -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()}