refactor!: rename Command Menu page/navigation layer to Side Panel (#18393)

2026-03-05 20:16:31 +05:30
parent 38ad0820c0
commit 5853891b02
675 changed files with 4894 additions and 4964 deletions
@@ -0,0 +1,106 @@
+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 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';
+
+const StyledDraggableMenuItem = styled.div`
+  cursor: grab;
+  width: 100%;
+
+  &:active {
+    cursor: grabbing;
+  }
+`;
+
+type SidePanelItemWithAddToNavigationDragProps = {
+  icon?: IconComponent;
+  customIconContent?: ReactNode;
+  label: string;
+  description?: string;
+  id: string;
+  onClick: () => void;
+  payload: AddToNavigationDragPayload;
+  dragIndex?: number;
+};
+
+export const SidePanelItemWithAddToNavigationDrag = ({
+  icon,
+  customIconContent,
+  label,
+  description,
+  id,
+  onClick,
+  payload,
+  dragIndex,
+}: SidePanelItemWithAddToNavigationDragProps) => {
+  const { t } = useLingui();
+  const setAddToNavPayloadRegistry = useSetAtomState(
+    addToNavPayloadRegistryState,
+  );
+  const [isHovered, setIsHovered] = useState(false);
+
+  const contextualDescription = isHovered
+    ? t`Drag to add to navbar`
+    : description;
+
+  const DragHandleIcon = () => (
+    <AddToNavigationDragHandle
+      icon={icon}
+      customIconContent={customIconContent}
+      payload={payload}
+      isHovered={isHovered}
+    />
+  );
+
+  const registerPayload = () => {
+    if (dragIndex !== undefined) {
+      setAddToNavPayloadRegistry((prev) => new Map(prev).set(id, payload));
+    }
+  };
+
+  const menuItemContent = (
+    <StyledDraggableMenuItem
+      onMouseEnter={() => {
+        setIsHovered(true);
+        registerPayload();
+      }}
+      onMouseLeave={() => setIsHovered(false)}
+      onMouseDown={registerPayload}
+    >
+      <CommandMenuItem
+        Icon={DragHandleIcon}
+        label={label}
+        description={contextualDescription}
+        id={id}
+        onClick={onClick}
+      />
+    </StyledDraggableMenuItem>
+  );
+
+  if (dragIndex !== undefined) {
+    return (
+      <Draggable draggableId={id} index={dragIndex} isDragDisabled={false}>
+        {(provided) => (
+          <div
+            ref={provided.innerRef}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...provided.draggableProps}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...provided.dragHandleProps}
+          >
+            {menuItemContent}
+          </div>
+        )}
+      </Draggable>
+    );
+  }
+
+  return menuItemContent;
+};