alexei.dolgolyov
2d59a5b994
Apply six isolated, low-risk fixes surfaced by the parallel production-readiness review (backend, frontend, security, perf, UI/UX, bugs+features). Backend - Mask access_token in provider GET responses and drop it on edit when carrying the *** placeholder — fixes plaintext leak of HA long-lived tokens (security H-1). Centralized via PROVIDER_SECRET_FIELDS so all call sites stay in sync (C-5). - Hold HA status-change tasks in a module-level set with a done_callback — asyncio.create_task only keeps weak refs and the task could be GC'd before its row was written (C-1). - Roll back the request session in the Telegram-webhook catch-all so a handler exception cannot leak uncommitted writes into the next request (C-2). - Bail before reading the 1 MiB webhook body when the Gitea provider has no secret configured or the request has no signature header. For the generic webhook with bearer_token auth, verify the Authorization header before the body read. Closes the pre-auth resource-exhaustion amplifier (C-3). Frontend - Add supportsAutoOrganize capability to ProviderDescriptor and consume it from RuleEditor instead of `provider.type !== 'immich'`, bringing the last action-rule editor under CLAUDE.md rule 8 (no provider-type hardcoding in components). - Snackbar: add role="region" + per-toast role/aria-live/aria-atomic so screen readers announce success/error toasts. - Sidebar nav: add aria-current="page" on the active link so the active state has an accessible name. - New snackbar.region key in en + ru (locale parity preserved). Out of scope for this commit (tracked in .claude/reviews/README.md ship-blocker list): secret encryption at rest, JWT cookie move, Alembic adoption, webhook idempotency, deferred-dispatch crash window, persisted Telegram update watermark, bridge_self counter lock — each needs more than a mechanical edit.
1172 lines
43 KiB
Svelte
1172 lines
43 KiB
Svelte
<script lang="ts">
|
|
import '../app.css';
|
|
import { page } from '$app/state';
|
|
import { goto } from '$app/navigation';
|
|
import { onMount } from 'svelte';
|
|
import { fade, slide } from 'svelte/transition';
|
|
import { cubicOut } from 'svelte/easing';
|
|
import { api, errMsg } from '$lib/api';
|
|
import { getAuth, loadUser, logout } from '$lib/auth.svelte';
|
|
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 NavIcon from '$lib/components/NavIcon.svelte';
|
|
import Snackbar from '$lib/components/Snackbar.svelte';
|
|
import SearchPalette from '$lib/components/SearchPalette.svelte';
|
|
import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
|
|
import {
|
|
providersCache, notificationTrackersCache, trackingConfigsCache,
|
|
templateConfigsCache, commandConfigsCache, commandTemplateConfigsCache,
|
|
commandTrackersCache, actionsCache, telegramBotsCache, emailBotsCache,
|
|
matrixBotsCache, targetsCache, releaseStatusCache,
|
|
} from '$lib/stores/caches.svelte';
|
|
import { globalProviderFilter } from '$lib/stores/provider-filter.svelte';
|
|
import { topbarAction } from '$lib/stores/topbar-action.svelte';
|
|
import { providerDefaultIcon } from '$lib/grid-items';
|
|
import IconGridSelect from '$lib/components/IconGridSelect.svelte';
|
|
|
|
let { children } = $props();
|
|
const auth = getAuth();
|
|
const theme = getTheme();
|
|
|
|
let allProviders = $derived(providersCache.items);
|
|
|
|
// Sidebar release indicator — reads from the cache populated in onMount.
|
|
const releaseUpdateAvailable = $derived(!!releaseStatusCache.value?.update_available);
|
|
// A screen reader hits the brand-version link on every page — keep the
|
|
// label informative only when an update is available, otherwise announce
|
|
// the version + product so we don't repeat "Up to date" everywhere.
|
|
const releaseTooltip = $derived(
|
|
releaseUpdateAvailable
|
|
? t('settings.release.updateAvailableTooltip').replace('{v}', releaseStatusCache.value?.latest ?? '')
|
|
: `Notify Bridge v${__APP_VERSION__}`
|
|
);
|
|
|
|
let providerFilterItems = $derived([
|
|
{ value: 0, icon: 'mdiFilterOff', label: t('common.allProviders'), desc: '' },
|
|
...allProviders.map(p => ({ value: p.id, icon: providerDefaultIcon(p), label: p.name, desc: p.type })),
|
|
]);
|
|
// One-way: the store is the source of truth, the filter widget displays it.
|
|
// IconGridSelect mutations route through `onChange` (see template) so we
|
|
// never need a paired `$effect` to mirror the local <-> store value, which
|
|
// previously required a `_syncingFilter` reentrancy flag.
|
|
let providerFilterValue = $derived(globalProviderFilter.id ?? 0);
|
|
|
|
// Reserve the provider-filter row from first paint until the cache resolves.
|
|
// Without this, the row appears mid-paint and pushes nav items down on every
|
|
// hard reload — the most visible "jump" the user reported.
|
|
let showProviderFilter = $derived(allProviders.length >= 1 || providersCache.fetchedAt === 0);
|
|
|
|
// Reconcile a stale persisted provider ID against the freshly-loaded
|
|
// providers cache. Lives here (not in the store getter) because writing
|
|
// `_providerId` from a `$state`-derived getter triggers Svelte's
|
|
// `state_unsafe_mutation`. Runs once per cache refresh.
|
|
$effect(() => {
|
|
// Track `fetchedAt` so we re-run after the cache loads.
|
|
void providersCache.fetchedAt;
|
|
void providersCache.items.length;
|
|
globalProviderFilter.reconcileWithCache();
|
|
});
|
|
|
|
function setProviderFilter(v: string | number) {
|
|
const num = typeof v === 'number' ? v : Number(v);
|
|
globalProviderFilter.set(num === 0 ? null : num);
|
|
}
|
|
|
|
// Collapsed-rail filter cycles through providers via the same setter so the
|
|
// store stays the single write path.
|
|
function cycleProviderFilter() {
|
|
const ids = [0, ...allProviders.map(p => p.id)];
|
|
const idx = ids.indexOf(providerFilterValue);
|
|
setProviderFilter(ids[(idx + 1) % ids.length]);
|
|
}
|
|
|
|
let showPasswordForm = $state(false);
|
|
let redirecting = $state(false);
|
|
let openSearch: (() => void) | undefined;
|
|
let pwdCurrent = $state('');
|
|
let pwdNew = $state('');
|
|
let pwdConfirm = $state('');
|
|
let pwdMsg = $state('');
|
|
let pwdSuccess = $state(false);
|
|
|
|
async function changePassword(e: SubmitEvent) {
|
|
e.preventDefault(); pwdMsg = ''; pwdSuccess = false;
|
|
if (pwdNew.length < 8) { pwdMsg = t('auth.passwordTooShort'); return; }
|
|
if (pwdNew !== pwdConfirm) { pwdMsg = t('auth.passwordMismatch'); return; }
|
|
try {
|
|
await api('/auth/password', { method: 'PUT', body: JSON.stringify({ current_password: pwdCurrent, new_password: pwdNew }) });
|
|
pwdMsg = t('common.changePassword');
|
|
pwdSuccess = true;
|
|
pwdCurrent = ''; pwdNew = ''; pwdConfirm = '';
|
|
snackSuccess(t('snack.passwordChanged'));
|
|
setTimeout(() => { showPasswordForm = false; pwdMsg = ''; pwdSuccess = false; pwdConfirm = ''; }, 2000);
|
|
} catch (err: unknown) { const m = errMsg(err); pwdMsg = m; pwdSuccess = false; snackError(m); }
|
|
}
|
|
|
|
// Read persisted UI state synchronously so first paint already matches the
|
|
// user's last session — otherwise the sidebar visibly snaps from expanded
|
|
// to collapsed (and groups slide open) right after mount.
|
|
function readPersistedCollapsed(): boolean {
|
|
if (typeof localStorage === 'undefined') return false;
|
|
return localStorage.getItem('sidebar_collapsed') === 'true';
|
|
}
|
|
function readPersistedExpandedGroups(): Record<string, boolean> {
|
|
if (typeof localStorage === 'undefined') return {};
|
|
try {
|
|
const saved = localStorage.getItem('nav_expanded');
|
|
return saved ? JSON.parse(saved) : {};
|
|
} catch {
|
|
return {};
|
|
}
|
|
}
|
|
|
|
let collapsed = $state(readPersistedCollapsed());
|
|
let isMac = $derived(typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent));
|
|
|
|
// Nav counts — computed reactively from caches + global provider filter
|
|
let navCounts = $derived.by(() => {
|
|
const pid = globalProviderFilter.id;
|
|
const ptype = globalProviderFilter.providerType;
|
|
|
|
const filterById = <T extends { provider_id?: number }>(items: T[]) =>
|
|
pid ? items.filter(i => i.provider_id === pid) : items;
|
|
const filterByType = <T extends { provider_type?: string }>(items: T[]) =>
|
|
ptype ? items.filter(i => i.provider_type === ptype) : items;
|
|
|
|
const targets = targetsCache.items;
|
|
// Single pass to count targets by type
|
|
const targetsByType = new Map<string, number>();
|
|
for (const t of targets) {
|
|
targetsByType.set(t.type, (targetsByType.get(t.type) || 0) + 1);
|
|
}
|
|
return {
|
|
providers: pid ? 1 : providersCache.items.length,
|
|
notification_trackers: filterById(notificationTrackersCache.items as any[]).length,
|
|
tracking_configs: filterByType(trackingConfigsCache.items as any[]).length,
|
|
template_configs: filterByType(templateConfigsCache.items as any[]).length,
|
|
command_trackers: filterById(commandTrackersCache.items as any[]).length,
|
|
command_configs: filterByType(commandConfigsCache.items as any[]).length,
|
|
command_template_configs: filterByType(commandTemplateConfigsCache.items as any[]).length,
|
|
actions: filterById(actionsCache.items as any[]).length,
|
|
telegram_bots: telegramBotsCache.items.length,
|
|
email_bots: emailBotsCache.items.length,
|
|
matrix_bots: matrixBotsCache.items.length,
|
|
targets_telegram: targetsByType.get('telegram') || 0,
|
|
targets_webhook: targetsByType.get('webhook') || 0,
|
|
targets_email: targetsByType.get('email') || 0,
|
|
targets_discord: targetsByType.get('discord') || 0,
|
|
targets_slack: targetsByType.get('slack') || 0,
|
|
targets_ntfy: targetsByType.get('ntfy') || 0,
|
|
targets_matrix: targetsByType.get('matrix') || 0,
|
|
targets_broadcast: targetsByType.get('broadcast') || 0,
|
|
} as Record<string, number>;
|
|
});
|
|
|
|
interface NavItem {
|
|
href: string;
|
|
key: string;
|
|
icon: string;
|
|
countKey?: string;
|
|
}
|
|
|
|
interface NavGroup {
|
|
key: string;
|
|
icon: string;
|
|
children: NavItem[];
|
|
}
|
|
|
|
type NavEntry = NavItem | NavGroup;
|
|
|
|
function isGroup(entry: NavEntry): entry is NavGroup {
|
|
return 'children' in entry;
|
|
}
|
|
|
|
const baseNavEntries: NavEntry[] = [
|
|
{ href: '/', key: 'nav.dashboard', icon: 'mdiViewDashboard' },
|
|
{ href: '/providers', key: 'nav.providers', icon: 'mdiServer', countKey: 'providers' },
|
|
{
|
|
key: 'nav.notification', icon: 'mdiBellOutline',
|
|
children: [
|
|
{ href: '/notification-trackers', key: 'nav.trackers', icon: 'mdiRadar', countKey: 'notification_trackers' },
|
|
{ href: '/tracking-configs', key: 'nav.configs', icon: 'mdiCog', countKey: 'tracking_configs' },
|
|
{ href: '/template-configs', key: 'nav.templates', icon: 'mdiFileDocumentEdit', countKey: 'template_configs' },
|
|
],
|
|
},
|
|
{
|
|
key: 'nav.commands', icon: 'mdiConsoleLine',
|
|
children: [
|
|
{ href: '/command-trackers', key: 'nav.trackers', icon: 'mdiRadar', countKey: 'command_trackers' },
|
|
{ href: '/command-configs', key: 'nav.configs', icon: 'mdiCog', countKey: 'command_configs' },
|
|
{ href: '/command-template-configs', key: 'nav.templates', icon: 'mdiCodeBracesBox', countKey: 'command_template_configs' },
|
|
],
|
|
},
|
|
{
|
|
key: 'nav.automation', icon: 'mdiRobotOutline',
|
|
children: [
|
|
{ href: '/actions', key: 'nav.actions', icon: 'mdiPlayCircleOutline', countKey: 'actions' },
|
|
],
|
|
},
|
|
{
|
|
key: 'nav.bots', icon: 'mdiRobot',
|
|
children: [
|
|
{ href: '/bots?tab=telegram', key: 'nav.telegram', icon: 'mdiSendCircle', countKey: 'telegram_bots' },
|
|
{ href: '/bots?tab=email', key: 'nav.email', icon: 'mdiEmailOutline', countKey: 'email_bots' },
|
|
{ href: '/bots?tab=matrix', key: 'nav.matrix', icon: 'mdiMatrix', countKey: 'matrix_bots' },
|
|
],
|
|
},
|
|
{
|
|
key: 'nav.targets', icon: 'mdiTarget',
|
|
children: [
|
|
{ href: '/targets?type=telegram', key: 'nav.targetTelegram', icon: 'mdiSend', countKey: 'targets_telegram' },
|
|
{ href: '/targets?type=webhook', key: 'nav.targetWebhook', icon: 'mdiWebhook', countKey: 'targets_webhook' },
|
|
{ href: '/targets?type=email', key: 'nav.targetEmail', icon: 'mdiEmailOutline', countKey: 'targets_email' },
|
|
{ href: '/targets?type=discord', key: 'nav.targetDiscord', icon: 'mdiChat', countKey: 'targets_discord' },
|
|
{ href: '/targets?type=slack', key: 'nav.targetSlack', icon: 'mdiSlack', countKey: 'targets_slack' },
|
|
{ href: '/targets?type=ntfy', key: 'nav.targetNtfy', icon: 'mdiBell', countKey: 'targets_ntfy' },
|
|
{ href: '/targets?type=matrix', key: 'nav.targetMatrix', icon: 'mdiMatrix', countKey: 'targets_matrix' },
|
|
{ href: '/targets?type=broadcast', key: 'nav.targetBroadcast', icon: 'mdiBullhorn', countKey: 'targets_broadcast' },
|
|
],
|
|
},
|
|
];
|
|
|
|
const navEntries = $derived<NavEntry[]>(auth.isAdmin
|
|
? [
|
|
...baseNavEntries,
|
|
{
|
|
key: 'nav.settings', icon: 'mdiCogOutline',
|
|
children: [
|
|
{ href: '/settings', key: 'nav.common', icon: 'mdiCogOutline' },
|
|
{ href: '/settings/backup', key: 'nav.backup', icon: 'mdiBackupRestore' },
|
|
{ href: '/users', key: 'nav.users', icon: 'mdiAccountGroup' },
|
|
],
|
|
},
|
|
]
|
|
: 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)
|
|
let expandedGroups = $state<Record<string, boolean>>(readPersistedExpandedGroups());
|
|
|
|
function toggleGroup(key: string) {
|
|
expandedGroups = { ...expandedGroups, [key]: !expandedGroups[key] };
|
|
if (typeof localStorage !== 'undefined') {
|
|
localStorage.setItem('nav_expanded', JSON.stringify(expandedGroups));
|
|
}
|
|
}
|
|
|
|
function isGroupActive(group: NavGroup): boolean {
|
|
return group.children.some(c => {
|
|
const path = c.href.split('?')[0];
|
|
return page.url.pathname === path;
|
|
});
|
|
}
|
|
|
|
// Mobile bottom-nav derives its 4 primary slots from baseNavEntries by key
|
|
// lookup. Adding a new top-level nav entry doesn't break this list, and
|
|
// renaming a key fails loudly via the assertion below — keeping desktop
|
|
// and mobile nav structure in sync without manual duplication.
|
|
const MOBILE_PRIMARY_KEYS = ['nav.dashboard', 'nav.notification', 'nav.commands', 'nav.targets'] as const;
|
|
const mobileNavItems = $derived<NavItem[]>(
|
|
MOBILE_PRIMARY_KEYS.map(key => {
|
|
const entry = baseNavEntries.find(e => e.key === key);
|
|
if (!entry) return null;
|
|
return isGroup(entry)
|
|
? { href: entry.children[0]?.href ?? '/', key: entry.key, icon: entry.icon }
|
|
: entry;
|
|
}).filter((x): x is NavItem => x !== null)
|
|
);
|
|
|
|
// "More" panel mirrors the full desktop sidebar tree so every subnode is
|
|
// reachable on mobile (previously it was a flat hand-picked list that
|
|
// hid all target types, bot channels, and several nested pages).
|
|
let mobileMoreOpen = $state(false);
|
|
|
|
function closeMobileMore() {
|
|
mobileMoreOpen = false;
|
|
}
|
|
|
|
const isAuthPage = $derived(
|
|
page.url.pathname === '/login' || page.url.pathname === '/setup'
|
|
);
|
|
|
|
onMount(async () => {
|
|
initTheme();
|
|
// `collapsed` and `expandedGroups` are now hydrated synchronously in
|
|
// their $state initializers above to avoid a post-mount layout snap.
|
|
await loadUser();
|
|
if (!auth.user && !isAuthPage) {
|
|
redirecting = true;
|
|
goto('/login');
|
|
}
|
|
// Load all caches for nav counts + global provider filter
|
|
if (auth.user) {
|
|
Promise.all([
|
|
providersCache.fetch(),
|
|
notificationTrackersCache.fetch(),
|
|
trackingConfigsCache.fetch(),
|
|
templateConfigsCache.fetch(),
|
|
commandTrackersCache.fetch(),
|
|
commandConfigsCache.fetch(),
|
|
commandTemplateConfigsCache.fetch(),
|
|
actionsCache.fetch(),
|
|
telegramBotsCache.fetch(),
|
|
emailBotsCache.fetch(),
|
|
matrixBotsCache.fetch(),
|
|
targetsCache.fetch(),
|
|
releaseStatusCache.fetch(),
|
|
]).catch(e => console.warn('Failed to load caches for nav counts:', e));
|
|
}
|
|
});
|
|
|
|
// Auto-expand group containing the active page
|
|
$effect(() => {
|
|
for (const entry of navEntries) {
|
|
if (isGroup(entry) && isGroupActive(entry) && !expandedGroups[entry.key]) {
|
|
expandedGroups = { ...expandedGroups, [entry.key]: true };
|
|
}
|
|
}
|
|
});
|
|
|
|
function cycleTheme() {
|
|
const order: Theme[] = ['light', 'dark', 'system'];
|
|
const idx = order.indexOf(theme.current);
|
|
setTheme(order[(idx + 1) % order.length]);
|
|
}
|
|
|
|
function toggleLocale() {
|
|
setLocale(getLocale() === 'en' ? 'ru' : 'en');
|
|
}
|
|
|
|
function toggleSidebar() {
|
|
collapsed = !collapsed;
|
|
if (typeof localStorage !== 'undefined') {
|
|
localStorage.setItem('sidebar_collapsed', String(collapsed));
|
|
}
|
|
}
|
|
|
|
function isActive(href: string): boolean {
|
|
const [hrefPath, hrefQs] = href.split('?');
|
|
if (page.url.pathname !== hrefPath) return false;
|
|
|
|
if (hrefQs) {
|
|
// Link has query params — all must match
|
|
const params = new URLSearchParams(hrefQs);
|
|
for (const [k, v] of params) {
|
|
if (page.url.searchParams.get(k) !== v) return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
// Link has NO query params — only active if URL also has no
|
|
// query params that a sibling link would claim
|
|
// (e.g. /bots is not active when URL is /bots?tab=matrix)
|
|
if (page.url.searchParams.size > 0) {
|
|
// Check if any sibling nav item matches with those params
|
|
for (const entry of navEntries) {
|
|
if (isGroup(entry)) {
|
|
for (const child of entry.children) {
|
|
if (child.href !== href && child.href.startsWith(hrefPath + '?')) {
|
|
const sibQs = child.href.split('?')[1];
|
|
const sibParams = new URLSearchParams(sibQs);
|
|
let sibMatch = true;
|
|
for (const [k, v] of sibParams) {
|
|
if (page.url.searchParams.get(k) !== v) { sibMatch = false; break; }
|
|
}
|
|
if (sibMatch) return false; // a sibling with query params matches better
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
</script>
|
|
|
|
{#if isAuthPage}
|
|
{@render children()}
|
|
{:else if auth.loading}
|
|
<div class="min-h-screen flex items-center justify-center">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-5 h-5 rounded-full border-2 border-[var(--color-primary)] border-t-transparent animate-spin"></div>
|
|
<p class="text-sm text-[var(--color-muted-foreground)]">{t('common.loading')}</p>
|
|
</div>
|
|
</div>
|
|
{:else if auth.user}
|
|
<div class="app-shell">
|
|
<!-- Sidebar -->
|
|
<aside
|
|
class="sidebar {collapsed ? 'w-[3.75rem]' : 'w-[15rem]'} flex flex-col max-md:hidden"
|
|
>
|
|
<!-- Header -->
|
|
<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 flex items-center gap-3">
|
|
<div class="brand-orb"></div>
|
|
<div class="brand-text">
|
|
<h1 class="brand-name">
|
|
{#if globalProviderFilter.provider}
|
|
<span class="brand-mark__icon" style="color: var(--color-primary);"><NavIcon name={providerDefaultIcon(globalProviderFilter.provider)} size={14} /></span>
|
|
{/if}
|
|
Notify Bridge
|
|
</h1>
|
|
<p class="brand-version font-mono">
|
|
<a
|
|
class="brand-version-link"
|
|
class:has-update={releaseUpdateAvailable}
|
|
href="/settings#release"
|
|
aria-label={releaseTooltip}
|
|
title={releaseUpdateAvailable ? releaseTooltip : undefined}
|
|
>
|
|
<span>v{__APP_VERSION__}</span>
|
|
{#if releaseUpdateAvailable}
|
|
<span class="brand-version-dot" aria-hidden="true"></span>
|
|
{/if}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="brand-orb brand-orb--small"></div>
|
|
{/if}
|
|
<button onclick={toggleSidebar}
|
|
class="sidebar-icon-btn flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-200"
|
|
title={collapsed ? t('common.expand') : t('common.collapse')}
|
|
aria-label={collapsed ? t('common.expand') : t('common.collapse')}>
|
|
<NavIcon name={collapsed ? 'mdiChevronRight' : 'mdiChevronLeft'} size={18} />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Global provider filter — kept rendered during the initial cache
|
|
fetch (fetchedAt === 0) so the row doesn't pop in mid-paint and
|
|
push the nav down. Hides only once we confirm zero providers. -->
|
|
{#if showProviderFilter}
|
|
<div class="{collapsed ? 'px-2 py-1' : 'px-3 py-1.5'}" style="border-bottom: 1px solid var(--color-border);">
|
|
{#if collapsed}
|
|
<button onclick={cycleProviderFilter}
|
|
class="provider-filter-btn flex items-center justify-center w-full py-1.5 rounded-lg text-sm transition-all duration-200"
|
|
title={globalProviderFilter.provider?.name || t('common.allProviders')}
|
|
aria-label={globalProviderFilter.provider?.name || t('common.allProviders')}>
|
|
<NavIcon name={globalProviderFilter.provider ? providerDefaultIcon(globalProviderFilter.provider) : 'mdiFilterOff'} size={16} />
|
|
</button>
|
|
{:else}
|
|
<IconGridSelect items={providerFilterItems} value={providerFilterValue} onChange={setProviderFilter} columns={Math.min(providerFilterItems.length, 3)} compact />
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Nav -->
|
|
<nav class="flex-1 p-2 space-y-0.5 overflow-y-auto">
|
|
{#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)}
|
|
<!-- Group header -->
|
|
<button
|
|
onclick={() => collapsed ? null : toggleGroup(entry.key)}
|
|
class="nav-link group flex items-center gap-2.5 {collapsed ? 'justify-center px-2' : 'px-3'} py-2 rounded-lg text-sm transition-all duration-200 w-full text-left relative {isGroupActive(entry) ? 'active' : ''} {isGroupActive(entry) && !expandedGroups[entry.key] ? 'active-bg' : ''}"
|
|
title={collapsed ? t(entry.key) : ''}
|
|
>
|
|
{#if isGroupActive(entry) && !expandedGroups[entry.key]}
|
|
<div class="active-indicator" style="position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--color-primary); box-shadow: 0 0 8px var(--color-glow-strong);"></div>
|
|
{/if}
|
|
<NavIcon name={entry.icon} size={18} />
|
|
{#if !collapsed}
|
|
<span class="truncate flex-1">{t(entry.key)}</span>
|
|
<span class="nav-chevron" style="display: inline-flex; transition: transform 0.2s ease; transform: rotate({expandedGroups[entry.key] ? '90deg' : '0deg'});">
|
|
<NavIcon name="mdiChevronRight" size={14} />
|
|
</span>
|
|
{/if}
|
|
</button>
|
|
<!-- Group children -->
|
|
{#if expandedGroups[entry.key] && !collapsed}
|
|
<div transition:slide={{ duration: 200, easing: cubicOut }} class="ml-3 pl-3 space-y-0.5" style="border-left: 1px solid var(--color-border);">
|
|
{#each entry.children as child}
|
|
<a
|
|
href={child.href}
|
|
class="nav-link nav-link-child group flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-sm transition-all duration-200 relative {isActive(child.href) ? 'active' : ''}"
|
|
aria-current={isActive(child.href) ? 'page' : undefined}
|
|
>
|
|
{#if isActive(child.href)}
|
|
<div class="active-indicator" style="position: absolute; left: -13px; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--color-primary); box-shadow: 0 0 8px var(--color-glow-strong);"></div>
|
|
{/if}
|
|
<NavIcon name={child.icon} size={15} />
|
|
<span class="truncate flex-1">{t(child.key)}</span>
|
|
{#if child.countKey && navCounts[child.countKey]}
|
|
<span class="nav-badge-sm">{navCounts[child.countKey]}</span>
|
|
{/if}
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{:else}
|
|
<!-- Top-level item -->
|
|
<a
|
|
href={entry.href}
|
|
class="nav-link group flex items-center gap-2.5 {collapsed ? 'justify-center px-2' : 'px-3'} py-2 rounded-lg text-sm transition-all duration-200 relative {isActive(entry.href) ? 'active' : ''}"
|
|
title={collapsed ? t(entry.key) : ''}
|
|
aria-current={isActive(entry.href) ? 'page' : undefined}
|
|
>
|
|
{#if isActive(entry.href)}
|
|
<div class="active-indicator" style="position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--color-primary); box-shadow: 0 0 8px var(--color-glow-strong);"></div>
|
|
{/if}
|
|
<NavIcon name={entry.icon} size={18} />
|
|
{#if !collapsed}
|
|
<span class="truncate flex-1">{t(entry.key)}</span>
|
|
{#if entry.countKey && navCounts[entry.countKey]}
|
|
<span class="nav-badge">{navCounts[entry.countKey]}</span>
|
|
{/if}
|
|
{/if}
|
|
</a>
|
|
{/if}
|
|
{/each}
|
|
</nav>
|
|
|
|
<!-- Footer -->
|
|
<div class="sidebar-foot">
|
|
{#if collapsed}
|
|
<div class="flex flex-col items-center gap-1.5 py-3">
|
|
<a href="/docs" target="_blank" rel="noopener noreferrer"
|
|
class="sidebar-icon-btn flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-200"
|
|
title={t('common.apiDocs')}
|
|
aria-label={t('common.apiDocs')}>
|
|
<NavIcon name="mdiApi" size={14} />
|
|
</a>
|
|
<button onclick={logout}
|
|
class="sidebar-icon-btn flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-200"
|
|
title={t('nav.logout')}
|
|
aria-label={t('nav.logout')}>
|
|
<NavIcon name="mdiLogout" size={16} />
|
|
</button>
|
|
</div>
|
|
{:else}
|
|
<div class="user-card">
|
|
<div class="user-card__main">
|
|
<div class="user-avatar">
|
|
{auth.user.username[0].toUpperCase()}
|
|
</div>
|
|
<div class="user-card__text min-w-0">
|
|
<p class="user-card__name truncate">{auth.user.username}</p>
|
|
<p class="user-card__role">{auth.user.role}</p>
|
|
</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')}
|
|
aria-label={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')}
|
|
aria-label={t('common.apiDocs')}>
|
|
<NavIcon name="mdiApi" size={13} />
|
|
</a>
|
|
<button onclick={logout} class="user-card__btn user-card__btn--danger"
|
|
title={t('nav.logout')}
|
|
aria-label={t('nav.logout')}>
|
|
<NavIcon name="mdiLogout" size={13} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Mobile bottom nav -->
|
|
<nav class="mobile-nav" style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: var(--color-sidebar); border-top: 1px solid var(--color-border); display: none; justify-content: space-around; padding: 0.375rem 0 calc(0.375rem + env(safe-area-inset-bottom, 0px)); backdrop-filter: blur(12px);">
|
|
{#each mobileNavItems as item}
|
|
<a href={item.href} aria-label={t(item.key)}
|
|
class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs rounded-lg transition-all duration-200"
|
|
style="color: {isActive(item.href) ? 'var(--color-primary)' : 'var(--color-muted-foreground)'};">
|
|
<NavIcon name={item.icon} size={20} />
|
|
</a>
|
|
{/each}
|
|
<button onclick={() => openSearch?.()} aria-label={t('searchPalette.placeholder')}
|
|
class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs rounded-lg transition-all duration-200"
|
|
style="color: var(--color-muted-foreground);">
|
|
<NavIcon name="mdiMagnify" size={20} />
|
|
</button>
|
|
<button onclick={() => mobileMoreOpen = !mobileMoreOpen} aria-label={t('nav.more')}
|
|
aria-expanded={mobileMoreOpen}
|
|
class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs rounded-lg transition-all duration-200"
|
|
style="color: {mobileMoreOpen ? 'var(--color-primary)' : 'var(--color-muted-foreground)'};">
|
|
<NavIcon name="mdiDotsHorizontal" size={20} />
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- Mobile "More" panel — mirrors the full desktop nav tree -->
|
|
{#if mobileMoreOpen}
|
|
<div class="mobile-more-backdrop" style="position: fixed; inset: 0; z-index: 49; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px);"
|
|
onclick={closeMobileMore} role="presentation"></div>
|
|
<div class="mobile-more-panel"
|
|
transition:slide={{ duration: 200, easing: cubicOut }}>
|
|
{#if allProviders.length >= 1}
|
|
<div class="mb-3 pb-3" style="border-bottom: 1px solid var(--color-border);">
|
|
<IconGridSelect items={providerFilterItems} value={providerFilterValue} onChange={setProviderFilter} columns={Math.min(providerFilterItems.length, 4)} compact />
|
|
</div>
|
|
{/if}
|
|
<div class="space-y-3">
|
|
{#each navEntries as entry}
|
|
{#if isGroup(entry)}
|
|
<div>
|
|
<div class="flex items-center gap-1.5 px-1 pb-1.5 text-[0.65rem] font-semibold uppercase tracking-wider"
|
|
style="color: var(--color-muted-foreground);">
|
|
<NavIcon name={entry.icon} size={13} />
|
|
<span>{t(entry.key)}</span>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-2">
|
|
{#each entry.children as child}
|
|
<a href={child.href} onclick={closeMobileMore}
|
|
class="flex flex-col items-center gap-1 p-3 rounded-lg transition-all duration-200 relative"
|
|
style="color: {isActive(child.href) ? 'var(--color-primary)' : 'var(--color-muted-foreground)'}; background: {isActive(child.href) ? 'var(--color-sidebar-active)' : 'transparent'};"
|
|
>
|
|
<NavIcon name={child.icon} size={20} />
|
|
<span class="text-xs text-center leading-tight">{t(child.key)}</span>
|
|
{#if child.countKey && navCounts[child.countKey]}
|
|
<span class="nav-badge-sm" style="position: absolute; top: 0.25rem; right: 0.25rem;">{navCounts[child.countKey]}</span>
|
|
{/if}
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<a href={entry.href} onclick={closeMobileMore}
|
|
class="flex items-center gap-2 p-3 rounded-lg transition-all duration-200 relative"
|
|
style="color: {isActive(entry.href) ? 'var(--color-primary)' : 'var(--color-muted-foreground)'}; background: {isActive(entry.href) ? 'var(--color-sidebar-active)' : 'transparent'};"
|
|
>
|
|
<NavIcon name={entry.icon} size={18} />
|
|
<span class="text-sm flex-1">{t(entry.key)}</span>
|
|
{#if entry.countKey && navCounts[entry.countKey]}
|
|
<span class="nav-badge">{navCounts[entry.countKey]}</span>
|
|
{/if}
|
|
</a>
|
|
{/if}
|
|
{/each}
|
|
<div class="pt-2" style="border-top: 1px solid var(--color-border);">
|
|
<button onclick={() => { closeMobileMore(); logout(); }}
|
|
class="flex items-center gap-2 p-3 w-full rounded-lg transition-all duration-200"
|
|
style="color: var(--color-muted-foreground);">
|
|
<NavIcon name="mdiLogout" size={18} />
|
|
<span class="text-sm">{t('nav.logout')}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Main content -->
|
|
<main class="main-col flex-1 overflow-auto md:pb-0"
|
|
style="padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));">
|
|
|
|
<!-- Always-visible topbar — search + utilities + primary CTA -->
|
|
<div class="topbar">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
{#key page.url.pathname}
|
|
<div class="pb-4 md:pb-8" style="padding-top: 12px;" in:fade={{ duration: 200, delay: 50 }}>
|
|
{@render children()}
|
|
</div>
|
|
{/key}
|
|
</main>
|
|
</div>
|
|
{:else}
|
|
<div class="min-h-screen flex items-center justify-center">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-5 h-5 rounded-full border-2 border-[var(--color-primary)] border-t-transparent animate-spin"></div>
|
|
<p class="text-sm text-[var(--color-muted-foreground)]">{redirecting ? t('common.redirecting') : t('common.loading')}</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Password change modal -->
|
|
<Modal open={showPasswordForm} title={t('common.changePassword')} onclose={() => { showPasswordForm = false; pwdMsg = ''; pwdSuccess = false; pwdConfirm = ''; }}>
|
|
<form onsubmit={changePassword} class="space-y-3">
|
|
<input type="text" name="username" autocomplete="username" value={auth.user?.username ?? ''}
|
|
readonly aria-hidden="true" tabindex="-1"
|
|
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;" />
|
|
<div>
|
|
<label for="pwd-current" class="block text-sm font-medium mb-1">{t('common.currentPassword')}</label>
|
|
<input id="pwd-current" type="password" autocomplete="current-password" bind:value={pwdCurrent} required
|
|
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
<div>
|
|
<label for="pwd-new" class="block text-sm font-medium mb-1">{t('common.newPassword')}</label>
|
|
<input id="pwd-new" type="password" autocomplete="new-password" bind:value={pwdNew} required minlength="8"
|
|
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
<div>
|
|
<label for="pwd-confirm" class="block text-sm font-medium mb-1">{t('auth.confirmPassword')}</label>
|
|
<input id="pwd-confirm" type="password" autocomplete="new-password" bind:value={pwdConfirm} required minlength="8"
|
|
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
{#if pwdMsg}
|
|
<p class="text-sm" style="color: var({pwdSuccess ? '--color-success-fg' : '--color-error-fg'});">{pwdMsg}</p>
|
|
{/if}
|
|
<button type="submit"
|
|
class="primary-btn w-full py-2.5 rounded-lg text-sm font-medium transition-all duration-200">
|
|
{t('common.save')}
|
|
</button>
|
|
</form>
|
|
</Modal>
|
|
|
|
<Snackbar />
|
|
<SearchPalette onopen={(fn) => openSearch = fn} />
|
|
|
|
<style>
|
|
/* === AURORA SHELL === */
|
|
.app-shell {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
padding: 18px;
|
|
gap: 18px;
|
|
}
|
|
|
|
/* === 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);
|
|
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 — snapped to Aurora mockup: bold sans wordmark + mono version */
|
|
.brand-text { line-height: 1.1; min-width: 0; }
|
|
.brand-name {
|
|
font-family: var(--font-sans);
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
letter-spacing: -0.01em;
|
|
color: var(--color-foreground);
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
white-space: nowrap;
|
|
}
|
|
.brand-mark__icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.brand-version {
|
|
font-size: 0.65rem;
|
|
color: var(--color-muted-foreground);
|
|
margin: 3px 0 0;
|
|
letter-spacing: 0.02em;
|
|
font-weight: 500;
|
|
}
|
|
.brand-version-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
border-radius: 0.3rem;
|
|
padding: 1px 4px;
|
|
margin: -1px -4px;
|
|
transition: color 0.15s, background 0.15s;
|
|
}
|
|
.brand-version-link:hover {
|
|
color: var(--color-foreground);
|
|
background: var(--color-glass-strong);
|
|
}
|
|
.brand-version-link.has-update {
|
|
color: var(--color-citrus, #d4a73a);
|
|
}
|
|
.brand-version-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: var(--color-citrus, #d4a73a);
|
|
box-shadow: 0 0 6px color-mix(in srgb, var(--color-citrus, #d4a73a) 70%, transparent);
|
|
animation: brand-version-pulse 2.4s ease-in-out infinite;
|
|
}
|
|
@keyframes brand-version-pulse {
|
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
50% { transform: scale(1.35); opacity: 0.65; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.brand-version-dot { animation: none; }
|
|
.brand-version-link { transition: none; }
|
|
}
|
|
.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;
|
|
}
|
|
.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-foreground);
|
|
background: var(--color-glass-strong);
|
|
}
|
|
|
|
/* Sidebar icon button (toggle, logout) */
|
|
.sidebar-icon-btn {
|
|
color: var(--color-muted-foreground);
|
|
background: transparent;
|
|
}
|
|
.sidebar-icon-btn:hover {
|
|
background: var(--color-glass-strong);
|
|
color: var(--color-foreground);
|
|
}
|
|
|
|
/* Nav links — soft glass hovers, gradient bar on active.
|
|
Snapped from the Aurora dashboard mockup. */
|
|
.nav-link {
|
|
color: var(--color-muted-foreground);
|
|
background: transparent;
|
|
font-weight: 450;
|
|
border-radius: 12px !important;
|
|
font-size: 13.5px;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
.nav-link:not(.active):hover {
|
|
background: var(--color-glass-strong);
|
|
color: var(--color-foreground);
|
|
}
|
|
.nav-link.active {
|
|
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-glass-elev);
|
|
}
|
|
|
|
/* Sidebar footer card */
|
|
.sidebar-foot {
|
|
padding: 0.85rem 0.85rem 1rem;
|
|
}
|
|
.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);
|
|
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);
|
|
color: var(--color-foreground);
|
|
}
|
|
.user-card__btn--danger:hover {
|
|
background: var(--color-error-bg);
|
|
color: var(--color-error-fg);
|
|
}
|
|
|
|
/* Section labels above each nav group */
|
|
.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);
|
|
padding: 0.85rem 0.85rem 0.4rem;
|
|
font-family: var(--font-mono);
|
|
}
|
|
.nav-section-label::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--color-border);
|
|
}
|
|
|
|
/* Primary action button (password form submit) */
|
|
.primary-btn {
|
|
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 {
|
|
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: 500;
|
|
padding: 0.12rem 0.45rem;
|
|
border-radius: 9999px;
|
|
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: 500;
|
|
padding: 0.06rem 0.4rem;
|
|
border-radius: 9999px;
|
|
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;
|
|
}
|
|
|
|
/* === 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(14px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(14px) saturate(150%);
|
|
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;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.topbar-search__kbd { display: none; }
|
|
}
|
|
|
|
/* 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 {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
|
|
z-index: 50;
|
|
background: var(--mobile-more-bg, rgba(19, 21, 32, 0.92));
|
|
backdrop-filter: blur(12px) saturate(150%);
|
|
-webkit-backdrop-filter: blur(12px) saturate(150%);
|
|
border-top: 1px solid var(--color-rule-strong);
|
|
padding: calc(1rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) 1rem calc(1rem + env(safe-area-inset-left, 0px));
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
:global([data-theme="light"]) .mobile-more-panel { --mobile-more-bg: rgba(250, 250, 254, 0.92); }
|
|
.mobile-more-panel a:hover,
|
|
.mobile-more-panel button:hover {
|
|
background: var(--color-glass-strong);
|
|
}
|
|
.topbar { display: none; }
|
|
}
|
|
</style>
|