wip: add web access control dialog and member&group select

web/app/components/app/app-access-control/access-control-dialog.tsx

@@ -20,7 +20,7 @@ const AccessControlDialog = ({
   const close = useCallback(() => onClose?.(), [onClose])
   return (
     <Transition appear show={show} as={Fragment}>
-      <Dialog as="div" open={true} className="relative z-40" onClose={close}>
+      <Dialog as="div" open={true} className="relative z-20" onClose={close}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"

web/app/components/app/app-access-control/add-member-or-group-dialog.tsx

@@ -0,0 +1,83 @@
+'use client'
+import { RiAddCircleFill, RiArrowRightSLine, RiOrganizationChart } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
+import Avatar from '../../base/avatar'
+import Button from '../../base/button'
+import Checkbox from '../../base/checkbox'
+import Input from '../../base/input'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
+import classNames from '@/utils/classnames'
+
+export default function AddMemberOrGroupDialog() {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  return <PortalToFollowElem open={open} onOpenChange={setOpen} offset={{ crossAxis: 300 }} placement='bottom-end'>
+    <PortalToFollowElemTrigger asChild>
+      <Button variant='ghost-accent' size='small' className='shrink-0 flex items-center gap-x-0.5' onClick={() => setOpen(!open)}>
+        <RiAddCircleFill className='w-4 h-4' />
+        <span>{t('common.operation.add')}</span>
+      </Button>
+    </PortalToFollowElemTrigger>
+    <PortalToFollowElemContent className='z-[25]'>
+      <div className='w-[400px] max-h-[400px] overflow-y-auto flex flex-col border-[0.5px] border-components-panel-border rounded-xl bg-components-panel-bg-blur backdrop-blur-[5px] shadow-lg'>
+        <div className='p-2 pb-0.5'>
+          <Input placeholder='search...' />
+        </div>
+        <div className='flex items-center h-7 px-2 py-0.5'>
+          <span className='system-xs-regular text-text-tertiary'>All Members</span>
+        </div>
+        <div className='p-1'>
+          <GroupItem />
+          <MemberItem />
+        </div>
+      </div>
+    </PortalToFollowElemContent>
+  </PortalToFollowElem>
+}
+
+function GroupItem() {
+  return <BaseItem>
+    <Checkbox className='w-4 h-4 shrink-0' />
+    <div className='flex item-center grow'>
+      <div className='w-5 h-5 rounded-full bg-components-icon-bg-blue-solid overflow-hidden mr-2'>
+        <div className='w-full h-full flex items-center justify-center bg-access-app-icon-mask-bg'>
+          <RiOrganizationChart className='w-[14px] h-[14px] text-components-avatar-shape-fill-stop-0' />
+        </div>
+      </div>
+      <p className='system-sm-medium text-text-secondary mr-1'>Name</p>
+      <p className='system-xs-regular text-text-tertiary'>5</p>
+    </div>
+    <Button size="small" variant='ghost-accent' className='w-[76px] py-1 px-1.5 shrink-0 flex items-center justify-between'>
+      <span>Expand</span>
+      <RiArrowRightSLine className='w-4 h-4' />
+    </Button>
+  </BaseItem>
+}
+
+function MemberItem() {
+  return <BaseItem className='pr-3'>
+    <Checkbox className='w-4 h-4 shrink-0' />
+    <div className='flex items-center grow'>
+      <div className='w-5 h-5 rounded-full bg-components-icon-bg-blue-solid overflow-hidden mr-2'>
+        <div className='w-full h-full flex items-center justify-center bg-access-app-icon-mask-bg'>
+          <Avatar className='w-[14px] h-[14px]' textClassName='text-[12px]' avatar={null} name='M' />
+        </div>
+      </div>
+      <p className='system-sm-medium text-text-secondary mr-1'>Name</p>
+      <p className='system-xs-regular text-text-tertiary'>5</p>
+    </div>
+    <p className='system-xs-regular text-text-quaternary'>douxc512@gmail.com</p>
+  </BaseItem>
+}
+
+type BaseItemProps = {
+  className?: string
+  children: React.ReactNode
+}
+function BaseItem({ children, className }: BaseItemProps) {
+  return <div className={classNames('p-1 pl-2 flex items-center space-x-2 hover:rounded-lg hover:bg-state-base-hover cursor-pointer', className)}>
+    {children}
+  </div>
+}

web/app/components/app/app-access-control/specific-groups-or-members.tsx

@@ -1,8 +1,8 @@
 'use client'
-import { RiAddCircleFill, RiCloseCircleFill, RiLockLine, RiOrganizationChart } from '@remixicon/react'
+import { RiCloseCircleFill, RiLockLine, RiOrganizationChart } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Avatar from '../../base/avatar'
-import Button from '../../base/button'
+import AddMemberOrGroupDialog from './add-member-or-group-dialog'
 
 type SpecificGroupsOrMembersProps = {
   active: boolean
@@ -24,10 +24,7 @@ export default function SpecificGroupsOrMembers(props: SpecificGroupsOrMembersPr
         <RiLockLine className='w-4 h-4 text-text-primary' />
         <p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.specific')}</p>
       </div>
-      <Button variant='ghost-accent' size='small' className='shrink-0 flex items-center gap-x-0.5'>
-        <RiAddCircleFill className='w-4 h-4' />
-        <span>{t('common.operation.add')}</span>
-      </Button>
+      <AddMemberOrGroupDialog />
     </div>
     <div className='px-1 pb-1'>
       <div className='bg-background-section rounded-lg p-2 flex flex-col gap-y-2'>