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 @@ } - +