cleanup account switcher

improve date display on notes
2025-09-19 12:00:32 +02:00 · 2023-10-02 12:49:17 -05:00
parent e23aa9f69f
commit 49a0f3b386
10 changed files with 164 additions and 205 deletions
--- 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",
--- 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 (
-    <Box display="flex" gap="2" alignItems="center" cursor="pointer" onClick={handleClick}>
-      <UserAvatar pubkey={pubkey} size="sm" />
-      <Box flex={1} overflow="hidden">
-        <Text isTruncated>{getUserDisplayName(metadata, pubkey)}</Text>
-        <AccountInfoBadge fontSize="0.7em" account={account} />
-      </Box>
+    <Box display="flex" gap="2" alignItems="center" cursor="pointer">
+      <Flex as="button" onClick={handleClick} flex={1} gap="2">
+        <UserAvatar pubkey={pubkey} size="md" />
+        <Flex overflow="hidden" direction="column" alignItems="flex-start">
+          <Text isTruncated>{getUserDisplayName(metadata, pubkey)}</Text>
+          <AccountInfoBadge fontSize="0.7em" account={account} />
+        </Flex>
+      </Flex>
      <IconButton
        icon={<CloseIcon />}
        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 (
-    <Flex gap="2" direction="column" padding="2">
-      {otherAccounts.map((account) => (
-        <AccountItem key={account.pubkey} account={account} />
-      ))}
-      <Button
-        size="sm"
-        leftIcon={<AddIcon />}
-        onClick={() => {
-          accountService.logout();
-          navigate("/login", { state: { from: location.pathname } });
-        }}
+    <Flex direction="column" gap="2">
+      <Box
+        as="button"
+        borderRadius="30"
+        borderWidth={1}
+        display="flex"
+        gap="2"
+        mb="2"
+        alignItems="center"
+        flexGrow={1}
+        overflow="hidden"
+        onClick={onToggle}
      >
-        Add Account
-      </Button>
+        <UserAvatar pubkey={account.pubkey} noProxy size="md" />
+        <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>
  );
 }
-
-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>
-  );
-}
--- 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<FlexProps, "children">) {
      css={hideScrollbar}
    >
      <Flex direction="column" flexShrink={0} gap="2">
-        <Flex gap="2" alignItems="center" position="relative">
-          <LinkOverlay as={RouterLink} to="/" />
-          <Avatar src="/apple-touch-icon.png" size="sm" />
-          <Heading size="md">noStrudel</Heading>
+        <Flex gap="2" alignItems="center" position="relative" my="2">
+          <Avatar src="/apple-touch-icon.png" size="md" />
+          <Heading size="md">
+            <LinkOverlay as={RouterLink} to="/">
+              noStrudel
+            </LinkOverlay>
+          </Heading>
        </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 />
+        <Box h="4" />
        {account && (
-          <Button
-            onClick={() => accountService.logout()}
-            leftIcon={<LogoutIcon />}
-            variant="link"
-            justifyContent="flex-start"
-            pl="2"
-            py="2"
-          >
-            Logout
-          </Button>
+          <>
+            <AccountSwitcher />
+            <Button
+              leftIcon={<WritingIcon />}
+              aria-label="Write Note"
+              title="Write Note"
+              onClick={() => openModal()}
+              colorScheme="brand"
+              size="lg"
+              isDisabled={account.readonly}
+            >
+              Write Note
+            </Button>
+          </>
        )}
-        {account?.readonly && (
-          <Text color="red.200" textAlign="center">
-            Readonly Mode
-          </Text>
+        {!account && (
+          <Button as={RouterLink} to="/login" state={{ from: location.pathname }} colorScheme="brand" w="full">
+            Login
+          </Button>
        )}
      </Flex>
      <PublishLog overflowY="auto" minH="15rem" my="4" />
--- 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<FlexProps, "children">) {
          colorScheme="brand"
          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
          icon={<NotificationIcon />}
          aria-label="Notifications"
--- 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<DrawerProps, "children">) {
@@ -28,42 +24,31 @@ export default function MobileSideDrawer({ ...props }: Omit<DrawerProps, "childr
    <Drawer placement="left" {...props}>
      <DrawerOverlay />
      <DrawerContent>
-        <DrawerCloseButton />
-        <DrawerHeader px="2" py="4">
+        <DrawerBody
+          display="flex"
+          flexDirection="column"
+          px="4"
+          pt="4"
+          pb="8"
+          overflowY="auto"
+          overflowX="hidden"
+          gap="2"
+        >
          {account ? (
-            <Flex gap="2">
-              <UserAvatar pubkey={account.pubkey} size="sm" noProxy />
-              <UserLink pubkey={account.pubkey} />
-            </Flex>
+            <AccountSwitcher />
          ) : (
-            <Flex gap="2">
-              <Avatar src="/apple-touch-icon.png" size="sm" />
+            <Flex gap="2" my="2" alignItems="center">
+              <Avatar src="/apple-touch-icon.png" size="md" />
              <Text m={0}>Nostrudel</Text>
            </Flex>
          )}
-        </DrawerHeader>
-        <DrawerBody padding={0} overflowY="auto" overflowX="hidden">
-          {account && <AccountSwitcher />}
-          <Flex direction="column" gap="2" padding="2">
-            {!account && (
-              <Button as={RouterLink} to="/login" colorScheme="brand">
-                Login
-              </Button>
-            )}
-            <NavItems />
-            {account && (
-              <Button
-                onClick={() => accountService.logout()}
-                leftIcon={<LogoutIcon />}
-                justifyContent="flex-start"
-                variant="link"
-                pl="2"
-                py="2"
-              >
-                Logout
-              </Button>
-            )}
-          </Flex>
+          <NavItems />
+          <Box h="2" />
+          {!account && (
+            <Button as={RouterLink} to="/login" colorScheme="brand">
+              Login
+            </Button>
+          )}
        </DrawerBody>
      </DrawerContent>
    </Drawer>
--- 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() {
          </Button>
          <Button
            onClick={() => navigate("/dm")}
-            leftIcon={<ChatIcon />}
+            leftIcon={<MessagesIcon />}
            colorScheme={active === "dm" ? "brand" : undefined}
            {...buttonProps}
          >
@@ -82,6 +85,15 @@ export default function NavItems() {
      >
        Search
      </Button>
+      {account?.pubkey && (
+        <Button
+          onClick={() => navigate("/u/" + nip19.npubEncode(account.pubkey))}
+          leftIcon={<ProfileIcon />}
+          {...buttonProps}
+        >
+          Profile
+        </Button>
+      )}
      <Button
        onClick={() => navigate("/relays")}
        leftIcon={<RelayIcon />}
@@ -149,7 +161,7 @@ export default function NavItems() {
      >
        Tools
      </Button>
-      <Divider my="2" />
+      <Box h="4" />
      <Button
        onClick={() => navigate("/settings")}
        leftIcon={<SettingsIcon />}
@@ -158,6 +170,11 @@ export default function NavItems() {
      >
        Settings
      </Button>
+      {account && (
+        <Button onClick={() => accountService.logout()} leftIcon={<LogoutIcon />} {...buttonProps}>
+          Logout
+        </Button>
+      )}
    </>
  );
 }
--- a/src/components/layout/profile-button.tsx
+++ b/src/components/layout/profile-button.tsx
@@ -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>
-  );
-}
--- 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";
--- 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<BoxProps, "children">) {
  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 (
-    <Box
-      as="time"
-      dateTime={date.toISOString()}
-      title={date.isBefore(aDayAgo) ? date.fromNow() : date.format("LLL")}
-      {...props}
-    >
-      {date.isBefore(aDayAgo) ? date.format("L LT") : date.fromNow()}
+    <Box as="time" dateTime={date.toISOString()} title={date.format("LLL")} {...props}>
+      {display}
    </Box>
  );
 }
--- 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"}
          </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
        </MenuItem>
        <MenuItem icon={<SpyIcon fontSize="1.5em" />} onClick={() => loginAsUser()}>