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

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

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+ */}
-      <div className="flex lg:hidden glass rounded-xl p-1 gap-1">
-        {(['calc', 'graph'] as Tab[]).map((t) => (
-          <button
-            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>
+      <MobileTabs
+        tabs={[{ value: 'calc', label: 'Calculator' }, { value: 'graph', label: 'Graph' }]}
+        active={tab}
+        onChange={(v) => setTab(v as Tab)}
+      />
 
       {/* Main layout — side-by-side on lg, tabbed on mobile */}
       <div