From b14dce2d550e161b67458c70a71d19bc12944cdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= <alejandrogomez@bitrefill.com>
Date: Wed, 25 Mar 2026 11:23:35 +0100
Subject: [PATCH] fix: center spellbook dropdown

---
 src/components/FavoriteSpellsDropdown.tsx | 13 ++++++------
 src/components/layouts/AppShell.tsx       | 26 +++++++++++------------
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/components/FavoriteSpellsDropdown.tsx b/src/components/FavoriteSpellsDropdown.tsx
index e8b05bd..4cd1eb1 100644
--- a/src/components/FavoriteSpellsDropdown.tsx
+++ b/src/components/FavoriteSpellsDropdown.tsx
@@ -1,4 +1,4 @@
-import { WandSparkles, Play, Star } from "lucide-react";
+import { WandSparkles, Star } from "lucide-react";
 import { useAccount } from "@/hooks/useAccount";
 import { useFavoriteSpells } from "@/hooks/useFavoriteSpells";
 import { useNostrEvent } from "@/hooks/useNostrEvent";
@@ -62,14 +62,15 @@ function FavoriteSpellItem({ pointer }: { pointer: EventPointer }) {
       onClick={handleCast}
       className="cursor-pointer py-2 hover:bg-muted focus:bg-muted transition-colors"
     >
-      <Play className="size-3.5 mr-2 text-muted-foreground" />
       <div className="flex flex-col min-w-0 flex-1">
         <span className="text-sm truncate">
-          {decoded.name || "Unnamed Spell"}
-        </span>
-        <span className="text-[10px] font-mono text-muted-foreground truncate">
-          {decoded.command}
+          {decoded.name || decoded.command}
         </span>
+        {decoded.name && (
+          <span className="text-[10px] font-mono text-muted-foreground truncate">
+            {decoded.command}
+          </span>
+        )}
       </div>
     </DropdownMenuItem>
   );
diff --git a/src/components/layouts/AppShell.tsx b/src/components/layouts/AppShell.tsx
index 3e747ac..ecb4c87 100644
--- a/src/components/layouts/AppShell.tsx
+++ b/src/components/layouts/AppShell.tsx
@@ -61,21 +61,21 @@ export function AppShell({ children, hideBottomBar = false }: AppShellProps) {
       />
       <GlobalAuthPrompt />
       <main className="h-dvh w-screen flex flex-col bg-background text-foreground">
-        <header className="flex flex-row items-center justify-between px-1 border-b border-border">
-          <button
-            onClick={() => setCommandLauncherOpen(true)}
-            className="p-1.5 text-muted-foreground hover:text-accent transition-colors cursor-crosshair flex items-center gap-2"
-            title="Launch command (Cmd+K)"
-            aria-label="Launch command palette"
-          >
-            <Terminal className="size-4" />
-          </button>
-
-          <div className="flex items-center gap-2">
-            <SpellbookDropdown />
+        <header className="flex flex-row items-center px-1 border-b border-border">
+          <div className="flex-1 flex items-center">
+            <button
+              onClick={() => setCommandLauncherOpen(true)}
+              className="p-1.5 text-muted-foreground hover:text-accent transition-colors cursor-crosshair flex items-center gap-2"
+              title="Launch command (Cmd+K)"
+              aria-label="Launch command palette"
+            >
+              <Terminal className="size-4" />
+            </button>
           </div>
 
-          <div className="flex items-center">
+          <SpellbookDropdown />
+
+          <div className="flex-1 flex items-center justify-end">
             <FavoriteSpellsDropdown />
             <UserMenu />
           </div>