hue control

frontend/src/sidebar/Sidebar.jsx

@@ -11,6 +11,7 @@ import {
   CheckIcon,
   PlusIcon,
   FolderPlusIcon,
+  RestoreIcon,
 } from '../ui/icons';
 
 import { getTagColorStyle } from '../utils/colors';
@@ -142,6 +143,8 @@ const Sidebar = ({
   draggedFolderId,
   onCreateFolder,
   creatingFolder = false,
+  onNeutralHueChange,
+  neutralHue,
   tags = [],
   activeTagIds = [],
   onToggleTagFilter,
@@ -220,6 +223,10 @@ const Sidebar = ({
     onCreateFolder?.();
   }, [creatingFolder, onCreateFolder]);
 
+  const handleNeutralHueReset = useCallback(() => {
+    onNeutralHueChange?.('');
+  }, [onNeutralHueChange]);
+
   const handleSearchInputChange = useCallback(
     (event) => {
       onSearchChange?.(event.target.value);
@@ -587,6 +594,35 @@ const Sidebar = ({
             })}
           </ul>
         </div>
+        {typeof neutralHue === 'number' || typeof neutralHue === 'string' ? (
+          <div className="sidebar-section">
+            <div className="sidebar-section__header">
+              <h3>Theme</h3>
+              <div className="sidebar-section__actions">
+                <button
+                  type="button"
+                  className="icon-button"
+                  onClick={handleNeutralHueReset}
+                  aria-label="Reset neutral hue"
+                >
+                  <RestoreIcon size={16} />
+                </button>
+              </div>
+            </div>
+            <label className="sidebar-slider">
+              <span className="sidebar-slider__label">Neutral hue</span>
+              <input
+                type="range"
+                min="0"
+                max="360"
+                step="1"
+                value={neutralHue}
+                onChange={(event) => onNeutralHueChange?.(event.target.value)}
+              />
+              <span className="sidebar-slider__value">{neutralHue}°</span>
+            </label>
+          </div>
+        ) : null}
       </div>
     </aside>
   );