From 49a0f3b386349c914a101cfd42ce0281d15257f7 Mon Sep 17 00:00:00 2001 From: hzrd149 Date: Mon, 2 Oct 2023 12:49:17 -0500 Subject: [PATCH] cleanup account switcher improve date display on notes --- src/components/icons.tsx | 10 +- src/components/layout/account-switcher.tsx | 117 +++++++++--------- src/components/layout/desktop-side-nav.tsx | 79 +++++------- src/components/layout/mobile-bottom-nav.tsx | 10 +- src/components/layout/mobile-side-drawer.tsx | 57 ++++----- src/components/layout/nav-items.tsx | 25 +++- src/components/layout/profile-button.tsx | 39 ------ src/components/note/index.tsx | 2 +- src/components/timestamp.tsx | 26 ++-- .../user/components/user-profile-menu.tsx | 4 +- 10 files changed, 164 insertions(+), 205 deletions(-) delete mode 100644 src/components/layout/profile-button.tsx diff --git a/src/components/icons.tsx b/src/components/icons.tsx index cc4fc8162..b35dc53ae 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -206,9 +206,9 @@ export const QrCodeIcon = createIcon({ defaultProps, }); -export const ChatIcon = createIcon({ +export const MessagesIcon = createIcon({ displayName: "ChatIcon", - d: "M10 3h4a8 8 0 1 1 0 16v3.5c-5-2-12-5-12-11.5a8 8 0 0 1 8-8zm2 14h2a6 6 0 1 0 0-12h-4a6 6 0 0 0-6 6c0 3.61 2.462 5.966 8 8.48V17z", + d: "M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM20 7.23792L12.0718 14.338L4 7.21594V19H20V7.23792ZM4.51146 5L12.0619 11.662L19.501 5H4.51146Z", defaultProps, }); @@ -254,6 +254,12 @@ export const EditIcon = createIcon({ defaultProps, }); +export const WritingIcon = createIcon({ + displayName: "WritingIcon", + d: "M6.93912 14.0327C6.7072 14.6562 6.51032 15.233 6.33421 15.8154C7.29345 15.1188 8.43544 14.6766 9.75193 14.512C12.2652 14.1979 14.4976 12.5384 15.6279 10.4535L14.1721 8.99878L15.5848 7.58407C15.9185 7.24993 16.2521 6.91603 16.5858 6.58237C17.0151 6.15301 17.5 5.35838 18.0129 4.21479C12.4197 5.08172 8.99484 8.50636 6.93912 14.0327ZM17 8.99728L18 9.99658C17 12.9966 14 15.9966 10 16.4966C7.33146 16.8301 5.66421 18.6635 4.99824 21.9966H3C4 15.9966 6 1.99658 21 1.99658C20.0009 4.99392 19.0018 6.99303 18.0027 7.99391C17.6662 8.33038 17.3331 8.66372 17 8.99728Z", + defaultProps, +}); + export const AtIcon = createIcon({ displayName: "AtIcon", d: "M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C13.6418 20 15.1681 19.5054 16.4381 18.6571L17.5476 20.3214C15.9602 21.3818 14.0523 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12V13.5C22 15.433 20.433 17 18.5 17C17.2958 17 16.2336 16.3918 15.6038 15.4659C14.6942 16.4115 13.4158 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C13.1258 7 14.1647 7.37209 15.0005 8H17V13.5C17 14.3284 17.6716 15 18.5 15C19.3284 15 20 14.3284 20 13.5V12ZM12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9Z", diff --git a/src/components/layout/account-switcher.tsx b/src/components/layout/account-switcher.tsx index cfb27fe96..55256f9ae 100644 --- a/src/components/layout/account-switcher.tsx +++ b/src/components/layout/account-switcher.tsx @@ -1,43 +1,34 @@ import { CloseIcon } from "@chakra-ui/icons"; -import { - Accordion, - AccordionButton, - AccordionIcon, - AccordionItem, - AccordionPanel, - Box, - Button, - Flex, - IconButton, - Text, - useAccordionContext, -} from "@chakra-ui/react"; +import { useNavigate } from "react-router-dom"; +import { Box, Button, Flex, IconButton, Text, useDisclosure } from "@chakra-ui/react"; + import { getUserDisplayName } from "../../helpers/user-metadata"; import useSubject from "../../hooks/use-subject"; import { useUserMetadata } from "../../hooks/use-user-metadata"; import accountService, { Account } from "../../services/account"; -import { AddIcon } from "../icons"; +import { AddIcon, ArrowDownSIcon, ArrowUpSIcon } from "../icons"; import { UserAvatar } from "../user-avatar"; -import { useLocation, useNavigate } from "react-router-dom"; import AccountInfoBadge from "../account-info-badge"; +import { useCurrentAccount } from "../../hooks/use-current-account"; -function AccountItem({ account }: { account: Account }) { +function AccountItem({ account, onClick }: { account: Account; onClick?: () => void }) { const pubkey = account.pubkey; const metadata = useUserMetadata(pubkey, []); - const accord = useAccordionContext(); const handleClick = () => { - if (accord) accord.setIndex(-1); accountService.switchAccount(pubkey); + if (onClick) onClick(); }; return ( - - - - {getUserDisplayName(metadata, pubkey)} - - + + + + + {getUserDisplayName(metadata, pubkey)} + + + } aria-label="Remove Account" @@ -52,49 +43,53 @@ function AccountItem({ account }: { account: Account }) { ); } -export function AccountSwitcherList() { +export default function AccountSwitcher() { const navigate = useNavigate(); + const account = useCurrentAccount()!; + const { isOpen, onToggle, onClose } = useDisclosure(); + const metadata = useUserMetadata(account.pubkey); const accounts = useSubject(accountService.accounts); - const current = useSubject(accountService.current); - const location = useLocation(); - const otherAccounts = accounts.filter((acc) => acc.pubkey !== current?.pubkey); + const otherAccounts = accounts.filter((acc) => acc.pubkey !== account?.pubkey); return ( - - {otherAccounts.map((account) => ( - - ))} - + + + {getUserDisplayName(metadata, account.pubkey)} + + + {isOpen ? : } + + + {isOpen && ( + <> + {otherAccounts.map((account) => ( + + ))} + + + )} ); } - -export default function AccountSwitcher() { - return ( - - -

- - - Accounts - - - -

- - - - - - ); -} diff --git a/src/components/layout/desktop-side-nav.tsx b/src/components/layout/desktop-side-nav.tsx index e3688b436..c1addaa7d 100644 --- a/src/components/layout/desktop-side-nav.tsx +++ b/src/components/layout/desktop-side-nav.tsx @@ -1,16 +1,14 @@ -import { useContext } from "react"; -import { Avatar, Button, Flex, FlexProps, Heading, IconButton, LinkOverlay, Text } from "@chakra-ui/react"; +import { Avatar, Box, Button, Flex, FlexProps, Heading, LinkOverlay } from "@chakra-ui/react"; import { Link as RouterLink } from "react-router-dom"; import { useCurrentAccount } from "../../hooks/use-current-account"; -import accountService from "../../services/account"; -import { EditIcon, LogoutIcon } from "../icons"; -import ProfileButton from "./profile-button"; import AccountSwitcher from "./account-switcher"; -import { PostModalContext } from "../../providers/post-modal-provider"; import PublishLog from "../publish-log"; import NavItems from "./nav-items"; import { css } from "@emotion/react"; +import { useContext } from "react"; +import { PostModalContext } from "../../providers/post-modal-provider"; +import { WritingIcon } from "../icons"; const hideScrollbar = css` -ms-overflow-style: none; @@ -39,53 +37,36 @@ export default function DesktopSideNav(props: Omit) { css={hideScrollbar} > - - - - noStrudel + + + + + noStrudel + + - - {account ? ( - <> - - {!account.readonly && ( - } - aria-label="New note" - title="New note" - w="3rem" - h="3rem" - fontSize="1.5rem" - colorScheme="brand" - onClick={() => openModal()} - flexShrink={0} - /> - )} - - ) : ( - - )} - - + {account && ( - + <> + + + )} - {account?.readonly && ( - - Readonly Mode - + {!account && ( + )} diff --git a/src/components/layout/mobile-bottom-nav.tsx b/src/components/layout/mobile-bottom-nav.tsx index 4fcb28917..5f13807fe 100644 --- a/src/components/layout/mobile-bottom-nav.tsx +++ b/src/components/layout/mobile-bottom-nav.tsx @@ -3,7 +3,7 @@ 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, FeedIcon, HomeIcon, NotificationIcon, PlusCircleIcon, SearchIcon } from "../icons"; +import { MessagesIcon, FeedIcon, HomeIcon, NotificationIcon, PlusCircleIcon, SearchIcon } from "../icons"; import { UserAvatar } from "../user-avatar"; import MobileSideDrawer from "./mobile-side-drawer"; @@ -42,7 +42,13 @@ export default function MobileBottomNav(props: Omit) { colorScheme="brand" isDisabled={account?.readonly ?? true} /> - } aria-label="Messages" onClick={() => navigate(`/dm`)} flexGrow="1" size="md" /> + } + aria-label="Messages" + onClick={() => navigate(`/dm`)} + flexGrow="1" + size="md" + /> } aria-label="Notifications" diff --git a/src/components/layout/mobile-side-drawer.tsx b/src/components/layout/mobile-side-drawer.tsx index 7e69b4e5f..a71ba1709 100644 --- a/src/components/layout/mobile-side-drawer.tsx +++ b/src/components/layout/mobile-side-drawer.tsx @@ -1,9 +1,9 @@ import { Avatar, + Box, Button, Drawer, DrawerBody, - DrawerCloseButton, DrawerContent, DrawerHeader, DrawerOverlay, @@ -13,12 +13,8 @@ import { } from "@chakra-ui/react"; import { Link as RouterLink } from "react-router-dom"; -import { LogoutIcon } 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) { @@ -28,42 +24,31 @@ export default function MobileSideDrawer({ ...props }: Omit - - + {account ? ( - - - - + ) : ( - - + + Nostrudel )} - - - {account && } - - {!account && ( - - )} - - {account && ( - - )} - + + + {!account && ( + + )} diff --git a/src/components/layout/nav-items.tsx b/src/components/layout/nav-items.tsx index 53bfd93c3..7b63c963d 100644 --- a/src/components/layout/nav-items.tsx +++ b/src/components/layout/nav-items.tsx @@ -2,7 +2,7 @@ import { AbsoluteCenter, Box, Button, ButtonProps, Divider, Text } from "@chakra import { useLoaderData, useLocation, useNavigate } from "react-router-dom"; import { BadgeIcon, - ChatIcon, + MessagesIcon, CommunityIcon, EmojiIcon, FeedIcon, @@ -10,12 +10,16 @@ import { ListIcon, LiveStreamIcon, NotificationIcon, + ProfileIcon, RelayIcon, SearchIcon, SettingsIcon, ToolsIcon, + LogoutIcon, } from "../icons"; import { useCurrentAccount } from "../../hooks/use-current-account"; +import { nip19 } from "nostr-tools"; +import accountService from "../../services/account"; export default function NavItems() { const navigate = useNavigate(); @@ -24,7 +28,6 @@ export default function NavItems() { const buttonProps: ButtonProps = { py: "2", - pl: "2", justifyContent: "flex-start", variant: "link", }; @@ -66,7 +69,7 @@ export default function NavItems() { + {account?.pubkey && ( + + )} - + + {account && ( + + )} ); } diff --git a/src/components/layout/profile-button.tsx b/src/components/layout/profile-button.tsx deleted file mode 100644 index 07ffaa85e..000000000 --- a/src/components/layout/profile-button.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { LinkBox, LinkOverlay } from "@chakra-ui/react"; -import { Link as RouterLink } from "react-router-dom"; -import { nip19 } from "nostr-tools"; - -import { UserAvatar } from "../user-avatar"; -import { useCurrentAccount } from "../../hooks/use-current-account"; -import { useUserMetadata } from "../../hooks/use-user-metadata"; -import { getUserDisplayName } from "../../helpers/user-metadata"; - -export default function ProfileButton() { - const account = useCurrentAccount()!; - const metadata = useUserMetadata(account.pubkey); - - return ( - - - - {getUserDisplayName(metadata, account.pubkey)} - - - ); -} diff --git a/src/components/note/index.tsx b/src/components/note/index.tsx index 79ae78f07..6a1f4067b 100644 --- a/src/components/note/index.tsx +++ b/src/components/note/index.tsx @@ -38,7 +38,7 @@ import BookmarkButton from "./components/bookmark-button"; import { useCurrentAccount } from "../../hooks/use-current-account"; import NoteReactions from "./components/note-reactions"; import ReplyForm from "../../views/note/components/reply-form"; -import { getEventCoordinate, getReferences, parseCoordinate } from "../../helpers/nostr/events"; +import { getReferences, parseCoordinate } from "../../helpers/nostr/events"; import Timestamp from "../timestamp"; import OpenInDrawerButton from "../open-in-drawer-button"; import { getSharableEventAddress } from "../../helpers/nip19"; diff --git a/src/components/timestamp.tsx b/src/components/timestamp.tsx index 84dc6aa6c..306dca13e 100644 --- a/src/components/timestamp.tsx +++ b/src/components/timestamp.tsx @@ -1,19 +1,27 @@ import dayjs from "dayjs"; import { Box, BoxProps } from "@chakra-ui/react"; -const aDayAgo = dayjs().subtract(1, "day"); - export default function Timestamp({ timestamp, ...props }: { timestamp: number } & Omit) { const date = dayjs.unix(timestamp); + const now = dayjs(); + + let display = date.format("L"); + + if (now.diff(date, "week") <= 2) { + if (now.diff(date, "d") >= 1) { + display = Math.round(now.diff(date, "d") * 10) / 10 + `d`; + } else if (now.diff(date, "h") >= 1) { + display = Math.round(now.diff(date, "h")) + `h`; + } else if (now.diff(date, "m") >= 1) { + display = Math.round(now.diff(date, "m")) + `m`; + } else if (now.diff(date, "s") >= 1) { + display = Math.round(now.diff(date, "s")) + `s`; + } + } return ( - - {date.isBefore(aDayAgo) ? date.format("L LT") : date.fromNow()} + + {display} ); } diff --git a/src/views/user/components/user-profile-menu.tsx b/src/views/user/components/user-profile-menu.tsx index 4b7ef72ca..85ffa594c 100644 --- a/src/views/user/components/user-profile-menu.tsx +++ b/src/views/user/components/user-profile-menu.tsx @@ -5,7 +5,7 @@ import { useCopyToClipboard } from "react-use"; import { CustomMenuIconButton, MenuIconButtonProps } from "../../../components/menu-icon-button"; import { - ChatIcon, + MessagesIcon, ClipboardIcon, CodeIcon, ExternalLinkIcon, @@ -63,7 +63,7 @@ export const UserProfileMenu = ({ {isMuted ? "Unmute User" : "Mute User"} )} - } as={RouterLink} to={`/dm/${nip19.npubEncode(pubkey)}`}> + } as={RouterLink} to={`/dm/${nip19.npubEncode(pubkey)}`}> Direct messages } onClick={() => loginAsUser()}>