alexei.dolgolyov/web-app-launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Phases 4-7 — Full Feature Expansion (26 features)

Browse Source 
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:
Admin
2026-03-25 14:18:10 +03:00
parent 8d7847889e
commit 1c0a7cb850
212 changed files with 15642 additions and 981 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/boards/[boardId]/edit/+page.svelte
+291
View File
@@ -5,6 +5,7 @@
import { invalidateAll } from '$app/navigation';
import DraggableBoard from '$lib/components/board/DraggableBoard.svelte';
import BoardAccessControl from '$lib/components/board/BoardAccessControl.svelte';
import CustomCssEditor from '$lib/components/settings/CustomCssEditor.svelte';
let { data }: { data: PageData } = $props();
@@ -12,6 +13,55 @@
let showAddSection = $state(false);
let addWidgetSectionId = $state<string | null>(null);
let errorMessage = $state('');
let wallpaperUploading = $state(false);
let boardCustomCss = $state(data.board.customCss ?? '');
async function handleWallpaperUpload(event: Event) {
const input = event.target as HTMLInputElement;
const file = input.files?.[0];
if (!file) return;
wallpaperUploading = true;
errorMessage = '';
try {
const formData = new FormData();
formData.set('file', file);
const res = await fetch('/api/wallpaper', {
method: 'POST',
body: formData
});
if (!res.ok) {
const json = await res.json();
errorMessage = json.error ?? 'Failed to upload wallpaper';
return;
}
const json = await res.json();
const wallpaperUrl = json.data?.path;
if (wallpaperUrl) {
// Save wallpaper URL to board
const updateRes = await fetch(`/api/boards/${data.board.id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ wallpaperUrl })
});
if (updateRes.ok) {
await invalidateAll();
} else {
errorMessage = 'Wallpaper uploaded but failed to save to board';
}
}
} catch {
errorMessage = 'Network error uploading wallpaper';
} finally {
wallpaperUploading = false;
}
}
function handleToggleAddWidget(sectionId: string) {
addWidgetSectionId = addWidgetSectionId === sectionId ? null : sectionId;
@@ -85,6 +135,26 @@
}
}
async function handleUpdateSection(sectionId: string, sectionData: Record<string, unknown>) {
const formData = new FormData();
formData.set('sectionId', sectionId);
for (const [key, value] of Object.entries(sectionData)) {
if (value != null) {
formData.set(key, String(value));
}
}
try {
await fetch(`?/updateSection`, {
method: 'POST',
body: formData
});
await invalidateAll();
} catch (err) {
errorMessage = err instanceof Error ? err.message : 'Failed to update section';
}
}
async function handleDeleteWidget(widgetId: string) {
const formData = new FormData();
formData.set('widgetId', widgetId);
@@ -185,6 +255,226 @@
</form>
</section>
<!-- Board Theme -->
<section class="mb-8 rounded-xl border border-border bg-card p-6 shadow-sm">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('board.theme_settings') ?? 'Theme Settings'}</h2>
<form method="POST" action="?/updateBoard" use:enhance>
<!-- Pass required board name so the form is valid -->
<input type="hidden" name="name" value={data.board.name} />
<div class="grid gap-4">
<!-- Hue Slider -->
<div>
<label for="board-hue" class="mb-1 block text-sm font-medium text-foreground">{$t('settings.hue') ?? 'Hue'}</label>
<div class="flex items-center gap-3">
<input
id="board-hue"
name="themeHue"
type="range"
min="0"
max="360"
step="1"
value={data.board.themeHue ?? 220}
class="h-3 w-full cursor-pointer appearance-none rounded-full bg-gradient-to-r from-red-500 via-green-500 via-blue-500 to-red-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:shadow-md"
/>
<span class="w-10 text-center text-sm text-muted-foreground">{data.board.themeHue ?? 220}</span>
</div>
</div>
<!-- Saturation Slider -->
<div>
<label for="board-sat" class="mb-1 block text-sm font-medium text-foreground">{$t('settings.saturation') ?? 'Saturation'}</label>
<div class="flex items-center gap-3">
<input
id="board-sat"
name="themeSaturation"
type="range"
min="0"
max="100"
step="1"
value={data.board.themeSaturation ?? 70}
class="h-3 w-full cursor-pointer appearance-none rounded-full bg-gradient-to-r from-gray-500 to-primary [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:shadow-md"
/>
<span class="w-10 text-center text-sm text-muted-foreground">{data.board.themeSaturation ?? 70}%</span>
</div>
</div>
<!-- Background Type -->
<div>
<label class="mb-1 block text-sm font-medium text-foreground">{$t('settings.background') ?? 'Background'}</label>
<div class="flex flex-wrap gap-1 rounded-lg border border-border bg-muted/50 p-1">
{#each ['mesh', 'particles', 'aurora', 'wallpaper', 'none'] as bg (bg)}
<label class="flex-1">
<input type="radio" name="backgroundType" value={bg} checked={data.board.backgroundType === bg} class="peer sr-only" />
<span class="block cursor-pointer rounded-md px-3 py-2 text-center text-sm font-medium text-muted-foreground transition-colors peer-checked:bg-background peer-checked:text-foreground peer-checked:shadow-sm hover:text-foreground">
{bg}
</span>
</label>
{/each}
</div>
</div>
<!-- Card Size -->
<div>
<label class="mb-1 block text-sm font-medium text-foreground">{$t('board.card_size') ?? 'Card Size'}</label>
<div class="flex gap-1 rounded-lg border border-border bg-muted/50 p-1">
{#each ['compact', 'medium', 'large'] as size (size)}
<label class="flex-1">
<input type="radio" name="cardSize" value={size} checked={(data.board.cardSize ?? 'medium') === size} class="peer sr-only" />
<span class="block cursor-pointer rounded-md px-3 py-2 text-center text-sm font-medium text-muted-foreground transition-colors peer-checked:bg-background peer-checked:text-foreground peer-checked:shadow-sm hover:text-foreground">
{size}
</span>
</label>
{/each}
</div>
</div>
</div>
<div class="mt-4">
<button
type="submit"
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
>
{$t('board.save')}
</button>
</div>
</form>
</section>
<!-- Wallpaper Settings -->
<section class="mb-8 rounded-xl border border-border bg-card p-6 shadow-sm">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('board.wallpaper') ?? 'Wallpaper'}</h2>
<div class="grid gap-4">
<!-- Current wallpaper preview -->
{#if data.board.wallpaperUrl}
<div class="relative overflow-hidden rounded-lg border border-border">
<img
src={data.board.wallpaperUrl}
alt="Board wallpaper"
class="h-32 w-full object-cover"
/>
<div class="absolute inset-0" style="background: rgba(0,0,0,{data.board.wallpaperOverlay ?? 0.3}); backdrop-filter: blur({data.board.wallpaperBlur ?? 0}px);"></div>
</div>
{/if}
<!-- Upload -->
<div>
<label for="wallpaper-upload" class="mb-1 block text-sm font-medium text-foreground">
{$t('board.upload_wallpaper') ?? 'Upload wallpaper'}
</label>
<input
id="wallpaper-upload"
type="file"
accept="image/png,image/jpeg,image/webp"
onchange={handleWallpaperUpload}
disabled={wallpaperUploading}
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground file:mr-4 file:rounded file:border-0 file:bg-primary file:px-4 file:py-1 file:text-sm file:font-medium file:text-primary-foreground"
/>
<p class="mt-1 text-xs text-muted-foreground">{$t('board.wallpaper_hint') ?? 'PNG, JPG, or WebP. Max 5MB.'}</p>
{#if wallpaperUploading}
<p class="mt-1 text-xs text-primary">{$t('common.uploading') ?? 'Uploading...'}</p>
{/if}
</div>
<!-- Or URL input -->
<form method="POST" action="?/updateBoard" use:enhance>
<input type="hidden" name="name" value={data.board.name} />
<div>
<label for="wallpaper-url" class="mb-1 block text-sm font-medium text-foreground">
{$t('board.wallpaper_url') ?? 'Or enter URL'}
</label>
<input
id="wallpaper-url"
name="wallpaperUrl"
type="url"
value={data.board.wallpaperUrl ?? ''}
placeholder="https://images.unsplash.com/..."
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
/>
</div>
<!-- Blur slider -->
<div class="mt-3">
<label for="wallpaper-blur" class="mb-1 block text-sm font-medium text-foreground">
{$t('board.blur') ?? 'Blur'}: {data.board.wallpaperBlur ?? 0}px
</label>
<input
id="wallpaper-blur"
name="wallpaperBlur"
type="range"
min="0"
max="20"
step="1"
value={data.board.wallpaperBlur ?? 0}
class="h-2 w-full cursor-pointer appearance-none rounded-full bg-muted [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary"
/>
</div>
<!-- Overlay opacity slider -->
<div class="mt-3">
<label for="wallpaper-overlay" class="mb-1 block text-sm font-medium text-foreground">
{$t('board.overlay_opacity') ?? 'Overlay opacity'}: {Math.round((data.board.wallpaperOverlay ?? 0.3) * 100)}%
</label>
<input
id="wallpaper-overlay"
name="wallpaperOverlay"
type="range"
min="0"
max="1"
step="0.05"
value={data.board.wallpaperOverlay ?? 0.3}
class="h-2 w-full cursor-pointer appearance-none rounded-full bg-muted [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary"
/>
</div>
<!-- Parallax toggle -->
<div class="mt-3">
<label class="flex items-center gap-2 text-sm text-foreground">
<input
type="checkbox"
name="wallpaperParallax"
checked={false}
class="h-4 w-4 rounded border-input accent-primary"
/>
{$t('board.parallax') ?? 'Parallax effect'}
</label>
<p class="mt-1 text-xs text-muted-foreground">{$t('board.parallax_hint') ?? 'Adds subtle depth movement to the wallpaper background'}</p>
</div>
<div class="mt-4">
<button
type="submit"
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
>
{$t('board.save')}
</button>
</div>
</form>
</div>
</section>
<!-- Board Custom CSS -->
<section class="mb-8 rounded-xl border border-border bg-card p-6 shadow-sm">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('board.custom_css') ?? 'Custom CSS'}</h2>
<form method="POST" action="?/updateBoard" use:enhance>
<input type="hidden" name="name" value={data.board.name} />
<input type="hidden" name="customCss" value={boardCustomCss} />
<CustomCssEditor
value={boardCustomCss}
onchange={(css) => { boardCustomCss = css; }}
label={$t('board.custom_css_label') ?? 'Board-scoped CSS'}
/>
<div class="mt-4">
<button
type="submit"
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
>
{$t('board.save')}
</button>
</div>
</form>
</section>
<!-- Guest Access -->
<section class="mb-8 rounded-xl border border-border bg-card p-6 shadow-sm">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('board.guest_access_title')}</h2>
@@ -315,6 +605,7 @@
onDeleteSection={handleDeleteSection}
onAddWidget={handleAddWidget}
onDeleteWidget={handleDeleteWidget}
onUpdateSection={handleUpdateSection}
/>
</section>
</div>