Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts

@@ -0,0 +1,69 @@
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+
+import { DropdownScopeInternalContext } from '../scopes/scope-internal-context/DropdownScopeInternalContext';
+
+import { useDropdownStates } from './useDropdownStates';
+
+type UseDropdownProps = {
+  dropdownScopeId?: string;
+};
+
+export const useDropdown = (props?: UseDropdownProps) => {
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+
+  const scopeId = useAvailableScopeIdOrThrow(
+    DropdownScopeInternalContext,
+    props?.dropdownScopeId,
+  );
+
+  const {
+    dropdownHotkeyScope,
+    setDropdownHotkeyScope,
+    isDropdownOpen,
+    setIsDropdownOpen,
+    dropdownWidth,
+    setDropdownWidth,
+  } = useDropdownStates({
+    scopeId,
+  });
+
+  const closeDropdownButton = () => {
+    goBackToPreviousHotkeyScope();
+    setIsDropdownOpen(false);
+  };
+
+  const openDropdownButton = () => {
+    setIsDropdownOpen(true);
+
+    if (dropdownHotkeyScope) {
+      setHotkeyScopeAndMemorizePreviousScope(
+        dropdownHotkeyScope.scope,
+        dropdownHotkeyScope.customScopes,
+      );
+    }
+  };
+
+  const toggleDropdownButton = () => {
+    if (isDropdownOpen) {
+      closeDropdownButton();
+    } else {
+      openDropdownButton();
+    }
+  };
+
+  return {
+    scopeId,
+    isDropdownOpen: isDropdownOpen,
+    closeDropdown: closeDropdownButton,
+    toggleDropdown: toggleDropdownButton,
+    openDropdown: openDropdownButton,
+    dropdownHotkeyScope,
+    setDropdownHotkeyScope,
+    dropdownWidth,
+    setDropdownWidth,
+  };
+};

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdownStates.ts

@@ -0,0 +1,31 @@
+import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2';
+
+import { dropdownHotkeyScopeScopedState } from '../states/dropdownHotkeyScopeScopedState';
+import { dropdownWidthScopedState } from '../states/dropdownWidthScopedState';
+import { isDropdownOpenScopedState } from '../states/isDropdownOpenScopedState';
+
+export const useDropdownStates = ({ scopeId }: { scopeId: string }) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useRecoilScopedStateV2(
+    isDropdownOpenScopedState,
+    scopeId,
+  );
+
+  const [dropdownHotkeyScope, setDropdownHotkeyScope] = useRecoilScopedStateV2(
+    dropdownHotkeyScopeScopedState,
+    scopeId,
+  );
+
+  const [dropdownWidth, setDropdownWidth] = useRecoilScopedStateV2(
+    dropdownWidthScopedState,
+    scopeId,
+  );
+
+  return {
+    isDropdownOpen,
+    setIsDropdownOpen,
+    dropdownHotkeyScope,
+    setDropdownHotkeyScope,
+    dropdownWidth,
+    setDropdownWidth,
+  };
+};

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useInternalHotkeyScopeManagement.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
+
+import { useDropdown } from './useDropdown';
+
+export const useInternalHotkeyScopeManagement = ({
+  dropdownHotkeyScopeFromParent,
+}: {
+  dropdownHotkeyScopeFromParent?: HotkeyScope;
+}) => {
+  const { dropdownHotkeyScope, setDropdownHotkeyScope } = useDropdown();
+
+  useEffect(() => {
+    if (!isDeeplyEqual(dropdownHotkeyScopeFromParent, dropdownHotkeyScope)) {
+      setDropdownHotkeyScope(dropdownHotkeyScopeFromParent);
+    }
+  }, [
+    dropdownHotkeyScope,
+    dropdownHotkeyScopeFromParent,
+    setDropdownHotkeyScope,
+  ]);
+};