highperfocused/nostrudel
1
0
Fork 0
mirror of https://github.com/hzrd149/nostrudel.git synced 2025-10-04 16:37:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

cleanup account switcher

Browse Source 
improve date display on notes
This commit is contained in:
hzrd149
2023-10-02 12:49:17 -05:00
parent e23aa9f69f
commit 49a0f3b386
10 changed files with 164 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/icons.tsx
View File

@@ -206,9 +206,9 @@ export const QrCodeIcon = createIcon({
defaultProps, defaultProps,
}); });
export const ChatIcon = createIcon({ export const MessagesIcon = createIcon({
displayName: "ChatIcon", 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, defaultProps,
}); });
@@ -254,6 +254,12 @@ export const EditIcon = createIcon({
defaultProps, 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({ export const AtIcon = createIcon({
displayName: "AtIcon", 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", 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",

117
src/components/layout/account-switcher.tsx
View File

@@ -1,43 +1,34 @@
import { CloseIcon } from "@chakra-ui/icons"; import { CloseIcon } from "@chakra-ui/icons";
import { import { useNavigate } from "react-router-dom";
Accordion, import { Box, Button, Flex, IconButton, Text, useDisclosure } from "@chakra-ui/react";
AccordionButton,
AccordionIcon,
AccordionItem,
AccordionPanel,
Box,
Button,
Flex,
IconButton,
Text,
useAccordionContext,
} from "@chakra-ui/react";
import { getUserDisplayName } from "../../helpers/user-metadata"; import { getUserDisplayName } from "../../helpers/user-metadata";
import useSubject from "../../hooks/use-subject"; import useSubject from "../../hooks/use-subject";
import { useUserMetadata } from "../../hooks/use-user-metadata"; import { useUserMetadata } from "../../hooks/use-user-metadata";
import accountService, { Account } from "../../services/account"; import accountService, { Account } from "../../services/account";
import { AddIcon } from "../icons"; import { AddIcon, ArrowDownSIcon, ArrowUpSIcon } from "../icons";
import { UserAvatar } from "../user-avatar"; import { UserAvatar } from "../user-avatar";
import { useLocation, useNavigate } from "react-router-dom";
import AccountInfoBadge from "../account-info-badge"; 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 pubkey = account.pubkey;
const metadata = useUserMetadata(pubkey, []); const metadata = useUserMetadata(pubkey, []);
const accord = useAccordionContext();
const handleClick = () => { const handleClick = () => {
if (accord) accord.setIndex(-1);
accountService.switchAccount(pubkey); accountService.switchAccount(pubkey);
if (onClick) onClick();
}; };
return ( return (
<Box display="flex" gap="2" alignItems="center" cursor="pointer" onClick={handleClick}> <Box display="flex" gap="2" alignItems="center" cursor="pointer">
<UserAvatar pubkey={pubkey} size="sm" /> <Flex as="button" onClick={handleClick} flex={1} gap="2">
<Box flex={1} overflow="hidden"> <UserAvatar pubkey={pubkey} size="md" />
<Text isTruncated>{getUserDisplayName(metadata, pubkey)}</Text> <Flex overflow="hidden" direction="column" alignItems="flex-start">
<AccountInfoBadge fontSize="0.7em" account={account} /> <Text isTruncated>{getUserDisplayName(metadata, pubkey)}</Text>
</Box> <AccountInfoBadge fontSize="0.7em" account={account} />
</Flex>
</Flex>
<IconButton <IconButton
icon={<CloseIcon />} icon={<CloseIcon />}
aria-label="Remove Account" aria-label="Remove Account"
@@ -52,49 +43,53 @@ function AccountItem({ account }: { account: Account }) {
); );
} }
export function AccountSwitcherList() { export default function AccountSwitcher() {
const navigate = useNavigate(); const navigate = useNavigate();
const account = useCurrentAccount()!;
const { isOpen, onToggle, onClose } = useDisclosure();
const metadata = useUserMetadata(account.pubkey);
const accounts = useSubject(accountService.accounts); 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 ( return (
<Flex gap="2" direction="column" padding="2"> <Flex direction="column" gap="2">
{otherAccounts.map((account) => ( <Box
<AccountItem key={account.pubkey} account={account} /> as="button"
))} borderRadius="30"
<Button borderWidth={1}
size="sm" display="flex"
leftIcon={<AddIcon />} gap="2"
onClick={() => { mb="2"
accountService.logout(); alignItems="center"
navigate("/login", { state: { from: location.pathname } }); flexGrow={1}
}} overflow="hidden"
onClick={onToggle}
> >
Add Account <UserAvatar pubkey={account.pubkey} noProxy size="md" />
</Button> <Text whiteSpace="nowrap" fontWeight="bold" fontSize="lg" isTruncated>
{getUserDisplayName(metadata, account.pubkey)}
</Text>
<Flex ml="auto" alignItems="center" justifyContent="center" aspectRatio={1} h="3rem">
{isOpen ? <ArrowUpSIcon fontSize="1.5rem" /> : <ArrowDownSIcon fontSize="1.5rem" />}
</Flex>
</Box>
{isOpen && (
<>
{otherAccounts.map((account) => (
<AccountItem key={account.pubkey} account={account} onClick={onClose} />
))}
<Button
leftIcon={<AddIcon />}
onClick={() => {
accountService.logout();
navigate("/login", { state: { from: location.pathname } });
}}
>
Add Account
</Button>
</>
)}
</Flex> </Flex>
); );
} }
export default function AccountSwitcher() {
return (
<Accordion allowToggle>
<AccordionItem>
<h2>
<AccordionButton>
<Box as="span" flex="1" textAlign="left">
Accounts
</Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel padding={0}>
<AccountSwitcherList />
</AccordionPanel>
</AccordionItem>
</Accordion>
);
}

79
src/components/layout/desktop-side-nav.tsx
View File

@@ -1,16 +1,14 @@
import { useContext } from "react"; import { Avatar, Box, Button, Flex, FlexProps, Heading, LinkOverlay } from "@chakra-ui/react";
import { Avatar, Button, Flex, FlexProps, Heading, IconButton, LinkOverlay, Text } from "@chakra-ui/react";
import { Link as RouterLink } from "react-router-dom"; import { Link as RouterLink } from "react-router-dom";
import { useCurrentAccount } from "../../hooks/use-current-account"; 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 AccountSwitcher from "./account-switcher";
import { PostModalContext } from "../../providers/post-modal-provider";
import PublishLog from "../publish-log"; import PublishLog from "../publish-log";
import NavItems from "./nav-items"; import NavItems from "./nav-items";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { useContext } from "react";
import { PostModalContext } from "../../providers/post-modal-provider";
import { WritingIcon } from "../icons";
const hideScrollbar = css` const hideScrollbar = css`
-ms-overflow-style: none; -ms-overflow-style: none;
@@ -39,53 +37,36 @@ export default function DesktopSideNav(props: Omit<FlexProps, "children">) {
css={hideScrollbar} css={hideScrollbar}
> >
<Flex direction="column" flexShrink={0} gap="2"> <Flex direction="column" flexShrink={0} gap="2">
<Flex gap="2" alignItems="center" position="relative"> <Flex gap="2" alignItems="center" position="relative" my="2">
<LinkOverlay as={RouterLink} to="/" /> <Avatar src="/apple-touch-icon.png" size="md" />
<Avatar src="/apple-touch-icon.png" size="sm" /> <Heading size="md">
<Heading size="md">noStrudel</Heading> <LinkOverlay as={RouterLink} to="/">
noStrudel
</LinkOverlay>
</Heading>
</Flex> </Flex>
<Flex gap="2" overflow="hidden">
{account ? (
<>
<ProfileButton />
{!account.readonly && (
<IconButton
icon={<EditIcon />}
aria-label="New note"
title="New note"
w="3rem"
h="3rem"
fontSize="1.5rem"
colorScheme="brand"
onClick={() => openModal()}
flexShrink={0}
/>
)}
</>
) : (
<Button as={RouterLink} to="/login" state={{ from: location.pathname }} colorScheme="brand" w="full">
Login
</Button>
)}
</Flex>
<AccountSwitcher />
<NavItems /> <NavItems />
<Box h="4" />
{account && ( {account && (
<Button <>
onClick={() => accountService.logout()} <AccountSwitcher />
leftIcon={<LogoutIcon />} <Button
variant="link" leftIcon={<WritingIcon />}
justifyContent="flex-start" aria-label="Write Note"
pl="2" title="Write Note"
py="2" onClick={() => openModal()}
> colorScheme="brand"
Logout size="lg"
</Button> isDisabled={account.readonly}
>
Write Note
</Button>
</>
)} )}
{account?.readonly && ( {!account && (
<Text color="red.200" textAlign="center"> <Button as={RouterLink} to="/login" state={{ from: location.pathname }} colorScheme="brand" w="full">
Readonly Mode Login
</Text> </Button>
)} )}
</Flex> </Flex>
<PublishLog overflowY="auto" minH="15rem" my="4" /> <PublishLog overflowY="auto" minH="15rem" my="4" />

10
src/components/layout/mobile-bottom-nav.tsx
View File

@@ -3,7 +3,7 @@ import { useContext, useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
import { useCurrentAccount } from "../../hooks/use-current-account"; import { useCurrentAccount } from "../../hooks/use-current-account";
import { PostModalContext } from "../../providers/post-modal-provider"; 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 { UserAvatar } from "../user-avatar";
import MobileSideDrawer from "./mobile-side-drawer"; import MobileSideDrawer from "./mobile-side-drawer";
@@ -42,7 +42,13 @@ export default function MobileBottomNav(props: Omit<FlexProps, "children">) {
colorScheme="brand" colorScheme="brand"
isDisabled={account?.readonly ?? true} isDisabled={account?.readonly ?? true}
/> />
<IconButton icon={<ChatIcon />} aria-label="Messages" onClick={() => navigate(`/dm`)} flexGrow="1" size="md" /> <IconButton
icon={<MessagesIcon />}
aria-label="Messages"
onClick={() => navigate(`/dm`)}
flexGrow="1"
size="md"
/>
<IconButton <IconButton
icon={<NotificationIcon />} icon={<NotificationIcon />}
aria-label="Notifications" aria-label="Notifications"

57
src/components/layout/mobile-side-drawer.tsx
View File

@@ -1,9 +1,9 @@
import { import {
Avatar, Avatar,
Box,
Button, Button,
Drawer, Drawer,
DrawerBody, DrawerBody,
DrawerCloseButton,
DrawerContent, DrawerContent,
DrawerHeader, DrawerHeader,
DrawerOverlay, DrawerOverlay,
@@ -13,12 +13,8 @@ import {
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { Link as RouterLink } from "react-router-dom"; 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 AccountSwitcher from "./account-switcher";
import { useCurrentAccount } from "../../hooks/use-current-account"; import { useCurrentAccount } from "../../hooks/use-current-account";
import accountService from "../../services/account";
import NavItems from "./nav-items"; import NavItems from "./nav-items";
export default function MobileSideDrawer({ ...props }: Omit<DrawerProps, "children">) { export default function MobileSideDrawer({ ...props }: Omit<DrawerProps, "children">) {
@@ -28,42 +24,31 @@ export default function MobileSideDrawer({ ...props }: Omit<DrawerProps, "childr
<Drawer placement="left" {...props}> <Drawer placement="left" {...props}>
<DrawerOverlay /> <DrawerOverlay />
<DrawerContent> <DrawerContent>
<DrawerCloseButton /> <DrawerBody
<DrawerHeader px="2" py="4"> display="flex"
flexDirection="column"
px="4"
pt="4"
pb="8"
overflowY="auto"
overflowX="hidden"
gap="2"
>
{account ? ( {account ? (
<Flex gap="2"> <AccountSwitcher />
<UserAvatar pubkey={account.pubkey} size="sm" noProxy />
<UserLink pubkey={account.pubkey} />
</Flex>
) : ( ) : (
<Flex gap="2"> <Flex gap="2" my="2" alignItems="center">
<Avatar src="/apple-touch-icon.png" size="sm" /> <Avatar src="/apple-touch-icon.png" size="md" />
<Text m={0}>Nostrudel</Text> <Text m={0}>Nostrudel</Text>
</Flex> </Flex>
)} )}
</DrawerHeader> <NavItems />
<DrawerBody padding={0} overflowY="auto" overflowX="hidden"> <Box h="2" />
{account && <AccountSwitcher />} {!account && (
<Flex direction="column" gap="2" padding="2"> <Button as={RouterLink} to="/login" colorScheme="brand">
{!account && ( Login
<Button as={RouterLink} to="/login" colorScheme="brand"> </Button>
Login )}
</Button>
)}
<NavItems />
{account && (
<Button
onClick={() => accountService.logout()}
leftIcon={<LogoutIcon />}
justifyContent="flex-start"
variant="link"
pl="2"
py="2"
>
Logout
</Button>
)}
</Flex>
</DrawerBody> </DrawerBody>
</DrawerContent> </DrawerContent>
</Drawer> </Drawer>

25
src/components/layout/nav-items.tsx
View File

@@ -2,7 +2,7 @@ import { AbsoluteCenter, Box, Button, ButtonProps, Divider, Text } from "@chakra
import { useLoaderData, useLocation, useNavigate } from "react-router-dom"; import { useLoaderData, useLocation, useNavigate } from "react-router-dom";
import { import {
BadgeIcon, BadgeIcon,
ChatIcon, MessagesIcon,
CommunityIcon, CommunityIcon,
EmojiIcon, EmojiIcon,
FeedIcon, FeedIcon,
@@ -10,12 +10,16 @@ import {
ListIcon, ListIcon,
LiveStreamIcon, LiveStreamIcon,
NotificationIcon, NotificationIcon,
ProfileIcon,
RelayIcon, RelayIcon,
SearchIcon, SearchIcon,
SettingsIcon, SettingsIcon,
ToolsIcon, ToolsIcon,
LogoutIcon,
} from "../icons"; } from "../icons";
import { useCurrentAccount } from "../../hooks/use-current-account"; import { useCurrentAccount } from "../../hooks/use-current-account";
import { nip19 } from "nostr-tools";
import accountService from "../../services/account";
export default function NavItems() { export default function NavItems() {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -24,7 +28,6 @@ export default function NavItems() {
const buttonProps: ButtonProps = { const buttonProps: ButtonProps = {
py: "2", py: "2",
pl: "2",
justifyContent: "flex-start", justifyContent: "flex-start",
variant: "link", variant: "link",
}; };
@@ -66,7 +69,7 @@ export default function NavItems() {
</Button> </Button>
<Button <Button
onClick={() => navigate("/dm")} onClick={() => navigate("/dm")}
leftIcon={<ChatIcon />} leftIcon={<MessagesIcon />}
colorScheme={active === "dm" ? "brand" : undefined} colorScheme={active === "dm" ? "brand" : undefined}
{...buttonProps} {...buttonProps}
> >
@@ -82,6 +85,15 @@ export default function NavItems() {
> >
Search Search
</Button> </Button>
{account?.pubkey && (
<Button
onClick={() => navigate("/u/" + nip19.npubEncode(account.pubkey))}
leftIcon={<ProfileIcon />}
{...buttonProps}
>
Profile
</Button>
)}
<Button <Button
onClick={() => navigate("/relays")} onClick={() => navigate("/relays")}
leftIcon={<RelayIcon />} leftIcon={<RelayIcon />}
@@ -149,7 +161,7 @@ export default function NavItems() {
> >
Tools Tools
</Button> </Button>
<Divider my="2" /> <Box h="4" />
<Button <Button
onClick={() => navigate("/settings")} onClick={() => navigate("/settings")}
leftIcon={<SettingsIcon />} leftIcon={<SettingsIcon />}
@@ -158,6 +170,11 @@ export default function NavItems() {
> >
Settings Settings
</Button> </Button>
{account && (
<Button onClick={() => accountService.logout()} leftIcon={<LogoutIcon />} {...buttonProps}>
Logout
</Button>
)}
</> </>
); );
} }

39
src/components/layout/profile-button.tsx
View File

@@ -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 (
<LinkBox
borderRadius="lg"
borderWidth={1}
p="2"
display="flex"
gap="2"
alignItems="center"
flexGrow={1}
overflow="hidden"
>
<UserAvatar pubkey={account.pubkey} noProxy size="sm" />
<LinkOverlay
as={RouterLink}
to={`/u/${nip19.npubEncode(account.pubkey)}`}
whiteSpace="nowrap"
fontWeight="bold"
fontSize="lg"
title="View profile"
isTruncated
>
{getUserDisplayName(metadata, account.pubkey)}
</LinkOverlay>
</LinkBox>
);
}

2
src/components/note/index.tsx
View File

@@ -38,7 +38,7 @@ import BookmarkButton from "./components/bookmark-button";
import { useCurrentAccount } from "../../hooks/use-current-account"; import { useCurrentAccount } from "../../hooks/use-current-account";
import NoteReactions from "./components/note-reactions"; import NoteReactions from "./components/note-reactions";
import ReplyForm from "../../views/note/components/reply-form"; 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 Timestamp from "../timestamp";
import OpenInDrawerButton from "../open-in-drawer-button"; import OpenInDrawerButton from "../open-in-drawer-button";
import { getSharableEventAddress } from "../../helpers/nip19"; import { getSharableEventAddress } from "../../helpers/nip19";

26
src/components/timestamp.tsx
View File

@@ -1,19 +1,27 @@
import dayjs from "dayjs"; import dayjs from "dayjs";
import { Box, BoxProps } from "@chakra-ui/react"; import { Box, BoxProps } from "@chakra-ui/react";
const aDayAgo = dayjs().subtract(1, "day");
export default function Timestamp({ timestamp, ...props }: { timestamp: number } & Omit<BoxProps, "children">) { export default function Timestamp({ timestamp, ...props }: { timestamp: number } & Omit<BoxProps, "children">) {
const date = dayjs.unix(timestamp); 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 ( return (
<Box <Box as="time" dateTime={date.toISOString()} title={date.format("LLL")} {...props}>
as="time" {display}
dateTime={date.toISOString()}
title={date.isBefore(aDayAgo) ? date.fromNow() : date.format("LLL")}
{...props}
>
{date.isBefore(aDayAgo) ? date.format("L LT") : date.fromNow()}
</Box> </Box>
); );
} }

4
src/views/user/components/user-profile-menu.tsx
View File

@@ -5,7 +5,7 @@ import { useCopyToClipboard } from "react-use";
import { CustomMenuIconButton, MenuIconButtonProps } from "../../../components/menu-icon-button"; import { CustomMenuIconButton, MenuIconButtonProps } from "../../../components/menu-icon-button";
import { import {
ChatIcon, MessagesIcon,
ClipboardIcon, ClipboardIcon,
CodeIcon, CodeIcon,
ExternalLinkIcon, ExternalLinkIcon,
@@ -63,7 +63,7 @@ export const UserProfileMenu = ({
{isMuted ? "Unmute User" : "Mute User"} {isMuted ? "Unmute User" : "Mute User"}
</MenuItem> </MenuItem>
)} )}
<MenuItem icon={<ChatIcon fontSize="1.5em" />} as={RouterLink} to={`/dm/${nip19.npubEncode(pubkey)}`}> <MenuItem icon={<MessagesIcon fontSize="1.5em" />} as={RouterLink} to={`/dm/${nip19.npubEncode(pubkey)}`}>
Direct messages Direct messages
</MenuItem> </MenuItem>
<MenuItem icon={<SpyIcon fontSize="1.5em" />} onClick={() => loginAsUser()}> <MenuItem icon={<SpyIcon fontSize="1.5em" />} onClick={() => loginAsUser()}>