add new note button to bottom nav

src/components/icons.tsx

@@ -233,3 +233,9 @@ export const CameraIcon = createIcon({
   d: "M9.828 5l-2 2H4v12h16V7h-3.828l-2-2H9.828zM9 3h6l2 2h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4l2-2zm3 15a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11zm0-2a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z",
   defaultProps,
 });
+
+export const PlusCircleIcon = createIcon({
+  displayName: "PlusCircleIcon",
+  d: "M11 11V7h2v4h4v2h-4v4h-2v-4H7v-2h4zm1 11C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z",
+  defaultProps,
+});

src/components/page/index.tsx

@@ -23,27 +23,27 @@ export const Page = ({ children }: { children: React.ReactNode }) => {
   const isMobile = useIsMobile();
 
   return (
-    <Container
+    <PostModalProvider>
-      size="lg"
+      <Container
-      display="flex"
+        size="lg"
-      flexDirection="column"
+        display="flex"
-      height="100%"
+        flexDirection="column"
-      overflow="hidden"
+        height="100%"
-      position="relative"
+        overflow="hidden"
-      padding="0"
+        position="relative"
-    >
+        padding="0"
-      <ReloadPrompt />
+      >
-      {isMobile && <MobileHeader />}
+        <ReloadPrompt />
-      <Flex gap="4" grow={1} overflow="hidden">
+        {isMobile && <MobileHeader />}
-        {!isMobile && <DesktopSideNav />}
+        <Flex gap="4" grow={1} overflow="hidden">
-        <Flex flexGrow={1} direction="column" overflow="hidden">
+          {!isMobile && <DesktopSideNav />}
-          <ErrorBoundary>
+          <Flex flexGrow={1} direction="column" overflow="hidden">
-            <PostModalProvider>{children}</PostModalProvider>
+            <ErrorBoundary>{children}</ErrorBoundary>
-          </ErrorBoundary>
+          </Flex>
+          {!isMobile && <FollowingSideNav />}
         </Flex>
-        {!isMobile && <FollowingSideNav />}
+        {isMobile && <MobileBottomNav />}
-      </Flex>
+      </Container>
-      {isMobile && <MobileBottomNav />}
+    </PostModalProvider>
-    </Container>
   );
 };

src/components/page/mobile-bottom-nav.tsx

@@ -1,10 +1,14 @@
-import { ChatIcon } from "@chakra-ui/icons";
 import { Flex, IconButton } from "@chakra-ui/react";
+import { useContext } from "react";
 import { useNavigate } from "react-router-dom";
-import { FeedIcon, HomeIcon, NotificationIcon, SearchIcon, SettingsIcon } from "../icons";
+import { useCurrentAccount } from "../../hooks/use-current-account";
+import { PostModalContext } from "../../providers/post-modal-provider";
+import { ChatIcon, HomeIcon, NotificationIcon, PlusCircleIcon, SearchIcon } from "../icons";
 
 export default function MobileBottomNav() {
+  const { openModal } = useContext(PostModalContext);
   const navigate = useNavigate();
+  const account = useCurrentAccount();
 
   return (
     <Flex flexShrink={0} gap="2" padding="2">
@@ -16,6 +20,16 @@ export default function MobileBottomNav() {
         flexGrow="1"
         size="md"
       />
+      <IconButton
+        icon={<PlusCircleIcon fontSize="1.8em" />}
+        aria-label="New Note"
+        onClick={() => {
+          openModal();
+        }}
+        variant="solid"
+        colorScheme="brand"
+        isDisabled={account.readonly}
+      />
       <IconButton icon={<ChatIcon />} aria-label="Messages" onClick={() => navigate(`/dm`)} flexGrow="1" size="md" />
       <IconButton
         icon={<NotificationIcon />}

src/components/post-modal/index.tsx

@@ -179,7 +179,7 @@ export const PostModal = ({ isOpen, onClose, initialDraft }: PostModalProps) =>
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} size="4xl">
+    <Modal isOpen={isOpen} onClose={onClose} size="4xl" closeOnOverlayClick={false}>
       <ModalOverlay />
       <ModalContent>
         <ModalBody padding={isMobile ? "2" : "4"}>{renderContent()}</ModalBody>

src/providers/post-modal-provider.tsx

@@ -1,5 +1,6 @@
 import { useDisclosure } from "@chakra-ui/react";
 import React, { useCallback, useMemo, useState } from "react";
+import { ErrorBoundary } from "../components/error-boundary";
 import { PostModal } from "../components/post-modal";
 import { DraftNostrEvent } from "../types/nostr-event";
 
@@ -25,8 +26,10 @@ export const PostModalProvider = ({ children }: { children: React.ReactNode }) =
 
   return (
     <PostModalContext.Provider value={context}>
-      {isOpen && <PostModal isOpen initialDraft={draft} onClose={onClose} />}
+      <ErrorBoundary>
-      {children}
+        {isOpen && <PostModal isOpen initialDraft={draft} onClose={onClose} />}
+        {children}
+      </ErrorBoundary>
     </PostModalContext.Provider>
   );
 };