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

fix(redesign): portal IconGridSelect popup + snap navbar to mockup

Browse Source 
Three issues addressed:

1. IconGridSelect popup was clipped/mispositioned because the .panel
   ancestor has backdrop-filter, which makes it the containing block
   for position:fixed descendants (CSS spec gotcha). Added a tiny
   portal action ($lib/portal) that re-parents the popup + backdrop
   to document.body, and refreshed the popup styling to be Aurora-
   native (solid surface, gradient active state, glass-strong search).

2. Always-visible top search bar: a sticky glass strip at the top of
   every page with the search trigger (⌘K), theme cycler, locale
   toggle, and a primary 'New tracker' gradient CTA — moved out of
   the sidebar to free up rail space and make search reachable from
   anywhere. The sidebar's inline search button is gone.

3. Navbar snapped to the mockup:
   - Sidebar footer redone as a glass user-card (avatar gradient +
     username + role + mint live chip + change-password / docs / logout
     row beneath a hairline).
   - Section labels above each nav group (Overview / Routing /
     Operators / System) with a hairline rule that extends to the
     edge — same rhythm as the dashboard mockup.
   - Active nav link keeps the gradient bar + glass-elev background
     + inset highlight + soft outer glow.

i18n: nav.section* keys (en + ru), dashboard.newTracker reused for
the topbar CTA. Build clean.
This commit is contained in:
Admin
2026-04-25 01:36:14 +03:00
parent d3210fd5ea
commit 0105d9f0ec
5 changed files with 418 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/IconGridSelect.svelte
+101 -51
View File
@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import MdiIcon from './MdiIcon.svelte'; import MdiIcon from './MdiIcon.svelte';
import { t } from '$lib/i18n'; import { t } from '$lib/i18n';
import { portal } from '$lib/portal';
export interface GridItem { export interface GridItem {
value: string | number; value: string | number;
@@ -90,36 +91,39 @@
</button> </button>
{#if open} {#if open}
<!-- Backdrop --> <!-- Backdrop + popup are portalled to <body> so they escape any
<div style="position:fixed; top:0; left:0; right:0; bottom:0; z-index:9998;" backdrop-filter / transform ancestor that would otherwise act
role="presentation" onclick={() => open = false}></div> as the containing block for `position: fixed`. -->
<div use:portal class="icon-grid-portal-root">
<div class="icon-grid-backdrop"
role="presentation" onclick={() => open = false}></div>
<!-- Popup grid --> <div style="{popupStyle} width: {columns * 160 + 16}px;"
<div style="{popupStyle} width: {columns * 160 + 16}px;" class="icon-grid-popup">
class="icon-grid-popup"> {#if showSearch}
{#if showSearch} <input bind:this={searchEl} bind:value={search} placeholder="Filter..."
<input bind:this={searchEl} bind:value={search} placeholder="Filter..." class="icon-grid-search" type="text" autocomplete="off"
class="icon-grid-search" type="text" autocomplete="off" onkeydown={handleKeydown} />
onkeydown={handleKeydown} />
{/if}
<div class="icon-grid" style="grid-template-columns: repeat({columns}, 1fr);" role="listbox">
{#each filtered as item}
<button type="button"
class="icon-grid-cell"
class:active={String(item.value) === String(value)}
role="option"
aria-selected={String(item.value) === String(value)}
onclick={() => select(item)}>
<span class="icon-grid-cell-icon"><MdiIcon name={item.icon} size={22} /></span>
<span class="icon-grid-cell-label">{item.label}</span>
{#if item.desc}
<span class="icon-grid-cell-desc">{item.desc}</span>
{/if}
</button>
{/each}
{#if filtered.length === 0}
<div class="icon-grid-empty" style="grid-column: 1 / -1; text-align: center; padding: 0.75rem; color: var(--color-muted-foreground); font-size: 0.75rem;">{t('common.noMatches')}</div>
{/if} {/if}
<div class="icon-grid" style="grid-template-columns: repeat({columns}, 1fr);" role="listbox">
{#each filtered as item}
<button type="button"
class="icon-grid-cell"
class:active={String(item.value) === String(value)}
role="option"
aria-selected={String(item.value) === String(value)}
onclick={() => select(item)}>
<span class="icon-grid-cell-icon"><MdiIcon name={item.icon} size={22} /></span>
<span class="icon-grid-cell-label">{item.label}</span>
{#if item.desc}
<span class="icon-grid-cell-desc">{item.desc}</span>
{/if}
</button>
{/each}
{#if filtered.length === 0}
<div class="icon-grid-empty">{t('common.noMatches')}</div>
{/if}
</div>
</div> </div>
</div> </div>
{/if} {/if}
@@ -132,20 +136,21 @@
width: 100%; width: 100%;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 0.375rem; border-radius: 0.625rem;
font-size: 0.875rem; font-size: 0.875rem;
background: var(--color-background); background: var(--color-input-bg);
color: var(--color-foreground); color: var(--color-foreground);
transition: border-color 0.15s, box-shadow 0.15s; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
text-align: left; text-align: left;
} }
.icon-grid-trigger:hover:not(.disabled) { .icon-grid-trigger:hover:not(.disabled) {
border-color: var(--color-primary); border-color: var(--color-rule-strong);
background: var(--color-glass-strong);
} }
.icon-grid-compact { .icon-grid-compact {
padding: 0.25rem 0.5rem; padding: 0.3rem 0.55rem;
gap: 0.3rem; gap: 0.3rem;
font-size: 0.875rem; font-size: 0.85rem;
} }
.icon-grid-compact .icon-grid-trigger-label { .icon-grid-compact .icon-grid-trigger-label {
flex: none; flex: none;
@@ -165,57 +170,95 @@
color: var(--color-muted-foreground); color: var(--color-muted-foreground);
transition: transform 0.15s; transition: transform 0.15s;
} }
/* Portal root — drains the popup out of any backdrop-filter ancestor.
Position: fixed isolates the stacking context at the root level. */
.icon-grid-portal-root {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
}
.icon-grid-backdrop {
position: absolute;
inset: 0;
pointer-events: auto;
}
.icon-grid-popup { .icon-grid-popup {
background: var(--color-card); pointer-events: auto;
border: 1px solid var(--color-border); /* Solid surface — popups need legibility, not glass translucency.
border-radius: 0.5rem; We sit above the aurora gradient so a near-opaque background is
box-shadow: 0 10px 30px rgba(0,0,0,0.3); what reads. */
background: color-mix(in srgb, var(--color-background) 92%, transparent);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border: 1px solid var(--color-rule-strong);
border-radius: 14px;
box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.5);
padding: 0.5rem; padding: 0.5rem;
max-height: 320px; max-height: 320px;
overflow-y: auto; overflow-y: auto;
scrollbar-width: thin; scrollbar-width: thin;
} }
.icon-grid-popup::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
opacity: 0.4;
}
.icon-grid-search { .icon-grid-search {
width: 100%; width: 100%;
padding: 0.375rem 0.5rem; padding: 0.45rem 0.6rem;
margin-bottom: 0.375rem; margin-bottom: 0.4rem;
border: none; border: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border); border-radius: 8px;
border-radius: 0; background: var(--color-glass-strong);
background: transparent;
color: var(--color-foreground); color: var(--color-foreground);
font-size: 0.8rem; font-size: 0.8rem;
outline: none; outline: none;
font-family: inherit;
}
.icon-grid-search:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-glow);
} }
.icon-grid { .icon-grid {
display: grid; display: grid;
gap: 0.375rem; gap: 0.375rem;
position: relative;
z-index: 1;
} }
.icon-grid-cell { .icon-grid-cell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.3rem;
padding: 0.625rem 0.375rem; padding: 0.7rem 0.45rem;
border-radius: 0.375rem; border-radius: 10px;
border: 2px solid transparent; border: 1px solid transparent;
background: transparent; background: transparent;
color: var(--color-foreground); color: var(--color-foreground);
cursor: pointer; cursor: pointer;
transition: all 0.15s; transition: all 0.15s;
text-align: center; text-align: center;
font-family: inherit;
} }
.icon-grid-cell:hover { .icon-grid-cell:hover {
background: var(--color-muted); background: var(--color-glass-strong);
transform: scale(1.03); border-color: var(--color-border);
} }
.icon-grid-cell.active { .icon-grid-cell.active {
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, transparent), color-mix(in srgb, var(--color-orchid) 18%, transparent));
border-color: var(--color-primary); border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 10%, transparent); box-shadow: inset 0 1px 0 var(--color-highlight), 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent);
} }
.icon-grid-cell-icon { .icon-grid-cell-icon {
color: var(--color-muted-foreground); color: var(--color-muted-foreground);
} }
.icon-grid-cell:hover .icon-grid-cell-icon { color: var(--color-foreground); }
.icon-grid-cell.active .icon-grid-cell-icon { .icon-grid-cell.active .icon-grid-cell-icon {
color: var(--color-primary); color: var(--color-primary);
} }
@@ -229,4 +272,11 @@
color: var(--color-muted-foreground); color: var(--color-muted-foreground);
line-height: 1.2; line-height: 1.2;
} }
.icon-grid-empty {
grid-column: 1 / -1;
text-align: center;
padding: 0.85rem;
color: var(--color-muted-foreground);
font-size: 0.75rem;
}
</style> </style>
frontend/src/lib/i18n/en.json
+4
View File
@@ -4,6 +4,10 @@
"tagline": "Service notifications" "tagline": "Service notifications"
}, },
"nav": { "nav": {
"sectionOverview": "Overview",
"sectionRouting": "Routing",
"sectionOperators": "Operators",
"sectionSystem": "System",
"dashboard": "Dashboard", "dashboard": "Dashboard",
"providers": "Providers", "providers": "Providers",
"notificationTrackers": "Notif. Trackers", "notificationTrackers": "Notif. Trackers",
frontend/src/lib/i18n/ru.json
+4
View File
@@ -4,6 +4,10 @@
"tagline": "Уведомления о сервисах" "tagline": "Уведомления о сервисах"
}, },
"nav": { "nav": {
"sectionOverview": "Обзор",
"sectionRouting": "Маршрутизация",
"sectionOperators": "Операторы",
"sectionSystem": "Система",
"dashboard": "Главная", "dashboard": "Главная",
"providers": "Провайдеры", "providers": "Провайдеры",
"notificationTrackers": "Трекеры увед.", "notificationTrackers": "Трекеры увед.",
frontend/src/lib/portal.ts
+35
View File
@@ -0,0 +1,35 @@
/**
* Svelte action that re-parents a node to document.body (or any selector).
*
* Use this for popups / dropdowns / tooltips that rely on
* `position: fixed` positioning. Any ancestor with `backdrop-filter`,
* `transform`, `filter`, `perspective`, `contain: paint`, or
* `will-change: transform` becomes the containing block for fixed
* descendants — which silently breaks viewport-relative positioning.
*
* Portalling sidesteps that by detaching the node from the component
* tree and appending it to a target outside any such ancestor.
*
* Usage:
* <div use:portal>...</div> // → document.body
* <div use:portal={'#root'}>...</div> // → custom selector
*/
export type PortalTarget = string | HTMLElement;
export function portal(node: HTMLElement, target: PortalTarget = 'body') {
function attach(t: PortalTarget) {
const el = typeof t === 'string' ? document.querySelector(t) : t;
if (el instanceof HTMLElement) el.appendChild(node);
}
attach(target);
return {
update(newTarget: PortalTarget) {
attach(newTarget);
},
destroy() {
node.parentNode?.removeChild(node);
},
};
}
frontend/src/routes/+layout.svelte
+274 -86
View File
@@ -201,6 +201,19 @@
: baseNavEntries : baseNavEntries
); );
/**
* Section labels above groups of nav entries — emitted in the template
* before the entry whose key matches a map below. Mirrors the Aurora
* mockup's "Overview / Routing / Operators / System" section rhythm
* without breaking the existing collapsible-group structure.
*/
const SECTION_BREAKS: Record<string, string> = {
'nav.dashboard': 'nav.sectionOverview',
'nav.notification': 'nav.sectionRouting',
'nav.bots': 'nav.sectionOperators',
'nav.settings': 'nav.sectionSystem',
};
// Track which groups are expanded (persisted in localStorage) // Track which groups are expanded (persisted in localStorage)
let expandedGroups = $state<Record<string, boolean>>({}); let expandedGroups = $state<Record<string, boolean>>({});
@@ -395,22 +408,12 @@
</div> </div>
{/if} {/if}
<!-- Search button -->
<div class="{collapsed ? 'px-2 py-1.5' : 'px-3 py-1.5'}" style="border-bottom: 1px solid var(--color-border);">
<button onclick={() => openSearch?.()}
class="search-btn flex items-center gap-2 w-full {collapsed ? 'justify-center px-2' : 'px-2.5'} py-1.5 rounded-lg text-sm transition-all duration-200"
title={t('searchPalette.placeholder')}>
<NavIcon name="mdiMagnify" size={16} />
{#if !collapsed}
<span class="flex-1 text-left text-xs">{t('searchPalette.placeholder')}</span>
<kbd class="text-[0.6rem] font-mono px-1 py-0.5 rounded" style="background: var(--color-background); border: 1px solid var(--color-border);">{isMac ? '⌘' : 'Ctrl '}K</kbd>
{/if}
</button>
</div>
<!-- Nav --> <!-- Nav -->
<nav class="flex-1 p-2 space-y-0.5 overflow-y-auto"> <nav class="flex-1 p-2 space-y-0.5 overflow-y-auto">
{#each navEntries as entry} {#each navEntries as entry}
{#if SECTION_BREAKS[entry.key] && !collapsed}
<div class="nav-section-label">{t(SECTION_BREAKS[entry.key])}</div>
{/if}
{#if isGroup(entry)} {#if isGroup(entry)}
<!-- Group header --> <!-- Group header -->
<button <button
@@ -472,60 +475,49 @@
</nav> </nav>
<!-- Footer --> <!-- Footer -->
<div style="border-top: 1px solid var(--color-border);"> <div class="sidebar-foot">
<!-- Theme & Language --> {#if collapsed}
<div class="flex {collapsed ? 'flex-col items-center gap-1 p-2' : 'gap-1.5 px-4 py-2.5'}"> <div class="flex flex-col items-center gap-1.5 py-3">
<button onclick={toggleLocale} <a href="/docs" target="_blank" rel="noopener noreferrer"
class="footer-pill flex items-center justify-center {collapsed ? 'w-8 h-8' : 'px-2.5 py-1'} rounded-lg text-xs font-medium transition-all duration-200" class="sidebar-icon-btn flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200"
title={t('common.language')}> title={t('common.apiDocs')}>
{getLocale().toUpperCase()} <NavIcon name="mdiApi" size={14} />
</button> </a>
<button onclick={cycleTheme}
class="footer-pill flex items-center justify-center {collapsed ? 'w-8 h-8' : 'px-2.5 py-1'} rounded-lg text-xs transition-all duration-200"
title={t('common.theme')}>
<NavIcon name={theme.resolved === 'dark' ? 'mdiWeatherNight' : theme.current === 'system' ? 'mdiDesktopTowerMonitor' : 'mdiWeatherSunny'} size={14} />
</button>
<a href="/docs" target="_blank" rel="noopener noreferrer"
class="footer-pill flex items-center justify-center {collapsed ? 'w-8 h-8' : 'px-2.5 py-1'} rounded-lg text-xs transition-all duration-200"
title={t('common.apiDocs')}>
<NavIcon name="mdiApi" size={14} />
</a>
</div>
<!-- User info -->
<div class="p-2.5" style="border-top: 1px solid var(--color-border);">
{#if collapsed}
<button onclick={logout} <button onclick={logout}
class="sidebar-icon-btn w-full flex justify-center py-2 rounded-lg transition-all duration-200" class="sidebar-icon-btn flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200"
title={t('nav.logout')}> title={t('nav.logout')}>
<NavIcon name="mdiLogout" size={16} /> <NavIcon name="mdiLogout" size={16} />
</button> </button>
{:else} </div>
<div class="px-1.5"> {:else}
<div class="flex items-center justify-between"> <div class="user-card">
<div class="flex items-center gap-2.5"> <div class="user-card__main">
<div class="user-avatar"> <div class="user-avatar">
{auth.user.username[0].toUpperCase()} {auth.user.username[0].toUpperCase()}
</div>
<div>
<p class="text-sm font-medium">{auth.user.username}</p>
<p class="text-[0.65rem] tracking-wide uppercase" style="color: var(--color-muted-foreground);">{auth.user.role}</p>
</div>
</div>
<button onclick={logout}
class="sidebar-icon-btn p-1.5 rounded-lg transition-all duration-200"
title={t('nav.logout')}>
<NavIcon name="mdiLogout" size={15} />
</button>
</div> </div>
<button onclick={() => showPasswordForm = true} <div class="user-card__text min-w-0">
class="change-pwd-link text-[0.7rem] mt-1.5 transition-colors duration-200 flex items-center gap-1"> <p class="user-card__name truncate">{auth.user.username}</p>
<NavIcon name="mdiKeyVariant" size={12} /> <p class="user-card__role">{auth.user.role}</p>
{t('common.changePassword')} </div>
<span class="user-card__chip" title={t('dashboard.live')}></span>
</div>
<div class="user-card__actions">
<button onclick={() => showPasswordForm = true} class="user-card__btn"
title={t('common.changePassword')}>
<NavIcon name="mdiKeyVariant" size={13} />
<span>{t('common.changePassword')}</span>
</button>
<a href="/docs" target="_blank" rel="noopener noreferrer"
class="user-card__btn" title={t('common.apiDocs')}>
<NavIcon name="mdiApi" size={13} />
</a>
<button onclick={logout} class="user-card__btn user-card__btn--danger"
title={t('nav.logout')}>
<NavIcon name="mdiLogout" size={13} />
</button> </button>
</div> </div>
{/if} </div>
</div> {/if}
</div> </div>
</aside> </aside>
@@ -611,10 +603,34 @@
{/if} {/if}
<!-- Main content --> <!-- Main content -->
<main class="flex-1 overflow-auto md:pb-0" <main class="main-col flex-1 overflow-auto md:pb-0"
style="padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));"> style="padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));">
<!-- Always-visible topbar — search + utilities + primary CTA -->
<div class="topbar max-w-7xl mx-auto px-4 md:px-8 pt-4 md:pt-6">
<div class="topbar-glass">
<button type="button" class="topbar-search" onclick={() => openSearch?.()}>
<NavIcon name="mdiMagnify" size={16} />
<span class="topbar-search__text">{t('searchPalette.placeholder')}</span>
<span class="topbar-search__kbd font-mono">{isMac ? '⌘' : 'Ctrl '}K</span>
</button>
<button type="button" class="topbar-icon-btn" onclick={cycleTheme}
title={t('common.theme')} aria-label={t('common.theme')}>
<NavIcon name={theme.resolved === 'dark' ? 'mdiWeatherNight' : theme.current === 'system' ? 'mdiDesktopTowerMonitor' : 'mdiWeatherSunny'} size={16} />
</button>
<button type="button" class="topbar-icon-btn" onclick={toggleLocale}
title={t('common.language')} aria-label={t('common.language')}>
<span class="topbar-locale font-mono">{getLocale().toUpperCase()}</span>
</button>
<a href="/notification-trackers" class="topbar-cta">
<NavIcon name="mdiPlus" size={14} />
<span>{t('dashboard.newTracker')}</span>
</a>
</div>
</div>
{#key page.url.pathname} {#key page.url.pathname}
<div class="max-w-7xl mx-auto p-4 md:p-8" in:fade={{ duration: 200, delay: 50 }}> <div class="max-w-7xl mx-auto px-4 md:px-8 pb-4 md:pb-8 pt-4" in:fade={{ duration: 200, delay: 50 }}>
{@render children()} {@render children()}
</div> </div>
{/key} {/key}
@@ -785,24 +801,15 @@
color: var(--color-foreground); color: var(--color-foreground);
} }
/* Search button */ /* Nav links — soft glass hovers, gradient bar on active.
.search-btn { Snapped from the Aurora dashboard mockup. */
background: var(--color-glass-strong);
color: var(--color-muted-foreground);
border: 1px solid var(--color-border);
}
.search-btn:hover {
background: var(--color-glass-elev);
border-color: var(--color-rule-strong);
color: var(--color-foreground);
}
/* Nav links — soft glass hovers, gradient bar on active */
.nav-link { .nav-link {
color: var(--color-muted-foreground); color: var(--color-muted-foreground);
background: transparent; background: transparent;
font-weight: 450; font-weight: 450;
border-radius: 12px !important; border-radius: 12px !important;
font-size: 13.5px;
letter-spacing: -0.005em;
} }
.nav-link:not(.active):hover { .nav-link:not(.active):hover {
background: var(--color-glass-strong); background: var(--color-glass-strong);
@@ -818,24 +825,95 @@
background: var(--color-glass-elev); background: var(--color-glass-elev);
} }
/* Footer pill buttons (locale, theme) */ /* Sidebar footer card */
.footer-pill { .sidebar-foot {
background: var(--color-glass-strong); padding: 0.85rem 0.85rem 1rem;
color: var(--color-muted-foreground);
border: 1px solid var(--color-border);
} }
.footer-pill:hover { .user-card {
background: var(--color-glass-strong);
border: 1px solid var(--color-border);
border-radius: 14px;
padding: 0.75rem 0.85rem 0.6rem;
box-shadow: inset 0 1px 0 var(--color-highlight);
}
.user-card__main {
display: flex; align-items: center; gap: 0.7rem;
}
.user-card__text { line-height: 1.15; }
.user-card__name {
font-size: 0.82rem;
font-weight: 500;
color: var(--color-foreground); color: var(--color-foreground);
margin: 0;
}
.user-card__role {
font-size: 0.6rem;
color: var(--color-muted-foreground);
margin: 2px 0 0;
text-transform: uppercase;
letter-spacing: 0.13em;
}
.user-card__chip {
margin-left: auto;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--color-mint);
box-shadow: 0 0 8px var(--color-mint);
flex-shrink: 0;
}
.user-card__actions {
display: flex; gap: 0.3rem;
margin-top: 0.65rem;
padding-top: 0.55rem;
border-top: 1px solid var(--color-border);
}
.user-card__btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
padding: 0.35rem 0.55rem;
flex: 1;
font-size: 0.65rem;
color: var(--color-muted-foreground);
background: transparent;
border: 1px solid transparent;
border-radius: 7px;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
text-decoration: none;
}
.user-card__btn span {
max-width: 90px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-card__btn:not(.user-card__btn--danger):not(:has(span)) { flex: 0 0 auto; }
.user-card__btn:hover {
background: var(--color-glass-elev); background: var(--color-glass-elev);
border-color: var(--color-rule-strong); color: var(--color-foreground);
}
.user-card__btn--danger:hover {
background: var(--color-error-bg);
color: var(--color-error-fg);
} }
/* Change password link */ /* Section labels above each nav group */
.change-pwd-link { :global(.nav-section-label) {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-muted-foreground); color: var(--color-muted-foreground);
padding: 0.85rem 0.85rem 0.4rem;
} }
.change-pwd-link:hover { :global(.nav-section-label::after) {
color: var(--color-primary); content: '';
flex: 1;
height: 1px;
background: var(--color-border);
} }
/* Primary action button (password form submit) */ /* Primary action button (password form submit) */
@@ -881,6 +959,115 @@
text-align: center; text-align: center;
} }
/* === TOPBAR — always-visible search + utility row === */
.main-col {
display: flex;
flex-direction: column;
}
.topbar {
position: sticky;
top: 0;
z-index: 30;
flex-shrink: 0;
}
.topbar-glass {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.6rem 0.5rem 0.85rem;
background: var(--color-glass);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border: 1px solid var(--color-border);
border-radius: 18px;
box-shadow: var(--shadow-card);
position: relative;
}
.topbar-glass::after {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
opacity: 0.4;
}
.topbar-search {
flex: 1;
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0.85rem;
background: var(--color-glass-strong);
border: 1px solid var(--color-border);
border-radius: 12px;
color: var(--color-muted-foreground);
font-size: 0.85rem;
font-family: inherit;
cursor: text;
transition: all 0.15s;
text-align: left;
}
.topbar-search:hover {
background: var(--color-glass-elev);
border-color: var(--color-rule-strong);
}
.topbar-search__text {
flex: 1;
text-align: left;
}
.topbar-search__kbd {
font-size: 0.65rem;
padding: 2px 7px;
border-radius: 6px;
background: var(--color-glass);
border: 1px solid var(--color-border);
color: var(--color-foreground);
}
.topbar-icon-btn {
width: 36px; height: 36px;
display: grid; place-items: center;
border-radius: 12px;
border: 1px solid var(--color-border);
background: var(--color-glass-strong);
color: var(--color-muted-foreground);
cursor: pointer;
transition: all 0.15s;
}
.topbar-icon-btn:hover {
background: var(--color-glass-elev);
color: var(--color-foreground);
}
.topbar-locale {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.06em;
}
.topbar-cta {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0 1rem;
height: 36px;
border-radius: 12px;
border: 0;
background: linear-gradient(135deg, var(--color-primary), var(--color-orchid));
color: white;
font-size: 0.82rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
box-shadow: 0 6px 20px -8px var(--color-glow-strong), inset 0 1px 0 rgba(255,255,255,0.4);
transition: transform 0.15s;
flex-shrink: 0;
}
.topbar-cta:hover { transform: translateY(-1px); }
@media (max-width: 720px) {
.topbar-cta span { display: none; }
.topbar-cta { padding: 0; width: 36px; justify-content: center; }
.topbar-search__kbd { display: none; }
}
/* Mobile bottom-nav */ /* Mobile bottom-nav */
@media (max-width: 767px) { @media (max-width: 767px) {
.app-shell { .app-shell {
@@ -897,5 +1084,6 @@
.mobile-more-panel button:hover { .mobile-more-panel button:hover {
background: var(--color-glass-strong); background: var(--color-glass-strong);
} }
.topbar { display: none; }
} }
</style> </style>