From 48ab123850013ce42029919944943359df3da38c Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Mon, 4 Dec 2023 09:26:19 +0700
Subject: [PATCH] improve relay screen

---
 src/app/relays/components/relayEventList.tsx | 30 +++++++++++---------
 src/app/relays/components/relayList.tsx      |  4 +--
 src/app/relays/components/userRelayList.tsx  | 25 ++++++++++------
 src/shared/accounts/active.tsx               |  2 +-
 4 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/app/relays/components/relayEventList.tsx b/src/app/relays/components/relayEventList.tsx
index 4f360059..e9249a04 100644
--- a/src/app/relays/components/relayEventList.tsx
+++ b/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,19 +44,18 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
   );
 
   return (
-    <div className="h-full">
-      <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">
-              <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-              <p className="text-sm font-medium text-white/80">Loading newsfeed...</p>
-            </div>
+    <VList className="mx-auto h-full w-full max-w-[500px] pt-10 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">
+            <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+            <p className="text-sm font-medium text-white/80">Loading newsfeed...</p>
           </div>
-        ) : (
-          data.map((item) => renderItem(item))
-        )}
-      </VList>
-    </div>
+        </div>
+      ) : (
+        data.map((item) => renderItem(item))
+      )}
+      <div className="h-20" />
+    </VList>
   );
 }
diff --git a/src/app/relays/components/relayList.tsx b/src/app/relays/components/relayList.tsx
index ec77917a..23861733 100644
--- a/src/app/relays/components/relayList.tsx
+++ b/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}`);
diff --git a/src/app/relays/components/userRelayList.tsx b/src/app/relays/components/userRelayList.tsx
index 07d7c383..3afa1235 100644
--- a/src/app/relays/components/userRelayList.tsx
+++ b/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 ? (
-          <div className="flex h-20 w-full items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-900">
-            <p className="text-sm font-medium">You not have personal relay set yet</p>
+        ) : !data.length ? (
+          <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 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] ? (
-                  <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">
+                {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-800">
                     {item[2]}
                   </div>
                 ) : null}
diff --git a/src/shared/accounts/active.tsx b/src/shared/accounts/active.tsx
index e276f289..1d3c6512 100644
--- a/src/shared/accounts/active.tsx
+++ b/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