hue control

frontend/src/index.jsx

@@ -461,6 +461,22 @@ const AppLayout = () => {
     const stored = window.localStorage.getItem('papercrate_view_mode');
     return stored === 'grid' ? 'grid' : 'list';
   });
+  const [neutralHue, setNeutralHue] = useState(() => {
+    if (typeof window === 'undefined') {
+      return 260;
+    }
+    const stored = window.localStorage.getItem('papercrate_neutral_hue');
+    if (stored) {
+      const parsedStored = Number.parseInt(stored, 10);
+      if (!Number.isNaN(parsedStored)) {
+        return parsedStored;
+      }
+    }
+    const root = document.documentElement;
+    const current = root.style.getPropertyValue('--neutral-hue');
+    const parsed = Number.parseInt(current, 10);
+    return Number.isNaN(parsed) ? 260 : parsed;
+  });
   const initialRowSelection = [];
   const [selectedRowKeys, setSelectedRowKeys] = useState(initialRowSelection);
   const [selectionOrder, setSelectionOrder] = useState(initialRowSelection);
@@ -558,6 +574,27 @@ const AppLayout = () => {
     }
   }, [token, appStatus, refreshAccessToken]);
 
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      document.documentElement.style.setProperty('--neutral-hue', `${neutralHue}deg`);
+    }
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem('papercrate_neutral_hue', String(neutralHue));
+    }
+  }, [neutralHue]);
+
+  const handleNeutralHueChange = useCallback((value) => {
+    if (value === '') {
+      setNeutralHue(260);
+      return;
+    }
+    const parsed = Number(value);
+    if (Number.isNaN(parsed)) {
+      return;
+    }
+    setNeutralHue(parsed);
+  }, []);
+
   const clearFilters = useCallback(() => {
     setSearchQuery('');
     setActiveTagFilters([]);
@@ -5035,6 +5072,8 @@ const AppLayout = () => {
       draggedFolderId,
       onCreateFolder: handlePromptCreateFolder,
       creatingFolder,
+      onNeutralHueChange: handleNeutralHueChange,
+      neutralHue,
       tags,
       activeTagIds: activeTagFilters,
       onToggleTagFilter: toggleTagFilter,
@@ -5093,6 +5132,8 @@ const AppLayout = () => {
       handleCorrespondentCreate,
       handlePromptCreateFolder,
       creatingFolder,
+      handleNeutralHueChange,
+      neutralHue,
     ],
   );