move mailbox relays to relays view

src/app.tsx

@@ -68,8 +68,6 @@ import CommunityTrendingView from "./views/community/views/trending";
 
 import RelaysView from "./views/relays";
 import RelayView from "./views/relays/relay";
-import RelayReviewsView from "./views/relays/reviews";
-import PopularRelaysView from "./views/relays/popular";
 import BrowseRelaySetsView from "./views/relays/browse-sets";
 import UserDMsTab from "./views/user/dms";
 import DMTimelineView from "./views/tools/dm-timeline";
@@ -84,11 +82,10 @@ import LaunchpadView from "./views/launchpad";
 import VideosView from "./views/videos";
 import VideoDetailsView from "./views/videos/video";
 import BookmarksView from "./views/bookmarks";
-import MailboxesView from "./views/mailboxes";
-import RequireReadRelays from "./providers/route/require-read-relays";
 import CacheRelayView from "./views/relays/cache";
 import RelaySetView from "./views/relays/relay-set";
 import AppRelays from "./views/relays/app";
+import MailboxesView from "./views/relays/mailboxes";
 const TracksView = lazy(() => import("./views/tracks"));
 const UserTracksTab = lazy(() => import("./views/user/tracks"));
 const UserVideosTab = lazy(() => import("./views/user/videos"));
@@ -263,6 +260,7 @@ const router = createHashRouter([
           { path: "", element: <AppRelays /> },
           { path: "app", element: <AppRelays /> },
           { path: "cache", element: <CacheRelayView /> },
+          { path: "mailboxes", element: <MailboxesView /> },
           { path: "sets", element: <BrowseRelaySetsView /> },
           { path: ":id", element: <RelaySetView /> },
         ],
@@ -275,10 +273,6 @@ const router = createHashRouter([
           { path: "", element: <NotificationsView /> },
         ],
       },
-      {
-        path: "mailboxes",
-        children: [{ path: "", element: <MailboxesView /> }],
-      },
       {
         path: "videos",
         children: [

src/components/layout/nav-items.tsx

@@ -54,7 +54,6 @@ export default function NavItems() {
   else if (location.pathname.startsWith("/lists")) active = "lists";
   else if (location.pathname.startsWith("/communities")) active = "communities";
   else if (location.pathname.startsWith("/channels")) active = "channels";
-  else if (location.pathname.startsWith("/mailboxes")) active = "mailboxes";
   else if (location.pathname.startsWith("/c/")) active = "communities";
   else if (location.pathname.startsWith("/goals")) active = "goals";
   else if (location.pathname.startsWith("/badges")) active = "badges";
@@ -161,15 +160,6 @@ export default function NavItems() {
       >
         Relays
       </Button>
-      <Button
-        as={RouterLink}
-        to="/mailboxes"
-        leftIcon={<Mail02 boxSize={6} />}
-        colorScheme={active === "mailboxes" ? "primary" : undefined}
-        {...buttonProps}
-      >
-        Mailboxes
-      </Button>
       <Text position="relative" py="2" color="GrayText">
         Other Stuff
       </Text>

src/views/relays/index.tsx

@@ -1,6 +1,5 @@
-import { useState } from "react";
+import { Outlet, Link as RouterLink, useLocation } from "react-router-dom";
-import { Outlet, Link as RouterLink, useLocation, useMatch } from "react-router-dom";
+import { Button, Flex, Heading } from "@chakra-ui/react";
-import { Button, Divider, Flex, Heading, VStack } from "@chakra-ui/react";
 
 import VerticalPageLayout from "../../components/vertical-page-layout";
 import useCurrentAccount from "../../hooks/use-current-account";
@@ -8,9 +7,9 @@ import useUserRelaySets from "../../hooks/use-user-relay-sets";
 import { getListName } from "../../helpers/nostr/lists";
 import { getEventCoordinate } from "../../helpers/nostr/events";
 import { useBreakpointValue } from "../../providers/global/breakpoint-provider";
-import BackButton from "../../components/back-button";
 import Database01 from "../../components/icons/database-01";
 import { RelayIcon } from "../../components/icons";
+import Mail02 from "../../components/icons/mail-02";
 
 export default function RelaysView() {
   const account = useCurrentAccount();
@@ -31,7 +30,7 @@ export default function RelaysView() {
               : undefined
           }
           to="/relays/app"
-          leftIcon={<RelayIcon />}
+          leftIcon={<RelayIcon boxSize={6} />}
         >
           App Relays
         </Button>
@@ -40,10 +39,21 @@ export default function RelaysView() {
           variant="outline"
           colorScheme={location.pathname === "/relays/cache" ? "primary" : undefined}
           to="/relays/cache"
-          leftIcon={<Database01 />}
+          leftIcon={<Database01 boxSize={6} />}
         >
           Cache Relay
         </Button>
+        {account && (
+          <Button
+            variant="outline"
+            as={RouterLink}
+            to="/relays/mailboxes"
+            leftIcon={<Mail02 boxSize={6} />}
+            colorScheme={location.pathname === "/relays/mailboxes" ? "primary" : undefined}
+          >
+            Mailboxes
+          </Button>
+        )}
         {account && (
           <>
             <Heading size="sm" mt="2">

src/views/relays/mailboxes/index.tsx

@@ -13,22 +13,23 @@ import {
 import { CloseIcon } from "@chakra-ui/icons";
 import { Link as RouterLink } from "react-router-dom";
 
-import VerticalPageLayout from "../../components/vertical-page-layout";
+import VerticalPageLayout from "../../../components/vertical-page-layout";
-import RequireCurrentAccount from "../../providers/route/require-current-account";
+import RequireCurrentAccount from "../../../providers/route/require-current-account";
-import useUserMailboxes from "../../hooks/use-user-mailboxes";
+import useUserMailboxes from "../../../hooks/use-user-mailboxes";
-import useCurrentAccount from "../../hooks/use-current-account";
+import useCurrentAccount from "../../../hooks/use-current-account";
-import { InboxIcon } from "../../components/icons";
+import { InboxIcon } from "../../../components/icons";
-import { RelayUrlInput } from "../../components/relay-url-input";
+import { RelayUrlInput } from "../../../components/relay-url-input";
-import { RelayFavicon } from "../../components/relay-favicon";
+import { RelayFavicon } from "../../../components/relay-favicon";
-import { RelayMode } from "../../classes/relay";
+import { RelayMode } from "../../../classes/relay";
 import { useCallback } from "react";
-import { NostrEvent } from "../../types/nostr-event";
+import { NostrEvent } from "../../../types/nostr-event";
-import { addRelayModeToMailbox, removeRelayModeFromMailbox } from "../../helpers/nostr/mailbox";
+import { addRelayModeToMailbox, removeRelayModeFromMailbox } from "../../../helpers/nostr/mailbox";
-import useAsyncErrorHandler from "../../hooks/use-async-error-handler";
+import useAsyncErrorHandler from "../../../hooks/use-async-error-handler";
 import { useForm } from "react-hook-form";
-import { safeRelayUrl } from "../../helpers/relay";
+import { safeRelayUrl } from "../../../helpers/relay";
-import { usePublishEvent } from "../../providers/global/publish-provider";
+import { usePublishEvent } from "../../../providers/global/publish-provider";
-import { COMMON_CONTACT_RELAY } from "../../const";
+import { COMMON_CONTACT_RELAY } from "../../../const";
+import BackButton from "../../../components/back-button";
 
 function RelayLine({ relay, mode, list }: { relay: string; mode: RelayMode; list?: NostrEvent }) {
   const publish = usePublishEvent();
@@ -94,8 +95,11 @@ function MailboxesPage() {
   );
 
   return (
-    <VerticalPageLayout>
+    <Flex direction="column" gap="2">
-      <Heading>Mailboxes</Heading>
+      <Flex gap="2" alignItems="center">
+        <BackButton hideFrom="lg" size="sm" />
+        <Heading size="lg">Mailboxes</Heading>
+      </Flex>
       <Card maxW="lg">
         <CardHeader p="4" pb="2" display="flex" gap="2" alignItems="center">
           <InboxIcon boxSize={5} />
@@ -126,7 +130,7 @@ function MailboxesPage() {
           <AddRelayForm onSubmit={(r) => addRelay(r, RelayMode.WRITE)} />
         </CardFooter>
       </Card>
-    </VerticalPageLayout>
+    </Flex>
   );
 }
 

src/views/settings/index.tsx

@@ -45,7 +45,7 @@ export default function SettingsView() {
           <DatabaseSettings />
         </Accordion>
       </FormProvider>
-      <Flex gap="4" padding="4" alignItems="center">
+      <Flex gap="4" padding="4" alignItems="center" wrap="wrap">
         <Link isExternal href="https://github.com/hzrd149/nostrudel">
           <GithubIcon /> Github
         </Link>