test: Add tests for containers, tabs, reordering, and grouping

54 tests: group always 1 tab, add tab creates 2nd, title syncs,
delete to 1 keeps tab, fill-right positioning, section reorder.

Author: alex-fedotyev

packages/app/src/DBDashboardPage.tsx

@@ -102,11 +102,7 @@ import {
   useDeleteDashboard,
 } from '@/dashboard';
 import useDashboardContainers from '@/hooks/useDashboardContainers';
-import {
-  calculateNextTilePosition,
-  getDefaultTileSize,
-  makeId,
-} from '@/utils/tilePositioning';
+import { calculateNextTilePosition, makeId } from '@/utils/tilePositioning';
 
 import ChartContainer from './components/charts/ChartContainer';
 import { DBPieChart } from './components/DBPieChart';
@@ -148,8 +144,8 @@ type MoveTarget = {
   containerId: string;
   tabId?: string;
   label: string;
-  // For tabs: the group name shown as a section header in the menu
-  groupLabel?: string;
+  // For tabs: all tabs in order with the target tab ID
+  allTabs?: { id: string; title: string }[];
 };
 
 const tileToLayoutItem = (chart: Tile): RGL.Layout => ({
@@ -444,40 +440,51 @@ const Tile = forwardRef(
                     (Ungrouped)
                   </Menu.Item>
                 )}
-                {(() => {
-                  const filtered = moveTargets.filter(
+                {moveTargets
+                  .filter(
                     t =>
                       !(
                         t.containerId === chart.containerId &&
                         t.tabId === chart.tabId
                       ),
-                  );
-                  let lastGroup: string | undefined;
-                  return filtered.map(t => {
-                    const items: React.ReactNode[] = [];
-                    // Add group header when entering a new tab group
-                    if (t.groupLabel && t.groupLabel !== lastGroup) {
-                      items.push(
-                        <Menu.Label key={`group-${t.containerId}`}>
-                          {t.groupLabel}
-                        </Menu.Label>,
-                      );
-                      lastGroup = t.groupLabel;
-                    } else if (!t.groupLabel) {
-                      lastGroup = undefined;
-                    }
-                    items.push(
-                      <Menu.Item
-                        key={`${t.containerId}-${t.tabId ?? ''}`}
-                        onClick={() => onMoveToSection(t.containerId, t.tabId)}
-                        style={t.groupLabel ? { paddingLeft: 24 } : undefined}
-                      >
-                        {t.label}
-                      </Menu.Item>,
-                    );
-                    return items;
-                  });
-                })()}
+                  )
+                  .map(t => (
+                    <Menu.Item
+                      key={`${t.containerId}-${t.tabId ?? ''}`}
+                      onClick={() => onMoveToSection(t.containerId, t.tabId)}
+                    >
+                      {t.allTabs ? (
+                        <span>
+                          {t.allTabs.map((tab, i) => (
+                            <span key={tab.id}>
+                              {i > 0 && (
+                                <span
+                                  style={{
+                                    color: 'var(--mantine-color-dimmed)',
+                                  }}
+                                >
+                                  {' | '}
+                                </span>
+                              )}
+                              <span
+                                style={
+                                  tab.id !== t.tabId
+                                    ? {
+                                        color: 'var(--mantine-color-dimmed)',
+                                      }
+                                    : undefined
+                                }
+                              >
+                                {tab.title}
+                              </span>
+                            </span>
+                          ))}
+                        </span>
+                      ) : (
+                        t.label
+                      )}
+                    </Menu.Item>
+                  ))}
               </Menu.Dropdown>
             </Menu>
           )}
@@ -1191,26 +1198,24 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
         );
       }
     }
+    // Default new tile size: w=8 (1/3 width), h=10 — matches original behavior
+    const newW = 8;
+    const newH = 10;
     // Place tile in next available slot (fill right, then wrap)
-    const defaultSize = getDefaultTileSize();
     const targetTiles = (dashboard?.tiles ?? []).filter(t => {
       if (containerId) {
         if (t.containerId !== containerId) return false;
         return tabId ? t.tabId === tabId : true;
       }
       return !t.containerId;
     });
-    const pos = calculateNextTilePosition(
-      targetTiles,
-      defaultSize.w,
-      defaultSize.h,
-    );
+    const pos = calculateNextTilePosition(targetTiles, newW, newH);
     setEditedTile({
       id: makeId(),
       x: pos.x,
       y: pos.y,
-      w: defaultSize.w,
-      h: defaultSize.h,
+      w: newW,
+      h: newH,
       config: {
         ...DEFAULT_CHART_CONFIG,
         source: sources?.[0]?.id ?? '',
@@ -1231,13 +1236,12 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
     for (const c of sections) {
       const cTabs = c.tabs ?? [];
       if (c.type === 'group' && cTabs.length >= 2) {
-        const groupLabel = cTabs[0]?.title ?? c.title;
         for (const tab of cTabs) {
           targets.push({
             containerId: c.id,
             tabId: tab.id,
             label: tab.title,
-            groupLabel,
+            allTabs: cTabs.map(t => ({ id: t.id, title: t.title })),
           });
         }
       } else if (c.type === 'group' && cTabs.length === 1) {