polish

src/app/relays/components/relayEventList.tsx

@@ -11,7 +11,7 @@ import { MemoizedRepost, MemoizedTextNote, UnknownNote } from '@shared/notes';
 export function RelayEventList({ relayUrl }: { relayUrl: string }) {
   const { fetcher } = useNDK();
   const { status, data } = useQuery({
-    queryKey: ['relay-event'],
+    queryKey: ['relay-events', relayUrl],
     queryFn: async () => {
       const url = 'wss://' + relayUrl;
       const events = await fetcher.fetchLatestEvents(
@@ -42,7 +42,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
 
   return (
     <div className="h-full">
-      <div className="mx-auto w-full max-w-[500px]">
+      <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">
@@ -51,13 +51,9 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
             </div>
           </div>
         ) : (
-          <VList className="h-full scrollbar-none">
-            <div className="h-10" />
-            {data.map((item) => renderItem(item))}
-            <div className="h-16" />
-          </VList>
+          data.map((item) => renderItem(item))
         )}
-      </div>
+      </VList>
     </div>
   );
 }

src/app/relays/components/relayList.tsx

@@ -56,7 +56,7 @@ export function RelayList() {
         <VList className="h-full">
           <div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
             <h3 className="font-semibold text-neutral-950 dark:text-neutral-50">
-              All relays used by your follows
+              All relays
             </h3>
           </div>
           {[...data].map(([key, value]) => (

src/app/relays/components/userRelay.tsx

@@ -36,7 +36,7 @@ export function UserRelay() {
           {data.map((item) => (
             <div
               key={item}
-              className="group flex h-10 items-center justify-between rounded-lg bg-neutral-200 pl-3 pr-1.5 dark:bg-neutral-800"
+              className="group flex h-10 items-center justify-between rounded-lg bg-neutral-100 pl-3 pr-1.5 dark:bg-neutral-900"
             >
               <div className="inline-flex items-center gap-2.5">
                 {relayUrls.includes(item) ? (