Update hooks and ignore markdown files in size check

2026-04-29 12:18:08 +02:00
parent 88d6016557
commit 454195cdfb
13 changed files with 1064 additions and 68 deletions
@@ -0,0 +1,451 @@
+# Task 12 Context: Restructure CraftingTab
+
+## Task Description
+Restructure CraftingTab (remove 1-4 progress bar, split Fabricate/Enchant, top sub-tabs) (PRIORITY 3a)
+
+## Source Files
+
+### 1. `/src/components/game/tabs/CraftingTab.tsx` (268 lines)
+
+**Imports and Dependencies:**
+```typescript
+'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';
+import {
+  EnchantmentDesigner,
+  EnchantmentPreparer,
+  EnchantmentApplier,
+  EquipmentCrafter,
+} from '@/components/game/crafting';
+import { useGameToast } from '@/components/game/GameToast';
+```
+
+**Crafting Phases Constant:**
+```typescript
+// Crafting phases for the stepper
+const CRAFTING_PHASES = ['Design', 'Prepare', 'Apply', 'Craft'];
+```
+
+**Component Props:**
+```typescript
+export interface CraftingTabProps {
+  store: GameStore;
+}
+```
+
+**State and Stepper Mapping:**
+```typescript
+export function CraftingTab({ store }: CraftingTabProps) {
+  const showToast = useGameToast();
+  const currentAction = store.currentAction;
+  const designProgress = store.designProgress;
+  const preparationProgress = store.preparationProgress;
+  const applicationProgress = store.applicationProgress;
+  const equipmentCraftingProgress = store.equipmentCraftingProgress;
+  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;
+    }
+  };
+```
+
+**Stepper Component (lines 58-68):**
+```tsx
+{/* Visual Stepper - Requirement: show Design, Prepare, Apply phases as visual stepper */}
+<GameCard variant="default" className="p-4">
+  <Stepper
+    steps={CRAFTING_PHASES}
+    currentStep={getStepperIndex(craftingStage)}
+    className="px-4"
+  />
+</GameCard>
+```
+
+**Stage Content Conditional Rendering (lines 71-97):**
+```tsx
+{/* 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 (lines 99-131):**
+```tsx
+{/* Stage Navigation Buttons */}
+<GameCard variant="default" className="p-4">
+  <div className="flex justify-center gap-2 flex-wrap">
+    <ActionButton
+      variant={craftingStage === 'craft' ? 'primary' : 'secondary'}
+      size="sm"
+      onClick={() => setCraftingStage('craft')}
+      className={craftingStage === 'craft' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
+    >
+      <Anvil size={14} className="mr-1" />
+      Craft
+    </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)]' : ''}
+    >
+      <Sparkles size={14} className="mr-1" />
+      Apply
+    </ActionButton>
+  </div>
+</GameCard>
+```
+
+**Current Activity Indicators (Progress Bars to be removed - lines 133-236):**
+```tsx
+{/* Current Activity Indicator */}
+{currentAction === 'craft' && equipmentCraftingProgress && (
+  <GameCard variant="default" className="border-[var(--mana-water)]/60 bg-[var(--mana-water)]/10">
+    <SectionHeader
+      title="Crafting Equipment"
+      action={
+        <span className="text-sm text-[var(--text-muted)]">
+          {safeToFixed(calcPercent(equipmentCraftingProgress.progress, equipmentCraftingProgress.required), 0)}%
+        </span>
+      }
+    />
+    <Progress
+      value={calcPercent(equipmentCraftingProgress.progress, equipmentCraftingProgress.required)}
+      className="h-3 bg-[var(--bg-sunken)]"
+    />
+    {/* ... more content ... */}
+  </GameCard>
+)}
+
+{currentAction === 'design' && designProgress && (
+  <GameCard variant="default" className="border-[var(--mana-stellar)]/60 bg-[var(--mana-stellar)]/10">
+    {/* ... Progress bar and content ... */}
+  </GameCard>
+)}
+
+{currentAction === 'prepare' && preparationProgress && (
+  <GameCard variant="default" className="border-[var(--color-warning)]/60 bg-[var(--color-warning)]/10">
+    {/* ... Progress bar and content ... */}
+  </GameCard>
+)}
+
+{currentAction === 'enchant' && applicationProgress && (
+  <GameCard variant="default" className="border-[var(--mana-light)]/60 bg-[var(--mana-light)]/10">
+    {/* ... Progress bar and content ... */}
+  </GameCard>
+)}
+```
+
+---
+
+### 2. Files in `/src/components/game/crafting/` Directory
+
+| File | Size | Last Modified |
+|------|------|---------------|
+| `EnchantmentApplier.tsx` | 12,206 bytes | 1777364523 |
+| `EnchantmentDesigner.tsx` | 19,568 bytes | 1777361558 |
+| `EnchantmentPreparer.tsx` | 14,816 bytes | 1777365343 |
+| `EquipmentCrafter.tsx` | 9,121 bytes | 1777205526 |
+| `index.tsx` | 396 bytes | 1777028644 |
+
+**Barrel File (`index.tsx`):**
+```typescript
+// Barrel file for crafting components
+
+export { EnchantmentDesigner, type EnchantmentDesignerProps } from './EnchantmentDesigner';
+export { EnchantmentPreparer, type EnchantmentPreparerProps } from './EnchantmentPreparer';
+export { EnchantmentApplier, type EnchantmentApplierProps } from './EnchantmentApplier';
+export { EquipmentCrafter, type EquipmentCrafterProps } from './EquipmentCrafter';
+```
+
+---
+
+### 3. Stepper Component (`/src/components/ui/stepper.tsx`)
+
+**Interface:**
+```typescript
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+  steps: string[];
+  currentStep: number; // 0-indexed
+  orientation?: "horizontal" | "vertical";
+}
+```
+
+**Full Implementation (100 lines):**
+```typescript
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Check, Circle, ArrowRight } from "lucide-react";
+
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+  steps: string[];
+  currentStep: number; // 0-indexed
+  orientation?: "horizontal" | "vertical";
+}
+
+interface StepProps {
+  label: string;
+  stepNumber: number;
+  isActive: boolean;
+  isCompleted: boolean;
+  isLast: boolean;
+  orientation?: "horizontal" | "vertical";
+}
+
+const Step = ({ label, stepNumber, isActive, isCompleted, isLast, orientation = "horizontal" }: StepProps) => {
+  return (
+    <div
+      className={cn(
+        "flex items-center",
+        orientation === "vertical" ? "flex-col" : "flex-row",
+        orientation === "vertical" && "w-full"
+      )}
+    >
+      <div className="flex flex-col items-center">
+        <div
+          className={cn(
+            "flex items-center justify-center w-8 h-8 rounded-full border-2 transition-all duration-200",
+            isActive && "border-[var(--interactive-primary)] bg-[var(--interactive-primary)]/20 text-[var(--interactive-primary)]",
+            isCompleted && "border-[var(--color-success)] bg-[var(--color-success)]/20 text-[var(--color-success)]",
+            !isActive && !isCompleted && "border-[var(--border-default)] bg-[var(--bg-sunken)] text-[var(--text-muted)]"
+          )}
+          aria-current={isActive ? "step" : undefined}
+        >
+          {isCompleted ? (
+            <Check size={16} />
+          ) : (
+            <span className="text-xs font-semibold">{stepNumber}</span>
+          )}
+        </div>
+        <span
+          className={cn(
+            "text-xs mt-1 font-medium",
+            isActive && "text-[var(--interactive-primary)]",
+            isCompleted && "text-[var(--color-success)]",
+            !isActive && !isCompleted && "text-[var(--text-muted)]"
+          )}
+        >
+          {label}
+        </span>
+      </div>
+      {!isLast && (
+        <div
+          className={cn(
+            "flex-1 mx-2",
+            orientation === "vertical" ? "h-8 w-px my-1" : "h-px",
+            isCompleted ? "bg-[var(--color-success)]" : "bg-[var(--border-default)]"
+          )}
+        />
+      )}
+    </div>
+  );
+};
+
+export function Stepper({ steps, currentStep, orientation = "horizontal", className, ...props }: StepperProps) {
+  return (
+    <div
+      data-slot="stepper"
+      className={cn(
+        "flex w-full",
+        orientation === "horizontal" ? "flex-row items-center" : "flex-col",
+        className
+      )}
+      role="list"
+      aria-label="Progress steps"
+      {...props}
+    >
+      {steps.map((step, index) => (
+        <div
+          key={step}
+          className={cn("flex items-center", orientation === "vertical" && "w-full")}
+          role="listitem"
+        >
+          <Step
+            label={step}
+            stepNumber={index + 1}
+            isActive={index === currentStep}
+            isCompleted={index < currentStep}
+            isLast={index === steps.length - 1}
+            orientation={orientation}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+---
+
+### 4. Current Sub-Tab/Navigation Implementation Details
+
+**Current Structure:**
+The CraftingTab currently uses a **4-stage linear workflow** with:
+1. A visual Stepper component showing phases: Design → Prepare → Apply → Craft
+2. Navigation buttons at the bottom to switch between stages
+3. Conditional rendering of content based on `craftingStage` state
+
+**Current Stages:**
+- `design` - EnchantmentDesigner component (Design enchantments)
+- `prepare` - EnchantmentPreparer component (Prepare equipment)
+- `apply` - EnchantmentApplier component (Apply enchantments)
+- `craft` - EquipmentCrafter component (Craft equipment)
+
+**Issues to Address (Task Requirements):**
+1. **Remove 1-4 progress bar** - The Stepper component (lines 58-68) needs to be removed
+2. **Split Fabricate/Enchant** - Currently "Craft" (EquipmentCrafter) is mixed in with enchantment workflow. Need to split into:
+   - "Fabricate" tab - for EquipmentCrafter (crafting equipment)
+   - "Enchant" tab - for the Design → Prepare → Apply workflow
+3. **Top sub-tabs** - Replace the bottom navigation buttons with proper top-level sub-tabs
+
+**Current Navigation Pattern:**
+- State: `craftingStage` (useState with 4 possible values)
+- Navigation: 4 ActionButtons at the bottom of the tab
+- Visual indicator: Stepper at the top showing progress through phases
+
+**Suggested New Structure (for implementation):**
+```
+CraftingTab
+├── Top Sub-Tabs: [Fabricate] [Enchant]
+├── Fabricate Content: EquipmentCrafter
+└── Enchant Content:
+    ├── Sub-Navigation: [Design] [Prepare] [Apply]
+    ├── Design: EnchantmentDesigner
+    ├── Prepare: EnchantmentPreparer
+    └── Apply: EnchantmentApplier
+```
+
+---
+
+### 5. Component Props Signatures
+
+**EquipmentCrafterProps:**
+```typescript
+export interface EquipmentCrafterProps {
+  store: GameStore;
+}
+```
+
+**EnchantmentDesignerProps:**
+```typescript
+export interface EnchantmentDesignerProps {
+  store: GameStore;
+  selectedEquipmentType: string | null;
+  setSelectedEquipmentType: (type: string | null) => void;
+  selectedEffects: DesignEffect[];
+  setSelectedEffects: (effects: DesignEffect[]) => void;
+  designName: string;
+  setDesignName: (name: string) => void;
+  selectedDesign: string | null;
+  setSelectedDesign: (id: string | null) => void;
+}
+```
+
+**EnchantmentPreparerProps:**
+```typescript
+export interface EnchantmentPreparerProps {
+  store: GameStore;
+  selectedEquipmentInstance: string | null;
+  setSelectedEquipmentInstance: (id: string | null) => void;
+}
+```
+
+**EnchantmentApplierProps:**
+```typescript
+export interface EnchantmentApplierProps {
+  store: GameStore;
+  selectedEquipmentInstance: string | null;
+  setSelectedEquipmentInstance: (id: string | null) => void;
+  selectedDesign: string | null;
+  setSelectedDesign: (id: string | null) => void;
+  onEnchantmentApplied?: () => void;
+  onCapacityExceeded?: (itemName: string, used: number, total: number) => void;
+}
+```
+
+---
+
+### 6. Key Observations for Restructuring
+
+1. **Stepper Removal**: The `CRAFTING_PHASES` constant and `Stepper` component usage must be removed from CraftingTab
+
+2. **State Management**: The `craftingStage` state will need to be replaced with:
+   - A top-level tab state (`fabricate` | `enchant`)
+   - An enchant sub-stage state (`design` | `prepare` | `apply`) when in enchant mode
+
+3. **Progress Bars**: The activity indicators with Progress components (lines 133-236) should potentially be moved into their respective components (EquipmentCrafter, EnchantmentDesigner, etc.) rather than being in CraftingTab
+
+4. **No Tab Component**: Currently, the app doesn't use a Tab component - it uses conditional rendering with ActionButtons. The restructured version should implement proper tabs at the top level
+
+5. **Helper Functions**: The `safeToFixed` and `calcPercent` helpers are used for progress bars - these may no longer be needed in CraftingTab after restructuring
@@ -0,0 +1,282 @@
+# Task 13 Context: Fix LootTab Nesting (Remove Redundant Layers)
+
+## Task Description
+Fix LootTab nesting (remove redundant layers) (PRIORITY 3b)
+
+## Source Files
+
+### 1. `/src/components/game/tabs/LootTab.tsx` (48 lines)
+
+**Full Content:**
+```typescript
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import type { GameStore } from '@/lib/game/store';
+import { LootInventoryDisplay } from '@/components/game/LootInventory';
+
+export interface LootTabProps {
+  store: GameStore;
+}
+
+export function LootTab({ store }: LootTabProps) {
+  const inventory = store.lootInventory;
+  const elements = store.elements;
+  const equipmentInstances = store.equipmentInstances;
+  
+  // Count items for badge
+  const materialCount = Object.values(inventory.materials).reduce((a, b) => a + b, 0);
+  const blueprintCount = inventory.blueprints.length;
+  const equipmentCount = Object.keys(equipmentInstances).length;
+  const totalItems = materialCount + blueprintCount + equipmentCount;
+  
+  return (
+    <div className="space-y-4">
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
+            💎 Loot Inventory
+            <Badge className="ml-auto bg-gray-800 text-gray-300">
+              {totalItems} items
+            </Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <LootInventoryDisplay
+            inventory={inventory}
+            elements={elements}
+            equipmentInstances={equipmentInstances}
+            onDeleteMaterial={store.deleteMaterial}
+            onDeleteEquipment={store.deleteEquipmentInstance}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+LootTab.displayName = "LootTab";
+```
+
+**Key Observations - LootTab Redundant Wrapper:**
+- Uses `Card` component from `@/components/ui/card` with header "💎 Loot Inventory"
+- Shows a badge with total items count
+- Wraps `LootInventoryDisplay` inside `CardContent`
+- **This creates the outer layer of nesting**
+
+---
+
+### 2. `/src/components/game/LootInventory.tsx` (499 lines)
+
+**Component Interface:**
+```typescript
+interface LootInventoryProps {
+  inventory: LootInventoryType;
+  elements?: Record<string, ElementState>;
+  equipmentInstances?: Record<string, EquipmentInstance>;
+  onDeleteMaterial?: (materialId: string, amount: number) => void;
+  onDeleteEquipment?: (instanceId: string) => void;
+}
+```
+
+**Main Component Export:**
+```typescript
+export function LootInventoryDisplay({ 
+  inventory, 
+  elements,
+  equipmentInstances = {},
+  onDeleteMaterial,
+  onDeleteEquipment,
+}: LootInventoryProps) {
+  // ... state and handlers ...
+  
+  // Check if we have anything to show
+  const hasItems = totalItems > 0 || essenceCount > 0;
+
+  if (!hasItems) {
+    return (
+      <GameCard variant="default" className="w-full">
+        <div className="flex items-center gap-2 mb-2">
+          <Gem className="w-4 h-4 text-[var(--mana-light)]" />
+          <h3 className="text-[var(--mana-light)] game-panel-title text-xs uppercase tracking-wider">
+            Inventory
+          </h3>
+        </div>
+        <div className="text-[var(--text-muted)] text-sm text-center py-4">
+          No items collected yet. Defeat floors and guardians to find loot!
+        </div>
+      </GameCard>
+    );
+  }
+  
+  // ... handlers ...
+  
+  return (
+    <>
+      <GameCard variant="default" className="w-full">
+        <div className="flex items-center gap-2 mb-3">
+          <Gem className="w-4 h-4 text-[var(--mana-light)]" />
+          <h3 className="text-[var(--mana-light)] game-panel-title text-xs uppercase tracking-wider">
+            Inventory
+          </h3>
+          <Badge 
+            className="ml-auto bg-[var(--bg-sunken)] text-[var(--text-secondary)] text-xs border-[var(--border-subtle)]"
+            aria-label={`${totalItems} items in inventory`}
+          >
+            {totalItems} items
+          </Badge>
+        </div>
+        
+        {/* Search and Filter Controls */}
+        {/* ... */}
+        
+        {/* Filter Tabs */}
+        {/* ... */}
+        
+        <Separator className="bg-[var(--border-subtle)] mb-3" />
+        
+        <ScrollArea className="h-64 w-full">
+          {/* Materials, Essence, Blueprints, Equipment sections */}
+          {/* ... */}
+        </ScrollArea>
+      </GameCard>
+      
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={!!deleteConfirm} onOpenChange={() => setDeleteConfirm(null)}>
+        {/* ... */}
+      </AlertDialog>
+    </>
+  );
+}
+```
+
+**Key Observations - LootInventory Redundant Wrapper:**
+- Uses `GameCard` component (from `@/components/ui/game-card`)
+- Has its own header with "Inventory" title and `Gem` icon
+- Shows a badge with total items count (duplicating LootTab's badge)
+- Contains all the actual content: search, filters, items display
+- **This creates the inner layer of nesting**
+
+---
+
+## 3. Duplicate Headings/Wrappers Issue
+
+### Redundant Card Nesting:
+```
+LootTab (Outer Card)
+├── CardHeader: "💎 Loot Inventory" + Badge: "{totalItems} items"
+└── CardContent
+    └── LootInventoryDisplay (Inner GameCard)
+        ├── Header: "Inventory" + Badge: "{totalItems} items"  ← DUPLICATE
+        ├── Search/Filter Controls
+        ├── Items Display
+        └── Delete Dialog
+```
+
+### Specific Code Duplication:
+
+**LootTab.tsx (lines 24-33) - Outer Header:**
+```tsx
+<CardHeader className="pb-2">
+  <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
+    💎 Loot Inventory
+    <Badge className="ml-auto bg-gray-800 text-gray-300">
+      {totalItems} items
+    </Badge>
+  </CardTitle>
+</CardHeader>
+```
+
+**LootInventory.tsx (lines 191-202) - Inner Header (DUPLICATE):**
+```tsx
+<div className="flex items-center gap-2 mb-3">
+  <Gem className="w-4 h-4 text-[var(--mana-light)]" />
+  <h3 className="text-[var(--mana-light)] game-panel-title text-xs uppercase tracking-wider">
+    Inventory
+  </h3>
+  <Badge 
+    className="ml-auto bg-[var(--bg-sunken)] text-[var(--text-secondary)] text-xs border-[var(--border-subtle)]"
+    aria-label={`${totalItems} items in inventory`}
+  >
+    {totalItems} items
+  </Badge>
+</div>
+```
+
+### Redundant Badge Count:
+- LootTab shows: `{totalItems} items` 
+- LootInventoryDisplay also shows: `{totalItems} items`
+- Both calculate the same `totalItems` value
+
+---
+
+## 4. Current Component Hierarchy
+
+```
+Game.tsx / Main Game Layout
+    │
+    └── Tabs Component (renders active tab)
+            │
+            └── LootTab ({ store })
+                    │
+                    ├── Card (bg-gray-900/80 border-gray-700)
+                    │   ├── CardHeader
+                    │   │   └── CardTitle: "💎 Loot Inventory" + Badge
+                    │   └── CardContent
+                    │       │
+                    │       └── LootInventoryDisplay ({ inventory, elements, equipmentInstances, ... })
+                    │               │
+                    │               ├── GameCard (variant="default" className="w-full")
+                    │               │   ├── Header: "Inventory" + Badge + Search/Filter
+                    │               │   ├── Separator
+                    │               │   ├── ScrollArea
+                    │               │   │   ├── Materials Section
+                    │               │   │   ├── Essence Section
+                    │               │   │   ├── Blueprints Section
+                    │               │   │   └── Equipment Section
+                    │               │   └── (content)
+                    │               │
+                    │               └── AlertDialog (Delete Confirmation)
+                    │
+                    └── (end Card)
+```
+
+---
+
+## 5. Comparison with Other Tabs
+
+Looking at other tabs in `/src/components/game/tabs/`:
+
+- **EquipmentTab.tsx**: Uses `GameCard` directly without an outer `Card` wrapper
+- **CraftingTab.tsx**: Uses multiple `GameCard` components for different sections, no outer `Card`
+- **GolemancyTab.tsx**: Uses `GameCard` directly
+- **LabTab.tsx**: Uses `GameCard` directly
+
+**Pattern**: Most tabs render their content directly using `GameCard` components without an additional `Card` wrapper from the tab itself.
+
+---
+
+## 6. Summary of Issues to Fix
+
+1. **Redundant Card Wrapper in LootTab**: The `Card` + `CardHeader` + `CardContent` wrapper in LootTab.tsx is unnecessary since LootInventoryDisplay already provides its own `GameCard` wrapper.
+
+2. **Duplicate Header**: Both LootTab and LootInventoryDisplay show similar headers with:
+   - Title text ("Loot Inventory" vs "Inventory")
+   - Item count badge
+   - Icon (emoji 💎 vs Gem icon)
+
+3. **Double Wrapping**: Content is wrapped in two card-like components:
+   - Outer: `Card` from `@/components/ui/card`
+   - Inner: `GameCard` from `@/components/ui/game-card`
+
+4. **Solution Direction**: Remove the outer `Card` wrapper from LootTab.tsx and let LootInventoryDisplay handle the card styling, OR remove the inner `GameCard` from LootInventoryDisplay and keep only the outer wrapper.
+
+---
+
+## 7. Files That Would Need Modification
+
+1. **`/src/components/game/tabs/LootTab.tsx`** - Remove outer Card wrapper, pass props directly to LootInventoryDisplay
+2. **`/src/components/game/LootInventory.tsx`** - Potentially remove GameCard wrapper if keeping LootTab's Card, or keep as-is if removing LootTab's Card
+
+**Recommended Approach**: Remove the outer `Card` wrapper from `LootTab.tsx` and let `LootInventoryDisplay` handle the full display (since it already has a complete GameCard wrapper with header, controls, and content).