refactor: use icon component

public/icons.svg

@@ -57,5 +57,21 @@
     <symbol id="plus" viewBox="0 0 24 24" fill="none">
       <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
     </symbol>
+    <symbol id="toggle-off" viewBox="0 0 24 24" fill="none">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8 5C4.13401 5 1 8.13401 1 12C1 15.866 4.13401 19 8 19H16C19.866 19 23 15.866 23 12C23 8.13401 19.866 5 16 5H8ZM12 12C12 14.2091 10.2091 16 8 16C5.79086 16 4 14.2091 4 12C4 9.79086 5.79086 8 8 8C10.2091 8 12 9.79086 12 12Z"
+        fill="currentColor"
+      />
+    </symbol>
+    <symbol id="toggle-on" viewBox="0 0 24 24" fill="none">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16 5C19.866 5 23 8.13401 23 12C23 15.866 19.866 19 16 19H8C4.13401 19 1 15.866 1 12C1 8.13401 4.13401 5 8 5H16ZM12 12C12 14.2091 13.7909 16 16 16C18.2091 16 20 14.2091 20 12C20 9.79086 18.2091 8 16 8C13.7909 8 12 9.79086 12 12Z"
+        fill="currentColor"
+      />
+    </symbol>
   </defs>
 </svg>

src/element/toggle.tsx

@@ -1,42 +1,17 @@
 import * as BaseToggle from "@radix-ui/react-toggle";
 import "./toggle.css";
+import { Icon } from "element/icon";
 
 interface ToggleProps {
   label: string;
 }
 
-function ToggleLeft(props) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8 5C4.13401 5 1 8.13401 1 12C1 15.866 4.13401 19 8 19H16C19.866 19 23 15.866 23 12C23 8.13401 19.866 5 16 5H8ZM12 12C12 14.2091 10.2091 16 8 16C5.79086 16 4 14.2091 4 12C4 9.79086 5.79086 8 8 8C10.2091 8 12 9.79086 12 12Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
-function ToggleRight(props) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M16 5C19.866 5 23 8.13401 23 12C23 15.866 19.866 19 16 19H8C4.13401 19 1 15.866 1 12C1 8.13401 4.13401 5 8 5H16ZM12 12C12 14.2091 13.7909 16 16 16C18.2091 16 20 14.2091 20 12C20 9.79086 18.2091 8 16 8C13.7909 8 12 9.79086 12 12Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
 export function Toggle({ label, text, ...rest }: ToggleProps) {
   const { pressed } = rest;
   return (
     <div className="toggle-container">
       <BaseToggle.Root className="toggle" aria-label={label} {...rest}>
-        {pressed ? <ToggleRight /> : <ToggleLeft />}
+        {pressed ? <Icon name="toggle-on" /> : <Icon name="toggle-off" />}
       </BaseToggle.Root>
       <span className="toggle-text">{text}</span>
     </div>

src/hooks/follows.ts

@@ -18,9 +18,9 @@ export default function useFollows(pubkey: string, leaveOpen = false) {
   const { data } = useRequestBuilder<ReplaceableNoteStore>(
     System,
     ReplaceableNoteStore,
-    sub
+    sub,
   );
 
-  const relays = JSON.parse(data?.content ?? "{}");
+  const relays = JSON.parse(data?.content.length > 0 ? data?.content : "{}");
-  return data ? { tags: data.tags, relays } : null
+  return data ? { tags: data.tags, relays } : null;
 }