refactor: extract MobileTabs shared component, replace in all 8 tools

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/color/ColorManipulation.tsx

@@ -11,6 +11,7 @@ import { useColorInfo, useGeneratePalette, useGenerateGradient } from '@/lib/col
 import { Loader2, Share2, Plus, X, Palette, Layers } from 'lucide-react';
 import { toast } from 'sonner';
 import { cn } from '@/lib/utils';
+import { MobileTabs } from '@/components/ui/mobile-tabs';
 
 type HarmonyType = 'monochromatic' | 'analogous' | 'complementary' | 'triadic' | 'tetradic';
 type RightTab = 'info' | 'adjust' | 'harmony' | 'gradient';
@@ -102,23 +103,11 @@ function ColorManipulationContent() {
   return (
     <div className="flex flex-col gap-4">
 
-      {/* ── Mobile tab switcher ────────────────────────────────── */}
-      <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
-        {(['pick', 'explore'] as MobileTab[]).map((t) => (
-          <button
-            key={t}
-            onClick={() => setMobileTab(t)}
-            className={cn(
-              'flex-1 py-2.5 rounded-lg text-sm font-medium capitalize transition-all',
-              mobileTab === t
-                ? 'bg-primary text-primary-foreground shadow-sm'
-                : 'text-muted-foreground hover:text-foreground'
-            )}
-          >
-            {t === 'pick' ? 'Pick' : 'Explore'}
-          </button>
-        ))}
-      </div>
+      <MobileTabs
+        tabs={[{ value: 'pick', label: 'Pick' }, { value: 'explore', label: 'Explore' }]}
+        active={mobileTab}
+        onChange={(v) => setMobileTab(v as MobileTab)}
+      />
 
       {/* ── Main layout ────────────────────────────────────────── */}
       <div