Clean up navigation menu

.changeset/smooth-kings-retire.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Clean up navigation menu

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

@@ -1,29 +1,17 @@
-import { SettingsIcon } from "@chakra-ui/icons";
+import { Avatar, Button, Flex, FlexProps, Heading, IconButton, LinkOverlay, Text } from "@chakra-ui/react";
-import { Avatar, Button, Flex, FlexProps, Heading, IconButton, LinkOverlay, Text, VStack } from "@chakra-ui/react";
+import { Link as RouterLink } from "react-router-dom";
-import { Link as RouterLink, useNavigate } from "react-router-dom";
 import { useCurrentAccount } from "../../hooks/use-current-account";
 import accountService from "../../services/account";
 import { ConnectedRelays } from "../connected-relays";
-import {
+import { EditIcon, LogoutIcon } from "../icons";
-  ChatIcon,
-  EditIcon,
-  FeedIcon,
-  LiveStreamIcon,
-  LogoutIcon,
-  MapIcon,
-  NotificationIcon,
-  ProfileIcon,
-  RelayIcon,
-  SearchIcon,
-} from "../icons";
 import ProfileLink from "./profile-link";
 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";
 
 export default function DesktopSideNav(props: Omit<FlexProps, "children">) {
-  const navigate = useNavigate();
   const account = useCurrentAccount();
   const { openModal } = useContext(PostModalContext);
 
@@ -48,35 +36,9 @@ export default function DesktopSideNav(props: Omit<FlexProps, "children">) {
         </Flex>
         <ProfileLink />
         <AccountSwitcher />
-        <Button onClick={() => navigate("/")} leftIcon={<FeedIcon />}>
+        <NavItems />
-          Home
-        </Button>
-        <Button onClick={() => navigate("/notifications")} leftIcon={<NotificationIcon />}>
-          Notifications
-        </Button>
-        <Button onClick={() => navigate("/dm")} leftIcon={<ChatIcon />}>
-          Messages
-        </Button>
-        <Button onClick={() => navigate("/search")} leftIcon={<SearchIcon />}>
-          Search
-        </Button>
-        <Button onClick={() => navigate("/streams")} leftIcon={<LiveStreamIcon />}>
-          Streams
-        </Button>
-        <Button onClick={() => navigate("/map")} leftIcon={<MapIcon />}>
-          Map
-        </Button>
-        <Button onClick={() => navigate("/relays")} leftIcon={<RelayIcon />}>
-          Relays
-        </Button>
-        <Button onClick={() => navigate("/profile")} leftIcon={<ProfileIcon />}>
-          Profile
-        </Button>
-        <Button onClick={() => navigate("/settings")} leftIcon={<SettingsIcon />}>
-          Settings
-        </Button>
         {account && (
-          <Button onClick={() => accountService.logout()} leftIcon={<LogoutIcon />}>
+          <Button onClick={() => accountService.logout()} leftIcon={<LogoutIcon />} justifyContent="flex-start">
             Logout
           </Button>
         )}

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

@@ -11,26 +11,18 @@ import {
   Flex,
   Text,
 } from "@chakra-ui/react";
-import { Link as RouterLink, useNavigate } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom";
+
 import { ConnectedRelays } from "../connected-relays";
-import {
+import { LogoutIcon } from "../icons";
-  HomeIcon,
-  LiveStreamIcon,
-  LogoutIcon,
-  MapIcon,
-  ProfileIcon,
-  RelayIcon,
-  SearchIcon,
-  SettingsIcon,
-} from "../icons";
 import { UserAvatar } from "../user-avatar";
 import { UserLink } from "../user-link";
 import AccountSwitcher from "./account-switcher";
 import { useCurrentAccount } from "../../hooks/use-current-account";
 import accountService from "../../services/account";
+import NavItems from "./nav-items";
 
 export default function MobileSideDrawer({ ...props }: Omit<DrawerProps, "children">) {
-  const navigate = useNavigate();
   const account = useCurrentAccount();
 
   return (
@@ -38,7 +30,7 @@ export default function MobileSideDrawer({ ...props }: Omit<DrawerProps, "childr
       <DrawerOverlay />
       <DrawerContent>
         <DrawerCloseButton />
-        <DrawerHeader px="4" py="4">
+        <DrawerHeader px="2" py="4">
           {account ? (
             <Flex gap="2">
               <UserAvatar pubkey={account.pubkey} size="sm" noProxy />
@@ -54,29 +46,9 @@ export default function MobileSideDrawer({ ...props }: Omit<DrawerProps, "childr
         <DrawerBody padding={0} overflowY="auto" overflowX="hidden">
           <AccountSwitcher />
           <Flex direction="column" gap="2" padding="2">
-            <Button onClick={() => navigate(`/`)} leftIcon={<HomeIcon />}>
+            <NavItems isInDrawer />
-              Home
-            </Button>
-            <Button onClick={() => navigate(`/search`)} leftIcon={<SearchIcon />}>
-              Search
-            </Button>
-            <Button onClick={() => navigate("/streams")} leftIcon={<LiveStreamIcon />}>
-              Streams
-            </Button>
-            <Button onClick={() => navigate("/map")} leftIcon={<MapIcon />}>
-              Map
-            </Button>
-            <Button onClick={() => navigate("/relays")} leftIcon={<RelayIcon />}>
-              Relays
-            </Button>
-            <Button onClick={() => navigate(`/profile`)} leftIcon={<ProfileIcon />}>
-              Profile
-            </Button>
-            <Button onClick={() => navigate("/settings")} leftIcon={<SettingsIcon />}>
-              Settings
-            </Button>
             {account ? (
-              <Button onClick={() => accountService.logout()} leftIcon={<LogoutIcon />}>
+              <Button onClick={() => accountService.logout()} leftIcon={<LogoutIcon />} justifyContent="flex-start">
                 Logout
               </Button>
             ) : (

src/components/layout/nav-items.tsx

@@ -0,0 +1,56 @@
+import { AbsoluteCenter, Box, Button, Divider } from "@chakra-ui/react";
+import { useNavigate } from "react-router-dom";
+import {
+  ChatIcon,
+  FeedIcon,
+  LiveStreamIcon,
+  MapIcon,
+  NotificationIcon,
+  ProfileIcon,
+  RelayIcon,
+  SearchIcon,
+  SettingsIcon,
+} from "../icons";
+
+export default function NavItems({ isInDrawer = false }: { isInDrawer?: boolean }) {
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <Button onClick={() => navigate("/")} leftIcon={<FeedIcon />} justifyContent="flex-start">
+        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">
+        Search
+      </Button>
+      <Button onClick={() => navigate("/relays")} leftIcon={<RelayIcon />} justifyContent="flex-start">
+        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">
+        Streams
+      </Button>
+      <Button onClick={() => navigate("/map")} leftIcon={<MapIcon />} justifyContent="flex-start">
+        Map
+      </Button>
+      <Divider my="2" />
+      <Button onClick={() => navigate("/settings")} leftIcon={<SettingsIcon />} justifyContent="flex-start">
+        Settings
+      </Button>
+    </>
+  );
+}

src/components/layout/profile-link.tsx

@@ -1,27 +1,29 @@
-import { Box, Button, LinkBox, Text } from "@chakra-ui/react";
+import { Box, Button, LinkBox, LinkOverlay } from "@chakra-ui/react";
 import { Link as RouterLink, useLocation } from "react-router-dom";
 import { UserAvatar } from "../user-avatar";
-import { useUserMetadata } from "../../hooks/use-user-metadata";
-import { Bech32Prefix, normalizeToBech32 } from "../../helpers/nip19";
-import { truncatedId } from "../../helpers/nostr/event";
 import { useCurrentAccount } from "../../hooks/use-current-account";
+import { UserDnsIdentityIcon } from "../user-dns-identity-icon";
+import { useUserMetadata } from "../../hooks/use-user-metadata";
+import { nip19 } from "nostr-tools";
+import { getUserDisplayName } from "../../helpers/user-metadata";
 
 function ProfileButton() {
   const account = useCurrentAccount()!;
   const metadata = useUserMetadata(account.pubkey);
 
   return (
-    <LinkBox
+    <LinkBox borderRadius="lg" borderWidth={1} p="2" display="flex" gap="2" alignItems="center">
-      as={RouterLink}
+      <UserAvatar pubkey={account.pubkey} noProxy size="sm" />
-      to={`/u/${normalizeToBech32(account.pubkey, Bech32Prefix.Pubkey)}`}
-      display="flex"
-      gap="2"
-      overflow="hidden"
-    >
-      <UserAvatar pubkey={account.pubkey} noProxy />
       <Box>
-        <Text fontWeight="bold">{metadata?.name}</Text>
+        <LinkOverlay
-        <Text>{truncatedId(normalizeToBech32(account.pubkey) ?? "")}</Text>
+          as={RouterLink}
+          to={`/u/${nip19.npubEncode(account.pubkey)}`}
+          whiteSpace="nowrap"
+          fontWeight="bold"
+          fontSize="lg"
+        >
+          {getUserDisplayName(metadata, account.pubkey)}
+        </LinkOverlay>
       </Box>
     </LinkBox>
   );

src/components/timeline-page/timeline-health/index.tsx

@@ -13,7 +13,6 @@ import {
   Tooltip,
   Tr,
   useColorMode,
-  useToast,
 } from "@chakra-ui/react";
 import { TimelineLoader } from "../../../classes/timeline-loader";
 import useSubject from "../../../hooks/use-subject";
@@ -31,7 +30,6 @@ function EventRow({
   relays,
   ...props
 }: { event: NostrEvent; relays: string[] } & Omit<TableRowProps, "children">) {
-  const toast = useToast();
   const sub = useMemo(() => getEventRelays(event.id), [event.id]);
   const seenRelays = useSubject(sub);
 
@@ -50,8 +48,6 @@ function EventRow({
     pub.onResult.subscribe((result) => {
       if (result.status) {
         handleEventFromRelay(result.relay, event);
-      } else if (result.message) {
-        toast({ description: result.message, status: result.status ? "success" : "error" });
       }
     });