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/utils/removeTabLayouts.ts

@@ -0,0 +1,13 @@
+import { type TabLayouts } from '@/page-layout/types/tab-layouts';
+
+export const removeTabLayouts = (
+  allTabLayouts: TabLayouts,
+  tabId: string,
+): TabLayouts => {
+  if (!allTabLayouts[tabId]) {
+    return allTabLayouts;
+  }
+
+  const { [tabId]: _removed, ...rest } = allTabLayouts;
+  return rest;
+};

packages/twenty-front/src/modules/page-layout/utils/sortTabsByPosition.ts

@@ -0,0 +1,5 @@
+export const sortTabsByPosition = <T extends { position: number }>(
+  tabs: T[],
+): T[] => {
+  return tabs.toSorted((a, b) => a.position - b.position);
+};