From 9733e5c122b37f24ba93d954831a06d0ae1cf741 Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Sat, 25 Apr 2026 02:15:34 +0300 Subject: [PATCH] feat(redesign): subpage hero header + iconpicker portal + tighter gaps MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 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. --- frontend/src/lib/components/IconPicker.svelte | 174 ++++++++++++-- frontend/src/lib/components/PageHeader.svelte | 214 ++++++++++++++++-- frontend/src/lib/i18n/en.json | 7 +- frontend/src/lib/i18n/ru.json | 7 +- frontend/src/routes/+layout.svelte | 4 +- frontend/src/routes/providers/+page.svelte | 24 +- 6 files changed, 378 insertions(+), 52 deletions(-) diff --git a/frontend/src/lib/components/IconPicker.svelte b/frontend/src/lib/components/IconPicker.svelte index d2c2ee3..fb15921 100644 --- a/frontend/src/lib/components/IconPicker.svelte +++ b/frontend/src/lib/components/IconPicker.svelte @@ -1,5 +1,6 @@ -
-
-

{title}

- {#if description} -

{description}

- {/if} -
- {#if children} -
- {@render children()} +
+
+
+ {#if crumb} +
{crumb}
+ {/if} +

+ {title}{#if emphasis} {emphasis}{/if} +

+ {#if description} +

{description}

+ {/if} + {#if pills.length > 0} +
+ {#each pills as p} + + + {p.label} + + {/each} +
+ {/if}
- {/if} -
+ +
+ {#if count !== undefined} +
+
{count}
+ {#if countLabel} +
{countLabel}
+ {/if} +
+ {/if} + {#if children} +
{@render children()}
+ {/if} +
+
+ diff --git a/frontend/src/lib/i18n/en.json b/frontend/src/lib/i18n/en.json index 5ae745c..4f03743 100644 --- a/frontend/src/lib/i18n/en.json +++ b/frontend/src/lib/i18n/en.json @@ -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", diff --git a/frontend/src/lib/i18n/ru.json b/frontend/src/lib/i18n/ru.json index bed9d62..ad86c1f 100644 --- a/frontend/src/lib/i18n/ru.json +++ b/frontend/src/lib/i18n/ru.json @@ -142,8 +142,11 @@ "eventsTotal": "Событий" }, "providers": { - "title": "Провайдеры", - "description": "Управление подключениями к сервисам", + "title": "Сервисные", + "titleEmphasis": "провайдеры", + "description": "Подключения к внешним сервисам и вебхукам. Каждый провайдер кормит трекеры событиями, которые рассылаются по вашим каналам.", + "typeSingular": "тип", + "typePlural": "типов", "addProvider": "Добавить провайдер", "cancel": "Отмена", "type": "Тип провайдера", diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 259c087..f668cc0 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -607,7 +607,7 @@ style="padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));"> -
+
{#key page.url.pathname} -
+
{@render children()}
{/key} diff --git a/frontend/src/routes/providers/+page.svelte b/frontend/src/routes/providers/+page.svelte index 8be25f5..522efdb 100644 --- a/frontend/src/routes/providers/+page.svelte +++ b/frontend/src/routes/providers/+page.svelte @@ -54,6 +54,20 @@ let health = $state>({}); + // 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 @@ } - +