Merge branch 'next'

hzrd149 · Oct 3, 2023 · b032922 · b032922
2 parents 8e44b7a + db8b2d6
commit b032922
Show file tree

Hide file tree

Showing 58 changed files with 886 additions and 499 deletions.
diff --git a/.github/workflows/docker-image.yml b/.github/workflows/docker-image.yml
@@ -1,9 +1,7 @@
 name: Create and publish a Docker image
 # copied from https://blog.pradumnasaraf.dev/publish-image-on-ghcr
 
-on:
-  push:
-    branches: ["master"]
+on: push
 
 env:
   REGISTRY: ghcr.io
@@ -32,10 +30,18 @@ jobs:
         uses: docker/metadata-action@v4
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=schedule
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=ref,event=branch
+            type=ref,event=pr
+            type=sha
       - name: Build and push Docker image
         uses: docker/build-push-action@v4
         with:
           context: .
           push: true
-          tags: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,33 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Create Release Pull Request
+        uses: changesets/action@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "react-force-graph-2d": "^1.25.1",
     "react-force-graph-3d": "^1.23.1",
     "react-hook-form": "^7.45.4",
+    "react-mosaic-component": "^6.1.0",
     "react-photo-album": "^2.3.0",
     "react-qr-barcode-scanner": "^1.0.6",
     "react-router-dom": "^6.15.0",

diff --git a/src/app.tsx b/src/app.tsx
@@ -58,7 +58,6 @@ import DrawerSubViewProvider from "./providers/drawer-sub-view-provider";
 import CommunitiesHomeView from "./views/communities";
 import CommunityFindByNameView from "./views/community/find-by-name";
 import CommunityView from "./views/community/index";
-import StreamModerationView from "./views/tools/stream-moderation";
 import PopularRelaysView from "./views/relays/popular";
 
 const NetworkView = React.lazy(() => import("./views/tools/network"));
@@ -67,6 +66,7 @@ const StreamsView = React.lazy(() => import("./views/streams"));
 const StreamView = React.lazy(() => import("./views/streams/stream"));
 const SearchView = React.lazy(() => import("./views/search"));
 const MapView = React.lazy(() => import("./views/map"));
+const StreamModerationView = React.lazy(() => import("./views/tools/stream-moderation"));
 
 const overrideReactTextareaAutocompleteStyles = css`
   .rta__autocomplete {
@@ -127,6 +127,14 @@ const router = createHashRouter([
       </PageProviders>
     ),
   },
+  {
+    path: "tools/stream-moderation",
+    element: (
+      <PageProviders>
+        <StreamModerationView />
+      </PageProviders>
+    ),
+  },
   {
     path: "map",
     element: <MapView />,
@@ -181,7 +189,6 @@ const router = createHashRouter([
           { path: "", element: <ToolsHomeView /> },
           { path: "network", element: <NetworkView /> },
           { path: "network-graph", element: <NetworkGraphView /> },
-          { path: "stream-moderation", element: <StreamModerationView /> },
         ],
       },
       {

diff --git a/src/components/event-reactions.tsx b/src/components/event-reactions.tsx
@@ -66,7 +66,7 @@ export default function EventReactionButtons({ event, max }: { event: NostrEvent
           url={group.url}
           count={group.count}
           onClick={() => addReaction(group.emoji, group.url)}
-          colorScheme={account && group.pubkeys.includes(account?.pubkey) ? "brand" : undefined}
+          colorScheme={account && group.pubkeys.includes(account?.pubkey) ? "primary" : undefined}
         />
       ))}
       <Button onClick={detailsModal.onOpen}>Show all</Button>

diff --git 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
@@ -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>
-  );
-}
diff --git 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,54 +37,37 @@ 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
+        {account && (
+          <>
+            <AccountSwitcher />
+            <Button
+              leftIcon={<WritingIcon />}
+              aria-label="Write Note"
+              title="Write Note"
+              onClick={() => openModal()}
+              colorScheme="primary"
+              size="lg"
+              isDisabled={account.readonly}
+            >
+              Write Note
             </Button>
-          )}
-        </Flex>
-        <AccountSwitcher />
+          </>
+        )}
         <NavItems />
-        {account && (
-          <Button
-            onClick={() => accountService.logout()}
-            leftIcon={<LogoutIcon />}
-            variant="link"
-            justifyContent="flex-start"
-            pl="2"
-            py="2"
-          >
-            Logout
+        <Box h="4" />
+        {!account && (
+          <Button as={RouterLink} to="/login" state={{ from: location.pathname }} colorScheme="primary" w="full">
+            Login
           </Button>
         )}
-        {account?.readonly && (
-          <Text color="red.200" textAlign="center">
-            Readonly Mode
-          </Text>
-        )}
       </Flex>
       <PublishLog overflowY="auto" minH="15rem" my="4" />
     </Flex>