feat: context menu

TalismanSociety · Jan 21, 2025 · bf06c8a · bf06c8a
1 parent 5e9eb62
commit bf06c8a
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 46 deletions.
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Settings/Accounts.tsx b/apps/extension/src/ui/apps/dashboard/routes/Settings/Accounts.tsx
@@ -7,7 +7,6 @@ import { Spacer } from "@talisman/components/Spacer"
 import { AnalyticsPage } from "@ui/api/analytics"
 import { DashboardLayout } from "@ui/apps/dashboard/layout"
 import { DeleteFolderModal } from "@ui/domains/Account/DeleteFolderModal"
-import { ExportAllAccountsButton } from "@ui/domains/Account/ExportAllAccountsButton"
 import {
   ManageAccountsLists,
   ManageAccountsProvider,
@@ -37,15 +36,7 @@ const Content = () => {
 
   return (
     <>
-      <HeaderBlock
-        title={
-          <div className="flex w-full items-center">
-            <div className="grow">{t("Manage Accounts")}</div>
-            <ExportAllAccountsButton className="text-sm" />
-          </div>
-        }
-        text={t("Organise and sort your accounts")}
-      />
+      <HeaderBlock title={t("Manage Accounts")} text={t("Organise and sort your accounts")} />
       <Spacer large />
       <ManageAccountsProvider>
         <ManageAccountsToolbar analytics={ANALYTICS_PAGE} />

diff --git a/apps/extension/src/ui/apps/popup/pages/ManageAccounts.tsx b/apps/extension/src/ui/apps/popup/pages/ManageAccounts.tsx
@@ -6,7 +6,6 @@ import { IconButton } from "talisman-ui"
 
 import { AnalyticsPage, sendAnalyticsEvent } from "@ui/api/analytics"
 import { DeleteFolderModal } from "@ui/domains/Account/DeleteFolderModal"
-import { ExportAllAccountsButton } from "@ui/domains/Account/ExportAllAccountsButton"
 import {
   ManageAccountsLists,
   ManageAccountsProvider,
@@ -40,7 +39,6 @@ const Header = () => {
         <ChevronLeftIcon />
       </IconButton>
       <div className="grow font-bold">{t("Manage Accounts")}</div>
-      <ExportAllAccountsButton className="text-xs" />
     </header>
   )
 }

diff --git a/...mains/Account/ExportAllAccountsButton.tsx → ...omains/Account/ExportAllAccountsModal.tsx b/...mains/Account/ExportAllAccountsButton.tsx → ...omains/Account/ExportAllAccountsModal.tsx
@@ -1,48 +1,18 @@
 import { yupResolver } from "@hookform/resolvers/yup"
-import { classNames } from "@talismn/util"
 import { FC, useCallback, useEffect, useMemo } from "react"
 import { useForm } from "react-hook-form"
 import { Trans, useTranslation } from "react-i18next"
-import {
-  Button,
-  FormFieldContainer,
-  FormFieldInputText,
-  Modal,
-  ModalDialog,
-  useOpenClose,
-} from "talisman-ui"
+import { Button, FormFieldContainer, FormFieldInputText, Modal, ModalDialog } from "talisman-ui"
 import * as yup from "yup"
 
 import { CapsLockWarningMessage } from "@talisman/components/CapsLockWarningMessage"
 import { PasswordStrength } from "@talisman/components/PasswordStrength"
 import downloadJson from "@talisman/util/downloadJson"
 import { api } from "@ui/api"
-import { useAccounts } from "@ui/state"
 
 import { PasswordUnlock, usePasswordUnlock } from "./PasswordUnlock"
 
-export const ExportAllAccountsButton: FC<{ className?: string }> = ({ className }) => {
-  const { t } = useTranslation()
-  const accounts = useAccounts()
-  const { isOpen, open, close } = useOpenClose()
-
-  if (!accounts.length) return null
-
-  return (
-    <>
-      <button
-        type="button"
-        className={classNames("text-grey-400 hover:text-body", className)}
-        onClick={open}
-      >
-        {t("Export all")}
-      </button>
-      <ExportAllAccountsModal isOpen={isOpen} onClose={close} />
-    </>
-  )
-}
-
-const ExportAllAccountsModal: FC<{ isOpen: boolean; onClose: () => void }> = ({
+export const ExportAllAccountsModal: FC<{ isOpen: boolean; onClose: () => void }> = ({
   isOpen,
   onClose,
 }) => {

diff --git a/apps/extension/src/ui/domains/Account/ManageAccounts/ManageAccountsToolbar.tsx b/apps/extension/src/ui/domains/Account/ManageAccounts/ManageAccountsToolbar.tsx
@@ -1,17 +1,28 @@
-import { FolderPlusIcon, PlusIcon } from "@talismn/icons"
+import { FolderPlusIcon, MoreHorizontalIcon, PlusIcon } from "@talismn/icons"
 import { classNames } from "@talismn/util"
 import { FC, ReactNode, useCallback } from "react"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
-import { Tooltip, TooltipContent, TooltipTrigger } from "talisman-ui"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  useOpenClose,
+} from "talisman-ui"
 
 import { SearchInput } from "@talisman/components/SearchInput"
 import { api } from "@ui/api"
 import { AnalyticsPage } from "@ui/api/analytics"
 import { useNewFolderModal } from "@ui/domains/Account/NewFolderModal"
 import { PortfolioToolbarButton } from "@ui/domains/Portfolio/PortfolioToolbarButton"
+import { useAccounts } from "@ui/state"
 import { IS_POPUP } from "@ui/util/constants"
 
+import { ExportAllAccountsModal } from "../ExportAllAccountsModal"
 import { useManageAccounts } from "./ManageAccountsProvider"
 
 export const ManageAccountsToolbar: FC<{
@@ -54,6 +65,7 @@ export const ManageAccountsToolbar: FC<{
       </div>
       <ToolbarButton icon={FolderPlusIcon} onClick={openNewFolderModal} label={t("Add Folder")} />
       <ToolbarButton icon={PlusIcon} onClick={addNewAccountClick} label={t("Add Account")} />
+      <AccountsContextMenu />
     </div>
   )
 }
@@ -79,3 +91,31 @@ const ToolbarButton: FC<{
     {IS_POPUP && !label && <TooltipContent>{label}</TooltipContent>}
   </Tooltip>
 )
+
+const AccountsContextMenu = () => {
+  const { t } = useTranslation()
+  const accounts = useAccounts()
+  const { isOpen: isOpenExportAll, open: openExportAll, close: closeExportAll } = useOpenClose()
+
+  if (!accounts.length) return null
+
+  return (
+    <>
+      <ContextMenu placement="bottom-end">
+        <ContextMenuTrigger
+          className={classNames(
+            "bg-grey-900 hover:bg-grey-800 text-body-secondary border-content flex items-center justify-center rounded-sm",
+            "focus-visible:border-grey-700 border border-transparent ring-transparent",
+            "@2xl:size-[4.4rem] size-[3.6rem]",
+          )}
+        >
+          <MoreHorizontalIcon />
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem onClick={openExportAll}>{t("Export all")}</ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+      <ExportAllAccountsModal isOpen={isOpenExportAll} onClose={closeExportAll} />
+    </>
+  )
+}