From 8ff580bf0f8e88a362335cdbab3ce4191eddf3f9 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Fri, 4 Sep 2026 02:33:20 +0100
Subject: [PATCH] Enhance DashboardNavigation Component with User Settings
 Integration

- Updated DashboardNavigation to utilize user settings for appearance and navigation label preferences, improving user experience.
- Introduced logic to dynamically set theme mode and density based on user preferences and application settings.
- Refactored useEffect to ensure settings are applied only when user settings are loaded, enhancing performance and reliability.
---
 .../Dashboard/common/DashboardNavigation.jsx  | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/Dashboard/common/DashboardNavigation.jsx b/src/components/Dashboard/common/DashboardNavigation.jsx
index ee8940e7..5468ca07 100644
--- a/src/components/Dashboard/common/DashboardNavigation.jsx
+++ b/src/components/Dashboard/common/DashboardNavigation.jsx
@@ -49,15 +49,22 @@ import {
 
 import { useAppUpdateContext } from '../context/AppUpdateContext'
 import { useThemeContext } from '../context/ThemeContext'
+import { getEffectiveAppearance } from '../../../database/Settings'
 
 const { Text } = Typography
 
 const DashboardNavigation = () => {
   const { userProfile } = useContext(AuthContext)
   const { showSpotlight } = useContext(SpotlightContext)
-  const { connecting, connected } = useContext(ApiServerContext)
+  const { connecting, connected, userSettings, userSettingsLoaded } =
+    useContext(ApiServerContext)
   const { authenticated } = useContext(AuthContext)
-  const { showNavigationLabels, setShowNavigationLabels } = useThemeContext()
+  const {
+    showNavigationLabels,
+    setShowNavigationLabels,
+    setThemeMode,
+    setDensityMode
+  } = useThemeContext()
   const { toggleNotificationCenter, unreadCount } =
     useContext(NotificationContext)
   const [apiServerState, setApiServerState] = useState('disconnected')
@@ -81,21 +88,31 @@ const DashboardNavigation = () => {
   const { availableUpdate, checkForUpdates } = useAppUpdateContext()
 
   useEffect(() => {
-    const hydrateNavigationLabels = async () => {
-      const settings = isElectron
-        ? await getAppSettings()
-        : userProfile?.settings || {}
-      if (settings?.showNavigationLabels !== undefined) {
-        setShowNavigationLabels(settings.showNavigationLabels)
+    if (!userSettingsLoaded) return
+
+    const hydrateAppearance = async () => {
+      const electronSettings = isElectron ? await getAppSettings() : {}
+      const effective = getEffectiveAppearance({
+        isElectron,
+        userAppearance: userSettings?.appearance || {},
+        electronSettings
+      })
+      if (effective.theme) setThemeMode(effective.theme)
+      if (effective.density) setDensityMode(effective.density)
+      if (effective.showNavigationLabels !== undefined) {
+        setShowNavigationLabels(effective.showNavigationLabels)
       }
     }
 
-    void hydrateNavigationLabels()
+    void hydrateAppearance()
   }, [
     getAppSettings,
     isElectron,
+    setDensityMode,
     setShowNavigationLabels,
-    userProfile?.settings
+    setThemeMode,
+    userSettings?.appearance,
+    userSettingsLoaded
   ])
 
   const includeDev = import.meta.env.DEV