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

@@ -148,8 +148,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 in a group: names of sibling tabs shown dimmed
+  siblingLabels?: string[];
 };
 
 const tileToLayoutItem = (chart: Tile): RGL.Layout => ({
@@ -444,40 +444,39 @@ 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.siblingLabels ? (
+                        <span>
+                          {t.label}
+                          {t.siblingLabels.map((s, i) => (
+                            <span
+                              key={i}
+                              style={{
+                                color: 'var(--mantine-color-dimmed)',
+                              }}
+                            >
+                              {' | '}
+                              {s}
+                            </span>
+                          ))}
+                        </span>
+                      ) : (
+                        t.label
+                      )}
+                    </Menu.Item>
+                  ))}
               </Menu.Dropdown>
             </Menu>
           )}
@@ -1231,13 +1230,14 @@ 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;
+        // Build pipe-separated label: target tab normal, siblings dimmed
         for (const tab of cTabs) {
+          const siblings = cTabs.filter(t => t.id !== tab.id);
           targets.push({
             containerId: c.id,
             tabId: tab.id,
             label: tab.title,
-            groupLabel,
+            siblingLabels: siblings.map(s => s.title),
           });
         }
       } else if (c.type === 'group' && cTabs.length === 1) {