From 76dc812655db3e8023acc89943581000cecb193b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 12 Jan 2026 15:52:22 +0000
Subject: [PATCH] fix: add explicit type annotations to compose dialog
 components

Fix TypeScript strict type checking errors:

## ComposeDialog
- Add EventFactory type import
- Add explicit type for factory parameter in hub.run callback
- Add explicit types for event handler parameters
- Add explicit types for map callback parameters
- Fix onRemove callback to have explicit void return

## PowerTools
- Remove unused imports (Image, Zap, Sparkles)
- Add explicit types for Input onChange/onKeyDown handlers
- Add explicit type for ProfileSearchResult in map callback

## RelaySelector
- Remove unused imports (Badge, Check)
- Add explicit types for Input onChange/onKeyDown handlers
- Add explicit types for relay filter/map callbacks

All type errors addressed while maintaining functionality.
---
 src/components/ComposeDialog.tsx | 22 ++++++++++++++--------
 src/components/PowerTools.tsx    | 14 +++++++++-----
 src/components/RelaySelector.tsx | 19 ++++++++++---------
 3 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/components/ComposeDialog.tsx b/src/components/ComposeDialog.tsx
index 97f1495..507a290 100644
--- a/src/components/ComposeDialog.tsx
+++ b/src/components/ComposeDialog.tsx
@@ -28,6 +28,7 @@ import { getDisplayName } from "@/lib/nostr-utils";
 import { useProfile } from "applesauce-react/hooks";
 import { RelaySelector } from "@/components/RelaySelector";
 import { PowerTools } from "@/components/PowerTools";
+import type { EventFactory } from "applesauce-core/event-factory";
 
 export interface ComposeDialogProps {
   /** Whether dialog is open */
@@ -140,11 +141,13 @@ export function ComposeDialog({
         }
 
         // Create and sign event
-        const event = await hub.run(async ({ factory }) => {
-          const unsigned = factory.event(kind, messageContent, tags);
-          const signed = await factory.sign(unsigned);
-          return signed;
-        });
+        const event = await hub.run(
+          async ({ factory }: { factory: EventFactory }) => {
+            const unsigned = factory.event(kind, messageContent, tags);
+            const signed = await factory.sign(unsigned);
+            return signed;
+          },
+        );
 
         // Publish to selected relays
         await publishEventToRelays(event, selectedRelays);
@@ -214,7 +217,7 @@ export function ComposeDialog({
         <div className="flex-1 overflow-hidden flex flex-col">
           <Tabs
             value={showPreview ? "preview" : "edit"}
-            onValueChange={(v) => setShowPreview(v === "preview")}
+            onValueChange={(v: string) => setShowPreview(v === "preview")}
             className="flex-1 flex flex-col"
           >
             {/* Tab Navigation */}
@@ -268,11 +271,13 @@ export function ComposeDialog({
                       Additional Mentions
                     </div>
                     <div className="flex flex-wrap gap-2">
-                      {additionalMentions.map((pubkey) => (
+                      {additionalMentions.map((pubkey: string) => (
                         <MentionBadge
                           key={pubkey}
                           pubkey={pubkey}
-                          onRemove={() => handleRemoveMention(pubkey)}
+                          onRemove={() => {
+                            handleRemoveMention(pubkey);
+                          }}
                         />
                       ))}
                     </div>
@@ -389,6 +394,7 @@ function MentionBadge({
     <Badge
       variant="secondary"
       className="pl-2 pr-1 py-1 flex items-center gap-2"
+      asChild={false}
     >
       <AtSign className="w-3 h-3" />
       <span>{displayName}</span>
diff --git a/src/components/PowerTools.tsx b/src/components/PowerTools.tsx
index 86c4f17..cc47265 100644
--- a/src/components/PowerTools.tsx
+++ b/src/components/PowerTools.tsx
@@ -6,7 +6,7 @@ import {
 } from "@/components/ui/popover";
 import { Input } from "@/components/ui/input";
 import { useState, useCallback } from "react";
-import { Hash, AtSign, Code, Link, Image, Zap, Sparkles } from "lucide-react";
+import { Hash, AtSign, Code, Link } from "lucide-react";
 import { useProfileSearch } from "@/hooks/useProfileSearch";
 import type { ProfileSearchResult } from "@/services/profile-search";
 import { nip19 } from "nostr-tools";
@@ -94,8 +94,10 @@ export function PowerTools({ onInsert, onAddMention }: PowerToolsProps) {
               <Input
                 placeholder="Enter tag..."
                 value={hashtagInput}
-                onChange={(e) => setHashtagInput(e.target.value)}
-                onKeyDown={(e) => {
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setHashtagInput(e.target.value)
+                }
+                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                   if (e.key === "Enter") {
                     handleHashtagInsert();
                   }
@@ -128,14 +130,16 @@ export function PowerTools({ onInsert, onAddMention }: PowerToolsProps) {
             <Input
               placeholder="Search profiles..."
               value={mentionQuery}
-              onChange={(e) => handleMentionSearch(e.target.value)}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                handleMentionSearch(e.target.value)
+              }
               className="text-sm"
             />
 
             {/* Results */}
             {mentionResults.length > 0 && (
               <div className="space-y-1 max-h-[200px] overflow-y-auto">
-                {mentionResults.map((result) => (
+                {mentionResults.map((result: ProfileSearchResult) => (
                   <button
                     key={result.pubkey}
                     className="w-full text-left p-2 rounded hover:bg-muted transition-colors"
diff --git a/src/components/RelaySelector.tsx b/src/components/RelaySelector.tsx
index 22b9a0c..c70604f 100644
--- a/src/components/RelaySelector.tsx
+++ b/src/components/RelaySelector.tsx
@@ -1,14 +1,13 @@
 import { useState, useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { Check, X, Plus, Wifi, WifiOff, Settings2 } from "lucide-react";
+import { X, Plus, Wifi, WifiOff, Settings2 } from "lucide-react";
 import { normalizeURL } from "applesauce-core/helpers";
 import pool from "@/services/relay-pool";
 import { use$ } from "applesauce-react/hooks";
@@ -132,7 +131,7 @@ export function RelaySelector({
                 SELECTED ({selectedRelays.length})
               </div>
               <div className="space-y-2">
-                {selectedRelays.map((relay) => (
+                {selectedRelays.map((relay: string) => (
                   <RelayItem
                     key={relay}
                     relay={relay}
@@ -152,8 +151,8 @@ export function RelaySelector({
                 AVAILABLE
               </div>
               {knownRelays
-                .filter((relay) => !selectedRelays.includes(relay))
-                .map((relay) => (
+                .filter((relay: string) => !selectedRelays.includes(relay))
+                .map((relay: string) => (
                   <RelayItem
                     key={relay}
                     relay={relay}
@@ -163,8 +162,8 @@ export function RelaySelector({
                   />
                 ))}
 
-              {knownRelays.filter((r) => !selectedRelays.includes(r)).length ===
-                0 && (
+              {knownRelays.filter((r: string) => !selectedRelays.includes(r))
+                .length === 0 && (
                 <div className="text-sm text-muted-foreground italic py-4 text-center">
                   No other relays available
                 </div>
@@ -178,8 +177,10 @@ export function RelaySelector({
               <Input
                 placeholder="wss://relay.example.com"
                 value={newRelayUrl}
-                onChange={(e) => setNewRelayUrl(e.target.value)}
-                onKeyDown={(e) => {
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setNewRelayUrl(e.target.value)
+                }
+                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                   if (e.key === "Enter") {
                     handleAddRelay();
                   }