From 4c21539e40974fd087f8c0dd20ed3d4ab59cbff5 Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Sun, 22 Mar 2026 00:03:53 -0500
Subject: [PATCH] fix(ui): add Outlet to settings layout for child route
 navigation

Settings child routes (credentials, snmp-profiles, api-keys) were not
rendering because the parent settings.tsx had no Outlet. Now detects
child routes and renders Outlet, or shows SettingsPage index.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/routes/_authenticated/settings.tsx    | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/_authenticated/settings.tsx b/frontend/src/routes/_authenticated/settings.tsx
index 37f13a9..51da219 100644
--- a/frontend/src/routes/_authenticated/settings.tsx
+++ b/frontend/src/routes/_authenticated/settings.tsx
@@ -1,6 +1,21 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, Outlet, useMatches } from '@tanstack/react-router'
 import { SettingsPage } from '@/components/settings/SettingsPage'
 
 export const Route = createFileRoute('/_authenticated/settings')({
-  component: SettingsPage,
+  component: SettingsLayout,
 })
+
+function SettingsLayout() {
+  const matches = useMatches()
+  // If we're on a child route (credentials, snmp-profiles, api-keys), render the Outlet.
+  // If we're on the exact /settings route, render the SettingsPage index.
+  const isChildRoute = matches.some(
+    (m) => m.routeId !== '/_authenticated/settings' && m.routeId.startsWith('/_authenticated/settings/')
+  )
+
+  if (isChildRoute) {
+    return <Outlet />
+  }
+
+  return <SettingsPage />
+}