Add create icon to meetings, threads and tasks in sidebar

lonestone · Dec 12, 2024 · e7831c6 · e7831c6
1 parent 7f0f789
commit e7831c6
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 2 deletions.
diff --git a/packages/webapp/src/features/layout/components/Sidebar.tsx b/packages/webapp/src/features/layout/components/Sidebar.tsx
@@ -1,8 +1,12 @@
+import MeetingEditModal from '@/meeting/modals/MeetingEditModal'
 import useCurrentMember from '@/member/hooks/useCurrentMember'
 import OrgSwitch from '@/org/components/OrgSwitch'
+import { useNavigateOrg } from '@/org/hooks/useNavigateOrg'
 import { useOrgId } from '@/org/hooks/useOrgId'
 import { usePathInOrg } from '@/org/hooks/usePathInOrg'
 import SearchGlobalModal from '@/search/components/SearchGlobalModal'
+import TaskModal from '@/task/modals/TaskModal'
+import ThreadEditModal from '@/thread/modals/ThreadEditModal'
 import {
   Box,
   Flex,
@@ -58,6 +62,7 @@ export default function Sidebar() {
   const currentMeetingId = useStoreState(
     (state) => state.memberStatus.currentMeetingId
   )
+  const navigate = useNavigateOrg()
 
   // Get Sidebar context
   const context = useContext(SidebarContext)
@@ -81,8 +86,11 @@ export default function Sidebar() {
     }
   }
 
-  // Search
+  // Modals
   const searchModal = useDisclosure()
+  const meetingModal = useDisclosure()
+  const threadModal = useDisclosure()
+  const taskModal = useDisclosure()
 
   // Use Cmd+K or Cmd+P keys to open search
   useEffect(() => {
@@ -272,6 +280,7 @@ export default function Sidebar() {
                 to={`${rootPath}meetings?member=${currentMember?.id || ''}`}
                 icon={MeetingsIcon}
                 alert={!!currentMeetingId}
+                onAdd={meetingModal.onOpen}
               >
                 {t('Sidebar.meetings')}
               </SidebarItemLink>
@@ -282,6 +291,7 @@ export default function Sidebar() {
                 className="userflow-sidebar-threads"
                 to={`${rootPath}threads?member=${currentMember?.id || ''}`}
                 icon={ThreadsIcon}
+                onAdd={threadModal.onOpen}
               >
                 {t('Sidebar.threads')}
               </SidebarItemLink>
@@ -292,6 +302,7 @@ export default function Sidebar() {
                 className="userflow-sidebar-tasks"
                 to={`${rootPath}tasks?member=${currentMember?.id || ''}`}
                 icon={TasksIcon}
+                onAdd={taskModal.onOpen}
               >
                 {t('Sidebar.tasks')}
               </SidebarItemLink>
@@ -311,6 +322,22 @@ export default function Sidebar() {
           }}
         />
       )}
+
+      {meetingModal.isOpen && (
+        <MeetingEditModal isOpen onClose={meetingModal.onClose} />
+      )}
+
+      {threadModal.isOpen && (
+        <ThreadEditModal isOpen onClose={threadModal.onClose} />
+      )}
+
+      {taskModal.isOpen && (
+        <TaskModal
+          isOpen
+          onCreate={(taskId) => navigate(`tasks/${taskId}`)}
+          onClose={taskModal.onClose}
+        />
+      )}
     </SidebarLayout>
   )
 }
diff --git a/packages/webapp/src/features/layout/components/SidebarItem.tsx b/packages/webapp/src/features/layout/components/SidebarItem.tsx
@@ -2,17 +2,22 @@ import {
   Button,
   ButtonProps,
   HTMLChakraProps,
+  IconButton,
+  Spacer,
   forwardRef,
 } from '@chakra-ui/react'
 import { Icon } from 'iconsax-react'
-import React from 'react'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AddIcon } from 'src/icons'
 import SidebarIcon from './SidebarIcon'
 
 export interface SidebarItemProps extends ButtonProps {
   icon: Icon
   isPathExact?: boolean
   isPathStart?: boolean
   alert?: boolean
+  onAdd?: () => void
 }
 
 export default forwardRef(function SidebarItem(
@@ -22,10 +27,22 @@ export default forwardRef(function SidebarItem(
     isPathStart,
     alert,
     children,
+    onAdd,
     ...buttonProps
   }: SidebarItemProps,
   ref
 ) {
+  const { t } = useTranslation()
+
+  const handleAddClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation()
+      event.preventDefault()
+      onAdd?.()
+    },
+    [onAdd]
+  )
+
   return (
     <Button
       ref={ref}
@@ -63,7 +80,27 @@ export default forwardRef(function SidebarItem(
         ml={4}
         mr={3}
       />
+
       {children}
+
+      <Spacer />
+      {onAdd && (
+        <IconButton
+          aria-label={t('common.add')}
+          icon={<AddIcon size={20} />}
+          onClick={handleAddClick}
+          variant="ghost"
+          size="sm"
+          color="gray"
+          mr={2}
+          _hover={{
+            color: 'black',
+            _dark: {
+              color: 'white',
+            },
+          }}
+        />
+      )}
     </Button>
   )
 })

diff --git a/packages/webapp/src/icons.tsx b/packages/webapp/src/icons.tsx
@@ -4,6 +4,7 @@
 
 import {
   Activity,
+  Add,
   AddSquare,
   ArchiveBox,
   ArrangeHorizontalSquare,
@@ -83,6 +84,7 @@ import { FaUsers } from 'react-icons/fa'
 import { FiCheck, FiHelpCircle } from 'react-icons/fi'
 import { IoSearchOutline } from 'react-icons/io5'
 
+export const AddIcon = Add
 export const ArchiveIcon = ArchiveBox
 export const AppsIcon = ArrangeHorizontalSquare
 export const ArrowRightIcon = ArrowRight