add simple app relays view

src/components/icons.tsx

@@ -8,7 +8,6 @@ import Code01 from "./icons/code-01";
 import DistributeSpacingVertical from "./icons/distribute-spacing-vertical";
 import Grid01 from "./icons/grid-01";
 import Microscope from "./icons/microscope";
-import Server04 from "./icons/server-04";
 import ChevronDown from "./icons/chevron-down";
 import ChevronUp from "./icons/chevron-up";
 import ChevronLeft from "./icons/chevron-left";
@@ -67,6 +66,7 @@ import Package from "./icons/package";
 import Magnet from "./icons/magnet";
 import Recording02 from "./icons/recording-02";
 import Upload01 from "./icons/upload-01";
+import Modem02 from "./icons/modem-02";
 
 const defaultProps: IconProps = { boxSize: 4 };
 
@@ -94,7 +94,7 @@ export const ChevronLeftIcon = ChevronLeft;
 export const ChevronRightIcon = ChevronRight;
 
 export const LightningIcon = Zap;
-export const RelayIcon = Server04;
+export const RelayIcon = Modem02;
 export const BroadcastEventIcon = Share07;
 export const ShareIcon = Share07;
 export const PinIcon = Pin01;

src/components/relay-management-drawer/index.tsx

@@ -31,7 +31,7 @@ import useUserRelaySets from "../../hooks/use-user-relay-sets";
 import useCurrentAccount from "../../hooks/use-current-account";
 import { getListName } from "../../helpers/nostr/lists";
 import { getEventCoordinate } from "../../helpers/nostr/events";
-import AddRelayForm from "./add-relay-form";
+import AddRelayForm from "../../views/relays/app/add-relay-form";
 import { SaveRelaySetForm } from "./save-relay-set-form";
 
 function RelayControl({ url }: { url: string }) {

src/providers/route/require-read-relays.tsx

@@ -3,13 +3,14 @@ import { Button, Card, CardBody, CardHeader, Flex, Heading } from "@chakra-ui/re
 
 import { useReadRelays } from "../../hooks/use-client-relays";
 import clientRelaysService, { recommendedReadRelays, recommendedWriteRelays } from "../../services/client-relays";
-import AddRelayForm from "../../components/relay-management-drawer/add-relay-form";
+import AddRelayForm from "../../views/relays/app/add-relay-form";
 import { RelayMode } from "../../classes/relay";
 import useSubject from "../../hooks/use-subject";
 import { offlineMode } from "../../services/offline-mode";
 import { safeRelayUrls } from "../../helpers/relay";
 import RelaySet from "../../classes/relay-set";
 import HoverLinkOverlay from "../../components/hover-link-overlay";
+import { useLocation } from "react-router-dom";
 
 const JapaneseRelays = safeRelayUrls([
   "wss://r.kojira.io",
@@ -46,8 +47,9 @@ function RelaySetCard({ label, read, write }: { label: string; read: Iterable<st
 export default function RequireReadRelays({ children }: PropsWithChildren) {
   const readRelays = useReadRelays();
   const offline = useSubject(offlineMode);
+  const location = useLocation();
 
-  if (readRelays.size === 0 && !offline)
+  if (readRelays.size === 0 && !offline && !location.pathname.startsWith("/relays"))
     return (
       <Flex direction="column" maxW="md" mx="auto" h="full" alignItems="center" justifyContent="center" gap="4">
         <Heading size="md">Looks like you don't have any relays setup</Heading>

src/views/relays/app/add-relay-form.tsx

@@ -1,8 +1,8 @@
 import { Button, Flex, FlexProps } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
 
-import { safeRelayUrl } from "../../helpers/relay";
-import { RelayUrlInput } from "../relay-url-input";
+import { safeRelayUrl } from "../../../helpers/relay";
+import { RelayUrlInput } from "../../../components/relay-url-input";
 
 export default function AddRelayForm({
   onSubmit,
@@ -23,8 +23,8 @@ export default function AddRelayForm({
 
   return (
     <Flex as="form" display="flex" gap="2" onSubmit={submit} {...props}>
-      <RelayUrlInput {...register("url")} placeholder="wss://relay.example.com" size="sm" borderRadius="md" />
-      <Button type="submit" size="sm">
+      <RelayUrlInput {...register("url")} placeholder="wss://relay.example.com" />
+      <Button type="submit" colorScheme="primary">
         Add
       </Button>
     </Flex>

src/views/relays/app/index.tsx

@@ -1,18 +1,86 @@
-import { Button, Flex, Heading } from "@chakra-ui/react";
+import { useMemo } from "react";
+import { Link as RouterLink } from "react-router-dom";
+import { CloseIcon } from "@chakra-ui/icons";
+
+import { Button, Flex, Heading, IconButton, Link } from "@chakra-ui/react";
 import useSubject from "../../../hooks/use-subject";
 import { offlineMode } from "../../../services/offline-mode";
 import WifiOff from "../../../components/icons/wifi-off";
 import Wifi from "../../../components/icons/wifi";
 import BackButton from "../../../components/back-button";
+import AddRelayForm from "./add-relay-form";
+import relayPoolService from "../../../services/relay-pool";
+import clientRelaysService from "../../../services/client-relays";
+import { RelayMode } from "../../../classes/relay";
+import { RelayFavicon } from "../../../components/relay-favicon";
+import UploadCloud01 from "../../../components/icons/upload-cloud-01";
+import RelaySet from "../../../classes/relay-set";
+import { useReadRelays, useWriteRelays } from "../../../hooks/use-client-relays";
+import useCurrentAccount from "../../../hooks/use-current-account";
+
+function RelayControl({ url }: { url: string }) {
+  const relay = useMemo(() => relayPoolService.requestRelay(url, false), [url]);
+  const status = useSubject(relay.status);
+  const writeRelays = useSubject(clientRelaysService.writeRelays);
+
+  let color = "gray";
+  switch (status) {
+    case WebSocket.OPEN:
+      color = "green";
+      break;
+    case WebSocket.CONNECTING:
+      color = "yellow";
+      break;
+    case WebSocket.CLOSED:
+      color = "red";
+      break;
+  }
+
+  const onChange = () => {
+    if (writeRelays.has(url)) clientRelaysService.removeRelay(url, RelayMode.WRITE);
+    else clientRelaysService.addRelay(url, RelayMode.WRITE);
+  };
+
+  return (
+    <Flex gap="2" alignItems="center" pl="2">
+      <RelayFavicon relay={url} size="xs" outline="2px solid" outlineColor={color} />
+      <Link as={RouterLink} to={`/r/${encodeURIComponent(url)}`} isTruncated>
+        {url}
+      </Link>
+      <IconButton
+        ml="auto"
+        aria-label="Toggle Write"
+        icon={<UploadCloud01 />}
+        size="sm"
+        variant={writeRelays.has(url) ? "solid" : "ghost"}
+        colorScheme={writeRelays.has(url) ? "green" : "gray"}
+        onClick={onChange}
+        title="Toggle Write"
+      />
+      <IconButton
+        aria-label="Remove Relay"
+        icon={<CloseIcon />}
+        size="sm"
+        colorScheme="red"
+        onClick={() => clientRelaysService.removeRelay(url, RelayMode.ALL)}
+      />
+    </Flex>
+  );
+}
 
 export default function AppRelays() {
+  const account = useCurrentAccount();
+  const readRelays = useReadRelays();
+  const writeRelays = useWriteRelays();
   const offline = useSubject(offlineMode);
 
+  const sorted = useMemo(() => RelaySet.from(readRelays, writeRelays).urls.sort(), [readRelays, writeRelays]);
+
   return (
     <Flex gap="2" direction="column" overflow="auto hidden" flex={1}>
       <Flex gap="2" alignItems="center">
         <BackButton hideFrom="lg" size="sm" />
-        <Heading size="md">App Relays</Heading>
+        <Heading size="lg">App Relays</Heading>
         <Button
           onClick={() => offlineMode.next(!offline)}
           leftIcon={offline ? <WifiOff /> : <Wifi />}
@@ -22,6 +90,15 @@ export default function AppRelays() {
           {offline ? "Offline" : "Online"}
         </Button>
       </Flex>
+
+      {sorted.map((url) => (
+        <RelayControl key={url} url={url} />
+      ))}
+      <AddRelayForm
+        onSubmit={(url) => {
+          clientRelaysService.addRelay(url, RelayMode.ALL);
+        }}
+      />
     </Flex>
   );
 }

src/views/relays/cache/index.tsx

@@ -74,9 +74,7 @@ export default function CacheRelayView() {
     <Flex gap="2" direction="column" flex={1}>
       <Flex gap="2" alignItems="center">
         <BackButton hideFrom="lg" size="sm" />
-        <Heading size="lg" my="1">
-          Cache Relay
-        </Heading>
+        <Heading size="lg">Cache Relay</Heading>
       </Flex>
       <InternalRelay />
       <NostrRelayTray />

src/views/relays/index.tsx

@@ -9,6 +9,8 @@ import { getListName } from "../../helpers/nostr/lists";
 import { getEventCoordinate } from "../../helpers/nostr/events";
 import { useBreakpointValue } from "../../providers/global/breakpoint-provider";
 import BackButton from "../../components/back-button";
+import Database01 from "../../components/icons/database-01";
+import { RelayIcon } from "../../components/icons";
 
 export default function RelaysView() {
   const account = useCurrentAccount();
@@ -19,7 +21,7 @@ export default function RelaysView() {
 
   const renderContent = () => {
     const nav = (
-      <Flex gap="2" direction="column" minW="xs" overflowY="auto" overflowX="hidden" w={vertical ? "full" : undefined}>
+      <Flex gap="2" direction="column" minW="60" overflowY="auto" overflowX="hidden" w={vertical ? "full" : undefined}>
         <Button
           as={RouterLink}
           variant="outline"
@@ -29,6 +31,7 @@ export default function RelaysView() {
               : undefined
           }
           to="/relays/app"
+          leftIcon={<RelayIcon />}
         >
           App Relays
         </Button>
@@ -37,6 +40,7 @@ export default function RelaysView() {
           variant="outline"
           colorScheme={location.pathname === "/relays/cache" ? "primary" : undefined}
           to="/relays/cache"
+          leftIcon={<Database01 />}
         >
           Cache Relay
         </Button>