WIP: Task 1 ActionButtons Rework - investigating approach

src/components/game/AchievementsDisplay.tsx

@@ -171,3 +171,5 @@ export function AchievementsDisplay({ achievements, gameState }: AchievementsPro
     </Card>
   );
 }
+
+AchievementsDisplay.displayName = "AchievementsDisplay";

src/components/game/ActionButtons.tsx

@@ -147,3 +147,6 @@ export function ActionButtons({
     </div>
   );
 }
+
+ActionButtons.displayName = "ActionButtons";
+ProgressBar.displayName = "ProgressBar";

src/components/game/ActionButtons.tsx.backup

@@ -0,0 +1,152 @@
+'use client';
+
+import { Sparkles, Swords, BookOpen, Target, FlaskConical, Cog, Hammer } from 'lucide-react';
+import type { GameAction } from '@/lib/game/types';
+
+interface ActionButtonsProps {
+  currentAction: GameAction;
+  currentStudyTarget: { type: 'skill' | 'spell'; id: string; progress: number; required: number } | null;
+  designProgress: { progress: number; required: number } | null;
+  designProgress2: { progress: number; required: number } | null;
+  preparationProgress: { progress: number; required: number } | null;
+  applicationProgress: { progress: number; required: number } | null;
+  equipmentCraftingProgress: { progress: number; required: number } | null;
+}
+
+// Map action IDs to labels and icons
+const ACTION_CONFIG: Record<string, { label: string; icon: typeof Sparkles; color: string }> = {
+  meditate: { label: 'Meditating', icon: Sparkles, color: 'text-blue-400' },
+  climb: { label: 'Climbing', icon: Swords, color: 'text-green-400' },
+  study: { label: 'Studying', icon: BookOpen, color: 'text-yellow-400' },
+  design: { label: 'Designing Enchantment', icon: Target, color: 'text-purple-400' },
+  prepare: { label: 'Preparing Equipment', icon: FlaskConical, color: 'text-purple-400' },
+  enchant: { label: 'Enchanting', icon: Sparkles, color: 'text-purple-400' },
+  craft: { label: 'Crafting Equipment', icon: Hammer, color: 'text-orange-400' },
+  convert: { label: 'Converting Mana', icon: Cog, color: 'text-cyan-400' },
+};
+
+function ProgressBar({ progress, required, label }: { progress: number; required: number; label?: string }) {
+  const percentage = Math.min(100, (progress / required) * 100);
+  return (
+    <div className="mt-1">
+      {label && <div className="text-xs text-gray-400 mb-0.5">{label}</div>}
+      <div className="w-full bg-gray-700 rounded-full h-1.5">
+        <div 
+          className="bg-blue-500 h-1.5 rounded-full transition-all duration-300" 
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function ActionButtons({
+  currentAction,
+  currentStudyTarget,
+  designProgress,
+  designProgress2,
+  preparationProgress,
+  applicationProgress,
+  equipmentCraftingProgress,
+}: ActionButtonsProps) {
+  const config = ACTION_CONFIG[currentAction] || { label: currentAction, icon: Sparkles, color: 'text-gray-400' };
+  const Icon = config.icon;
+
+  // Calculate additional info for specific actions
+  const getActionDetails = () => {
+    switch (currentAction) {
+      case 'study':
+        if (currentStudyTarget) {
+          const progress = currentStudyTarget.progress;
+          const required = currentStudyTarget.required;
+          const percentage = Math.min(100, (progress / required) * 100);
+          return (
+            <ProgressBar 
+              progress={progress} 
+              required={required} 
+              label={`${currentStudyTarget.type === 'skill' ? 'Skill' : 'Spell'}: ${percentage.toFixed(0)}%`}
+            />
+          );
+        }
+        break;
+      case 'design':
+        if (designProgress) {
+          return (
+            <ProgressBar 
+              progress={designProgress.progress} 
+              required={designProgress.required}
+              label="Design progress"
+            />
+          );
+        }
+        break;
+      case 'prepare':
+        if (preparationProgress) {
+          return (
+            <ProgressBar 
+              progress={preparationProgress.progress} 
+              required={preparationProgress.required}
+              label="Preparation progress"
+            />
+          );
+        }
+        break;
+      case 'enchant':
+        if (applicationProgress) {
+          return (
+            <ProgressBar 
+              progress={applicationProgress.progress} 
+              required={applicationProgress.required}
+              label="Enchantment progress"
+            />
+          );
+        }
+        break;
+      case 'craft':
+        if (equipmentCraftingProgress) {
+          return (
+            <ProgressBar 
+              progress={equipmentCraftingProgress.progress} 
+              required={equipmentCraftingProgress.required}
+              label="Crafting progress"
+            />
+          );
+        }
+        break;
+    }
+    return null;
+  };
+
+  return (
+    <div className="space-y-2">
+      <div className="bg-gray-800/50 rounded-lg p-3 border border-gray-700">
+        <div className="flex items-center gap-2">
+          <Icon className={`w-4 h-4 ${config.color}`} />
+          <span className="text-sm font-medium text-gray-200">Current Activity</span>
+        </div>
+        <div className={`text-lg font-semibold mt-1 ${config.color}`}>
+          {config.label}
+        </div>
+        {getActionDetails()}
+        
+        {/* Show second design slot if active */}
+        {designProgress2 && (
+          <div className="mt-2 pt-2 border-t border-gray-700">
+            <div className="flex items-center gap-2">
+              <Target className="w-3 h-3 text-purple-400" />
+              <span className="text-xs text-gray-400">Second Design Slot</span>
+            </div>
+            <ProgressBar 
+              progress={designProgress2.progress} 
+              required={designProgress2.required}
+              label="Design progress"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+ActionButtons.displayName = "ActionButtons";
+ProgressBar.displayName = "ProgressBar";

src/components/game/CalendarDisplay.tsx

@@ -48,3 +48,6 @@ export function CalendarDisplay({ day }: CalendarDisplayProps) {
     </div>
   );
 }
+
+CalendarDisplay.displayName = "CalendarDisplay";
+CalendarDisplay.displayName = "CalendarDisplay";

src/components/game/CraftingProgress.tsx

@@ -159,3 +159,5 @@ export function CraftingProgress({
     </div>
   ) : null;
 }
+
+CraftingProgress.displayName = "CraftingProgress";

src/components/game/GameContext.tsx

@@ -422,5 +422,7 @@ export function useGameContext() {
   return context;
 }
 
+GameProvider.displayName = "GameProvider";
+
 // Re-export useGameLoop for convenience
 export { useGameLoop };

src/components/game/LabTab.tsx

@@ -169,3 +169,5 @@ export function LabTab() {
     </div>
   );
 }
+
+LabTab.displayName = "LabTab";

src/components/game/LootInventory.tsx

@@ -459,3 +459,5 @@ export function LootInventoryDisplay({
     </>
   );
 }
+
+LootInventoryDisplay.displayName = "LootInventoryDisplay";

src/components/game/ManaDisplay.tsx

@@ -121,3 +121,5 @@ export function ManaDisplay({
     </Card>
   );
 }
+
+ManaDisplay.displayName = "ManaDisplay";

src/components/game/SpellsTab.tsx

@@ -164,3 +164,5 @@ export function SpellsTab() {
     </div>
   );
 }
+
+SpellsTab.displayName = "SpellsTab";

src/components/game/SpireTab.tsx

@@ -318,3 +318,5 @@ export function SpireTab() {
     </div>
   );
 }
+
+SpireTab.displayName = "SpireTab";

src/components/game/StatsTab.tsx

@@ -580,3 +580,5 @@ export function StatsTab() {
     </div>
   );
 }
+
+StatsTab.displayName = "StatsTab";

src/components/game/StudyProgress.tsx

@@ -55,3 +55,5 @@ export function StudyProgress({
     </div>
   );
 }
+
+StudyProgress.displayName = "StudyProgress";

src/components/game/TimeDisplay.tsx

@@ -49,3 +49,5 @@ export function TimeDisplay({
     </div>
   );
 }
+
+TimeDisplay.displayName = "TimeDisplay";

src/components/game/UpgradeDialog.tsx

@@ -113,3 +113,5 @@ export function UpgradeDialog({
     </Dialog>
   );
 }
+
+UpgradeDialog.displayName = "UpgradeDialog";

src/components/game/crafting/EnchantmentApplier.tsx

@@ -209,3 +209,5 @@ export function EnchantmentApplier({
     </div>
   );
 }
+
+EnchantmentApplier.displayName = "EnchantmentApplier";

src/components/game/crafting/EnchantmentPreparer.tsx

@@ -202,3 +202,5 @@ export function EnchantmentPreparer({
     </div>
   );
 }
+
+EnchantmentPreparer.displayName = "EnchantmentPreparer";

src/components/game/crafting/EquipmentCrafter.tsx

@@ -198,3 +198,5 @@ export function EquipmentCrafter({ store }: EquipmentCrafterProps) {
     </div>
   );
 }
+
+EquipmentCrafter.displayName = "EquipmentCrafter";

src/components/game/debug/AttunementDebug.tsx

@@ -85,3 +85,5 @@ export function AttunementDebug({ store }: AttunementDebugProps) {
     </Card>
   );
 }
+
+AttunementDebug.displayName = "AttunementDebug";

src/components/game/debug/ElementDebug.tsx

@@ -86,3 +86,5 @@ export function ElementDebug({ store }: ElementDebugProps) {
     </Card>
   );
 }
+
+ElementDebug.displayName = "ElementDebug";

src/components/game/debug/GameStateDebug.tsx

@@ -269,3 +269,5 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
     </div>
   );
 }
+
+GameStateDebug.displayName = "GameStateDebug";

src/components/game/debug/GolemDebug.tsx

@@ -25,3 +25,5 @@ export function GolemDebug({ store }: GolemDebugProps) {
     </Card>
   );
 }
+
+GolemDebug.displayName = "GolemDebug";

src/components/game/debug/PactDebug.tsx

@@ -207,3 +207,5 @@ export function PactDebug() {
     </Card>
   );
 }
+
+PactDebug.displayName = "PactDebug";

src/components/game/debug/SkillDebug.tsx

@@ -291,3 +291,5 @@ export function SkillDebug({ store }: SkillDebugProps) {
     </Card>
   );
 }
+
+SkillDebug.displayName = "SkillDebug";

src/components/game/shared/MemorySlotPicker.tsx

@@ -204,3 +204,5 @@ export function MemorySlotPicker({ onConfirm }: MemorySlotPickerProps) {
     </Card>
   );
 }
+
+MemorySlotPicker.displayName = "MemorySlotPicker";

src/components/game/shared/StudyProgress.tsx

@@ -58,3 +58,5 @@ export function StudyProgress({ target, showCancel = true, speedLabel }: StudyPr
     </div>
   );
 }
+
+StudyProgress.displayName = "StudyProgress";

src/components/game/shared/UpgradeDialog.tsx

@@ -124,3 +124,5 @@ export function UpgradeDialog({ skillId, milestone, onClose }: UpgradeDialogProp
     </Dialog>
   );
 }
+
+UpgradeDialog.displayName = "UpgradeDialog";

src/components/game/stats/CombatStatsSection.tsx

@@ -62,3 +62,5 @@ export function CombatStatsSection({ store }: CombatStatsSectionProps) {
     </Card>
   );
 }
+
+CombatStatsSection.displayName = "CombatStatsSection";

src/components/game/stats/ManaStatsSection.tsx

@@ -255,3 +255,5 @@ export function ManaStatsSection({
     </Card>
   );
 }
+
+ManaStatsSection.displayName = "ManaStatsSection";

src/components/game/stats/StudyStatsSection.tsx

@@ -53,3 +53,5 @@ export function StudyStatsSection({ store, studySpeedMult, studyCostMult }: Stud
     </Card>
   );
 }
+
+StudyStatsSection.displayName = "StudyStatsSection";

src/components/game/stats/UpgradeEffectsSection.tsx

@@ -80,3 +80,5 @@ export function UpgradeEffectsSection({ store }: UpgradeEffectsSectionProps) {
     </Card>
   );
 }
+
+UpgradeEffectsSection.displayName = "UpgradeEffectsSection";

src/components/game/tabs/AchievementsTab.tsx

@@ -41,3 +41,5 @@ export function AchievementsTab({ store }: AchievementsTabProps) {
     </div>
   );
 }
+
+AchievementsTab.displayName = "AchievementsTab";

src/components/game/tabs/AttunementsTab.tsx

@@ -265,3 +265,5 @@ export function AttunementsTab({ store }: AttunementsTabProps) {
     </div>
   );
 }
+
+AttunementsTab.displayName = "AttunementsTab";

src/components/game/tabs/CraftingTab.tsx

@@ -160,3 +160,5 @@ export function CraftingTab({ store }: CraftingTabProps) {
     </div>
   );
 }
+
+CraftingTab.displayName = "CraftingTab";

src/components/game/tabs/DebugTab.tsx

@@ -30,3 +30,5 @@ export function DebugTab({ store }: DebugTabProps) {
     </div>
   );
 }
+
+DebugTab.displayName = "DebugTab";

src/components/game/tabs/EquipmentTab.tsx

@@ -431,3 +431,5 @@ export function EquipmentTab({ store }: EquipmentTabProps) {
     </div>
   );
 }
+
+EquipmentTab.displayName = "EquipmentTab";

src/components/game/tabs/GolemancyTab.tsx

@@ -336,3 +336,5 @@ export function GolemancyTab({ store }: GolemancyTabProps) {
     </div>
   );
 }
+
+GolemancyTab.displayName = "GolemancyTab";

src/components/game/tabs/LabTab.tsx

@@ -114,3 +114,5 @@ export function LabTab({ store }: LabTabProps) {
     </div>
   );
 }
+
+LabTab.displayName = "LabTab";

src/components/game/tabs/LootTab.tsx

@@ -44,3 +44,5 @@ export function LootTab({ store }: LootTabProps) {
     </div>
   );
 }
+
+LootTab.displayName = "LootTab";

src/components/game/tabs/SkillsTab.tsx

@@ -367,3 +367,5 @@ export function SkillsTab({ store }: SkillsTabProps) {
     </div>
   );
 }
+
+SkillsTab.displayName = "SkillsTab";

src/components/game/tabs/SpellsTab.tsx

@@ -178,3 +178,5 @@ export function SpellsTab({ store }: SpellsTabProps) {
     </div>
   );
 }
+
+SpellsTab.displayName = "SpellsTab";

src/components/game/tabs/SpireTab.tsx

@@ -350,3 +350,5 @@ export function SpireTab({ store, simpleMode = false }: SpireTabProps) {
     </TooltipProvider>
   );
 }
+
+SpireTab.displayName = "SpireTab";

src/components/game/tabs/StatsTab.tsx

@@ -247,3 +247,5 @@ export function StatsTab({
     </div>
   );
 }
+
+StatsTab.displayName = "StatsTab";

src/components/game/tabs/StudyProgress.tsx

@@ -71,3 +71,5 @@ export function StudyProgress({
     </div>
   );
 }
+
+StudyProgress.displayName = "StudyProgress";

src/components/game/tabs/UpgradeDialog.tsx

@@ -113,3 +113,5 @@ export function UpgradeDialog({
     </Dialog>
   );
 }
+
+UpgradeDialog.displayName = "UpgradeDialog";