chore: import reorganize and edit option on grid

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx

@@ -72,11 +72,7 @@ export const CellOptionsPopup = ({
   };
 
   const onToggleOptionClick = async (option: SelectOptionPB) => {
-    if (
-      (data as SelectOptionCellDataPB | undefined)?.select_options?.find(
-        (selectedOption) => selectedOption.id === option.id
-      )
-    ) {
+    if ((data as SelectOptionCellDataPB)?.select_options?.find((selectedOption) => selectedOption.id === option.id)) {
       await new SelectOptionCellBackendService(cellIdentifier).unselectOption([option.id]);
     } else {
       await new SelectOptionCellBackendService(cellIdentifier).selectOption([option.id]);
@@ -121,7 +117,7 @@ export const CellOptionsPopup = ({
       <div className={'flex flex-col gap-2 p-2'}>
         <div className={'border-shades-3 flex flex-1 items-center gap-2 rounded border bg-main-selector px-2 '}>
           <div className={'flex flex-wrap items-center gap-2 text-black'}>
-            {(data as SelectOptionCellDataPB | undefined)?.select_options?.map((option, index) => (
+            {(data as SelectOptionCellDataPB)?.select_options?.map((option, index) => (
               <div className={`${getBgColor(option.color)} flex items-center gap-0.5 rounded px-1 py-0.5`} key={index}>
                 <span>{option?.name || ''}</span>
                 <button onClick={() => onUnselectOptionClick(option)} className={'h-5 w-5 cursor-pointer'}>
@@ -162,7 +158,7 @@ export const CellOptionsPopup = ({
               >
                 <div className={`${getBgColor(option.color)} rounded px-2 py-0.5`}>{option.title}</div>
                 <div className={'flex items-center'}>
-                  {(data as SelectOptionCellDataPB | undefined)?.select_options?.find(
+                  {(data as SelectOptionCellDataPB)?.select_options?.find(
                     (selectedOption) => selectedOption.id === option.selectOptionId
                   ) && (
                     <button className={'h-5 w-5 p-1'}>

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellOptionPopup.tsx

@@ -1,11 +1,8 @@
 import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc';
-import { CellCache } from '$app/stores/effects/database/cell/cell_cache';
-import { FieldController } from '$app/stores/effects/database/field/field_controller';
 import { KeyboardEventHandler, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { SelectOptionCellDataPB, SelectOptionColorPB, SelectOptionPB } from '@/services/backend';
+import { SelectOptionColorPB, SelectOptionPB } from '@/services/backend';
 import { getBgColor } from '$app/components/_shared/getColor';
-import { CloseSvg } from '$app/components/_shared/svg/CloseSvg';
 import { SelectOptionCellBackendService } from '$app/stores/effects/database/cell/select_option_bd_svc';
 import useOutsideClick from '$app/components/_shared/useOutsideClick';
 import { TrashSvg } from '$app/components/_shared/svg/TrashSvg';
@@ -16,36 +13,39 @@ export const EditCellOptionPopup = ({
   top,
   cellIdentifier,
   editingSelectOption,
-  cellCache,
-  fieldController,
   onOutsideClick,
 }: {
   left: number;
   top: number;
   cellIdentifier: CellIdentifier;
   editingSelectOption: SelectOptionPB;
-  cellCache: CellCache;
-  fieldController: FieldController;
   onOutsideClick: () => void;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const { t } = useTranslation('');
   const [adjustedTop, setAdjustedTop] = useState(-100);
+  const [adjustedLeft, setAdjustedLeft] = useState(-100);
   const [value, setValue] = useState('');
 
   useOutsideClick(ref, async () => {
+    await onBlur();
     onOutsideClick();
   });
 
   useEffect(() => {
     if (!ref.current) return;
-    const { height } = ref.current.getBoundingClientRect();
+    const { height, width } = ref.current.getBoundingClientRect();
     if (top + height > window.innerHeight) {
       setAdjustedTop(window.innerHeight - height);
     } else {
       setAdjustedTop(top);
     }
+    if (left + width > window.innerWidth) {
+      setAdjustedLeft(window.innerWidth - width);
+    } else {
+      setAdjustedLeft(left);
+    }
   }, [ref, window, top, left]);
 
   useEffect(() => {
@@ -97,9 +97,9 @@ export const EditCellOptionPopup = ({
       ref={ref}
       onKeyDown={onKeyDownWrapper}
       className={`fixed z-10 rounded-lg bg-white px-2 py-2 text-xs shadow-md transition-opacity duration-300 ${
-        adjustedTop === -100 ? 'opacity-0' : 'opacity-100'
+        adjustedTop === -100 && adjustedLeft === -100 ? 'opacity-0' : 'opacity-100'
       }`}
-      style={{ top: `${adjustedTop}px`, left: `${left}px` }}
+      style={{ top: `${adjustedTop}px`, left: `${adjustedLeft}px` }}
     >
       <div className={'flex flex-col gap-2 p-2'}>
         <div className={'border-shades-3 flex flex-1 items-center gap-2 rounded border bg-main-selector px-2 '}>

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellWrapper.tsx

@@ -69,10 +69,7 @@ export const EditCellWrapper = ({
               cellIdentifier.fieldType === FieldType.MultiSelect ||
               cellIdentifier.fieldType === FieldType.Checklist) &&
               cellController && (
-                <CellOptions
-                  data={data as SelectOptionCellDataPB | undefined}
-                  onEditClick={onEditOptionsClick}
-                ></CellOptions>
+                <CellOptions data={data as SelectOptionCellDataPB} onEditClick={onEditOptionsClick}></CellOptions>
               )}
 
             {cellIdentifier.fieldType === FieldType.Checkbox && cellController && (
@@ -83,7 +80,7 @@ export const EditCellWrapper = ({
             )}
 
             {cellIdentifier.fieldType === FieldType.DateTime && (
-              <EditCellDate data={data as DateCellDataPB | undefined} onEditClick={onEditDateClick}></EditCellDate>
+              <EditCellDate data={data as DateCellDataPB} onEditClick={onEditDateClick}></EditCellDate>
             )}
 
             {cellIdentifier.fieldType === FieldType.Number && cellController && (
@@ -91,7 +88,7 @@ export const EditCellWrapper = ({
             )}
 
             {cellIdentifier.fieldType === FieldType.URL && cellController && (
-              <EditCellUrl data={data as URLCellDataPB | undefined} cellController={cellController}></EditCellUrl>
+              <EditCellUrl data={data as URLCellDataPB} cellController={cellController}></EditCellUrl>
             )}
 
             {cellIdentifier.fieldType === FieldType.RichText && cellController && (

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx

@@ -235,8 +235,6 @@ export const EditRow = ({
             left={editCellOptionLeft}
             cellIdentifier={editingCell}
             editingSelectOption={editingSelectOption}
-            cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
-            fieldController={controller.fieldController}
             onOutsideClick={() => {
               setShowEditCellOption(false);
             }}

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

@@ -1,4 +1,3 @@
-import { SettingsSvg } from '../_shared/svg/SettingsSvg';
 import { SearchInput } from '../_shared/SearchInput';
 import { BoardGroup } from './BoardGroup';
 import { NewBoardBlock } from './NewBoardBlock';

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

@@ -2,7 +2,6 @@ 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 }) => {

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

@@ -18,7 +18,7 @@ export const BoardOptionsCell = ({
 
   return (
     <div className={'flex flex-wrap items-center gap-2 py-2 text-xs text-black'}>
-      {(data as SelectOptionCellDataPB | undefined)?.select_options?.map((option, index) => (
+      {(data as SelectOptionCellDataPB)?.select_options?.map((option, index) => (
         <div className={`${getBgColor(option.color)} rounded px-2 py-0.5`} key={index}>
           {option?.name || ''}
         </div>

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

@@ -17,12 +17,8 @@ export const BoardUrlCell = ({
 
   return (
     <>
-      <a
-        className={'text-main-accent hover:underline'}
-        href={(data as URLCellDataPB | undefined)?.url || ''}
-        target={'_blank'}
-      >
-        {(data as URLCellDataPB | undefined)?.content || ''}
+      <a className={'text-main-accent hover:underline'} href={(data as URLCellDataPB).url || ''} target={'_blank'}>
+        {(data as URLCellDataPB).content || ''}
       </a>
     </>
   );

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

@@ -1,4 +1,4 @@
-import { useDatabase } from '../../_shared/database-hooks/useDatabase';
+import { useDatabase } from '$app/components/_shared/database-hooks/useDatabase';
 import { GridTableCount } from '../GridTableCount/GridTableCount';
 import { GridTableHeader } from '../GridTableHeader/GridTableHeader';
 import { GridAddRow } from '../GridTableRows/GridAddRow';

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

@@ -1,4 +1,3 @@
-import { Link } from 'react-router-dom';
 import AddSvg from '../../_shared/svg/AddSvg';
 
 export const GridAddView = () => {

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

@@ -2,9 +2,6 @@ import { CellIdentifier } from '@/appflowy_app/stores/effects/database/cell/cell
 import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cache';
 import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
 import { FieldType } from '@/services/backend';
-import { BoardDateCell } from '../../board/BoardDateCell';
-import { BoardUrlCell } from '../../board/BoardUrlCell';
-
 import GridSingleSelectOptions from './GridSingleSelectOptions';
 import GridTextCell from './GridTextCell';
 import { GridCheckBox } from './GridCheckBox';

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

@@ -30,9 +30,7 @@ export const GridDate = ({
 
   return (
     <div className='flex w-full cursor-pointer justify-start'>
-      {cellController && (
-        <EditCellDate data={data as DateCellDataPB | undefined} onEditClick={onEditDateClick}></EditCellDate>
-      )}
+      {cellController && <EditCellDate data={data as DateCellDataPB} onEditClick={onEditDateClick}></EditCellDate>}
 
       {showDatePopup && (
         <DatePickerPopup

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

@@ -1,11 +1,12 @@
 import { useState } from 'react';
-import { CellOptions } from '../../_shared/EditRow/CellOptions';
+import { CellOptions } from '$app/components/_shared/EditRow/CellOptions';
 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 { useCell } from '../../_shared/database-hooks/useCell';
-import { SelectOptionCellDataPB } from '@/services/backend/models/flowy-database/select_type_option';
-import { CellOptionsPopup } from '../../_shared/EditRow/CellOptionsPopup';
+import { useCell } from '$app/components/_shared/database-hooks/useCell';
+import { SelectOptionCellDataPB, SelectOptionPB } from '@/services/backend/models/flowy-database/select_type_option';
+import { CellOptionsPopup } from '$app/components/_shared/EditRow/CellOptionsPopup';
+import { EditCellOptionPopup } from '$app/components/_shared/EditRow/EditCellOptionPopup';
 
 export default function GridSingleSelectOptions({
   cellIdentifier,
@@ -22,12 +23,25 @@ export default function GridSingleSelectOptions({
   const [changeOptionsTop, setChangeOptionsTop] = useState(0);
   const [changeOptionsLeft, setChangeOptionsLeft] = useState(0);
 
+  const [showEditCellOption, setShowEditCellOption] = useState(false);
+  const [editCellOptionTop, setEditCellOptionTop] = useState(0);
+  const [editCellOptionLeft, setEditCellOptionLeft] = useState(0);
+
+  const [editingSelectOption, setEditingSelectOption] = useState<SelectOptionPB | undefined>();
+
   const onEditOptionsClick = async (left: number, top: number) => {
     setChangeOptionsLeft(left);
     setChangeOptionsTop(top);
     setShowOptionsPopup(true);
   };
 
+  const onOpenOptionDetailClick = (_left: number, _top: number, _select_option: SelectOptionPB) => {
+    setEditingSelectOption(_select_option);
+    setShowEditCellOption(true);
+    setEditCellOptionLeft(_left);
+    setEditCellOptionTop(_top);
+  };
+
   return (
     <>
       <div className='flex w-full cursor-pointer justify-start'>
@@ -42,8 +56,20 @@ export default function GridSingleSelectOptions({
           cellCache={cellCache}
           fieldController={fieldController}
           onOutsideClick={() => setShowOptionsPopup(false)}
+          openOptionDetail={onOpenOptionDetailClick}
         />
       )}
+      {showEditCellOption && editingSelectOption && (
+        <EditCellOptionPopup
+          top={editCellOptionTop}
+          left={editCellOptionLeft}
+          cellIdentifier={cellIdentifier}
+          editingSelectOption={editingSelectOption}
+          onOutsideClick={() => {
+            setShowEditCellOption(false);
+          }}
+        ></EditCellOptionPopup>
+      )}
     </>
   );
 }

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

@@ -17,10 +17,6 @@ export const GridUrl = ({
   const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
 
   return (
-    <>
-      {cellController && (
-        <EditCellUrl data={data as URLCellDataPB | undefined} cellController={cellController}></EditCellUrl>
-      )}
-    </>
+    <>{cellController && <EditCellUrl data={data as URLCellDataPB} cellController={cellController}></EditCellUrl>}</>
   );
 };

frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableCount/GridTableCount.hooks.ts

@@ -1,4 +1,4 @@
-import { useAppSelector } from '../../../stores/store';
+import { useAppSelector } from '$app/stores/store';
 
 export const useGridTableCount = () => {
   const { grid } = useAppSelector((state) => state);

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

@@ -1,4 +1,4 @@
-import { useAppSelector } from '../../../stores/store';
+import { useAppSelector } from '$app/stores/store';
 import { DatabaseController } from '@/appflowy_app/stores/effects/database/database_controller';
 import { TypeOptionController } from '@/appflowy_app/stores/effects/database/field/type_option/type_option_controller';
 import { None } from 'ts-results';

frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRow.tsx

@@ -17,7 +17,6 @@ export const GridTableRow = ({
 }) => {
   const { cells } = useRow(viewId, controller, row);
 
-  console.log({ cells });
   return (
     <tr className='group'>
       {cells.map((cell, cellIndex) => {