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.
69 lines
2.0 KiB
Svelte
69 lines
2.0 KiB
Svelte
<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>
|