reorganize code into smaller files & dirs

packages/app/src/Components/Relay/Relay.css

@@ -0,0 +1,11 @@
+.relay {
+  border-radius: 5px;
+  display: grid;
+  grid-template-columns: min-content auto;
+  overflow: hidden;
+  font-size: var(--font-size-small);
+}
+
+.relay > div {
+  padding: 5px;
+}

packages/app/src/Components/Relay/Relay.tsx

@@ -0,0 +1,94 @@
+import "./Relay.css";
+import { useContext, useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import { RelaySettings } from "@snort/system";
+import { unixNowMs } from "@snort/shared";
+import classNames from "classnames";
+
+import useRelayState from "@/Feed/RelayState";
+import { SnortContext } from "@snort/system-react";
+import { getRelayName, unwrap } from "@/Utils";
+import useLogin from "@/Hooks/useLogin";
+import { removeRelay, setRelays } from "@/Utils/Login";
+import { RelayFavicon } from "./RelaysMetadata";
+import { AsyncIcon } from "@/Components/Button/AsyncIcon";
+
+export interface RelayProps {
+  addr: string;
+}
+
+export default function Relay(props: RelayProps) {
+  const navigate = useNavigate();
+  const system = useContext(SnortContext);
+  const login = useLogin();
+
+  const relaySettings = unwrap(
+    login.relays.item[props.addr] ?? system.Sockets.find(a => a.address === props.addr)?.settings ?? {},
+  );
+  const state = useRelayState(props.addr);
+  const name = useMemo(() => getRelayName(props.addr), [props.addr]);
+
+  function configure(o: RelaySettings) {
+    setRelays(
+      login,
+      {
+        ...login.relays.item,
+        [props.addr]: o,
+      },
+      unixNowMs(),
+    );
+  }
+
+  return (
+    <>
+      <div className="relay bg-dark">
+        <div className={classNames("flex items-center", state?.connected ? "bg-success" : "bg-error")}>
+          <RelayFavicon url={props.addr} />
+        </div>
+        <div className="flex flex-col g8">
+          <div>
+            <b>{name}</b>
+          </div>
+          {!state?.ephemeral && (
+            <div className="flex g8">
+              <AsyncIcon
+                iconName="write"
+                iconSize={16}
+                className={classNames("button-icon-sm transparent", { active: relaySettings.write })}
+                onClick={() =>
+                  configure({
+                    write: !relaySettings.write,
+                    read: relaySettings.read,
+                  })
+                }
+              />
+              <AsyncIcon
+                iconName="read"
+                iconSize={16}
+                className={classNames("button-icon-sm transparent", { active: relaySettings.read })}
+                onClick={() =>
+                  configure({
+                    write: relaySettings.write,
+                    read: !relaySettings.read,
+                  })
+                }
+              />
+              <AsyncIcon
+                iconName="trash"
+                iconSize={16}
+                className="button-icon-sm transparent trash-icon"
+                onClick={() => removeRelay(login, props.addr)}
+              />
+              <AsyncIcon
+                iconName="gear"
+                iconSize={16}
+                className="button-icon-sm transparent"
+                onClick={() => navigate(state?.id ?? "")}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

packages/app/src/Components/Relay/RelaysMetadata.css

@@ -0,0 +1,9 @@
+.favicon {
+  width: 21px;
+  height: 21px;
+  max-width: unset;
+}
+
+.relay-active {
+  color: var(--highlight);
+}

packages/app/src/Components/Relay/RelaysMetadata.tsx

@@ -0,0 +1,47 @@
+import "./RelaysMetadata.css";
+import Nostrich from "@/img/nostrich.webp";
+import { useState } from "react";
+
+import { FullRelaySettings } from "@snort/system";
+import Icon from "@/Components/Icons/Icon";
+
+export const RelayFavicon = ({ url }: { url: string }) => {
+  const cleanUrl = url
+    .replace(/^wss:\/\//, "https://")
+    .replace(/^ws:\/\//, "http://")
+    .replace(/\/$/, "");
+  const [faviconUrl, setFaviconUrl] = useState(`${cleanUrl}/favicon.ico`);
+  return (
+    <img
+      className="circle favicon"
+      src={faviconUrl}
+      onError={() => setFaviconUrl(Nostrich)}
+      alt={`favicon for ${url}`}
+    />
+  );
+};
+
+interface RelaysMetadataProps {
+  relays: FullRelaySettings[];
+}
+
+const RelaysMetadata = ({ relays }: RelaysMetadataProps) => {
+  return (
+    <>
+      {relays?.map(({ url, settings }) => {
+        return (
+          <div key={url} className="card flex g8">
+            <RelayFavicon url={url} />
+            <code className="grow f-ellipsis">{url}</code>
+            <div className="flex g8">
+              <Icon name="read" className={settings.read ? "relay-active" : "disabled"} />
+              <Icon name="write" className={settings.write ? "relay-active" : "disabled"} />
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default RelaysMetadata;