Tabs sidepanel settings on dashboards (#15454)

question -- should we have confirmation modal on delete -- if yes -- should it appear on save -- or on delete? figma - https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=79469-817497&t=5gFTRiI5f8nPyzc6-0 Note - Figma has a new side panel header, which is unavailable for now, so I used the existing one In a follow-up, we could even have icons for tabs -- would be cool -- and an icon picker for the icons? followups which could be addressed in separate PRs - - ~~tabs being edited state (select state?) -- this would have blue border around tab~~ done - add icons on tabs -- need to update the entity to add icon -- and set a default (dashboard) -- at least - icon picker in the sidepanel header closes - https://discord.com/channels/1130383047699738754/1430204556884836532 video QA https://github.com/user-attachments/assets/a4ad4b93-911d-46ce-9b68-347fd48fe933
2025-10-30 18:45:31 +05:30
parent f367bd6072
commit 369b1b19af
22 changed files with 602 additions and 23 deletions
@@ -0,0 +1,79 @@
+import { calculateNewPosition } from '@/favorites/utils/calculateNewPosition';
+import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { sortTabsByPosition } from '@/page-layout/utils/sortTabsByPosition';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
+import { useRecoilCallback } from 'recoil';
+
+export const useMovePageLayoutTab = (pageLayoutIdFromProps?: string) => {
+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+    pageLayoutIdFromProps,
+  );
+
+  const pageLayoutDraftState = useRecoilComponentCallbackState(
+    pageLayoutDraftComponentState,
+    pageLayoutId,
+  );
+
+  const moveLeft = useRecoilCallback(
+    ({ set }) =>
+      (tabId: string) => {
+        set(pageLayoutDraftState, (prev) => {
+          const sorted = sortTabsByPosition(prev.tabs);
+          const index = sorted.findIndex((t) => t.id === tabId);
+          if (index <= 0) return prev;
+
+          const items = sorted.filter((t) => t.id !== tabId);
+          const destinationIndex = index - 1;
+          const sourceIndex = index;
+
+          const newPosition = calculateNewPosition({
+            destinationIndex,
+            sourceIndex,
+            items,
+          });
+
+          return {
+            ...prev,
+            tabs: prev.tabs.map((t) =>
+              t.id === tabId ? { ...t, position: newPosition } : t,
+            ),
+          };
+        });
+      },
+    [pageLayoutDraftState],
+  );
+
+  const moveRight = useRecoilCallback(
+    ({ set }) =>
+      (tabId: string) => {
+        set(pageLayoutDraftState, (prev) => {
+          const sorted = sortTabsByPosition(prev.tabs);
+          const index = sorted.findIndex((t) => t.id === tabId);
+          if (index < 0 || index >= sorted.length - 1) return prev;
+
+          const items = sorted.filter((t) => t.id !== tabId);
+          const destinationIndex = index + 1;
+          const sourceIndex = index;
+
+          const newPosition = calculateNewPosition({
+            destinationIndex,
+            sourceIndex,
+            items,
+          });
+
+          return {
+            ...prev,
+            tabs: prev.tabs.map((t) =>
+              t.id === tabId ? { ...t, position: newPosition } : t,
+            ),
+          };
+        });
+      },
+    [pageLayoutDraftState],
+  );
+
+  return { moveLeft, moveRight };
+};