feat: remove Grimoire tab

src/app/components/GrimoireTab.tsx

@@ -1,72 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Badge } from '@/components/ui/badge';
-import { DebugName } from '@/components/game/debug/debug-context';
-import { SPELLS_DEF } from '@/lib/game/constants';
-import type { SpellDef } from '@/lib/game/types';
-
-export function GrimoireTab() {
-  const [grimoireSpells, setGrimoireSpells] = useState<[string, SpellDef][]>([]);
-
-  useEffect(() => {
-    if (typeof window !== 'undefined' && SPELLS_DEF) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setGrimoireSpells(
-        Object.entries(SPELLS_DEF).filter((entry): entry is [string, SpellDef] => !!entry[1].grimoire)
-      );
-    }
-  }, []);
-
-  if (grimoireSpells.length === 0) {
-    return (
-      <div className="p-4 text-center text-gray-400">
-        No grimoire spells available yet. Defeat guardians to unlock spells.
-      </div>
-    );
-  }
-
-  const availablePages = Math.ceil(grimoireSpells.length / 12);
-
-  return (
-    <DebugName name="GrimoireTab">
-      <div className="space-y-4">
-        <div className="text-sm text-gray-400">
-          <p className="mb-2">A vast tome of arcane knowledge. Study carefully — each spell costs insight to transcribe into your repertoire.</p>
-          <p>Available pages: {availablePages}. Spells in grimoire: {grimoireSpells.length}.</p>
-        </div>
-
-        <ScrollArea className="h-[600px] rounded border border-gray-700 p-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {grimoireSpells.map(([id, spell]) => (
-              <div
-                key={id}
-                className="p-4 bg-gray-800/50 rounded border border-gray-600 hover:border-gray-500 transition-colors"
-              >
-                <div className="flex items-start justify-between mb-2">
-                  <span className="font-bold text-gray-100">{spell.name}</span>
-                  <Badge variant="outline" className="border-gray-600">
-                    {spell.elem}
-                  </Badge>
-                </div>
-                {spell.desc && <p className="text-sm text-gray-400 mb-3">{spell.desc}</p>}
-                <div className="text-xs text-gray-500 space-y-1">
-                  <div>Cost: {spell.cost.amount} {
-                    spell.cost.type === 'element'
-                      ? spell.cost.element
-                      : 'raw mana'
-                  }</div>
-                  <div>Power: {spell.dmg}</div>
-                  {spell.effects && spell.effects.length > 0 && (
-                    <div>Effects: {spell.effects.map(e => e.type).join(', ')}</div>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        </ScrollArea>
-      </div>
-    </DebugName>
-  );
-}

src/app/page.tsx

@@ -30,7 +30,6 @@ import { ErrorBoundary } from '@/components/ErrorBoundary';
 
 import { GameOverScreen } from './components/GameOverScreen';
 import { LeftPanel } from './components/LeftPanel';
-import { GrimoireTab } from './components/GrimoireTab';
 
 // Lazy load tab components
 const DisciplinesTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.DisciplinesTab })));
@@ -118,7 +117,6 @@ function TabTriggers() {
       <TabsTrigger value="spells" className="text-xs px-2 py-1">🔮 Spells</TabsTrigger>
       <TabsTrigger value="stats" className="text-xs px-2 py-1">📊 Stats</TabsTrigger>
       <TabsTrigger value="disciplines" className="text-xs px-2 py-1">📚 Disciplines</TabsTrigger>
-      <TabsTrigger value="grimoire" className="text-xs px-2 py-1">📖 Grimoire</TabsTrigger>
       <TabsTrigger value="debug" className="text-xs px-2 py-1">🐛 Debug</TabsTrigger>
       <TabsTrigger value="attunements" className="text-xs px-2 py-1">⚗️ Attunements</TabsTrigger>
       <TabsTrigger value="achievements" className="text-xs px-2 py-1">🏆 Achievements</TabsTrigger>
@@ -216,7 +214,6 @@ export default function ManaLoopGame() {
                 <TabsContent value="spells"><LazyTab name="spells"><SpellsTab /></LazyTab></TabsContent>
                 <TabsContent value="stats"><LazyTab name="stats"><StatsTab /></LazyTab></TabsContent>
                 <TabsContent value="disciplines"><LazyTab name="disciplines"><DisciplinesTab /></LazyTab></TabsContent>
-                <TabsContent value="grimoire"><GrimoireTab /></TabsContent>
                 <TabsContent value="debug"><LazyTab name="debug"><DebugTab /></LazyTab></TabsContent>
                 <TabsContent value="attunements"><LazyTab name="attunements"><AttunementsTab /></LazyTab></TabsContent>
                 <TabsContent value="achievements"><LazyTab name="achievements"><AchievementsTab /></LazyTab></TabsContent>