Restructure CraftingTab: remove stepper, add Fabricate/Enchant top sub-tabs

src/components/game/tabs/CraftingTab.tsx

@@ -1,12 +1,10 @@
 'use client';
 
 import { useState } from 'react';
-import { Button } from '@/components/ui/button';
 import { Progress } from '@/components/ui/progress';
 import { GameCard } from '@/components/ui/game-card';
 import { SectionHeader } from '@/components/ui/section-header';
 import { ActionButton } from '@/components/ui/action-button';
-import { Stepper } from '@/components/ui/stepper';
 import { Scroll, Hammer, Sparkles, Anvil } from 'lucide-react';
 import type { EquipmentInstance, EnchantmentDesign, DesignEffect, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
 import { fmt, type GameStore } from '@/lib/game/store';
@@ -22,9 +20,6 @@ export interface CraftingTabProps {
   store: GameStore;
 }
 
-// Crafting phases for the stepper
-const CRAFTING_PHASES = ['Design', 'Prepare', 'Apply', 'Craft'];
-
 export function CraftingTab({ store }: CraftingTabProps) {
   const showToast = useGameToast();
   const currentAction = store.currentAction;
@@ -35,18 +30,8 @@ export function CraftingTab({ store }: CraftingTabProps) {
   const pauseApplication = store.pauseApplication;
   const resumeApplication = store.resumeApplication;
 
-  const [craftingStage, setCraftingStage] = useState<'design' | 'prepare' | 'apply' | 'craft'>('craft');
-
-  // Map crafting stage to stepper index
-  const getStepperIndex = (stage: string): number => {
-    switch (stage) {
-      case 'design': return 0;
-      case 'prepare': return 1;
-      case 'apply': return 2;
-      case 'craft': return 3;
-      default: return 0;
-    }
-  };
+  const [activeTab, setActiveTab] = useState<'fabricate' | 'enchant'>('fabricate');
+  const [enchantStage, setEnchantStage] = useState<'design' | 'prepare' | 'apply'>('design');
 
   // Safe toFixed helper
   const safeToFixed = (value: number | undefined, decimals: number = 0): string => {
@@ -72,96 +57,105 @@ export function CraftingTab({ store }: CraftingTabProps) {
 
   return (
     <div className="space-y-4 max-w-full overflow-x-hidden">
-      {/* Visual Stepper - Requirement: show Design, Prepare, Apply phases as visual stepper */}
+      {/* Top Sub-Tabs: Fabricate / Enchant */}
       <GameCard variant="default" className="p-4">
-        <Stepper
-          steps={CRAFTING_PHASES}
-          currentStep={getStepperIndex(craftingStage)}
-          className="px-4"
-        />
-      </GameCard>
-
-      {/* Stage Content - Without unlabeled Tabs, using conditional rendering instead */}
-      <div className="mt-4">
-        {craftingStage === 'craft' && (
-          <EquipmentCrafter store={store} />
-        )}
-        {craftingStage === 'design' && (
-          <EnchantmentDesigner
-            store={store}
-            selectedEquipmentType={null}
-            setSelectedEquipmentType={() => {}}
-            selectedEffects={[]}
-            setSelectedEffects={() => {}}
-            designName={''}
-            setDesignName={() => {}}
-            selectedDesign={null}
-            setSelectedDesign={() => {}}
-          />
-        )}
-        {craftingStage === 'prepare' && (
-          <EnchantmentPreparer
-            store={store}
-            selectedEquipmentInstance={null}
-            setSelectedEquipmentInstance={() => {}}
-          />
-        )}
-        {craftingStage === 'apply' && (
-          <EnchantmentApplier
-            store={store}
-            selectedEquipmentInstance={null}
-            setSelectedEquipmentInstance={() => {}}
-            selectedDesign={null}
-            setSelectedDesign={() => {}}
-            onEnchantmentApplied={handleEnchantmentApplied}
-            onCapacityExceeded={handleCapacityExceeded}
-          />
-        )}
-      </div>
-
-      {/* Stage Navigation Buttons */}
-      <GameCard variant="default" className="p-4">
-        <div className="flex justify-center gap-2 flex-wrap">
+        <div className="flex justify-center gap-2">
           <ActionButton
-            variant={craftingStage === 'craft' ? 'primary' : 'secondary'}
-            size="sm"
-            onClick={() => setCraftingStage('craft')}
-            className={craftingStage === 'craft' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
+            variant={activeTab === 'fabricate' ? 'primary' : 'secondary'}
+            onClick={() => setActiveTab('fabricate')}
+            className={activeTab === 'fabricate' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
           >
             <Anvil size={14} className="mr-1" />
-            Craft
+            Fabricate
           </ActionButton>
           <ActionButton
-            variant={craftingStage === 'design' ? 'primary' : 'secondary'}
-            size="sm"
-            onClick={() => setCraftingStage('design')}
-            className={craftingStage === 'design' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
-          >
-            <Scroll size={14} className="mr-1" />
-            Design
-          </ActionButton>
-          <ActionButton
-            variant={craftingStage === 'prepare' ? 'primary' : 'secondary'}
-            size="sm"
-            onClick={() => setCraftingStage('prepare')}
-            className={craftingStage === 'prepare' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
-          >
-            <Hammer size={14} className="mr-1" />
-            Prepare
-          </ActionButton>
-          <ActionButton
-            variant={craftingStage === 'apply' ? 'primary' : 'secondary'}
-            size="sm"
-            onClick={() => setCraftingStage('apply')}
-            className={craftingStage === 'apply' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
+            variant={activeTab === 'enchant' ? 'primary' : 'secondary'}
+            onClick={() => setActiveTab('enchant')}
+            className={activeTab === 'enchant' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
           >
             <Sparkles size={14} className="mr-1" />
-            Apply
+            Enchant
           </ActionButton>
         </div>
       </GameCard>
 
-      {/* Current Activity Indicator */}
+      {/* Fabricate Content: EquipmentCrafter */}
+      {activeTab === 'fabricate' && (
+        <EquipmentCrafter store={store} />
+      )}
+
+      {/* Enchant Content: Design → Prepare → Apply workflow */}
+      {activeTab === 'enchant' && (
+        <div className="space-y-4">
+          {/* Enchant Sub-Navigation (no numbered stepper) */}
+          <GameCard variant="default" className="p-4">
+            <div className="flex justify-center gap-2 flex-wrap">
+              <ActionButton
+                variant={enchantStage === 'design' ? 'primary' : 'secondary'}
+                size="sm"
+                onClick={() => setEnchantStage('design')}
+                className={enchantStage === 'design' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
+              >
+                <Scroll size={14} className="mr-1" />
+                Design
+              </ActionButton>
+              <ActionButton
+                variant={enchantStage === 'prepare' ? 'primary' : 'secondary'}
+                size="sm"
+                onClick={() => setEnchantStage('prepare')}
+                className={enchantStage === 'prepare' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
+              >
+                <Hammer size={14} className="mr-1" />
+                Prepare
+              </ActionButton>
+              <ActionButton
+                variant={enchantStage === 'apply' ? 'primary' : 'secondary'}
+                size="sm"
+                onClick={() => setEnchantStage('apply')}
+                className={enchantStage === 'apply' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
+              >
+                <Sparkles size={14} className="mr-1" />
+                Apply
+              </ActionButton>
+            </div>
+          </GameCard>
+
+          {/* Enchant Stage Content */}
+          {enchantStage === 'design' && (
+            <EnchantmentDesigner
+              store={store}
+              selectedEquipmentType={null}
+              setSelectedEquipmentType={() => {}}
+              selectedEffects={[]}
+              setSelectedEffects={() => {}}
+              designName={''}
+              setDesignName={() => {}}
+              selectedDesign={null}
+              setSelectedDesign={() => {}}
+            />
+          )}
+          {enchantStage === 'prepare' && (
+            <EnchantmentPreparer
+              store={store}
+              selectedEquipmentInstance={null}
+              setSelectedEquipmentInstance={() => {}}
+            />
+          )}
+          {enchantStage === 'apply' && (
+            <EnchantmentApplier
+              store={store}
+              selectedEquipmentInstance={null}
+              setSelectedEquipmentInstance={() => {}}
+              selectedDesign={null}
+              setSelectedDesign={() => {}}
+              onEnchantmentApplied={handleEnchantmentApplied}
+              onCapacityExceeded={handleCapacityExceeded}
+            />
+          )}
+        </div>
+      )}
+
+      {/* Current Activity Indicator: Crafting */}
       {currentAction === 'craft' && equipmentCraftingProgress && (
         <GameCard variant="default" className="border-[var(--mana-water)]/60 bg-[var(--mana-water)]/10">
           <SectionHeader
@@ -183,6 +177,7 @@ export function CraftingTab({ store }: CraftingTabProps) {
         </GameCard>
       )}
 
+      {/* Current Activity Indicator: Designing */}
       {currentAction === 'design' && designProgress && (
         <GameCard variant="default" className="border-[var(--mana-stellar)]/60 bg-[var(--mana-stellar)]/10">
           <SectionHeader
@@ -204,6 +199,7 @@ export function CraftingTab({ store }: CraftingTabProps) {
         </GameCard>
       )}
 
+      {/* Current Activity Indicator: Preparing */}
       {currentAction === 'prepare' && preparationProgress && (
         <GameCard variant="default" className="border-[var(--color-warning)]/60 bg-[var(--color-warning)]/10">
           <SectionHeader
@@ -228,6 +224,7 @@ export function CraftingTab({ store }: CraftingTabProps) {
         </GameCard>
       )}
 
+      {/* Current Activity Indicator: Enchanting */}
       {currentAction === 'enchant' && applicationProgress && (
         <GameCard variant="default" className="border-[var(--mana-light)]/60 bg-[var(--mana-light)]/10">
           <SectionHeader
@@ -238,7 +235,7 @@ export function CraftingTab({ store }: CraftingTabProps) {
                   <ActionButton size="sm" onClick={resumeApplication}>Resume</ActionButton>
                 ) : (
                   <>
-                    <ActionButton variant="outline" size="sm" onClick={pauseApplication}>Pause</ActionButton>
+                    <ActionButton variant="secondary" size="sm" onClick={pauseApplication}>Pause</ActionButton>
                     <ActionButton variant="ghost" size="sm" onClick={() => {
                       store.cancelApplication();
                       showToast('warning', 'Enchantment Cancelled', 'The enchantment application was cancelled.');