From 69b6735497e37677ac7ef3bfb6a140abfb8fc0f1 Mon Sep 17 00:00:00 2001
From: Eric Vicenti <eric@vicenti.net>
Date: Tue, 30 Apr 2024 14:35:55 -0700
Subject: [PATCH] Create dropdown button

---
 .../packages/app/components/new-group.tsx     | 10 ++-
 .../app/components/options-dropdown.tsx       | 26 ++++---
 .../app/components/titlebar-common.tsx        | 75 +++++++++++++++----
 3 files changed, 85 insertions(+), 26 deletions(-)

diff --git a/frontend/packages/app/components/new-group.tsx b/frontend/packages/app/components/new-group.tsx
index 03c574a77..d3efc9f15 100644
--- a/frontend/packages/app/components/new-group.tsx
+++ b/frontend/packages/app/components/new-group.tsx
@@ -6,7 +6,7 @@ import {SubmitHandler, useForm} from 'react-hook-form'
 import * as z from 'zod'
 import {useCreateGroup} from '../models/groups'
 import {useNavigate} from '../utils/useNavigate'
-import {AppDialog, DialogTitle} from './dialog'
+import {AppDialog, DialogTitle, useAppDialog} from './dialog'
 import {FormInput} from './form-input'
 
 const newGroupSchema = z.object({
@@ -117,3 +117,11 @@ export function CreateGroupButton({
     />
   )
 }
+
+function AddGroupDialog({onClose}: {onClose: () => void}) {
+  return <AddGroupForm onClose={onClose} isOpen />
+}
+
+export function useCreateGroupDialog() {
+  return useAppDialog(AddGroupDialog)
+}
diff --git a/frontend/packages/app/components/options-dropdown.tsx b/frontend/packages/app/components/options-dropdown.tsx
index 3aa12571d..8249803ce 100644
--- a/frontend/packages/app/components/options-dropdown.tsx
+++ b/frontend/packages/app/components/options-dropdown.tsx
@@ -13,6 +13,7 @@ import {usePopoverState} from '../use-popover-state'
 export type MenuItemType = {
   key: string
   label: string
+  subLabel?: string
   icon: FC
   onPress: () => void
 }
@@ -20,10 +21,12 @@ export type MenuItemType = {
 export function OptionsDropdown({
   menuItems,
   hiddenUntilItemHover,
+  button,
 }: {
   menuItems: (MenuItemType | null)[]
   hiddenUntilItemHover?: boolean
   hover?: boolean
+  button?: JSX.Element
 }) {
   const popoverState = usePopoverState()
   return (
@@ -35,16 +38,18 @@ export function OptionsDropdown({
     >
       <Popover {...popoverState} placement="bottom-end">
         <Popover.Trigger asChild>
-          <Button
-            size="$1"
-            circular
-            data-trigger
-            onPress={(e) => {
-              // because we are nested in the outer button, we need to stop propagation or else onPress is triggered by parent button
-              e.stopPropagation()
-            }}
-            icon={MoreHorizontal}
-          />
+          {button || (
+            <Button
+              size="$1"
+              circular
+              data-trigger
+              onPress={(e) => {
+                // because we are nested in the outer button, we need to stop propagation or else onPress is triggered by parent button
+                e.stopPropagation()
+              }}
+              icon={MoreHorizontal}
+            />
+          )}
         </Popover.Trigger>
         <Popover.Content
           padding={0}
@@ -72,6 +77,7 @@ export function OptionsDropdown({
                         popoverState.onOpenChange(false)
                         item.onPress()
                       }}
+                      subTitle={item.subLabel}
                       title={item.label}
                       icon={item.icon}
                     />
diff --git a/frontend/packages/app/components/titlebar-common.tsx b/frontend/packages/app/components/titlebar-common.tsx
index 5a3383b20..370a81195 100644
--- a/frontend/packages/app/components/titlebar-common.tsx
+++ b/frontend/packages/app/components/titlebar-common.tsx
@@ -35,8 +35,10 @@ import {
   ArrowLeftFromLine,
   ArrowRightFromLine,
   ArrowUpRight,
+  Book,
   Copy,
   ExternalLink,
+  FileText,
   Link,
   Pencil,
   Plus,
@@ -72,7 +74,7 @@ import {EditDocButton} from './edit-doc-button'
 import {useEditGroupInfoDialog} from './edit-group-info'
 import {useEditProfileDialog} from './edit-profile-dialog'
 import {useFavoriteMenuItem} from './favoriting'
-import {CreateGroupButton} from './new-group'
+import {useCreateGroupDialog} from './new-group'
 import {MenuItemType, OptionsDropdown} from './options-dropdown'
 import {usePublishGroupDialog} from './publish-group'
 import {TitleBarProps} from './titlebar'
@@ -744,48 +746,91 @@ function NewDocumentButton({
   )
 }
 
+function CreateDropdown({groupVariant}: {groupVariant?: GroupVariant}) {
+  const openDraft = useOpenDraft('push')
+  const canEdit = useCanEditGroup(groupVariant?.groupId)
+  if (groupVariant && !canEdit) return null
+  const createGroup = useCreateGroupDialog()
+  return (
+    <>
+      <OptionsDropdown
+        menuItems={[
+          {
+            key: 'doc',
+            label: 'New Document',
+            icon: FileText,
+            onPress: () => {
+              openDraft(groupVariant)
+            },
+          },
+          {
+            key: 'group',
+            label: 'New Group',
+            icon: Book,
+            onPress: () => {
+              createGroup.open({})
+            },
+          },
+        ]}
+        button={
+          <Button size="$2" icon={Plus}>
+            Create
+          </Button>
+        }
+      />
+      {createGroup.content}
+    </>
+  )
+}
+
 export function PageActionButtons(props: TitleBarProps) {
   const route = useNavRoute()
 
-  let buttonGroup: ReactNode[] = []
+  let buttonGroup: ReactNode[] = [<CreateDropdown key="create" />]
   if (route.key === 'draft') {
     buttonGroup = [<DraftPublicationButtons key="draftPublication" />]
-  } else if (route.key === 'documents') {
-    buttonGroup = [
-      <NewDocumentButton key="newDocument" groupVariant={undefined} />,
-    ]
   } else if (route.key == 'contacts') {
-    buttonGroup = [<ContactsPrompt key="addContact" />]
-  } else if (route.key == 'account' && route.tab === 'groups') {
     buttonGroup = [
-      <CreateGroupButton key="addGroup" triggerLabel="New Group" />,
+      <ContactsPrompt key="addContact" />,
+      <CreateDropdown key="create" />,
     ]
+  } else if (route.key == 'account' && route.tab === 'groups') {
+    buttonGroup = [<CreateDropdown key="create" />]
   } else if (route.key == 'group') {
     buttonGroup = [
       <VersionContext key="versionContext" route={route} />,
-      <GroupOptionsButton key="groupOptions" />,
       <EditGroupButton route={route} key="editGroup" />,
-      <CreateGroupButton key="addGroup" triggerLabel="New Group" />,
-      <NewDocumentButton
-        key="newDocument"
-        label="Group Document"
+      // <NewDocumentButton
+      //   key="newDocument"
+      //   label="Group Document"
+      //   groupVariant={{
+      //     key: 'group',
+      //     groupId: route.groupId,
+      //     pathName: null,
+      //   }}
+      //   contextRoute={route}
+      // />,
+      <CreateDropdown
+        key="create"
         groupVariant={{
           key: 'group',
           groupId: route.groupId,
           pathName: null,
         }}
-        contextRoute={route}
       />,
+      <GroupOptionsButton key="groupOptions" />,
     ]
   } else if (route.key === 'publication') {
     buttonGroup = [
       <VersionContext key="versionContext" route={route} />,
       <PublicationVariants key="variants" route={route} />,
+      <CreateDropdown key="create" />,
       <DocOptionsButton key="options" />,
     ]
   } else if (route.key === 'account') {
     buttonGroup = [
       <EditAccountButton key="editAccount" />,
+      <CreateDropdown key="create" />,
       <AccountOptionsButton key="accountOptions" />,
     ]
   }