chore: setup eslint and prettier with code formatting

src/components/EncodeViewer.tsx

@@ -40,7 +40,7 @@ export default function EncodeViewer({ args }: EncodeViewerProps) {
         ...parsed,
         relays: relays.length > 0 ? relays : undefined,
       });
-    } catch (err) {
+    } catch {
       return null;
     }
   }, [parsed, relays]);

src/components/nostr/RichText.tsx

@@ -46,6 +46,18 @@ export function RichText({
   className = "",
   depth = 1,
 }: RichTextProps) {
+  // Call hook unconditionally - it will handle undefined/null
+  const trimmedEvent = event
+    ? {
+        ...event,
+        content: event.content.trim(),
+      }
+    : undefined;
+  const renderedContent = useRenderedContent(
+    trimmedEvent as NostrEvent,
+    contentComponents,
+  );
+
   // If plain content is provided, just render it
   if (content && !event) {
     const lines = content.trim().split("\n");
@@ -62,11 +74,6 @@ export function RichText({
 
   // Render event content with rich formatting
   if (event) {
-    const trimmedEvent = {
-      ...event,
-      content: event.content.trim(),
-    };
-    const renderedContent = useRenderedContent(trimmedEvent, contentComponents);
     return (
       <DepthContext.Provider value={depth}>
         <div className={cn("leading-relaxed break-words", className)}>

src/components/nostr/kinds/Kind0Renderer.tsx

@@ -16,7 +16,7 @@ export function Kind0Renderer({ event }: BaseEventProps) {
   const website = profile?.website;
 
   return (
-    <BaseEventContainer event={event} >
+    <BaseEventContainer event={event}>
       <div className="flex flex-col gap-3">
         {/* Profile Info */}
         <div className="flex flex-col gap-2 p-3 border border-muted bg-muted/20">

src/components/nostr/kinds/Kind1063Renderer.tsx

@@ -29,7 +29,7 @@ export function Kind1063Renderer({ event }: BaseEventProps) {
     event.tags.find((t) => t[0] === "summary")?.[1] || event.content;
 
   return (
-    <BaseEventContainer event={event} >
+    <BaseEventContainer event={event}>
       <div className="flex flex-col gap-3">
         {/* File preview */}
         {metadata.url && (isImage || isVideo || isAudio) ? (

src/components/nostr/kinds/Kind20Renderer.tsx

@@ -15,7 +15,7 @@ export function Kind20Renderer({ event }: BaseEventProps) {
   const title = event.tags.find((t) => t[0] === "title")?.[1];
 
   return (
-    <BaseEventContainer event={event} >
+    <BaseEventContainer event={event}>
       <div className="flex flex-col gap-2">
         {/* Title if present */}
         {title && (

src/components/nostr/kinds/Kind21Renderer.tsx

@@ -15,7 +15,7 @@ export function Kind21Renderer({ event }: BaseEventProps) {
   const title = event.tags.find((t) => t[0] === "title")?.[1];
 
   return (
-    <BaseEventContainer event={event} >
+    <BaseEventContainer event={event}>
       <div className="flex flex-col gap-2">
         {/* Title if present */}
         {title && <h3 className="text-base font-semibold">{title}</h3>}

src/components/nostr/kinds/Kind22Renderer.tsx

@@ -15,7 +15,7 @@ export function Kind22Renderer({ event }: BaseEventProps) {
   const title = event.tags.find((t) => t[0] === "title")?.[1];
 
   return (
-    <BaseEventContainer event={event} >
+    <BaseEventContainer event={event}>
       <div className="flex flex-col gap-2">
         {/* Title if present */}
         {title && <h3 className="text-base font-semibold">{title}</h3>}

src/components/nostr/kinds/Kind30023DetailRenderer.tsx

@@ -182,7 +182,7 @@ export function Kind30023DetailRenderer({ event }: { event: NostrEvent }) {
                 />
               ) : null,
             // Handle nostr: links
-            a: ({ node, href, children, ...props }) => {
+            a: ({ href, children, ...props }) => {
               if (!href) return null;
 
               // Render nostr: mentions inline
@@ -204,43 +204,43 @@ export function Kind30023DetailRenderer({ event }: { event: NostrEvent }) {
               );
             },
             // Make pre elements display inline
-            pre: ({ node, children, ...props }) => (
+            pre: ({ children, ...props }) => (
               <span className="inline" {...props}>
                 {children}
               </span>
             ),
             // Style adjustments for dark theme
-            h1: ({ node, ...props }) => (
+            h1: ({ ...props }) => (
               <h1 className="text-2xl font-bold mt-8 mb-4" {...props} />
             ),
-            h2: ({ node, ...props }) => (
+            h2: ({ ...props }) => (
               <h2 className="text-xl font-bold mt-6 mb-3" {...props} />
             ),
-            h3: ({ node, ...props }) => (
+            h3: ({ ...props }) => (
               <h3 className="text-lg font-bold mt-4 mb-2" {...props} />
             ),
-            p: ({ node, ...props }) => (
+            p: ({ ...props }) => (
               <p className="text-sm leading-relaxed mb-4" {...props} />
             ),
-            code: ({ node, inline, ...props }: any) => (
+            code: ({ ...props }: any) => (
               <code
                 className="bg-muted px-0.5 py-0.5 rounded text-xs font-mono"
                 {...props}
               />
             ),
-            blockquote: ({ node, ...props }) => (
+            blockquote: ({ ...props }) => (
               <blockquote
                 className="border-l-4 border-muted pl-4 italic text-muted-foreground my-4"
                 {...props}
               />
             ),
-            ul: ({ node, ...props }) => (
+            ul: ({ ...props }) => (
               <ul
                 className="text-sm list-disc list-inside my-4 space-y-2"
                 {...props}
               />
             ),
-            ol: ({ node, ...props }) => (
+            ol: ({ ...props }) => (
               <ol
                 className="text-sm list-decimal list-inside my-4 space-y-2"
                 {...props}

src/components/nostr/kinds/Kind30023Renderer.tsx

@@ -14,7 +14,7 @@ export function Kind30023Renderer({ event }: BaseEventProps) {
   const summary = useMemo(() => getArticleSummary(event), [event]);
 
   return (
-    <BaseEventContainer event={event} >
+    <BaseEventContainer event={event}>
       <div className="flex flex-col gap-2">
         {/* Title */}
         {title && (

src/components/nostr/kinds/Kind3Renderer.tsx

@@ -20,7 +20,7 @@ export function Kind3Renderer({ event }: BaseEventProps) {
     : false;
 
   return (
-    <BaseEventContainer event={event} >
+    <BaseEventContainer event={event}>
       <div className="flex flex-col gap-2 text-xs">
         <span className="flex items-center gap-1">
           <Users className="size-3 text-muted-foreground" />

src/components/nostr/kinds/Kind6Renderer.tsx

@@ -15,7 +15,7 @@ export function Kind6Renderer({ event }: BaseEventProps) {
   const repostedEventId = eTag?.[1];
 
   return (
-    <BaseEventContainer event={event} >
+    <BaseEventContainer event={event}>
       <div className="flex flex-col gap-3">
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
           <Repeat2 className="size-4" />

src/components/nostr/kinds/Kind7Renderer.tsx

@@ -108,7 +108,7 @@ export function Kind7Renderer({ event }: BaseEventProps) {
   };
 
   return (
-    <BaseEventContainer event={event} >
+    <BaseEventContainer event={event}>
       <div className="flex flex-col gap-2">
         {/* Reaction indicator */}
         <div className="flex items-center gap-2">

src/components/nostr/kinds/Kind9735Renderer.tsx

@@ -47,14 +47,6 @@ export function Kind9735Renderer({ event }: BaseEventProps) {
     return Math.floor(zapAmount / 1000);
   }, [zapAmount]);
 
-  if (!isValid) {
-    return (
-      <BaseEventContainer event={event} >
-        <div className="text-xs text-muted-foreground">Invalid zap receipt</div>
-      </BaseEventContainer>
-    );
-  }
-
   // Override event.pubkey to show zap sender instead of receipt pubkey
   const displayEvent = useMemo(
     () => ({
@@ -64,8 +56,16 @@ export function Kind9735Renderer({ event }: BaseEventProps) {
     [event, zapSender],
   );
 
+  if (!isValid) {
+    return (
+      <BaseEventContainer event={event}>
+        <div className="text-xs text-muted-foreground">Invalid zap receipt</div>
+      </BaseEventContainer>
+    );
+  }
+
   return (
-    <BaseEventContainer event={displayEvent} >
+    <BaseEventContainer event={displayEvent}>
       <div className="flex flex-col gap-2">
         {/* Zap indicator */}
         <div className="flex items-center gap-2">

src/components/nostr/kinds/Kind9802Renderer.tsx

@@ -17,7 +17,7 @@ export function Kind9802Renderer({ event }: BaseEventProps) {
   const comment = useMemo(() => getHighlightComment(event), [event]);
 
   return (
-    <BaseEventContainer event={event} >
+    <BaseEventContainer event={event}>
       <div className="flex flex-col gap-2">
         {/* Comment */}
         {comment && <p className="text-sm text-foreground">{comment}</p>}

src/components/ui/avatar.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -11,12 +11,12 @@ const Avatar = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
+      className,
     )}
     {...props}
   />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
@@ -27,8 +27,8 @@ const AvatarImage = React.forwardRef<
     className={cn("aspect-square h-full w-full", className)}
     {...props}
   />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -38,11 +38,11 @@ const AvatarFallback = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
+      className,
     )}
     {...props}
   />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };

src/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -31,27 +31,28 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

src/components/ui/dialog.tsx

@@ -1,16 +1,16 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -20,12 +20,12 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        className,
       )}
       {...props}
     >
@@ -48,8 +48,8 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
   className,
@@ -58,12 +58,12 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
   className,
@@ -72,12 +72,12 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -87,12 +87,12 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -103,8 +103,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -117,4 +117,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};

src/components/ui/input.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
@@ -9,14 +9,14 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
         type={type}
         className={cn(
           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };

src/components/ui/scroll-area.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -18,8 +18,8 @@ const ScrollArea = React.forwardRef<
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
@@ -34,13 +34,13 @@ const ScrollBar = React.forwardRef<
         "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" &&
         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
+      className,
     )}
     {...props}
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };