chore: group popup

frontend/appflowy_tauri/src/appflowy_app/components/TestColors/TestColors.tsx

@@ -45,121 +45,121 @@ export const TestColors = () => {
       <h1 className={'mb-4 text-2xl'}>Icons</h1>
       <div className={'mb-8'}>
         <div className={'flex flex-wrap items-center gap-4'}>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'AddSvg'}>
             <AddSvg></AddSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'ArrowLeftSvg'}>
             <ArrowLeftSvg></ArrowLeftSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'ArrowRightSvg'}>
             <ArrowRightSvg></ArrowRightSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'BoardSvg'}>
             <BoardSvg></BoardSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'CheckboxSvg'}>
             <CheckboxSvg></CheckboxSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'ChecklistTypeSvg'}>
             <ChecklistTypeSvg></ChecklistTypeSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'CheckmarkSvg'}>
             <CheckmarkSvg></CheckmarkSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'ClockSvg'}>
             <ClockSvg></ClockSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'CloseSvg'}>
             <CloseSvg></CloseSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'CopySvg'}>
             <CopySvg></CopySvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'DateTypeSvg'}>
             <DateTypeSvg></DateTypeSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'Details2Svg'}>
             <Details2Svg></Details2Svg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'DocumentSvg'}>
             <DocumentSvg></DocumentSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'DropDownShowSvg'}>
             <DropDownShowSvg></DropDownShowSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'EarthSvg'}>
             <EarthSvg></EarthSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'EditorCheckSvg'}>
             <EditorCheckSvg></EditorCheckSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'EditorUncheckSvg'}>
             <EditorUncheckSvg></EditorUncheckSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'EditSvg'}>
             <EditSvg></EditSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'EyeClosedSvg'}>
             <EyeClosedSvg></EyeClosedSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'EyeOpenSvg'}>
             <EyeOpenSvg></EyeOpenSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'FilterSvg'}>
             <FilterSvg></FilterSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'GridSvg'}>
             <GridSvg></GridSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'GroupByFieldSvg'}>
             <GroupByFieldSvg></GroupByFieldSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'HideMenuSvg'}>
             <HideMenuSvg></HideMenuSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'InformationSvg'}>
             <InformationSvg></InformationSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'LogoutSvg'}>
             <LogoutSvg></LogoutSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'MoreSvg'}>
             <MoreSvg></MoreSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'MultiSelectTypeSvg'}>
             <MultiSelectTypeSvg></MultiSelectTypeSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'NumberTypeSvg'}>
             <NumberTypeSvg></NumberTypeSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'PropertiesSvg'}>
             <PropertiesSvg></PropertiesSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'SearchSvg'}>
             <SearchSvg></SearchSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'ShowMenuSvg'}>
             <ShowMenuSvg></ShowMenuSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'SingleSelectTypeSvg'}>
             <SingleSelectTypeSvg></SingleSelectTypeSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'SkipLeftSvg'}>
             <SkipLeftSvg></SkipLeftSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'SkipRightSvg'}>
             <SkipRightSvg></SkipRightSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'SortSvg'}>
             <SortSvg></SortSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'TextTypeSvg'}>
             <TextTypeSvg></TextTypeSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'TrashSvg'}>
             <TrashSvg></TrashSvg>
           </i>
-          <i className={'h-5 w-5'}>
+          <i className={'h-5 w-5'} title={'UrlTypeSvg'}>
             <UrlTypeSvg></UrlTypeSvg>
           </i>
         </div>

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardFieldsPopup.tsx

@@ -1,6 +1,5 @@
 import { useAppSelector } from '$app/stores/store';
 import { FieldTypeIcon } from '$app/components/_shared/EditRow/FieldTypeIcon';
-import { Popup } from '$app/components/_shared/Popup';
 import { useRef } from 'react';
 import useOutsideClick from '$app/components/_shared/useOutsideClick';
 import { EyeOpenSvg } from '$app/components/_shared/svg/EyeOpenSvg';
@@ -12,7 +11,7 @@ export const BoardFieldsPopup = ({ hidePopup }: { hidePopup: () => void }) => {
   useOutsideClick(ref, () => hidePopup());
 
   return (
-    <div ref={ref} className={'absolute top-full left-full z-10 rounded-lg bg-white px-2 py-2 shadow-md'}>
+    <div ref={ref} className={'absolute top-full left-full z-10 rounded-lg bg-white px-2 py-2 text-xs shadow-md'}>
       {columns.map((column, index) => (
         <div
           className={'flex cursor-pointer items-center justify-between rounded-lg px-2 py-2 hover:bg-main-secondary'}

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardGroupFieldsPopup.tsx

@@ -1,3 +1,36 @@
+import { useAppSelector } from '$app/stores/store';
+import { FieldTypeIcon } from '$app/components/_shared/EditRow/FieldTypeIcon';
+import { useRef } from 'react';
+import useOutsideClick from '$app/components/_shared/useOutsideClick';
+import { EyeOpenSvg } from '$app/components/_shared/svg/EyeOpenSvg';
+import { CheckmarkSvg } from '$app/components/_shared/svg/CheckmarkSvg';
+
 export const BoardGroupFieldsPopup = ({ hidePopup }: { hidePopup: () => void }) => {
-  return <></>;
+  const columns = useAppSelector((state) => state.database.columns);
+  const fields = useAppSelector((state) => state.database.fields);
+  const ref = useRef<HTMLDivElement>(null);
+  useOutsideClick(ref, () => hidePopup());
+
+  return (
+    <div ref={ref} className={'absolute top-full left-full z-10 rounded-lg bg-white px-2 py-2 text-xs shadow-md'}>
+      {columns.map((column, index) => (
+        <div
+          className={'flex cursor-pointer items-center justify-between rounded-lg px-2 py-2 hover:bg-main-secondary'}
+          key={index}
+        >
+          <div className={'flex items-center gap-2 '}>
+            <i className={'flex h-5 w-5 flex-shrink-0 items-center justify-center'}>
+              <FieldTypeIcon fieldType={fields[column.fieldId].fieldType}></FieldTypeIcon>
+            </i>
+            <span className={'flex-shrink-0'}>{fields[column.fieldId].title}</span>
+          </div>
+          <div className={'ml-12'}>
+            <i className={'block h-3 w-3'}>
+              <CheckmarkSvg></CheckmarkSvg>
+            </i>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
 };

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardSettingsPopup.tsx

@@ -42,7 +42,7 @@ export const BoardSettingsPopup = ({
     <Popup
       onOutsideClick={() => hidePopup()}
       items={settingsItems}
-      className={'absolute top-full left-full z-10'}
+      className={'absolute top-full left-full z-10 text-xs'}
     ></Popup>
   );
 };