cleanup relay view layout

src/components/layout/desktop/side-nav.tsx

@@ -74,6 +74,9 @@ export default function DesktopSideNav({ ...props }: Omit<FlexProps, "children">
         left="0"
         bottom="0"
         top="0"
+        zIndex="modal"
+        overflowY="auto"
+        overflowX="hidden"
         {...props}
       >
         <IconButton

src/components/layout/mobile/nav-drawer.tsx

@@ -17,6 +17,8 @@ import useCurrentAccount from "../../../hooks/use-current-account";
 import NavItems from "../nav-items";
 import TaskManagerButtons from "../../legacy-layout/task-manager-buttons";
 import { ExpandedContext } from "../desktop/side-nav";
+import NavItem from "../nav-items/nav-item";
+import { SettingsIcon } from "../../icons";
 
 export default function NavDrawer({ ...props }: Omit<DrawerProps, "children">) {
   const account = useCurrentAccount();
@@ -42,6 +44,7 @@ export default function NavDrawer({ ...props }: Omit<DrawerProps, "children">) {
                 Sign in
               </Button>
             )}
+            <NavItem label="Settings" icon={SettingsIcon} to="/settings" />
             <TaskManagerButtons mt="auto" flexShrink={0} />
           </DrawerBody>
         </ExpandedContext.Provider>

src/components/layout/nav-items/nav-item.tsx

@@ -32,6 +32,7 @@ export default function NavItem({
         justifyContent="flex-start"
         colorScheme={colorScheme || location.pathname.startsWith(to) ? "primary" : undefined}
         to={to}
+        flexShrink={0}
       >
         {label}
       </Button>
@@ -46,6 +47,7 @@ export default function NavItem({
         fontSize="24"
         variant={variant || "ghost"}
         to={to}
+        flexShrink={0}
         colorScheme={colorScheme || location.pathname.startsWith(to) ? "primary" : undefined}
       />
     );

src/components/layout/presets/simple-nav-item.tsx

@@ -15,7 +15,7 @@ export default function SimpleNavItem({
       justifyContent="flex-start"
       {...props}
       variant="outline"
-      colorScheme={match ? "brand" : undefined}
+      colorScheme={match ? "primary" : undefined}
     >
       {children}
     </Button>

src/views/relays/app/index.tsx

@@ -1,17 +1,5 @@
 import { MouseEventHandler, useCallback, useMemo } from "react";
-import {
-  Button,
-  Card,
-  CardBody,
-  CardHeader,
-  Flex,
-  Heading,
-  Select,
-  SimpleGrid,
-  Switch,
-  Text,
-  Tooltip,
-} from "@chakra-ui/react";
+import { Button, Card, CardBody, CardHeader, Flex, Heading, SimpleGrid, Switch, Text, Tooltip } from "@chakra-ui/react";
 import { kinds } from "nostr-tools";
 import { WarningIcon } from "@chakra-ui/icons";
 import { useObservable } from "applesauce-react/hooks";
@@ -19,7 +7,6 @@ import { useObservable } from "applesauce-react/hooks";
 import { offlineMode } from "../../../services/offline-mode";
 import WifiOff from "../../../components/icons/wifi-off";
 import Wifi from "../../../components/icons/wifi";
-import BackButton from "../../../components/router/back-button";
 import AddRelayForm from "./add-relay-form";
 import clientRelaysService, { recommendedReadRelays, recommendedWriteRelays } from "../../../services/client-relays";
 import { RelayMode } from "../../../classes/relay";
@@ -35,9 +22,9 @@ import { safeRelayUrls } from "../../../helpers/relay";
 import HoverLinkOverlay from "../../../components/hover-link-overlay";
 import useReplaceableEvent from "../../../hooks/use-replaceable-event";
 import localSettings from "../../../services/local-settings";
-import { RelayAuthMode } from "../../../classes/relay-pool";
 import DefaultAuthModeSelect from "../../../components/settings/default-auth-mode-select";
 import HelpCircle from "../../../components/icons/help-circle";
+import SimpleView from "../../../components/layout/presets/simple-view";
 
 const JapaneseRelays = safeRelayUrls([
   "wss://r.kojira.io",
@@ -89,22 +76,19 @@ export default function AppRelays() {
   const proactivelyAuthenticate = useObservable(localSettings.proactivelyAuthenticate);
 
   return (
-    <Flex gap="2" direction="column" overflow="auto hidden" flex={1}>
-      <Flex gap="2" alignItems="center">
-        <BackButton hideFrom="lg" size="sm" />
-        <Heading size="lg" px={{ base: 0, lg: "2" }}>
-          App Relays
-        </Heading>
+    <SimpleView
+      title="App Relays"
+      actions={
         <Button
           onClick={() => offlineMode.next(!offline)}
           leftIcon={offline ? <WifiOff /> : <Wifi />}
           ml="auto"
-          size={{ base: "sm", lg: "md" }}
+          size="sm"
         >
           {offline ? "Offline" : "Online"}
         </Button>
-      </Flex>
-
+      }
+    >
       <Text fontStyle="italic" px="2" mt="-2">
         These relays are stored locally and are used for everything in the app
       </Text>
@@ -212,6 +196,6 @@ export default function AppRelays() {
         <RelaySetCard label="Popular Relays" read={recommendedReadRelays} write={recommendedWriteRelays} />
         <RelaySetCard label="Japanese relays" read={JapaneseRelays} write={JapaneseRelays} />
       </SimpleGrid>
-    </Flex>
+    </SimpleView>
   );
 }

src/views/relays/cache/database/index.tsx

@@ -7,6 +7,7 @@ import BackButton from "../../../../components/router/back-button";
 import { localRelay } from "../../../../services/local-relay";
 import WasmRelay from "../../../../services/wasm-relay";
 import MemoryRelay from "../../../../classes/memory-relay";
+import SimpleView from "../../../../components/layout/presets/simple-view";
 
 const MemoryDatabasePage = lazy(() => import("./memory"));
 const WasmDatabasePage = lazy(() => import("./wasm"));
@@ -26,16 +27,5 @@ export default function DatabaseView() {
   else if (localRelay instanceof CacheRelay) content = <InternalDatabasePage />;
   else if (localRelay instanceof MemoryRelay) content = <MemoryDatabasePage />;
 
-  return (
-    <Flex gap="2" direction="column" flex={1}>
-      <Flex gap="2" direction="column">
-        <Flex gap="2">
-          <BackButton hideFrom="lg" size="sm" />
-          <Heading size="lg">Database Tools</Heading>
-        </Flex>
-
-        {content}
-      </Flex>
-    </Flex>
-  );
+  return <SimpleView title="Event Cache">{content}</SimpleView>;
 }

src/views/relays/cache/index.tsx

@@ -11,16 +11,13 @@ import NostrRelayTrayCard from "./components/nostr-relay-tray-card";
 import HostedRelayCard from "./components/hosted-relay-card";
 import MemoryRelayCard from "./components/memory-relay-card";
 import NoRelayCard from "./components/no-relay-card";
+import SimpleView from "../../../components/layout/presets/simple-view";
 
 export default function CacheRelayView() {
   const showAdvanced = useDisclosure({ defaultIsOpen: localRelay?.url === ":none:" || localRelay?.url === ":memory:" });
 
   return (
-    <Flex gap="2" direction="column" flex={1}>
-      <Flex gap="2" alignItems="center">
-        <BackButton hideFrom="lg" size="sm" />
-        <Heading size="lg">Cache Relay</Heading>
-      </Flex>
+    <SimpleView title="Cache Relay">
       <Text fontStyle="italic" mt="-2" px={{ base: "2", lg: 0 }}>
         The cache relay is used to cache events locally so they can be loaded quickly
       </Text>
@@ -42,6 +39,6 @@ export default function CacheRelayView() {
           <NoRelayCard />
         </>
       )}
-    </Flex>
+    </SimpleView>
   );
 }

src/views/relays/contact-list/index.tsx

@@ -11,6 +11,7 @@ import useUserContactList from "../../../hooks/use-user-contact-list";
 import { EventTemplate } from "nostr-tools";
 import dayjs from "dayjs";
 import { usePublishEvent } from "../../../providers/global/publish-provider";
+import SimpleView from "../../../components/layout/presets/simple-view";
 
 export default function ContactListRelaysView() {
   const account = useCurrentAccount();
@@ -38,11 +39,10 @@ export default function ContactListRelaysView() {
   if (relays === undefined) return <Spinner />;
 
   return (
-    <Flex gap="2" direction="column" overflow="auto hidden" flex={1} px={{ base: "2", lg: 0 }}>
-      <Flex gap="2" alignItems="center">
-        <BackButton hideFrom="lg" size="sm" />
-        <Heading size="lg">Contact List Relays</Heading>
-        {relays && (
+    <SimpleView
+      title="Contact list relays"
+      actions={
+        relays && (
           <Button
             colorScheme="red"
             onClick={clearRelays}
@@ -53,9 +53,9 @@ export default function ContactListRelaysView() {
           >
             Clear Relays
           </Button>
-        )}
-      </Flex>
-
+        )
+      }
+    >
       <Text fontStyle="italic" mt="-2">
         Some apps store relays in your contacts list (kind-3)
         <br />
@@ -96,6 +96,6 @@ export default function ContactListRelaysView() {
           ))}
         </>
       )}
-    </Flex>
+    </SimpleView>
   );
 }

src/views/relays/index.tsx

@@ -1,5 +1,5 @@
 import { Suspense } from "react";
-import { Outlet, useLocation } from "react-router-dom";
+import { Outlet, useLocation, useMatch } from "react-router-dom";
 import { Flex, Spinner } from "@chakra-ui/react";
 
 import VerticalPageLayout from "../../components/vertical-page-layout";
@@ -15,6 +15,9 @@ import UserSquare from "../../components/icons/user-square";
 import Image01 from "../../components/icons/image-01";
 import Server05 from "../../components/icons/server-05";
 import SimpleNavItem from "../../components/layout/presets/simple-nav-item";
+import SimpleView from "../../components/layout/presets/simple-view";
+import { ErrorBoundary } from "../../components/error-boundary";
+import SimpleHeader from "../../components/layout/presets/simple-header";
 
 export default function RelaysView() {
   const account = useCurrentAccount();
@@ -23,78 +26,67 @@ export default function RelaysView() {
   const nip05 = useUserDNSIdentity(account?.pubkey);
   const kind3Relays = useUserContactRelays(account?.pubkey);
 
-  const location = useLocation();
+  const match = useMatch("/relays");
+  const isMobile = useBreakpointValue({ base: true, lg: false });
+  const showMenu = !isMobile || !!match;
 
-  const renderContent = () => {
-    const nav = (
-      <Flex gap="2" direction="column" minW="60" overflowY="auto" overflowX="hidden" w={vertical ? "full" : undefined}>
-        <SimpleNavItem to="/relays/app" leftIcon={<RelayIcon boxSize={6} />}>
-          App Relays
-        </SimpleNavItem>
-        <SimpleNavItem to="/relays/cache" leftIcon={<Database01 boxSize={6} />}>
-          Cache Relay
-        </SimpleNavItem>
-        {account && (
-          <>
-            <SimpleNavItem to="/relays/mailboxes" leftIcon={<Mail02 boxSize={6} />}>
-              Mailboxes
+  if (showMenu)
+    return (
+      <Flex overflow="hidden" flex={1} direction={{ base: "column", lg: "row" }}>
+        <Flex overflowY="auto" overflowX="hidden" h="full" minW="xs" direction="column">
+          <SimpleHeader title="Relays" />
+          <Flex direction="column" p="2" gap="2">
+            <SimpleNavItem to="/relays/app" leftIcon={<RelayIcon boxSize={6} />}>
+              App Relays
             </SimpleNavItem>
-            <SimpleNavItem to="/relays/media-servers" leftIcon={<Image01 boxSize={6} />}>
-              Media Servers
+            <SimpleNavItem to="/relays/cache" leftIcon={<Database01 boxSize={6} />}>
+              Cache Relay
             </SimpleNavItem>
-            <SimpleNavItem to="/relays/search" leftIcon={<SearchIcon boxSize={6} />}>
-              Search Relays
+            {account && (
+              <>
+                <SimpleNavItem to="/relays/mailboxes" leftIcon={<Mail02 boxSize={6} />}>
+                  Mailboxes
+                </SimpleNavItem>
+                <SimpleNavItem to="/relays/media-servers" leftIcon={<Image01 boxSize={6} />}>
+                  Media Servers
+                </SimpleNavItem>
+                <SimpleNavItem to="/relays/search" leftIcon={<SearchIcon boxSize={6} />}>
+                  Search Relays
+                </SimpleNavItem>
+              </>
+            )}
+            <SimpleNavItem to="/relays/webrtc" leftIcon={<Server05 boxSize={6} />}>
+              WebRTC Relays
             </SimpleNavItem>
-          </>
+            {nip05?.exists && (
+              <SimpleNavItem to="/relays/nip05" leftIcon={<AtIcon boxSize={6} />}>
+                NIP-05 Relays
+              </SimpleNavItem>
+            )}
+            {account && (
+              <>
+                <SimpleNavItem to="/relays/contacts" leftIcon={<UserSquare boxSize={6} />}>
+                  Contact List Relays
+                </SimpleNavItem>
+              </>
+            )}
+          </Flex>
+        </Flex>
+        {!isMobile && (
+          <Suspense fallback={<Spinner />}>
+            <ErrorBoundary>
+              <Outlet />
+            </ErrorBoundary>
+          </Suspense>
         )}
-        <SimpleNavItem to="/relays/webrtc" leftIcon={<Server05 boxSize={6} />}>
-          WebRTC Relays
-        </SimpleNavItem>
-        {nip05?.exists && (
-          <SimpleNavItem to="/relays/nip05" leftIcon={<AtIcon boxSize={6} />}>
-            NIP-05 Relays
-          </SimpleNavItem>
-        )}
-        {account && (
-          <>
-            <SimpleNavItem to="/relays/contacts" leftIcon={<UserSquare boxSize={6} />}>
-              Contact List Relays
-            </SimpleNavItem>
-          </>
-        )}
-        {/* {account && (
-          <>
-            <Heading size="sm" mt="2">
-              Relay Sets
-            </Heading>
-            {relaySets.map((set) => (
-              <Button
-                as={RouterLink}
-                variant="outline"
-                colorScheme={location.pathname.endsWith(getEventCoordinate(set)) ? "primary" : undefined}
-                to={`/relays/${getEventCoordinate(set)}`}
-              >
-                {getListName(set)}
-              </Button>
-            ))}
-          </>
-        )} */}
       </Flex>
     );
-
-    if (vertical) {
-      if (location.pathname !== "/relays") return <Outlet />;
-      else return nav;
-    } else
-      return (
-        <Flex gap="2" minH="100vh" overflow="hidden">
-          {nav}
-          <Suspense fallback={<Spinner />}>
-            <Outlet />
-          </Suspense>
-        </Flex>
-      );
-  };
-
-  return <VerticalPageLayout>{renderContent()}</VerticalPageLayout>;
+  else
+    return (
+      <Suspense fallback={<Spinner />}>
+        <ErrorBoundary>
+          <Outlet />
+        </ErrorBoundary>
+      </Suspense>
+    );
 }

src/views/relays/mailboxes/index.tsx

@@ -19,6 +19,7 @@ import AddRelayForm from "../app/add-relay-form";
 import DebugEventButton from "../../../components/debug-modal/debug-event-button";
 import useReplaceableEvent from "../../../hooks/use-replaceable-event";
 import { COMMON_CONTACT_RELAYS } from "../../../const";
+import SimpleView from "../../../components/layout/presets/simple-view";
 
 function RelayLine({ relay, mode, list }: { relay: string; mode: RelayMode; list?: NostrEvent }) {
   const publish = usePublishEvent();
@@ -61,12 +62,7 @@ function MailboxesPage() {
   );
 
   return (
-    <Flex gap="2" direction="column" overflow="auto hidden" flex={1} px="2">
-      <Flex gap="2" alignItems="center">
-        <BackButton hideFrom="lg" size="sm" />
-        <Heading size="lg">Mailboxes</Heading>
-        {event && <DebugEventButton event={event} size="sm" ml="auto" />}
-      </Flex>
+    <SimpleView title="Mailboxes" actions={event && <DebugEventButton event={event} size="sm" ml="auto" />}>
       <Text fontStyle="italic" mt="-2">
         Mailbox relays are a way for other users to find your events, or send you events. they are defined in{" "}
         <Link
@@ -106,7 +102,7 @@ function MailboxesPage() {
           <RelayLine key={url} relay={url} mode={RelayMode.WRITE} list={event ?? undefined} />
         ))}
       <AddRelayForm onSubmit={(r) => addRelay(r, RelayMode.WRITE)} />
-    </Flex>
+    </SimpleView>
   );
 }
 

src/views/relays/nip05/index.tsx

@@ -5,6 +5,7 @@ import { useUserDNSIdentity } from "../../../hooks/use-user-dns-identity";
 import { Link as RouterLink } from "react-router-dom";
 
 import { RelayFavicon } from "../../../components/relay-favicon";
+import SimpleView from "../../../components/layout/presets/simple-view";
 
 function RelayItem({ url }: { url: string }) {
   return (
@@ -22,12 +23,7 @@ export default function NIP05RelaysView() {
   const nip05 = useUserDNSIdentity(account?.pubkey);
 
   return (
-    <Flex gap="2" direction="column" overflow="auto hidden" flex={1} px={{ base: "2", lg: 0 }}>
-      <Flex gap="2" alignItems="center">
-        <BackButton hideFrom="lg" size="sm" />
-        <Heading size="lg">NIP-05 Relays</Heading>
-      </Flex>
-
+    <SimpleView title="NIP-05 Relays">
       <Text fontStyle="italic" mt="-2">
         These relays cant be modified by noStrudel, they must be set manually on your{" "}
         <Code>/.well-known/nostr.json</Code> file or by your identity provider
@@ -43,6 +39,6 @@ export default function NIP05RelaysView() {
       </Text>
 
       {nip05?.relays?.map((url) => <RelayItem key={url} url={url} />)}
-    </Flex>
+    </SimpleView>
   );
 }

src/views/relays/search/index.tsx

@@ -26,6 +26,7 @@ import { usePublishEvent } from "../../../providers/global/publish-provider";
 import { RelayFavicon } from "../../../components/relay-favicon";
 import AddRelayForm from "../app/add-relay-form";
 import { useRelayInfo } from "../../../hooks/use-relay-info";
+import SimpleView from "../../../components/layout/presets/simple-view";
 
 function RelayEntry({
   url,
@@ -116,13 +117,7 @@ export default function SearchRelaysView() {
   };
 
   return (
-    <Flex gap="2" direction="column" overflow="auto hidden" flex={1}>
-      <Flex gap="2" alignItems="center">
-        <BackButton hideFrom="lg" size="sm" />
-        <Heading size="lg" px={{ base: 0, lg: "2" }}>
-          Search Relays
-        </Heading>
-      </Flex>
+    <SimpleView title="Search Relays">
       <Text fontStyle="italic" px="2" mt="-2">
         These relays are used to search for users and content
       </Text>
@@ -161,6 +156,6 @@ export default function SearchRelaysView() {
       ))}
 
       <AddRelayForm onSubmit={(relay) => addRelay(relay)} supportedNips={[50]} />
-    </Flex>
+    </SimpleView>
   );
 }

src/views/relays/webrtc/connect.tsx

@@ -11,6 +11,7 @@ import UserAvatar from "../../../components/user/user-avatar";
 import UserName from "../../../components/user/user-name";
 import localSettings from "../../../services/local-settings";
 import useForceUpdate from "../../../hooks/use-force-update";
+import SimpleView from "../../../components/layout/presets/simple-view";
 
 export default function WebRtcConnectView() {
   const update = useForceUpdate();
@@ -41,12 +42,7 @@ export default function WebRtcConnectView() {
     .filter(({ pubkey }) => !webRtcRelaysService.broker.peers.has(pubkey));
 
   return (
-    <Flex gap="2" direction="column" overflow="auto hidden" flex={1} px={{ base: "2", lg: 0 }}>
-      <Flex gap="2" alignItems="center" wrap="wrap">
-        <BackButton hideFrom="lg" size="sm" />
-        <Heading size="lg">Connect to WebRTC Relay</Heading>
-      </Flex>
-
+    <SimpleView title="Connect to WebRTC Relay">
       <Text fontStyle="italic" mt="-2">
         Scan or paste the WebRTC Connection URI of the relay you wish to connect to
       </Text>
@@ -114,6 +110,6 @@ export default function WebRtcConnectView() {
           No connections requests
         </Alert>
       )}
-    </Flex>
+    </SimpleView>
   );
 }

src/views/relays/webrtc/index.tsx

@@ -7,6 +7,7 @@ import webRtcRelaysService from "../../../services/webrtc-relays";
 import { QrCodeIcon } from "../../../components/icons";
 import Connection from "./components/connection";
 import useForceUpdate from "../../../hooks/use-force-update";
+import SimpleView from "../../../components/layout/presets/simple-view";
 
 export default function WebRtcRelaysView() {
   const update = useForceUpdate();
@@ -22,11 +23,9 @@ export default function WebRtcRelaysView() {
   const unanswered = webRtcRelaysService.pendingIncoming.length;
 
   return (
-    <Flex gap="2" direction="column" overflow="auto hidden" flex={1} px={{ base: "2", lg: 0 }}>
-      <Flex gap="2" alignItems="center" wrap="wrap">
-        <BackButton hideFrom="lg" size="sm" />
-        <Heading size="lg">WebRTC Relays</Heading>
-
+    <SimpleView
+      title="WebRTC Relay"
+      actions={
         <ButtonGroup size="sm" ml="auto">
           <Button as={RouterLink} to="/relays/webrtc/pair" leftIcon={<QrCodeIcon />}>
             Pair{unanswered > 0 ? ` (${unanswered})` : ""}
@@ -35,8 +34,8 @@ export default function WebRtcRelaysView() {
             Connect
           </Button>
         </ButtonGroup>
-      </Flex>
-
+      }
+    >
       <Text fontStyle="italic" mt="-2">
         WebRTC Relays are temporary relays that can be accessed over{" "}
         <Link href="https://webrtc.org/" target="_blank" color="blue.500">
@@ -63,6 +62,6 @@ export default function WebRtcRelaysView() {
           No connections yet, use the "Invite" or "Connect" buttons to connect to peer
         </Alert>
       )}
-    </Flex>
+    </SimpleView>
   );
 }

src/views/relays/webrtc/pair.tsx

@@ -33,6 +33,7 @@ import { usePublishEvent } from "../../../providers/global/publish-provider";
 import useCurrentAccount from "../../../hooks/use-current-account";
 import useUserProfile from "../../../hooks/use-user-profile";
 import useForceUpdate from "../../../hooks/use-force-update";
+import SimpleView from "../../../components/layout/presets/simple-view";
 
 function NameForm() {
   const publish = usePublishEvent();
@@ -92,12 +93,7 @@ export default function WebRtcPairView() {
   const uri = "webrtc+nostr:" + npub;
 
   return (
-    <Flex gap="2" direction="column" overflow="auto hidden" flex={1} px={{ base: "2", lg: 0 }}>
-      <Flex gap="2" alignItems="center" wrap="wrap">
-        <BackButton hideFrom="lg" size="sm" />
-        <Heading size="lg">Pair with WebRTC relay</Heading>
-      </Flex>
-
+    <SimpleView title="Pair with WebRTC relay">
       <Text fontStyle="italic" mt="-2">
         Share this URI with other users to allow them to connect to your local relay
       </Text>
@@ -146,6 +142,6 @@ export default function WebRtcPairView() {
           No connections requests
         </Alert>
       )}
-    </Flex>
+    </SimpleView>
   );
 }

src/views/settings/index.tsx

@@ -30,7 +30,7 @@ export default function SettingsView() {
   const isMobile = useBreakpointValue({ base: true, lg: false });
   const showMenu = !isMobile || !!match;
 
-  if (showMenu) {
+  if (showMenu)
     return (
       <Flex overflow="hidden" flex={1} direction={{ base: "column", lg: "row" }}>
         <Flex overflowY="auto" overflowX="hidden" h="full" minW="xs" direction="column">
@@ -108,13 +108,12 @@ export default function SettingsView() {
         )}
       </Flex>
     );
-  }
-
-  return (
-    <Suspense fallback={<Spinner />}>
-      <ErrorBoundary>
-        <Outlet />
-      </ErrorBoundary>
-    </Suspense>
-  );
+  else
+    return (
+      <Suspense fallback={<Spinner />}>
+        <ErrorBoundary>
+          <Outlet />
+        </ErrorBoundary>
+      </Suspense>
+    );
 }