From 96e5b043a68d03e3b152e3de349ffbb24e4e6477 Mon Sep 17 00:00:00 2001 From: Ngo Quoc Dat Date: Sun, 1 Mar 2026 23:42:23 +0700 Subject: [PATCH] fix: toolbar items missing from overflow menu when window is narrow --- CHANGELOG.md | 1 + .../Views/Toolbar/OpenTableToolbarView.swift | 184 ++++++++---------- 2 files changed, 77 insertions(+), 108 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2cd63351..c188fd4e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Toolbar briefly showing "MySQL" and missing version (e.g., "MongoDB" instead of "MongoDB 8.2.5") when opening a new tab - Keyboard shortcuts not working (beep sound) after connecting from welcome screen until a second tab is opened +- Toolbar overflow menu showing only one item and missing all other buttons when window is narrow ## [0.10.0] - 2026-03-01 diff --git a/TablePro/Views/Toolbar/OpenTableToolbarView.swift b/TablePro/Views/Toolbar/OpenTableToolbarView.swift index f38e129a..aab64c2b 100644 --- a/TablePro/Views/Toolbar/OpenTableToolbarView.swift +++ b/TablePro/Views/Toolbar/OpenTableToolbarView.swift @@ -71,67 +71,53 @@ struct TableProToolbar: ViewModifier { content .toolbar { // MARK: - Navigation (Left) - ToolbarItem(placement: .navigation) { - HStack(spacing: 8) { - // Connection switcher button - Button { - showConnectionSwitcher.toggle() - } label: { - Image(systemName: "network") - } - .accessibilityLabel(String(localized: "Switch connection")) - .help("Switch Connection (⌘⌥C)") - .popover(isPresented: $showConnectionSwitcher) { - ConnectionSwitcherPopover { - showConnectionSwitcher = false - } - } - - Divider() - .frame(height: 20) - - // Database switcher button - Button { - actions?.openDatabaseSwitcher() - } label: { - Image(systemName: "cylinder") + // Separate items so macOS can overflow them individually with labels + ToolbarItemGroup(placement: .navigation) { + Button { + showConnectionSwitcher.toggle() + } label: { + Label("Connection", systemImage: "network") + } + .help("Switch Connection (⌘⌥C)") + .popover(isPresented: $showConnectionSwitcher) { + ConnectionSwitcherPopover { + showConnectionSwitcher = false } - .accessibilityLabel(String(localized: "Open database")) - .help("Open Database (⌘K)") - .disabled( - state.connectionState != .connected || state.databaseType == .sqlite) + } - // Query tab button - Button(state.databaseType == .mongodb ? "MQL" : "SQL") { - actions?.newTab() - } - .accessibilityLabel(String(localized: "New query tab")) - .help("New Query Tab (⌘T)") + Button { + actions?.openDatabaseSwitcher() + } label: { + Label("Database", systemImage: "cylinder") + } + .help("Open Database (⌘K)") + .disabled( + state.connectionState != .connected || state.databaseType == .sqlite) - // Refresh button - Button { - NotificationCenter.default.post(name: .refreshData, object: nil) - } label: { - Image(systemName: "arrow.clockwise") - } - .accessibilityLabel(String(localized: "Refresh data")) - .help("Refresh (⌘R)") - .disabled(state.connectionState != .connected) + Button(state.databaseType == .mongodb ? "MQL" : "SQL") { + actions?.newTab() + } + .help("New Query Tab (⌘T)") - // SQL Preview button - Button { - actions?.previewSQL() - } label: { - Image(systemName: "eye") - } - .accessibilityLabel(state.databaseType == .mongodb - ? String(localized: "Preview MQL") - : String(localized: "Preview SQL")) - .help(state.databaseType == .mongodb ? "Preview MQL (⌘⇧P)" : "Preview SQL (⌘⇧P)") - .disabled(!state.hasPendingChanges || state.connectionState != .connected) - .popover(isPresented: $state.showSQLReviewPopover) { - SQLReviewPopover(statements: state.previewStatements, databaseType: state.databaseType) - } + Button { + NotificationCenter.default.post(name: .refreshData, object: nil) + } label: { + Label("Refresh", systemImage: "arrow.clockwise") + } + .help("Refresh (⌘R)") + .disabled(state.connectionState != .connected) + + Button { + actions?.previewSQL() + } label: { + Label( + state.databaseType == .mongodb ? "Preview MQL" : "Preview SQL", + systemImage: "eye") + } + .help(state.databaseType == .mongodb ? "Preview MQL (⌘⇧P)" : "Preview SQL (⌘⇧P)") + .disabled(!state.hasPendingChanges || state.connectionState != .connected) + .popover(isPresented: $state.showSQLReviewPopover) { + SQLReviewPopover(statements: state.previewStatements, databaseType: state.databaseType) } } @@ -142,65 +128,47 @@ struct TableProToolbar: ViewModifier { } // MARK: - Primary Action (Right) - // Action buttons - ToolbarItem(placement: .primaryAction) { - HStack(spacing: 8) { - // Filter toggle - Button { - actions?.toggleFilterPanel() - } label: { - Image(systemName: "line.3.horizontal.decrease.circle") - } - .accessibilityLabel(String(localized: "Toggle filters")) - .help("Toggle Filters (⌘F)") - .disabled(state.connectionState != .connected || !state.isTableTab) + // Separate items so macOS can overflow them individually with labels + ToolbarItemGroup(placement: .primaryAction) { + Button { + actions?.toggleFilterPanel() + } label: { + Label("Filters", systemImage: "line.3.horizontal.decrease.circle") + } + .help("Toggle Filters (⌘F)") + .disabled(state.connectionState != .connected || !state.isTableTab) - // History toggle - Button { - actions?.toggleHistoryPanel() - } label: { - Image(systemName: "clock") - } - .accessibilityLabel(String(localized: "Toggle query history")) - .help("Toggle Query History (⌘Y)") + Button { + actions?.toggleHistoryPanel() + } label: { + Label("History", systemImage: "clock") + } + .help("Toggle Query History (⌘Y)") - Divider() - .frame(height: 20) + Button { + actions?.exportTables() + } label: { + Label("Export", systemImage: "square.and.arrow.up") + } + .help("Export Data (⌘⇧E)") + .disabled(state.connectionState != .connected) - // Export + if state.databaseType != .mongodb { Button { - actions?.exportTables() + actions?.importTables() } label: { - Image(systemName: "square.and.arrow.up") + Label("Import", systemImage: "square.and.arrow.down") } - .accessibilityLabel(String(localized: "Export data")) - .help("Export Data (⌘⇧E)") - .disabled(state.connectionState != .connected) - - // Import (not available for MongoDB) - if state.databaseType != .mongodb { - Button { - actions?.importTables() - } label: { - Image(systemName: "square.and.arrow.down") - } - .accessibilityLabel(String(localized: "Import data")) - .help("Import Data (⌘⇧I)") - .disabled(state.connectionState != .connected || state.isReadOnly) - } - - Divider() - .frame(height: 20) + .help("Import Data (⌘⇧I)") + .disabled(state.connectionState != .connected || state.isReadOnly) + } - // Inspector toggle - Button { - actions?.toggleRightSidebar() - } label: { - Image(systemName: "sidebar.trailing") - } - .accessibilityLabel(String(localized: "Toggle inspector")) - .help("Toggle Inspector (⌘⌥B)") + Button { + actions?.toggleRightSidebar() + } label: { + Label("Inspector", systemImage: "sidebar.trailing") } + .help("Toggle Inspector (⌘⌥B)") } } .onReceive(NotificationCenter.default.publisher(for: .openConnectionSwitcher)) { _ in