diff --git a/.changeset/silent-gifts-brush.md b/.changeset/silent-gifts-brush.md new file mode 100644 index 000000000..28c44c9e0 --- /dev/null +++ b/.changeset/silent-gifts-brush.md @@ -0,0 +1,5 @@ +--- +"nostrudel": minor +--- + +Desktop: Remove following list on right side diff --git a/.changeset/tame-forks-raise.md b/.changeset/tame-forks-raise.md new file mode 100644 index 000000000..75cb46d95 --- /dev/null +++ b/.changeset/tame-forks-raise.md @@ -0,0 +1,5 @@ +--- +"nostrudel": minor +--- + +Mobile: Move user icon to bottom bar diff --git a/src/components/following-list.tsx b/src/components/following-list.tsx deleted file mode 100644 index 55e25c0e8..000000000 --- a/src/components/following-list.tsx +++ /dev/null @@ -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 ; - - return ( - - ); -}; - -export const FollowingList = () => { - const following = useSubject(clientFollowingService.following); - - if (!following) return ; - - return ( - - - {following.map((pTag) => ( - - ))} - - - ); -}; diff --git a/src/components/page/index.tsx b/src/components/page/index.tsx index 73098e62b..131895665 100644 --- a/src/components/page/index.tsx +++ b/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 ( - - Following - - - ); -}; - export const Page = ({ children }: { children: React.ReactNode }) => { const isMobile = useIsMobile(); @@ -34,13 +23,11 @@ export const Page = ({ children }: { children: React.ReactNode }) => { padding="0" > - {isMobile && } {!isMobile && } {children} - {!isMobile && } {isMobile && } diff --git a/src/components/page/mobile-bottom-nav.tsx b/src/components/page/mobile-bottom-nav.tsx index bafc46300..9c8cbdd53 100644 --- a/src/components/page/mobile-bottom-nav.tsx +++ b/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 ( - - } aria-label="Home" onClick={() => navigate("/")} flexGrow="1" size="md" /> - } - aria-label="Search" - onClick={() => navigate(`/search`)} - flexGrow="1" - size="md" - /> - } - aria-label="New Note" - onClick={() => { - openModal(); - }} - variant="solid" - colorScheme="brand" - isDisabled={account.readonly} - /> - } aria-label="Messages" onClick={() => navigate(`/dm`)} flexGrow="1" size="md" /> - } - aria-label="Notifications" - onClick={() => navigate("/notifications")} - flexGrow="1" - size="md" - /> - + <> + + + } aria-label="Home" onClick={() => navigate("/")} flexGrow="1" size="md" /> + } + aria-label="Search" + onClick={() => navigate(`/search`)} + flexGrow="1" + size="md" + /> + } + aria-label="New Note" + onClick={() => { + openModal(); + }} + variant="solid" + colorScheme="brand" + isDisabled={account.readonly} + /> + } aria-label="Messages" onClick={() => navigate(`/dm`)} flexGrow="1" size="md" /> + } + aria-label="Notifications" + onClick={() => navigate("/notifications")} + flexGrow="1" + size="md" + /> + + + ); } diff --git a/src/components/page/mobile-header.tsx b/src/components/page/mobile-header.tsx deleted file mode 100644 index fa323eb22..000000000 --- a/src/components/page/mobile-header.tsx +++ /dev/null @@ -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 ( - <> - - - {account.readonly && ( - - Readonly Mode - - )} - - - - ); -} diff --git a/src/views/dm/index.tsx b/src/views/dm/index.tsx index 0bd44bf43..534ab6fde 100644 --- a/src/views/dm/index.tsx +++ b/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 }) { )} - + ); } 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 ( + + + + Give NostrChat a try + + + Its a much better chat app than what I can build inside of noStrudel.{" "} + + nostrchat.io + + + + + {sortedConversations.map((pubkey) => ( ))}