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

packages/twenty-front/src/modules/page-layout/hooks/useCreatePageLayoutTab.ts

@@ -35,17 +35,21 @@ export const useCreatePageLayoutTab = (pageLayoutIdFromProps?: string) => {
 
   const createPageLayoutTab = useRecoilCallback(
     ({ snapshot, set }) =>
-      (title?: string): void => {
+      (title?: string): string => {
         const pageLayoutDraft = snapshot
           .getLoadable(pageLayoutDraftState)
           .getValue();
 
         const newTabId = uuidv4();
         const tabsLength = pageLayoutDraft.tabs.length;
+        const maxPosition =
+          tabsLength > 0
+            ? Math.max(...pageLayoutDraft.tabs.map((t) => t.position))
+            : -1;
         const newTab: PageLayoutTab = {
           id: newTabId,
           title: title || `Tab ${tabsLength + 1}`,
-          position: tabsLength,
+          position: maxPosition + 1,
           pageLayoutId: pageLayoutId,
           widgets: [],
           createdAt: new Date().toISOString(),
@@ -65,6 +69,8 @@ export const useCreatePageLayoutTab = (pageLayoutIdFromProps?: string) => {
         );
 
         setActiveTabId(newTabId);
+
+        return newTabId;
       },
     [
       pageLayoutCurrentLayoutsState,

packages/twenty-front/src/modules/page-layout/hooks/useDeletePageLayoutTab.ts

@@ -0,0 +1,68 @@
+import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { getTabListInstanceIdFromPageLayoutId } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutId';
+import { removeTabLayouts } from '@/page-layout/utils/removeTabLayouts';
+import { sortTabsByPosition } from '@/page-layout/utils/sortTabsByPosition';
+import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
+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 useDeletePageLayoutTab = (pageLayoutIdFromProps?: string) => {
+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+    pageLayoutIdFromProps,
+  );
+
+  const pageLayoutDraftState = useRecoilComponentCallbackState(
+    pageLayoutDraftComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutCurrentLayoutsState = useRecoilComponentCallbackState(
+    pageLayoutCurrentLayoutsComponentState,
+    pageLayoutId,
+  );
+
+  const tabListInstanceId = getTabListInstanceIdFromPageLayoutId(pageLayoutId);
+  const activeTabIdState = useRecoilComponentCallbackState(
+    activeTabIdComponentState,
+    tabListInstanceId,
+  );
+
+  const deleteTab = useRecoilCallback(
+    ({ set, snapshot }) =>
+      (tabId: string) => {
+        const draft = snapshot.getLoadable(pageLayoutDraftState).getValue();
+        if (draft.tabs.length <= 1) {
+          return;
+        }
+
+        const sorted = sortTabsByPosition(draft.tabs);
+        const index = sorted.findIndex((t) => t.id === tabId);
+
+        const activeTabId = snapshot.getLoadable(activeTabIdState).getValue();
+
+        const allLayouts = snapshot
+          .getLoadable(pageLayoutCurrentLayoutsState)
+          .getValue();
+        const updatedLayouts = removeTabLayouts(allLayouts, tabId);
+        set(pageLayoutCurrentLayoutsState, updatedLayouts);
+
+        set(pageLayoutDraftState, (prev) => ({
+          ...prev,
+          tabs: prev.tabs.filter((t) => t.id !== tabId),
+        }));
+
+        if (activeTabId === tabId) {
+          const neighbor = index > 0 ? sorted[index - 1] : sorted[index + 1];
+          const nextActiveId = neighbor?.id ?? null;
+          set(activeTabIdState, nextActiveId);
+        }
+      },
+    [pageLayoutCurrentLayoutsState, pageLayoutDraftState, activeTabIdState],
+  );
+
+  return { deleteTab };
+};

packages/twenty-front/src/modules/page-layout/hooks/useMovePageLayoutTab.ts

@@ -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 };
+};

packages/twenty-front/src/modules/page-layout/hooks/useUpdatePageLayoutTab.ts

@@ -0,0 +1,33 @@
+import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
+import { useRecoilCallback } from 'recoil';
+import { type PageLayoutTab } from '../types/PageLayoutTab';
+
+export const useUpdatePageLayoutTab = (pageLayoutIdFromProps?: string) => {
+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+    pageLayoutIdFromProps,
+  );
+
+  const pageLayoutDraftState = useRecoilComponentCallbackState(
+    pageLayoutDraftComponentState,
+    pageLayoutId,
+  );
+
+  const updatePageLayoutTab = useRecoilCallback(
+    ({ set }) =>
+      (tabId: string, updates: Partial<PageLayoutTab>) => {
+        set(pageLayoutDraftState, (prev) => ({
+          ...prev,
+          tabs: prev.tabs.map((tab) =>
+            tab.id === tabId ? { ...tab, ...updates } : tab,
+          ),
+        }));
+      },
+    [pageLayoutDraftState],
+  );
+
+  return { updatePageLayoutTab };
+};