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,