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.
This commit is contained in:
@@ -0,0 +1,202 @@
|
||||
<script lang="ts">
|
||||
import { dndzone } from 'svelte-dnd-action';
|
||||
import { flip } from 'svelte/animate';
|
||||
|
||||
interface LinkItem {
|
||||
id: string;
|
||||
label: string;
|
||||
url: string;
|
||||
icon: string | null;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
appId: string;
|
||||
initialLinks?: LinkItem[];
|
||||
}
|
||||
|
||||
let { appId, initialLinks = [] }: Props = $props();
|
||||
|
||||
const flipDurationMs = 200;
|
||||
|
||||
let links = $state<LinkItem[]>(initialLinks.map((l) => ({ ...l })));
|
||||
let saving = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
|
||||
// New link form
|
||||
let newLabel = $state('');
|
||||
let newUrl = $state('');
|
||||
let newIcon = $state('');
|
||||
|
||||
function addLink() {
|
||||
if (!newLabel.trim() || !newUrl.trim()) return;
|
||||
|
||||
const tempId = `temp-${Date.now()}`;
|
||||
links = [...links, { id: tempId, label: newLabel, url: newUrl, icon: newIcon || null }];
|
||||
newLabel = '';
|
||||
newUrl = '';
|
||||
newIcon = '';
|
||||
}
|
||||
|
||||
function removeLink(id: string) {
|
||||
links = links.filter((l) => l.id !== id);
|
||||
}
|
||||
|
||||
function handleDndConsider(e: CustomEvent<{ items: LinkItem[] }>) {
|
||||
links = e.detail.items;
|
||||
}
|
||||
|
||||
function handleDndFinalize(e: CustomEvent<{ items: LinkItem[] }>) {
|
||||
links = e.detail.items;
|
||||
}
|
||||
|
||||
async function saveLinks() {
|
||||
saving = true;
|
||||
error = null;
|
||||
|
||||
try {
|
||||
// First, get existing links from the server to determine what to add/remove
|
||||
const existingRes = await fetch(`/api/apps/${appId}/links`);
|
||||
const existingData = existingRes.ok ? await existingRes.json() : { data: [] };
|
||||
const existingLinks: Array<{ id: string }> = existingData.data ?? [];
|
||||
const existingIds = new Set(existingLinks.map((l) => l.id));
|
||||
|
||||
// Delete links that were removed
|
||||
for (const existing of existingLinks) {
|
||||
if (!links.some((l) => l.id === existing.id)) {
|
||||
await fetch(`/api/apps/${appId}/links`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ linkId: existing.id })
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Add new links (those with temp IDs)
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
const link = links[i];
|
||||
if (!existingIds.has(link.id)) {
|
||||
await fetch(`/api/apps/${appId}/links`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
label: link.label,
|
||||
url: link.url,
|
||||
icon: link.icon,
|
||||
order: i
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Reorder remaining links
|
||||
const reorderIds = links
|
||||
.filter((l) => existingIds.has(l.id))
|
||||
.map((l) => l.id);
|
||||
if (reorderIds.length > 0) {
|
||||
await fetch(`/api/apps/${appId}/links`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ linkIds: reorderIds })
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
error = 'Failed to save links';
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-semibold text-foreground">Secondary Links</h3>
|
||||
|
||||
{#if error}
|
||||
<p class="text-xs text-destructive">{error}</p>
|
||||
{/if}
|
||||
|
||||
<!-- Links List (draggable) -->
|
||||
{#if links.length > 0}
|
||||
<div
|
||||
use:dndzone={{ items: links, flipDurationMs, type: 'app-links' }}
|
||||
onconsider={handleDndConsider}
|
||||
onfinalize={handleDndFinalize}
|
||||
class="space-y-2"
|
||||
>
|
||||
{#each links as link (link.id)}
|
||||
<div
|
||||
animate:flip={{ duration: flipDurationMs }}
|
||||
class="flex items-center gap-2 rounded-md border border-border bg-card p-2"
|
||||
>
|
||||
<span class="cursor-grab text-muted-foreground">
|
||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="8" y1="6" x2="8" y2="6" />
|
||||
<line x1="16" y1="6" x2="16" y2="6" />
|
||||
<line x1="8" y1="12" x2="8" y2="12" />
|
||||
<line x1="16" y1="12" x2="16" y2="12" />
|
||||
<line x1="8" y1="18" x2="8" y2="18" />
|
||||
<line x1="16" y1="18" x2="16" y2="18" />
|
||||
</svg>
|
||||
</span>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm font-medium text-foreground">{link.label}</p>
|
||||
<p class="truncate text-xs text-muted-foreground">{link.url}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => removeLink(link.id)}
|
||||
class="flex-shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
<svg class="h-4 w-4" 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>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Add Link Form -->
|
||||
<div class="rounded-md border border-dashed border-border p-3">
|
||||
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={newLabel}
|
||||
placeholder="Link label"
|
||||
class="rounded-md border border-input bg-background px-2 py-1.5 text-sm text-foreground"
|
||||
/>
|
||||
<input
|
||||
type="url"
|
||||
bind:value={newUrl}
|
||||
placeholder="https://..."
|
||||
class="rounded-md border border-input bg-background px-2 py-1.5 text-sm text-foreground"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={newIcon}
|
||||
placeholder="Icon (optional)"
|
||||
class="flex-1 rounded-md border border-input bg-background px-2 py-1.5 text-sm text-foreground"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onclick={addLink}
|
||||
disabled={!newLabel.trim() || !newUrl.trim()}
|
||||
class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Save Button -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={saveLinks}
|
||||
disabled={saving}
|
||||
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save Links'}
|
||||
</button>
|
||||
</div>
|
||||
Reference in New Issue
Block a user