Fix sidebar and tab overflow navigation

apps/desktop/src/lib/sidebarTreeItemLayout.ts

@@ -13,10 +13,16 @@ const leafTypes: Set<TreeNodeType> = new Set([
   "saved-sql-file",
 ]);
 
+const fullWidthLabelTypes: Set<TreeNodeType> = new Set(["table", "view", "mongo-collection"]);
+
 export function treeItemPaddingLeft(depth: number): string {
   return `${depth * 16 + 8}px`;
 }
 
+export function usesFullWidthTreeLabel(type: TreeNodeType): boolean {
+  return fullWidthLabelTypes.has(type);
+}
+
 export function canTreeNodeExpand(type: TreeNodeType): boolean {
   return !leafTypes.has(type);
 }

apps/desktop/src/lib/tabPresentation.ts

@@ -3,6 +3,19 @@ import { useConnectionStore } from "@/stores/connectionStore";
 import { useSettingsStore } from "@/stores/settingsStore";
 import type { QueryTab } from "@/types/database";
 
+const tabGroupPalette = [
+  "#2563eb",
+  "#059669",
+  "#d97706",
+  "#dc2626",
+  "#7c3aed",
+  "#0891b2",
+  "#c2410c",
+  "#4f46e5",
+  "#be185d",
+  "#16a34a",
+];
+
 export function connectionDisplayName(connectionId: string): string {
   const connectionStore = useConnectionStore();
   return connectionStore.getConfig(connectionId)?.name || connectionId;
@@ -21,6 +34,28 @@ export function databaseDisplayNameForTab(connectionId: string, database: string
   return database || t("editor.noDatabase");
 }
 
+export function tabGroupKey(tab: Pick<QueryTab, "connectionId" | "database">): string {
+  return `${tab.connectionId}::${tab.database || ""}`;
+}
+
+export function colorForTabGroupKey(groupKey: string): string {
+  let hash = 0;
+  for (let i = 0; i < groupKey.length; i += 1) {
+    hash = (hash * 31 + groupKey.charCodeAt(i)) | 0;
+  }
+  return tabGroupPalette[Math.abs(hash) % tabGroupPalette.length];
+}
+
+export function tabGroupColor(tab: Pick<QueryTab, "connectionId" | "database">): string {
+  return colorForTabGroupKey(tabGroupKey(tab));
+}
+
+export function tabGroupLabel(tab: Pick<QueryTab, "connectionId" | "database">): string {
+  const connection = connectionDisplayName(tab.connectionId);
+  const database = databaseDisplayNameForTab(tab.connectionId, tab.database);
+  return database ? `${connection} / ${database}` : connection;
+}
+
 export function isPreviewTab(tab: QueryTab): boolean {
   const connectionStore = useConnectionStore();
   const config = connectionStore.getConfig(tab.connectionId);
@@ -80,6 +115,15 @@ export function tabTooltipLines(tab: QueryTab): { label: string; value: string }
   return lines;
 }
 
+export function shouldShowTabOverflowControls(
+  tabCount: number,
+  hasTabOverflow: boolean,
+  canScrollLeft: boolean,
+  canScrollRight: boolean,
+): boolean {
+  return tabCount > 0 && (hasTabOverflow || canScrollLeft || canScrollRight);
+}
+
 export function tabModeLabel(tab: QueryTab): string {
   const { t } = useI18n();
   if (tab.mode === "data") return t("tabs.table");