From 33d53efba8d5b4fcb885f6d82699aae0fe3b15cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= <alejandrogomez@bitrefill.com>
Date: Sat, 20 Dec 2025 21:18:52 +0100
Subject: [PATCH] style: consolidate layout tracking UI into SpellbookDropdown

---
 src/components/Home.tsx              | 17 +----------------
 src/components/SpellbookDropdown.tsx | 11 +++++++++--
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 7ee71db..cd8269f 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -26,14 +26,12 @@ import { Button } from "./ui/button";
 const PREVIEW_BACKUP_KEY = "grimoire-preview-backup";
 
 export default function Home() {
-  const { state, updateLayout, removeWindow, loadSpellbook, clearActiveSpellbook } = useGrimoire();
+  const { state, updateLayout, removeWindow, loadSpellbook } = useGrimoire();
   const [commandLauncherOpen, setCommandLauncherOpen] = useState(false);
   const { actor, identifier } = useParams();
   const navigate = useNavigate();
   const location = useLocation();
 
-  const activeSpellbook = state.activeSpellbook;
-
   // Preview state
   const [resolvedPubkey, setResolvedPubkey] = useState<string | null>(null);
   const isPreviewPath = location.pathname.startsWith("/preview/");
@@ -247,19 +245,6 @@ export default function Home() {
           
           <div className="flex items-center gap-2">
             <SpellbookDropdown />
-            {activeSpellbook && !isPreviewPath && (
-              <div className="flex items-center gap-1 px-2 py-0.5 rounded-md bg-muted/50 border border-border animate-in fade-in zoom-in duration-300">
-                <span className="text-[10px] font-bold text-muted-foreground uppercase tracking-tight">Active:</span>
-                <span className="text-xs font-medium truncate max-w-[150px]">{activeSpellbook.title}</span>
-                <button 
-                  onClick={clearActiveSpellbook}
-                  className="ml-1 p-0.5 hover:bg-background rounded-full text-muted-foreground hover:text-foreground transition-colors"
-                  title="Clear active spellbook context"
-                >
-                  <X className="size-3" />
-                </button>
-              </div>
-            )}
           </div>
 
           <UserMenu />
diff --git a/src/components/SpellbookDropdown.tsx b/src/components/SpellbookDropdown.tsx
index 20f15c4..bb7eb2a 100644
--- a/src/components/SpellbookDropdown.tsx
+++ b/src/components/SpellbookDropdown.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import { BookHeart, ChevronDown, Plus, Save, WandSparkles } from "lucide-react";
+import { BookHeart, ChevronDown, Plus, Save, WandSparkles, X } from "lucide-react";
 import { useLiveQuery } from "dexie-react-hooks";
 import db from "@/services/db";
 import { useGrimoire } from "@/core/state";
@@ -30,7 +30,7 @@ import { saveSpellbook } from "@/services/spellbook-storage";
 import { SaveSpellbookDialog } from "./SaveSpellbookDialog";
 
 export function SpellbookDropdown() {
-  const { state, loadSpellbook, addWindow } = useGrimoire();
+  const { state, loadSpellbook, addWindow, clearActiveSpellbook } = useGrimoire();
   const activeAccount = state.activeAccount;
   const activeSpellbook = state.activeSpellbook;
   const [saveDialogOpen, setSaveDialogOpen] = useState(false);
@@ -244,6 +244,13 @@ export function SpellbookDropdown() {
                   <span className="text-[10px] text-muted-foreground">Save current state to this spellbook</span>
                 </div>
               </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={clearActiveSpellbook}
+                className={cn(itemClass, "text-xs opacity-70")}
+              >
+                <X className="size-3.5 mr-2 text-muted-foreground" />
+                Stop Tracking Layout
+              </DropdownMenuItem>
               <DropdownMenuSeparator />
             </>
           )}