cleanup sidenav

.changeset/nervous-pigs-judge.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Cleanup sidenav

src/components/connected-relays.tsx

@@ -17,6 +17,7 @@ import {
   Tr,
   Th,
   Flex,
+  ButtonProps,
 } from "@chakra-ui/react";
 import relayPoolService from "../services/relay-pool";
 import { useInterval } from "react-use";
@@ -27,7 +28,7 @@ import { RelayFavicon } from "./relay-favicon";
 import relayScoreboardService from "../services/relay-scoreboard";
 import { RelayScoreBreakdown } from "./relay-score-breakdown";
 
-export const ConnectedRelays = () => {
+export const ConnectedRelays = ({ ...props }: Omit<ButtonProps, "children">) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [relays, setRelays] = useState<Relay[]>(relayPoolService.getRelays());
   const sortedRelays = useMemo(() => relayScoreboardService.getRankedRelays(relays.map((r) => r.url)), [relays]);
@@ -40,8 +41,8 @@ export const ConnectedRelays = () => {
 
   return (
     <>
-      <Button variant="link" onClick={onOpen} leftIcon={<RelayIcon />}>
-        {connected.length} relays connected
+      <Button onClick={onOpen} leftIcon={<RelayIcon />} {...props}>
+        connected to {connected.length} relays
       </Button>
       <Modal isOpen={isOpen} onClose={onClose} size="5xl">
         <ModalOverlay />

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

@@ -1,12 +1,12 @@
+import { useContext } from "react";
 import { Avatar, Button, Flex, FlexProps, Heading, IconButton, LinkOverlay, Text } from "@chakra-ui/react";
 import { Link as RouterLink } from "react-router-dom";
+
 import { useCurrentAccount } from "../../hooks/use-current-account";
 import accountService from "../../services/account";
-import { ConnectedRelays } from "../connected-relays";
 import { EditIcon, LogoutIcon } from "../icons";
-import ProfileLink from "./profile-link";
+import ProfileButton from "./profile-button";
 import AccountSwitcher from "./account-switcher";
-import { useContext } from "react";
 import { PostModalContext } from "../../providers/post-modal-provider";
 import PublishLog from "../publish-log";
 import NavItems from "./nav-items";
@@ -35,23 +35,38 @@ export default function DesktopSideNav(props: Omit<FlexProps, "children">) {
           <Heading size="md">noStrudel</Heading>
         </Flex>
         <Flex gap="2" overflow="hidden">
-          <ProfileLink />
-          <IconButton
-            icon={<EditIcon />}
-            aria-label="New note"
-            title="New note"
-            w="3rem"
-            h="3rem"
-            fontSize="1.5rem"
-            colorScheme="brand"
-            onClick={() => openModal()}
-            flexShrink={0}
-          />
+          {account ? (
+            <>
+              <ProfileButton />
+              <IconButton
+                icon={<EditIcon />}
+                aria-label="New note"
+                title="New note"
+                w="3rem"
+                h="3rem"
+                fontSize="1.5rem"
+                colorScheme="brand"
+                onClick={() => openModal()}
+                flexShrink={0}
+              />
+            </>
+          ) : (
+            <Button as={RouterLink} to="/login" state={{ from: location.pathname }} colorScheme="brand" w="full">
+              Login
+            </Button>
+          )}
         </Flex>
         <AccountSwitcher />
         <NavItems />
         {account && (
-          <Button onClick={() => accountService.logout()} leftIcon={<LogoutIcon />} justifyContent="flex-start">
+          <Button
+            onClick={() => accountService.logout()}
+            leftIcon={<LogoutIcon />}
+            variant="link"
+            justifyContent="flex-start"
+            pl="2"
+            py="2"
+          >
             Logout
           </Button>
         )}
@@ -60,9 +75,8 @@ export default function DesktopSideNav(props: Omit<FlexProps, "children">) {
             Readonly Mode
           </Text>
         )}
-        <ConnectedRelays />
       </Flex>
-      <PublishLog overflowY="auto" minH="15rem" />
+      <PublishLog overflowY="auto" minH="15rem" my="4" />
     </Flex>
   );
 }

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

@@ -13,7 +13,6 @@ import {
 } from "@chakra-ui/react";
 import { Link as RouterLink } from "react-router-dom";
 
-import { ConnectedRelays } from "../connected-relays";
 import { LogoutIcon } from "../icons";
 import { UserAvatar } from "../user-avatar";
 import { UserLink } from "../user-link";
@@ -44,19 +43,26 @@ export default function MobileSideDrawer({ ...props }: Omit<DrawerProps, "childr
           )}
         </DrawerHeader>
         <DrawerBody padding={0} overflowY="auto" overflowX="hidden">
-          <AccountSwitcher />
+          {account && <AccountSwitcher />}
           <Flex direction="column" gap="2" padding="2">
-            <NavItems isInDrawer />
-            {account ? (
-              <Button onClick={() => accountService.logout()} leftIcon={<LogoutIcon />} justifyContent="flex-start">
-                Logout
-              </Button>
-            ) : (
+            {!account && (
               <Button as={RouterLink} to="/login" colorScheme="brand">
                 Login
               </Button>
             )}
-            <ConnectedRelays />
+            <NavItems />
+            {account && (
+              <Button
+                onClick={() => accountService.logout()}
+                leftIcon={<LogoutIcon />}
+                justifyContent="flex-start"
+                variant="link"
+                pl="2"
+                py="2"
+              >
+                Logout
+              </Button>
+            )}
           </Flex>
         </DrawerBody>
       </DrawerContent>

src/components/layout/nav-items.tsx

@@ -1,5 +1,5 @@
-import { AbsoluteCenter, Box, Button, Divider } from "@chakra-ui/react";
-import { useNavigate } from "react-router-dom";
+import { AbsoluteCenter, Box, Button, ButtonProps, Divider, Text } from "@chakra-ui/react";
+import { useLoaderData, useLocation, useNavigate } from "react-router-dom";
 import {
   BadgeIcon,
   ChatIcon,
@@ -14,56 +14,138 @@ import {
   SettingsIcon,
   ToolsIcon,
 } from "../icons";
+import { useCurrentAccount } from "../../hooks/use-current-account";
 
-export default function NavItems({ isInDrawer = false }: { isInDrawer?: boolean }) {
+export default function NavItems() {
   const navigate = useNavigate();
+  const location = useLocation();
+  const account = useCurrentAccount();
+
+  const buttonProps: ButtonProps = {
+    py: "2",
+    pl: "2",
+    justifyContent: "flex-start",
+    variant: "link",
+  };
+
+  let active = "notes";
+  if (location.pathname.startsWith("/notifications")) active = "notifications";
+  else if (location.pathname.startsWith("/dm")) active = "dm";
+  else if (location.pathname.startsWith("/streams")) active = "streams";
+  else if (location.pathname.startsWith("/relays")) active = "relays";
+  else if (location.pathname.startsWith("/lists")) active = "lists";
+  else if (location.pathname.startsWith("/goals")) active = "goals";
+  else if (location.pathname.startsWith("/badges")) active = "badges";
+  else if (location.pathname.startsWith("/emojis")) active = "emojis";
+  else if (location.pathname.startsWith("/settings")) active = "settings";
+  else if (location.pathname.startsWith("/tools")) active = "tools";
+  else if (location.pathname.startsWith("/search")) active = "search";
+  else if (location.pathname.startsWith("/t/")) active = "search";
 
   return (
     <>
-      <Button onClick={() => navigate("/")} leftIcon={<FeedIcon />} justifyContent="flex-start">
+      <Button
+        onClick={() => navigate("/")}
+        leftIcon={<FeedIcon />}
+        colorScheme={active === "notes" ? "brand" : undefined}
+        {...buttonProps}
+      >
         Notes
       </Button>
-      <Button onClick={() => navigate("/notifications")} leftIcon={<NotificationIcon />} justifyContent="flex-start">
-        Notifications
-      </Button>
-      <Button onClick={() => navigate("/dm")} leftIcon={<ChatIcon />} justifyContent="flex-start">
-        Messages
-      </Button>
-      <Button onClick={() => navigate("/search")} leftIcon={<SearchIcon />} justifyContent="flex-start">
+      {account && (
+        <>
+          <Button
+            onClick={() => navigate("/notifications")}
+            leftIcon={<NotificationIcon />}
+            colorScheme={active === "notifications" ? "brand" : undefined}
+            {...buttonProps}
+          >
+            Notifications
+          </Button>
+          <Button
+            onClick={() => navigate("/dm")}
+            leftIcon={<ChatIcon />}
+            colorScheme={active === "dm" ? "brand" : undefined}
+            {...buttonProps}
+          >
+            Messages
+          </Button>
+        </>
+      )}
+      <Button
+        onClick={() => navigate("/search")}
+        leftIcon={<SearchIcon />}
+        colorScheme={active === "search" ? "brand" : undefined}
+        {...buttonProps}
+      >
         Search
       </Button>
-      <Button onClick={() => navigate("/relays")} leftIcon={<RelayIcon />} justifyContent="flex-start">
+      <Button
+        onClick={() => navigate("/relays")}
+        leftIcon={<RelayIcon />}
+        colorScheme={active === "relays" ? "brand" : undefined}
+        {...buttonProps}
+      >
         Relays
       </Button>
-      <Box position="relative" py="4">
-        <Divider />
-        <AbsoluteCenter
-          backgroundColor={isInDrawer ? "var(--drawer-bg)" : "var(--chakra-colors-chakra-body-bg)"}
-          px="2"
-        >
-          Other Stuff
-        </AbsoluteCenter>
-      </Box>
-      <Button onClick={() => navigate("/streams")} leftIcon={<LiveStreamIcon />} justifyContent="flex-start">
+      <Text position="relative" py="2" color="GrayText">
+        Other Stuff
+      </Text>
+      <Button
+        onClick={() => navigate("/streams")}
+        leftIcon={<LiveStreamIcon />}
+        colorScheme={active === "streams" ? "brand" : undefined}
+        {...buttonProps}
+      >
         Streams
       </Button>
-      <Button onClick={() => navigate("/lists")} leftIcon={<ListIcon />} justifyContent="flex-start">
+      <Button
+        onClick={() => navigate("/lists")}
+        leftIcon={<ListIcon />}
+        colorScheme={active === "lists" ? "brand" : undefined}
+        {...buttonProps}
+      >
         Lists
       </Button>
-      <Button onClick={() => navigate("/goals")} leftIcon={<GoalIcon />} justifyContent="flex-start">
+      <Button
+        onClick={() => navigate("/goals")}
+        leftIcon={<GoalIcon />}
+        colorScheme={active === "goals" ? "brand" : undefined}
+        {...buttonProps}
+      >
         Goals
       </Button>
-      <Button onClick={() => navigate("/badges")} leftIcon={<BadgeIcon />} justifyContent="flex-start">
+      <Button
+        onClick={() => navigate("/badges")}
+        leftIcon={<BadgeIcon />}
+        colorScheme={active === "badges" ? "brand" : undefined}
+        {...buttonProps}
+      >
         Badges
       </Button>
-      <Button onClick={() => navigate("/emojis")} leftIcon={<EmojiIcon />} justifyContent="flex-start">
+      <Button
+        onClick={() => navigate("/emojis")}
+        leftIcon={<EmojiIcon />}
+        colorScheme={active === "emojis" ? "brand" : undefined}
+        {...buttonProps}
+      >
         Emojis
       </Button>
-      <Button onClick={() => navigate("/tools")} leftIcon={<ToolsIcon />} justifyContent="flex-start">
+      <Button
+        onClick={() => navigate("/tools")}
+        leftIcon={<ToolsIcon />}
+        colorScheme={active === "tools" ? "brand" : undefined}
+        {...buttonProps}
+      >
         Tools
       </Button>
       <Divider my="2" />
-      <Button onClick={() => navigate("/settings")} leftIcon={<SettingsIcon />} justifyContent="flex-start">
+      <Button
+        onClick={() => navigate("/settings")}
+        leftIcon={<SettingsIcon />}
+        colorScheme={active === "settings" ? "brand" : undefined}
+        {...buttonProps}
+      >
         Settings
       </Button>
     </>

src/components/layout/profile-button.tsx

@@ -1,5 +1,5 @@
-import { Box, Button, ButtonProps, LinkBox, LinkOverlay } from "@chakra-ui/react";
-import { Link as RouterLink, useLocation } from "react-router-dom";
+import { LinkBox, LinkOverlay } from "@chakra-ui/react";
+import { Link as RouterLink } from "react-router-dom";
 import { nip19 } from "nostr-tools";
 
 import { UserAvatar } from "../user-avatar";
@@ -7,7 +7,7 @@ import { useCurrentAccount } from "../../hooks/use-current-account";
 import { useUserMetadata } from "../../hooks/use-user-metadata";
 import { getUserDisplayName } from "../../helpers/user-metadata";
 
-function ProfileButton() {
+export default function ProfileButton() {
   const account = useCurrentAccount()!;
   const metadata = useUserMetadata(account.pubkey);
 
@@ -37,16 +37,3 @@ function ProfileButton() {
     </LinkBox>
   );
 }
-
-export default function ProfileLink() {
-  const account = useCurrentAccount();
-  const location = useLocation();
-
-  if (account) return <ProfileButton />;
-
-  return (
-    <Button as={RouterLink} to="/login" state={{ from: location.pathname }} colorScheme="brand" isTruncated>
-      Login
-    </Button>
-  );
-}

src/views/badges/index.tsx

@@ -1,11 +1,8 @@
-import { Button, Flex, Heading, Image, Link, SimpleGrid, Spacer, useDisclosure } from "@chakra-ui/react";
-import { Link as RouterLink } from "react-router-dom";
+import { Button, Flex, Image, Link, Spacer } from "@chakra-ui/react";
+import { Navigate, Link as RouterLink } from "react-router-dom";
 
 import { useCurrentAccount } from "../../hooks/use-current-account";
 import { ExternalLinkIcon } from "../../components/icons";
-import RequireCurrentAccount from "../../providers/require-current-account";
-import BadgeCard from "./components/badge-card";
-import { getEventUID } from "../../helpers/nostr/events";
 import VerticalPageLayout from "../../components/vertical-page-layout";
 
 function BadgesPage() {
@@ -33,9 +30,6 @@ function BadgesPage() {
 }
 
 export default function BadgesView() {
-  return (
-    <RequireCurrentAccount>
-      <BadgesPage />
-    </RequireCurrentAccount>
-  );
+  const account = useCurrentAccount();
+  return account ? <BadgesPage /> : <Navigate to="/lists/browse" />;
 }

src/views/lists/index.tsx

@@ -1,10 +1,9 @@
 import { Button, Divider, Flex, Heading, Image, Link, SimpleGrid, Spacer, useDisclosure } from "@chakra-ui/react";
-import { useNavigate, Link as RouterLink } from "react-router-dom";
+import { useNavigate, Link as RouterLink, Navigate } from "react-router-dom";
 import { Kind } from "nostr-tools";
 
 import { useCurrentAccount } from "../../hooks/use-current-account";
 import { ExternalLinkIcon, PlusCircleIcon } from "../../components/icons";
-import RequireCurrentAccount from "../../providers/require-current-account";
 import ListCard from "./components/list-card";
 import { getEventUID } from "../../helpers/nostr/events";
 import useUserLists from "../../hooks/use-user-lists";
@@ -98,9 +97,6 @@ function ListsPage() {
 }
 
 export default function ListsView() {
-  return (
-    <RequireCurrentAccount>
-      <ListsPage />
-    </RequireCurrentAccount>
-  );
+  const account = useCurrentAccount();
+  return account ? <ListsPage /> : <Navigate to="/lists/browse" />;
 }

src/views/map/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Link as RouterLink, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { Box, Button, Flex } from "@chakra-ui/react";
 import { Kind } from "nostr-tools";
 import ngeohash from "ngeohash";
@@ -82,6 +82,7 @@ function useEventMarkers(events: NostrEvent[], map?: L.Map, onClick?: (event: No
 }
 
 export default function MapView() {
+  const navigate = useNavigate();
   const ref = useRef<HTMLDivElement | null>(null);
   const [map, setMap] = useState<L.Map>();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -152,7 +153,7 @@ export default function MapView() {
     <Flex overflow={{ lg: "hidden" }} h={{ lg: "full" }} direction={{ base: "column-reverse", lg: "row" }}>
       <Flex w={{ base: "full", lg: "xl" }} direction="column" p="2" gap="2">
         <Flex gap="2">
-          <Button as={RouterLink} to="/" flexShrink={0}>
+          <Button flexShrink={0} onClick={() => navigate(-1)}>
             Back
           </Button>
           <Button colorScheme="brand" onClick={setCellsFromMap} flex={1}>

src/views/tools/index.tsx

@@ -2,6 +2,7 @@ import { Button, Flex, Heading, Image, Link } from "@chakra-ui/react";
 import { Link as RouterLink } from "react-router-dom";
 import { ExternalLinkIcon, MapIcon, ToolsIcon } from "../../components/icons";
 import VerticalPageLayout from "../../components/vertical-page-layout";
+import { ConnectedRelays } from "../../components/connected-relays";
 
 export default function ToolsHomeView() {
   return (
@@ -16,6 +17,7 @@ export default function ToolsHomeView() {
         <Button as={RouterLink} to="/map" leftIcon={<MapIcon />}>
           Map
         </Button>
+        <ConnectedRelays />
         <Button
           as={Link}
           href="https://w3.do/"