From de403f39be5edb4b75974073e426ade5d864dd2a Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Fri, 24 Oct 2025 11:35:49 +0000
Subject: [PATCH] feat: add Docker icon to settings navigation

Add Docker tab to the settings section navigation using the same DockerIcon component used in the main navigation. The icon is rendered at w-4 h-4 to match the visual weight of the lucide icons at size 16.

Now the settings navigation shows: Virtual Environment, Backup Server, Mail Gateway, and Docker.
---
 .../components/Settings/SettingsSectionNav.tsx    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend-modern/src/components/Settings/SettingsSectionNav.tsx b/frontend-modern/src/components/Settings/SettingsSectionNav.tsx
index 9c6e5f5..39057c5 100644
--- a/frontend-modern/src/components/Settings/SettingsSectionNav.tsx
+++ b/frontend-modern/src/components/Settings/SettingsSectionNav.tsx
@@ -3,6 +3,7 @@ import { For } from 'solid-js';
 import Server from 'lucide-solid/icons/server';
 import HardDrive from 'lucide-solid/icons/hard-drive';
 import Mail from 'lucide-solid/icons/mail';
+import { DockerIcon } from '@/components/icons/DockerIcon';
 
 type SettingsSection = 'pve' | 'pbs' | 'pmg' | 'docker' | 'host' | 'podman' | 'kubernetes';
 
@@ -15,7 +16,7 @@ interface SettingsSectionNavProps {
 const allSections: Array<{
   id: SettingsSection;
   label: string;
-  icon: typeof Server;
+  icon: typeof Server | Component<{ class?: string }>;
 }> = [
   {
     id: 'pve',
@@ -32,6 +33,11 @@ const allSections: Array<{
     label: 'Mail Gateway',
     icon: Mail,
   },
+  {
+    id: 'docker',
+    label: 'Docker',
+    icon: DockerIcon,
+  },
 ];
 
 export const SettingsSectionNav: Component<SettingsSectionNavProps> = (props) => {
@@ -48,6 +54,7 @@ export const SettingsSectionNav: Component<SettingsSectionNavProps> = (props) =>
             : `${baseClasses} hover:text-blue-500 dark:hover:text-blue-300 hover:border-blue-300/70 dark:hover:border-blue-500/50`;
 
           const Icon = section.icon;
+          const isDockerIcon = section.id === 'docker';
 
           return (
             <button
@@ -56,7 +63,11 @@ export const SettingsSectionNav: Component<SettingsSectionNavProps> = (props) =>
               onClick={() => props.onSelect(section.id)}
               aria-pressed={isActive}
             >
-              <Icon size={16} stroke-width={2} />
+              {isDockerIcon ? (
+                <Icon class="w-4 h-4" />
+              ) : (
+                <Icon size={16} stroke-width={2} />
+              )}
               <span>{section.label}</span>
             </button>
           );