add global button to relay list

src/views/home/global-tab.tsx

@@ -1,15 +1,26 @@
 import { Button, Flex, FormControl, FormLabel, Select, Spinner, Switch, useDisclosure } from "@chakra-ui/react";
 import moment from "moment";
 import { useState } from "react";
+import { useSearchParams } from "react-router-dom";
 import { Note } from "../../components/note";
+import { unique } from "../../helpers/array";
 import { isNote } from "../../helpers/nostr-event";
 import useSubject from "../../hooks/use-subject";
 import { useTimelineLoader } from "../../hooks/use-timeline-loader";
 import settings from "../../services/settings";
 
 export const GlobalTab = () => {
-  const availableRelays = useSubject(settings.relays);
-  const [selectedRelay, setSelectedRelay] = useState("");
+  const defaultRelays = useSubject(settings.relays);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const selectedRelay = searchParams.get("relay") ?? "";
+  const setSelectedRelay = (url: string) => {
+    if (url) {
+      setSearchParams({ relay: url });
+    } else setSearchParams({});
+  };
+
+  const availableRelays = unique([...defaultRelays, selectedRelay]).filter(Boolean);
+
   const { isOpen: showReplies, onToggle } = useDisclosure();
   const { events, loading, loadMore, loader } = useTimelineLoader(
     `global`,

src/views/settings/index.tsx

@@ -22,15 +22,16 @@ import {
   AccordionIcon,
 } from "@chakra-ui/react";
 import { SyntheticEvent, useState } from "react";
-import { useAsync } from "react-use";
-import { TrashIcon } from "../../components/icons";
+import { GlobalIcon, TrashIcon } from "../../components/icons";
 import { RelayStatus } from "./relay-status";
 import useSubject from "../../hooks/use-subject";
 import settings from "../../services/settings";
 import { clearData } from "../../services/db";
 import { RelayUrlInput } from "../../components/relay-url-input";
+import { useNavigate } from "react-router-dom";
 
 export const SettingsView = () => {
+  const navigate = useNavigate();
   const relays = useSubject(settings.relays);
   const [relayInputValue, setRelayInputValue] = useState("");
 
@@ -85,6 +86,13 @@ export const SettingsView = () => {
                         <RelayStatus url={url} />
                       </Td>
                       <Td isNumeric>
+                        <IconButton
+                          icon={<GlobalIcon />}
+                          onClick={() => navigate("/global?relay=" + url)}
+                          size="sm"
+                          aria-label="Global Feed"
+                          mr="2"
+                        />
                         <IconButton
                           icon={<TrashIcon />}
                           title="Remove Relay"

src/views/user/relays.tsx

@@ -1,13 +1,15 @@
 import { useCallback } from "react";
-import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Button, SkeletonText } from "@chakra-ui/react";
+import { SkeletonText, Text, Grid, Box, IconButton } from "@chakra-ui/react";
 import settings from "../../services/settings";
 import useSubject from "../../hooks/use-subject";
 import { useUserContacts } from "../../hooks/use-user-contacts";
-import { useOutletContext } from "react-router-dom";
+import { useNavigate, useOutletContext } from "react-router-dom";
+import { AddIcon, GlobalIcon } from "../../components/icons";
 
 const UserRelaysTab = () => {
   const { pubkey } = useOutletContext() as { pubkey: string };
   const contacts = useUserContacts(pubkey);
+  const navigate = useNavigate();
 
   const relays = useSubject(settings.relays);
   const addRelay = useCallback(
@@ -22,28 +24,27 @@ const UserRelaysTab = () => {
   }
 
   return (
-    <TableContainer>
-      <Table variant="simple">
-        <Thead>
-          <Tr>
-            <Th>Url</Th>
-            <Th>Action</Th>
-          </Tr>
-        </Thead>
-        <Tbody>
-          {Object.entries(contacts.relays).map(([relay, opts]) => (
-            <Tr key={relay}>
-              <Td>{relay}</Td>
-              <Td>
-                <Button onClick={() => addRelay(relay)} isDisabled={relays.includes(relay)}>
-                  Add Relay
-                </Button>
-              </Td>
-            </Tr>
-          ))}
-        </Tbody>
-      </Table>
-    </TableContainer>
+    <Grid templateColumns={{ base: "1fr", xl: "repeat(2, 1fr)" }} gap="2">
+      {Object.entries(contacts.relays).map(([url, opts]) => (
+        <Box key={url} display="flex" gap="2" alignItems="center">
+          <Text flex={1}>{url}</Text>
+          <IconButton
+            icon={<GlobalIcon />}
+            onClick={() => navigate("/global?relay=" + url)}
+            size="sm"
+            aria-label="Global Feed"
+          />
+          <IconButton
+            icon={<AddIcon />}
+            onClick={() => addRelay(url)}
+            isDisabled={relays.includes(url)}
+            size="sm"
+            aria-label="Add Relay"
+            mr="4"
+          />
+        </Box>
+      ))}
+    </Grid>
   );
 };