Rename Discovery to Scans, add active scan indicator

mayanayza · mayanayza · commit 7b27decdba09 · 2026-03-07T21:33:05.000-08:00
- Rename sidebar label from "Discovery" to "Scans" to avoid
  redundancy under the "Discover" section header
- Show green notification dot on sidebar Scans icon when a
  discovery session is actively running
- Show matching dot on Sessions sub-tab via new notifications
  prop on ContentSubTabs
diff --git a/ui/src/lib/shared/components/layout/ContentSubTabs.svelte b/ui/src/lib/shared/components/layout/ContentSubTabs.svelte
@@ -12,11 +12,13 @@
 	let {
 		tabs,
 		activeTab = $bindable(),
-		isReadOnly = false
+		isReadOnly = false,
+		notifications
 	}: {
 		tabs: SubTab[];
 		activeTab: string;
 		isReadOnly: boolean;
+		notifications?: Record<string, string>;
 	} = $props();
 </script>
 
@@ -38,7 +40,15 @@
 				aria-current={activeTab === tab.id ? 'page' : undefined}
 			>
 				<div class="flex items-center gap-2">
-					<tab.icon class="h-4 w-4" />
+					<span class="relative">
+						<tab.icon class="h-4 w-4" />
+						{#if notifications?.[tab.id]}
+							<span
+								class="absolute -right-1 -top-1 h-2 w-2 rounded-full"
+								style="background-color: {notifications[tab.id]}"
+							></span>
+						{/if}
+					</span>
 					{tab.label}
 				</div>
 			</button>
diff --git a/ui/src/lib/shared/components/layout/Sidebar.svelte b/ui/src/lib/shared/components/layout/Sidebar.svelte
@@ -5,6 +5,7 @@
 	import SettingsModal from '$lib/features/settings/SettingsModal.svelte';
 	import SupportModal from '$lib/features/support/SupportModal.svelte';
 	import { entities } from '$lib/shared/stores/metadata';
+	import { useActiveSessionsQuery } from '$lib/features/discovery/queries';
 	import { modalState, openModal } from '$lib/shared/stores/modal-registry';
 	import { entityUIConfig, TAB_LABELS } from '$lib/shared/entity-ui-config';
 	import type { EntityDiscriminants } from '$lib/api/entities';
@@ -58,6 +59,7 @@
 				isReadOnly: boolean;
 				subTabIds?: string[];
 				subTabDefs?: SubTab[];
+				subTabNotifications?: Record<string, string>;
 			}>
 		>([]),
 		showSettings = $bindable(false),
@@ -73,6 +75,7 @@
 			isReadOnly: boolean;
 			subTabIds?: string[];
 			subTabDefs?: SubTab[];
+			subTabNotifications?: Record<string, string>;
 		}>;
 		showSettings?: boolean;
 		settingsInitialTab?: string;
@@ -107,6 +110,10 @@
 		return isPastDue || (isTrialing && !hasPayment);
 	});
 
+	// Active discovery sessions — used for notification dot on sidebar and sub-tabs
+	const activeSessionsQuery = useActiveSessionsQuery(() => true);
+	let hasActiveSessions = $derived((activeSessionsQuery.data?.length ?? 0) > 0);
+
 	// Sync settings/support modal state from modal registry (for deep-link opens)
 	$effect(() => {
 		if ($modalState.name === 'settings' && !showSettings) {
@@ -331,6 +338,7 @@
 			isReadOnly: boolean;
 			subTabIds?: string[];
 			subTabDefs?: SubTab[];
+			subTabNotifications?: Record<string, string>;
 		}> = [];
 
 		// Helper to extract tabs from an item and its children
@@ -349,7 +357,11 @@
 						component: null,
 						isReadOnly,
 						subTabIds: visibleSubTabs.map((st) => st.id),
-						subTabDefs: visibleSubTabs
+						subTabDefs: visibleSubTabs,
+						subTabNotifications:
+							item.id === 'discovery' && hasActiveSessions
+								? { 'discovery-sessions': entities.getColorHelper('Discovery').rgb }
+								: undefined
 					});
 				}
 			} else if (item.component) {
@@ -647,7 +659,15 @@
 												style="height: 2.5rem; padding: 0.5rem 0.75rem;"
 												title={collapsed ? item.label : ''}
 											>
-												<item.icon class="h-5 w-5 flex-shrink-0" />
+												<span class="relative">
+													<item.icon class="h-5 w-5 flex-shrink-0" />
+													{#if item.id === 'discovery' && hasActiveSessions}
+														<span
+															class="absolute -right-1 -top-1 h-2.5 w-2.5 rounded-full"
+															style="background-color: {entities.getColorHelper('Discovery').rgb}"
+														></span>
+													{/if}
+												</span>
 												{#if !collapsed}
 													<span class="ml-3 truncate">{item.label}</span>
 												{/if}
diff --git a/ui/src/lib/shared/entity-ui-config.ts b/ui/src/lib/shared/entity-ui-config.ts
@@ -36,7 +36,7 @@ export const TAB_LABELS: Record<string, string> = {
 	topology: 'Topology',
 	groups: 'Groups',
 	shares: 'Sharing',
-	discovery: 'Discovery',
+	discovery: 'Scans',
 	'discovery-sessions': 'Sessions',
 	'discovery-scheduled': 'Scheduled',
 	'discovery-history': 'History',
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
@@ -63,6 +63,7 @@
 			isReadOnly: boolean;
 			subTabIds?: string[];
 			subTabDefs?: SubTab[];
+			subTabNotifications?: Record<string, string>;
 		}>
 	>([]);
 
@@ -165,7 +166,12 @@
 				{#each allTabs as tab (tab.id)}
 					{#if tab.subTabIds && tab.subTabDefs}
 						<div class={!tab.subTabIds.includes(activeTab) ? 'h-0 overflow-hidden' : ''}>
-							<ContentSubTabs tabs={tab.subTabDefs} bind:activeTab isReadOnly={tab.isReadOnly} />
+							<ContentSubTabs
+								tabs={tab.subTabDefs}
+								bind:activeTab
+								isReadOnly={tab.isReadOnly}
+								notifications={tab.subTabNotifications}
+							/>
 						</div>
 					{:else}
 						<div class={activeTab !== tab.id ? 'h-0 overflow-hidden' : ''}>
