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

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

components/animate/AnimationEditor.tsx

@@ -9,6 +9,7 @@ import { PresetLibrary } from './PresetLibrary';
 import { ExportPanel } from './ExportPanel';
 import { DEFAULT_CONFIG, newKeyframe } from '@/lib/animate/defaults';
 import { cn } from '@/lib/utils/cn';
+import { MobileTabs } from '@/components/ui/mobile-tabs';
 import type { AnimationConfig, KeyframeProperties as KFProps, PreviewElement } from '@/types/animate';
 
 type MobileTab = 'edit' | 'preview';
@@ -75,23 +76,11 @@ export function AnimationEditor() {
   return (
     <div className="flex flex-col gap-4">
 
-      {/* ── Mobile tab switcher ─────────────────────────────── */}
+      <MobileTabs
-      <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
+        tabs={[{ value: 'edit', label: 'Edit' }, { value: 'preview', label: 'Preview' }]}
-        {(['edit', 'preview'] as MobileTab[]).map((t) => (
+        active={mobileTab}
-          <button
+        onChange={(v) => setMobileTab(v as MobileTab)}
-            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 === 'edit' ? 'Edit' : 'Preview'}
-          </button>
-        ))}
-      </div>
 
       {/* ── Main layout ─────────────────────────────────────── */}
       <div

components/ascii/ASCIIConverter.tsx

@@ -12,6 +12,7 @@ import { decodeFromUrl, updateUrl, getShareableUrl } from '@/lib/utils/urlSharin
 import { toast } from 'sonner';
 import type { ASCIIFont } from '@/types/ascii';
 import { cn } from '@/lib/utils';
+import { MobileTabs } from '@/components/ui/mobile-tabs';
 
 type Tab = 'editor' | 'preview';
 
@@ -102,23 +103,11 @@ export function ASCIIConverter() {
   return (
     <div className="flex flex-col gap-4">
 
-      {/* ── Mobile tab switcher ────────────────────────────────── */}
+      <MobileTabs
-      <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
+        tabs={[{ value: 'editor', label: 'Editor' }, { value: 'preview', label: 'Preview' }]}
-        {(['editor', 'preview'] as Tab[]).map((t) => (
+        active={tab}
-          <button
+        onChange={(v) => setTab(v as Tab)}
-            key={t}
+      />
-            onClick={() => setTab(t)}
-            className={cn(
-              'flex-1 py-2.5 rounded-lg text-sm font-medium capitalize transition-all',
-              tab === t
-                ? 'bg-primary text-primary-foreground shadow-sm'
-                : 'text-muted-foreground hover:text-foreground'
-            )}
-          >
-            {t === 'editor' ? 'Editor' : 'Preview'}
-          </button>
-        ))}
-      </div>
 
       {/* ── Main layout ────────────────────────────────────────── */}
       <div

components/calculate/Calculator.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { cn } from '@/lib/utils';
 import { ExpressionPanel } from './ExpressionPanel';
 import { GraphPanel } from './GraphPanel';
+import { MobileTabs } from '@/components/ui/mobile-tabs';
 
 type Tab = 'calc' | 'graph';
 
@@ -13,23 +14,11 @@ export default function Calculator() {
   return (
     <div className="flex flex-col gap-4">
 
-      {/* Mobile tab switcher — hidden on lg+ */}
+      <MobileTabs
-      <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
+        tabs={[{ value: 'calc', label: 'Calculator' }, { value: 'graph', label: 'Graph' }]}
-        {(['calc', 'graph'] as Tab[]).map((t) => (
+        active={tab}
-          <button
+        onChange={(v) => setTab(v as Tab)}
-            key={t}
+      />
-            onClick={() => setTab(t)}
-            className={cn(
-              'flex-1 py-2.5 rounded-lg text-sm font-medium capitalize transition-all',
-              tab === t
-                ? 'bg-primary text-primary-foreground shadow-sm'
-                : 'text-muted-foreground hover:text-foreground'
-            )}
-          >
-            {t === 'calc' ? 'Calculator' : 'Graph'}
-          </button>
-        ))}
-      </div>
 
       {/* Main layout — side-by-side on lg, tabbed on mobile */}
       <div

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 ────────────────────────────────── */}
+      <MobileTabs
-      <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
+        tabs={[{ value: 'pick', label: 'Pick' }, { value: 'explore', label: 'Explore' }]}
-        {(['pick', 'explore'] as MobileTab[]).map((t) => (
+        active={mobileTab}
-          <button
+        onChange={(v) => setMobileTab(v as MobileTab)}
-            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>
 
       {/* ── Main layout ────────────────────────────────────────── */}
       <div

components/favicon/FaviconGenerator.tsx

@@ -10,6 +10,7 @@ import { downloadBlobsAsZip } from '@/lib/media/utils/fileUtils';
 import type { FaviconSet, FaviconOptions } from '@/types/favicon';
 import { toast } from 'sonner';
 import { cn } from '@/lib/utils/cn';
+import { MobileTabs } from '@/components/ui/mobile-tabs';
 
 type Tab = 'icons' | 'html' | 'manifest';
 type MobileTab = 'setup' | 'results';
@@ -76,23 +77,11 @@ export function FaviconGenerator() {
   return (
     <div className="flex flex-col gap-4">
 
-      {/* ── Mobile tab switcher ─────────────────────────────── */}
+      <MobileTabs
-      <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
+        tabs={[{ value: 'setup', label: 'Setup' }, { value: 'results', label: 'Results' }]}
-        {(['setup', 'results'] as MobileTab[]).map((t) => (
+        active={mobileTab}
-          <button
+        onChange={(v) => setMobileTab(v as MobileTab)}
-            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 === 'setup' ? 'Setup' : 'Results'}
-          </button>
-        ))}
-      </div>
 
       {/* ── Main layout ─────────────────────────────────────── */}
       <div

components/media/FileConverter.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { SliderRow } from '@/components/ui/slider-row';
+import { MobileTabs } from '@/components/ui/mobile-tabs';
 import { FileUpload } from './FileUpload';
 import { ConversionPreview } from './ConversionPreview';
 import { toast } from 'sonner';
@@ -182,23 +183,11 @@ export function FileConverter() {
   return (
     <div className="flex flex-col gap-4">
 
-      {/* ── Mobile tab switcher ─────────────────────────────── */}
+      <MobileTabs
-      <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
+        tabs={[{ value: 'upload', label: 'Upload' }, { value: 'convert', label: 'Convert' }]}
-        {(['upload', 'convert'] as MobileTab[]).map((t) => (
+        active={mobileTab}
-          <button
+        onChange={(v) => setMobileTab(v as MobileTab)}
-            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 === 'upload' ? 'Upload' : 'Convert'}
-          </button>
-        ))}
-      </div>
 
       {/* ── Main layout ─────────────────────────────────────── */}
       <div

components/qrcode/QRCodeGenerator.tsx

@@ -10,6 +10,7 @@ import { downloadBlob } from '@/lib/media/utils/fileUtils';
 import { debounce } from '@/lib/utils/debounce';
 import { toast } from 'sonner';
 import { cn } from '@/lib/utils/cn';
+import { MobileTabs } from '@/components/ui/mobile-tabs';
 import type { ErrorCorrectionLevel, ExportSize } from '@/types/qrcode';
 
 type MobileTab = 'configure' | 'preview';
@@ -100,23 +101,11 @@ export function QRCodeGenerator() {
   return (
     <div className="flex flex-col gap-4">
 
-      {/* ── Mobile tab switcher ─────────────────────────────── */}
+      <MobileTabs
-      <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
+        tabs={[{ value: 'configure', label: 'Configure' }, { value: 'preview', label: 'Preview' }]}
-        {(['configure', 'preview'] as MobileTab[]).map((t) => (
+        active={mobileTab}
-          <button
+        onChange={(v) => setMobileTab(v as MobileTab)}
-            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 === 'configure' ? 'Configure' : 'Preview'}
-          </button>
-        ))}
-      </div>
 
       {/* ── Main layout ─────────────────────────────────────── */}
       <div

components/ui/code-snippet.tsx

@@ -29,7 +29,7 @@ export function CodeSnippet({ code, maxHeight }: CodeSnippetProps) {
         {copied ? 'Copied' : 'Copy'}
       </button>
       <pre
-        className="p-4 overflow-x-auto font-mono text-[11px] text-white/55 leading-relaxed scrollbar-thin"
+        className="p-4 overflow-x-auto font-mono text-[11px] text-white/55 leading-relaxed"
         style={maxHeight ? { maxHeight, overflowY: 'auto' } : undefined}
       >
         <code>{code}</code>

components/ui/mobile-tabs.tsx

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/utils/cn';
+
+interface Tab {
+  value: string;
+  label: string;
+}
+
+interface MobileTabsProps {
+  tabs: Tab[];
+  active: string;
+  onChange: (value: string) => void;
+}
+
+export function MobileTabs({ tabs, active, onChange }: MobileTabsProps) {
+  return (
+    <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
+      {tabs.map(({ value, label }) => (
+        <button
+          key={value}
+          onClick={() => onChange(value)}
+          className={cn(
+            'flex-1 py-2.5 rounded-lg text-sm font-medium transition-all',
+            active === value
+              ? 'bg-primary text-primary-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'
+          )}
+        >
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}

components/units/MainConverter.tsx

@@ -14,6 +14,7 @@ import {
   type ConversionResult,
 } from '@/lib/units/units';
 import { parseNumberInput, formatNumber, cn } from '@/lib/utils';
+import { MobileTabs } from '@/components/ui/mobile-tabs';
 
 type Tab = 'category' | 'convert';
 
@@ -87,23 +88,11 @@ export default function MainConverter() {
   return (
     <div className="flex flex-col gap-4">
 
-      {/* ── Mobile tab switcher ────────────────────────────────── */}
+      <MobileTabs
-      <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
+        tabs={[{ value: 'category', label: 'Category' }, { value: 'convert', label: 'Convert' }]}
-        {(['category', 'convert'] as Tab[]).map((t) => (
+        active={tab}
-          <button
+        onChange={(v) => setTab(v as Tab)}
-            key={t}
+      />
-            onClick={() => setTab(t)}
-            className={cn(
-              'flex-1 py-2.5 rounded-lg text-sm font-medium capitalize transition-all',
-              tab === t
-                ? 'bg-primary text-primary-foreground shadow-sm'
-                : 'text-muted-foreground hover:text-foreground'
-            )}
-          >
-            {t === 'category' ? 'Category' : 'Convert'}
-          </button>
-        ))}
-      </div>
 
       {/* ── Main layout ────────────────────────────────────────── */}
       <div