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/widget/AppWidget.svelte
+4 -4
View File
@@ -39,10 +39,10 @@
href={app.url}
target="_blank"
rel="noopener noreferrer"
class="group flex flex-col items-center gap-2 rounded-lg border border-gray-700 bg-gray-800/50 p-4 text-center transition-colors hover:border-indigo-500/50 hover:bg-gray-800"
class="card-hover group flex flex-col items-center gap-2 rounded-xl border border-border bg-card p-4 text-center transition-colors hover:border-primary/50"
>
<!-- Icon -->
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-700 transition-colors group-hover:bg-gray-600">
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-muted transition-colors group-hover:bg-accent">
{#if app.iconType === 'emoji' && app.icon}
<span class="text-2xl">{app.icon}</span>
{:else if iconSrc}
@@ -52,14 +52,14 @@
class="h-8 w-8 object-contain"
/>
{:else}
<span class="text-lg font-bold text-gray-400">
<span class="text-lg font-bold text-muted-foreground">
{app.name.charAt(0).toUpperCase()}
</span>
{/if}
</div>
<!-- Name -->
<span class="text-sm font-medium text-white group-hover:text-indigo-300 transition-colors truncate w-full">
<span class="w-full truncate text-sm font-medium text-foreground transition-colors group-hover:text-primary">
{app.name}
</span>
src/lib/components/widget/WidgetGrid.svelte
+3 -3
View File
@@ -27,7 +27,7 @@
</script>
{#if widgets.length === 0}
<p class="text-sm text-gray-500">No widgets in this section.</p>
<p class="text-sm text-muted-foreground">No widgets in this section.</p>
{:else}
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
{#each widgets as widget (widget.id)}
@@ -35,8 +35,8 @@
{#if widget.type === 'app' && widget.app}
<AppWidget app={widget.app} />
{:else}
<div class="flex h-full items-center justify-center rounded-lg border border-gray-700 bg-gray-800/50 p-4">
<span class="text-xs text-gray-500">{widget.type} widget</span>
<div class="flex h-full items-center justify-center rounded-xl border border-border bg-card p-4">
<span class="text-xs text-muted-foreground">{widget.type} widget</span>
</div>
{/if}
</WidgetContainer>