From e627cddd24e8d46c49c635df699fd0badf3cc73c Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Tue, 7 Nov 2023 13:55:09 +0000
Subject: [PATCH] feat: relays cleanup

---
 packages/app/src/Element/Event/Note.css       |  1 -
 packages/app/src/Element/Relay/Relay.css      | 32 --------
 packages/app/src/Element/Relay/Relay.tsx      | 73 ++++++++++---------
 .../app/src/Element/Relay/RelaysMetadata.css  | 40 +---------
 .../app/src/Element/Relay/RelaysMetadata.tsx  | 19 +++--
 packages/app/src/Pages/settings/Relays.tsx    | 39 +++++-----
 6 files changed, 69 insertions(+), 135 deletions(-)

diff --git a/packages/app/src/Element/Event/Note.css b/packages/app/src/Element/Event/Note.css
index 353ef0da..5a4c8215 100644
--- a/packages/app/src/Element/Event/Note.css
+++ b/packages/app/src/Element/Event/Note.css
@@ -141,7 +141,6 @@
 
 .trash-icon {
   color: var(--error);
-  margin-right: auto;
 }
 
 .note-expand .body {
diff --git a/packages/app/src/Element/Relay/Relay.css b/packages/app/src/Element/Relay/Relay.css
index a61f3d99..23854ef1 100644
--- a/packages/app/src/Element/Relay/Relay.css
+++ b/packages/app/src/Element/Relay/Relay.css
@@ -1,8 +1,6 @@
 .relay {
-  margin-top: 10px;
   background-color: var(--gray-secondary);
   border-radius: 5px;
-  text-align: start;
   display: grid;
   grid-template-columns: min-content auto;
   overflow: hidden;
@@ -12,33 +10,3 @@
 .relay > div {
   padding: 5px;
 }
-
-.relay-extra {
-  padding: 5px;
-  margin: 0 5px;
-  background-color: var(--gray-tertiary);
-  border-radius: 0 0 5px 5px;
-  white-space: nowrap;
-  font-size: var(--font-size-small);
-}
-
-.icon-btn {
-  padding: 2px 10px;
-  border-radius: 10px;
-  background-color: var(--gray);
-  user-select: none;
-  color: var(--font-color);
-  display: inline-block;
-}
-
-.icon-btn:hover {
-  cursor: pointer;
-}
-
-.checkmark {
-  margin-left: 0.5em;
-  padding: 2px 10px;
-  background-color: var(--gray);
-  border-radius: 10px;
-  display: inline-block;
-}
diff --git a/packages/app/src/Element/Relay/Relay.tsx b/packages/app/src/Element/Relay/Relay.tsx
index 95930b6f..5549437c 100644
--- a/packages/app/src/Element/Relay/Relay.tsx
+++ b/packages/app/src/Element/Relay/Relay.tsx
@@ -1,18 +1,17 @@
 import "./Relay.css";
 import { useContext, useMemo } from "react";
-import { FormattedMessage } from "react-intl";
 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 "SnortUtils";
 import useLogin from "Hooks/useLogin";
-import { setRelays } from "Login";
-import Icon from "Icons/Icon";
-
-import messages from "../messages";
+import { removeRelay, setRelays } from "Login";
+import { RelayFavicon } from "./RelaysMetadata";
+import { AsyncIcon } from "Element/AsyncIcon";
 
 export interface RelayProps {
   addr: string;
@@ -42,48 +41,52 @@ export default function Relay(props: RelayProps) {
 
   return (
     <>
-      <div className={`relay w-max`}>
-        <div className={`flex ${state?.connected ? "bg-success" : "bg-error"}`}>
-          <Icon name="wifi" />
+      <div className="relay">
+        <div className={classNames("flex items-center", state?.connected ? "bg-success" : "bg-error")}>
+          <RelayFavicon url={props.addr} />
         </div>
-        <div className="grow flex-col">
-          <div className="flex mb10">
-            <b className="f-2">{name}</b>
-            <div className="f-1">
-              <FormattedMessage {...messages.Write} />
-              <span
-                className="checkmark"
+        <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,
                   })
-                }>
-                <Icon name={relaySettings.write ? "check" : "close"} size={12} />
-              </span>
-            </div>
-            <div className="f-1">
-              <FormattedMessage {...messages.Read} />
-              <span
-                className="checkmark"
+                }
+              />
+              <AsyncIcon
+                iconName="read"
+                iconSize={16}
+                className={classNames("button-icon-sm transparent", { active: relaySettings.read })}
                 onClick={() =>
                   configure({
                     write: relaySettings.write,
                     read: !relaySettings.read,
                   })
-                }>
-                <Icon name={relaySettings.read ? "check" : "close"} size={12} />
-              </span>
+                }
+              />
+              <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 className="flex">
-            <div className="grow"></div>
-            <div>
-              <span className="icon-btn" onClick={() => navigate(state?.id ?? "")}>
-                <Icon name="gear" size={12} />
-              </span>
-            </div>
-          </div>
+          )}
         </div>
       </div>
     </>
diff --git a/packages/app/src/Element/Relay/RelaysMetadata.css b/packages/app/src/Element/Relay/RelaysMetadata.css
index 982edc35..6640ea56 100644
--- a/packages/app/src/Element/Relay/RelaysMetadata.css
+++ b/packages/app/src/Element/Relay/RelaysMetadata.css
@@ -1,45 +1,9 @@
 .favicon {
   width: 21px;
   height: 21px;
-  border-radius: 100%;
-  margin-right: 12px;
+  max-width: unset;
 }
 
-.relay-card {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.relay-settings {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-}
-
-.relay-settings svg:not(:last-child) {
-  margin-right: 12px;
-}
-.relay-settings svg.enabled {
+.relay-active {
   color: var(--highlight);
 }
-.relay-settings svg.disabled {
-  opacity: 0.3;
-}
-
-@media (max-width: 520px) {
-  .relay-settings svg {
-    width: 16px;
-    height: 16px;
-  }
-}
-
-.relay-url {
-  font-size: 14px;
-}
-
-@media (min-width: 520px) {
-  .relay-url {
-    font-size: 16px;
-  }
-}
diff --git a/packages/app/src/Element/Relay/RelaysMetadata.tsx b/packages/app/src/Element/Relay/RelaysMetadata.tsx
index 5d83c5dc..c9ee02d2 100644
--- a/packages/app/src/Element/Relay/RelaysMetadata.tsx
+++ b/packages/app/src/Element/Relay/RelaysMetadata.tsx
@@ -5,14 +5,19 @@ import { useState } from "react";
 import { FullRelaySettings } from "@snort/system";
 import Icon from "Icons/Icon";
 
-const RelayFavicon = ({ url }: { url: string }) => {
+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="favicon" src={faviconUrl} onError={() => setFaviconUrl(Nostrich)} alt={`favicon for ${url}`} />
+    <img
+      className="circle favicon"
+      src={faviconUrl}
+      onError={() => setFaviconUrl(Nostrich)}
+      alt={`favicon for ${url}`}
+    />
   );
 };
 
@@ -25,12 +30,12 @@ const RelaysMetadata = ({ relays }: RelaysMetadataProps) => {
     <>
       {relays?.map(({ url, settings }) => {
         return (
-          <div key={url} className="card relay-card">
+          <div key={url} className="card flex g8">
             <RelayFavicon url={url} />
-            <code className="relay-url f-ellipsis">{url}</code>
-            <div className="relay-settings">
-              <Icon name="read" className={settings.read ? "enabled" : "disabled"} />
-              <Icon name="write" className={settings.write ? "enabled" : "disabled"} />
+            <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>
         );
diff --git a/packages/app/src/Pages/settings/Relays.tsx b/packages/app/src/Pages/settings/Relays.tsx
index d01be92e..b15641df 100644
--- a/packages/app/src/Pages/settings/Relays.tsx
+++ b/packages/app/src/Pages/settings/Relays.tsx
@@ -45,23 +45,21 @@ const RelaySettingsPage = () => {
 
   function addRelay() {
     return (
-      <>
+      <div className="flex flex-col g8">
         <h4>
           <FormattedMessage {...messages.AddRelays} />
         </h4>
-        <div className="flex mb10">
-          <input
-            type="text"
-            className="grow"
-            placeholder="wss://my-relay.com"
-            value={newRelay}
-            onChange={handleNewRelayChange}
-          />
-        </div>
-        <button className="secondary mb10" onClick={() => addNewRelay()}>
+        <input
+          type="text"
+          className="grow"
+          placeholder="wss://my-relay.com"
+          value={newRelay}
+          onChange={handleNewRelayChange}
+        />
+        <button className="secondary" onClick={() => addNewRelay()}>
           <FormattedMessage {...messages.Add} />
         </button>
-      </>
+      </div>
     );
   }
 
@@ -77,31 +75,28 @@ const RelaySettingsPage = () => {
   }
 
   return (
-    <>
+    <div className="flex flex-col g8">
       <h3>
         <FormattedMessage {...messages.Relays} />
       </h3>
-      <div className="flex flex-col mb10">
+      <div className="flex flex-col g8">
         {Object.keys(relays.item || {}).map(a => (
           <Relay addr={a} key={a} />
         ))}
       </div>
-      <div className="flex mt10">
-        <div className="grow"></div>
-        <AsyncButton type="button" onClick={() => saveRelays(system, publisher, relays.item)} disabled={login.readonly}>
-          <FormattedMessage {...messages.Save} />
-        </AsyncButton>
-      </div>
+      <AsyncButton type="button" onClick={() => saveRelays(system, publisher, relays.item)} disabled={login.readonly}>
+        <FormattedMessage {...messages.Save} />
+      </AsyncButton>
       {addRelay()}
       <h3>
         <FormattedMessage defaultMessage="Other Connections" />
       </h3>
-      <div className="flex flex-col mb10">
+      <div className="flex flex-col g8">
         {otherConnections.map(a => (
           <Relay addr={a.address} key={a.id} />
         ))}
       </div>
-    </>
+    </div>
   );
 };