From d5bc3d065a150bef2520f08724ef2c8b6cd33321 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Wed, 10 Jun 2026 03:04:17 +0800
Subject: [PATCH] feat: collapse less-used toolbar buttons into More menu when
 width < 1000px

---
 .../src/components/layout/AppToolbar.vue      | 210 ++++++++++++------
 apps/desktop/src/i18n/locales/en.ts           |   1 +
 apps/desktop/src/i18n/locales/es.ts           |   1 +
 apps/desktop/src/i18n/locales/it.ts           |   1 +
 apps/desktop/src/i18n/locales/pt-BR.ts        |   1 +
 apps/desktop/src/i18n/locales/zh-CN.ts        |   1 +
 apps/desktop/src/i18n/locales/zh-TW.ts        |   1 +
 7 files changed, 154 insertions(+), 62 deletions(-)

diff --git a/apps/desktop/src/components/layout/AppToolbar.vue b/apps/desktop/src/components/layout/AppToolbar.vue
index 41d0b80b90..db11f71f62 100644
--- a/apps/desktop/src/components/layout/AppToolbar.vue
+++ b/apps/desktop/src/components/layout/AppToolbar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref, onMounted, onBeforeUnmount } from "vue";
 import { useI18n } from "vue-i18n";
 import {
   DatabaseZap,
@@ -19,6 +19,7 @@ import {
   Settings,
   CloudDownload,
   Package,
+  Ellipsis,
 } from "@lucide/vue";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -88,11 +89,74 @@ function onToolbarDblClick(e: MouseEvent) {
   if (target.closest("button, [role='button'], a")) return;
   toggleMaximize();
 }
+
+const toolbarEl = ref<HTMLElement>();
+const toolbarCollapsed = ref(false);
+const COLLAPSE_THRESHOLD = 1000;
+
+function checkToolbarWidth() {
+  const el = toolbarEl.value;
+  if (!el) return;
+  toolbarCollapsed.value = el.clientWidth < COLLAPSE_THRESHOLD;
+}
+
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+  resizeObserver = new ResizeObserver(checkToolbarWidth);
+  if (toolbarEl.value) resizeObserver.observe(toolbarEl.value);
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+});
+
+const collapsedItems = computed(() => [
+  {
+    value: "transfer",
+    label: t("transfer.dataTransfer"),
+    icon: ArrowLeftRight,
+    action: () => emit("open-transfer"),
+    disabled: !props.hasConnections,
+  },
+  {
+    value: "sql-file",
+    label: t("sqlFile.title"),
+    icon: FileCode,
+    action: () => emit("open-sql-file"),
+    disabled: !props.hasSqlFileConnections,
+  },
+  {
+    value: "schema-diff",
+    label: t("diff.title"),
+    icon: GitCompareArrows,
+    action: () => emit("open-schema-diff"),
+    disabled: !props.hasConnections,
+  },
+  {
+    value: "data-compare",
+    label: t("dataCompare.title"),
+    icon: TableProperties,
+    action: () => emit("open-data-compare"),
+    disabled: !props.hasConnections,
+  },
+  {
+    value: "driver-store",
+    label:
+      props.agentDriverUpdateCount > 0
+        ? `${t("toolbar.driverManager")} (${props.agentDriverUpdateCount})`
+        : t("toolbar.driverManager"),
+    icon: Package,
+    action: () => emit("open-driver-store"),
+    disabled: false,
+  },
+]);
 </script>
 
 <template>
   <div
-    class="h-10 flex items-center gap-1 px-2 border-b bg-muted/30 shrink-0"
+    ref="toolbarEl"
+    class="h-10 flex items-center gap-1 px-2 border-b bg-muted/30 shrink-0 overflow-hidden"
     :class="{ 'pl-17.5': shouldReserveMacTrafficLightInset(isMac, isFullscreen, isDesktop) }"
     data-tauri-drag-region
     @dblclick="onToolbarDblClick"
@@ -113,67 +177,89 @@ function onToolbarDblClick(e: MouseEvent) {
       {{ t("toolbar.newQuery") }}
     </Button>
 
-    <Button
-      variant="ghost"
-      size="sm"
-      class="h-8 px-2 text-xs gap-1"
-      @click="emit('open-transfer')"
-      :disabled="!hasConnections"
-    >
-      <ArrowLeftRight class="h-3.5 w-3.5" />
-      {{ t("transfer.dataTransfer") }}
-    </Button>
-
-    <Button
-      variant="ghost"
-      size="sm"
-      class="h-8 px-2 text-xs gap-1"
-      @click="emit('open-sql-file')"
-      :disabled="!hasSqlFileConnections"
-    >
-      <FileCode class="h-3.5 w-3.5" />
-      {{ t("sqlFile.title") }}
-    </Button>
-
-    <Button
-      variant="ghost"
-      size="sm"
-      class="h-8 px-2 text-xs gap-1"
-      @click="emit('open-schema-diff')"
-      :disabled="!hasConnections"
-    >
-      <GitCompareArrows class="h-3.5 w-3.5" />
-      {{ t("diff.title") }}
-    </Button>
-
-    <Button
-      variant="ghost"
-      size="sm"
-      class="h-8 px-2 text-xs gap-1"
-      @click="emit('open-data-compare')"
-      :disabled="!hasConnections"
-    >
-      <TableProperties class="h-3.5 w-3.5" />
-      {{ t("dataCompare.title") }}
-    </Button>
-
-    <Button
-      variant="ghost"
-      size="sm"
-      class="h-8 px-2 text-xs gap-1"
-      :class="{ 'bg-accent': showDriverStore }"
-      @click="emit('open-driver-store')"
-    >
-      <Package class="h-3.5 w-3.5" />
-      {{ t("toolbar.driverManager") }}
-      <span
-        v-if="agentDriverUpdateCount > 0"
-        class="ml-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-medium leading-none text-white"
-        :aria-label="t('toolbar.updatableDriverCount')"
+    <template v-if="!toolbarCollapsed">
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-8 px-2 text-xs gap-1"
+        @click="emit('open-transfer')"
+        :disabled="!hasConnections"
       >
-        {{ agentDriverUpdateCount > 99 ? "99+" : agentDriverUpdateCount }}
-      </span>
-    </Button>
+        <ArrowLeftRight class="h-3.5 w-3.5" />
+        {{ t("transfer.dataTransfer") }}
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-8 px-2 text-xs gap-1"
+        @click="emit('open-sql-file')"
+        :disabled="!hasSqlFileConnections"
+      >
+        <FileCode class="h-3.5 w-3.5" />
+        {{ t("sqlFile.title") }}
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-8 px-2 text-xs gap-1"
+        @click="emit('open-schema-diff')"
+        :disabled="!hasConnections"
+      >
+        <GitCompareArrows class="h-3.5 w-3.5" />
+        {{ t("diff.title") }}
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-8 px-2 text-xs gap-1"
+        @click="emit('open-data-compare')"
+        :disabled="!hasConnections"
+      >
+        <TableProperties class="h-3.5 w-3.5" />
+        {{ t("dataCompare.title") }}
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-8 px-2 text-xs gap-1"
+        :class="{ 'bg-accent': showDriverStore }"
+        @click="emit('open-driver-store')"
+      >
+        <Package class="h-3.5 w-3.5" />
+        {{ t("toolbar.driverManager") }}
+        <span
+          v-if="agentDriverUpdateCount > 0"
+          class="ml-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-medium leading-none text-white"
+          :aria-label="t('toolbar.updatableDriverCount')"
+        >
+          {{ agentDriverUpdateCount > 99 ? "99+" : agentDriverUpdateCount }}
+        </span>
+      </Button>
+    </template>
+
+    <template v-if="toolbarCollapsed">
+      <LightDropdown
+        :items="collapsedItems"
+        :aria-label="t('common.more')"
+        :trigger-icon="Ellipsis"
+        trigger-class="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground"
+        trigger-icon-class="h-4 w-4"
+        :show-trigger-label="false"
+        :show-chevron="false"
+        check-position="none"
+        align="start"
+        @update:model-value="
+          (value) => {
+            const item = collapsedItems.find((i) => i.value === value);
+            item?.action();
+          }
+        "
+      />
+    </template>
 
     <div class="flex-1" data-tauri-drag-region />
 
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index 3cf66e4b41..c18dc4ccd8 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -784,6 +784,7 @@ export default {
     close: "Close",
     cancel: "Cancel",
     save: "Save",
+    more: "More",
   },
   explain: {
     title: "Explain Plan",
diff --git a/apps/desktop/src/i18n/locales/es.ts b/apps/desktop/src/i18n/locales/es.ts
index bc8395d8c7..61a2cfa484 100644
--- a/apps/desktop/src/i18n/locales/es.ts
+++ b/apps/desktop/src/i18n/locales/es.ts
@@ -687,6 +687,7 @@ export default {
     loading: "Cargando...",
     stopping: "Deteniendo...",
     close: "Cerrar",
+    more: "Más",
   },
   explain: {
     title: "Plan de ejecución",
diff --git a/apps/desktop/src/i18n/locales/it.ts b/apps/desktop/src/i18n/locales/it.ts
index e41abdb60b..ee53260ace 100644
--- a/apps/desktop/src/i18n/locales/it.ts
+++ b/apps/desktop/src/i18n/locales/it.ts
@@ -766,6 +766,7 @@ export default {
     loading: "Caricamento...",
     stopping: "Interruzione...",
     close: "Chiudi",
+    more: "Altro",
   },
   explain: {
     title: "Piano di Spiegazione",
diff --git a/apps/desktop/src/i18n/locales/pt-BR.ts b/apps/desktop/src/i18n/locales/pt-BR.ts
index a1c9259b7b..43f4d85c0e 100644
--- a/apps/desktop/src/i18n/locales/pt-BR.ts
+++ b/apps/desktop/src/i18n/locales/pt-BR.ts
@@ -763,6 +763,7 @@ export default {
     loading: "Carregando...",
     stopping: "Parando...",
     close: "Fechar",
+    more: "Mais",
   },
   explain: {
     title: "Plano de Execução",
diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts
index 9594198089..19c59b6cee 100644
--- a/apps/desktop/src/i18n/locales/zh-CN.ts
+++ b/apps/desktop/src/i18n/locales/zh-CN.ts
@@ -772,6 +772,7 @@ export default {
     close: "关闭",
     cancel: "取消",
     save: "保存",
+    more: "更多",
   },
   explain: {
     title: "执行计划",
diff --git a/apps/desktop/src/i18n/locales/zh-TW.ts b/apps/desktop/src/i18n/locales/zh-TW.ts
index 2a764c33f3..3e00ba65d0 100644
--- a/apps/desktop/src/i18n/locales/zh-TW.ts
+++ b/apps/desktop/src/i18n/locales/zh-TW.ts
@@ -720,6 +720,7 @@ export default {
     loading: "載入中……",
     stopping: "正在停止……",
     close: "關閉",
+    more: "更多",
   },
   explain: {
     title: "執行計畫",