Studio: convert right sidebar Wheels/HSL tabs to collapsible panels

Author: thevangelist

src/Studio.tsx

@@ -183,7 +183,6 @@ const Studio = ({ onBack }: { onBack?: () => void } = {}) => {
   const [hslAdjustments,   setHslAdjustments  ] = useState<HslAdjustments>(defaultHslAdjustments);
   const [selectedBand,     setSelectedBand    ] = useState<HslBandKey>('reds');
   const [colorSidebarOpen, setColorSidebarOpen] = useState(true);
-  const [colorTab,         setColorTab        ] = useState<'wheels' | 'hsl'>('wheels');
   const [colorWheels,      setColorWheels     ] = useState<ColorWheelAdjustments>({
     lift:  { x: 0, y: 0, luma: 0 },
     gamma: { x: 0, y: 0, luma: 0 },
@@ -789,28 +788,11 @@ const Studio = ({ onBack }: { onBack?: () => void } = {}) => {
         {colorSidebarOpen && image && (
           <div className="hidden md:flex flex-col w-64 bg-gray-800 border-l border-gray-700 shrink-0">
 
-            {/* Tab bar */}
-            <div className="flex border-b border-gray-700 shrink-0">
-              {(['wheels', 'hsl'] as const).map(tab => (
-                <button
-                  key={tab}
-                  onClick={() => setColorTab(tab)}
-                  className={`flex-1 py-2 text-xs font-medium uppercase tracking-wider transition-colors ${
-                    colorTab === tab
-                      ? 'text-white border-b-2 border-purple-500 bg-gray-800'
-                      : 'text-gray-500 hover:text-gray-300 border-b-2 border-transparent'
-                  }`}
-                >
-                  {tab === 'wheels' ? 'Wheels' : 'HSL'}
-                </button>
-              ))}
-            </div>
+            <div className="flex-1 overflow-y-auto p-3 space-y-3">
 
-            <div className="flex-1 overflow-y-auto">
-
-              {/* ── WHEELS tab ── */}
-              {colorTab === 'wheels' && (
-                <div className="p-3 space-y-4">
+              {/* ── Color Wheels panel ── */}
+              <CollapsiblePanel id="wheels" title="Color Wheels">
+                <div className="space-y-4">
                   {([
                     { key: 'lift'  as const, label: 'Shadows'    },
                     { key: 'gamma' as const, label: 'Midtones'   },
@@ -880,11 +862,11 @@ const Studio = ({ onBack }: { onBack?: () => void } = {}) => {
                     Drag wheels to push color into shadows, midtones, or highlights. Double-click a wheel to reset it.
                   </p>
                 </div>
-              )}
+              </CollapsiblePanel>
 
-              {/* ── HSL tab ── */}
-              {colorTab === 'hsl' && (
-                <div className="p-3 space-y-3">
+              {/* ── HSL panel ── */}
+              <CollapsiblePanel id="hsl" title="HSL">
+                <div className="space-y-3">
                   {/* Band swatches */}
                   <div className="grid grid-cols-4 gap-1.5">
                     {HSL_BANDS.map(band => (
@@ -983,7 +965,7 @@ const Studio = ({ onBack }: { onBack?: () => void } = {}) => {
                     </div>
                   )}
                 </div>
-              )}
+              </CollapsiblePanel>
 
             </div>
           </div>