feat/integrate checkbox to grid

frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCell.tsx

@@ -7,6 +7,7 @@ import { BoardUrlCell } from '../../board/BoardUrlCell';
 
 import GridSingleSelectOptions from './GridSingleSelectOptions';
 import GridTextCell from './GridTextCell';
+import { GridCheckBox } from './GridCheckBox';
 
 export const GridCell = ({
   cellIdentifier,
@@ -27,6 +28,8 @@ export const GridCell = ({
           cellCache={cellCache}
           fieldController={fieldController}
         />
+      ) : cellIdentifier.fieldType === FieldType.Checkbox ? (
+        <GridCheckBox cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />
       ) : cellIdentifier.fieldType === FieldType.DateTime ? (
         <BoardDateCell
           cellIdentifier={cellIdentifier}

frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCheckBox.tsx

@@ -0,0 +1,23 @@
+import { CellIdentifier } from '@/appflowy_app/stores/effects/database/cell/cell_bd_svc';
+import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cache';
+import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
+import { EditCheckboxCell } from '../../_shared/EditRow/EditCheckboxCell';
+import { useCell } from '../../_shared/database-hooks/useCell';
+
+export const GridCheckBox = ({
+  cellIdentifier,
+  cellCache,
+  fieldController,
+}: {
+  cellIdentifier: CellIdentifier;
+  cellCache: CellCache;
+  fieldController: FieldController;
+}) => {
+  const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
+
+  return (
+    <div className='flex w-full justify-start'>
+      {cellController && <EditCheckboxCell cellController={cellController} data={data as unknown as boolean} />}
+    </div>
+  );
+};

frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.tsx

@@ -19,7 +19,7 @@ export const GridTableHeader = () => {
           {fields.map((field, i) => {
             return (
               <th key={field.fieldId} className='m-0 border border-l-0 border-shade-6 p-0'>
-                <div className={'flex cursor-pointer items-center p-2 hover:bg-main-secondary'}>
+                <div className={'flex cursor-pointer items-center px-4 py-2 hover:bg-main-secondary'}>
                   <i className={'mr-2 h-5 w-5 text-shade-3'}>
                     {field.fieldType === FieldType.RichText && <TextTypeSvg></TextTypeSvg>}
                     {field.fieldType === FieldType.Number && <NumberTypeSvg></NumberTypeSvg>}
@@ -38,7 +38,7 @@ export const GridTableHeader = () => {
 
           <th className='m-0 w-40 border border-r-0 border-shade-6 p-0'>
             <div
-              className='flex cursor-pointer items-center p-2 text-shade-3 hover:bg-main-secondary hover:text-black'
+              className='flex cursor-pointer items-center px-4 py-2 text-shade-3 hover:bg-main-secondary hover:text-black'
               onClick={onAddField}
             >
               <i className='mr-2 h-5 w-5'>