Files
web-app-launcher/src/lib/components/board/Board.svelte
T
alexei.dolgolyov 1c0a7cb850 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

61 lines
1.3 KiB
Svelte

<script lang="ts">
import { t } from 'svelte-i18n';
import Section from '$lib/components/section/Section.svelte';
interface SectionData {
id: string;
title: string;
icon: string | null;
order: number;
isExpandedByDefault: boolean;
widgets: Array<{
id: string;
type: string;
order: number;
config: string;
appId: string | null;
app: {
id: string;
name: string;
url: string;
icon: string | null;
iconType: string;
description: string | null;
statuses: Array<{ status: string; responseTime: number | null }>;
} | null;
}>;
}
interface AppData {
id: string;
name: string;
url: string;
icon: string | null;
iconType: string;
description: string | null;
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 = [], boardCardSize = 'medium' }: Props = $props();
</script>
<div class="space-y-6">
{#if sections.length === 0}
<div class="rounded-xl border border-border bg-card/50 p-12 text-center">
<p class="text-muted-foreground">{$t('board.no_sections')}</p>
</div>
{:else}
{#each sections as section (section.id)}
<Section {section} {allApps} {boardCardSize} />
{/each}
{/if}
</div>