From bcabce368690995ab0eae5e398f6db96921d145c Mon Sep 17 00:00:00 2001
From: zipg <geeky@foxmail.com>
Date: Tue, 7 Jul 2026 21:42:44 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=BC=98=E5=8C=96=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=A0=8F=E5=92=8C=E5=8E=86=E5=8F=B2=E7=AD=9B=E9=80=89=E5=8C=BA?=
 =?UTF-8?q?=E6=BA=A2=E5=87=BA=E8=A1=A8=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: zipg <4047349+zipg@users.noreply.github.com>
---
 .../src/components/editor/QueryHistory.vue    | 66 ++++++++++++-
 .../src/components/layout/AppToolbar.vue      | 96 ++++++++++++++-----
 2 files changed, 134 insertions(+), 28 deletions(-)

diff --git a/apps/desktop/src/components/editor/QueryHistory.vue b/apps/desktop/src/components/editor/QueryHistory.vue
index 1574f048c..1faed1fd7 100644
--- a/apps/desktop/src/components/editor/QueryHistory.vue
+++ b/apps/desktop/src/components/editor/QueryHistory.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, nextTick, onBeforeUnmount, onMounted, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useSqlHighlighter } from "@/composables/useSqlHighlighter";
 import { CalendarClock, Copy, Database, RotateCcw, Search, Sparkles, Trash2, X } from "@lucide/vue";
@@ -43,6 +43,9 @@ const isRollingBack = ref(false);
 const showDeleteConfirm = ref(false);
 const showClearConfirm = ref(false);
 const deleteTargetId = ref<string | null>(null);
+const filterScrollRef = ref<HTMLElement | null>(null);
+const filtersScrollable = ref(false);
+let filterScrollResizeObserver: ResizeObserver | null = null;
 
 const filters: HistoryFilter[] = ["all", "query", "data_change", "schema_change", "failed"];
 const hasDateFilter = computed(() => hasHistoryDateRange(dateRange.value));
@@ -139,6 +142,16 @@ function filterLabel(filter: HistoryFilter) {
   return t(`history.filters.${filter}`);
 }
 
+function updateFilterScrollability() {
+  const el = filterScrollRef.value;
+  if (!el) return;
+  const scrollable = el.scrollWidth > el.clientWidth + 3;
+  filtersScrollable.value = scrollable;
+  if (!scrollable && el.scrollLeft !== 0) {
+    el.scrollLeft = 0;
+  }
+}
+
 function openDateRangeFilter() {
   dateRangeDraft.value = { ...dateRange.value };
 }
@@ -252,7 +265,27 @@ function getHistoryMenuItems(entry: HistoryEntry): ContextMenuItem[] {
   ];
 }
 
-onMounted(() => store.load());
+watch(
+  () => filters.map((filter) => filterLabel(filter)).join("\0"),
+  () => {
+    void nextTick(updateFilterScrollability);
+  },
+);
+
+onMounted(() => {
+  store.load();
+  void nextTick(updateFilterScrollability);
+
+  if (filterScrollRef.value) {
+    filterScrollResizeObserver = new ResizeObserver(updateFilterScrollability);
+    filterScrollResizeObserver.observe(filterScrollRef.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  filterScrollResizeObserver?.disconnect();
+  filterScrollResizeObserver = null;
+});
 </script>
 
 <template>
@@ -269,7 +302,7 @@ onMounted(() => store.load());
     </div>
 
     <div class="border-b shrink-0">
-      <div class="flex gap-1 overflow-x-auto px-2 pt-2">
+      <div ref="filterScrollRef" class="history-filter-scroll flex gap-1 px-2 pt-2" :class="{ 'history-filter-scroll--scrollable': filtersScrollable }">
         <button v-for="filter in filters" :key="filter" type="button" class="h-6 shrink-0 rounded border px-2 text-xs" :class="activeFilter === filter ? 'border-primary bg-primary text-primary-foreground' : 'bg-background'" @click="activeFilter = filter">
           {{ filterLabel(filter) }}
         </button>
@@ -454,3 +487,30 @@ onMounted(() => store.load());
     </Dialog>
   </div>
 </template>
+
+<style scoped>
+.history-filter-scroll {
+  overflow-x: hidden;
+  overscroll-behavior-x: none;
+}
+
+.history-filter-scroll--scrollable {
+  overflow-x: auto;
+  padding-bottom: 2px;
+  scrollbar-color: color-mix(in oklab, var(--muted-foreground) 45%, transparent) transparent;
+  scrollbar-width: thin;
+}
+
+.history-filter-scroll--scrollable::-webkit-scrollbar {
+  height: 4px;
+}
+
+.history-filter-scroll--scrollable::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.history-filter-scroll--scrollable::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--muted-foreground) 45%, transparent);
+}
+</style>
diff --git a/apps/desktop/src/components/layout/AppToolbar.vue b/apps/desktop/src/components/layout/AppToolbar.vue
index 22cb20c25..9272ba865 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, ref, onMounted, onBeforeUnmount, h } from "vue";
+import { computed, ref, onMounted, onBeforeUnmount, h, nextTick, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { DatabaseZap, FilePlus2, Loader2, Moon, Sun, SunMoon, History, Bot, ArrowLeftRight, FileCode, BookMarked, GitCompareArrows, TableProperties, Settings, CloudDownload, Package, FileDown, FolderTree } from "@lucide/vue";
 import { Button } from "@/components/ui/button";
@@ -61,6 +61,7 @@ const { toast } = useToast();
 const settingsStore = useSettingsStore();
 const toolbarItems = computed(() => settingsStore.editorSettings.toolbarItems);
 const { isMac, isDesktop, showControls, isMaximized, isFullscreen, minimize, toggleMaximize, close } = useWindowControls();
+const checkingUpdates = computed(() => props.checkingUpdates);
 
 const themeTriggerIcon = computed(() => {
   if (isSystemAppThemeMode(props.themeMode)) return SunMoon;
@@ -108,7 +109,9 @@ function checkToolbarWidth() {
 
 const rightWrapper = ref<HTMLElement>();
 const rightOverflowCount = ref(0);
-let prevRightAvailable = 0;
+let toolbarLayoutRaf = 0;
+let settlingRightOverflow = false;
+let pendingRightOverflowSettle = false;
 
 /** Ordered list of right-side item keys that can overflow into "More".
  *  Items earlier in the list overflow first when space shrinks. */
@@ -212,45 +215,91 @@ const overflowRightMenuItems = computed(() => {
   }));
 });
 
-function checkRightOverflow() {
+async function settleRightOverflowOnce() {
   const wrapper = rightWrapper.value;
   if (!wrapper) return;
 
-  const available = wrapper.clientWidth;
-  const growing = available > prevRightAvailable + 1;
-  prevRightAvailable = available;
+  const defsLength = collapsibleRightItemDefs.value.length;
+  if (rightOverflowCount.value > defsLength) {
+    rightOverflowCount.value = defsLength;
+    await nextTick();
+  }
 
-  if (wrapper.scrollWidth > wrapper.clientWidth) {
-    // Overflow — move one more item to "More" (always, even when growing
-    // brought an item back that still doesn't fit)
-    if (rightOverflowCount.value < collapsibleRightItemDefs.value.length) {
+  for (let i = 0; i <= defsLength + 1; i++) {
+    const current = rightWrapper.value;
+    if (!current) return;
+
+    if (current.scrollWidth > current.clientWidth + 1 && rightOverflowCount.value < defsLength) {
       rightOverflowCount.value++;
+      await nextTick();
+      continue;
     }
-  } else if (growing && rightOverflowCount.value > 0) {
-    // Window growing — try bringing one item back
+
+    if (rightOverflowCount.value <= 0) return;
+
     rightOverflowCount.value--;
+    await nextTick();
+
+    const restored = rightWrapper.value;
+    if (restored && restored.scrollWidth <= restored.clientWidth + 1) {
+      continue;
+    }
+
+    rightOverflowCount.value++;
+    await nextTick();
+    return;
   }
 }
 
+async function settleRightOverflow() {
+  if (settlingRightOverflow) {
+    pendingRightOverflowSettle = true;
+    return;
+  }
+
+  settlingRightOverflow = true;
+  try {
+    do {
+      pendingRightOverflowSettle = false;
+      await nextTick();
+      await settleRightOverflowOnce();
+    } while (pendingRightOverflowSettle);
+  } finally {
+    settlingRightOverflow = false;
+  }
+}
+
+function scheduleToolbarLayout() {
+  if (toolbarLayoutRaf) cancelAnimationFrame(toolbarLayoutRaf);
+  toolbarLayoutRaf = requestAnimationFrame(() => {
+    toolbarLayoutRaf = 0;
+    checkToolbarWidth();
+    void settleRightOverflow();
+  });
+}
+
+function handleWindowResize() {
+  scheduleToolbarLayout();
+}
+
+watch(collapsibleRightItemDefs, () => scheduleToolbarLayout(), { flush: "post" });
+
 // ──────────── Resize observer ────────────
 
 let resizeObserver: ResizeObserver | null = null;
 
 onMounted(() => {
-  resizeObserver = new ResizeObserver(() => {
-    checkToolbarWidth();
-    checkRightOverflow();
-  });
+  resizeObserver = new ResizeObserver(scheduleToolbarLayout);
   if (toolbarEl.value) resizeObserver.observe(toolbarEl.value);
-  window.addEventListener("resize", () => {
-    checkToolbarWidth();
-    checkRightOverflow();
-  });
+  if (rightWrapper.value) resizeObserver.observe(rightWrapper.value);
+  window.addEventListener("resize", handleWindowResize);
+  scheduleToolbarLayout();
 });
 
 onBeforeUnmount(() => {
+  if (toolbarLayoutRaf) cancelAnimationFrame(toolbarLayoutRaf);
   resizeObserver?.disconnect();
-  window.removeEventListener("resize", checkToolbarWidth);
+  window.removeEventListener("resize", handleWindowResize);
 });
 
 // ──────────── Left-side "More" items ────────────
@@ -365,9 +414,6 @@ function isRightItemVisible(key: string) {
   return !overflowedRightKeys.value.has(key);
 }
 
-// Track checking updates state for the overflow menu disabled state
-const checkingUpdates = computed(() => props.checkingUpdates);
-
 const toolbarTextButtonClass = "h-8 px-2 text-xs gap-1 leading-none";
 const toolbarTextLabelClass = "inline-flex translate-y-px items-center leading-none";
 const toolbarDropdownTriggerClass = `inline-flex h-8 items-center gap-1 rounded-[6px] px-2 text-xs font-medium leading-none hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 transition-colors [&>span:first-child]:translate-y-px`;
@@ -432,7 +478,7 @@ const toolbarDropdownTriggerClass = `inline-flex h-8 items-center gap-1 rounded-
     <div class="flex-1" data-tauri-drag-region />
 
     <!-- Right-side items wrapped in overflow-aware container -->
-    <div ref="rightWrapper" class="flex items-center gap-1 overflow-hidden">
+    <div ref="rightWrapper" class="flex min-w-0 items-center gap-1 overflow-hidden">
       <template v-if="toolbarItems.checkUpdates">
         <Tooltip>
           <TooltipTrigger as-child>