feat: card highlight system for cross-entity navigation

When clicking a CrossLink, the target entity ID is passed as
?highlight=<id> in the URL. The destination page:
1. Shows a semi-transparent dim overlay (z-index: 10)
2. Finds the card with data-entity-id matching the ID
3. Scrolls to it smoothly (block: center)
4. Applies a pulsing primary-color box-shadow animation (z-index: 11)
5. Cleans up overlay + animation after 2 seconds

If the card isn't in DOM yet (data still loading), a MutationObserver
waits up to 5 seconds for it to appear.

Changes:
- New highlight.ts utility with highlightFromUrl(), MutationObserver,
  dim overlay management
- Card component accepts entityId prop → data-entity-id attribute
- CrossLink accepts entityId prop → appends ?highlight=<id> to href
- All 9 entity pages: Card elements have entityId, highlightFromUrl()
  called after data loads
- CSS: cardHighlight keyframe animation + nav-dim-overlay styles

frontend/src/app.css

@@ -183,3 +183,29 @@ a:focus-visible {
 .font-mono {
 	font-family: var(--font-mono);
 }
+
+/* Card highlight for cross-entity navigation */
+@keyframes cardHighlight {
+	0%, 100% { box-shadow: none; }
+	25%, 75% { box-shadow: 0 0 0 3px var(--color-primary), 0 0 20px color-mix(in srgb, var(--color-primary) 30%, transparent); }
+}
+
+.card-highlight {
+	animation: cardHighlight 2s ease-in-out;
+	position: relative;
+	z-index: 11;
+}
+
+.nav-dim-overlay {
+	position: fixed;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.4);
+	z-index: 10;
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity 0.3s ease-in-out;
+}
+
+.nav-dim-overlay.active {
+	opacity: 1;
+}

frontend/src/lib/components/Card.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	let { children, class: className = '', hover = false, entityId = undefined, ...rest } = $props<{
+		children: import('svelte').Snippet;
+		class?: string;
+		hover?: boolean;
+		entityId?: number | string;
+		[key: string]: any;
+	}>();
+</script>
+
+<div
+	class="card-component {hover ? 'card-hover' : ''} {className}"
+	style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 1.25rem;"
+	data-entity-id={entityId}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	.card-component {
+		transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+	}
+
+	.card-hover:hover {
+		border-color: var(--color-primary);
+		box-shadow: 0 4px 16px var(--color-glow), 0 0 0 1px var(--color-glow);
+		transform: translateY(-2px);
+	}
+</style>

frontend/src/lib/components/CrossLink.svelte

@@ -6,22 +6,30 @@
 		href,
 		icon = 'mdiLink',
 		label,
+		entityId = null,
 		title = '',
 	}: {
 		href: string;
 		icon?: string;
 		label: string;
+		entityId?: number | string | null;
 		title?: string;
 	} = $props();
 
+	const targetHref = $derived(
+		entityId != null
+			? `${href.split('?')[0]}?highlight=${entityId}${href.includes('?') ? '&' + href.split('?')[1] : ''}`
+			: href
+	);
+
 	function navigate(e: MouseEvent) {
 		e.preventDefault();
 		e.stopPropagation();
-		goto(href);
+		goto(targetHref);
 	}
 </script>
 
-<a {href} class="crosslink" title={title || label} onclick={navigate}>
+<a href={targetHref} class="crosslink" title={title || label} onclick={navigate}>
 	<MdiIcon name={icon} size={12} />
 	<span>{label}</span>
 </a>

frontend/src/lib/highlight.ts

@@ -0,0 +1,93 @@
+/**
+ * Card highlight system for cross-entity navigation.
+ *
+ * When navigating via CrossLink, the target entity ID is passed as ?highlight=<id>.
+ * The destination page calls highlightFromUrl() on mount, which:
+ * 1. Shows a dim overlay behind everything
+ * 2. Finds the card with [data-entity-id="<id>"]
+ * 3. Scrolls to it smoothly
+ * 4. Applies a pulsing box-shadow animation
+ * 5. Cleans up after 2 seconds
+ *
+ * If the card isn't in the DOM yet (data still loading), a MutationObserver
+ * waits up to 5 seconds for it to appear.
+ */
+
+const HIGHLIGHT_DURATION = 2000;
+const WAIT_TIMEOUT = 5000;
+
+/** Show dim overlay, find card, scroll & highlight. Call from onMount or $effect. */
+export function highlightFromUrl(): void {
+	if (typeof window === 'undefined') return;
+	const params = new URLSearchParams(window.location.search);
+	const id = params.get('highlight');
+	if (!id) return;
+
+	// Clean the URL immediately (remove highlight param, keep others)
+	params.delete('highlight');
+	const qs = params.toString();
+	const cleanUrl = window.location.pathname + (qs ? '?' + qs : '');
+	window.history.replaceState(null, '', cleanUrl);
+
+	// Try to find the card now, or wait for it
+	const card = document.querySelector(`[data-entity-id="${id}"]`);
+	if (card) {
+		_highlightCard(card as HTMLElement);
+	} else {
+		_waitForCard(id);
+	}
+}
+
+function _highlightCard(card: HTMLElement): void {
+	// Show dim overlay
+	const overlay = _showDimOverlay();
+
+	// Scroll to card
+	card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+	// Apply highlight
+	card.classList.add('card-highlight');
+
+	// Cleanup after duration
+	setTimeout(() => {
+		card.classList.remove('card-highlight');
+		overlay.classList.remove('active');
+		setTimeout(() => overlay.remove(), 300); // wait for fade-out
+	}, HIGHLIGHT_DURATION);
+}
+
+function _showDimOverlay(): HTMLElement {
+	// Reuse existing overlay if present
+	let overlay = document.querySelector('.nav-dim-overlay') as HTMLElement | null;
+	if (!overlay) {
+		overlay = document.createElement('div');
+		overlay.className = 'nav-dim-overlay';
+		document.body.appendChild(overlay);
+	}
+	// Force reflow then activate
+	void overlay.offsetHeight;
+	overlay.classList.add('active');
+	return overlay;
+}
+
+function _waitForCard(id: string): void {
+	const start = Date.now();
+
+	const observer = new MutationObserver(() => {
+		const card = document.querySelector(`[data-entity-id="${id}"]`);
+		if (card) {
+			observer.disconnect();
+			// Small delay for layout to settle
+			requestAnimationFrame(() => _highlightCard(card as HTMLElement));
+			return;
+		}
+		if (Date.now() - start > WAIT_TIMEOUT) {
+			observer.disconnect();
+		}
+	});
+
+	observer.observe(document.body, { childList: true, subtree: true });
+
+	// Safety timeout
+	setTimeout(() => observer.disconnect(), WAIT_TIMEOUT);
+}

frontend/src/routes/command-configs/+page.svelte

@@ -13,6 +13,7 @@
 	import IconButton from '$lib/components/IconButton.svelte';
 	import CrossLink from '$lib/components/CrossLink.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
+	import { highlightFromUrl } from '$lib/highlight';
 
 	function templateName(id: number | null): string {
 		if (!id) return '';
@@ -67,7 +68,7 @@
 				commandTemplateConfigsCache.fetch(),
 			]);
 		} catch (err: any) { error = err.message || t('common.loadError'); snackError(error); }
-		finally { loaded = true; }
+		finally { loaded = true; highlightFromUrl(); }
 	}
 
 	function openNew() {
@@ -238,7 +239,7 @@
 {:else}
 	<div class="space-y-3 stagger-children">
 		{#each configs as cfg}
-			<Card hover>
+			<Card hover entityId={cfg.id}>
 				<div class="flex items-center justify-between">
 					<div>
 						<div class="flex items-center gap-2">
@@ -256,7 +257,7 @@
 								&middot; {t('commandConfig.defaultCount')}: {cfg.default_count}
 							</span>
 							{#if cfg.command_template_config_id}
-								<CrossLink href="/command-template-configs" icon="mdiCodeBracesBox" label={templateName(cfg.command_template_config_id)} />
+								<CrossLink href="/command-template-configs" icon="mdiCodeBracesBox" label={templateName(cfg.command_template_config_id)} entityId={cfg.command_template_config_id} />
 							{/if}
 						</div>
 					</div>

frontend/src/routes/command-template-configs/+page.svelte

@@ -15,6 +15,7 @@
 	import Modal from '$lib/components/Modal.svelte';
 	import JinjaEditor from '$lib/components/JinjaEditor.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
+	import { highlightFromUrl } from '$lib/highlight';
 
 	interface CmdTemplateConfig {
 		id: number;
@@ -79,6 +80,7 @@
 			snackError(error);
 		} finally {
 			loaded = true;
+			highlightFromUrl();
 		}
 	}
 
@@ -295,7 +297,7 @@
 {:else}
 	<div class="space-y-3 stagger-children">
 		{#each configs as config}
-			<Card hover>
+			<Card hover entityId={config.id}>
 				<div class="flex items-start justify-between">
 					<div class="flex-1">
 						<div class="flex items-center gap-2">

frontend/src/routes/command-trackers/+page.svelte

@@ -14,6 +14,7 @@
 	import IconButton from '$lib/components/IconButton.svelte';
 	import CrossLink from '$lib/components/CrossLink.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
+	import { highlightFromUrl } from '$lib/highlight';
 	import type { ServiceProvider, TelegramBot } from '$lib/types';
 
 	let trackers = $state<any[]>([]);
@@ -61,7 +62,7 @@
 				telegramBotsCache.fetch(),
 			]);
 		} catch (err: any) { error = err.message || t('common.loadError'); snackError(error); }
-		finally { loaded = true; }
+		finally { loaded = true; highlightFromUrl(); }
 	}
 
 	function openNew() { form = defaultForm(); editing = null; showForm = true; }
@@ -226,14 +227,14 @@
 {:else}
 	<div class="space-y-3 stagger-children">
 		{#each trackers as trk}
-			<Card hover>
+			<Card hover entityId={trk.id}>
 				<div class="flex items-center justify-between">
 					<div>
 						<div class="flex items-center gap-2">
 							<span style="color: var(--color-primary);"><MdiIcon name={trk.icon || 'mdiConsoleLine'} size={20} /></span>
 							<p class="font-medium">{trk.name}</p>
-							<CrossLink href="/providers" icon="mdiServer" label={providerName(trk.provider_id)} />
+							<CrossLink href="/providers" icon="mdiServer" label={providerName(trk.provider_id)} entityId={trk.provider_id} />
-							<CrossLink href="/command-configs" icon="mdiCog" label={configName(trk.command_config_id)} />
+							<CrossLink href="/command-configs" icon="mdiCog" label={configName(trk.command_config_id)} entityId={trk.command_config_id} />
 							<span class="text-xs px-1.5 py-0.5 rounded font-mono {trk.enabled
 								? 'bg-emerald-500/10 text-emerald-500'
 								: 'bg-red-500/10 text-red-500'}">
@@ -270,7 +271,7 @@
 									<div class="flex items-center justify-between text-sm px-2 py-1 rounded hover:bg-[var(--color-muted)]">
 										<div class="flex items-center gap-2">
 											<MdiIcon name="mdiRobot" size={14} />
-											<CrossLink href="/telegram-bots" icon="mdiRobot" label={listener.name || listener.listener_type} />
+											<CrossLink href="/telegram-bots" icon="mdiRobot" label={listener.name || listener.listener_type} entityId={listener.listener_id} />
 											<span class="text-xs px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-500 font-mono">{listener.listener_type}</span>
 										</div>
 										<IconButton icon="mdiClose" title={t('commandTracker.removeListener')} size={14}

frontend/src/routes/notification-trackers/+page.svelte

@@ -16,6 +16,7 @@
 	import IconButton from '$lib/components/IconButton.svelte';
 	import CrossLink from '$lib/components/CrossLink.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
+	import { highlightFromUrl } from '$lib/highlight';
 	import type { Tracker, ServiceProvider, NotificationTarget, TrackingConfig, TemplateConfig } from '$lib/types';
 
 	let loaded = $state(false);
@@ -69,7 +70,7 @@
 		} catch (err: any) {
 			loadError = err.message || 'Failed to load data';
 			snackError(loadError);
-		} finally { loaded = true; }
+		} finally { loaded = true; highlightFromUrl(); }
 	}
 	async function loadCollections() {
 		if (!form.provider_id) return;
@@ -370,7 +371,7 @@
 {:else if !showForm}
 	<div class="space-y-3 stagger-children">
 		{#each notificationTrackers as tracker}
-			<Card hover>
+			<Card hover entityId={tracker.id}>
 				<div class="flex items-center justify-between">
 					<div>
 						<div class="flex items-center gap-2">
@@ -379,7 +380,7 @@
 							<span class="text-xs px-1.5 py-0.5 rounded {tracker.enabled ? 'bg-[var(--color-success-bg)] text-[var(--color-success-fg)]' : 'bg-[var(--color-muted)] text-[var(--color-muted-foreground)]'}">
 								{tracker.enabled ? t('notificationTracker.active') : t('notificationTracker.paused')}
 							</span>
-t						<CrossLink href="/providers" icon="mdiServer" label={getProviderName(tracker.provider_id)} />
+t						<CrossLink href="/providers" icon="mdiServer" label={getProviderName(tracker.provider_id)} entityId={tracker.provider_id} />
 						</div>
 						<p class="text-sm text-[var(--color-muted-foreground)]">
 							{(tracker.collection_ids || []).length} {t('notificationTracker.albums_count')} · {t('notificationTracker.every')} {tracker.scan_interval}s · {(tracker.tracker_targets || []).length} {t('notificationTracker.linkedTargets')}

frontend/src/routes/providers/+page.svelte

@@ -13,6 +13,7 @@
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
+	import { highlightFromUrl } from '$lib/highlight';
 	import type { ServiceProvider } from '$lib/types';
 
 	let providers = $derived(providersCache.items);
@@ -34,7 +35,7 @@
 			loadError = '';
 		} catch (err: any) {
 			loadError = err.message || t('providers.loadError');
-		} finally { loaded = true; }
+		} finally { loaded = true; highlightFromUrl(); }
 		// Ping all providers in background
 		for (const p of providers) {
 			health = { ...health, [p.id]: null };
@@ -151,7 +152,7 @@
 {:else}
 	<div class="space-y-3 stagger-children">
 		{#each providers as provider}
-			<Card hover>
+			<Card hover entityId={provider.id}>
 				<div class="flex items-center justify-between">
 					<div class="flex items-center gap-3">
 						<div class="health-dot {health[provider.id] === true ? 'online' : health[provider.id] === false ? 'offline' : 'checking'}"></div>

frontend/src/routes/targets/+page.svelte

@@ -17,6 +17,7 @@
 	import CrossLink from '$lib/components/CrossLink.svelte';
 	import IconGridSelect from '$lib/components/IconGridSelect.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
+	import { highlightFromUrl } from '$lib/highlight';
 	import type { NotificationTarget, TelegramBot, TelegramChat, EmailBot, MatrixBot } from '$lib/types';
 
 	function getBotName(target: any): string | null {
@@ -42,6 +43,13 @@
 		return '/telegram-bots';
 	}
 
+	function getBotEntityId(target: any): number | null {
+		if (target.type === 'telegram') return target.config?.bot_id || null;
+		if (target.type === 'email') return target.config?.email_bot_id || null;
+		if (target.type === 'matrix') return target.config?.matrix_bot_id || null;
+		return null;
+	}
+
 	const ALL_TYPES = ['telegram', 'webhook', 'email', 'discord', 'slack', 'ntfy', 'matrix'] as const;
 	type TargetType = typeof ALL_TYPES[number];
 	const TYPE_ICONS: Record<string, string> = {
@@ -106,7 +114,7 @@
 				emailBotsCache.fetch(), matrixBotsCache.fetch(),
 			]);
 			loadError = '';
-		} catch (err: any) { loadError = err.message || t('common.loadError'); snackError(loadError); } finally { loaded = true; }
+		} catch (err: any) { loadError = err.message || t('common.loadError'); snackError(loadError); } finally { loaded = true; highlightFromUrl(); }
 	}
 
 	async function loadBotChats() {
@@ -398,7 +406,7 @@
 {:else}
 	<div class="space-y-3 stagger-children">
 		{#each targets as target}
-			<Card hover>
+			<Card hover entityId={target.id}>
 				<div class="flex items-center justify-between">
 					<div>
 						<div class="flex items-center gap-2">
@@ -406,7 +414,7 @@
 							<p class="font-medium">{target.name}</p>
 							{#if !activeType}<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{target.type}</span>{/if}
 							{#if target.receiver_count}<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{target.receiver_count} receiver(s)</span>{/if}
-							{#if getBotName(target)}<CrossLink href={getBotHref(target)} icon="mdiRobot" label={getBotName(target)} />{/if}
+							{#if getBotName(target)}<CrossLink href={getBotHref(target)} icon="mdiRobot" label={getBotName(target)} entityId={getBotEntityId(target)} />{/if}
 						</div>
 						<p class="text-sm text-[var(--color-muted-foreground)]">
 							{#if target.type === 'telegram'}

frontend/src/routes/telegram-bots/+page.svelte

@@ -14,6 +14,7 @@
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import { snackSuccess, snackError, snackInfo } from '$lib/stores/snackbar.svelte';
+	import { highlightFromUrl } from '$lib/highlight';
 	import type { TelegramBot, TelegramChat, EmailBot, MatrixBot } from '$lib/types';
 
 	type BotTab = 'telegram' | 'email' | 'matrix';
@@ -51,7 +52,7 @@
 				matrixBotsCache.fetch(true),
 			]);
 		} catch (err: any) { error = err.message || t('common.loadError'); snackError(error); }
-		finally { loaded = true; }
+		finally { loaded = true; highlightFromUrl(); }
 	}
 
 	function openNew() { form = { name: '', icon: '', token: '' }; editing = null; showForm = true; }
@@ -390,7 +391,7 @@
 {:else}
 	<div class="space-y-3 stagger-children">
 		{#each bots as bot}
-			<Card hover>
+			<Card hover entityId={bot.id}>
 				<div class="flex items-center justify-between">
 					<div>
 						<div class="flex items-center gap-2">
@@ -638,7 +639,7 @@
 {:else}
 	<div class="space-y-3 stagger-children">
 		{#each emailBots as bot}
-			<Card hover>
+			<Card hover entityId={bot.id}>
 				<div class="flex items-center justify-between">
 					<div>
 						<div class="flex items-center gap-2">
@@ -721,7 +722,7 @@
 {:else}
 	<div class="space-y-3 stagger-children">
 		{#each matrixBots as bot}
-			<Card hover>
+			<Card hover entityId={bot.id}>
 				<div class="flex items-center justify-between">
 					<div>
 						<div class="flex items-center gap-2">

frontend/src/routes/template-configs/+page.svelte

@@ -16,6 +16,7 @@
 	import Modal from '$lib/components/Modal.svelte';
 	import JinjaEditor from '$lib/components/JinjaEditor.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
+	import { highlightFromUrl } from '$lib/highlight';
 	import type { TemplateConfig } from '$lib/types';
 
 	let configs = $derived(templateConfigsCache.items);
@@ -140,7 +141,7 @@
 				api('/providers/capabilities'),
 			]);
 		} catch (err: any) { error = err.message || t('common.loadError'); snackError(error); }
-		finally { loaded = true; }
+		finally { loaded = true; highlightFromUrl(); }
 	}
 
 	function openNew() { form = defaultForm(); editing = null; showForm = true; slotPreview = {}; slotErrors = {}; dateFormatPreview = {}; refreshDateFormatPreview(); }
@@ -327,7 +328,7 @@
 {:else}
 	<div class="space-y-3 stagger-children">
 		{#each configs as config}
-			<Card hover>
+			<Card hover entityId={config.id}>
 				<div class="flex items-start justify-between">
 					<div class="flex-1">
 						<div class="flex items-center gap-2">

frontend/src/routes/tracking-configs/+page.svelte

@@ -14,6 +14,7 @@
 	import Hint from '$lib/components/Hint.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
+	import { highlightFromUrl } from '$lib/highlight';
 	import type { TrackingConfig } from '$lib/types';
 
 	let configs = $derived(trackingConfigsCache.items);
@@ -43,7 +44,7 @@
 	async function load() {
 		try { await trackingConfigsCache.fetch(true); }
 		catch (err: any) { error = err.message || t('common.loadError'); snackError(error); }
-		finally { loaded = true; }
+		finally { loaded = true; highlightFromUrl(); }
 	}
 
 	function openNew() { form = defaultForm(); editing = null; showForm = true; }
@@ -208,7 +209,7 @@
 {:else}
 	<div class="space-y-3 stagger-children">
 		{#each configs as config}
-			<Card hover>
+			<Card hover entityId={config.id}>
 				<div class="flex items-center justify-between">
 					<div>
 						<div class="flex items-center gap-2">