improve relay screen

src/app/relays/components/relayEventList.tsx

@@ -1,5 +1,6 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
+import { normalizeRelayUrl } from 'nostr-fetch';
 import { useCallback } from 'react';
 import { VList } from 'virtua';
 
@@ -15,7 +16,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
     queryFn: async () => {
       const url = 'wss://' + relayUrl;
       const events = await fetcher.fetchLatestEvents(
-        [url],
+        [normalizeRelayUrl(url)],
         {
           kinds: [NDKKind.Text, NDKKind.Repost],
         },
@@ -24,6 +25,8 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
       return events as unknown as NDKEvent[];
     },
     refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
   });
 
   const renderItem = useCallback(
@@ -41,8 +44,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
   );
 
   return (
-    <div className="h-full">
+    <VList className="mx-auto h-full w-full max-w-[500px] pt-10 scrollbar-none">
-      <VList className="mx-auto w-full max-w-[500px] scrollbar-none">
       {status === 'pending' ? (
         <div className="flex h-full w-full items-center justify-center">
           <div className="inline-flex flex-col items-center justify-center gap-2">
@@ -53,7 +55,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
       ) : (
         data.map((item) => renderItem(item))
       )}
+      <div className="h-20" />
     </VList>
-    </div>
   );
 }

src/app/relays/components/relayList.tsx

@@ -9,8 +9,6 @@ import { useNostr } from '@utils/hooks/useNostr';
 import { useRelay } from '@utils/hooks/useRelay';
 
 export function RelayList() {
-  const navigate = useNavigate();
-
   const { getAllRelaysByUsers } = useNostr();
   const { connectRelay } = useRelay();
   const { status, data } = useQuery({
@@ -24,6 +22,8 @@ export function RelayList() {
     staleTime: Infinity,
   });
 
+  const navigate = useNavigate();
+
   const inspectRelay = (relayUrl: string) => {
     const url = new URL(relayUrl);
     navigate(`/relays/${url.hostname}`);

src/app/relays/components/userRelayList.tsx

@@ -6,7 +6,7 @@ import { RelayForm } from '@app/relays/components/relayForm';
 import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';
 
-import { CancelIcon } from '@shared/icons';
+import { CancelIcon, RefreshIcon } from '@shared/icons';
 
 import { useRelay } from '@utils/hooks/useRelay';
 
@@ -14,7 +14,7 @@ export function UserRelayList() {
   const { db } = useStorage();
   const { ndk } = useNDK();
   const { removeRelay } = useRelay();
-  const { status, data } = useQuery({
+  const { status, data, refetch } = useQuery({
     queryKey: ['relays', db.account.pubkey],
     queryFn: async () => {
       const event = await ndk.fetchEvent(
@@ -25,7 +25,7 @@ export function UserRelayList() {
         { cacheUsage: NDKSubscriptionCacheUsage.ONLY_RELAY }
       );
 
-      if (!event) throw new Error('relay set not found');
+      if (!event) return [];
       return event.tags;
     },
     refetchOnWindowFocus: false,
@@ -35,15 +35,22 @@ export function UserRelayList() {
 
   return (
     <div className="col-span-1">
-      <div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
+      <div className="inline-flex h-16 w-full items-center justify-between border-b border-neutral-100 px-3 dark:border-neutral-900">
         <h3 className="font-semibold">Connected relays</h3>
+        <button
+          type="button"
+          onClick={() => refetch()}
+          className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-900"
+        >
+          <RefreshIcon className="h-4 w-4" />
+        </button>
       </div>
       <div className="mt-3 flex flex-col gap-2 px-3">
         {status === 'pending' ? (
           <p>Loading...</p>
-        ) : !data ? (
+        ) : !data.length ? (
-          <div className="flex h-20 w-full items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900">
+          <div className="flex h-20 w-full items-center justify-center rounded-xl bg-neutral-50 dark:bg-neutral-950">
-            <p className="text-sm font-medium">You not have personal relay set yet</p>
+            <p className="text-sm font-medium">You not have personal relay list yet</p>
           </div>
         ) : (
           data.map((item) => (
@@ -68,8 +75,8 @@ export function UserRelayList() {
                 </p>
               </div>
               <div className="inline-flex items-center gap-2">
-                {item[2] ? (
+                {item[2]?.length ? (
-                  <div className="inline-flex h-6 w-max items-center justify-center rounded bg-neutral-200 px-2 text-xs font-medium capitalize dark:bg-neutral-900">
+                  <div className="inline-flex h-6 w-max items-center justify-center rounded bg-neutral-200 px-2 text-xs font-medium capitalize dark:bg-neutral-800">
                     {item[2]}
                   </div>
                 ) : null}

src/shared/accounts/active.tsx

@@ -27,7 +27,7 @@ export function ActiveAccount() {
             loading="lazy"
             decoding="async"
             style={{ contentVisibility: 'auto' }}
-            className="aspect-square h-auto w-full rounded-md"
+            className="aspect-square h-auto w-full rounded-md object-cover"
           />
           <Avatar.Fallback delayMs={150}>
             <img