From abc0b719155a56f9eee95c6512e9a6bac795620f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 17 Jan 2026 20:10:41 +0000
Subject: [PATCH] feat: add useAccount hook for signing capability detection

Created a centralized hook to check account signing capabilities and
refactored components to distinguish between signing and read-only operations.

New hook (src/hooks/useAccount.ts):
- Returns account, pubkey, canSign, signer, isLoggedIn
- Detects ReadonlyAccount vs signing accounts
- Provides clear API for checking signing capability

Refactored components:
- ChatViewer: Use canSign for message composer, replying, actions
  - Show "Sign in to send messages" for read-only accounts
  - Disable message input for accounts without signing
- SpellDialog: Use canSign for publishing spells
  - Show clear warning for read-only accounts
  - Updated error messages to mention read-only limitation
- useEmojiSearch: Use pubkey for loading custom emoji lists
  - Works correctly with both signing and read-only accounts

Benefits:
- Clear separation between read (pubkey) and write (canSign, signer) operations
- Read-only accounts can browse, view profiles, load data
- Signing operations properly disabled for read-only accounts
- Consistent pattern across the codebase for account checks
- Better UX with specific messages about account capabilities
---
 src/components/ChatViewer.tsx        | 31 ++++++-------
 src/components/nostr/SpellDialog.tsx | 22 +++++----
 src/hooks/useAccount.ts              | 69 ++++++++++++++++++++++++++++
 src/hooks/useEmojiSearch.ts          | 11 ++---
 4 files changed, 100 insertions(+), 33 deletions(-)
 create mode 100644 src/hooks/useAccount.ts

diff --git a/src/components/ChatViewer.tsx b/src/components/ChatViewer.tsx
index b164539..f76f83c 100644
--- a/src/components/ChatViewer.tsx
+++ b/src/components/ChatViewer.tsx
@@ -15,7 +15,6 @@ import {
 import { nip19 } from "nostr-tools";
 import { getZapRequest } from "applesauce-common/helpers/zap";
 import { toast } from "sonner";
-import accountManager from "@/services/accounts";
 import eventStore from "@/services/event-store";
 import type {
   ChatProtocol,
@@ -51,6 +50,7 @@ import {
 import { useProfileSearch } from "@/hooks/useProfileSearch";
 import { useEmojiSearch } from "@/hooks/useEmojiSearch";
 import { useCopy } from "@/hooks/useCopy";
+import { useAccount } from "@/hooks/useAccount";
 import { Label } from "./ui/label";
 import {
   Tooltip,
@@ -437,9 +437,8 @@ export function ChatViewer({
 }: ChatViewerProps) {
   const { addWindow } = useGrimoire();
 
-  // Get active account
-  const activeAccount = use$(accountManager.active$);
-  const hasActiveAccount = !!activeAccount;
+  // Get active account with signing capability
+  const { pubkey, canSign, signer } = useAccount();
 
   // Profile search for mentions
   const { searchProfiles } = useProfileSearch();
@@ -513,14 +512,14 @@ export function ChatViewer({
     async (query: string) => {
       const availableActions = adapter.getActions({
         conversation: conversation || undefined,
-        activePubkey: activeAccount?.pubkey,
+        activePubkey: pubkey,
       });
       const lowerQuery = query.toLowerCase();
       return availableActions.filter((action) =>
         action.name.toLowerCase().includes(lowerQuery),
       );
     },
-    [adapter, conversation, activeAccount],
+    [adapter, conversation, pubkey],
   );
 
   // Cleanup subscriptions when conversation changes or component unmounts
@@ -596,7 +595,7 @@ export function ChatViewer({
     emojiTags?: EmojiTag[],
     blobAttachments?: BlobAttachment[],
   ) => {
-    if (!conversation || !hasActiveAccount || isSending) return;
+    if (!conversation || !canSign || isSending) return;
 
     // Check if this is a slash command
     const slashCmd = parseSlashCommand(content);
@@ -605,8 +604,8 @@ export function ChatViewer({
       setIsSending(true);
       try {
         const result = await adapter.executeAction(slashCmd.command, {
-          activePubkey: activeAccount.pubkey,
-          activeSigner: activeAccount.signer,
+          activePubkey: pubkey!,
+          activeSigner: signer!,
           conversation,
         });
 
@@ -649,13 +648,13 @@ export function ChatViewer({
   // Handle command execution from autocomplete
   const handleCommandExecute = useCallback(
     async (action: ChatAction) => {
-      if (!conversation || !hasActiveAccount || isSending) return;
+      if (!conversation || !canSign || isSending) return;
 
       setIsSending(true);
       try {
         const result = await adapter.executeAction(action.name, {
-          activePubkey: activeAccount.pubkey,
-          activeSigner: activeAccount.signer,
+          activePubkey: pubkey!,
+          activeSigner: signer!,
           conversation,
         });
 
@@ -673,7 +672,7 @@ export function ChatViewer({
         setIsSending(false);
       }
     },
-    [conversation, hasActiveAccount, isSending, adapter, activeAccount],
+    [conversation, canSign, isSending, adapter, pubkey, signer],
   );
 
   // Handle reply button click
@@ -987,7 +986,7 @@ export function ChatViewer({
                   adapter={adapter}
                   conversation={conversation}
                   onReply={handleReply}
-                  canReply={hasActiveAccount}
+                  canReply={canSign}
                   onScrollToMessage={handleScrollToMessage}
                 />
               );
@@ -1001,8 +1000,8 @@ export function ChatViewer({
         )}
       </div>
 
-      {/* Message composer - only show if user has active account */}
-      {hasActiveAccount ? (
+      {/* Message composer - only show if user can sign */}
+      {canSign ? (
         <div className="border-t px-2 py-1 pb-0">
           {replyTo && (
             <ComposerReplyPreview
diff --git a/src/components/nostr/SpellDialog.tsx b/src/components/nostr/SpellDialog.tsx
index 9a365d4..4c7207d 100644
--- a/src/components/nostr/SpellDialog.tsx
+++ b/src/components/nostr/SpellDialog.tsx
@@ -11,8 +11,6 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
 import { toast } from "sonner";
-import { use$ } from "applesauce-react/hooks";
-import accounts from "@/services/accounts";
 import { parseReqCommand } from "@/lib/req-parser";
 import { reconstructCommand, detectCommandType } from "@/lib/spell-conversion";
 import type { ParsedSpell, SpellEvent } from "@/types/spell";
@@ -20,6 +18,7 @@ import { Loader2 } from "lucide-react";
 import { saveSpell } from "@/services/spell-storage";
 import { LocalSpell } from "@/services/db";
 import { PublishSpellAction } from "@/actions/publish-spell";
+import { useAccount } from "@/hooks/useAccount";
 
 /**
  * Filter command to show only spell-relevant parts
@@ -79,7 +78,7 @@ export function SpellDialog({
   existingSpell,
   onSuccess,
 }: SpellDialogProps) {
-  const activeAccount = use$(accounts.active$);
+  const { canSign } = useAccount();
 
   // Form state
   const [alias, setAlias] = useState("");
@@ -186,9 +185,11 @@ export function SpellDialog({
   const handlePublish = async () => {
     if (!isFormValid) return;
 
-    // Check for active account
-    if (!activeAccount) {
-      setErrorMessage("No active account. Please sign in first.");
+    // Check for signing capability
+    if (!canSign) {
+      setErrorMessage(
+        "You need a signing account to publish. Read-only accounts cannot publish.",
+      );
       setPublishingState("error");
       return;
     }
@@ -363,10 +364,11 @@ export function SpellDialog({
             </div>
           )}
 
-          {/* No account warning */}
-          {!activeAccount && (
+          {/* No signing capability warning */}
+          {!canSign && (
             <div className="rounded-md border border-yellow-500 bg-yellow-50 dark:bg-yellow-950/20 px-3 py-2 text-sm text-yellow-600 dark:text-yellow-400">
-              You need to sign in to publish spells.
+              You need a signing account to publish spells. Read-only accounts
+              cannot publish.
             </div>
           )}
         </div>
@@ -384,7 +386,7 @@ export function SpellDialog({
           </Button>
           <Button
             onClick={handlePublish}
-            disabled={!isFormValid || !activeAccount || isBusy}
+            disabled={!isFormValid || !canSign || isBusy}
           >
             {(publishingState === "signing" ||
               publishingState === "publishing") && (
diff --git a/src/hooks/useAccount.ts b/src/hooks/useAccount.ts
new file mode 100644
index 0000000..bd30c51
--- /dev/null
+++ b/src/hooks/useAccount.ts
@@ -0,0 +1,69 @@
+import { useMemo } from "react";
+import { use$ } from "applesauce-react/hooks";
+import accounts from "@/services/accounts";
+
+/**
+ * Hook to access the active account with signing capability detection
+ *
+ * @returns {object} Account state
+ * @property {IAccount | undefined} account - The full active account object
+ * @property {string | undefined} pubkey - The account's public key (available for all account types)
+ * @property {boolean} canSign - Whether the account can sign events (false for read-only accounts)
+ * @property {ISigner | undefined} signer - The signer instance (undefined for read-only accounts)
+ * @property {boolean} isLoggedIn - Whether any account is active (including read-only)
+ *
+ * @example
+ * // For read-only operations (viewing profiles, loading data)
+ * const { pubkey, isLoggedIn } = useAccount();
+ * if (pubkey) {
+ *   // Load user's relay list, emoji list, etc.
+ * }
+ *
+ * @example
+ * // For signing operations (posting, publishing, uploading)
+ * const { canSign, signer, pubkey } = useAccount();
+ * if (canSign) {
+ *   // Can publish events
+ *   await adapter.sendMessage({ activePubkey: pubkey, activeSigner: signer, ... });
+ * } else {
+ *   // Show "log in to post" message
+ * }
+ */
+export function useAccount() {
+  const account = use$(accounts.active$);
+
+  return useMemo(() => {
+    if (!account) {
+      return {
+        account: undefined,
+        pubkey: undefined,
+        canSign: false,
+        signer: undefined,
+        isLoggedIn: false,
+      };
+    }
+
+    // Check if the account has a functional signer
+    // Read-only accounts have a signer that throws errors on sign operations
+    // We detect this by checking for the ReadonlySigner type or checking signer methods
+    const signer = account.signer;
+    let canSign = false;
+
+    if (signer) {
+      // ReadonlyAccount from applesauce-accounts has a ReadonlySigner
+      // that throws on signEvent, nip04, nip44 operations
+      // We can detect it by checking if it's an instance with the expected methods
+      // but we'll use a safer approach: check the account type name
+      const accountType = account.constructor.name;
+      canSign = accountType !== "ReadonlyAccount";
+    }
+
+    return {
+      account,
+      pubkey: account.pubkey,
+      canSign,
+      signer: canSign ? signer : undefined,
+      isLoggedIn: true,
+    };
+  }, [account]);
+}
diff --git a/src/hooks/useEmojiSearch.ts b/src/hooks/useEmojiSearch.ts
index 86ad12a..5481671 100644
--- a/src/hooks/useEmojiSearch.ts
+++ b/src/hooks/useEmojiSearch.ts
@@ -1,13 +1,12 @@
 import { useEffect, useMemo, useRef } from "react";
-import { use$ } from "applesauce-react/hooks";
 import {
   EmojiSearchService,
   type EmojiSearchResult,
 } from "@/services/emoji-search";
 import { UNICODE_EMOJIS } from "@/lib/unicode-emojis";
 import eventStore from "@/services/event-store";
-import accounts from "@/services/accounts";
 import type { NostrEvent } from "@/types/nostr";
+import { useAccount } from "./useAccount";
 
 /**
  * Hook to provide emoji search functionality with automatic indexing
@@ -15,7 +14,7 @@ import type { NostrEvent } from "@/types/nostr";
  */
 export function useEmojiSearch(contextEvent?: NostrEvent) {
   const serviceRef = useRef<EmojiSearchService | null>(null);
-  const activeAccount = use$(accounts.active$);
+  const { pubkey } = useAccount();
 
   // Create service instance (singleton per component mount)
   if (!serviceRef.current) {
@@ -35,12 +34,10 @@ export function useEmojiSearch(contextEvent?: NostrEvent) {
 
   // Subscribe to user's emoji list (kind 10030) and emoji sets (kind 30030)
   useEffect(() => {
-    if (!activeAccount?.pubkey) {
+    if (!pubkey) {
       return;
     }
 
-    const pubkey = activeAccount.pubkey;
-
     // Subscribe to user's emoji list (kind 10030 - replaceable)
     const userEmojiList$ = eventStore.replaceable(10030, pubkey);
     const userEmojiSub = userEmojiList$.subscribe({
@@ -99,7 +96,7 @@ export function useEmojiSearch(contextEvent?: NostrEvent) {
       // Clear custom emojis but keep unicode
       service.clearCustom();
     };
-  }, [activeAccount?.pubkey, service]);
+  }, [pubkey, service]);
 
   // Memoize search function
   const searchEmojis = useMemo(