wip

src/app/browse/index.tsx

@@ -1,43 +0,0 @@
-import { NavLink, Outlet } from 'react-router-dom';
-import { ReactFlowProvider } from 'reactflow';
-import { twMerge } from 'tailwind-merge';
-
-export function BrowseScreen() {
-  return (
-    <ReactFlowProvider>
-      <div className="relative h-full w-full">
-        <div className="absolute left-0 right-0 top-4 z-30 flex w-full items-center justify-between px-3">
-          <div className="w-10" />
-          <div className="inline-flex gap-1 rounded-full border-t border-white/10 bg-white/20 p-1 backdrop-blur-xl">
-            <NavLink
-              to="/browse/"
-              className={({ isActive }) =>
-                twMerge(
-                  'inline-flex h-7 w-20 items-center justify-center rounded-full text-sm font-semibold',
-                  isActive ? 'bg-white/10 hover:bg-white/20' : ' hover:bg-white/5'
-                )
-              }
-            >
-              Users
-            </NavLink>
-            <NavLink
-              to="/browse/relays"
-              className={({ isActive }) =>
-                twMerge(
-                  'inline-flex h-7 w-20 items-center justify-center rounded-full text-sm font-semibold',
-                  isActive ? 'bg-white/10 hover:bg-white/20' : ' hover:bg-white/5'
-                )
-              }
-            >
-              Relays
-            </NavLink>
-          </div>
-          <div className="w-10" />
-        </div>
-        <div className="relative z-20 h-full w-full">
-          <Outlet />
-        </div>
-      </div>
-    </ReactFlowProvider>
-  );
-}

src/app/browse/relays.tsx

@@ -1,12 +0,0 @@
-export function BrowseRelaysScreen() {
-  return (
-    <div className="grid h-full w-full grid-cols-3">
-      <div className="col-span-2 border-r border-white/5 pt-16">
-        <p>Content</p>
-      </div>
-      <div className="col-span-1 px-3 pt-6">
-        <h3 className="font-semibold text-white">Your relays</h3>
-      </div>
-    </div>
-  );
-}

src/app/explore/components/userGroupNode.tsx

@@ -1,6 +1,6 @@
 import { Handle, Position } from 'reactflow';
 
-import { UserWithDrawer } from '@app/browse/components/userWithDrawer';
+import { UserWithDrawer } from '@app/explore/components/userWithDrawer';
 
 import { GroupTitle } from './groupTitle';
 

src/app/explore/index.tsx

@@ -2,16 +2,17 @@ import { useCallback, useMemo, useRef } from 'react';
 import ReactFlow, {
   Background,
   ConnectionMode,
+  ReactFlowProvider,
   addEdge,
   useEdgesState,
   useNodesState,
   useReactFlow,
 } from 'reactflow';
 
-import { Edge } from '@app/browse//components/edge';
-import { UserGroupNode } from '@app/browse//components/userGroupNode';
-import { Line } from '@app/browse/components/line';
-import { UserNode } from '@app/browse/components/userNode';
+import { Edge } from '@app/explore/components/edge';
+import { Line } from '@app/explore/components/line';
+import { UserGroupNode } from '@app/explore/components/userGroupNode';
+import { UserNode } from '@app/explore/components/userNode';
 
 import { useStorage } from '@libs/storage/provider';
 
@@ -23,7 +24,7 @@ const getId = () => `${id++}`;
 const nodeTypes = { user: UserNode, userGroup: UserGroupNode };
 const edgeTypes = { buttonedge: Edge };
 
-export function BrowseUsersScreen() {
+export function ExploreScreen() {
   const { db } = useStorage();
   const { getContactsByPubkey } = useNostr();
   const { project } = useReactFlow();
@@ -91,26 +92,28 @@ export function BrowseUsersScreen() {
   );
 
   return (
-    <div className="h-full w-full" ref={reactFlowWrapper}>
-      <ReactFlow
-        proOptions={{ hideAttribution: true }}
-        nodes={nodes}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        connectionLineComponent={Line}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onConnect={onConnect}
-        onConnectStart={onConnectStart}
-        onConnectEnd={onConnectEnd}
-        connectionMode={ConnectionMode.Loose}
-        minZoom={0.8}
-        maxZoom={1.2}
-        fitView
-      >
-        <Background color="#3f3f46" />
-      </ReactFlow>
-    </div>
+    <ReactFlowProvider>
+      <div className="h-full w-full" ref={reactFlowWrapper}>
+        <ReactFlow
+          proOptions={{ hideAttribution: true }}
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          connectionLineComponent={Line}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          onConnectStart={onConnectStart}
+          onConnectEnd={onConnectEnd}
+          connectionMode={ConnectionMode.Loose}
+          minZoom={0.8}
+          maxZoom={1.2}
+          fitView
+        >
+          <Background color="#3f3f46" />
+        </ReactFlow>
+      </div>
+    </ReactFlowProvider>
   );
 }

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>
+  );
+}

src/app/space/components/toggle.tsx

@@ -1,6 +1,6 @@
 import { useStorage } from '@libs/storage/provider';
 
-import { PlusIcon } from '@shared/icons';
+import { HandArrowDownIcon, PlusIcon } from '@shared/icons';
 
 import { WidgetKinds, useWidgets } from '@stores/widgets';
 
@@ -9,17 +9,22 @@ export function ToggleWidgetList() {
   const setWidget = useWidgets((state) => state.setWidget);
 
   return (
-    <div className="relative flex h-full shrink-0 grow-0 basis-[400px] items-center justify-center">
-      <button
-        type="button"
-        onClick={() =>
-          setWidget(db, { kind: WidgetKinds.tmp.list, title: '', content: '' })
-        }
-        className="inline-flex items-center gap-2 text-white"
-      >
-        <PlusIcon className="h-4 w-4 text-white" />
-        <p className="text-sm font-bold leading-none">Add widget</p>
-      </button>
+    <div className="flex h-full shrink-0 grow-0 basis-[400px] items-center justify-center">
+      <div className="relative">
+        <div className="absolute -top-44 left-1/2 -translate-x-1/2 transform">
+          <HandArrowDownIcon className="text-white/5" />
+        </div>
+        <button
+          type="button"
+          onClick={() =>
+            setWidget(db, { kind: WidgetKinds.tmp.list, title: '', content: '' })
+          }
+          className="inline-flex h-9 items-center gap-2 rounded-lg border-t border-white/10 bg-white/20 px-3 text-white hover:bg-white/30"
+        >
+          <PlusIcon className="h-4 w-4 text-white" />
+          <p className="text-sm font-semibold leading-none">Add widget</p>
+        </button>
+      </div>
     </div>
   );
 }