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

feat(mvp): phase 7 - UI polish & ambient backgrounds

Browse Source 
Add layout system (sidebar, header, main layout), dark/light/system theme
with HSL customization, 3 ambient backgrounds (mesh gradient, particle field,
aurora), Cmd/Ctrl+K search dialog, page transitions, card hover effects,
status pulse animations, skeleton loaders, and responsive design. Polish
all existing pages with consistent theming.
This commit is contained in:
Admin
2026-03-24 21:37:16 +03:00
parent c5166ba3a9
commit 0bd30c5e17
41 changed files with 2106 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/app/AppCard.svelte
+2 -2
View File
@@ -43,7 +43,7 @@
href={app.url}
target="_blank"
rel="noopener noreferrer"
class="group flex flex-col rounded-lg border border-border bg-card p-4 transition-colors hover:border-primary/50 hover:bg-accent/50"
class="card-hover group flex flex-col rounded-xl border border-border bg-card p-4 transition-colors hover:border-primary/50"
title={app.description ?? app.name}
>
<div class="mb-3 flex items-start justify-between">
@@ -67,7 +67,7 @@
<AppHealthBadge status={currentStatus} />
</div>
<h3 class="truncate text-sm font-semibold text-card-foreground group-hover:text-primary">
<h3 class="truncate text-sm font-semibold text-card-foreground transition-colors group-hover:text-primary">
{app.name}
</h3>
src/lib/components/app/AppHealthBadge.svelte
+5 -5
View File
@@ -8,18 +8,18 @@
const config = $derived.by(() => {
switch (status) {
case 'online':
return { color: 'bg-green-500', text: 'Online' };
return { color: 'bg-green-500', cssClass: 'status-online', text: 'Online' };
case 'offline':
return { color: 'bg-red-500', text: 'Offline' };
return { color: 'bg-red-500', cssClass: '', text: 'Offline' };
case 'degraded':
return { color: 'bg-yellow-500', text: 'Degraded' };
return { color: 'bg-yellow-500', cssClass: '', text: 'Degraded' };
default:
return { color: 'bg-gray-500', text: 'Unknown' };
return { color: 'bg-gray-500', cssClass: '', text: 'Unknown' };
}
});
</script>
<span class="inline-flex items-center gap-1.5 text-xs">
<span class="inline-block h-2 w-2 rounded-full {config.color}"></span>
<span class="inline-block h-2 w-2 rounded-full {config.color} {config.cssClass}"></span>
<span class="text-muted-foreground">{config.text}</span>
</span>