feat(redesign): roll subpage hero across all pages + Aurora Button + JinjaEditor + pulse fix

Big batch — every secondary page now wears the same glass-card hero that landed on Providers earlier: - notification-trackers, tracking-configs, template-configs - command-trackers, command-configs, command-template-configs - targets (with active-tab title), actions - bots (telegram / email / matrix tabs) - settings, settings/backup, users Each page picks an italic-em emphasis word, an editorial crumb (e.g. 'Routing · Notification', 'Operators · Bots', 'System · Maintenance'), a count meter, and entity-specific status pills derived from live data: 'X armed / Y paused' for trackers and actions, 'X types' for configs/templates, 'X channels' or '$N receivers' for targets. Other changes in this commit: - Button.svelte: redesigned. Primary variant becomes a real Aurora CTA — gradient lavender → orchid pill, 40px tall md / 34px sm, inset highlight, lift + glow on hover. Secondary, danger, ghost variants reworked to match. The 'Add <Type>' button on every page now reads as the page's primary action instead of a flat lavender rectangle. - JinjaEditor: overrode oneDark's hardcoded background with !important so the editor surface picks up var(--color-input-bg). Gutters / scroller / selection / autocomplete tooltip all match Aurora glass tokens now. Template editors stop visually clashing with the surrounding panel. - Aurora pulse dot: rewritten as a self-contained box-shadow glow pulse (no transform, no pseudo-element). The dot's bounding box is now stable so ancestors with overflow:hidden can never clip the visible dot — only the (decorative) outer glow halo. Fixes the 'half-moon clipping' on the dashboard 'On watch' deck. - topbar-action.svelte.ts left in tree but unused (topbar CTA was reverted per your call). Will clean up in a later commit. - Form input baseline styling moved into app.css (rounded 0.625rem, glass background, hover/focus rings) so untouched filter inputs on the per-type pages stop looking out of place. i18n: emphasis / countLabel / armed / paused / receiver / receivers / channelsCount keys added across en + ru. Build clean: 0 errors, 61 pre-existing a11y warnings unchanged.
2026-04-25 02:52:01 +03:00
parent 9733e5c122
commit d662b50925
22 changed files with 529 additions and 76 deletions
@@ -21,10 +21,10 @@
 		class?: string;
 	} = $props();

-	const baseClasses = 'inline-flex items-center justify-center gap-1.5 rounded-md text-sm font-medium transition-colors disabled:opacity-50';
+	const baseClasses = 'aurora-btn inline-flex items-center justify-center gap-2 font-medium transition-all disabled:opacity-50 disabled:pointer-events-none';
 	const sizeClasses: Record<string, string> = {
-		sm: 'px-2.5 py-1 text-xs',
-		md: 'px-4 py-2',
+		sm: 'aurora-btn--sm',
+		md: 'aurora-btn--md',
 	};
 	const variantClasses: Record<string, string> = {
 		primary: 'btn-primary',
@@ -49,37 +49,72 @@
 {/if}

 <style>
-	.btn-primary {
-		background: var(--color-primary);
-		color: var(--color-primary-foreground);
+	.aurora-btn {
+		border-radius: 12px;
+		letter-spacing: -0.005em;
+		cursor: pointer;
+		font-family: inherit;
+		white-space: nowrap;
 	}
-	.btn-primary:hover:not(:disabled) {
-		opacity: 0.9;
+	.aurora-btn--sm {
+		padding: 0 0.95rem;
+		height: 34px;
+		font-size: 0.82rem;
+	}
+	.aurora-btn--md {
+		padding: 0 1.15rem;
+		height: 40px;
+		font-size: 0.875rem;
 	}

+	/* Primary — gradient lavender→orchid pill, the page's main CTA. */
+	.btn-primary {
+		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.35);
+		font-weight: 600;
+	}
+	.btn-primary:hover:not(:disabled) {
+		transform: translateY(-1px);
+		box-shadow:
+			0 10px 28px -10px var(--color-glow-strong),
+			inset 0 1px 0 rgba(255, 255, 255, 0.4);
+	}
+	.btn-primary:active:not(:disabled) { transform: translateY(0); }
+
 	.btn-secondary {
-		background: var(--color-muted);
+		background: var(--color-glass-strong);
 		color: var(--color-foreground);
-		border: 1px solid var(--color-border);
+		border: 1px solid var(--color-rule-strong);
 	}
 	.btn-secondary:hover:not(:disabled) {
-		opacity: 0.8;
+		background: var(--color-glass-elev);
+		border-color: var(--color-rule-strong);
 	}

 	.btn-danger {
 		background: var(--color-error-fg);
 		color: white;
+		border: 0;
+		font-weight: 600;
+		box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--color-error-fg) 50%, transparent);
 	}
 	.btn-danger:hover:not(:disabled) {
-		opacity: 0.9;
+		transform: translateY(-1px);
+		box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--color-error-fg) 60%, transparent);
 	}

 	.btn-ghost {
 		background: transparent;
 		color: var(--color-muted-foreground);
+		border: 1px solid transparent;
 	}
 	.btn-ghost:hover:not(:disabled) {
-		background: var(--color-muted);
+		background: var(--color-glass-strong);
 		color: var(--color-foreground);
+		border-color: var(--color-border);
 	}
 </style>
@@ -84,23 +84,54 @@
 				}
 			}),
 			EditorView.lineWrapping,
-			EditorView.theme({
-				'&': { fontSize: '13px', fontFamily: "'Consolas', 'Monaco', 'Courier New', monospace" },
-				'.cm-content': { minHeight: `${rows * 1.5}em`, padding: '8px' },
-				'.cm-editor': { borderRadius: '0.375rem', border: '1px solid var(--color-border)' },
-				'.cm-focused': { outline: '2px solid var(--color-primary)', outlineOffset: '0px' },
-				'.cm-error-line': { backgroundColor: 'rgba(239, 68, 68, 0.2)', outline: '1px solid rgba(239, 68, 68, 0.4)' },
-				'.ͼc': { color: '#e879f9' },
-				'.ͼd': { color: '#38bdf8' },
-				'.ͼ5': { color: '#6b7280' },
-				'.cm-tooltip-autocomplete': {
-					border: '1px solid var(--color-border)',
-					borderRadius: '0.375rem',
-					fontSize: '12px',
-				},
-			}),
 		];
+		// Apply oneDark first so its syntax-token colors are kept,
+		// then override with our Aurora-aware theme so background,
+		// borders, and gutters match the rest of the design.
 		if (isDark) extensions.push(oneDark);
+		extensions.push(EditorView.theme({
+			'&': {
+				fontSize: '13px',
+				fontFamily: 'var(--font-mono)',
+				backgroundColor: 'var(--color-input-bg) !important',
+				borderRadius: '14px',
+				border: '1px solid var(--color-rule-strong)',
+				color: 'var(--color-foreground)',
+				overflow: 'hidden',
+			},
+			'.cm-editor': { backgroundColor: 'transparent !important', borderRadius: '14px' },
+			'.cm-scroller': { backgroundColor: 'transparent !important' },
+			'.cm-content': { minHeight: `${rows * 1.5}em`, padding: '12px 14px', caretColor: 'var(--color-primary)' },
+			'.cm-gutters': {
+				backgroundColor: 'transparent',
+				color: 'var(--color-muted-foreground)',
+				borderRight: '1px solid var(--color-border)',
+			},
+			'.cm-activeLineGutter': { backgroundColor: 'var(--color-glass-strong)' },
+			'.cm-activeLine': { backgroundColor: 'var(--color-glass-strong)' },
+			'.cm-cursor': { borderLeftColor: 'var(--color-primary)' },
+			'.cm-selectionBackground, ::selection': { backgroundColor: 'var(--color-glass-elev) !important' },
+			'&.cm-focused .cm-selectionBackground': { backgroundColor: 'var(--color-glow) !important' },
+			'.cm-focused': { outline: 'none' },
+			'&.cm-focused': { borderColor: 'var(--color-primary)', boxShadow: '0 0 0 3px var(--color-glow)' },
+			'.cm-error-line': { backgroundColor: 'rgba(255, 138, 120, 0.18)', outline: '1px solid rgba(255, 138, 120, 0.4)' },
+			'.ͼc': { color: 'var(--color-orchid)' },
+			'.ͼd': { color: 'var(--color-sky)' },
+			'.ͼ5': { color: 'var(--color-muted-foreground)' },
+			'.cm-tooltip-autocomplete': {
+				background: 'color-mix(in srgb, var(--color-background) 92%, transparent)',
+				backdropFilter: 'blur(28px) saturate(160%)',
+				border: '1px solid var(--color-rule-strong)',
+				borderRadius: '12px',
+				fontSize: '12px',
+				boxShadow: '0 12px 30px -12px rgba(0,0,0,0.4)',
+				overflow: 'hidden',
+			},
+			'.cm-tooltip-autocomplete > ul > li[aria-selected]': {
+				backgroundColor: 'var(--color-glass-elev)',
+				color: 'var(--color-primary)',
+			},
+		}));
 		if (placeholder) extensions.push(cmPlaceholder(placeholder));
 		return extensions;
 	}
@@ -231,7 +231,10 @@
 		"cleared": "Payload history cleared"
 	},
 	"notificationTracker": {
-		"title": "Notification Trackers",
+		"title": "Notification",
+		"titleEmphasis": "trackers",
+		"armed": "armed",
+		"paused": "paused",
 		"description": "Monitor albums for changes",
 		"newTracker": "New Tracker",
 		"cancel": "Cancel",
@@ -343,6 +346,11 @@
 		"albumDeleted": "Album deleted"
 	},
 	"targets": {
+		"titleEmphasis": "channel",
+		"titleEmphasisAll": "channels",
+		"receiver": "receiver",
+		"receivers": "receivers",
+		"channelsCount": "channels",
 		"title": "Targets",
 		"description": "Notification delivery destinations",
 		"descTelegram": "Telegram chat destinations for notifications",
@@ -411,6 +419,8 @@
 		"receiverDisabled": "Receiver disabled"
 	},
 	"users": {
+		"titleEmphasis": "& access",
+		"countLabel": "users",
 		"title": "Users",
 		"description": "Manage user accounts (admin only)",
 		"addUser": "Add User",
@@ -428,6 +438,8 @@
 		"noUsers": "No users found"
 	},
 	"telegramBot": {
+		"titleEmphasis": "telegram",
+		"countLabel": "bots",
 		"title": "Telegram Bots",
 		"description": "Register and manage Telegram bots",
 		"addBot": "Add Bot",
@@ -504,6 +516,8 @@
 		"webhookFailed": "Failed to register webhook"
 	},
 	"trackingConfig": {
+		"titleEmphasis": "configs",
+		"countLabel": "configs",
 		"title": "Tracking Configs",
 		"description": "Define what events and assets to react to",
 		"newConfig": "New Config",
@@ -609,6 +623,8 @@
 		"nextDay": "next day"
 	},
 	"templateConfig": {
+		"titleEmphasis": "templates",
+		"countLabel": "templates",
 		"title": "Template Configs",
 		"description": "Define how notification messages are formatted",
 		"providerType": "Service Provider Type",
@@ -728,6 +744,7 @@
 		"album_shared": "Whether album is shared"
 	},
 	"settings": {
+		"titleEmphasis": "options",
 		"title": "Settings",
 		"description": "Global application settings",
 		"general": "General",
@@ -804,6 +821,8 @@
 		"rateLimits": "Cooldown in seconds between uses of each command category per chat. 0 = no limit."
 	},
 	"matrixBot": {
+		"titleEmphasis": "matrix",
+		"countLabel": "bots",
 		"title": "Matrix Bots",
 		"description": "Matrix homeserver connections for room notifications",
 		"addBot": "Add Matrix Bot",
@@ -820,6 +839,8 @@
 		"operationFailed": "Operation failed"
 	},
 	"emailBot": {
+		"titleEmphasis": "email",
+		"countLabel": "accounts",
 		"title": "Email Bots",
 		"description": "SMTP email senders for notifications",
 		"addBot": "Add Email Bot",
@@ -839,6 +860,8 @@
 		"operationFailed": "Operation failed"
 	},
 	"cmdTemplateConfig": {
+		"titleEmphasis": "templates",
+		"countLabel": "templates",
 		"title": "Command Templates",
 		"description": "Customize command response messages with Jinja2 templates",
 		"newConfig": "New Config",
@@ -851,6 +874,8 @@
 		"commandResponsesHint": "Leave a slot empty to use the default hardcoded response."
 	},
 	"commandConfig": {
+		"titleEmphasis": "configs",
+		"countLabel": "configs",
 		"title": "Command Configs",
 		"description": "Define command settings for Telegram bot interactions",
 		"newConfig": "New Config",
@@ -873,6 +898,7 @@
 		"noTemplate": "Default (hardcoded)"
 	},
 	"commandTracker": {
+		"titleEmphasis": "trackers",
 		"title": "Command Trackers",
 		"description": "Manage command trackers and their listeners",
 		"newTracker": "New Tracker",
@@ -1155,6 +1181,8 @@
 		"close": "close"
 	},
 	"actions": {
+		"titleEmphasis": "automations",
+		"countLabel": "actions",
 		"title": "Actions",
 		"description": "Scheduled mutations on external services",
 		"addAction": "Add Action",
@@ -1212,6 +1240,7 @@
 		"triggerScheduled": "scheduled"
 	},
 	"backup": {
+		"titleEmphasis": "& restore",
 		"title": "Backup & Restore",
 		"description": "Export and import your configuration, or set up automatic backups",
 		"export": "Export Configuration",
@@ -231,6 +231,9 @@
 		"cleared": "История запросов очищена"
 	},
 	"notificationTracker": {
+		"titleEmphasis": "трекеры",
+		"armed": "активны",
+		"paused": "на паузе",
 		"title": "Трекеры уведомлений",
 		"description": "Отслеживание изменений в альбомах",
 		"newTracker": "Новый трекер",
@@ -343,6 +346,11 @@
 		"albumDeleted": "Альбом удалён"
 	},
 	"targets": {
+		"titleEmphasis": "канал",
+		"titleEmphasisAll": "каналы",
+		"receiver": "получатель",
+		"receivers": "получателей",
+		"channelsCount": "каналов",
 		"title": "Получатели",
 		"description": "Адреса доставки уведомлений",
 		"descTelegram": "Чаты Telegram для доставки уведомлений",
@@ -411,6 +419,8 @@
 		"receiverDisabled": "Получатель отключён"
 	},
 	"users": {
+		"titleEmphasis": "и доступ",
+		"countLabel": "пользователей",
 		"title": "Пользователи",
 		"description": "Управление аккаунтами (только админ)",
 		"addUser": "Добавить пользователя",
@@ -428,6 +438,8 @@
 		"noUsers": "Пользователи не найдены"
 	},
 	"telegramBot": {
+		"titleEmphasis": "telegram",
+		"countLabel": "ботов",
 		"title": "Telegram боты",
 		"description": "Регистрация и управление Telegram ботами",
 		"addBot": "Добавить бота",
@@ -504,6 +516,8 @@
 		"webhookFailed": "Не удалось зарегистрировать webhook"
 	},
 	"trackingConfig": {
+		"titleEmphasis": "конфигурации",
+		"countLabel": "конфигураций",
 		"title": "Конфигурации отслеживания",
 		"description": "Определите, на какие события и файлы реагировать",
 		"newConfig": "Новая конфигурация",
@@ -609,6 +623,8 @@
 		"nextDay": "след. день"
 	},
 	"templateConfig": {
+		"titleEmphasis": "шаблоны",
+		"countLabel": "шаблонов",
 		"title": "Конфигурации шаблонов",
 		"description": "Определите формат уведомлений",
 		"providerType": "Тип сервис-провайдера",
@@ -728,6 +744,7 @@
 		"album_shared": "Общий альбом"
 	},
 	"settings": {
+		"titleEmphasis": "параметры",
 		"title": "Настройки",
 		"description": "Глобальные настройки приложения",
 		"general": "Общие",
@@ -804,6 +821,8 @@
 		"rateLimits": "Кулдаун в секундах между использованиями команд в каждом чате. 0 = без ограничений."
 	},
 	"matrixBot": {
+		"titleEmphasis": "matrix",
+		"countLabel": "ботов",
 		"title": "Matrix боты",
 		"description": "Подключения к Matrix серверам для уведомлений в комнаты",
 		"addBot": "Добавить Matrix бот",
@@ -820,6 +839,8 @@
 		"operationFailed": "Операция не удалась"
 	},
 	"emailBot": {
+		"titleEmphasis": "email",
+		"countLabel": "учётных записей",
 		"title": "Email боты",
 		"description": "SMTP отправители для уведомлений по email",
 		"addBot": "Добавить Email бот",
@@ -839,6 +860,8 @@
 		"operationFailed": "Операция не удалась"
 	},
 	"cmdTemplateConfig": {
+		"titleEmphasis": "шаблоны",
+		"countLabel": "шаблонов",
 		"title": "Шаблоны команд",
 		"description": "Настройте ответы команд с помощью Jinja2 шаблонов",
 		"newConfig": "Новый шаблон",
@@ -851,6 +874,8 @@
 		"commandResponsesHint": "Оставьте слот пустым, чтобы использовать ответ по умолчанию."
 	},
 	"commandConfig": {
+		"titleEmphasis": "конфигурации",
+		"countLabel": "конфигураций",
 		"title": "Конфигурации команд",
 		"description": "Настройки команд для взаимодействия с Telegram-ботами",
 		"newConfig": "Новая конфигурация",
@@ -873,6 +898,7 @@
 		"noTemplate": "По умолчанию (встроенный)"
 	},
 	"commandTracker": {
+		"titleEmphasis": "трекеры",
 		"title": "Трекеры команд",
 		"description": "Управление трекерами команд и их слушателями",
 		"newTracker": "Новый трекер",
@@ -1155,6 +1181,8 @@
 		"close": "закрыть"
 	},
 	"actions": {
+		"titleEmphasis": "автоматизации",
+		"countLabel": "действий",
 		"title": "Действия",
 		"description": "Запланированные операции над внешними сервисами",
 		"addAction": "Добавить действие",
@@ -1212,6 +1240,7 @@
 		"triggerScheduled": "по расписанию"
 	},
 	"backup": {
+		"titleEmphasis": "и восстановление",
 		"title": "Резервное копирование",
 		"description": "Экспорт и импорт конфигурации, настройка автоматических бэкапов",
 		"export": "Экспорт конфигурации",
@@ -0,0 +1,35 @@
+/**
+ * Page-scoped primary action for the global topbar CTA.
+ *
+ * Each route declares its own primary action ("Add Provider",
+ * "New Tracker", etc.) by calling `topbarAction.set({...})`
+ * inside its `onMount`, and clears it on teardown. The layout
+ * reads `topbarAction.current` and renders the button.
+ *
+ * Falls back to the default "New tracker" CTA when no action is
+ * registered (set by the layout itself).
+ */
+export interface TopbarAction {
+	/** Visible label, e.g. "Add Provider". */
+	label: string;
+	/** Optional href — renders as <a>. Mutually exclusive with onclick. */
+	href?: string;
+	/** Optional click handler — renders as <button>. */
+	onclick?: () => void;
+	/** Optional MDI/NavIcon name for the leading glyph (default: mdiPlus). */
+	icon?: string;
+}
+
+let action = $state<TopbarAction | null>(null);
+
+export const topbarAction = {
+	get current(): TopbarAction | null {
+		return action;
+	},
+	set(next: TopbarAction | null) {
+		action = next;
+	},
+	clear() {
+		action = null;
+	},
+};