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

feat(redesign): subpage hero header + iconpicker portal + tighter gaps

Browse Source 
Three threads bundled:

- PageHeader.svelte upgraded to a glass-card subpage hero matching
  the dashboard hero language, scaled down. New optional props (all
  backward-compatible — old callers keep working): emphasis (italic
  gradient word appended to title), crumb (uppercase mono kicker),
  count + countLabel (right-side mono meter), pills (status chips
  with tones: mint / sky / orchid / coral / citrus / primary).
- Providers page wired up first as the test surface: pulls live
  online/offline/checking counts from the existing health probe and
  shows a type-count pill. Locale keys added (en + ru) for the new
  copy ('Service / providers' wordmark, longer description).
- IconPicker dropdown was suffering the same backdrop-filter
  containing-block bug as IconGridSelect — repositioned popups
  rendered inside any glass form panel got clipped or floated to
  the bottom of the page. Now portals to <body> via the shared
  $lib/portal action and uses Aurora glass styling end-to-end
  (solid surface, gradient-active cell, glass-strong search input).
- Layout gaps tightened to match the mockup:
    * sidebar→content horizontal gap is now 18px flat (was 50px:
      the 18px shell-gap PLUS another 32px wrapper padding on each
      child of main). Dropped px-4/md:px-8 from the topbar wrapper
      and the per-page content wrapper — main's children sit flush
      at the column boundary.
    * topbar→content vertical gap reduced to 12px (was 16px / pt-4).

Build clean, 0 errors.
This commit is contained in:
Admin
2026-04-25 02:15:34 +03:00
parent 46a4a6ee29
commit 9733e5c122
6 changed files with 378 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/IconPicker.svelte
+152 -22
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { getMdiPath, getAllMdiNames } from '$lib/mdi-lookup.svelte';
import { portal } from '$lib/portal';
let { value = '', onselect } = $props<{
value: string;
@@ -34,7 +35,14 @@
function toggleOpen() {
if (!open && buttonEl) {
const rect = buttonEl.getBoundingClientRect();
dropdownStyle = `position:fixed; z-index:9999; top:${rect.bottom + 4}px; left:${rect.left}px;`;
const popupWidth = 320; // 20rem
const popupHeight = 320;
const spaceBelow = window.innerHeight - rect.bottom;
const top = spaceBelow > popupHeight + 16
? rect.bottom + 4
: Math.max(8, rect.top - popupHeight - 4);
const left = Math.min(rect.left, window.innerWidth - popupWidth - 16);
dropdownStyle = `position:fixed; z-index:9999; top:${top}px; left:${Math.max(8, left)}px;`;
}
open = !open;
if (!open) search = '';
@@ -58,36 +66,158 @@
<div class="inline-block">
<button type="button" bind:this={buttonEl} onclick={toggleOpen}
class="flex items-center justify-center gap-1 px-2 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)] hover:bg-[var(--color-muted)] transition-colors">
class="icon-picker-trigger">
{#if value && getMdiPath(value)}
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d={getMdiPath(value)} /></svg>
{:else}
<span class="text-[var(--color-muted-foreground)] text-xs">Icon</span>
<span class="icon-picker-placeholder">Icon</span>
{/if}
<span class="text-xs text-[var(--color-muted-foreground)]">▼</span>
<span class="icon-picker-caret">▾</span>
</button>
</div>
{#if open}
<div style="position:fixed; top:0; left:0; right:0; bottom:0; z-index:9998;"
role="presentation"
onclick={() => { open = false; search = ''; }}></div>
<!-- Portal popup so it escapes any backdrop-filter / transform ancestor
that would otherwise act as the containing block for position:fixed. -->
<div use:portal class="ip-portal-root">
<div class="ip-backdrop"
role="presentation"
onclick={() => { open = false; search = ''; }}></div>
<div style="{dropdownStyle} width: 20rem; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.3); padding: 0.75rem;"
class="">
<input type="text" bind:value={search} placeholder="Search icons..."
class="w-full px-2 py-1 mb-2 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" />
<div style="display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.25rem; max-height: 14rem; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;">
<button type="button" onclick={() => select('')}
class="flex items-center justify-center aspect-square rounded hover:bg-[var(--color-muted)] text-xs text-[var(--color-muted-foreground)]"
title="No icon">✕</button>
{#each filtered as iconName}
<button type="button" onclick={() => select(iconName)}
class="flex items-center justify-center aspect-square rounded hover:bg-[var(--color-muted)] {value === iconName ? 'bg-[var(--color-accent)]' : ''}"
title={iconName.replace('mdi', '')}>
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d={getMdiPath(iconName)} /></svg>
</button>
{/each}
<div style={dropdownStyle} class="ip-popup">
<input type="text" bind:value={search} placeholder="Search icons..."
class="ip-search" autocomplete="off" />
<div class="ip-grid">
<button type="button" onclick={() => select('')}
class="ip-cell ip-cell--clear"
title="No icon">✕</button>
{#each filtered as iconName}
<button type="button" onclick={() => select(iconName)}
class="ip-cell {value === iconName ? 'is-active' : ''}"
title={iconName.replace('mdi', '')}>
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d={getMdiPath(iconName)} /></svg>
</button>
{/each}
</div>
</div>
</div>
{/if}
<style>
.icon-picker-trigger {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.7rem;
border-radius: 0.625rem;
border: 1px solid var(--color-border);
background: var(--color-input-bg);
color: var(--color-foreground);
font-size: 0.85rem;
font-family: inherit;
cursor: pointer;
transition: all 0.15s;
}
.icon-picker-trigger:hover {
background: var(--color-glass-strong);
border-color: var(--color-rule-strong);
}
.icon-picker-placeholder {
color: var(--color-muted-foreground);
font-size: 0.78rem;
}
.icon-picker-caret {
color: var(--color-muted-foreground);
font-size: 0.7rem;
}
/* Portal root — drains the popup out of any backdrop-filter ancestor */
.ip-portal-root {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
}
.ip-backdrop {
position: absolute;
inset: 0;
pointer-events: auto;
}
.ip-popup {
pointer-events: auto;
width: 20rem;
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.65rem;
position: relative;
}
.ip-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;
}
.ip-search {
width: 100%;
padding: 0.45rem 0.6rem;
margin-bottom: 0.5rem;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-glass-strong);
color: var(--color-foreground);
font-size: 0.82rem;
outline: none;
font-family: inherit;
position: relative;
z-index: 1;
}
.ip-search:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-glow);
}
.ip-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 0.25rem;
max-height: 14rem;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
position: relative;
z-index: 1;
}
.ip-cell {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
color: var(--color-foreground);
cursor: pointer;
transition: all 0.15s;
}
.ip-cell:hover {
background: var(--color-glass-strong);
border-color: var(--color-border);
}
.ip-cell.is-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);
color: var(--color-primary);
box-shadow: inset 0 1px 0 var(--color-highlight);
}
.ip-cell--clear {
color: var(--color-muted-foreground);
font-size: 0.75rem;
}
</style>
frontend/src/lib/components/PageHeader.svelte
+191 -23
View File
@@ -1,51 +1,219 @@
<script lang="ts">
import type { Snippet } from 'svelte';
export interface HeaderPill {
label: string;
tone?: 'mint' | 'sky' | 'orchid' | 'coral' | 'citrus' | 'primary';
icon?: string;
}
interface Props {
title: string;
/** Italic-emphasized word(s) appended to the title with a gradient. */
emphasis?: string;
/** Body text under the title. */
description?: string;
/** Small label above the title (breadcrumb / section). */
crumb?: string;
/** Right-side count meter — e.g. "12 providers". */
count?: number | string;
/** Label under the count, e.g. "providers". */
countLabel?: string;
/** Status pills shown beneath the description. */
pills?: HeaderPill[];
/** Primary actions (buttons) — rendered top-right next to the meter. */
children?: Snippet;
}
let { title, description = '', children }: Props = $props();
let {
title,
emphasis = '',
description = '',
crumb = '',
count,
countLabel = '',
pills = [],
children,
}: Props = $props();
const toneColors: Record<NonNullable<HeaderPill['tone']>, string> = {
mint: 'var(--color-mint)',
sky: 'var(--color-sky)',
orchid: 'var(--color-orchid)',
coral: 'var(--color-coral)',
citrus: 'var(--color-citrus)',
primary: 'var(--color-primary)',
};
</script>
<div class="page-header">
<div class="animate-fade-slide-in">
<h2 class="page-header__title">{title}</h2>
{#if description}
<p class="page-header__desc">{description}</p>
{/if}
</div>
{#if children}
<div class="animate-fade-slide-in" style="animation-delay: 60ms;">
{@render children()}
<section class="subpage-hero">
<div class="subpage-hero__row">
<div class="subpage-hero__main">
{#if crumb}
<div class="subpage-hero__crumb">{crumb}</div>
{/if}
<h2 class="subpage-hero__title">
{title}{#if emphasis}&nbsp;<em>{emphasis}</em>{/if}
</h2>
{#if description}
<p class="subpage-hero__sub">{description}</p>
{/if}
{#if pills.length > 0}
<div class="subpage-hero__pills">
{#each pills as p}
<span class="subpage-hero__pill">
<span class="subpage-hero__pill-dot" style="background: {toneColors[p.tone ?? 'primary']}"></span>
{p.label}
</span>
{/each}
</div>
{/if}
</div>
{/if}
</div>
<div class="subpage-hero__side">
{#if count !== undefined}
<div class="subpage-hero__meter">
<div class="subpage-hero__meter-value font-mono">{count}</div>
{#if countLabel}
<div class="subpage-hero__meter-label">{countLabel}</div>
{/if}
</div>
{/if}
{#if children}
<div class="subpage-hero__actions">{@render children()}</div>
{/if}
</div>
</div>
</section>
<style>
.page-header {
.subpage-hero {
position: relative;
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);
padding: 1.4rem 1.6rem 1.5rem;
margin-bottom: 1.5rem;
overflow: hidden;
}
.subpage-hero::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
opacity: 0.4;
}
.subpage-hero__row {
position: relative;
z-index: 1;
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 2rem;
gap: 1rem;
gap: 1.5rem;
flex-wrap: wrap;
}
.page-header__title {
.subpage-hero__main { min-width: 0; flex: 1; }
.subpage-hero__crumb {
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--color-muted-foreground);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 0.55rem;
font-weight: 500;
}
.subpage-hero__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 2.25rem;
letter-spacing: -0.025em;
font-size: 2.15rem;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--color-foreground);
margin: 0;
}
.page-header__desc {
font-size: 0.9rem;
.subpage-hero__title em {
font-style: italic;
background: linear-gradient(135deg, var(--color-orchid), var(--color-primary) 60%, var(--color-sky));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.subpage-hero__sub {
font-size: 0.88rem;
color: var(--color-muted-foreground);
margin: 0.55rem 0 0;
line-height: 1.55;
max-width: 60ch;
}
.subpage-hero__pills {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.85rem;
}
.subpage-hero__pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.22rem 0.65rem;
border-radius: 999px;
background: var(--color-glass-strong);
border: 1px solid var(--color-border);
font-size: 0.7rem;
color: var(--color-muted-foreground);
font-weight: 500;
}
.subpage-hero__pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.subpage-hero__side {
display: flex;
align-items: center;
gap: 1.25rem;
flex-shrink: 0;
}
.subpage-hero__meter {
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
}
.subpage-hero__meter-value {
font-size: 2.15rem;
font-weight: 500;
color: var(--color-foreground);
font-variant-numeric: tabular-nums;
line-height: 1;
letter-spacing: -0.025em;
}
.subpage-hero__meter-label {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--color-muted-foreground);
margin-top: 0.4rem;
line-height: 1.5;
font-weight: 500;
}
.subpage-hero__actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
@media (max-width: 640px) {
.subpage-hero { padding: 1.1rem 1.2rem 1.25rem; }
.subpage-hero__title { font-size: 1.7rem; }
.subpage-hero__row { flex-direction: column; align-items: stretch; }
.subpage-hero__side { justify-content: space-between; }
}
</style>
frontend/src/lib/i18n/en.json
+5 -2
View File
@@ -142,8 +142,11 @@
"eventsTotal": "Events"
},
"providers": {
"title": "Providers",
"description": "Manage service provider connections",
"title": "Service",
"titleEmphasis": "providers",
"description": "Connect to external services and webhooks. Each provider feeds events into trackers, which dispatch notifications across your channels.",
"typeSingular": "type",
"typePlural": "types",
"addProvider": "Add Provider",
"cancel": "Cancel",
"type": "Provider Type",
frontend/src/lib/i18n/ru.json
+5 -2
View File
@@ -142,8 +142,11 @@
"eventsTotal": "Событий"
},
"providers": {
"title": "Провайдеры",
"description": "Управление подключениями к сервисам",
"title": "Сервисные",
"titleEmphasis": "провайдеры",
"description": "Подключения к внешним сервисам и вебхукам. Каждый провайдер кормит трекеры событиями, которые рассылаются по вашим каналам.",
"typeSingular": "тип",
"typePlural": "типов",
"addProvider": "Добавить провайдер",
"cancel": "Отмена",
"type": "Тип провайдера",
frontend/src/routes/+layout.svelte
+2 -2
View File
@@ -607,7 +607,7 @@
style="padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));">
<!-- Always-visible topbar — search + utilities + primary CTA -->
<div class="topbar px-4 md:px-8">
<div class="topbar">
<div class="topbar-glass">
<button type="button" class="topbar-search" onclick={() => openSearch?.()}>
<NavIcon name="mdiMagnify" size={16} />
@@ -630,7 +630,7 @@
</div>
{#key page.url.pathname}
<div class="px-4 md:px-8 pb-4 md:pb-8 pt-4" in:fade={{ duration: 200, delay: 50 }}>
<div class="pb-4 md:pb-8" style="padding-top: 12px;" in:fade={{ duration: 200, delay: 50 }}>
{@render children()}
</div>
{/key}
frontend/src/routes/providers/+page.svelte
+23 -1
View File
@@ -54,6 +54,20 @@
let health = $state<Record<number, boolean | null>>({});
// Status pill row for the page header — derived from health probes.
const headerPills = $derived.by(() => {
const onlineCount = Object.values(health).filter(v => v === true).length;
const offlineCount = Object.values(health).filter(v => v === false).length;
const checkingCount = Math.max(0, providers.length - onlineCount - offlineCount);
const typeCount = new Set(providers.map(p => p.type)).size;
const pills: Array<{ label: string; tone: 'mint' | 'sky' | 'coral' | 'citrus' }> = [];
if (onlineCount > 0) pills.push({ label: `${onlineCount} ${t('providers.online')}`, tone: 'mint' });
if (offlineCount > 0) pills.push({ label: `${offlineCount} ${t('providers.offline')}`, tone: 'coral' });
if (checkingCount > 0 && providers.length > 0) pills.push({ label: `${checkingCount} ${t('providers.checking')}`, tone: 'citrus' });
if (typeCount > 0) pills.push({ label: `${typeCount} ${typeCount === 1 ? t('providers.typeSingular') : t('providers.typePlural')}`, tone: 'sky' });
return pills;
});
onMount(load);
async function load() {
try {
@@ -146,7 +160,15 @@
}
</script>
<PageHeader title={t('providers.title')} description={t('providers.description')}>
<PageHeader
title={t('providers.title')}
emphasis={t('providers.titleEmphasis')}
description={t('providers.description')}
crumb="Service · Connections"
count={providers.length}
countLabel={t('dashboard.providersShort')}
pills={headerPills}
>
<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
{showForm ? t('providers.cancel') : t('providers.addProvider')}
</Button>