wip

src/app/relays/components/relayList.tsx

@@ -0,0 +1,89 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import { VList } from 'virtua';
+
+import { LoaderIcon, PlusIcon, ShareIcon } from '@shared/icons';
+import { User } from '@shared/user';
+
+import { useNostr } from '@utils/hooks/useNostr';
+
+export function RelayList() {
+  const navigate = useNavigate();
+
+  const { getAllRelaysByUsers } = useNostr();
+  const { status, data } = useQuery(
+    ['relays'],
+    async () => {
+      return await getAllRelaysByUsers();
+    },
+    { refetchOnMount: false }
+  );
+
+  const openRelay = (relayUrl: string) => {
+    const url = new URL(relayUrl);
+    navigate(`/relays/${url.hostname}`);
+  };
+
+  return (
+    <div className="col-span-2 border-r border-white/5">
+      {status === 'loading' ? (
+        <div className="flex h-full w-full items-center justify-center pb-10">
+          <div className="inline-flex flex-col items-center justify-center gap-2">
+            <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+            <p>Loading relay...</p>
+          </div>
+        </div>
+      ) : (
+        <VList className="scrollbar-hide mt-20 h-full">
+          <div className="inline-flex h-16 w-full items-center border-b border-white/5 px-3">
+            <h3 className="bg-gradient-to-r from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
+              All relays used by your follows
+            </h3>
+          </div>
+          {[...data].map(([key, value]) => (
+            <div
+              key={key}
+              className="flex h-14 w-full items-center justify-between border-b border-white/5 px-3"
+            >
+              <div className="inline-flex items-center gap-2 divide-x divide-white/10">
+                <div className="inline-flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={() => openRelay(key)}
+                    className="inline-flex h-6 items-center justify-center gap-1 rounded bg-white/10 px-1.5 text-sm font-medium hover:bg-white/20"
+                  >
+                    <ShareIcon className="h-3 w-3" />
+                    Inspect
+                  </button>
+                  <button
+                    type="button"
+                    className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-white/10"
+                  >
+                    <PlusIcon className="h-3 w-3" />
+                  </button>
+                </div>
+                <div className="inline-flex items-center gap-2 pl-3">
+                  <span className="text-sm font-semibold text-white/70">Relay: </span>
+                  <span className="max-w-[200px] truncate text-sm font-medium text-white">
+                    {key}
+                  </span>
+                </div>
+              </div>
+              <div className="isolate flex -space-x-2">
+                {value.slice(0, 4).map((item) => (
+                  <User key={item} pubkey={item} variant="stacked" />
+                ))}
+                {value.length > 4 ? (
+                  <div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-black/80 ring-1 ring-white/10 backdrop-blur-xl">
+                    <span className="text-xs font-semibold">+{value.length}</span>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          ))}
+          <div className="h-16" />
+        </VList>
+      )}
+    </div>
+  );
+}

src/app/relays/components/userRelay.tsx

@@ -0,0 +1,46 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
+
+export function UserRelay() {
+  const { relayUrls } = useNDK();
+  const { db } = useStorage();
+  const { status, data } = useQuery(
+    ['user-relay'],
+    async () => {
+      return await db.getExplicitRelayUrls();
+    },
+    { refetchOnWindowFocus: false }
+  );
+
+  return (
+    <div className="mt-3 px-3">
+      {status === 'loading' ? (
+        <p>Loading...</p>
+      ) : (
+        <div className="flex flex-col gap-2">
+          {data.map((item) => (
+            <div
+              key={item}
+              className="inline-flex h-10 items-center gap-2.5 rounded-lg bg-white/10 px-3"
+            >
+              {relayUrls.includes(item) ? (
+                <span className="relative flex h-3 w-3">
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
+                  <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
+                </span>
+              ) : (
+                <span className="relative flex h-3 w-3">
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"></span>
+                  <span className="relative inline-flex h-3 w-3 rounded-full bg-red-500"></span>
+                </span>
+              )}
+              <p className="text-sm font-medium">{item}</p>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/app/relays/index.tsx

@@ -0,0 +1,16 @@
+import { RelayList } from '@app/relays/components/relayList';
+import { UserRelay } from '@app/relays/components/userRelay';
+
+export function RelaysScreen() {
+  return (
+    <div className="grid h-full w-full grid-cols-3">
+      <RelayList />
+      <div className="col-span-1">
+        <div className="inline-flex h-16 w-full items-center border-b border-white/5 px-3">
+          <h3 className="font-semibold text-white">Connected relays</h3>
+        </div>
+        <UserRelay />
+      </div>
+    </div>
+  );
+}

src/app/relays/relay.tsx

@@ -0,0 +1,19 @@
+import { Suspense } from 'react';
+import { Await, useLoaderData } from 'react-router-dom';
+
+export function RelayScreen() {
+  const data: { relay?: { [key: string]: string } } = useLoaderData();
+
+  return (
+    <div>
+      <Suspense fallback={<p>Loading...</p>}>
+        <Await
+          resolve={data.relay}
+          errorElement={<div>Could not load relay information 😬</div>}
+        >
+          {(resolvedRelay) => <p>{JSON.stringify(resolvedRelay)}</p>}
+        </Await>
+      </Suspense>
+    </div>
+  );
+}