From a3627bee8af238bbd4febd54f4aea27444867ee0 Mon Sep 17 00:00:00 2001
From: Julian Waller <git@julusian.co.uk>
Date: Sun, 19 Jan 2025 21:50:08 +0000
Subject: [PATCH] feat: move variables page navigation to sidebar

---
 .../Buttons/Presets/PresetsConnectionList.tsx |   2 +-
 webui/src/Layout/Sidebar.tsx                  |  40 ++++++-
 webui/src/Stores/ModuleInfoStore.tsx          |   4 +
 webui/src/Stores/Util.ts                      |  25 ++++
 webui/src/Stores/VariablesStore.tsx           |  12 --
 webui/src/Variables/CustomVariablesList.tsx   |  11 +-
 webui/src/Variables/index.tsx                 | 112 +++++-------------
 webui/src/routeTree.gen.ts                    | 110 ++++++++++++-----
 webui/src/routes/app/variables.tsx            |   6 -
 webui/src/routes/app/variables/$label.tsx     |   6 +
 webui/src/routes/app/variables/custom.tsx     |   6 +
 webui/src/routes/app/variables/index.tsx      |   6 +
 webui/src/scss/_layout.scss                   |   5 +
 webui/src/scss/_presets.scss                  |   4 +
 14 files changed, 207 insertions(+), 142 deletions(-)
 create mode 100644 webui/src/Stores/Util.ts
 delete mode 100644 webui/src/routes/app/variables.tsx
 create mode 100644 webui/src/routes/app/variables/$label.tsx
 create mode 100644 webui/src/routes/app/variables/custom.tsx
 create mode 100644 webui/src/routes/app/variables/index.tsx

diff --git a/webui/src/Buttons/Presets/PresetsConnectionList.tsx b/webui/src/Buttons/Presets/PresetsConnectionList.tsx
index 516bb252a5..dfe6a9005d 100644
--- a/webui/src/Buttons/Presets/PresetsConnectionList.tsx
+++ b/webui/src/Buttons/Presets/PresetsConnectionList.tsx
@@ -28,7 +28,7 @@ export const PresetsConnectionList = observer(function PresetsConnectionList({
 
 		const connectionInfo = connections.getInfo(id)
 		const moduleInfo = connectionInfo ? modules.modules.get(connectionInfo.instance_type) : undefined
-		const compactName = moduleInfo?.name?.replace(/\;.*/, '...')
+		const compactName = connectionInfo ? modules.getModuleFriendlyName(connectionInfo.instance_type) : undefined
 
 		return (
 			<CButton title={moduleInfo?.name} key={id} color="primary" onClick={() => setConnectionAndCategory([id, null])}>
diff --git a/webui/src/Layout/Sidebar.tsx b/webui/src/Layout/Sidebar.tsx
index a139f75d1a..da8e214168 100644
--- a/webui/src/Layout/Sidebar.tsx
+++ b/webui/src/Layout/Sidebar.tsx
@@ -43,6 +43,9 @@ import classNames from 'classnames'
 import { useLocalStorage, useMediaQuery } from 'usehooks-ts'
 import { Link } from '@tanstack/react-router'
 import { Transition, TransitionStatus } from 'react-transition-group'
+import { observer } from 'mobx-react-lite'
+import { RootAppStoreContext } from '../Stores/RootAppStore.js'
+import { useSortedConnectionsThatHaveVariables } from '../Stores/Util.js'
 
 export interface SidebarStateProps {
 	showToggle: boolean
@@ -77,6 +80,7 @@ export function SidebarStateProvider({ children }: React.PropsWithChildren): Rea
 
 interface SidebarMenuItemProps {
 	name: string
+	subheading?: string
 	icon: IconDefinition | null
 	notifications?: React.ComponentType<Record<string, never>>
 	path?: string
@@ -94,7 +98,16 @@ function SidebarMenuItemLabel(item: SidebarMenuItemProps) {
 				</span>
 			)}
 
-			<span className="flex-fill">{item.name}</span>
+			<span>
+				<span className="flex-fill">{item.name}</span>
+				{!!item.subheading && (
+					<>
+						<br />
+						<small>{item.subheading}</small>
+					</>
+				)}
+			</span>
+
 			{item.target === '_new' && <FontAwesomeIcon icon={faExternalLinkSquare} />}
 			{!!item.notifications && <item.notifications />}
 		</>
@@ -149,7 +162,11 @@ export const MySidebar = memo(function MySidebar() {
 					<SidebarMenuItem name="Remote" icon={null} path="/surfaces/outbound" />
 				</SidebarMenuItemGroup>
 				<SidebarMenuItem name="Triggers" icon={faClock} path="/triggers" />
-				<SidebarMenuItem name="Variables" icon={faDollarSign} path="/variables" />
+				<SidebarMenuItemGroup name="Variables" icon={faDollarSign} path="/variables">
+					<SidebarMenuItem name="Custom Variables" icon={null} path="/variables/custom" />
+					<SidebarMenuItem name="Internal" icon={null} path="/variables/internal" />
+					<SidebarVariablesGroups />
+				</SidebarMenuItemGroup>
 				<SidebarMenuItem name="Settings" icon={faCog} path="/settings" />
 				<SidebarMenuItem name="Import / Export" icon={faFileImport} path="/import-export" />
 				<SidebarMenuItem name="Log" icon={faClipboardList} path="/log" />
@@ -196,6 +213,25 @@ export const MySidebar = memo(function MySidebar() {
 	)
 })
 
+const SidebarVariablesGroups = observer(function SidebarVariablesGroups() {
+	const { modules } = useContext(RootAppStoreContext)
+
+	const sortedConnections = useSortedConnectionsThatHaveVariables()
+
+	return (
+		<>
+			{sortedConnections.map((connectionInfo) => (
+				<SidebarMenuItem
+					name={connectionInfo.label}
+					subheading={modules.getModuleFriendlyName(connectionInfo.instance_type)}
+					icon={null}
+					path={`/variables/${connectionInfo.label}`}
+				/>
+			))}
+		</>
+	)
+})
+
 /**
  * This is a stripped down copy of CSidebar from coreui-react.
  * Since changing the sidebar, it no longer makes sense to be able to hide it entirely,
diff --git a/webui/src/Stores/ModuleInfoStore.tsx b/webui/src/Stores/ModuleInfoStore.tsx
index 18b5cc53dd..e4d9c913b1 100644
--- a/webui/src/Stores/ModuleInfoStore.tsx
+++ b/webui/src/Stores/ModuleInfoStore.tsx
@@ -46,4 +46,8 @@ export class ModuleInfoStore {
 				break
 		}
 	})
+
+	getModuleFriendlyName(moduleId: string): string | undefined {
+		return this.modules.get(moduleId)?.name?.replace(/\;.*/, '...')
+	}
 }
diff --git a/webui/src/Stores/Util.ts b/webui/src/Stores/Util.ts
new file mode 100644
index 0000000000..47c683cf1c
--- /dev/null
+++ b/webui/src/Stores/Util.ts
@@ -0,0 +1,25 @@
+import { useContext } from 'react'
+import { RootAppStoreContext } from './RootAppStore.js'
+import { useComputed } from '../util.js'
+import { ClientConnectionConfig } from '@companion-app/shared/Model/Connections.js'
+
+export interface ClientConnectionConfigWithId extends ClientConnectionConfig {
+	id: string
+}
+
+export function useSortedConnectionsThatHaveVariables(): ClientConnectionConfigWithId[] {
+	const { variablesStore, connections } = useContext(RootAppStoreContext)
+
+	return useComputed(() => {
+		const result: ClientConnectionConfigWithId[] = []
+
+		for (const [id, connection] of connections.connections) {
+			const connectionVariables = variablesStore.variables.get(connection.label)
+			if (connectionVariables && connectionVariables.size > 0) {
+				result.push({ ...connection, id })
+			}
+		}
+
+		return result.sort((a, b) => a.sortOrder - b.sortOrder)
+	}, [variablesStore.variables, connections.connections])
+}
diff --git a/webui/src/Stores/VariablesStore.tsx b/webui/src/Stores/VariablesStore.tsx
index f781876768..768b032401 100644
--- a/webui/src/Stores/VariablesStore.tsx
+++ b/webui/src/Stores/VariablesStore.tsx
@@ -139,18 +139,6 @@ export class VariablesStore {
 
 		return definitions
 	}
-
-	public connectionLabelsWithDefinitions = computed((): string[] => {
-		const labels: string[] = []
-
-		for (const [label, variables] of this.variables) {
-			if (label === 'internal' || variables.size > 0) {
-				labels.push(label)
-			}
-		}
-
-		return labels
-	})
 }
 
 export interface VariableDefinitionExt extends VariableDefinition {
diff --git a/webui/src/Variables/CustomVariablesList.tsx b/webui/src/Variables/CustomVariablesList.tsx
index 2847d544ee..06962135cb 100644
--- a/webui/src/Variables/CustomVariablesList.tsx
+++ b/webui/src/Variables/CustomVariablesList.tsx
@@ -24,6 +24,7 @@ import { CustomVariableDefinition } from '@companion-app/shared/Model/CustomVari
 import { RootAppStoreContext } from '../Stores/RootAppStore.js'
 import { observer } from 'mobx-react-lite'
 import { NonIdealState } from '../Components/NonIdealState.js'
+import { Link } from '@tanstack/react-router'
 
 const DRAG_ID = 'custom-variables'
 
@@ -31,13 +32,7 @@ interface CustomVariableDefinitionExt extends CustomVariableDefinition {
 	name: string
 }
 
-interface CustomVariablesListProps {
-	setShowCustom: (show: boolean) => void
-}
-
-export const CustomVariablesList = observer(function CustomVariablesList({ setShowCustom }: CustomVariablesListProps) {
-	const doBack = useCallback(() => setShowCustom(false), [setShowCustom])
-
+export const CustomVariablesListPage = observer(function CustomVariablesList() {
 	const { socket, notifier, variablesStore: customVariables } = useContext(RootAppStoreContext)
 
 	const [variableValues, setVariableValues] = useState<CompanionVariableValues>({})
@@ -203,7 +198,7 @@ export const CustomVariablesList = observer(function CustomVariablesList({ setSh
 			<div>
 				<h4 style={{ marginBottom: '0.8rem' }}>Variables</h4>
 				<CButtonGroup size="sm">
-					<CButton color="primary" onClick={doBack}>
+					<CButton color="primary" as={Link} to="/variables">
 						<FontAwesomeIcon icon={faArrowLeft} />
 						&nbsp; Go back
 					</CButton>
diff --git a/webui/src/Variables/index.tsx b/webui/src/Variables/index.tsx
index f067197c0a..0d8002aabc 100644
--- a/webui/src/Variables/index.tsx
+++ b/webui/src/Variables/index.tsx
@@ -1,84 +1,17 @@
-import React, { useCallback, useContext, useState } from 'react'
+import React, { useContext } from 'react'
 import { CButton, CButtonGroup } from '@coreui/react'
-import { useComputed } from '../util.js'
 import { VariablesTable } from '../Components/VariablesTable.js'
-import { CustomVariablesList } from './CustomVariablesList.js'
 import { RootAppStoreContext } from '../Stores/RootAppStore.js'
 import { observer } from 'mobx-react-lite'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+import { Link, useParams } from '@tanstack/react-router'
+import { useSortedConnectionsThatHaveVariables } from '../Stores/Util.js'
 
-export const ConnectionVariablesPage = observer(function ConnectionVariables() {
-	const { connections } = useContext(RootAppStoreContext)
+export const ConnectionVariablesPage = observer(function VariablesConnectionList() {
+	const { modules } = useContext(RootAppStoreContext)
 
-	const [connectionId, setConnectionId] = useState<string | null>(null)
-	const [showCustom, setShowCustom] = useState(false)
-
-	// Reset selection on resetToken change
-	// useEffect(() => {
-	// 	setConnectionId(null)
-	// }, [resetToken])
-
-	if (showCustom) {
-		return <CustomVariablesList setShowCustom={setShowCustom} />
-	} else if (connectionId) {
-		let connectionLabel = connections.getLabel(connectionId) ?? '?'
-		if (connectionId === 'internal') connectionLabel = 'internal'
-
-		return <VariablesList selectedConnectionLabel={connectionLabel} setConnectionId={setConnectionId} />
-	} else {
-		return <VariablesConnectionList setConnectionId={setConnectionId} setShowCustom={setShowCustom} />
-	}
-})
-
-interface VariablesConnectionListProps {
-	setConnectionId: (connectionId: string | null) => void
-	setShowCustom: (show: boolean) => void
-}
-
-const VariablesConnectionList = observer(function VariablesConnectionList({
-	setConnectionId,
-	setShowCustom,
-}: VariablesConnectionListProps) {
-	const { connections, modules, variablesStore } = useContext(RootAppStoreContext)
-
-	const connectionsLabelMap: ReadonlyMap<string, string> = useComputed(() => {
-		const labelMap = new Map<string, string>()
-		for (const [connectionId, connectionInfo] of connections.connections.entries()) {
-			labelMap.set(connectionInfo.label, connectionId)
-		}
-		return labelMap
-	}, [connections])
-
-	const options = variablesStore.connectionLabelsWithDefinitions.get().map((label) => {
-		if (label === 'internal') {
-			return (
-				<CButton key={label} color="primary" onClick={() => setConnectionId('internal')}>
-					Internal
-				</CButton>
-			)
-		}
-
-		if (label === 'custom') {
-			return ''
-		}
-
-		const connectionId = connectionsLabelMap.get(label)
-		const connectionInfo = connectionId ? connections.connections.get(connectionId) : undefined
-		const moduleInfo = connectionInfo ? modules.modules.get(connectionInfo.instance_type) : undefined
-		const compactName = moduleInfo?.name?.replace(/\;.*/, '...')
-
-		return (
-			<CButton
-				title={moduleInfo?.name}
-				key={connectionId}
-				color="primary"
-				onClick={() => setConnectionId(connectionId ?? null)}
-			>
-				<h6>{connectionInfo?.label ?? '?'}</h6> <small>{compactName ?? '?'}</small>
-			</CButton>
-		)
-	})
+	const sortedConnections = useSortedConnectionsThatHaveVariables()
 
 	return (
 		<div>
@@ -88,38 +21,47 @@ const VariablesConnectionList = observer(function VariablesConnectionList({
 				live updating of messages, making customization quick and easy.
 			</p>
 			<div className="variables-category-grid">
-				<CButton color="primary" onClick={() => setShowCustom(true)}>
+				<CButton color="primary" as={Link} to="/variables/custom">
 					Custom Variables
 				</CButton>
 
-				{options}
+				<CButton color="primary" as={Link} to="/variables/internal">
+					Internal
+				</CButton>
+				{sortedConnections.map((connectionInfo) => {
+					const compactName = modules.getModuleFriendlyName(connectionInfo.instance_type)
+
+					return (
+						<CButton key={connectionInfo.id} color="primary" as={Link} to={`/variables/${connectionInfo.label}`}>
+							<h6>{connectionInfo?.label ?? '?'}</h6> <small>{compactName ?? '?'}</small>
+						</CButton>
+					)
+				})}
 			</div>
 		</div>
 	)
 })
 
-interface VariablesListProps {
-	selectedConnectionLabel: string
-	setConnectionId: (connectionId: string | null) => void
-}
+export function VariablesListPage() {
+	const { label } = useParams({ from: '/_app/variables/$label' })
 
-function VariablesList({ selectedConnectionLabel, setConnectionId }: VariablesListProps) {
-	const doBack = useCallback(() => setConnectionId(null), [setConnectionId])
+	// Future: if label is not found, redirect to /variables
+	// 	throw redirect({ to: '/variables' })
 
 	return (
 		<div className="variables-panel">
 			<h4 style={{ marginBottom: '0.8rem' }}>Variables</h4>
 			<CButtonGroup size="sm">
-				<CButton color="primary" onClick={doBack}>
+				<CButton color="primary" as={Link} to="/variables">
 					<FontAwesomeIcon icon={faArrowLeft} />
 					&nbsp; Go back
 				</CButton>
-				<CButton color="secondary" onClick={doBack} disabled>
-					{selectedConnectionLabel}
+				<CButton color="secondary" disabled>
+					{label}
 				</CButton>
 			</CButtonGroup>
 
-			<VariablesTable label={selectedConnectionLabel} />
+			<VariablesTable label={label} />
 			<br style={{ clear: 'both' }} />
 		</div>
 	)
diff --git a/webui/src/routeTree.gen.ts b/webui/src/routeTree.gen.ts
index 5757e0fbd9..c349b7882e 100644
--- a/webui/src/routeTree.gen.ts
+++ b/webui/src/routeTree.gen.ts
@@ -25,7 +25,6 @@ import { Route as appImport } from './routes/_app.tsx'
 import { Route as EmulatorIndexImport } from './routes/self-contained/emulator/index.tsx'
 import { Route as IndexImport } from './routes/app/index.tsx'
 import { Route as ConnectionDebugconnectionIdImport } from './routes/self-contained/connection-debug.$connectionId.tsx'
-import { Route as VariablesImport } from './routes/app/variables.tsx'
 import { Route as TriggersImport } from './routes/app/triggers.tsx'
 import { Route as SettingsImport } from './routes/app/settings.tsx'
 import { Route as LogImport } from './routes/app/log.tsx'
@@ -34,7 +33,10 @@ import { Route as ConnectionsImport } from './routes/app/connections.tsx'
 import { Route as CloudImport } from './routes/app/cloud.tsx'
 import { Route as ButtonsImport } from './routes/app/buttons.tsx'
 import { Route as SplatImport } from './routes/app/$.tsx'
+import { Route as VariablesIndexImport } from './routes/app/variables/index.tsx'
 import { Route as TriggersIndexImport } from './routes/app/triggers/index.tsx'
+import { Route as VariablesCustomImport } from './routes/app/variables/custom.tsx'
+import { Route as VariablesLabelImport } from './routes/app/variables/$label.tsx'
 import { Route as TriggersControlIdImport } from './routes/app/triggers/$controlId.tsx'
 import { Route as SurfacesOutboundImport } from './routes/app/surfaces/outbound.tsx'
 import { Route as SurfacesDiscoverImport } from './routes/app/surfaces/discover.tsx'
@@ -150,12 +152,6 @@ const ConnectionDebugconnectionIdRoute =
     getParentRoute: () => rootRoute,
   } as any)
 
-const VariablesRoute = VariablesImport.update({
-  id: '/variables',
-  path: '/variables',
-  getParentRoute: () => appRoute,
-} as any)
-
 const TriggersRoute = TriggersImport.update({
   id: '/triggers',
   path: '/triggers',
@@ -204,12 +200,30 @@ const SplatRoute = SplatImport.update({
   getParentRoute: () => appRoute,
 } as any)
 
+const VariablesIndexRoute = VariablesIndexImport.update({
+  id: '/variables/',
+  path: '/variables/',
+  getParentRoute: () => appRoute,
+} as any)
+
 const TriggersIndexRoute = TriggersIndexImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => TriggersRoute,
 } as any)
 
+const VariablesCustomRoute = VariablesCustomImport.update({
+  id: '/variables/custom',
+  path: '/variables/custom',
+  getParentRoute: () => appRoute,
+} as any)
+
+const VariablesLabelRoute = VariablesLabelImport.update({
+  id: '/variables/$label',
+  path: '/variables/$label',
+  getParentRoute: () => appRoute,
+} as any)
+
 const TriggersControlIdRoute = TriggersControlIdImport.update({
   id: '/$controlId',
   path: '/$controlId',
@@ -383,13 +397,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof TriggersImport
       parentRoute: typeof appImport
     }
-    '/_app/variables': {
-      id: '/_app/variables'
-      path: '/variables'
-      fullPath: '/variables'
-      preLoaderRoute: typeof VariablesImport
-      parentRoute: typeof appImport
-    }
     '/connection-debug/$connectionId': {
       id: '/connection-debug/$connectionId'
       path: '/connection-debug/$connectionId'
@@ -460,6 +467,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof TriggersControlIdImport
       parentRoute: typeof TriggersImport
     }
+    '/_app/variables/$label': {
+      id: '/_app/variables/$label'
+      path: '/variables/$label'
+      fullPath: '/variables/$label'
+      preLoaderRoute: typeof VariablesLabelImport
+      parentRoute: typeof appImport
+    }
+    '/_app/variables/custom': {
+      id: '/_app/variables/custom'
+      path: '/variables/custom'
+      fullPath: '/variables/custom'
+      preLoaderRoute: typeof VariablesCustomImport
+      parentRoute: typeof appImport
+    }
     '/_app/triggers/': {
       id: '/_app/triggers/'
       path: '/'
@@ -467,6 +488,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof TriggersIndexImport
       parentRoute: typeof TriggersImport
     }
+    '/_app/variables/': {
+      id: '/_app/variables/'
+      path: '/variables'
+      fullPath: '/variables'
+      preLoaderRoute: typeof VariablesIndexImport
+      parentRoute: typeof appImport
+    }
   }
 }
 
@@ -506,12 +534,14 @@ interface appRouteChildren {
   LogRoute: typeof LogRoute
   SettingsRoute: typeof SettingsRoute
   TriggersRoute: typeof TriggersRouteWithChildren
-  VariablesRoute: typeof VariablesRoute
   IndexRoute: typeof IndexRoute
   SurfacesSplatRoute: typeof SurfacesSplatRoute
   SurfacesConfiguredRoute: typeof SurfacesConfiguredRoute
   SurfacesDiscoverRoute: typeof SurfacesDiscoverRoute
   SurfacesOutboundRoute: typeof SurfacesOutboundRoute
+  VariablesLabelRoute: typeof VariablesLabelRoute
+  VariablesCustomRoute: typeof VariablesCustomRoute
+  VariablesIndexRoute: typeof VariablesIndexRoute
 }
 
 const appRouteChildren: appRouteChildren = {
@@ -523,12 +553,14 @@ const appRouteChildren: appRouteChildren = {
   LogRoute: LogRoute,
   SettingsRoute: SettingsRoute,
   TriggersRoute: TriggersRouteWithChildren,
-  VariablesRoute: VariablesRoute,
   IndexRoute: IndexRoute,
   SurfacesSplatRoute: SurfacesSplatRoute,
   SurfacesConfiguredRoute: SurfacesConfiguredRoute,
   SurfacesDiscoverRoute: SurfacesDiscoverRoute,
   SurfacesOutboundRoute: SurfacesOutboundRoute,
+  VariablesLabelRoute: VariablesLabelRoute,
+  VariablesCustomRoute: VariablesCustomRoute,
+  VariablesIndexRoute: VariablesIndexRoute,
 }
 
 const appRouteWithChildren = appRoute._addFileChildren(appRouteChildren)
@@ -553,7 +585,6 @@ export interface FileRoutesByFullPath {
   '/log': typeof LogRoute
   '/settings': typeof SettingsRoute
   '/triggers': typeof TriggersRouteWithChildren
-  '/variables': typeof VariablesRoute
   '/connection-debug/$connectionId': typeof ConnectionDebugconnectionIdRoute
   '/emulator/$emulatorId': typeof EmulatorEmulatorIdlazyRoute
   '/': typeof IndexRoute
@@ -564,7 +595,10 @@ export interface FileRoutesByFullPath {
   '/surfaces/discover': typeof SurfacesDiscoverRoute
   '/surfaces/outbound': typeof SurfacesOutboundRoute
   '/triggers/$controlId': typeof TriggersControlIdRoute
+  '/variables/$label': typeof VariablesLabelRoute
+  '/variables/custom': typeof VariablesCustomRoute
   '/triggers/': typeof TriggersIndexRoute
+  '/variables': typeof VariablesIndexRoute
 }
 
 export interface FileRoutesByTo {
@@ -585,7 +619,6 @@ export interface FileRoutesByTo {
   '/import-export': typeof ImportExportRoute
   '/log': typeof LogRoute
   '/settings': typeof SettingsRoute
-  '/variables': typeof VariablesRoute
   '/connection-debug/$connectionId': typeof ConnectionDebugconnectionIdRoute
   '/emulator/$emulatorId': typeof EmulatorEmulatorIdlazyRoute
   '/': typeof IndexRoute
@@ -596,7 +629,10 @@ export interface FileRoutesByTo {
   '/surfaces/discover': typeof SurfacesDiscoverRoute
   '/surfaces/outbound': typeof SurfacesOutboundRoute
   '/triggers/$controlId': typeof TriggersControlIdRoute
+  '/variables/$label': typeof VariablesLabelRoute
+  '/variables/custom': typeof VariablesCustomRoute
   '/triggers': typeof TriggersIndexRoute
+  '/variables': typeof VariablesIndexRoute
 }
 
 export interface FileRoutesById {
@@ -620,7 +656,6 @@ export interface FileRoutesById {
   '/_app/log': typeof LogRoute
   '/_app/settings': typeof SettingsRoute
   '/_app/triggers': typeof TriggersRouteWithChildren
-  '/_app/variables': typeof VariablesRoute
   '/connection-debug/$connectionId': typeof ConnectionDebugconnectionIdRoute
   '/emulator/$emulatorId': typeof EmulatorEmulatorIdlazyRoute
   '/_app/': typeof IndexRoute
@@ -631,7 +666,10 @@ export interface FileRoutesById {
   '/_app/surfaces/discover': typeof SurfacesDiscoverRoute
   '/_app/surfaces/outbound': typeof SurfacesOutboundRoute
   '/_app/triggers/$controlId': typeof TriggersControlIdRoute
+  '/_app/variables/$label': typeof VariablesLabelRoute
+  '/_app/variables/custom': typeof VariablesCustomRoute
   '/_app/triggers/': typeof TriggersIndexRoute
+  '/_app/variables/': typeof VariablesIndexRoute
 }
 
 export interface FileRouteTypes {
@@ -656,7 +694,6 @@ export interface FileRouteTypes {
     | '/log'
     | '/settings'
     | '/triggers'
-    | '/variables'
     | '/connection-debug/$connectionId'
     | '/emulator/$emulatorId'
     | '/'
@@ -667,7 +704,10 @@ export interface FileRouteTypes {
     | '/surfaces/discover'
     | '/surfaces/outbound'
     | '/triggers/$controlId'
+    | '/variables/$label'
+    | '/variables/custom'
     | '/triggers/'
+    | '/variables'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/emulator.html'
@@ -687,7 +727,6 @@ export interface FileRouteTypes {
     | '/import-export'
     | '/log'
     | '/settings'
-    | '/variables'
     | '/connection-debug/$connectionId'
     | '/emulator/$emulatorId'
     | '/'
@@ -698,7 +737,10 @@ export interface FileRouteTypes {
     | '/surfaces/discover'
     | '/surfaces/outbound'
     | '/triggers/$controlId'
+    | '/variables/$label'
+    | '/variables/custom'
     | '/triggers'
+    | '/variables'
   id:
     | '__root__'
     | '/_app'
@@ -720,7 +762,6 @@ export interface FileRouteTypes {
     | '/_app/log'
     | '/_app/settings'
     | '/_app/triggers'
-    | '/_app/variables'
     | '/connection-debug/$connectionId'
     | '/emulator/$emulatorId'
     | '/_app/'
@@ -731,7 +772,10 @@ export interface FileRouteTypes {
     | '/_app/surfaces/discover'
     | '/_app/surfaces/outbound'
     | '/_app/triggers/$controlId'
+    | '/_app/variables/$label'
+    | '/_app/variables/custom'
     | '/_app/triggers/'
+    | '/_app/variables/'
   fileRoutesById: FileRoutesById
 }
 
@@ -806,12 +850,14 @@ export const routeTree = rootRoute
         "/_app/log",
         "/_app/settings",
         "/_app/triggers",
-        "/_app/variables",
         "/_app/",
         "/_app/surfaces/$",
         "/_app/surfaces/configured",
         "/_app/surfaces/discover",
-        "/_app/surfaces/outbound"
+        "/_app/surfaces/outbound",
+        "/_app/variables/$label",
+        "/_app/variables/custom",
+        "/_app/variables/"
       ]
     },
     "/emulator.html": {
@@ -883,10 +929,6 @@ export const routeTree = rootRoute
         "/_app/triggers/"
       ]
     },
-    "/_app/variables": {
-      "filePath": "app/variables.tsx",
-      "parent": "/_app"
-    },
     "/connection-debug/$connectionId": {
       "filePath": "self-contained/connection-debug.$connectionId.tsx"
     },
@@ -924,9 +966,21 @@ export const routeTree = rootRoute
       "filePath": "app/triggers/$controlId.tsx",
       "parent": "/_app/triggers"
     },
+    "/_app/variables/$label": {
+      "filePath": "app/variables/$label.tsx",
+      "parent": "/_app"
+    },
+    "/_app/variables/custom": {
+      "filePath": "app/variables/custom.tsx",
+      "parent": "/_app"
+    },
     "/_app/triggers/": {
       "filePath": "app/triggers/index.tsx",
       "parent": "/_app/triggers"
+    },
+    "/_app/variables/": {
+      "filePath": "app/variables/index.tsx",
+      "parent": "/_app"
     }
   }
 }
diff --git a/webui/src/routes/app/variables.tsx b/webui/src/routes/app/variables.tsx
deleted file mode 100644
index 86400d5b54..0000000000
--- a/webui/src/routes/app/variables.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { ConnectionVariablesPage } from '../../Variables/index.js'
-
-export const Route = createFileRoute('/_app/variables')({
-	component: ConnectionVariablesPage,
-})
diff --git a/webui/src/routes/app/variables/$label.tsx b/webui/src/routes/app/variables/$label.tsx
new file mode 100644
index 0000000000..26297eef8c
--- /dev/null
+++ b/webui/src/routes/app/variables/$label.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { VariablesListPage } from '../../../Variables/index.js'
+
+export const Route = createFileRoute('/_app/variables/$label')({
+	component: VariablesListPage,
+})
diff --git a/webui/src/routes/app/variables/custom.tsx b/webui/src/routes/app/variables/custom.tsx
new file mode 100644
index 0000000000..2d011a7777
--- /dev/null
+++ b/webui/src/routes/app/variables/custom.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { CustomVariablesListPage } from '../../../Variables/CustomVariablesList.js'
+
+export const Route = createFileRoute('/_app/variables/custom')({
+	component: CustomVariablesListPage,
+})
diff --git a/webui/src/routes/app/variables/index.tsx b/webui/src/routes/app/variables/index.tsx
new file mode 100644
index 0000000000..8f6499bba9
--- /dev/null
+++ b/webui/src/routes/app/variables/index.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ConnectionVariablesPage } from '../../../Variables/index.js'
+
+export const Route = createFileRoute('/_app/variables/')({
+	component: ConnectionVariablesPage,
+})
diff --git a/webui/src/scss/_layout.scss b/webui/src/scss/_layout.scss
index a441569dbe..79082979af 100644
--- a/webui/src/scss/_layout.scss
+++ b/webui/src/scss/_layout.scss
@@ -223,6 +223,11 @@ body {
 	.nav-link {
 		background-color: #151515;
 		border-bottom: 1px solid #262626;
+
+		small {
+			color: #aaa;
+			font-size: 0.75rem;
+		}
 	}
 
 	.nav-link:hover {
diff --git a/webui/src/scss/_presets.scss b/webui/src/scss/_presets.scss
index 66052db919..ddb6cb0d99 100644
--- a/webui/src/scss/_presets.scss
+++ b/webui/src/scss/_presets.scss
@@ -14,6 +14,10 @@
 	// 	grid-template-columns: repeat(2, 1fr);
 	// }
 
+	.btn {
+		align-content: center;
+	}
+
 	.btn-block {
 		margin-top: 0;
 	}