From 8c3bbf9c3ec2ca4f2dfb7044105c4f2620c8a76e Mon Sep 17 00:00:00 2001
From: Ian Miell <ian.miell@gmail.com>
Date: Thu, 24 Sep 2026 11:47:10 +0100
Subject: [PATCH 1/5] Filter filters by scope, control, or component

Remove Done button from add member as it is redundant and confuses

Highlight left hand nav to indicate where you are

Remove description from control implementation page.

Initialise lhn
---
 src/components/groups/GroupMembersPanel.vue   |   4 -
 src/components/navigation/SideNavCategory.vue |  25 +-
 src/components/navigation/SideNavLink.vue     |  10 +-
 src/router/__tests__/index.spec.ts            |   8 +
 src/router/index.ts                           |  10 +-
 src/views/LeftSideNav.vue                     |  65 ++++-
 src/views/__tests__/LeftSideNav.spec.ts       |  62 ++++-
 .../LeftSideNavActiveSection.spec.ts          | 126 ++++++++++
 .../partials/ControlStatementMetadata.vue     |   8 -
 src/views/dashboard/IndexView.vue             | 154 +++++++++++-
 .../dashboard/__tests__/IndexView.spec.ts     | 232 +++++++++++++++++-
 11 files changed, 677 insertions(+), 27 deletions(-)
 create mode 100644 src/views/__tests__/LeftSideNavActiveSection.spec.ts

diff --git a/src/components/groups/GroupMembersPanel.vue b/src/components/groups/GroupMembersPanel.vue
index bc7b59b1..96cdac12 100644
--- a/src/components/groups/GroupMembersPanel.vue
+++ b/src/components/groups/GroupMembersPanel.vue
@@ -129,10 +129,6 @@
             {{ adding ? 'Adding…' : 'Add' }}
           </PrimaryButton>
         </div>
-
-        <div class="mt-6 flex justify-end">
-          <SecondaryButton @click="showAddMember = false">Done</SecondaryButton>
-        </div>
       </div>
     </Dialog>
   </div>
diff --git a/src/components/navigation/SideNavCategory.vue b/src/components/navigation/SideNavCategory.vue
index 84317e42..b09e5cb1 100644
--- a/src/components/navigation/SideNavCategory.vue
+++ b/src/components/navigation/SideNavCategory.vue
@@ -1,18 +1,37 @@
 <script setup lang="ts">
+import { watch } from 'vue';
 import ChevronRightIcon from '@primevue/icons/chevronright';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import { useToggle } from '@/composables/useToggle';
 
-defineProps<{
+const props = defineProps<{
   title: string;
   open?: boolean;
+  // Highlights the header to show the currently active route lives under this category
+  // (BCH — LHN active-section indicator).
+  active?: boolean;
 }>();
 
-const { value: isOpen, toggle } = useToggle();
+const { value: isOpen, toggle, set } = useToggle(props.open ?? false);
+
+// Force the category open when it becomes the one containing the active route, so the
+// highlighted child link is actually visible. Never auto-collapses it back — a user who
+// manually closes it keeps that choice while still browsing inside it.
+watch(
+  () => props.open,
+  (open) => {
+    if (open) set(true);
+  },
+);
 </script>
 <template>
   <div
-    class="text-zinc-500 dark:text-slate-100 py-2 font-base pl-6 flex items-center gap-x-4"
+    class="text-zinc-500 dark:text-slate-100 py-2 font-base pl-4 flex items-center gap-x-4 border-l-8"
+    :class="
+      active
+        ? 'bg-ccf-100 dark:bg-slate-800 border-l-slate-300 dark:border-l-slate-500 text-zinc-900 dark:text-white font-medium'
+        : 'border-l-transparent'
+    "
     @click="toggle"
   >
     <slot name="title">
diff --git a/src/components/navigation/SideNavLink.vue b/src/components/navigation/SideNavLink.vue
index 1aa165d4..758b0e65 100644
--- a/src/components/navigation/SideNavLink.vue
+++ b/src/components/navigation/SideNavLink.vue
@@ -4,12 +4,20 @@ import type { RouteLocationRaw } from 'vue-router';
 
 defineProps<{
   to: RouteLocationRaw;
+  // Sticky active-section indicator (set by LeftSideNav), independent of RouterLink's own
+  // exact/descendant route match — see LeftSideNav.vue's activeLinkKey.
+  active?: boolean;
 }>();
 </script>
 <template>
   <RouterLink
     :to="to"
-    class="font-light block py-2 hover:bg-gray-50 dark:hover:bg-slate-800 pl-4 border-l-transparent border-l-8 text-zinc-700 dark:text-slate-200"
+    class="font-light block py-2 hover:bg-gray-50 dark:hover:bg-slate-800 pl-4 border-l-8 text-zinc-700 dark:text-slate-200"
+    :class="
+      active
+        ? 'bg-linear-to-r from-slate-200 to-slate-100 border-l-slate-300 dark:from-slate-700 dark:to-slate-800 dark:border-slate-500 dark:text-slate-200'
+        : 'border-l-transparent'
+    "
   >
     <slot />
   </RouterLink>
diff --git a/src/router/__tests__/index.spec.ts b/src/router/__tests__/index.spec.ts
index 19964a89..cb93faa7 100644
--- a/src/router/__tests__/index.spec.ts
+++ b/src/router/__tests__/index.spec.ts
@@ -2,6 +2,14 @@ import { describe, expect, it } from 'vitest';
 import router from '@/router';
 
 describe('router', () => {
+  it('redirects the root route to the canonical evidence route', () => {
+    // So the initial landing page resolves as 'evidence:index' — the name LeftSideNav's
+    // active-section tracking matches on — and "Evidence" is highlighted immediately,
+    // rather than under a separate 'home' route name nothing in the nav matches.
+    const home = router.getRoutes().find((route) => route.name === 'home');
+    expect(home?.redirect).toEqual({ name: 'evidence:index' });
+  });
+
   it('routes SSP creation to the create view', () => {
     const route = router
       .getRoutes()
diff --git a/src/router/index.ts b/src/router/index.ts
index 0f683215..b92d4837 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -16,10 +16,12 @@ const authenticatedRoutes = [
   {
     path: '/',
     name: 'home',
-    // route level code-splitting
-    // this generates a separate chunk (About.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import('../views/evidence/IndexView.vue'),
+    // Redirects to the canonical evidence route (rather than duplicating its component
+    // under a second route name) so the initial landing page resolves as 'evidence:index'
+    // — the same name LeftSideNav's active-section tracking matches on — and the "Evidence"
+    // nav item is correctly highlighted from the very first render, not just after the user
+    // clicks it.
+    redirect: { name: 'evidence:index' },
     meta: {
       requiresAuth: true,
     },
diff --git a/src/views/LeftSideNav.vue b/src/views/LeftSideNav.vue
index f17ea600..95c54c6f 100644
--- a/src/views/LeftSideNav.vue
+++ b/src/views/LeftSideNav.vue
@@ -8,12 +8,14 @@ import darkLogo from '@/assets/logo-dark.svg';
 import lightMiniLogo from '@/assets/logo-light-mini.svg';
 import darkMiniLogo from '@/assets/logo-dark-mini.svg';
 import { useSidebarStore } from '@/stores/sidebar';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import { usePermissions } from '@/composables/usePermissions';
 import { RESOURCES, ACTIONS } from '@/constants/permissions';
 
 const sidebarStore = useSidebarStore();
 const { can } = usePermissions();
+const route = useRoute();
 
 interface NavigationItem {
   title: string;
@@ -252,6 +254,58 @@ const visibleLinks = computed<Array<NavigationItem>>(() =>
     ),
 );
 
+// Identifies a top-level nav entry for the sticky-active tracking below: a category by its
+// (unique) title, a standalone link by its route name.
+function linkKey(item: NavigationItem): string | undefined {
+  return item.children ? item.title : item.name;
+}
+
+function routeIsUnder(name?: string): boolean {
+  return !!name && route.matched.some((matched) => matched.name === name);
+}
+
+interface ActiveSection {
+  // A category's title, or a standalone top-level link's route name.
+  topLevel?: string;
+  // Set only when `topLevel` is a category: the specific child route name active within
+  // it, so "Governance > Catalogs" stays distinguishable from "Governance > Profiles".
+  child?: string;
+}
+
+// Which nav entry, at both levels, the CURRENT route belongs to (a category whose
+// children include the route anywhere in its matched chain, or a standalone link whose
+// own route matches) — or undefined when the route matches nothing in the nav at all.
+function matchingSection(): ActiveSection | undefined {
+  for (const link of links.value) {
+    if (link.children) {
+      const child = link.children.find((c) => routeIsUnder(c.name));
+      if (child) {
+        return { topLevel: link.title, child: child.name };
+      }
+    } else if (routeIsUnder(link.name)) {
+      return { topLevel: link.name };
+    }
+  }
+  return undefined;
+}
+
+// The section (and, within it, the specific item) the user is "in", kept sticky at both
+// levels: it only moves when navigation lands on a route that genuinely belongs to a
+// different nav entry. A button inside a page pushing to some unlisted detail route (e.g.
+// "New Catalog", never registered as a nav child) would otherwise match nothing and blank
+// the highlight out from under the user — at either level — even though they haven't left
+// that item.
+const activeSection = ref<ActiveSection>(matchingSection() ?? {});
+watch(
+  () => route.fullPath,
+  () => {
+    const matched = matchingSection();
+    if (matched !== undefined) {
+      activeSection.value = matched;
+    }
+  },
+);
+
 const footLinks = ref<Array<NavigationItem>>([
   {
     name: 'logout',
@@ -296,7 +350,12 @@ const footLinks = ref<Array<NavigationItem>>([
       <div>
         <!-- Main Navigation Items -->
         <template v-for="link in visibleLinks" :key="link.name">
-          <SideNavCategory :title="link.title" v-if="link.children">
+          <SideNavCategory
+            :title="link.title"
+            :open="linkKey(link) === activeSection.topLevel"
+            :active="linkKey(link) === activeSection.topLevel"
+            v-if="link.children"
+          >
             <template #title>
               <span>{{
                 sidebarStore.open ? link.title : abbreviated(link)
@@ -305,6 +364,7 @@ const footLinks = ref<Array<NavigationItem>>([
             <template v-for="child in link.children" :key="child.name">
               <SideNavLink
                 :to="{ name: child.name }"
+                :active="child.name === activeSection.child"
                 v-tooltip.right="{
                   value: `${link.title} | ${child.title}`,
                   disabled: sidebarStore.open,
@@ -317,6 +377,7 @@ const footLinks = ref<Array<NavigationItem>>([
           <SideNavLink
             v-else
             :to="{ name: link.name }"
+            :active="link.name === activeSection.topLevel"
             v-tooltip.hover.right="{
               value: link.title,
               disabled: sidebarStore.open,
diff --git a/src/views/__tests__/LeftSideNav.spec.ts b/src/views/__tests__/LeftSideNav.spec.ts
index e5179197..93976011 100644
--- a/src/views/__tests__/LeftSideNav.spec.ts
+++ b/src/views/__tests__/LeftSideNav.spec.ts
@@ -1,12 +1,30 @@
-import { beforeEach, describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { createPinia, setActivePinia } from 'pinia';
 import { useSidebarStore } from '@/stores/sidebar';
 import LeftSideNav from '../LeftSideNav.vue';
+import SideNavCategory from '@/components/navigation/SideNavCategory.vue';
+
+// A simple, non-reactive stand-in: fine for the initial-render check below, which mounts
+// fresh per test. The sticky persistence-across-navigation behavior (LeftSideNav watching
+// route.fullPath) needs a genuinely reactive route and is covered separately in
+// LeftSideNavActiveSection.spec.ts using a real router.
+const { mockRoute } = vi.hoisted(() => ({
+  mockRoute: { matched: [] as Array<{ name?: string }> },
+}));
+
+vi.mock('vue-router', () => ({
+  useRoute: () => mockRoute,
+  RouterLink: {
+    name: 'RouterLink',
+    template: '<a><slot /></a>',
+  },
+}));
 
 describe('LeftSideNav', () => {
   beforeEach(() => {
     setActivePinia(createPinia());
+    mockRoute.matched = [];
   });
 
   it('no longer renders the retired admin links', () => {
@@ -298,4 +316,46 @@ describe('LeftSideNav', () => {
       expect(indexOf('Systems')).toBeLessThan(indexOf(label));
     }
   });
+
+  it('highlights and opens the category containing the active route', () => {
+    const sidebarStore = useSidebarStore();
+    sidebarStore.open = true;
+    // 'catalog-list' is a child of Control Definitions.
+    mockRoute.matched = [{ name: 'catalog-list' }];
+
+    const wrapper = mount(LeftSideNav, {
+      global: {
+        directives: {
+          tooltip: {
+            mounted: () => undefined,
+          },
+        },
+        stubs: {
+          SideNav: {
+            template: '<div><slot name="logo" /><slot /></div>',
+          },
+          SideNavLink: {
+            template: '<a class="sidenav-link"><slot /></a>',
+          },
+          SideNavLogo: {
+            template: '<img alt="logo" />',
+          },
+        },
+      },
+    });
+
+    const governanceCategory = wrapper
+      .findAllComponents(SideNavCategory)
+      .find((category) => category.props('title') === 'Control Definitions');
+    const workflowsCategory = wrapper
+      .findAllComponents(SideNavCategory)
+      .find((category) => category.props('title') === 'Workflows');
+
+    expect(governanceCategory?.props('active')).toBe(true);
+    expect(governanceCategory?.props('open')).toBe(true);
+
+    // A category that doesn't contain the active route is neither highlighted nor forced open.
+    expect(workflowsCategory?.props('active')).toBe(false);
+    expect(workflowsCategory?.props('open')).toBe(false);
+  });
 });
diff --git a/src/views/__tests__/LeftSideNavActiveSection.spec.ts b/src/views/__tests__/LeftSideNavActiveSection.spec.ts
new file mode 100644
index 00000000..ee49e17a
--- /dev/null
+++ b/src/views/__tests__/LeftSideNavActiveSection.spec.ts
@@ -0,0 +1,126 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
+import { createPinia, setActivePinia } from 'pinia';
+import { useSidebarStore } from '@/stores/sidebar';
+import LeftSideNav from '../LeftSideNav.vue';
+import SideNavCategory from '@/components/navigation/SideNavCategory.vue';
+import SideNavLink from '@/components/navigation/SideNavLink.vue';
+
+// Every route name referenced by LeftSideNav.vue's nav config, plus one detail route
+// that is never registered as a nav item anywhere (the "unlisted page a button pushes
+// to" scenario). A real router is used (rather than mocking vue-router) so route.matched
+// changes on navigation are genuinely reactive, exercising LeftSideNav's sticky
+// active-section tracking end to end instead of hand-simulating reactivity.
+const routeNames = [
+  'admin-agents',
+  'admin-diagnostics',
+  'admin-groups',
+  'admin-import',
+  'admin-parties',
+  'admin-risk-templates',
+  'admin-risks',
+  'admin-roles',
+  'admin-subject-templates',
+  'assessment-plans',
+  'assessment-results',
+  'catalog-list',
+  'component-definitions',
+  'control-links-list',
+  'controls:index',
+  'dashboards',
+  'evidence:index',
+  'inventory:index',
+  'lineage',
+  'logout',
+  'plan-of-action-and-milestones',
+  'profile-list',
+  'risks:index',
+  'system-security-plans',
+  'system:overview',
+  'users-list',
+  'workflow-instances:index',
+  'workflow:index',
+  // Not a nav item anywhere — simulates a page an in-page button pushes to (e.g. the
+  // real "New Catalog" creation page reached from a button on the catalogs list).
+  'catalog-create',
+];
+
+function createTestRouter() {
+  return createRouter({
+    history: createWebHistory(),
+    routes: routeNames.map((name) => ({
+      path: `/${name.replace(':', '-')}`,
+      name,
+      component: { template: '<div />' },
+    })),
+  });
+}
+
+describe('LeftSideNav active-section persistence', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('keeps the previous section highlighted through an unlisted route, and only switches once a genuinely different section is reached', async () => {
+    const router = createTestRouter();
+    await router.push({ name: 'catalog-list' }); // a child of Control Definitions
+    await router.isReady();
+
+    const sidebarStore = useSidebarStore();
+    sidebarStore.open = true;
+
+    const wrapper = mount(LeftSideNav, {
+      global: {
+        plugins: [router],
+        directives: {
+          tooltip: {
+            mounted: () => undefined,
+          },
+        },
+        stubs: {
+          SideNav: {
+            template: '<div><slot name="logo" /><slot /></div>',
+          },
+          SideNavLogo: {
+            template: '<img alt="logo" />',
+          },
+        },
+      },
+    });
+
+    const findCategory = (title: string) =>
+      wrapper
+        .findAllComponents(SideNavCategory)
+        .find((category) => category.props('title') === title);
+    const findChildLink = (routeName: string) =>
+      wrapper
+        .findAllComponents(SideNavLink)
+        .find(
+          (link) =>
+            (link.props('to') as { name?: string } | undefined)?.name ===
+            routeName,
+        );
+
+    expect(findCategory('Control Definitions')?.props('active')).toBe(true);
+    expect(findChildLink('catalog-list')?.props('active')).toBe(true);
+
+    // An in-page button (e.g. "New Catalog") pushes to a route that was never
+    // registered as a nav child anywhere, one level down from the list page.
+    await router.push({ name: 'catalog-create' });
+    await wrapper.vm.$nextTick();
+
+    expect(findCategory('Control Definitions')?.props('active')).toBe(true);
+    expect(findCategory('Control Definitions')?.props('open')).toBe(true);
+    expect(findChildLink('catalog-list')?.props('active')).toBe(true);
+
+    // Only a route that genuinely belongs to a different nav entry moves the highlight —
+    // at either level.
+    await router.push({ name: 'workflow:index' });
+    await wrapper.vm.$nextTick();
+
+    expect(findCategory('Control Definitions')?.props('active')).toBe(false);
+    expect(findChildLink('catalog-list')?.props('active')).toBe(false);
+    expect(findCategory('Workflows')?.props('active')).toBe(true);
+  });
+});
diff --git a/src/views/control-implementations/partials/ControlStatementMetadata.vue b/src/views/control-implementations/partials/ControlStatementMetadata.vue
index 24a5afd3..8c79f901 100644
--- a/src/views/control-implementations/partials/ControlStatementMetadata.vue
+++ b/src/views/control-implementations/partials/ControlStatementMetadata.vue
@@ -55,14 +55,6 @@ function formatLinks(links: Statement['links']): string {
       />
       <p class="text-sm">{{ statement.remarks || 'None' }}</p>
     </div>
-    <div>
-      <TooltipTitle
-        text="Description"
-        tooltip-key="statement.description"
-        underline-class="text-sm font-medium text-gray-500 underline decoration-dotted cursor-help"
-      />
-      <p class="text-sm">{{ statement.description || 'None' }}</p>
-    </div>
     <div>
       <TooltipTitle
         text="Props"
diff --git a/src/views/dashboard/IndexView.vue b/src/views/dashboard/IndexView.vue
index 21272942..b46e5bdb 100644
--- a/src/views/dashboard/IndexView.vue
+++ b/src/views/dashboard/IndexView.vue
@@ -27,7 +27,66 @@
 
   <div
     v-if="dashboards && dashboards.length > 0"
-    class="mt-6 overflow-hidden rounded-lg border border-ccf-300 bg-white shadow dark:border-slate-700 dark:bg-slate-900"
+    class="mt-6 flex flex-wrap items-center gap-x-6 gap-y-3"
+  >
+    <div class="flex items-center gap-3">
+      <label
+        for="scope-filter"
+        class="text-sm font-medium text-gray-700 dark:text-slate-300"
+      >
+        Scope
+      </label>
+      <Select
+        id="scope-filter"
+        v-model="selectedScope"
+        :options="scopeFilterOptions"
+        optionLabel="label"
+        optionValue="value"
+        class="w-64"
+        data-testid="scope-filter"
+      />
+    </div>
+    <div class="flex items-center gap-3">
+      <label
+        for="control-filter"
+        class="text-sm font-medium text-gray-700 dark:text-slate-300"
+      >
+        Control
+      </label>
+      <Select
+        id="control-filter"
+        v-model="selectedControl"
+        :options="controlFilterOptions"
+        optionLabel="label"
+        optionValue="value"
+        filter
+        class="w-64"
+        data-testid="control-filter"
+      />
+    </div>
+    <div class="flex items-center gap-3">
+      <label
+        for="component-filter"
+        class="text-sm font-medium text-gray-700 dark:text-slate-300"
+      >
+        Component
+      </label>
+      <Select
+        id="component-filter"
+        v-model="selectedComponent"
+        :options="componentFilterOptions"
+        optionLabel="label"
+        optionValue="value"
+        filter
+        class="w-64"
+        data-testid="component-filter"
+      />
+    </div>
+  </div>
+
+  <div
+    v-if="filteredDashboards.length > 0"
+    class="mt-4 overflow-hidden rounded-lg border border-ccf-300 bg-white shadow dark:border-slate-700 dark:bg-slate-900"
   >
     <table class="table-auto w-full dark:text-slate-300">
       <thead class="bg-gray-50 dark:bg-slate-800">
@@ -62,7 +121,7 @@
       </thead>
       <tbody>
         <template
-          v-for="dashboard in dashboards"
+          v-for="dashboard in filteredDashboards"
           :key="dashboardKey(dashboard)"
         >
           <tr
@@ -160,6 +219,19 @@
     </table>
   </div>
 
+  <Message
+    v-else-if="dashboards && dashboards.length > 0"
+    severity="warn"
+    variant="outlined"
+    class="mt-4"
+  >
+    <h4 class="font-bold">No Filters Match These Filters</h4>
+    <p>
+      Try a different scope, control, or component, or reset them all to "All"
+      to see every filter.
+    </p>
+  </Message>
+
   <Message v-else severity="warn" variant="outlined" class="mt-6">
     <h4 class="font-bold">No Filters Found</h4>
     <p>
@@ -192,6 +264,7 @@ import PrimaryButton from '@/volt/PrimaryButton.vue';
 import SecondaryButton from '@/volt/SecondaryButton.vue';
 import Chip from '@/volt/Chip.vue';
 import Message from '@/volt/Message.vue';
+import Select from '@/volt/Select.vue';
 import { useDataApi } from '@/composables/axios';
 import { usePermissions } from '@/composables/usePermissions';
 import { RESOURCES, ACTIONS } from '@/constants/permissions';
@@ -225,6 +298,83 @@ const sspTitleById = computed(
     ),
 );
 
+// 'all' shows every filter regardless of scope; null matches only unscoped (Global)
+// filters; any other value matches filters scoped to that SSP.
+const selectedScope = ref<string | null>('all');
+
+const scopeFilterOptions = computed(() => [
+  { label: 'All Scopes', value: 'all' },
+  { label: 'Global', value: null },
+  ...(systemSecurityPlans.value ?? []).map((ssp) => ({
+    label: ssp.metadata.title,
+    value: ssp.uuid,
+  })),
+]);
+
+// 'all' shows filters with any (or no) controls/components; any other value matches
+// filters that include that specific control/component.
+const selectedControl = ref<string>('all');
+const selectedComponent = ref<string>('all');
+
+const controlFilterOptions = computed(() => {
+  const controlsById = new Map<string, string>();
+  for (const dashboard of dashboards.value ?? []) {
+    for (const control of dashboard.controls ?? []) {
+      controlsById.set(control.id, control.title ?? control.id);
+    }
+  }
+  return [
+    { label: 'All Controls', value: 'all' },
+    ...Array.from(controlsById, ([id, title]) => ({
+      label: `${id} — ${title}`,
+      value: id,
+    })).sort((a, b) => a.label.localeCompare(b.label)),
+  ];
+});
+
+const componentFilterOptions = computed(() => {
+  const componentsByUuid = new Map<string, string>();
+  for (const dashboard of dashboards.value ?? []) {
+    for (const component of dashboard.components ?? []) {
+      componentsByUuid.set(component.uuid, component.title ?? component.uuid);
+    }
+  }
+  return [
+    { label: 'All Components', value: 'all' },
+    ...Array.from(componentsByUuid, ([uuid, title]) => ({
+      label: title,
+      value: uuid,
+    })).sort((a, b) => a.label.localeCompare(b.label)),
+  ];
+});
+
+const filteredDashboards = computed(() => {
+  return (dashboards.value ?? [])
+    .filter((dashboard) => {
+      if (selectedScope.value === 'all') {
+        return true;
+      }
+      if (selectedScope.value === null) {
+        return !dashboard.sspId;
+      }
+      return dashboard.sspId === selectedScope.value;
+    })
+    .filter(
+      (dashboard) =>
+        selectedControl.value === 'all' ||
+        (dashboard.controls ?? []).some(
+          (control) => control.id === selectedControl.value,
+        ),
+    )
+    .filter(
+      (dashboard) =>
+        selectedComponent.value === 'all' ||
+        (dashboard.components ?? []).some(
+          (component) => component.uuid === selectedComponent.value,
+        ),
+    );
+});
+
 function dashboardKey(dashboard: Dashboard): string {
   return dashboard.id ?? dashboard.uuid ?? dashboard.name;
 }
diff --git a/src/views/dashboard/__tests__/IndexView.spec.ts b/src/views/dashboard/__tests__/IndexView.spec.ts
index bff3423d..97c0f684 100644
--- a/src/views/dashboard/__tests__/IndexView.spec.ts
+++ b/src/views/dashboard/__tests__/IndexView.spec.ts
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { shallowRef } from 'vue';
 import type { Dashboard } from '@/stores/filters';
-import type { SystemSecurityPlan } from '@/oscal';
+import type { Control, SystemComponent, SystemSecurityPlan } from '@/oscal';
 
 const dashboards = shallowRef<Dashboard[]>([]);
 const systemSecurityPlans = shallowRef<SystemSecurityPlan[]>([]);
@@ -59,7 +59,11 @@ vi.mock('@/views/dashboard/partials/FilterEditModal.vue', () => ({
 
 import IndexView from '../IndexView.vue';
 
-function makeDashboard(name: string, sspId: string | null = null): Dashboard {
+function makeDashboard(
+  name: string,
+  sspId: string | null = null,
+  overrides: Partial<Pick<Dashboard, 'controls' | 'components'>> = {},
+): Dashboard {
   return {
     id: name,
     uuid: name,
@@ -68,6 +72,7 @@ function makeDashboard(name: string, sspId: string | null = null): Dashboard {
     filter: {} as Dashboard['filter'],
     controls: [],
     components: [],
+    ...overrides,
   };
 }
 
@@ -78,6 +83,14 @@ function makeSsp(uuid: string, title: string): SystemSecurityPlan {
   } as SystemSecurityPlan;
 }
 
+function makeControl(id: string, title: string): Control {
+  return { id, title } as Control;
+}
+
+function makeComponent(uuid: string, title: string): SystemComponent {
+  return { uuid, title } as SystemComponent;
+}
+
 function mountView() {
   return mount(IndexView, {
     global: {
@@ -95,6 +108,22 @@ function mountView() {
           template: '<button @click="$emit(\'click\')"><slot /></button>',
         },
         RouterLink: { props: ['to'], template: '<a><slot /></a>' },
+        // A native <select> would coerce the `null` (Global) option's value to the
+        // string "null" on round-trip; emit the real option value instead via buttons.
+        // There are three Select instances on the page (scope/control/component), so
+        // options are keyed by the select's own id to keep them distinguishable.
+        Select: {
+          props: ['id', 'modelValue', 'options'],
+          emits: ['update:modelValue'],
+          template: `<div>
+            <button
+              v-for="option in options"
+              :key="String(option.value)"
+              :data-testid="id + '-option-' + String(option.value)"
+              @click="$emit('update:modelValue', option.value)"
+            >{{ option.label }}</button>
+          </div>`,
+        },
       },
     },
   });
@@ -128,6 +157,205 @@ describe('Dashboard IndexView (Filters table)', () => {
     expect(wrapper.text()).toContain('No Filters Found');
   });
 
+  it('filters the filter list by scope', async () => {
+    dashboards.value = [
+      makeDashboard('Global filter'),
+      makeDashboard('Payments filter', 'ssp-1'),
+      makeDashboard('Billing filter', 'ssp-2'),
+    ];
+    systemSecurityPlans.value = [
+      makeSsp('ssp-1', 'Payments SSP'),
+      makeSsp('ssp-2', 'Billing SSP'),
+    ];
+
+    const wrapper = mountView();
+
+    // Defaults to showing every filter, regardless of scope.
+    expect(
+      wrapper.find('[data-testid="filter-row-Global filter"]').exists(),
+    ).toBe(true);
+    expect(
+      wrapper.find('[data-testid="filter-row-Payments filter"]').exists(),
+    ).toBe(true);
+    expect(
+      wrapper.find('[data-testid="filter-row-Billing filter"]').exists(),
+    ).toBe(true);
+
+    // Selecting "Global" shows only unscoped filters.
+    await wrapper
+      .find('[data-testid="scope-filter-option-null"]')
+      .trigger('click');
+    expect(
+      wrapper.find('[data-testid="filter-row-Global filter"]').exists(),
+    ).toBe(true);
+    expect(
+      wrapper.find('[data-testid="filter-row-Payments filter"]').exists(),
+    ).toBe(false);
+    expect(
+      wrapper.find('[data-testid="filter-row-Billing filter"]').exists(),
+    ).toBe(false);
+
+    // Selecting a specific SSP shows only that SSP's filters.
+    await wrapper
+      .find('[data-testid="scope-filter-option-ssp-1"]')
+      .trigger('click');
+    expect(
+      wrapper.find('[data-testid="filter-row-Global filter"]').exists(),
+    ).toBe(false);
+    expect(
+      wrapper.find('[data-testid="filter-row-Payments filter"]').exists(),
+    ).toBe(true);
+    expect(
+      wrapper.find('[data-testid="filter-row-Billing filter"]').exists(),
+    ).toBe(false);
+
+    // Selecting "All Scopes" again restores every filter.
+    await wrapper
+      .find('[data-testid="scope-filter-option-all"]')
+      .trigger('click');
+    expect(
+      wrapper.find('[data-testid="filter-row-Global filter"]').exists(),
+    ).toBe(true);
+    expect(
+      wrapper.find('[data-testid="filter-row-Payments filter"]').exists(),
+    ).toBe(true);
+    expect(
+      wrapper.find('[data-testid="filter-row-Billing filter"]').exists(),
+    ).toBe(true);
+  });
+
+  it('shows a distinct message when filters exist but none match the selected scope', async () => {
+    dashboards.value = [makeDashboard('Global filter')];
+    systemSecurityPlans.value = [makeSsp('ssp-1', 'Payments SSP')];
+
+    const wrapper = mountView();
+    await wrapper
+      .find('[data-testid="scope-filter-option-ssp-1"]')
+      .trigger('click');
+
+    expect(wrapper.text()).toContain('No Filters Match These Filters');
+    expect(wrapper.text()).not.toContain('No Filters Found');
+    expect(
+      wrapper.find('[data-testid="filter-row-Global filter"]').exists(),
+    ).toBe(false);
+  });
+
+  it('filters the filter list by control', async () => {
+    dashboards.value = [
+      makeDashboard('AC filter', null, {
+        controls: [makeControl('AC-1', 'Access Control Policy')],
+      }),
+      makeDashboard('AU filter', null, {
+        controls: [makeControl('AU-1', 'Audit Policy')],
+      }),
+      makeDashboard('No controls filter'),
+    ];
+
+    const wrapper = mountView();
+
+    expect(
+      wrapper.find('[data-testid="control-filter-option-AC-1"]').exists(),
+    ).toBe(true);
+    expect(
+      wrapper.find('[data-testid="control-filter-option-AU-1"]').exists(),
+    ).toBe(true);
+
+    await wrapper
+      .find('[data-testid="control-filter-option-AC-1"]')
+      .trigger('click');
+
+    expect(wrapper.find('[data-testid="filter-row-AC filter"]').exists()).toBe(
+      true,
+    );
+    expect(wrapper.find('[data-testid="filter-row-AU filter"]').exists()).toBe(
+      false,
+    );
+    expect(
+      wrapper.find('[data-testid="filter-row-No controls filter"]').exists(),
+    ).toBe(false);
+
+    await wrapper
+      .find('[data-testid="control-filter-option-all"]')
+      .trigger('click');
+
+    expect(wrapper.find('[data-testid="filter-row-AC filter"]').exists()).toBe(
+      true,
+    );
+    expect(wrapper.find('[data-testid="filter-row-AU filter"]').exists()).toBe(
+      true,
+    );
+    expect(
+      wrapper.find('[data-testid="filter-row-No controls filter"]').exists(),
+    ).toBe(true);
+  });
+
+  it('filters the filter list by component', async () => {
+    dashboards.value = [
+      makeDashboard('API filter', null, {
+        components: [makeComponent('comp-api', 'API Gateway')],
+      }),
+      makeDashboard('DB filter', null, {
+        components: [makeComponent('comp-db', 'Database')],
+      }),
+    ];
+
+    const wrapper = mountView();
+
+    await wrapper
+      .find('[data-testid="component-filter-option-comp-db"]')
+      .trigger('click');
+
+    expect(wrapper.find('[data-testid="filter-row-API filter"]').exists()).toBe(
+      false,
+    );
+    expect(wrapper.find('[data-testid="filter-row-DB filter"]').exists()).toBe(
+      true,
+    );
+  });
+
+  it('combines scope, control, and component filters', async () => {
+    dashboards.value = [
+      makeDashboard('Match', 'ssp-1', {
+        controls: [makeControl('AC-1', 'Access Control Policy')],
+        components: [makeComponent('comp-api', 'API Gateway')],
+      }),
+      makeDashboard('Wrong scope', 'ssp-2', {
+        controls: [makeControl('AC-1', 'Access Control Policy')],
+        components: [makeComponent('comp-api', 'API Gateway')],
+      }),
+      makeDashboard('Wrong control', 'ssp-1', {
+        controls: [makeControl('AU-1', 'Audit Policy')],
+        components: [makeComponent('comp-api', 'API Gateway')],
+      }),
+    ];
+    systemSecurityPlans.value = [
+      makeSsp('ssp-1', 'Payments SSP'),
+      makeSsp('ssp-2', 'Billing SSP'),
+    ];
+
+    const wrapper = mountView();
+
+    await wrapper
+      .find('[data-testid="scope-filter-option-ssp-1"]')
+      .trigger('click');
+    await wrapper
+      .find('[data-testid="control-filter-option-AC-1"]')
+      .trigger('click');
+    await wrapper
+      .find('[data-testid="component-filter-option-comp-api"]')
+      .trigger('click');
+
+    expect(wrapper.find('[data-testid="filter-row-Match"]').exists()).toBe(
+      true,
+    );
+    expect(
+      wrapper.find('[data-testid="filter-row-Wrong scope"]').exists(),
+    ).toBe(false);
+    expect(
+      wrapper.find('[data-testid="filter-row-Wrong control"]').exists(),
+    ).toBe(false);
+  });
+
   it('loads the dashboard chart only when a row is expanded', async () => {
     dashboards.value = [makeDashboard('Global filter')];
     const wrapper = mountView();

From 607fee32692bd514d3c99a187359bc9e6ce089e1 Mon Sep 17 00:00:00 2001
From: Ian Miell <ian.miell@gmail.com>
Date: Thu, 24 Sep 2026 15:36:57 +0100
Subject: [PATCH 2/5] Store state of LHN

---
 src/components/navigation/SideNavCategory.vue |  17 ++-
 src/views/LeftSideNav.vue                     |  21 +++-
 src/views/__tests__/LeftSideNav.spec.ts       |  72 ++++++++++-
 .../LeftSideNavActiveSection.spec.ts          | 117 +++++++++++++-----
 4 files changed, 183 insertions(+), 44 deletions(-)

diff --git a/src/components/navigation/SideNavCategory.vue b/src/components/navigation/SideNavCategory.vue
index b09e5cb1..ab2d3063 100644
--- a/src/components/navigation/SideNavCategory.vue
+++ b/src/components/navigation/SideNavCategory.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { watch } from 'vue';
+import { computed, watch } from 'vue';
 import ChevronRightIcon from '@primevue/icons/chevronright';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
-import { useToggle } from '@/composables/useToggle';
+import { useLeftNavCategoriesStore } from '@/stores/leftNavCategories';
 
 const props = defineProps<{
   title: string;
@@ -12,7 +12,11 @@ const props = defineProps<{
   active?: boolean;
 }>();
 
-const { value: isOpen, toggle, set } = useToggle(props.open ?? false);
+// Open/closed state lives in this store (persisted to localStorage, keyed by title) rather
+// than local component state, so a submenu the user expands — even with nothing under it
+// selected — stays open across a hard refresh or a new session.
+const categoriesStore = useLeftNavCategoriesStore();
+const isOpen = computed(() => categoriesStore.isOpen(props.title));
 
 // Force the category open when it becomes the one containing the active route, so the
 // highlighted child link is actually visible. Never auto-collapses it back — a user who
@@ -20,9 +24,14 @@ const { value: isOpen, toggle, set } = useToggle(props.open ?? false);
 watch(
   () => props.open,
   (open) => {
-    if (open) set(true);
+    if (open) categoriesStore.setOpen(props.title, true);
   },
+  { immediate: true },
 );
+
+function toggle() {
+  categoriesStore.setOpen(props.title, !isOpen.value);
+}
 </script>
 <template>
   <div
diff --git a/src/views/LeftSideNav.vue b/src/views/LeftSideNav.vue
index 95c54c6f..eddd2b48 100644
--- a/src/views/LeftSideNav.vue
+++ b/src/views/LeftSideNav.vue
@@ -9,13 +9,14 @@ import lightMiniLogo from '@/assets/logo-light-mini.svg';
 import darkMiniLogo from '@/assets/logo-dark-mini.svg';
 import { useSidebarStore } from '@/stores/sidebar';
 import { computed, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { usePermissions } from '@/composables/usePermissions';
 import { RESOURCES, ACTIONS } from '@/constants/permissions';
 
 const sidebarStore = useSidebarStore();
 const { can } = usePermissions();
 const route = useRoute();
+const router = useRouter();
 
 interface NavigationItem {
   title: string;
@@ -261,7 +262,23 @@ function linkKey(item: NavigationItem): string | undefined {
 }
 
 function routeIsUnder(name?: string): boolean {
-  return !!name && route.matched.some((matched) => matched.name === name);
+  if (!name) {
+    return false;
+  }
+  if (route.matched.some((matched) => matched.name === name)) {
+    return true;
+  }
+  // Many sections (e.g. catalogs) are flat sibling routes — /catalogs, /catalogs/:id,
+  // /catalogs/new — rather than nested child routes, so a detail/create page reached
+  // directly (deep link, hard refresh) never shows up in route.matched under the list
+  // route's name. Falling back to a path-prefix check lets a fresh load on such a page
+  // still resolve to the right nav item without depending on any in-session state.
+  try {
+    const basePath = router.resolve({ name }).path;
+    return route.path === basePath || route.path.startsWith(`${basePath}/`);
+  } catch {
+    return false;
+  }
 }
 
 interface ActiveSection {
diff --git a/src/views/__tests__/LeftSideNav.spec.ts b/src/views/__tests__/LeftSideNav.spec.ts
index 93976011..299f9e5b 100644
--- a/src/views/__tests__/LeftSideNav.spec.ts
+++ b/src/views/__tests__/LeftSideNav.spec.ts
@@ -6,15 +6,21 @@ import LeftSideNav from '../LeftSideNav.vue';
 import SideNavCategory from '@/components/navigation/SideNavCategory.vue';
 
 // A simple, non-reactive stand-in: fine for the initial-render check below, which mounts
-// fresh per test. The sticky persistence-across-navigation behavior (LeftSideNav watching
-// route.fullPath) needs a genuinely reactive route and is covered separately in
-// LeftSideNavActiveSection.spec.ts using a real router.
+// fresh per test. The sticky/path-prefix persistence-across-navigation behavior
+// (LeftSideNav watching route.fullPath and resolving nav item paths) needs a genuinely
+// reactive route and router, and is covered separately in LeftSideNavActiveSection.spec.ts
+// using a real router.
 const { mockRoute } = vi.hoisted(() => ({
-  mockRoute: { matched: [] as Array<{ name?: string }> },
+  mockRoute: { matched: [] as Array<{ name?: string }>, path: '/' },
 }));
 
 vi.mock('vue-router', () => ({
   useRoute: () => mockRoute,
+  useRouter: () => ({
+    resolve: () => {
+      throw new Error('not registered');
+    },
+  }),
   RouterLink: {
     name: 'RouterLink',
     template: '<a><slot /></a>',
@@ -25,6 +31,10 @@ describe('LeftSideNav', () => {
   beforeEach(() => {
     setActivePinia(createPinia());
     mockRoute.matched = [];
+    mockRoute.path = '/';
+    // Category open/closed state now persists to real localStorage (leftNavCategories
+    // store), which outlives a fresh Pinia instance — clear it so tests stay isolated.
+    localStorage.clear();
   });
 
   it('no longer renders the retired admin links', () => {
@@ -358,4 +368,58 @@ describe('LeftSideNav', () => {
     expect(workflowsCategory?.props('active')).toBe(false);
     expect(workflowsCategory?.props('open')).toBe(false);
   });
+
+  it('keeps a manually opened category open across a hard refresh, even with nothing under it selected', async () => {
+    mockRoute.matched = []; // nothing active anywhere
+    const sidebarStore = useSidebarStore();
+    sidebarStore.open = true;
+
+    const mountFresh = () =>
+      mount(LeftSideNav, {
+        global: {
+          directives: {
+            tooltip: {
+              mounted: () => undefined,
+            },
+          },
+          stubs: {
+            SideNav: {
+              template: '<div><slot name="logo" /><slot /></div>',
+            },
+            SideNavLink: {
+              template: '<a class="sidenav-link"><slot /></a>',
+            },
+            SideNavLogo: {
+              template: '<img alt="logo" />',
+            },
+          },
+        },
+      });
+
+    const findWorkflowsChildren = (wrapper: ReturnType<typeof mountFresh>) =>
+      wrapper
+        .findAllComponents(SideNavCategory)
+        .find((category) => category.props('title') === 'Workflows')!
+        .find('div.mb-2');
+
+    const wrapper = mountFresh();
+    expect(findWorkflowsChildren(wrapper).classes()).toContain('hidden');
+
+    const workflowsHeader = wrapper
+      .findAllComponents(SideNavCategory)
+      .find((category) => category.props('title') === 'Workflows')!
+      .find('div');
+    await workflowsHeader.trigger('click');
+
+    expect(findWorkflowsChildren(wrapper).classes()).not.toContain('hidden');
+
+    // Simulate a hard refresh: a brand-new Pinia instance (so the store itself is rebuilt
+    // from scratch, not just re-read from memory) backed by the same localStorage, exactly
+    // as a real browser reload would leave it.
+    setActivePinia(createPinia());
+    const wrapperAfterRefresh = mountFresh();
+    expect(findWorkflowsChildren(wrapperAfterRefresh).classes()).not.toContain(
+      'hidden',
+    );
+  });
 });
diff --git a/src/views/__tests__/LeftSideNavActiveSection.spec.ts b/src/views/__tests__/LeftSideNavActiveSection.spec.ts
index ee49e17a..2cae5f05 100644
--- a/src/views/__tests__/LeftSideNavActiveSection.spec.ts
+++ b/src/views/__tests__/LeftSideNavActiveSection.spec.ts
@@ -7,11 +7,12 @@ import LeftSideNav from '../LeftSideNav.vue';
 import SideNavCategory from '@/components/navigation/SideNavCategory.vue';
 import SideNavLink from '@/components/navigation/SideNavLink.vue';
 
-// Every route name referenced by LeftSideNav.vue's nav config, plus one detail route
-// that is never registered as a nav item anywhere (the "unlisted page a button pushes
-// to" scenario). A real router is used (rather than mocking vue-router) so route.matched
-// changes on navigation are genuinely reactive, exercising LeftSideNav's sticky
-// active-section tracking end to end instead of hand-simulating reactivity.
+// Every route name referenced by LeftSideNav.vue's nav config, plus two routes that are
+// never registered as nav items anywhere but share a URL prefix with one that is
+// ('catalog-create'/'catalog-view', siblings of 'catalog-list' under /catalogs) — the
+// "New Catalog" button and a catalog detail deep link. A real router is used (rather than
+// mocking vue-router) so route.matched/route.path changes on navigation are genuinely
+// reactive, exercising LeftSideNav's active-section tracking end to end.
 const routeNames = [
   'admin-agents',
   'admin-diagnostics',
@@ -41,25 +42,93 @@ const routeNames = [
   'users-list',
   'workflow-instances:index',
   'workflow:index',
-  // Not a nav item anywhere — simulates a page an in-page button pushes to (e.g. the
-  // real "New Catalog" creation page reached from a button on the catalogs list).
-  'catalog-create',
 ];
 
 function createTestRouter() {
   return createRouter({
     history: createWebHistory(),
-    routes: routeNames.map((name) => ({
-      path: `/${name.replace(':', '-')}`,
-      name,
-      component: { template: '<div />' },
-    })),
+    routes: [
+      ...routeNames.map((name) => ({
+        // 'catalog-list' mirrors the real router's /catalogs path, since the whole point
+        // of the tests below is exercising the path-prefix relationship with its siblings.
+        path:
+          name === 'catalog-list' ? '/catalogs' : `/${name.replace(':', '-')}`,
+        name,
+        component: { template: '<div />' },
+      })),
+      // Flat siblings of 'catalog-list', not themselves nav items — matches the real
+      // router's shape (/catalogs, /catalogs/:id, /catalogs/new).
+      {
+        path: '/catalogs/new',
+        name: 'catalog-create',
+        component: { template: '<div />' },
+      },
+      {
+        path: '/catalogs/:id',
+        name: 'catalog-view',
+        component: { template: '<div />' },
+      },
+    ],
+  });
+}
+
+function mountNav(router: ReturnType<typeof createTestRouter>) {
+  const sidebarStore = useSidebarStore();
+  sidebarStore.open = true;
+
+  return mount(LeftSideNav, {
+    global: {
+      plugins: [router],
+      directives: {
+        tooltip: {
+          mounted: () => undefined,
+        },
+      },
+      stubs: {
+        SideNav: {
+          template: '<div><slot name="logo" /><slot /></div>',
+        },
+        SideNavLogo: {
+          template: '<img alt="logo" />',
+        },
+      },
+    },
   });
 }
 
 describe('LeftSideNav active-section persistence', () => {
   beforeEach(() => {
     setActivePinia(createPinia());
+    // Category open/closed state now persists to real localStorage (leftNavCategories
+    // store), which outlives a fresh Pinia instance — clear it so tests stay isolated.
+    localStorage.clear();
+  });
+
+  it('resolves the active section from the URL alone on a fresh load (hard refresh / deep link)', async () => {
+    // 'catalog-list' (the nav item) has path /catalogs; 'catalog-view' (a detail page,
+    // never itself a nav item) has path /catalogs/:id — simulating loading
+    // http://localhost/catalogs/<uuid> directly, with no prior in-app navigation to
+    // inherit state from.
+    const router = createTestRouter();
+    await router.push({ name: 'catalog-view', params: { id: 'some-uuid' } });
+    await router.isReady();
+
+    const wrapper = mountNav(router);
+
+    const controlDefinitionsCategory = wrapper
+      .findAllComponents(SideNavCategory)
+      .find((category) => category.props('title') === 'Control Definitions');
+    const catalogsLink = wrapper
+      .findAllComponents(SideNavLink)
+      .find(
+        (link) =>
+          (link.props('to') as { name?: string } | undefined)?.name ===
+          'catalog-list',
+      );
+
+    expect(controlDefinitionsCategory?.props('active')).toBe(true);
+    expect(controlDefinitionsCategory?.props('open')).toBe(true);
+    expect(catalogsLink?.props('active')).toBe(true);
   });
 
   it('keeps the previous section highlighted through an unlisted route, and only switches once a genuinely different section is reached', async () => {
@@ -67,27 +136,7 @@ describe('LeftSideNav active-section persistence', () => {
     await router.push({ name: 'catalog-list' }); // a child of Control Definitions
     await router.isReady();
 
-    const sidebarStore = useSidebarStore();
-    sidebarStore.open = true;
-
-    const wrapper = mount(LeftSideNav, {
-      global: {
-        plugins: [router],
-        directives: {
-          tooltip: {
-            mounted: () => undefined,
-          },
-        },
-        stubs: {
-          SideNav: {
-            template: '<div><slot name="logo" /><slot /></div>',
-          },
-          SideNavLogo: {
-            template: '<img alt="logo" />',
-          },
-        },
-      },
-    });
+    const wrapper = mountNav(router);
 
     const findCategory = (title: string) =>
       wrapper

From 09437a09f611575218ce126a22e3014bef01685e Mon Sep 17 00:00:00 2001
From: Ian Miell <ian.miell@gmail.com>
Date: Thu, 24 Sep 2026 15:44:16 +0100
Subject: [PATCH 3/5] Fix catalog page - edit buttons now work as expected

---
 src/views/catalog/CatalogControl.vue | 71 ++++++++++++++--------------
 src/views/catalog/CatalogGroup.vue   | 53 +++++++++++----------
 2 files changed, 63 insertions(+), 61 deletions(-)

diff --git a/src/views/catalog/CatalogControl.vue b/src/views/catalog/CatalogControl.vue
index 64e49bca..ad4a88d6 100644
--- a/src/views/catalog/CatalogControl.vue
+++ b/src/views/catalog/CatalogControl.vue
@@ -161,43 +161,44 @@
           @deleted="onChildDeleted"
         />
       </div>
-      <div class="mt-4">
-        <ControlCreateModal
-          @created="controlCreated"
-          :catalog="catalog"
-          :parent-control="props.control"
-          v-model="showControlForm"
-        />
-        <ControlPartEditModal
-          v-model="showEditStatement"
-          :catalog="catalog"
-          :control="props.control"
-          type="statement"
-          @updated="onUpdated"
-        />
-        <ControlPartEditModal
-          v-model="showEditObjective"
-          :catalog="catalog"
-          :control="props.control"
-          type="assessment-objective"
-          @updated="onUpdated"
-        />
-        <ControlPartEditModal
-          v-model="showEditGuidance"
-          :catalog="catalog"
-          :control="props.control"
-          type="guidance"
-          @updated="onUpdated"
-        />
-        <ControlEditModal
-          v-model="showEdit"
-          :catalog="catalog"
-          :control="props.control"
-          @updated="onUpdated"
-        />
-      </div>
     </div>
   </CollapsableGroup>
+  <!-- Outside CollapsableGroup's body, which unmounts (v-if) while collapsed: these modals
+       must stay mounted regardless of expand state, since a header button can open one
+       (e.g. Edit) before the control has ever been expanded. -->
+  <ControlCreateModal
+    @created="controlCreated"
+    :catalog="catalog"
+    :parent-control="props.control"
+    v-model="showControlForm"
+  />
+  <ControlPartEditModal
+    v-model="showEditStatement"
+    :catalog="catalog"
+    :control="props.control"
+    type="statement"
+    @updated="onUpdated"
+  />
+  <ControlPartEditModal
+    v-model="showEditObjective"
+    :catalog="catalog"
+    :control="props.control"
+    type="assessment-objective"
+    @updated="onUpdated"
+  />
+  <ControlPartEditModal
+    v-model="showEditGuidance"
+    :catalog="catalog"
+    :control="props.control"
+    type="guidance"
+    @updated="onUpdated"
+  />
+  <ControlEditModal
+    v-model="showEdit"
+    :catalog="catalog"
+    :control="props.control"
+    @updated="onUpdated"
+  />
 </template>
 <script setup lang="ts">
 import { computed, ref } from 'vue';
diff --git a/src/views/catalog/CatalogGroup.vue b/src/views/catalog/CatalogGroup.vue
index 1a830f31..bb4d77e5 100644
--- a/src/views/catalog/CatalogGroup.vue
+++ b/src/views/catalog/CatalogGroup.vue
@@ -112,34 +112,35 @@
           @deleted="onChildGroupDeleted"
         />
       </div>
-      <div class="mt-4">
-        <GroupCreateModal
-          @created="groupCreated"
-          :catalog="catalog"
-          :parent="props.group"
-          v-model="showGroupForm"
-        />
-        <GroupDescriptionModal
-          v-model="showEditDescription"
-          :catalog="catalog"
-          :group="props.group"
-          @updated="onUpdated"
-        />
-        <GroupEditModal
-          v-model="showEdit"
-          :catalog="catalog"
-          :group="props.group"
-          @updated="onUpdated"
-        />
-        <ControlCreateModal
-          @created="controlCreated"
-          :catalog="catalog"
-          :parent-group="props.group"
-          v-model="showControlForm"
-        />
-      </div>
     </div>
   </CollapsableGroup>
+  <!-- Outside CollapsableGroup's body, which unmounts (v-if) while collapsed: these modals
+       must stay mounted regardless of expand state, since a header button can open one
+       (e.g. Edit) before the group has ever been expanded. -->
+  <GroupCreateModal
+    @created="groupCreated"
+    :catalog="catalog"
+    :parent="props.group"
+    v-model="showGroupForm"
+  />
+  <GroupDescriptionModal
+    v-model="showEditDescription"
+    :catalog="catalog"
+    :group="props.group"
+    @updated="onUpdated"
+  />
+  <GroupEditModal
+    v-model="showEdit"
+    :catalog="catalog"
+    :group="props.group"
+    @updated="onUpdated"
+  />
+  <ControlCreateModal
+    @created="controlCreated"
+    :catalog="catalog"
+    :parent-group="props.group"
+    v-model="showControlForm"
+  />
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';

From e65355a11a7f73215c5241d809fd5bd47baf3494 Mon Sep 17 00:00:00 2001
From: Ian Miell <ian.miell@gmail.com>
Date: Thu, 24 Sep 2026 15:45:03 +0100
Subject: [PATCH 4/5] Add tests

---
 .../__tests__/leftNavCategories.spec.ts       | 40 +++++++++++
 src/stores/leftNavCategories.ts               | 31 ++++++++
 .../catalog/__tests__/CatalogGroup.spec.ts    | 71 +++++++++++++++++++
 3 files changed, 142 insertions(+)
 create mode 100644 src/stores/__tests__/leftNavCategories.spec.ts
 create mode 100644 src/stores/leftNavCategories.ts
 create mode 100644 src/views/catalog/__tests__/CatalogGroup.spec.ts

diff --git a/src/stores/__tests__/leftNavCategories.spec.ts b/src/stores/__tests__/leftNavCategories.spec.ts
new file mode 100644
index 00000000..fad30d16
--- /dev/null
+++ b/src/stores/__tests__/leftNavCategories.spec.ts
@@ -0,0 +1,40 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { nextTick } from 'vue';
+import { createPinia, setActivePinia } from 'pinia';
+import { useLeftNavCategoriesStore } from '../leftNavCategories';
+
+describe('useLeftNavCategoriesStore', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    setActivePinia(createPinia());
+  });
+
+  it('reports categories as closed by default', () => {
+    const store = useLeftNavCategoriesStore();
+    expect(store.isOpen('Control Definitions')).toBe(false);
+  });
+
+  it('remembers an opened category independently of others', () => {
+    const store = useLeftNavCategoriesStore();
+    store.setOpen('Control Definitions', true);
+
+    expect(store.isOpen('Control Definitions')).toBe(true);
+    expect(store.isOpen('Workflows')).toBe(false);
+
+    store.setOpen('Control Definitions', false);
+    expect(store.isOpen('Control Definitions')).toBe(false);
+  });
+
+  it('persists open categories to localStorage across a fresh store instance', async () => {
+    const first = useLeftNavCategoriesStore();
+    first.setOpen('Admin', true);
+    // useLocalStorage writes to storage via a watcher, not synchronously on assignment.
+    await nextTick();
+
+    // Simulates a hard refresh: a brand new Pinia instance, but the same localStorage.
+    setActivePinia(createPinia());
+    const second = useLeftNavCategoriesStore();
+
+    expect(second.isOpen('Admin')).toBe(true);
+  });
+});
diff --git a/src/stores/leftNavCategories.ts b/src/stores/leftNavCategories.ts
new file mode 100644
index 00000000..923362b8
--- /dev/null
+++ b/src/stores/leftNavCategories.ts
@@ -0,0 +1,31 @@
+import { defineStore } from 'pinia';
+import { useLocalStorage } from '@vueuse/core';
+
+// Which left-hand-nav categories (keyed by their title, e.g. "Control Definitions") the
+// user has expanded — persisted so a manually-opened submenu stays open across a hard
+// refresh or a new session, even if nothing under it was ever selected.
+export const useLeftNavCategoriesStore = defineStore(
+  'leftNavCategories',
+  () => {
+    const openTitles = useLocalStorage<string[]>('leftNavOpenCategories', []);
+
+    function isOpen(title: string): boolean {
+      return openTitles.value.includes(title);
+    }
+
+    function setOpen(title: string, open: boolean) {
+      if (open === isOpen(title)) {
+        return;
+      }
+      openTitles.value = open
+        ? [...openTitles.value, title]
+        : openTitles.value.filter((openTitle) => openTitle !== title);
+    }
+
+    return {
+      openTitles,
+      isOpen,
+      setOpen,
+    };
+  },
+);
diff --git a/src/views/catalog/__tests__/CatalogGroup.spec.ts b/src/views/catalog/__tests__/CatalogGroup.spec.ts
new file mode 100644
index 00000000..ef8bd8a2
--- /dev/null
+++ b/src/views/catalog/__tests__/CatalogGroup.spec.ts
@@ -0,0 +1,71 @@
+import { describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import CatalogGroup from '../CatalogGroup.vue';
+import type { Catalog, Group } from '@/oscal';
+
+vi.mock('@/composables/axios', () => ({
+  useDataApi: () => ({
+    data: { value: [] },
+    execute: vi.fn(),
+    isLoading: { value: false },
+    error: { value: null },
+  }),
+}));
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({ add: vi.fn() }),
+}));
+
+vi.mock('@/composables/usePermissions', () => ({
+  usePermissions: () => ({ can: () => true, permissionTooltip: () => '' }),
+}));
+
+vi.mock('@/utils/delete-dialog', () => ({
+  useDeleteConfirmationDialog: () => ({ confirmDeleteDialog: vi.fn() }),
+}));
+
+const catalog: Catalog = {
+  uuid: 'catalog-1',
+  metadata: { title: 'Catalog One' },
+} as Catalog;
+
+const group: Group = {
+  id: 'ac',
+  title: 'Access Control',
+} as Group;
+
+function mountGroup() {
+  return mount(CatalogGroup, {
+    props: { catalog, group },
+    global: {
+      stubs: {
+        PartDisplayEditor: true,
+        GroupCreateModal: { template: '<div />' },
+        GroupDescriptionModal: { template: '<div />' },
+        ControlCreateModal: { template: '<div />' },
+        GroupEditModal: {
+          props: ['modelValue'],
+          template:
+            "<div data-testid=\"group-edit-modal\">{{ modelValue ? 'open' : 'closed' }}</div>",
+        },
+      },
+    },
+  });
+}
+
+describe('CatalogGroup', () => {
+  it('opens the edit modal on the first Edit click, even before the group has ever been expanded', async () => {
+    const wrapper = mountGroup();
+
+    // Collapsed by default — CollapsableGroup's body (where the modal used to live,
+    // conditionally mounted) isn't in the DOM yet at this point.
+    const editButton = wrapper
+      .findAll('button')
+      .find((button) => button.text() === 'Edit')!;
+    await editButton.trigger('click');
+
+    const modal = wrapper.find('[data-testid="group-edit-modal"]');
+    expect(modal.exists()).toBe(true);
+    expect(modal.text()).toBe('open');
+  });
+});

From 8aa423eae5a651a27937372cb11e51f6bd54be0f Mon Sep 17 00:00:00 2001
From: Ian Miell <ian.miell@gmail.com>
Date: Thu, 24 Sep 2026 15:59:30 +0100
Subject: [PATCH 5/5] Store the state of the catalog on refresh

---
 src/components/CollapsableGroup.vue           | 22 +++++++++++--
 src/stores/collapsibleGroups.ts               | 32 +++++++++++++++++++
 src/views/catalog/CatalogControl.vue          |  4 ++-
 src/views/catalog/CatalogGroup.vue            |  2 +-
 .../catalog/__tests__/CatalogGroup.spec.ts    | 24 +++++++++++++-
 5 files changed, 78 insertions(+), 6 deletions(-)
 create mode 100644 src/stores/collapsibleGroups.ts

diff --git a/src/components/CollapsableGroup.vue b/src/components/CollapsableGroup.vue
index 5f1a9785..9812795e 100644
--- a/src/components/CollapsableGroup.vue
+++ b/src/components/CollapsableGroup.vue
@@ -1,13 +1,29 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import { useCollapsibleGroupsStore } from '@/stores/collapsibleGroups';
 
 const props = defineProps({
   open: Boolean,
+  // Opt-in: when set, expand/collapse state is persisted (keyed by this string) instead
+  // of being purely local to this component instance, so it survives a hard refresh.
+  persistKey: String,
 });
 
-const isOpen = ref<boolean>(props.open);
+const collapsibleGroupsStore = useCollapsibleGroupsStore();
+const localOpen = ref<boolean>(props.open);
+
+const isOpen = computed<boolean>(() =>
+  props.persistKey
+    ? collapsibleGroupsStore.isOpen(props.persistKey)
+    : localOpen.value,
+);
+
 function toggleOpen() {
-  isOpen.value = !isOpen.value;
+  if (props.persistKey) {
+    collapsibleGroupsStore.setOpen(props.persistKey, !isOpen.value);
+  } else {
+    localOpen.value = !localOpen.value;
+  }
 }
 </script>
 
diff --git a/src/stores/collapsibleGroups.ts b/src/stores/collapsibleGroups.ts
new file mode 100644
index 00000000..5d6983b3
--- /dev/null
+++ b/src/stores/collapsibleGroups.ts
@@ -0,0 +1,32 @@
+import { defineStore } from 'pinia';
+import { useLocalStorage } from '@vueuse/core';
+
+// Generic persisted open/closed state for CollapsableGroup instances, keyed by an
+// arbitrary caller-supplied string. Opt-in via CollapsableGroup's `persistKey` prop — used
+// where a page wants its expand/collapse tree (e.g. a catalog's groups and controls) to
+// survive a hard refresh, rather than always resetting collapsed on mount.
+export const useCollapsibleGroupsStore = defineStore(
+  'collapsibleGroups',
+  () => {
+    const openKeys = useLocalStorage<string[]>('collapsibleGroupsOpen', []);
+
+    function isOpen(key: string): boolean {
+      return openKeys.value.includes(key);
+    }
+
+    function setOpen(key: string, open: boolean) {
+      if (open === isOpen(key)) {
+        return;
+      }
+      openKeys.value = open
+        ? [...openKeys.value, key]
+        : openKeys.value.filter((openKey) => openKey !== key);
+    }
+
+    return {
+      openKeys,
+      isOpen,
+      setOpen,
+    };
+  },
+);
diff --git a/src/views/catalog/CatalogControl.vue b/src/views/catalog/CatalogControl.vue
index ad4a88d6..065c148b 100644
--- a/src/views/catalog/CatalogControl.vue
+++ b/src/views/catalog/CatalogControl.vue
@@ -1,5 +1,7 @@
 <template>
-  <CollapsableGroup>
+  <CollapsableGroup
+    :persist-key="`catalog:${catalog.uuid}:control:${control.id}`"
+  >
     <template #header>
       <div class="py-3 px-4 flex flex-wrap items-center gap-3">
         <span
diff --git a/src/views/catalog/CatalogGroup.vue b/src/views/catalog/CatalogGroup.vue
index bb4d77e5..13fab231 100644
--- a/src/views/catalog/CatalogGroup.vue
+++ b/src/views/catalog/CatalogGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <CollapsableGroup>
+  <CollapsableGroup :persist-key="`catalog:${catalog.uuid}:group:${group.id}`">
     <template #header>
       <div class="py-4 px-4 flex flex-wrap items-center gap-3">
         <span
diff --git a/src/views/catalog/__tests__/CatalogGroup.spec.ts b/src/views/catalog/__tests__/CatalogGroup.spec.ts
index ef8bd8a2..57cee183 100644
--- a/src/views/catalog/__tests__/CatalogGroup.spec.ts
+++ b/src/views/catalog/__tests__/CatalogGroup.spec.ts
@@ -1,6 +1,8 @@
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
 import CatalogGroup from '../CatalogGroup.vue';
+import { useCollapsibleGroupsStore } from '@/stores/collapsibleGroups';
 import type { Catalog, Group } from '@/oscal';
 
 vi.mock('@/composables/axios', () => ({
@@ -54,6 +56,11 @@ function mountGroup() {
 }
 
 describe('CatalogGroup', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    localStorage.clear();
+  });
+
   it('opens the edit modal on the first Edit click, even before the group has ever been expanded', async () => {
     const wrapper = mountGroup();
 
@@ -68,4 +75,19 @@ describe('CatalogGroup', () => {
     expect(modal.exists()).toBe(true);
     expect(modal.text()).toBe('open');
   });
+
+  it('keeps a manually expanded group open across a hard refresh', async () => {
+    const wrapper = mountGroup();
+
+    // Click the CollapsableGroup header (not a button within it) to expand it.
+    await wrapper.find('.cursor-pointer').trigger('click');
+
+    const key = `catalog:${catalog.uuid}:group:${group.id}`;
+    expect(useCollapsibleGroupsStore().isOpen(key)).toBe(true);
+
+    // Simulate a hard refresh: a brand-new Pinia instance (so the store itself is
+    // rebuilt from scratch) backed by the same localStorage.
+    setActivePinia(createPinia());
+    expect(useCollapsibleGroupsStore().isOpen(key)).toBe(true);
+  });
 });