Navbar drag drop using dnd kit (#18288)

2026-03-09 01:55:50 +05:30
parent 66d93c4d28
commit 5b28e59ca7
119 changed files with 3563 additions and 1297 deletions
@@ -1,11 +1,24 @@
-import { Droppable, type DroppableProvided } from '@hello-pangea/dnd';
-import { type ReactNode, useContext } from 'react';
+import { lazy, Suspense, useContext, type ReactNode } from 'react';

 import { ADD_TO_NAV_SOURCE_DROPPABLE_ID } from '@/navigation-menu-item/constants/AddToNavSourceDroppableId';
 import { NavigationDragSourceContext } from '@/navigation-menu-item/contexts/NavigationDragSourceContext';

+import type { AddToNavDroppableProvided } from '@/command-menu/components/CommandMenuAddToNavDroppableTypes';
+
+const FALLBACK_PROVIDED: AddToNavDroppableProvided = {
+  innerRef: () => {},
+  droppableProps: {},
+  placeholder: null,
+};
+
+const CommandMenuAddToNavDroppableDndKit = lazy(() =>
+  import('@/command-menu/components/CommandMenuAddToNavDroppableDndKit').then(
+    (m) => ({ default: m.CommandMenuAddToNavDroppableDndKit }),
+  ),
+);
+
 type SidePanelAddToNavigationDroppableProps = {
-  children: (provided: DroppableProvided) => ReactNode;
+  children: (provided: AddToNavDroppableProvided) => ReactNode;
 };

 export const SidePanelAddToNavigationDroppable = ({
@@ -15,11 +28,11 @@ export const SidePanelAddToNavigationDroppable = ({
  const isDropDisabled = sourceDroppableId === ADD_TO_NAV_SOURCE_DROPPABLE_ID;

  return (
-    <Droppable
-      droppableId={ADD_TO_NAV_SOURCE_DROPPABLE_ID}
-      isDropDisabled={isDropDisabled}
-    >
-      {(provided) => children(provided)}
-    </Droppable>
+    <Suspense fallback={children(FALLBACK_PROVIDED)}>
+      <CommandMenuAddToNavDroppableDndKit
+        children={children}
+        isDropDisabled={isDropDisabled}
+      />
+    </Suspense>
  );
 };
@@ -1,23 +1,22 @@
 import { styled } from '@linaria/react';
-import { Draggable } from '@hello-pangea/dnd';
 import { useLingui } from '@lingui/react/macro';
-import { type ReactNode, useState } from 'react';
+import { type ReactNode, lazy, Suspense, useState } from 'react';
+import { isDefined } from 'twenty-shared/utils';
 import { type IconComponent } from 'twenty-ui/display';

 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { AddToNavigationDragHandle } from '@/navigation-menu-item/components/AddToNavigationDragHandle';
 import { addToNavPayloadRegistryState } from '@/navigation-menu-item/states/addToNavPayloadRegistryState';
-import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 import type { AddToNavigationDragPayload } from '@/navigation-menu-item/types/add-to-navigation-drag-payload';
+import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';

-const StyledDraggableMenuItem = styled.div`
-  cursor: grab;
-  width: 100%;
-
-  &:active {
-    cursor: grabbing;
-  }
-`;
+const CommandMenuItemWithAddToNavigationDragDndKit = lazy(() =>
+  import(
+    '@/command-menu/components/CommandMenuItemWithAddToNavigationDragDndKit'
+  ).then((m) => ({
+    default: m.CommandMenuItemWithAddToNavigationDragDndKit,
+  })),
+);

 type SidePanelItemWithAddToNavigationDragProps = {
  icon?: IconComponent;
@@ -28,8 +27,25 @@ type SidePanelItemWithAddToNavigationDragProps = {
  onClick: () => void;
  payload: AddToNavigationDragPayload;
  dragIndex?: number;
+  disabled?: boolean;
+  disableDrag?: boolean;
 };

+const StyledDraggableMenuItem = styled.div<{
+  $disabled?: boolean;
+  $disableDrag?: boolean;
+}>`
+  cursor: ${({ $disabled, $disableDrag }) =>
+    $disabled || $disableDrag ? 'default' : 'grab'};
+  pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};
+  width: 100%;
+
+  &:active {
+    cursor: ${({ $disabled, $disableDrag }) =>
+      $disabled || $disableDrag ? 'default' : 'grabbing'};
+  }
+`;
+
 export const SidePanelItemWithAddToNavigationDrag = ({
  icon,
  customIconContent,
@@ -39,6 +55,8 @@ export const SidePanelItemWithAddToNavigationDrag = ({
  onClick,
  payload,
  dragIndex,
+  disabled = false,
+  disableDrag = false,
 }: SidePanelItemWithAddToNavigationDragProps) => {
  const { t } = useLingui();
  const setAddToNavPayloadRegistry = useSetAtomState(
@@ -46,7 +64,8 @@ export const SidePanelItemWithAddToNavigationDrag = ({
  );
  const [isHovered, setIsHovered] = useState(false);

-  const contextualDescription = isHovered
+  const showDragAffordance = !disabled && !disableDrag && isHovered;
+  const contextualDescription = showDragAffordance
    ? t`Drag to add to navbar`
    : description;

@@ -55,23 +74,31 @@ export const SidePanelItemWithAddToNavigationDrag = ({
      icon={icon}
      customIconContent={customIconContent}
      payload={payload}
-      isHovered={isHovered}
+      isHovered={showDragAffordance}
+      disabled={disabled}
+      disableDrag={disableDrag}
    />
  );

  const registerPayload = () => {
-    if (dragIndex !== undefined) {
+    if (!disabled && !disableDrag && isDefined(dragIndex)) {
      setAddToNavPayloadRegistry((prev) => new Map(prev).set(id, payload));
    }
  };

  const menuItemContent = (
    <StyledDraggableMenuItem
+      $disabled={disabled}
+      $disableDrag={disableDrag}
      onMouseEnter={() => {
-        setIsHovered(true);
-        registerPayload();
+        if (!disabled && !disableDrag) {
+          setIsHovered(true);
+          registerPayload();
+        }
+      }}
+      onMouseLeave={() => {
+        if (!disabled && !disableDrag) setIsHovered(false);
      }}
-      onMouseLeave={() => setIsHovered(false)}
      onMouseDown={registerPayload}
    >
      <CommandMenuItem
@@ -80,27 +107,22 @@ export const SidePanelItemWithAddToNavigationDrag = ({
        description={contextualDescription}
        id={id}
        onClick={onClick}
+        disabled={disabled}
      />
    </StyledDraggableMenuItem>
  );

-  if (dragIndex !== undefined) {
-    return (
-      <Draggable draggableId={id} index={dragIndex} isDragDisabled={false}>
-        {(provided) => (
-          <div
-            ref={provided.innerRef}
-            // oxlint-disable-next-line react/jsx-props-no-spreading
-            {...provided.draggableProps}
-            // oxlint-disable-next-line react/jsx-props-no-spreading
-            {...provided.dragHandleProps}
-          >
-            {menuItemContent}
-          </div>
-        )}
-      </Draggable>
-    );
+  if (!isDefined(dragIndex) || disableDrag) {
+    return menuItemContent;
  }

-  return menuItemContent;
+  return (
+    <Suspense fallback={menuItemContent}>
+      <CommandMenuItemWithAddToNavigationDragDndKit
+        id={id}
+        dragIndex={dragIndex}
+        menuItemContent={menuItemContent}
+      />
+    </Suspense>
+  );
 };
@@ -1,14 +1,14 @@
 import { useLingui } from '@lingui/react/macro';
-import { IconLink } from 'twenty-ui/display';
+import { IconLink, IconWorld } from 'twenty-ui/display';

-import { SidePanelPageInfoLayout } from '@/side-panel/components/SidePanelPageInfoLayout';
-import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
-import { sidePanelShouldFocusTitleInputComponentState } from '@/side-panel/states/sidePanelShouldFocusTitleInputComponentState';
-import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
+import { LinkIconWithLinkOverlay } from '@/navigation-menu-item/components/LinkIconWithLinkOverlay';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { useUpdateLinkInDraft } from '@/navigation-menu-item/hooks/useUpdateLinkInDraft';
 import { useWorkspaceSectionItems } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems';
 import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/states/selectedNavigationMenuItemInEditModeState';
+import { SidePanelPageInfoLayout } from '@/side-panel/components/SidePanelPageInfoLayout';
+import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
+import { sidePanelShouldFocusTitleInputComponentState } from '@/side-panel/states/sidePanelShouldFocusTitleInputComponentState';
 import { TitleInput } from '@/ui/input/components/TitleInput';
 import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
@@ -59,8 +59,10 @@ export const SidePanelLinkInfo = () => {
  return (
    <SidePanelPageInfoLayout
      icon={
-        <NavigationMenuItemStyleIcon
-          Icon={IconLink}
+        <LinkIconWithLinkOverlay
+          link={selectedItem.link}
+          LinkIcon={IconLink}
+          DefaultIcon={IconWorld}
          color={selectedItem.color}
        />
      }
@@ -8,7 +8,7 @@ import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { styled } from '@linaria/react';
 import { motion } from 'framer-motion';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { ThemeContext } from 'twenty-ui/theme-constants';

@@ -21,11 +21,16 @@ export const SidePanelRouter = () => {
  const sidePanelPage = useAtomStateValue(sidePanelPageState);
  const sidePanelPageInfo = useAtomStateValue(sidePanelPageInfoState);

-  const sidePanelPageComponent = isDefined(sidePanelPage) ? (
-    SIDE_PANEL_PAGES_CONFIG.get(sidePanelPage)
-  ) : (
-    <></>
-  );
+  const rawPageComponent = isDefined(sidePanelPage)
+    ? SIDE_PANEL_PAGES_CONFIG.get(sidePanelPage)
+    : null;
+
+  const sidePanelPageComponent =
+    isDefined(rawPageComponent) && React.isValidElement(rawPageComponent)
+      ? React.cloneElement(rawPageComponent, {
+          key: sidePanelPageInfo.instanceId,
+        })
+      : rawPageComponent;

  const { theme } = useContext(ThemeContext);