Files
Mana-Loop/src/components/game/tabs/CraftingTab.tsx
T
n8n-gitea 8bca8f85d5
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 1m28s
fix: persist CraftingTab sub-tab selection across tab navigation
- Add activeCraftingSubTab state + setActiveCraftingSubTab action to
  craftingStore (persisted to localStorage via zustand persist middleware)
- Add CraftingAttunement type to craftingStore.types and re-export from
  stores/index.ts barrel
- Update CraftingTab.tsx to read/write active sub-tab from store instead
  of local useState, so selection survives component remount
- Add default 'fabricator' value in craft-initial-state.ts
2026-06-09 19:08:49 +02:00

55 lines
1.8 KiB
TypeScript

'use client';
import clsx from 'clsx';
import { Hammer, Sparkles } from 'lucide-react';
import { DebugName } from '@/components/game/debug/debug-context';
import { useCraftingStore } from '@/lib/game/stores/craftingStore';
import type { CraftingAttunement } from '@/lib/game/stores/craftingStore.types';
import { FabricatorSubTab } from './CraftingTab/FabricatorSubTab';
import { EnchanterSubTab } from './CraftingTab/EnchanterSubTab';
interface CraftingSubTab {
key: CraftingAttunement;
label: string;
icon: typeof Hammer;
}
const CRAFTING_SUB_TABS: CraftingSubTab[] = [
{ key: 'fabricator', label: 'Fabricator', icon: Hammer },
{ key: 'enchanter', label: 'Enchanter', icon: Sparkles },
];
export function CraftingTab() {
const activeSubTab = useCraftingStore((s) => s.activeCraftingSubTab);
const setActiveSubTab = useCraftingStore((s) => s.setActiveCraftingSubTab);
return (
<DebugName name="CraftingTab">
<div className="space-y-4">
{/* Sub-tab bar — same clsx pattern as DisciplinesTab */}
<div className="flex gap-2">
{CRAFTING_SUB_TABS.map(({ key, label, icon: Icon }) => (
<button
key={key}
onClick={() => setActiveSubTab(key)}
className={clsx('rounded px-3 py-1 text-sm font-medium flex items-center gap-1.5', {
'bg-amber-600 text-white': activeSubTab === key,
'text-gray-400 hover:text-gray-200': activeSubTab !== key,
})}
>
<Icon className="w-3.5 h-3.5" />
{label}
</button>
))}
</div>
{/* Sub-tab content */}
{activeSubTab === 'fabricator' && <FabricatorSubTab />}
{activeSubTab === 'enchanter' && <EnchanterSubTab />}
</div>
</DebugName>
);
}
CraftingTab.displayName = 'CraftingTab';