feat: TASK-006 left panel redesign — 5-section layout with attunement status and activity log, remove CalendarDisplay

src/app/components/LeftPanel.tsx

@@ -3,9 +3,11 @@
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Mountain } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
 import { ManaDisplay } from '@/components/game';
 import { ActionButtons } from '@/components/game';
-import { CalendarDisplay } from '@/components/game';
+import { AttunementStatus } from '@/components/game/AttunementStatus';
+import { ActivityLogPanel } from '@/components/game/ActivityLogPanel';
 import { DebugName } from '@/lib/game/debug-context';
 import { useGameStore, useManaStore, useSkillStore, useCombatStore, useCraftingStore, usePrestigeStore } from '@/lib/game/stores';
 import { getUnifiedEffects } from '@/lib/game/effects';
@@ -15,52 +17,34 @@ import { computeTotalMaxMana, computeTotalRegen, computeTotalClickMana } from '@
 export function LeftPanel() {
   const [isGathering, setIsGathering] = useState(false);
 
-  // Get state from modular stores
   const rawMana = useManaStore((s) => s.rawMana);
   const elements = useManaStore((s) => s.elements);
   const meditateTicks = useManaStore((s) => s.meditateTicks);
-
   const skills = useSkillStore((s) => s.skills);
   const skillTiers = useSkillStore((s) => s.skillTiers);
   const skillUpgrades = useSkillStore((s) => s.skillUpgrades);
-
   const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
-
   const equippedInstances = useCraftingStore((s) => s.equippedInstances);
   const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
-
   const gatherMana = useGameStore((s) => s.gatherMana);
-  const day = useGameStore((s) => s.day);
-  const hour = useGameStore((s) => s.hour);
-
   const spireMode = useCombatStore((s) => s.spireMode);
   const enterSpireMode = useCombatStore((s) => s.enterSpireMode);
   const currentAction = useCombatStore((s) => s.currentAction);
-
   const currentStudyTarget = useSkillStore((s) => s.currentStudyTarget);
-
   const designProgress = useCraftingStore((s) => s.designProgress);
   const designProgress2 = useCraftingStore((s) => s.designProgress2);
   const preparationProgress = useCraftingStore((s) => s.preparationProgress);
   const applicationProgress = useCraftingStore((s) => s.applicationProgress);
   const equipmentCraftingProgress = useCraftingStore((s) => s.equipmentCraftingProgress);
 
-  const handleGatherStart = () => {
-    setIsGathering(true);
-    gatherMana();
-  };
-
-  const handleGatherEnd = () => {
-    setIsGathering(false);
-  };
+  const handleGatherStart = () => { setIsGathering(true); gatherMana(); };
+  const handleGatherEnd = () => { setIsGathering(false); };
 
   useEffect(() => {
     if (!isGathering) return;
-
     let lastGatherTime = 0;
     const minGatherInterval = 100;
     let animationFrameId: number;
-
     const gatherLoop = (timestamp: number) => {
       if (timestamp - lastGatherTime >= minGatherInterval) {
         gatherMana();
@@ -68,36 +52,21 @@ export function LeftPanel() {
       }
       animationFrameId = requestAnimationFrame(gatherLoop);
     };
-
     animationFrameId = requestAnimationFrame(gatherLoop);
     return () => cancelAnimationFrame(animationFrameId);
   }, [isGathering, gatherMana]);
 
-  const upgradeEffects = getUnifiedEffects({
-    skillUpgrades,
-    skillTiers,
-    equippedInstances,
-    equipmentInstances,
-  });
-
-  const maxMana = computeTotalMaxMana(
-    { skills, prestigeUpgrades, skillUpgrades, skillTiers, equippedInstances, equipmentInstances },
-    upgradeEffects
-  );
-  const baseRegen = computeTotalRegen(
-    { skills, prestigeUpgrades, skillUpgrades, skillTiers, equippedInstances, equipmentInstances },
-    upgradeEffects
-  );
-  const clickMana = computeTotalClickMana(
-    { skills, skillUpgrades, skillTiers, equippedInstances, equipmentInstances },
-    upgradeEffects
-  );
+  const upgradeEffects = getUnifiedEffects({ skillUpgrades, skillTiers, equippedInstances, equipmentInstances });
+  const maxMana = computeTotalMaxMana({ skills, prestigeUpgrades, skillUpgrades, skillTiers, equippedInstances, equipmentInstances }, upgradeEffects);
+  const baseRegen = computeTotalRegen({ skills, prestigeUpgrades, skillUpgrades, skillTiers, equippedInstances, equipmentInstances }, upgradeEffects);
+  const clickMana = computeTotalClickMana({ skills, skillUpgrades, skillTiers, equippedInstances, equipmentInstances }, upgradeEffects);
   const meditationMultiplier = getMeditationBonus(meditateTicks, skills, upgradeEffects.meditationEfficiency);
-  const incursionStrength = getIncursionStrength(day, hour);
+  const incursionStrength = getIncursionStrength(useGameStore((s) => s.day), useGameStore((s) => s.hour));
   const effectiveRegen = baseRegen * (1 - incursionStrength) * meditationMultiplier;
 
   return (
-    <div className="md:w-80 space-y-4 flex-shrink-0">
+    <div className="md:w-80 space-y-3 flex-shrink-0 p-1">
+      {/* 1. Mana Display */}
       <DebugName name="ManaDisplay">
         <ManaDisplay
           rawMana={rawMana}
@@ -112,40 +81,50 @@ export function LeftPanel() {
         />
       </DebugName>
 
+      {/* 2. Spire Entry */}
       {!spireMode && (
         <DebugName name="ClimbSpireButton">
-          <Button
-            className="w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700"
-            size="lg"
-            onClick={enterSpireMode}
-          >
+          <Button className="w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700 text-white" size="lg" onClick={enterSpireMode}>
             <Mountain className="w-5 h-5 mr-2" />
             Climb the Spire
           </Button>
         </DebugName>
       )}
 
+      {/* 3. Current Action */}
       {!spireMode && (
         <DebugName name="ActionButtons">
-          <ActionButtons
-            currentAction={currentAction}
-            currentStudyTarget={currentStudyTarget as any}
-            designProgress={designProgress}
-            designProgress2={designProgress2}
-            preparationProgress={preparationProgress}
-            applicationProgress={applicationProgress}
-            equipmentCraftingProgress={equipmentCraftingProgress}
-          />
+          <Card className="bg-[var(--bg-surface)] border-[var(--border-subtle)]">
+            <CardContent className="pt-3">
+              <ActionButtons
+                currentAction={currentAction}
+                currentStudyTarget={currentStudyTarget as any}
+                designProgress={designProgress}
+                designProgress2={designProgress2}
+                preparationProgress={preparationProgress}
+                applicationProgress={applicationProgress}
+                equipmentCraftingProgress={equipmentCraftingProgress}
+              />
+            </CardContent>
+          </Card>
         </DebugName>
       )}
 
-      <DebugName name="CalendarDisplay">
-        <CalendarDisplay
-          day={day}
-          hour={hour}
-          incursionStrength={0} // Now calculated in page.tsx and passed
-        />
+      {/* 4. Attunement Status */}
+      {!spireMode && (
+        <DebugName name="AttunementStatus">
+          <Card className="bg-[var(--bg-surface)] border-[var(--border-subtle)]">
+            <CardContent className="pt-3">
+              <AttunementStatus />
+            </CardContent>
+          </Card>
+        </DebugName>
+      )}
+
+      {/* 5. Activity Log */}
+      <DebugName name="ActivityLogPanel">
+        <ActivityLogPanel />
       </DebugName>
     </div>
   );
-}
+}