alexei.dolgolyov/notify-bridge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 31 Wiki Activity

feat(redesign): aurora foundation — tokens, glass sidebar, dashboard

Browse Source 
Foundation pass on the Aurora redesign:

- app.css: full token swap to lavender/orchid/mint/sky pastel palette,
  vivid aurora gradient backdrop, frosted glass surface tokens, two
  themes (Aurora dark + Pearl light), shadow recipe for floating glass.
- fonts: add Geist Sans / Geist Mono / Newsreader, drop DM Sans usage
  (legacy fontsource entries kept in package.json until full migration).
- layout.svelte: sidebar becomes a floating glass rail with a conic-
  gradient brand orb, Newsreader italic 'Bridge' wordmark, soft glass
  hovers on nav links, gradient active indicator, gradient user avatar.
- Card.svelte: glass surface + inner highlight + soft hover lift.
- PageHeader.svelte: Newsreader serif display title.
- +page.svelte (dashboard): stat cards become glass with colored
  accent 'orb', event timeline gets soft glass rows + slide-on-hover.

Build clean (0 errors, pre-existing a11y warnings unchanged).
Other pages still inherit old chrome via shared tokens but will need
component-specific passes; tracked separately.
This commit is contained in:
Admin
2026-04-25 01:11:56 +03:00
parent 1e357244e1
commit d9ef3c6cc3
7 changed files with 633 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/+layout.svelte
+167 -62
View File
@@ -7,7 +7,7 @@
import { cubicOut } from 'svelte/easing';
import { api } from '$lib/api';
import { getAuth, loadUser, logout } from '$lib/auth.svelte';
import { t, getLocale, setLocale, type Locale } from '$lib/i18n';
import { t, getLocale, setLocale } from '$lib/i18n';
import { getTheme, initTheme, setTheme, type Theme } from '$lib/theme.svelte';
import Modal from '$lib/components/Modal.svelte';
import MdiIcon from '$lib/components/MdiIcon.svelte';
@@ -346,26 +346,28 @@
</div>
</div>
{:else if auth.user}
<div class="flex h-screen">
<div class="app-shell">
<!-- Sidebar -->
<aside
class="sidebar {collapsed ? 'w-[3.75rem]' : 'w-[15rem]'} flex flex-col max-md:hidden"
style="background: var(--color-sidebar); border-right: 1px solid var(--color-border); transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);"
>
<!-- Header -->
<div class="flex items-center {collapsed ? 'justify-center p-2.5' : 'justify-between px-5 py-4'}" style="border-bottom: 1px solid var(--color-border);">
<div class="sidebar-header flex items-center {collapsed ? 'justify-center p-3' : 'justify-between px-5 py-5'}">
{#if !collapsed}
<div class="animate-fade-slide-in">
<h1 class="text-base font-semibold tracking-tight flex items-center gap-1.5" style="color: var(--color-foreground);">
{#if globalProviderFilter.provider}
<span style="color: var(--color-primary);"><MdiIcon name={providerDefaultIcon(globalProviderFilter.provider)} size={18} /></span>
{/if}
<span><span style="color: var(--color-primary);">Notify</span> Bridge</span>
</h1>
<p class="text-[0.7rem] text-[var(--color-muted-foreground)] mt-0.5 tracking-wide uppercase">{t('app.tagline')}</p>
<div class="animate-fade-slide-in flex items-center gap-2.5">
<div class="brand-orb"></div>
<div>
<h1 class="brand-mark">
{#if globalProviderFilter.provider}
<span class="brand-mark__icon" style="color: var(--color-primary);"><MdiIcon name={providerDefaultIcon(globalProviderFilter.provider)} size={16} /></span>
{/if}
<span class="brand-mark__notify">Notify</span> <em>Bridge</em>
</h1>
<p class="brand-tag">{t('app.tagline')}</p>
</div>
</div>
{:else if globalProviderFilter.provider}
<span style="color: var(--color-primary);"><MdiIcon name={providerDefaultIcon(globalProviderFilter.provider)} size={18} /></span>
{:else}
<div class="brand-orb brand-orb--small"></div>
{/if}
<button onclick={toggleSidebar}
class="sidebar-icon-btn flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200"
@@ -502,8 +504,7 @@
<div class="px-1.5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2.5">
<div class="w-7 h-7 rounded-full flex items-center justify-center text-[0.7rem] font-semibold"
style="background: var(--color-primary); color: var(--color-primary-foreground);">
<div class="user-avatar">
{auth.user.username[0].toUpperCase()}
</div>
<div>
@@ -663,44 +664,115 @@
<SearchPalette onopen={(fn) => openSearch = fn} />
<style>
@media (max-width: 767px) {
.mobile-nav { display: flex !important; }
.mobile-more-panel a:hover,
.mobile-more-panel button:hover {
background: var(--color-muted);
}
/* === AURORA SHELL === */
.app-shell {
display: flex;
min-height: 100vh;
padding: 18px;
gap: 18px;
}
/* Provider filter chips */
.provider-chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.4rem;
border-radius: 0.375rem;
/* === SIDEBAR — frosted glass rail === */
.sidebar {
background: var(--color-glass);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border: 1px solid var(--color-border);
background: transparent;
border-radius: 22px;
box-shadow: var(--shadow-card);
position: sticky;
top: 18px;
height: calc(100vh - 36px);
overflow: hidden;
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
opacity: 0.4;
z-index: 0;
}
.sidebar > * { position: relative; z-index: 1; }
.sidebar-header {
border-bottom: 1px solid var(--color-border);
}
/* Brand mark — italic Newsreader serif */
.brand-mark {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.15rem;
letter-spacing: -0.02em;
color: var(--color-foreground);
margin: 0;
line-height: 1;
display: flex;
align-items: baseline;
gap: 0.3rem;
}
.brand-mark__notify {
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.95rem;
}
.brand-mark em {
font-style: italic;
background: linear-gradient(135deg, var(--color-orchid), var(--color-primary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.brand-mark__icon {
margin-right: 2px;
align-self: center;
}
.brand-tag {
font-size: 0.62rem;
color: var(--color-muted-foreground);
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
margin-top: 3px;
letter-spacing: 0.13em;
text-transform: uppercase;
font-weight: 500;
}
.provider-chip:hover {
border-color: var(--color-primary);
color: var(--color-primary);
.brand-orb {
width: 32px; height: 32px;
border-radius: 11px;
background: conic-gradient(from 220deg, var(--color-primary), var(--color-orchid), var(--color-mint), var(--color-primary));
box-shadow: 0 4px 14px var(--color-glow);
position: relative;
flex-shrink: 0;
}
.provider-chip.active {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
color: var(--color-primary);
.brand-orb::after {
content: '';
position: absolute; inset: 4px;
border-radius: 7px;
background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.6), transparent 50%);
}
.brand-orb--small { width: 26px; height: 26px; border-radius: 9px; }
/* User avatar */
.user-avatar {
width: 30px; height: 30px;
border-radius: 50%;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--color-orchid), var(--color-primary));
color: white;
font-weight: 600;
font-size: 0.78rem;
box-shadow: 0 0 0 2px var(--color-glass) inset;
}
.provider-filter-btn {
color: var(--color-muted-foreground);
background: transparent;
}
.provider-filter-btn:hover {
color: var(--color-primary);
background: var(--color-muted);
color: var(--color-foreground);
background: var(--color-glass-strong);
}
/* Sidebar icon button (toggle, logout) */
@@ -709,47 +781,53 @@
background: transparent;
}
.sidebar-icon-btn:hover {
background: var(--color-muted);
background: var(--color-glass-strong);
color: var(--color-foreground);
}
/* Search button */
.search-btn {
background: var(--color-muted);
background: var(--color-glass-strong);
color: var(--color-muted-foreground);
border: 1px solid var(--color-border);
}
.search-btn:hover {
border-color: var(--color-primary);
background: var(--color-glass-elev);
border-color: var(--color-rule-strong);
color: var(--color-foreground);
}
/* Nav links (top-level items, group headers, group children) */
/* Nav links — soft glass hovers, gradient bar on active */
.nav-link {
color: var(--color-muted-foreground);
background: transparent;
font-weight: 400;
font-weight: 450;
border-radius: 12px !important;
}
.nav-link:not(.active):hover {
background: var(--color-muted);
background: var(--color-glass-strong);
color: var(--color-foreground);
}
.nav-link.active {
color: var(--color-primary);
color: var(--color-foreground);
font-weight: 500;
background: var(--color-glass-elev);
box-shadow: inset 0 1px 0 var(--color-highlight), 0 4px 18px -8px var(--color-glow);
}
.nav-link.active-bg {
background: var(--color-sidebar-active);
background: var(--color-glass-elev);
}
/* Footer pill buttons (locale, theme) */
.footer-pill {
background: var(--color-muted);
background: var(--color-glass-strong);
color: var(--color-muted-foreground);
border: 1px solid var(--color-border);
}
.footer-pill:hover {
color: var(--color-foreground);
box-shadow: 0 0 8px var(--color-glow);
background: var(--color-glass-elev);
border-color: var(--color-rule-strong);
}
/* Change password link */
@@ -762,35 +840,62 @@
/* Primary action button (password form submit) */
.primary-btn {
background: var(--color-primary);
color: var(--color-primary-foreground);
background: linear-gradient(135deg, var(--color-primary), var(--color-orchid));
color: white;
border: 0;
box-shadow: 0 6px 20px -8px var(--color-glow-strong), inset 0 1px 0 rgba(255,255,255,0.3);
}
.primary-btn:hover {
box-shadow: 0 0 16px var(--color-glow-strong);
transform: translateY(-1px);
box-shadow: 0 8px 24px -6px var(--color-glow-strong), inset 0 1px 0 rgba(255,255,255,0.3);
}
.nav-badge {
font-size: 0.6rem;
font-weight: 600;
padding: 0.1rem 0.4rem;
font-weight: 500;
padding: 0.12rem 0.45rem;
border-radius: 9999px;
background: var(--color-primary);
color: var(--color-primary-foreground);
background: var(--color-glass-elev);
color: var(--color-foreground);
font-family: var(--font-mono);
line-height: 1.2;
min-width: 1.2rem;
text-align: center;
border: 1px solid var(--color-border);
}
.nav-link.active .nav-badge {
background: var(--color-primary);
color: var(--color-primary-foreground);
border-color: transparent;
}
.nav-badge-sm {
font-size: 0.55rem;
font-weight: 600;
padding: 0.05rem 0.35rem;
font-weight: 500;
padding: 0.06rem 0.4rem;
border-radius: 9999px;
background: var(--color-muted);
background: var(--color-glass-strong);
color: var(--color-muted-foreground);
font-family: var(--font-mono);
line-height: 1.2;
min-width: 1rem;
text-align: center;
}
/* Mobile bottom-nav */
@media (max-width: 767px) {
.app-shell {
padding: 0;
gap: 0;
}
.sidebar {
border-radius: 0;
border: 0;
border-right: 1px solid var(--color-border);
}
.mobile-nav { display: flex !important; }
.mobile-more-panel a:hover,
.mobile-more-panel button:hover {
background: var(--color-glass-strong);
}
}
</style>