.jsx -> .js

src/App.test.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import { test } from 'vitest';
 
-import App from "./App.jsx";
+import App from "./App.js";
 
 test('App', () => {
   render(<App />);

src/App.tsx

@@ -5,14 +5,14 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createHead, UnheadProvider } from '@unhead/react/client';
 import { InferSeoMetaPlugin } from '@unhead/addons';
 import { Suspense } from 'react';
-import NostrProvider from '@/components/NostrProvider.jsx';
-import { Toaster } from "@/components/ui/toaster.jsx";
-import { TooltipProvider } from "@/components/ui/tooltip.jsx";
+import NostrProvider from '@/components/NostrProvider.js';
+import { Toaster } from "@/components/ui/toaster.js";
+import { TooltipProvider } from "@/components/ui/tooltip.js";
 import { NostrLoginProvider } from '@nostrify/react/login';
-import { AppProvider } from '@/components/AppProvider.jsx';
-import { NWCProvider } from '@/contexts/NWCContext.jsx';
-import { AppConfig } from '@/contexts/AppContext.jsx';
-import AppRouter from "./AppRouter.jsx";
+import { AppProvider } from '@/components/AppProvider.js';
+import { NWCProvider } from '@/contexts/NWCContext.js';
+import { AppConfig } from '@/contexts/AppContext.js';
+import AppRouter from "./AppRouter.js";
 
 const head = createHead({
   plugins: [

src/AppRouter.tsx

@@ -1,9 +1,9 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { ScrollToTop } from "./components/ScrollToTop.jsx";
+import { ScrollToTop } from "./components/ScrollToTop.js";
 
-import Index from "./pages/Index.jsx";
-import { NIP19Page } from "./pages/NIP19Page.jsx";
-import NotFound from "./pages/NotFound.jsx";
+import Index from "./pages/Index.js";
+import { NIP19Page } from "./pages/NIP19Page.js";
+import NotFound from "./pages/NotFound.js";
 
 export function AppRouter() {
   return (

src/components/AppProvider.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useEffect } from 'react';
 import { z } from 'zod';
 import { useLocalStorage } from '@/hooks/useLocalStorage.js';
-import { AppContext, type AppConfig, type AppContextType, type Theme } from '@/contexts/AppContext.jsx';
+import { AppContext, type AppConfig, type AppContextType, type Theme } from '@/contexts/AppContext.js';
 
 interface AppProviderProps {
   children: ReactNode;
@@ -88,7 +88,7 @@ function useApplyTheme(theme: Theme) {
     if (theme !== 'system') return;
 
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-  
+
     const handleChange = () => {
       const root = window.document.documentElement;
       root.classList.remove('light', 'dark');

src/components/EditProfileForm.tsx

@@ -4,7 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useCurrentUser } from '@/hooks/useCurrentUser.js';
 import { useNostrPublish } from '@/hooks/useNostrPublish.js';
 import { useToast } from '@/hooks/useToast.js';
-import { Button } from '@/components/ui/button.jsx';
+import { Button } from '@/components/ui/button.js';
 import {
   Form,
   FormControl,
@@ -13,10 +13,10 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form.jsx';
-import { Input } from '@/components/ui/input.jsx';
-import { Textarea } from '@/components/ui/textarea.jsx';
-import { Switch } from '@/components/ui/switch.jsx';
+} from '@/components/ui/form.js';
+import { Input } from '@/components/ui/input.js';
+import { Textarea } from '@/components/ui/textarea.js';
+import { Switch } from '@/components/ui/switch.js';
 import { Loader2, Upload } from 'lucide-react';
 import { NSchema as n, type NostrMetadata } from '@nostrify/nostrify';
 import { useQueryClient } from '@tanstack/react-query';

src/components/NoteContent.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { TestApp } from '@/test/TestApp.jsx';
-import { NoteContent } from "./NoteContent.jsx";
+import { TestApp } from '@/test/TestApp.js';
+import { NoteContent } from "./NoteContent.js";
 import type { NostrEvent } from '@nostrify/nostrify';
 
 describe('NoteContent', () => {

src/components/RelaySelector.tsx

@@ -1,6 +1,6 @@
 import { Check, ChevronsUpDown, Wifi, Plus } from "lucide-react";
 import { cn } from "@/lib/utils.js";
-import { Button } from "@/components/ui/button.jsx";
+import { Button } from "@/components/ui/button.js";
 import {
   Command,
   CommandEmpty,
@@ -8,12 +8,12 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "@/components/ui/command.jsx";
+} from "@/components/ui/command.js";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover.jsx";
+} from "@/components/ui/popover.js";
 import { useState } from "react";
 import { useAppContext } from "@/hooks/useAppContext.js";
 

src/components/WalletModal.tsx

@@ -1,6 +1,6 @@
 import { useState, forwardRef } from 'react';
 import { Wallet, Plus, Trash2, Zap, Globe, WalletMinimal, CheckCircle, X } from 'lucide-react';
-import { Button } from '@/components/ui/button.jsx';
+import { Button } from '@/components/ui/button.js';
 import {
   Dialog,
   DialogContent,
@@ -9,7 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/components/ui/dialog.jsx';
+} from '@/components/ui/dialog.js';
 import {
   Drawer,
   DrawerContent,
@@ -18,12 +18,12 @@ import {
   DrawerTitle,
   DrawerTrigger,
   DrawerClose,
-} from '@/components/ui/drawer.jsx';
-import { Input } from '@/components/ui/input.jsx';
-import { Label } from '@/components/ui/label.jsx';
-import { Textarea } from '@/components/ui/textarea.jsx';
-import { Badge } from '@/components/ui/badge.jsx';
-import { Separator } from '@/components/ui/separator.jsx';
+} from '@/components/ui/drawer.js';
+import { Input } from '@/components/ui/input.js';
+import { Label } from '@/components/ui/label.js';
+import { Textarea } from '@/components/ui/textarea.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Separator } from '@/components/ui/separator.js';
 import { useNWC } from '@/hooks/useNWCContext.js';
 import { useWallet } from '@/hooks/useWallet.js';
 import { useToast } from '@/hooks/useToast.js';

src/components/ZapButton.tsx

@@ -1,4 +1,4 @@
-import { ZapDialog } from '@/components/ZapDialog.jsx';
+import { ZapDialog } from '@/components/ZapDialog.js';
 import { useZaps } from '@/hooks/useZaps.js';
 import { useWallet } from '@/hooks/useWallet.js';
 import { useCurrentUser } from '@/hooks/useCurrentUser.js';

src/components/ZapDialog.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, forwardRef } from 'react';
 import { Zap, Copy, Check, ExternalLink, Sparkle, Sparkles, Star, Rocket, ArrowLeft, X } from 'lucide-react';
-import { Button } from '@/components/ui/button.jsx';
+import { Button } from '@/components/ui/button.js';
 import { cn } from '@/lib/utils.js';
 import {
   Dialog,
@@ -9,7 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/components/ui/dialog.jsx';
+} from '@/components/ui/dialog.js';
 import {
   Drawer,
   DrawerContent,
@@ -18,13 +18,13 @@ import {
   DrawerTitle,
   DrawerTrigger,
   DrawerClose,
-} from '@/components/ui/drawer.jsx';
-import { Input } from '@/components/ui/input.jsx';
-import { Label } from '@/components/ui/label.jsx';
-import { Textarea } from '@/components/ui/textarea.jsx';
-import { Card, CardContent } from '@/components/ui/card.jsx';
-import { Separator } from '@/components/ui/separator.jsx';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group.jsx';
+} from '@/components/ui/drawer.js';
+import { Input } from '@/components/ui/input.js';
+import { Label } from '@/components/ui/label.js';
+import { Textarea } from '@/components/ui/textarea.js';
+import { Card, CardContent } from '@/components/ui/card.js';
+import { Separator } from '@/components/ui/separator.js';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group.js';
 import { useCurrentUser } from '@/hooks/useCurrentUser.js';
 import { useAuthor } from '@/hooks/useAuthor.js';
 import { useToast } from '@/hooks/useToast.js';

src/components/auth/AccountSwitcher.tsx

@@ -8,10 +8,10 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.jsx';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.jsx';
-import { RelaySelector } from '@/components/RelaySelector.jsx';
-import { WalletModal } from '@/components/WalletModal.jsx';
+} from '@/components/ui/dropdown-menu.js';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.js';
+import { RelaySelector } from '@/components/RelaySelector.js';
+import { WalletModal } from '@/components/WalletModal.js';
 import { useLoggedInAccounts, type Account } from '@/hooks/useLoggedInAccounts.js';
 import { genUserName } from '@/lib/genUserName.js';
 

src/components/auth/LoginArea.tsx

@@ -3,7 +3,7 @@
 
 import { useState } from 'react';
 import { User, UserPlus } from 'lucide-react';
-import { Button } from '@/components/ui/button.jsx';
+import { Button } from '@/components/ui/button.js';
 import LoginDialog from "./LoginDialog.js";
 import SignupDialog from "./SignupDialog.js";
 import { useLoggedInAccounts } from '@/hooks/useLoggedInAccounts.js';

src/components/auth/LoginDialog.tsx

@@ -3,11 +3,11 @@
 
 import React, { useRef, useState, useEffect } from 'react';
 import { Shield, Upload, AlertTriangle, UserPlus, KeyRound, Sparkles, Cloud } from 'lucide-react';
-import { Button } from '@/components/ui/button.jsx';
-import { Input } from '@/components/ui/input.jsx';
-import { Dialog, DialogContent, DialogHeader, DialogDescription } from "@/components/ui/dialog.jsx";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs.jsx';
-import { Alert, AlertDescription } from '@/components/ui/alert.jsx';
+import { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
+import { Dialog, DialogContent, DialogHeader, DialogDescription } from "@/components/ui/dialog.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
+import { Alert, AlertDescription } from '@/components/ui/alert.js';
 import { useLoginActions } from '@/hooks/useLoginActions.js';
 import { cn } from '@/lib/utils.js';
 

src/components/auth/SignupDialog.tsx

@@ -2,12 +2,12 @@
 // It is important that all functionality in this file is preserved, and should only be modified if explicitly requested.
 
 import React, { useState, useEffect, useRef } from 'react';
-import { Download, Key, UserPlus, FileText, Shield, User, Sparkles, LogIn, Lock, CheckCircle, Upload, Globe, FileSignature, Wand2 } from 'lucide-react';
-import { Button } from '@/components/ui/button.jsx';
-import { Input } from '@/components/ui/input.jsx';
-import { Textarea } from '@/components/ui/textarea.jsx';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog.jsx";
-import { Card, CardContent } from '@/components/ui/card.jsx';
+import { Download, Key, UserPlus, FileText, Shield, User, Sparkles, LogIn, CheckCircle, Upload, Globe } from 'lucide-react';
+import { Button } from '@/components/ui/button.js';
+import { Input } from '@/components/ui/input.js';
+import { Textarea } from '@/components/ui/textarea.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog.js";
+import { Card, CardContent } from '@/components/ui/card.js';
 import { toast } from '@/hooks/useToast.js';
 import { useLoginActions } from '@/hooks/useLoginActions.js';
 import { useNostrPublish } from '@/hooks/useNostrPublish.js';

src/components/comments/Comment.tsx

@@ -5,12 +5,12 @@ import { nip19 } from 'nostr-tools';
 import { useAuthor } from '@/hooks/useAuthor.js';
 import { useComments } from '@/hooks/useComments.js';
 import { CommentForm } from "./CommentForm.js";
-import { NoteContent } from '@/components/NoteContent.jsx';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.jsx';
-import { Button } from '@/components/ui/button.jsx';
-import { Card, CardContent } from '@/components/ui/card.jsx';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible.jsx';
-import { DropdownMenu, DropdownMenuTrigger } from '@/components/ui/dropdown-menu.jsx';
+import { NoteContent } from '@/components/NoteContent.js';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.js';
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent } from '@/components/ui/card.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible.js';
+import { DropdownMenu, DropdownMenuTrigger } from '@/components/ui/dropdown-menu.js';
 import { MessageSquare, ChevronDown, ChevronRight, MoreHorizontal } from 'lucide-react';
 import { formatDistanceToNow } from 'date-fns';
 import { genUserName } from '@/lib/genUserName.js';
@@ -26,10 +26,10 @@ interface CommentProps {
 export function Comment({ root, comment, depth = 0, maxDepth = 3, limit }: CommentProps) {
   const [showReplyForm, setShowReplyForm] = useState(false);
   const [showReplies, setShowReplies] = useState(depth < 2); // Auto-expand first 2 levels
-  
+
   const author = useAuthor(comment.pubkey);
   const { data: commentsData } = useComments(root, limit);
-  
+
   const metadata = author.data?.metadata;
   const displayName = metadata?.name ?? genUserName(comment.pubkey)
   const timeAgo = formatDistanceToNow(new Date(comment.created_at * 1000), { addSuffix: true });
@@ -55,7 +55,7 @@ export function Comment({ root, comment, depth = 0, maxDepth = 3, limit }: Comme
                   </Avatar>
                 </Link>
                 <div>
-                  <Link 
+                  <Link
                     to={`/${nip19.npubEncode(comment.pubkey)}`}
                     className="font-medium text-sm hover:text-primary transition-colors"
                   >
@@ -83,7 +83,7 @@ export function Comment({ root, comment, depth = 0, maxDepth = 3, limit }: Comme
                   <MessageSquare className="h-3 w-3 mr-1" />
                   Reply
                 </Button>
-                
+
                 {hasReplies && (
                   <Collapsible open={showReplies} onOpenChange={setShowReplies}>
                     <CollapsibleTrigger asChild>

src/components/comments/CommentForm.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
-import { Button } from '@/components/ui/button.jsx';
-import { Textarea } from '@/components/ui/textarea.jsx';
-import { Card, CardContent } from '@/components/ui/card.jsx';
+import { Button } from '@/components/ui/button.js';
+import { Textarea } from '@/components/ui/textarea.js';
+import { Card, CardContent } from '@/components/ui/card.js';
 import { useCurrentUser } from '@/hooks/useCurrentUser.js';
 import { usePostComment } from '@/hooks/usePostComment.js';
-import { LoginArea } from '@/components/auth/LoginArea.jsx';
+import { LoginArea } from '@/components/auth/LoginArea.js';
 import { NostrEvent } from '@nostrify/nostrify';
 import { MessageSquare, Send } from 'lucide-react';
 
@@ -19,9 +19,9 @@ interface CommentFormProps {
 export function CommentForm({
   root,
   reply,
-  onSuccess, 
+  onSuccess,
   placeholder = "Write a comment...",
-  compact = false 
+  compact = false
 }: CommentFormProps) {
   const [content, setContent] = useState('');
   const { user } = useCurrentUser();
@@ -29,7 +29,7 @@ export function CommentForm({
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (!content.trim() || !user) return;
 
     postComment(
@@ -74,8 +74,8 @@ export function CommentForm({
             <span className="text-sm text-muted-foreground">
               {reply ? 'Replying to comment' : 'Adding to the discussion'}
             </span>
-            <Button 
-              type="submit" 
+            <Button
+              type="submit"
               disabled={!content.trim() || isPending}
               size={compact ? "sm" : "default"}
             >

src/components/comments/CommentsSection.tsx

@@ -1,6 +1,6 @@
 import { useComments } from '@/hooks/useComments.js';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.jsx';
-import { Skeleton } from '@/components/ui/skeleton.jsx';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { Skeleton } from '@/components/ui/skeleton.js';
 import { MessageSquare } from 'lucide-react';
 import { cn } from '@/lib/utils.js';
 import type { NostrEvent } from '@nostrify/nostrify';
@@ -16,7 +16,7 @@ interface CommentsSectionProps {
   limit?: number;
 }
 
-export function CommentsSection({ 
+export function CommentsSection({
   root,
   title = "Comments",
   emptyStateMessage = "No comments yet",

src/components/ui/carousel.tsx

@@ -5,7 +5,7 @@ import useEmblaCarousel, {
 import { ArrowLeft, ArrowRight } from "lucide-react"
 
 import { cn } from "@/lib/utils.js"
-import { Button } from "@/components/ui/button.jsx"
+import { Button } from "@/components/ui/button.js"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>

src/components/ui/command.tsx

@@ -4,7 +4,7 @@ import { Command as CommandPrimitive } from "cmdk"
 import { Search } from "lucide-react"
 
 import { cn } from "@/lib/utils.js"
-import { Dialog, DialogContent } from "@/components/ui/dialog.jsx"
+import { Dialog, DialogContent } from "@/components/ui/dialog.js"
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,

src/components/ui/form.tsx

@@ -10,7 +10,7 @@ import {
 } from "react-hook-form"
 
 import { cn } from "@/lib/utils.js"
-import { Label } from "@/components/ui/label.jsx"
+import { Label } from "@/components/ui/label.js"
 import { FormFieldContext, FormItemContext, useFormField } from "./form-utils.js"
 
 const Form = FormProvider

src/components/ui/pagination.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "@/lib/utils.js"
-import { ButtonProps } from "@/components/ui/button.jsx"
+import { ButtonProps } from "@/components/ui/button.js"
 import { buttonVariants } from "@/components/ui/button-variants.js"
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (

src/components/ui/sidebar.tsx

@@ -5,17 +5,17 @@ import { PanelLeft } from "lucide-react"
 
 import { useIsMobile } from "@/hooks/useIsMobile.js"
 import { cn } from "@/lib/utils.js"
-import { Button } from "@/components/ui/button.jsx"
-import { Input } from "@/components/ui/input.jsx"
-import { Separator } from "@/components/ui/separator.jsx"
-import { Sheet, SheetContent } from "@/components/ui/sheet.jsx"
-import { Skeleton } from "@/components/ui/skeleton.jsx"
+import { Button } from "@/components/ui/button.js"
+import { Input } from "@/components/ui/input.js"
+import { Separator } from "@/components/ui/separator.js"
+import { Sheet, SheetContent } from "@/components/ui/sheet.js"
+import { Skeleton } from "@/components/ui/skeleton.js"
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip.jsx"
+} from "@/components/ui/tooltip.js"
 import {
   SIDEBAR_COOKIE_NAME,
   SIDEBAR_COOKIE_MAX_AGE,

src/components/ui/toaster.tsx

@@ -6,7 +6,7 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "@/components/ui/toast.jsx"
+} from "@/components/ui/toast.js"
 
 export function Toaster() {
   const { toasts } = useToast()

src/hooks/useToast.ts

@@ -3,7 +3,7 @@ import * as React from "react"
 import type {
   ToastActionElement,
   ToastProps,
-} from "@/components/ui/toast.jsx"
+} from "@/components/ui/toast.js"
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000

src/main.tsx

@@ -3,8 +3,8 @@ import { createRoot } from 'react-dom/client';
 // Import polyfills first
 import "./lib/polyfills.js";
 
-import { ErrorBoundary } from '@/components/ErrorBoundary.jsx';
-import App from "./App.jsx";
+import { ErrorBoundary } from '@/components/ErrorBoundary.js';
+import App from "./App.js";
 import "./index.css";
 
 // FIXME: a custom font should be used. Eg:

src/test/ErrorBoundary.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
-import { ErrorBoundary } from '@/components/ErrorBoundary.jsx';
+import { ErrorBoundary } from '@/components/ErrorBoundary.js';
 
 
 

src/test/TestApp.tsx

@@ -2,10 +2,10 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createHead, UnheadProvider } from '@unhead/react/client';
 import { BrowserRouter } from 'react-router-dom';
 import { NostrLoginProvider } from '@nostrify/react/login';
-import NostrProvider from '@/components/NostrProvider.jsx';
-import { AppProvider } from '@/components/AppProvider.jsx';
-import { NWCProvider } from '@/contexts/NWCContext.jsx';
-import { AppConfig } from '@/contexts/AppContext.jsx';
+import NostrProvider from '@/components/NostrProvider.js';
+import { AppProvider } from '@/components/AppProvider.js';
+import { NWCProvider } from '@/contexts/NWCContext.js';
+import { AppConfig } from '@/contexts/AppContext.js';
 
 interface TestAppProps {
   children: React.ReactNode;

tsconfig.app.json

@@ -6,7 +6,7 @@
     "module": "nodenext",
     "skipLibCheck": true,
 
-    /* Bundler mode */
+    /* NodeNext mode */
     "moduleResolution": "nodenext",
     "isolatedModules": true,
     "moduleDetection": "force",