feat: comprehensive code review fixes + receivers-only architecture

Security: - Refuse startup with default secret_key in production (was just logging) - Settings endpoint now requires admin role - Password validation on initial setup - DOM-based HTML sanitizer replaces regex in template previews - Add *.log to .gitignore Performance & reliability: - Token refresh deduplication prevents race condition on concurrent 401s - Theme media query listener registered once (no leak) - IconPicker uses $derived instead of function call per render - Snackbar uses single-batch state update instead of while loop - Replace 11 inline hover handlers with CSS :hover in layout Architecture - receivers-only: - Delivery endpoints (chat_id, email, url, room_id, topic) now stored exclusively in TargetReceiver rows, never in target.config - Migration extracts existing delivery fields to receiver rows - Notifier and dispatcher remove all config fallbacks - Frontend targets page shows receivers list per target with add/remove/toggle/test per receiver - Single-receiver test endpoint: POST /targets/{id}/receivers/{id}/test Code quality: - Extract AuthLayout.svelte from login/setup (150 lines CSS dedup) - Split telegram-bots page (754→51 lines + 3 tab components) - Split notification-trackers page (547→432 lines + 4 components) - Deduplicate _send_reply into shared handler.send_reply() - Add locale column to template models, replace name-based detection - Fix delete_notification_tracker dead protection check - Fix check_telegram_bot query (filter by type, remove bogus OR) - Add graceful scheduler shutdown in lifespan - Consistent /bots?tab=telegram URLs across all nav links i18n: - Error page, chat actions, target types, provider types internationalized - All new receiver UI strings in EN + RU
2026-03-22 02:19:31 +03:00
parent b525e3e7f4
commit 751097b347
43 changed files with 2584 additions and 1685 deletions
@@ -1,24 +1,24 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { slide } from 'svelte/transition';
 	import { api } from '$lib/api';
 	import { t, getLocale } from '$lib/i18n';
 	import { providersCache, targetsCache, trackingConfigsCache, templateConfigsCache } from '$lib/stores/caches.svelte';
 	import PageHeader from '$lib/components/PageHeader.svelte';
 	import Card from '$lib/components/Card.svelte';
 	import Loading from '$lib/components/Loading.svelte';
-	import IconPicker from '$lib/components/IconPicker.svelte';
 	import MdiIcon from '$lib/components/MdiIcon.svelte';
 	import EmptyState from '$lib/components/EmptyState.svelte';
-	import Modal from '$lib/components/Modal.svelte';
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
-	import Hint from '$lib/components/Hint.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import CrossLink from '$lib/components/CrossLink.svelte';
-	import EntitySelect from '$lib/components/EntitySelect.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 	import { highlightFromUrl } from '$lib/highlight';
-	import type { Tracker, ServiceProvider, NotificationTarget, TrackingConfig, TemplateConfig } from '$lib/types';
+	import type { Tracker, TrackingConfig, TemplateConfig } from '$lib/types';
+
+	import TrackerForm from './TrackerForm.svelte';
+	import LinkedTargetsSection from './LinkedTargetsSection.svelte';
+	import SharedLinkModal from './SharedLinkModal.svelte';
+	import TestMenu from './TestMenu.svelte';

 	let loaded = $state(false);
 	let loadError = $state('');
@@ -35,7 +35,6 @@
 	let submitting = $state(false);
 	let confirmDelete = $state<Tracker | null>(null);
 	let toggling = $state<Record<number, boolean>>({});
-	// Per tracker-target test state (keyed by `${ttId}_${testType}`)
 	let ttTesting = $state<Record<string, string>>({});

 	// Shared link validation
@@ -52,15 +51,26 @@
 	let form = $state(defaultForm());
 	let error = $state('');

-	// Linked targets management (inline in tracker detail)
+	// Linked targets management
 	let expandedTracker = $state<number | null>(null);
-	let linkedTargets = $state<Record<number, any[]>>({});
 	let addingTarget = $state<Record<number, boolean>>({});
 	let newLinkTargetId = $state<Record<number, number>>({});
 	let newLinkTrackingConfigId = $state<Record<number, number>>({});
 	let newLinkTemplateConfigId = $state<Record<number, number>>({});

+	// Test menu
+	let testMenuOpen = $state<string | null>(null);
+	let testMenuStyle = $state('');
+
+	const testTypes = [
+		{ key: 'basic', icon: 'mdiSend', labelKey: 'notificationTracker.testBasic' },
+		{ key: 'periodic', icon: 'mdiCalendarClock', labelKey: 'notificationTracker.testPeriodic' },
+		{ key: 'scheduled', icon: 'mdiImageMultiple', labelKey: 'notificationTracker.testScheduled' },
+		{ key: 'memory', icon: 'mdiHistory', labelKey: 'notificationTracker.testMemory' },
+	];
+
 	onMount(load);
+
 	async function load() {
 		loadError = '';
 		try {
@@ -74,12 +84,12 @@
 			snackError(loadError);
 		} finally { loaded = true; highlightFromUrl(); }
 	}
+
 	async function loadCollections() {
 		if (!form.provider_id) return;
 		try { collections = await api(`/providers/${form.provider_id}/collections`); } catch { collections = []; }
 	}

-	// Auto-load collections when provider changes via EntitySelect
 	let _prevProviderId = 0;
 	$effect(() => {
 		if (showForm && form.provider_id && form.provider_id !== _prevProviderId) {
@@ -89,6 +99,7 @@
 	});

 	function openNew() { form = defaultForm(); editing = null; showForm = true; collections = []; previousCollectionIds = []; }
+
 	async function edit(trk: any) {
 		form = {
 			name: trk.name, icon: trk.icon || '', provider_id: trk.provider_id,
@@ -104,7 +115,6 @@
 		e.preventDefault(); error = '';
 		if (submitting) return;

-		// Check shared links for newly added albums
 		const newAlbumIds = form.collection_ids.filter(id => !previousCollectionIds.includes(id));
 		if (newAlbumIds.length > 0 && form.provider_id) {
 			linkCheckLoading = true;
@@ -128,7 +138,7 @@
 				if (missingAlbums.length > 0) {
 					linkWarning = { albums: missingAlbums, providerId: form.provider_id };
 					linkCheckLoading = false;
-					return; // Show warning, don't save yet
+					return;
 				}
 			} catch { /* Proceed if check fails */ }
 			linkCheckLoading = false;
@@ -175,6 +185,7 @@
 		linkWarning = null;
 		await doSave();
 	}
+
 	async function toggle(tracker: any) {
 		if (toggling[tracker.id]) return;
 		toggling = { ...toggling, [tracker.id]: true };
@@ -184,7 +195,9 @@
 			snackSuccess(tracker.enabled ? t('snack.trackerPaused') : t('snack.trackerResumed'));
 		} catch (err: any) { snackError(err.message); } finally { toggling = { ...toggling, [tracker.id]: false }; }
 	}
+
 	function startDelete(tracker: any) { confirmDelete = tracker; }
+
 	async function doDelete() {
 		if (!confirmDelete) return;
 		try {
@@ -194,39 +207,13 @@
 		} catch (err: any) { error = err.message; snackError(err.message); }
 		confirmDelete = null;
 	}
-	let testMenuOpen = $state<string | null>(null);
-	let testMenuStyle = $state('');

-	const testTypes = [
-		{ key: 'basic', icon: 'mdiSend', labelKey: 'notificationTracker.testBasic' },
-		{ key: 'periodic', icon: 'mdiCalendarClock', labelKey: 'notificationTracker.testPeriodic' },
-		{ key: 'scheduled', icon: 'mdiImageMultiple', labelKey: 'notificationTracker.testScheduled' },
-		{ key: 'memory', icon: 'mdiHistory', labelKey: 'notificationTracker.testMemory' },
-	];
-
-	async function testTrackerTarget(trackerId: number, ttId: number, testType: string) {
-		testMenuOpen = null;
-		const key = `${ttId}_${testType}`;
-		if (ttTesting[key]) return;
-		ttTesting = { ...ttTesting, [key]: testType };
-		try {
-			await api(`/notification-trackers/${trackerId}/targets/${ttId}/test/${testType}?locale=${getLocale()}`, { method: 'POST' });
-			snackSuccess(t('snack.targetTestSent'));
-		} catch (err: any) {
-			snackError(err.message);
-		} finally {
-			ttTesting = { ...ttTesting, [key]: '' };
-		}
+	function toggleCollection(collectionId: string) {
+		form.collection_ids = form.collection_ids.includes(collectionId)
+			? form.collection_ids.filter(id => id !== collectionId)
+			: [...form.collection_ids, collectionId];
 	}

-	function openTestMenu(ttId: number, event: MouseEvent) {
-		const btn = event.currentTarget as HTMLElement;
-		const rect = btn.getBoundingClientRect();
-		testMenuStyle = `position:fixed; z-index:9999; top:${rect.bottom + 4}px; right:${window.innerWidth - rect.right}px;`;
-		testMenuOpen = testMenuOpen === String(ttId) ? null : String(ttId);
-	}
-	function toggleCollection(collectionId: string) { form.collection_ids = form.collection_ids.includes(collectionId) ? form.collection_ids.filter(id => id !== collectionId) : [...form.collection_ids, collectionId]; }
-
 	function formatDate(dateStr: string): string {
 		if (!dateStr) return '';
 		try {
@@ -235,11 +222,10 @@
 		} catch { return ''; }
 	}

-	// --- Linked Targets Management ---
+	// --- Linked Targets helpers ---
 	function toggleExpand(trackerId: number) {
 		if (expandedTracker === trackerId) { expandedTracker = null; return; }
 		expandedTracker = trackerId;
-		// tracker_targets already loaded in tracker response
 	}

 	function getProviderType(tracker: any): string {
@@ -301,6 +287,33 @@
 			await load();
 		} catch (err: any) { snackError(err.message); }
 	}
+
+	async function testTrackerTarget(trackerId: number, ttId: number, testType: string) {
+		testMenuOpen = null;
+		const key = `${ttId}_${testType}`;
+		if (ttTesting[key]) return;
+		ttTesting = { ...ttTesting, [key]: testType };
+		try {
+			await api(`/notification-trackers/${trackerId}/targets/${ttId}/test/${testType}?locale=${getLocale()}`, { method: 'POST' });
+			snackSuccess(t('snack.targetTestSent'));
+		} catch (err: any) {
+			snackError(err.message);
+		} finally {
+			ttTesting = { ...ttTesting, [key]: '' };
+		}
+	}
+
+	function openTestMenu(ttId: number, event: MouseEvent) {
+		const btn = event.currentTarget as HTMLElement;
+		const rect = btn.getBoundingClientRect();
+		testMenuStyle = `position:fixed; z-index:9999; top:${rect.bottom + 4}px; right:${window.innerWidth - rect.right}px;`;
+		testMenuOpen = testMenuOpen === String(ttId) ? null : String(ttId);
+	}
+
+	function handleTestFromMenu(ttId: number, testType: string) {
+		const trackerId = notificationTrackers.find(t => t.tracker_targets?.some((x: any) => String(x.id) === String(ttId)))?.id;
+		if (trackerId) testTrackerTarget(trackerId, ttId, testType);
+	}
 </script>

 <PageHeader title={t('notificationTracker.title')} description={t('notificationTracker.description')}>
@@ -317,58 +330,19 @@
 		<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3">{loadError}</div>
 	</Card>
 {:else if showForm}
-	<div in:slide={{ duration: 200 }}>
-	<Card class="mb-6">
-		{#if error}<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>{/if}
-		<form onsubmit={save} class="space-y-4">
-			<div>
-				<label for="trk-name" class="block text-sm font-medium mb-1">{t('notificationTracker.name')}</label>
-				<div class="flex gap-2">
-					<IconPicker value={form.icon} onselect={(v: string) => form.icon = v} />
-					<input id="trk-name" bind:value={form.name} required placeholder={t('notificationTracker.namePlaceholder')} class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
-				</div>
-			</div>
-			<div>
-				<label class="block text-sm font-medium mb-1">{t('notificationTracker.server')}</label>
-				<EntitySelect items={providerItems} bind:value={form.provider_id} placeholder={t('notificationTracker.selectServer')} />
-			</div>
-			{#if collections.length > 0}
-				<div>
-					<label class="block text-sm font-medium mb-1">{t('notificationTracker.albums')} ({collections.length})</label>
-					<input type="text" bind:value={collectionFilter} placeholder="Filter..."
-						class="w-full px-3 py-1.5 mb-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
-					<div class="max-h-56 overflow-y-auto border border-[var(--color-border)] rounded-md p-2 space-y-1">
-						{#each collections.filter(a => !collectionFilter || (a.albumName || a.name || '').toLowerCase().includes(collectionFilter.toLowerCase())) as col}
-							<label class="flex items-center justify-between text-sm cursor-pointer hover:bg-[var(--color-muted)] px-2 py-1 rounded">
-								<span class="flex items-center gap-2">
-									<input type="checkbox" checked={form.collection_ids.includes(col.id)} onchange={() => toggleCollection(col.id)} />
-									{col.albumName || col.name} <span class="text-[var(--color-muted-foreground)]">({col.assetCount ?? col.asset_count ?? 0})</span>
-								</span>
-								{#if col.updatedAt || col.updated_at}
-									<span class="text-xs text-[var(--color-muted-foreground)] whitespace-nowrap ml-2">{formatDate(col.updatedAt || col.updated_at)}</span>
-								{/if}
-							</label>
-						{/each}
-					</div>
-				</div>
-			{/if}
-			<div class="grid grid-cols-2 gap-3">
-				<div>
-					<label for="trk-interval" class="block text-sm font-medium mb-1">{t('notificationTracker.scanInterval')}<Hint text={t('hints.scanInterval')} /></label>
-					<input id="trk-interval" type="number" bind:value={form.scan_interval} min="10" max="3600" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
-				</div>
-				<div>
-					<label for="trk-batch" class="block text-sm font-medium mb-1">{t('notificationTracker.batchDuration')}<Hint text={t('hints.batchDuration')} /></label>
-					<input id="trk-batch" type="number" bind:value={form.batch_duration} min="0" max="3600" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
-				</div>
-			</div>
-
-			<button type="submit" disabled={submitting || linkCheckLoading} class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50">
-				{#if linkCheckLoading}{t('notificationTracker.checkingLinks')}{:else}{editing ? t('common.save') : t('notificationTracker.createTracker')}{/if}
-			</button>
-		</form>
-	</Card>
-	</div>
+	<TrackerForm
+		bind:form
+		{providerItems}
+		{collections}
+		bind:collectionFilter
+		{editing}
+		{submitting}
+		{linkCheckLoading}
+		{error}
+		onsave={save}
+		ontoggleCollection={toggleCollection}
+		{formatDate}
+	/>
 {/if}

 {#if loaded && !loadError}
@@ -388,7 +362,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)} entityId={tracker.provider_id} />
+						<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')}
@@ -406,76 +380,26 @@ t						<CrossLink href="/providers" icon="mdiServer" label={getProviderName(trac
 					</div>
 				</div>

-				<!-- Linked Targets Section -->
 				{#if expandedTracker === tracker.id}
-					<div class="mt-3 border-t border-[var(--color-border)] pt-3 space-y-2" in:slide>
-						{#if (tracker.tracker_targets || []).length === 0}
-							<p class="text-xs text-[var(--color-muted-foreground)]">{t('notificationTracker.noLinkedTargets')}</p>
-						{:else}
-							{#each tracker.tracker_targets as tt}
-								<div class="flex items-center justify-between text-sm px-2 py-1.5 rounded bg-[var(--color-muted)]/30">
-									<div class="flex items-center gap-2">
-										<span style="color: var(--color-primary);"><MdiIcon name={tt.target_icon || (tt.target_type === 'telegram' ? 'mdiSend' : 'mdiWebhook')} size={16} /></span>
-										<span class="font-medium">{tt.target_name || `Target #${tt.target_id}`}</span>
-										<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{tt.target_type}</span>
-										{#if !tt.enabled}
-											<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-warning-bg)] text-[var(--color-warning-fg)]">{t('notificationTracker.paused')}</span>
-										{/if}
-									</div>
-									<div class="flex items-center gap-2 flex-wrap justify-end">
-										<select value={tt.tracking_config_id || 0}
-											onchange={(e: Event) => updateTargetLink(tracker.id, tt, 'tracking_config_id', Number((e.target as HTMLSelectElement).value) || null)}
-											class="text-xs px-2 py-1 border border-[var(--color-border)] rounded-md bg-[var(--color-background)]">
-											<option value={0}>— {t('trackingConfig.title')} —</option>
-											{#each configsForTracker(tracker, trackingConfigs) as tc}<option value={tc.id}>{tc.name}</option>{/each}
-										</select>
-										<select value={tt.template_config_id || 0}
-											onchange={(e: Event) => updateTargetLink(tracker.id, tt, 'template_config_id', Number((e.target as HTMLSelectElement).value) || null)}
-											class="text-xs px-2 py-1 border border-[var(--color-border)] rounded-md bg-[var(--color-background)]">
-											<option value={0}>— {t('templateConfig.title')} —</option>
-											{#each configsForTracker(tracker, templateConfigs) as tc}<option value={tc.id}>{tc.name}</option>{/each}
-										</select>
-										<div class="relative">
-											<IconButton icon="mdiDotsVertical" size={14} title={t('common.test')}
-												onclick={(e: MouseEvent) => openTestMenu(tt.id, e)}
-												disabled={Object.keys(ttTesting).some(k => k.startsWith(`${tt.id}_`) && ttTesting[k])} />
-										</div>
-										<IconButton icon={tt.enabled ? 'mdiPause' : 'mdiPlay'} size={14}
-											title={tt.enabled ? t('notificationTracker.pause') : t('notificationTracker.resume')}
-											onclick={() => updateTargetLink(tracker.id, tt, 'enabled', !tt.enabled)} />
-										<IconButton icon="mdiClose" size={14} title={t('common.delete')}
-											onclick={() => removeTargetLink(tracker.id, tt.id)} variant="danger" />
-									</div>
-								</div>
-							{/each}
-						{/if}
-
-						<!-- Add target link -->
-						{#if getUnlinkedTargets(tracker).length > 0}
-							<div class="flex items-center gap-2 mt-2">
-								<select bind:value={newLinkTargetId[tracker.id]}
-									class="text-xs px-2 py-1 border border-[var(--color-border)] rounded-md bg-[var(--color-background)] flex-1">
-									<option value={0}>— {t('notificationTracker.addTarget')} —</option>
-									{#each getUnlinkedTargets(tracker) as tgt}<option value={tgt.id}>{tgt.name} ({tgt.type})</option>{/each}
-								</select>
-								<select bind:value={newLinkTrackingConfigId[tracker.id]}
-									class="text-xs px-2 py-1 border border-[var(--color-border)] rounded-md bg-[var(--color-background)]">
-									<option value={0}>— {t('trackingConfig.title')} —</option>
-									{#each configsForTracker(tracker, trackingConfigs) as tc}<option value={tc.id}>{tc.name}</option>{/each}
-								</select>
-								<select bind:value={newLinkTemplateConfigId[tracker.id]}
-									class="text-xs px-2 py-1 border border-[var(--color-border)] rounded-md bg-[var(--color-background)]">
-									<option value={0}>— {t('templateConfig.title')} —</option>
-									{#each configsForTracker(tracker, templateConfigs) as tc}<option value={tc.id}>{tc.name}</option>{/each}
-								</select>
-								<button onclick={() => addTargetLink(tracker.id)}
-									disabled={!newLinkTargetId[tracker.id] || addingTarget[tracker.id]}
-									class="text-xs px-3 py-1 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded hover:opacity-90 disabled:opacity-50">
-									{t('common.add')}
-								</button>
-							</div>
-						{/if}
-					</div>
+					<LinkedTargetsSection
+						{tracker}
+						{trackingConfigs}
+						{templateConfigs}
+						unlinkedTargets={getUnlinkedTargets(tracker)}
+						newLinkTargetId={newLinkTargetId[tracker.id] || 0}
+						newLinkTrackingConfigId={newLinkTrackingConfigId[tracker.id] || 0}
+						newLinkTemplateConfigId={newLinkTemplateConfigId[tracker.id] || 0}
+						addingTarget={addingTarget[tracker.id] || false}
+						{ttTesting}
+						configsForTracker={(configs) => configsForTracker(tracker, configs)}
+						onupdateLink={(tt, field, value) => updateTargetLink(tracker.id, tt, field, value)}
+						onremoveLink={(ttId) => removeTargetLink(tracker.id, ttId)}
+						onaddLink={() => addTargetLink(tracker.id)}
+						onopenTestMenu={openTestMenu}
+						onchangeNewTarget={(v) => newLinkTargetId = { ...newLinkTargetId, [tracker.id]: v }}
+						onchangeNewTrackingConfig={(v) => newLinkTrackingConfigId = { ...newLinkTrackingConfigId, [tracker.id]: v }}
+						onchangeNewTemplateConfig={(v) => newLinkTemplateConfigId = { ...newLinkTemplateConfigId, [tracker.id]: v }}
+					/>
 				{/if}
 			</Card>
 		{/each}
@@ -483,61 +407,22 @@ t						<CrossLink href="/providers" icon="mdiServer" label={getProviderName(trac
 {/if}
 {/if}

-{#if testMenuOpen}
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div style="position:fixed; top:0; left:0; right:0; bottom:0; z-index:9998;"
-		onclick={() => testMenuOpen = null}
-		onkeydown={(e) => { if (e.key === 'Escape') testMenuOpen = null; }}>
-	</div>
-	<div style="{testMenuStyle} 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.25rem; min-width:10rem;">
-		{#each testTypes as tt}
-			{@const trackerId = notificationTrackers.find(t => t.tracker_targets?.some((x: any) => String(x.id) === testMenuOpen))?.id}
-			<button
-				onclick={() => trackerId && testTrackerTarget(trackerId, Number(testMenuOpen), tt.key)}
-				disabled={!!ttTesting[`${testMenuOpen}_${tt.key}`]}
-				class="flex items-center gap-2 w-full px-3 py-1.5 text-sm rounded hover:bg-[var(--color-muted)] transition-colors disabled:opacity-50 text-left">
-				<MdiIcon name={tt.icon} size={14} />
-				{t(tt.labelKey)}
-				{#if ttTesting[`${testMenuOpen}_${tt.key}`]}
-					<span class="ml-auto text-xs text-[var(--color-muted-foreground)]">...</span>
-				{/if}
-			</button>
-		{/each}
-	</div>
-{/if}
+<TestMenu
+	{testMenuOpen}
+	{testMenuStyle}
+	{ttTesting}
+	{testTypes}
+	ontest={handleTestFromMenu}
+	onclose={() => testMenuOpen = null}
+/>

-<Modal open={linkWarning !== null} title={t('notificationTracker.missingLinksTitle')} onclose={() => { linkWarning = null; }}>
-	{#if linkWarning}
-		<p class="text-sm mb-3" style="color: var(--color-muted-foreground);">
-			{t('notificationTracker.missingLinksDesc')}
-		</p>
-		<div class="space-y-1.5 mb-4 max-h-40 overflow-y-auto">
-			{#each linkWarning.albums as album}
-				<div class="flex items-center justify-between text-sm px-2 py-1.5 rounded bg-[var(--color-muted)]/30">
-					<span class="font-medium">{album.name}</span>
-					<span class="text-xs px-1.5 py-0.5 rounded {album.issue === 'expired' ? 'bg-[var(--color-error-bg)] text-[var(--color-error-fg)]' : album.issue === 'password-protected' ? 'bg-[var(--color-warning-bg)] text-[var(--color-warning-fg)]' : 'bg-[var(--color-muted)] text-[var(--color-muted-foreground)]'}">
-						{album.issue === 'expired' ? t('notificationTracker.expired') : album.issue === 'password-protected' ? t('notificationTracker.passwordProtected') : t('notificationTracker.noLink')}
-					</span>
-				</div>
-			{/each}
-		</div>
-		<p class="text-xs mb-4" style="color: var(--color-muted-foreground);">
-			<MdiIcon name="mdiInformation" size={14} /> {t('notificationTracker.linksNote')}
-		</p>
-		<div class="flex items-center gap-2 justify-end">
-			<button onclick={dismissLinkWarning}
-				class="px-3 py-1.5 text-sm border border-[var(--color-border)] rounded-md hover:bg-[var(--color-muted)]">
-				{t('notificationTracker.saveWithoutLinks')}
-			</button>
-			{#if linkWarning.albums.some(a => a.issue === 'missing')}
-				<button onclick={autoCreateLinks} disabled={linkCreating}
-					class="px-3 py-1.5 text-sm bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md hover:opacity-90 disabled:opacity-50">
-					{linkCreating ? t('common.loading') : t('notificationTracker.createLinks').replace('{count}', String(linkWarning.albums.filter(a => a.issue === 'missing').length))}
-				</button>
-			{/if}
-		</div>
-	{/if}
-</Modal>
+<SharedLinkModal
+	{linkWarning}
+	{linkCreating}
+	onclose={() => { linkWarning = null; }}
+	onautoCreate={autoCreateLinks}
+	ondismiss={dismissLinkWarning}
+/>

 <ConfirmModal
 	open={!!confirmDelete}