remove following list on desktop

.changeset/silent-gifts-brush.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Desktop: Remove following list on right side

.changeset/tame-forks-raise.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Mobile: Move user icon to bottom bar

src/components/following-list.tsx

@@ -1,45 +0,0 @@
-import { Box, Button, Flex, SkeletonText } from "@chakra-ui/react";
-import { Link } from "react-router-dom";
-import { Bech32Prefix, normalizeToBech32 } from "../helpers/nip19";
-import { getUserDisplayName } from "../helpers/user-metadata";
-import useSubject from "../hooks/use-subject";
-import { useUserMetadata } from "../hooks/use-user-metadata";
-import clientFollowingService from "../services/client-following";
-import { UserAvatar } from "./user-avatar";
-import { UserDnsIdentityIcon } from "./user-dns-identity";
-
-const FollowingListItem = ({ pubkey }: { pubkey: string }) => {
-  const metadata = useUserMetadata(pubkey);
-
-  if (!metadata) return <SkeletonText />;
-
-  return (
-    <Button
-      as={Link}
-      leftIcon={<UserAvatar pubkey={pubkey} size="xs" />}
-      overflow="hidden"
-      variant="outline"
-      to={`/u/${normalizeToBech32(pubkey, Bech32Prefix.Pubkey)}`}
-      justifyContent="flex-start"
-      rightIcon={<UserDnsIdentityIcon pubkey={pubkey} onlyIcon />}
-    >
-      {getUserDisplayName(metadata, pubkey)}
-    </Button>
-  );
-};
-
-export const FollowingList = () => {
-  const following = useSubject(clientFollowingService.following);
-
-  if (!following) return <SkeletonText />;
-
-  return (
-    <Box overflow="auto" pr="2" pb="4" pt="2">
-      <Flex direction="column" gap="2">
-        {following.map((pTag) => (
-          <FollowingListItem key={pTag[1]} pubkey={pTag[1]} />
-        ))}
-      </Flex>
-    </Box>
-  );
-};

src/components/page/index.tsx

@@ -1,24 +1,13 @@
 import React from "react";
-import { Container, Flex, Heading, VStack } from "@chakra-ui/react";
+import { Container, Flex } from "@chakra-ui/react";
 import { ErrorBoundary } from "../error-boundary";
 
 import { useIsMobile } from "../../hooks/use-is-mobile";
-import { FollowingList } from "../following-list";
 import { ReloadPrompt } from "../reload-prompt";
 import { PostModalProvider } from "../../providers/post-modal-provider";
-import MobileHeader from "./mobile-header";
 import DesktopSideNav from "./desktop-side-nav";
 import MobileBottomNav from "./mobile-bottom-nav";
 
-const FollowingSideNav = () => {
-  return (
-    <VStack width="15rem" pt="2" alignItems="stretch" flexShrink={0}>
-      <Heading size="md">Following</Heading>
-      <FollowingList />
-    </VStack>
-  );
-};
-
 export const Page = ({ children }: { children: React.ReactNode }) => {
   const isMobile = useIsMobile();
 
@@ -34,13 +23,11 @@ export const Page = ({ children }: { children: React.ReactNode }) => {
         padding="0"
       >
         <ReloadPrompt />
-        {isMobile && <MobileHeader />}
         <Flex gap="4" grow={1} overflow="hidden">
           {!isMobile && <DesktopSideNav />}
           <Flex flexGrow={1} direction="column" overflow="hidden">
             <ErrorBoundary>{children}</ErrorBoundary>
           </Flex>
-          {!isMobile && <FollowingSideNav />}
         </Flex>
         {isMobile && <MobileBottomNav />}
       </Container>

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

@@ -1,43 +1,53 @@
-import { Flex, IconButton } from "@chakra-ui/react";
-import { useContext } from "react";
-import { useNavigate } from "react-router-dom";
+import { Flex, IconButton, useDisclosure } from "@chakra-ui/react";
+import { useContext, useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 import { useCurrentAccount } from "../../hooks/use-current-account";
 import { PostModalContext } from "../../providers/post-modal-provider";
 import { ChatIcon, HomeIcon, NotificationIcon, PlusCircleIcon, SearchIcon } from "../icons";
+import { UserAvatar } from "../user-avatar";
+import MobileSideDrawer from "./mobile-side-drawer";
 
 export default function MobileBottomNav() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const { openModal } = useContext(PostModalContext);
   const navigate = useNavigate();
   const account = useCurrentAccount();
 
+  const location = useLocation();
+  useEffect(() => onClose(), [location.key, account]);
+
   return (
-    <Flex flexShrink={0} gap="2" padding="2">
-      <IconButton icon={<HomeIcon />} aria-label="Home" onClick={() => navigate("/")} flexGrow="1" size="md" />
-      <IconButton
-        icon={<SearchIcon />}
-        aria-label="Search"
-        onClick={() => navigate(`/search`)}
-        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 />}
-        aria-label="Notifications"
-        onClick={() => navigate("/notifications")}
-        flexGrow="1"
-        size="md"
-      />
-    </Flex>
+    <>
+      <Flex flexShrink={0} gap="2" padding="2" alignItems="center">
+        <UserAvatar pubkey={account.pubkey} size="sm" onClick={onOpen} />
+        <IconButton icon={<HomeIcon />} aria-label="Home" onClick={() => navigate("/")} flexGrow="1" size="md" />
+        <IconButton
+          icon={<SearchIcon />}
+          aria-label="Search"
+          onClick={() => navigate(`/search`)}
+          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 />}
+          aria-label="Notifications"
+          onClick={() => navigate("/notifications")}
+          flexGrow="1"
+          size="md"
+        />
+      </Flex>
+      <MobileSideDrawer isOpen={isOpen} onClose={onClose} />
+    </>
   );
 }

src/components/page/mobile-header.tsx

@@ -1,30 +0,0 @@
-import { Flex, IconButton, Text, useDisclosure } from "@chakra-ui/react";
-import { useEffect } from "react";
-import { Link, useLocation } from "react-router-dom";
-import { useCurrentAccount } from "../../hooks/use-current-account";
-import { ConnectedRelays } from "../connected-relays";
-import { NotificationIcon } from "../icons";
-import { UserAvatar } from "../user-avatar";
-import MobileSideDrawer from "./mobile-side-drawer";
-
-export default function MobileHeader() {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const account = useCurrentAccount();
-
-  const location = useLocation();
-  useEffect(() => onClose(), [location.key, account]);
-
-  return (
-    <>
-      <Flex justifyContent="space-between" padding="2" alignItems="center">
-        <UserAvatar pubkey={account.pubkey} size="sm" onClick={onOpen} />
-        {account.readonly && (
-          <Text color="red.200" textAlign="center">
-            Readonly Mode
-          </Text>
-        )}
-      </Flex>
-      <MobileSideDrawer isOpen={isOpen} onClose={onClose} />
-    </>
-  );
-}

src/views/dm/index.tsx

@@ -8,13 +8,14 @@ import {
   Card,
   CardBody,
   Flex,
+  Link,
   LinkBox,
   LinkOverlay,
   Text,
 } from "@chakra-ui/react";
 import moment from "moment";
 import { useEffect, useMemo, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom";
 import { UserAvatar } from "../../components/user-avatar";
 import { convertTimestampToDate } from "../../helpers/date";
 import { Bech32Prefix, normalizeToBech32 } from "../../helpers/nip19";
@@ -22,6 +23,8 @@ import { getUserDisplayName } from "../../helpers/user-metadata";
 import useSubject from "../../hooks/use-subject";
 import { useUserMetadata } from "../../hooks/use-user-metadata";
 import directMessagesService from "../../services/direct-messages";
+import { ExternalLinkIcon } from "../../components/icons";
+import { useIsMobile } from "../../hooks/use-is-mobile";
 
 function ContactCard({ pubkey }: { pubkey: string }) {
   const subject = useMemo(() => directMessagesService.getUserMessages(pubkey), [pubkey]);
@@ -40,12 +43,13 @@ function ContactCard({ pubkey }: { pubkey: string }) {
           )}
         </Flex>
       </CardBody>
-      <LinkOverlay as={Link} to={`/dm/${npub ?? pubkey}`} />
+      <LinkOverlay as={RouterLink} to={`/dm/${npub ?? pubkey}`} />
     </LinkBox>
   );
 }
 
 function DirectMessagesView() {
+  const isMobile = useIsMobile();
   const [from, setFrom] = useState(moment().subtract(2, "days"));
   const conversations = useSubject(directMessagesService.conversations);
 
@@ -93,6 +97,20 @@ function DirectMessagesView() {
 
   return (
     <Flex direction="column" gap="2" overflowX="hidden" overflowY="auto" height="100%" pt="2" pb="8">
+      <Alert status="info" flexShrink={0}>
+        <AlertIcon />
+        <Flex direction={isMobile ? "column" : "row"}>
+          <AlertTitle>Give NostrChat a try</AlertTitle>
+          <AlertDescription>
+            <Text>
+              Its a much better chat app than what I can build inside of noStrudel.{" "}
+              <Link href="https://www.nostrchat.io/" isExternal>
+                nostrchat.io <ExternalLinkIcon />
+              </Link>
+            </Text>
+          </AlertDescription>
+        </Flex>
+      </Alert>
       {sortedConversations.map((pubkey) => (
         <ContactCard key={pubkey} pubkey={pubkey} />
       ))}