add more prominent new post button

.changeset/green-jars-exercise.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add more prominent new post button

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

@@ -1,11 +1,12 @@
 import { SettingsIcon } from "@chakra-ui/icons";
-import { Avatar, Button, Flex, Heading, LinkOverlay, Text, VStack } from "@chakra-ui/react";
+import { Avatar, Button, Flex, Heading, IconButton, LinkOverlay, Text, VStack } from "@chakra-ui/react";
 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 {
   ChatIcon,
+  EditIcon,
   FeedIcon,
   LiveStreamIcon,
   LogoutIcon,
@@ -16,10 +17,13 @@ import {
 } from "../icons";
 import ProfileLink from "./profile-link";
 import AccountSwitcher from "./account-switcher";
+import { useContext } from "react";
+import { PostModalContext } from "../../providers/post-modal-provider";
 
 export default function DesktopSideNav() {
   const navigate = useNavigate();
   const account = useCurrentAccount();
+  const { openModal } = useContext(PostModalContext);
 
   return (
     <VStack width="15rem" pt="2" alignItems="stretch" flexShrink={0}>
@@ -65,6 +69,18 @@ export default function DesktopSideNav() {
         </Text>
       )}
       <ConnectedRelays />
+      <Flex justifyContent="flex-end" py="8">
+        <IconButton
+          icon={<EditIcon />}
+          aria-label="New post"
+          w="4rem"
+          h="4rem"
+          fontSize="1.5rem"
+          borderRadius="50%"
+          colorScheme="brand"
+          onClick={() => openModal()}
+        />
+      </Flex>
     </VStack>
   );
 }

src/views/home/following-tab.tsx

@@ -1,11 +1,9 @@
-import { Button, Flex, FormControl, FormLabel, Switch } from "@chakra-ui/react";
+import { Flex, FormControl, FormLabel, Switch } from "@chakra-ui/react";
 import { useSearchParams } from "react-router-dom";
 import { isReply, truncatedId } from "../../helpers/nostr-event";
 import { useTimelineLoader } from "../../hooks/use-timeline-loader";
 import { useUserContacts } from "../../hooks/use-user-contacts";
-import { AddIcon } from "@chakra-ui/icons";
-import { useCallback, useContext, useRef } from "react";
-import { PostModalContext } from "../../providers/post-modal-provider";
+import { useCallback, useRef } from "react";
 import { useReadRelayUrls } from "../../hooks/use-client-relays";
 import { useCurrentAccount } from "../../hooks/use-current-account";
 import RequireCurrentAccount from "../../providers/require-current-account";
@@ -18,7 +16,6 @@ import GenericNoteTimeline from "../../components/generic-note-timeline";
 function FollowingTabBody() {
   const account = useCurrentAccount()!;
   const readRelays = useReadRelayUrls();
-  const { openModal } = useContext(PostModalContext);
   const contacts = useUserContacts(account.pubkey, readRelays);
   const [search, setSearch] = useSearchParams();
   const showReplies = search.has("replies");
@@ -48,15 +45,6 @@ function FollowingTabBody() {
   return (
     <IntersectionObserverProvider callback={callback} root={scrollBox}>
       <Flex py="4" direction="column" gap="2" overflowY="auto" overflowX="hidden" ref={scrollBox}>
-        <Button
-          variant="outline"
-          leftIcon={<AddIcon />}
-          onClick={() => openModal()}
-          isDisabled={account.readonly}
-          flexShrink={0}
-        >
-          New Post
-        </Button>
         <FormControl display="flex" alignItems="center">
           <FormLabel htmlFor="show-replies" mb="0">
             Show Replies

src/views/streams/stream/stream-chat/chat-message-content.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { EmbedableContent, embedUrls } from "../../../../helpers/embeds";
 import {
   embedEmoji,
@@ -11,7 +11,7 @@ import {
 import EmbeddedContent from "../../../../components/embeded-content";
 import { NostrEvent } from "../../../../types/nostr-event";
 
-export default function ChatMessageContent({ event }: { event: NostrEvent }) {
+const ChatMessageContent = React.memo(({ event }: { event: NostrEvent }) => {
   const content = useMemo(() => {
     let c: EmbedableContent = [event.content];
 
@@ -27,4 +27,6 @@ export default function ChatMessageContent({ event }: { event: NostrEvent }) {
   }, [event.content]);
 
   return <EmbeddedContent content={content} />;
-}
+});
+
+export default ChatMessageContent;

src/views/streams/stream/stream-chat/chat-message.tsx

@@ -15,9 +15,9 @@ function ChatMessage({ event, stream }: { event: NostrEvent; stream: ParsedStrea
 
   return (
     <TrustProvider event={event}>
-      <Box>
+      <Box ref={ref}>
         <NoteZapButton note={event} size="xs" variant="ghost" float="right" ml="2" allowComment={false} />
-        <Text ref={ref}>
+        <Text>
           <UserAvatar pubkey={event.pubkey} size="xs" display="inline-block" mr="2" />
           <Text as="span" fontWeight="bold" color={event.pubkey === stream.host ? "rgb(248, 56, 217)" : "cyan"}>
             <UserLink pubkey={event.pubkey} />

src/views/streams/stream/stream-chat/index.tsx

@@ -37,7 +37,6 @@ import { useTimelineLoader } from "../../../../hooks/use-timeline-loader";
 import { truncatedId } from "../../../../helpers/nostr-event";
 import { css } from "@emotion/react";
 import TopZappers from "./top-zappers";
-import { Kind } from "nostr-tools";
 import { parseZapEvent } from "../../../../helpers/zaps";
 
 const hideScrollbar = css`

src/views/streams/stream/stream-chat/zap-message.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import React, { useRef } from "react";
 import { Box, Flex, Text } from "@chakra-ui/react";
 import { ParsedStream } from "../../../../helpers/nostr/stream";
 import { UserAvatar } from "../../../../components/user-avatar";
@@ -11,7 +11,7 @@ import { readablizeSats } from "../../../../helpers/bolt11";
 import { TrustProvider } from "../../../../providers/trust";
 import ChatMessageContent from "./chat-message-content";
 
-export default function ZapMessage({ zap, stream }: { zap: NostrEvent; stream: ParsedStream }) {
+function ZapMessage({ zap, stream }: { zap: NostrEvent; stream: ParsedStream }) {
   const ref = useRef<HTMLDivElement | null>(null);
   useRegisterIntersectionEntity(ref, zap.id);
 
@@ -34,3 +34,6 @@ export default function ZapMessage({ zap, stream }: { zap: NostrEvent; stream: P
     </TrustProvider>
   );
 }
+
+const ZapMessageMemo = React.memo(ZapMessage);
+export default ZapMessageMemo;

src/views/user/components/header.tsx

@@ -1,21 +1,16 @@
-import { Flex, Heading, SkeletonText, Text, Link, IconButton, Spacer } from "@chakra-ui/react";
+import { Flex, Heading, IconButton, Spacer } from "@chakra-ui/react";
 import { useNavigate, Link as RouterLink } from "react-router-dom";
-import { CopyIconButton } from "../../../components/copy-icon-button";
-import { ChatIcon, EditIcon, ExternalLinkIcon, KeyIcon, SettingsIcon } from "../../../components/icons";
-import { QrIconButton } from "./share-qr-button";
+import { ChatIcon, EditIcon } from "../../../components/icons";
 import { UserAvatar } from "../../../components/user-avatar";
 import { UserDnsIdentityIcon } from "../../../components/user-dns-identity-icon";
 import { UserFollowButton } from "../../../components/user-follow-button";
 import { UserTipButton } from "../../../components/user-tip-button";
 import { Bech32Prefix, normalizeToBech32 } from "../../../helpers/nip19";
-import { truncatedId } from "../../../helpers/nostr-event";
-import { fixWebsiteUrl, getUserDisplayName } from "../../../helpers/user-metadata";
+import { getUserDisplayName } from "../../../helpers/user-metadata";
 import { useCurrentAccount } from "../../../hooks/use-current-account";
 import { useIsMobile } from "../../../hooks/use-is-mobile";
 import { useUserMetadata } from "../../../hooks/use-user-metadata";
 import { UserProfileMenu } from "./user-profile-menu";
-import { embedUrls } from "../../../helpers/embeds";
-import { renderGenericUrl } from "../../../components/embed-types";
 
 export default function Header({
   pubkey,
@@ -45,6 +40,7 @@ export default function Header({
             aria-label="Edit profile"
             title="Edit profile"
             size="sm"
+            colorScheme="brand"
             onClick={() => navigate("/profile")}
           />
         )}