remove astral link

src/components/icons.tsx

@@ -1,12 +1,10 @@
 import { createIcon, IconProps } from "@chakra-ui/icons";
 
-import astralIcon from "./icons/astral.png";
 import nostrGuruIcon from "./icons/nostr-guru.jpg";
 import brbIcon from "./icons/brb.png";
 import snortSocialIcon from "./icons/snort-social.png";
 
 export const IMAGE_ICONS = {
-  astralIcon,
   nostrGuruIcon,
   brbIcon,
   snortSocialIcon,

src/components/note/note-menu.tsx

@@ -38,14 +38,6 @@ export const NoteMenu = ({ event }: { event: NostrEvent }) => {
         >
           Open in Nostr.guru
         </MenuItem>
-        <MenuItem
-          as="a"
-          icon={<Avatar src={IMAGE_ICONS.astralIcon} size="xs" />}
-          href={`https://astral.ninja/${noteId}`}
-          target="_blank"
-        >
-          Open in astral
-        </MenuItem>
         <MenuItem
           as="a"
           icon={<Avatar src={IMAGE_ICONS.brbIcon} size="xs" />}

src/components/page.tsx

@@ -1,24 +1,5 @@
 import React from "react";
-import {
-  Avatar,
-  Button,
-  Container,
-  Flex,
-  Heading,
-  IconButton,
-  LinkOverlay,
-  Text,
-  VStack,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  MenuItemOption,
-  MenuGroup,
-  MenuOptionGroup,
-  MenuDivider,
-  Box,
-} from "@chakra-ui/react";
+import { Avatar, Button, Container, Flex, Heading, IconButton, LinkOverlay, Text, VStack } from "@chakra-ui/react";
 import { Link, useNavigate } from "react-router-dom";
 import { FeedIcon, LogoutIcon, NotificationIcon, ProfileIcon, SettingsIcon } from "./icons";
 import { ErrorBoundary } from "./error-boundary";
@@ -31,28 +12,15 @@ import { ReloadPrompt } from "./reload-prompt";
 import { PostModalProvider } from "../providers/post-modal-provider";
 import { useReadonlyMode } from "../hooks/use-readonly-mode";
 import { ProfileButton } from "./profile-button";
-import { UserAvatar } from "./user-avatar";
 import useSubject from "../hooks/use-subject";
+import { UserAvatarLink } from "./user-avatar-link";
 
 const MobileProfileHeader = () => {
-  const navigate = useNavigate();
   const pubkey = useSubject(identity.pubkey);
 
   return (
     <Flex justifyContent="space-between" px="2" pt="2">
-      <Menu>
-        <MenuButton as={Box}>
-          <UserAvatar pubkey={pubkey} size="sm" />
-        </MenuButton>
-        <MenuList>
-          <MenuItem icon={<ProfileIcon />} as={Link} to={`/u/${pubkey}`}>
-            Profile
-          </MenuItem>
-          <MenuItem icon={<LogoutIcon />} onClick={() => identity.logout()}>
-            Logout
-          </MenuItem>
-        </MenuList>
-      </Menu>
+      <UserAvatarLink pubkey={pubkey} size="sm" />
       <IconButton
         variant="ghost"
         icon={<NotificationIcon />}

src/views/settings/index.tsx

@@ -30,7 +30,7 @@ import settings from "../../services/settings";
 import { clearCacheData, deleteDatabase } from "../../services/db";
 import { RelayUrlInput } from "../../components/relay-url-input";
 import { useNavigate } from "react-router-dom";
-import { useAsyncFn } from "react-use";
+import identity from "../../services/identity";
 
 export const SettingsView = () => {
   const navigate = useNavigate();
@@ -210,6 +210,9 @@ export const SettingsView = () => {
           </AccordionPanel>
         </AccordionItem>
       </Accordion>
+      <Flex gap="2">
+        <Button onClick={() => identity.logout()}>Logout</Button>
+      </Flex>
     </Flex>
   );
 };

src/views/user/components/user-profile-menu.tsx

@@ -31,14 +31,6 @@ export const UserProfileMenu = ({ pubkey, ...props }: { pubkey: string } & Omit<
       >
         Open in Nostr.guru
       </MenuItem>
-      <MenuItem
-        as="a"
-        icon={<Avatar src={IMAGE_ICONS.astralIcon} size="xs" />}
-        href={`https://astral.ninja/${npub}`}
-        target="_blank"
-      >
-        Open in astral
-      </MenuItem>
       <MenuItem
         as="a"
         icon={<Avatar src={IMAGE_ICONS.brbIcon} size="xs" />}

src/views/user/index.tsx

@@ -24,8 +24,9 @@ import { UserTipButton } from "../../components/user-tip-button";
 import { UserDnsIdentityIcon } from "../../components/user-dns-identity";
 import { truncatedId } from "../../helpers/nostr-event";
 import { Bech32Prefix, normalizeToBech32 } from "../../helpers/nip-19";
-import { KeyIcon } from "../../components/icons";
+import { KeyIcon, SettingsIcon } from "../../components/icons";
 import { CopyIconButton } from "../../components/copy-icon-button";
+import identity from "../../services/identity";
 
 const tabs = [
   { label: "Notes", path: "notes" },
@@ -47,6 +48,7 @@ const UserView = () => {
 
   const metadata = useUserMetadata(pubkey, [], true);
   const npub = normalizeToBech32(pubkey, Bech32Prefix.Pubkey);
+  const isSelf = pubkey === identity.pubkey.value;
 
   const header = (
     <Flex direction="column" gap="2" px="2" pt="2">
@@ -58,15 +60,15 @@ const UserView = () => {
               <Heading size={isMobile ? "md" : "lg"}>{getUserDisplayName(metadata, pubkey)}</Heading>
               <UserDnsIdentityIcon pubkey={pubkey} />
             </Flex>
-            <ButtonGroup>
+            <Flex gap="2">
               <UserTipButton pubkey={pubkey} size="xs" />
               <UserProfileMenu pubkey={pubkey} />
-            </ButtonGroup>
+            </Flex>
           </Flex>
           {!metadata ? <SkeletonText /> : <Text>{metadata?.about}</Text>}
         </Flex>
       </Flex>
-      <Flex wrap="wrap" gap={isMobile ? "0" : "4"}>
+      <Flex wrap="wrap" gap="2">
         {metadata?.website && (
           <Text>
             <LinkIcon />{" "}
@@ -79,11 +81,20 @@ const UserView = () => {
           <KeyIcon /> {truncatedId(npub ?? "", 10)}{" "}
           <CopyIconButton text={npub ?? ""} title="Copy npub" aria-label="Copy npub" />
         </Text>
-        <ButtonGroup ml="auto">
+        <Flex gap="2" ml="auto">
+          {isMobile && isSelf && (
+            <IconButton
+              icon={<SettingsIcon />}
+              aria-label="Settings"
+              title="Settings"
+              size="sm"
+              onClick={() => navigate("/settings")}
+            />
+          )}
           <Button colorScheme="brand" size="sm">
             Follow
           </Button>
-        </ButtonGroup>
+        </Flex>
       </Flex>
     </Flex>
   );
@@ -101,7 +112,7 @@ const UserView = () => {
         index={activeTab}
         onChange={(v) => navigate(tabs[v].path)}
       >
-        <TabList overflowY="auto">
+        <TabList overflowX="auto" overflowY="hidden" flexShrink={0}>
           {tabs.map(({ label }) => (
             <Tab key={label}>{label}</Tab>
           ))}