fix

frontend/src/sidebar/Sidebar.jsx

@@ -157,10 +157,6 @@ const Sidebar = ({
   draggedFolderId,
   onCreateFolder,
   creatingFolder = false,
-  onNeutralHueChange,
-  neutralHue,
-  themeMode = 'system',
-  onThemeModeChange,
   tags = [],
   activeTagIds = [],
   onToggleTagFilter,
@@ -184,7 +180,15 @@ const Sidebar = ({
   onSelectTenant,
   onOpenSettings,
 }) => {
-  const { setCollapsed } = useSidebarContext();
+  const {
+    setCollapsed,
+    neutralHue,
+    setNeutralHue,
+    resetNeutralHue,
+    themeMode,
+    cycleThemeMode,
+    themeModes,
+  } = useSidebarContext();
   const handleCollapse = useCallback(() => {
     setCollapsed(true);
   }, [setCollapsed]);
@@ -246,15 +250,31 @@ const Sidebar = ({
   }, [creatingFolder, onCreateFolder]);
 
   const handleNeutralHueReset = useCallback(() => {
-    onNeutralHueChange?.('');
-  }, [onNeutralHueChange]);
+    resetNeutralHue();
+  }, [resetNeutralHue]);
 
-  const themeModeIndex = THEME_MODES.indexOf(themeMode);
+  const handleNeutralHueChange = useCallback(
+    (value) => {
+      if (value === '') {
+        resetNeutralHue();
+        return;
+      }
+      const parsed = Number(value);
+      if (Number.isNaN(parsed)) {
+        return;
+      }
+      setNeutralHue(parsed);
+    },
+    [resetNeutralHue, setNeutralHue],
+  );
+
+  const themeModeList = themeModes && themeModes.length ? themeModes : THEME_MODES;
+  const themeModeIndex = themeModeList.indexOf(themeMode);
   const safeThemeModeIndex = themeModeIndex === -1 ? 0 : themeModeIndex;
-  const resolvedThemeMode = THEME_MODES[safeThemeModeIndex];
-  const nextThemeMode = THEME_MODES[(safeThemeModeIndex + 1) % THEME_MODES.length];
-  const themeModeLabel = THEME_MODE_LABELS[resolvedThemeMode];
-  const nextThemeLabel = THEME_MODE_LABELS[nextThemeMode];
+  const resolvedThemeMode = themeModeList[safeThemeModeIndex] || THEME_MODES[0];
+  const nextThemeMode = themeModeList[(safeThemeModeIndex + 1) % themeModeList.length];
+  const themeModeLabel = THEME_MODE_LABELS[resolvedThemeMode] || THEME_MODE_LABELS.system;
+  const nextThemeLabel = THEME_MODE_LABELS[nextThemeMode] || THEME_MODE_LABELS.system;
   const themeModeIcon = resolvedThemeMode === 'dark'
     ? <MoonIcon size={16} />
     : resolvedThemeMode === 'light'
@@ -262,14 +282,8 @@ const Sidebar = ({
       : <DesktopIcon size={16} />;
 
   const handleThemeModeToggle = useCallback(() => {
-    if (!onThemeModeChange) {
-      return;
-    }
-    const currentIndex = THEME_MODES.indexOf(themeMode);
-    const safeIndex = currentIndex === -1 ? 0 : currentIndex;
-    const nextMode = THEME_MODES[(safeIndex + 1) % THEME_MODES.length];
-    onThemeModeChange(nextMode);
-  }, [onThemeModeChange, themeMode]);
+    cycleThemeMode();
+  }, [cycleThemeMode]);
 
   const handleSearchInputChange = useCallback(
     (event) => {
@@ -415,7 +429,7 @@ const Sidebar = ({
                 max="360"
                 step="1"
                 value={neutralHue}
-                onChange={(event) => onNeutralHueChange?.(event.target.value)}
+                onChange={(event) => handleNeutralHueChange(event.target.value)}
               />
               <span className="sidebar-slider__value">{neutralHue}°</span>
             </label>