fix: align icons and hit targets with macOS HIG across 20 views

datlechin · datlechin · commit 12797ee616a8 · 2026-04-08T08:55:06.000+07:00
Closes #629
diff --git a/TablePro/Views/AIChat/AIChatPanelView.swift b/TablePro/Views/AIChat/AIChatPanelView.swift
@@ -225,7 +225,7 @@ struct AIChatPanelView: View {
         }
         .padding(.horizontal, 12)
         .padding(.vertical, 6)
-        .background(Color.yellow.opacity(0.1))
+        .background(Color(nsColor: .systemYellow).opacity(0.1))
     }
 
     // MARK: - Input Area
diff --git a/TablePro/Views/Components/PaginationControlsView.swift b/TablePro/Views/Components/PaginationControlsView.swift
@@ -32,7 +32,7 @@ struct PaginationControlsView: View {
             // Settings button (gear icon) - opens popover
             Button(action: { showSettings.toggle() }) {
                 Image(systemName: "slider.horizontal.3")
-                    .font(.system(size: 12))
+                    .frame(width: 24, height: 24)
             }
             .buttonStyle(.borderless)
             .help("Pagination Settings")
@@ -59,7 +59,8 @@ struct PaginationControlsView: View {
             // Previous page button
             Button(action: onPrevious) {
                 Image(systemName: "chevron.left")
-                    .font(.system(size: 11))
+                    .imageScale(.small)
+                    .frame(width: 24, height: 24)
             }
             .buttonStyle(.borderless)
             .disabled(!pagination.hasPreviousPage || pagination.isLoading)
@@ -80,7 +81,8 @@ struct PaginationControlsView: View {
             // Next page button
             Button(action: onNext) {
                 Image(systemName: "chevron.right")
-                    .font(.system(size: 11))
+                    .imageScale(.small)
+                    .frame(width: 24, height: 24)
             }
             .buttonStyle(.borderless)
             .disabled(!pagination.hasNextPage || pagination.isLoading)
diff --git a/TablePro/Views/Components/SyncStatusIndicator.swift b/TablePro/Views/Components/SyncStatusIndicator.swift
@@ -86,7 +86,7 @@ struct SyncStatusIndicator: View {
         case .syncing:
             return AnyShapeStyle(.secondary)
         case .error:
-            return AnyShapeStyle(Color.orange)
+            return AnyShapeStyle(Color(nsColor: .systemOrange))
         case .disabled:
             return AnyShapeStyle(.tertiary)
         }
diff --git a/TablePro/Views/Connection/OnboardingContentView.swift b/TablePro/Views/Connection/OnboardingContentView.swift
@@ -194,6 +194,8 @@ struct OnboardingContentView: View {
                         .fill(i == currentPage ? Color.accentColor : Color(nsColor: .tertiaryLabelColor))
                         .frame(width: 8, height: 8)
                         .scaleEffect(i == currentPage ? 1.2 : 1.0)
+                        .frame(width: 24, height: 24)
+                        .contentShape(Circle())
                         .onTapGesture { goToPage(i) }
                 }
             }
diff --git a/TablePro/Views/DatabaseSwitcher/DatabaseSwitcherSheet.swift b/TablePro/Views/DatabaseSwitcher/DatabaseSwitcherSheet.swift
@@ -168,7 +168,7 @@ struct DatabaseSwitcherSheet: View {
                 Task { await viewModel.refreshDatabases() }
             }) {
                 Image(systemName: "arrow.clockwise")
-                    .font(.system(size: 14))
+                    .frame(width: 24, height: 24)
             }
             .buttonStyle(.borderless)
             .help("Refresh database list")
@@ -177,7 +177,7 @@ struct DatabaseSwitcherSheet: View {
             if databaseType != .sqlite && !isSchemaMode {
                 Button(action: { showCreateDialog = true }) {
                     Image(systemName: "plus")
-                        .font(.system(size: 14))
+                        .frame(width: 24, height: 24)
                 }
                 .buttonStyle(.borderless)
                 .help("Create new database")
diff --git a/TablePro/Views/Editor/ExplainResultView.swift b/TablePro/Views/Editor/ExplainResultView.swift
@@ -28,13 +28,15 @@ struct ExplainResultView: View {
             HStack(spacing: 4) {
                 Button(action: { fontSize = max(10, fontSize - 1) }) {
                     Image(systemName: "textformat.size.smaller")
+                        .frame(width: 24, height: 24)
                 }
                 Text("\(Int(fontSize))")
                     .font(.caption)
                     .foregroundStyle(.secondary)
                     .frame(width: 24)
                 Button(action: { fontSize = min(24, fontSize + 1) }) {
                     Image(systemName: "textformat.size.larger")
+                        .frame(width: 24, height: 24)
                 }
             }
             .buttonStyle(.borderless)
diff --git a/TablePro/Views/Editor/HistoryPanelView.swift b/TablePro/Views/Editor/HistoryPanelView.swift
@@ -76,6 +76,7 @@ private extension HistoryPanelView {
                         showClearAllAlert = true
                     } label: {
                         Image(systemName: "trash")
+                            .frame(width: 24, height: 24)
                     }
                     .buttonStyle(.borderless)
                     .disabled(entries.isEmpty)
@@ -155,7 +156,7 @@ private extension HistoryPanelView {
         VStack(spacing: 8) {
             if !searchText.isEmpty || dateFilter != .all {
                 Image(systemName: "magnifyingglass")
-                    .font(.system(size: ThemeEngine.shared.activeTheme.iconSizes.huge))
+                    .font(.largeTitle)
                     .foregroundStyle(.tertiary)
                 Text("No Matching Queries")
                     .font(.system(size: ThemeEngine.shared.activeTheme.typography.body, weight: .medium))
@@ -166,7 +167,7 @@ private extension HistoryPanelView {
                     .multilineTextAlignment(.center)
             } else {
                 Image(systemName: "clock.arrow.circlepath")
-                    .font(.system(size: ThemeEngine.shared.activeTheme.iconSizes.huge))
+                    .font(.largeTitle)
                     .foregroundStyle(.tertiary)
                 Text("No Query History Yet")
                     .font(.system(size: ThemeEngine.shared.activeTheme.typography.body, weight: .medium))
@@ -268,7 +269,7 @@ private extension HistoryPanelView {
     var previewEmptyState: some View {
         VStack(spacing: 8) {
             Image(systemName: "doc.text")
-                .font(.system(size: ThemeEngine.shared.activeTheme.iconSizes.huge))
+                .font(.largeTitle)
                 .foregroundStyle(.tertiary)
             Text("Select a Query")
                 .font(.system(size: ThemeEngine.shared.activeTheme.typography.title3, weight: .medium))
diff --git a/TablePro/Views/Editor/QueryEditorView.swift b/TablePro/Views/Editor/QueryEditorView.swift
@@ -81,13 +81,15 @@ struct QueryEditorView: View {
             // Clear button
             Button(action: { queryText = "" }) {
                 Image(systemName: "trash")
+                    .frame(width: 24, height: 24)
             }
             .buttonStyle(.borderless)
             .help("Clear Query")
 
             // Format button
             Button(action: formatQuery) {
                 Image(systemName: "text.alignleft")
+                    .frame(width: 24, height: 24)
             }
             .buttonStyle(.borderless)
             .help("Format Query (⌥⌘F)")
diff --git a/TablePro/Views/Filter/FilterPanelView.swift b/TablePro/Views/Filter/FilterPanelView.swift
@@ -173,7 +173,6 @@ struct FilterPanelView: View {
             }
         } label: {
             Image(systemName: "ellipsis.circle")
-                .font(.system(size: ThemeEngine.shared.activeTheme.iconSizes.small))
         }
         .menuStyle(.borderlessButton)
         .foregroundStyle(.secondary)
diff --git a/TablePro/Views/Filter/FilterRowView.swift b/TablePro/Views/Filter/FilterRowView.swift
@@ -140,6 +140,7 @@ struct FilterRowView: View {
         HStack(spacing: 4) {
             Button(action: onAdd) {
                 Image(systemName: "plus")
+                    .frame(width: 24, height: 24)
             }
             .buttonStyle(.borderless)
             .controlSize(.small)
@@ -148,6 +149,7 @@ struct FilterRowView: View {
 
             Button(action: onRemove) {
                 Image(systemName: "minus")
+                    .frame(width: 24, height: 24)
             }
             .buttonStyle(.borderless)
             .controlSize(.small)
diff --git a/TablePro/Views/Filter/SQLPreviewSheet.swift b/TablePro/Views/Filter/SQLPreviewSheet.swift
@@ -24,7 +24,8 @@ struct SQLPreviewSheet: View {
                 Spacer()
                 Button(action: { dismiss() }) {
                     Image(systemName: "xmark.circle.fill")
-                        .font(.system(size: ThemeEngine.shared.activeTheme.iconSizes.default))
+                        .imageScale(.large)
+                        .frame(width: 24, height: 24)
                         .foregroundStyle(.tertiary)
                 }
                 .buttonStyle(.borderless)
diff --git a/TablePro/Views/Main/Child/MainEditorContentView.swift b/TablePro/Views/Main/Child/MainEditorContentView.swift
@@ -394,7 +394,7 @@ struct MainEditorContentView: View {
         VStack(spacing: 12) {
             Spacer()
             Image(systemName: "tray")
-                .font(.system(size: 36))
+                .font(.largeTitle)
                 .foregroundStyle(.secondary)
             Text("No rows returned")
                 .font(.system(size: ThemeEngine.shared.activeTheme.typography.body, weight: .medium))
diff --git a/TablePro/Views/Results/InlineErrorBanner.swift b/TablePro/Views/Results/InlineErrorBanner.swift
@@ -26,21 +26,23 @@ struct InlineErrorBanner: View {
                 NSPasteboard.general.setString(message, forType: .string)
             } label: {
                 Image(systemName: "doc.on.doc")
+                    .frame(width: 24, height: 24)
                     .foregroundStyle(.secondary)
             }
             .buttonStyle(.plain)
             .help(String(localized: "Copy error message"))
             if let onDismiss {
                 Button { onDismiss() } label: {
                     Image(systemName: "xmark")
+                        .frame(width: 24, height: 24)
                         .foregroundStyle(.secondary)
                 }
                 .buttonStyle(.plain)
             }
         }
         .padding(.horizontal, 12)
         .padding(.vertical, 8)
-        .background(Color.red.opacity(0.08))
+        .background(Color(nsColor: .systemRed).opacity(0.08))
     }
 }
 
diff --git a/TablePro/Views/Results/ResultSuccessView.swift b/TablePro/Views/Results/ResultSuccessView.swift
@@ -17,7 +17,7 @@ struct ResultSuccessView: View {
         VStack(spacing: 16) {
             Spacer()
             Image(systemName: "checkmark.circle.fill")
-                .font(.system(size: 36))
+                .font(.largeTitle)
                 .foregroundStyle(.green)
             Text(String(format: String(localized: "%lld row(s) affected"), Int64(rowsAffected)))
                 .font(.system(size: ThemeEngine.shared.activeTheme.typography.body))
diff --git a/TablePro/Views/Settings/AISettingsView.swift b/TablePro/Views/Settings/AISettingsView.swift
@@ -82,7 +82,7 @@ struct AISettingsView: View {
                         removeSelectedProvider()
                     } label: {
                         Image(systemName: "minus")
-                            .frame(width: 24, height: 20)
+                            .frame(width: 24, height: 24)
                     }
                     .buttonStyle(.borderless)
                     .disabled(selectedProviderID == nil)
@@ -94,7 +94,7 @@ struct AISettingsView: View {
                         addProvider()
                     } label: {
                         Image(systemName: "plus")
-                            .frame(width: 24, height: 20)
+                            .frame(width: 24, height: 24)
                     }
                     .buttonStyle(.borderless)
 
@@ -107,7 +107,7 @@ struct AISettingsView: View {
                         }
                     } label: {
                         Image(systemName: "pencil")
-                            .frame(width: 24, height: 20)
+                            .frame(width: 24, height: 24)
                     }
                     .buttonStyle(.borderless)
                     .disabled(selectedProviderID == nil)
diff --git a/TablePro/Views/Sidebar/FavoritesTabView.swift b/TablePro/Views/Sidebar/FavoritesTabView.swift
@@ -207,7 +207,7 @@ internal struct FavoritesTabView: View {
     private var emptyState: some View {
         VStack(spacing: 6) {
             Image(systemName: "star")
-                .font(.system(size: 28, weight: .thin))
+                .font(.title.weight(.thin))
                 .foregroundStyle(Color(nsColor: .tertiaryLabelColor))
 
             Text("No Favorites")
@@ -223,9 +223,9 @@ internal struct FavoritesTabView: View {
                 viewModel.createFavorite()
             } label: {
                 Label(String(localized: "New Favorite"), systemImage: "plus")
-                    .font(.system(size: 12))
             }
             .buttonStyle(.borderless)
+            .controlSize(.small)
             .padding(.top, 4)
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
@@ -234,7 +234,7 @@ internal struct FavoritesTabView: View {
     private var noMatchState: some View {
         VStack(spacing: 6) {
             Image(systemName: "magnifyingglass")
-                .font(.system(size: 28, weight: .thin))
+                .font(.title.weight(.thin))
                 .foregroundStyle(Color(nsColor: .tertiaryLabelColor))
 
             Text("No Matching Favorites")
@@ -252,9 +252,9 @@ internal struct FavoritesTabView: View {
                 viewModel.createFavorite()
             } label: {
                 Label(String(localized: "New Favorite"), systemImage: "plus")
-                    .font(.system(size: 11))
             }
             .buttonStyle(.borderless)
+            .controlSize(.small)
             .foregroundStyle(Color(nsColor: .secondaryLabelColor))
 
             Spacer()
@@ -263,7 +263,7 @@ internal struct FavoritesTabView: View {
                 viewModel.createFolder()
             } label: {
                 Image(systemName: "folder.badge.plus")
-                    .font(.system(size: 11))
+                    .frame(width: 24, height: 24)
             }
             .buttonStyle(.borderless)
             .foregroundStyle(Color(nsColor: .secondaryLabelColor))
diff --git a/TablePro/Views/Structure/CreateTableView.swift b/TablePro/Views/Structure/CreateTableView.swift
@@ -149,14 +149,14 @@ struct CreateTableView: View {
         HStack(spacing: 8) {
             Button(action: addNewRow) {
                 Image(systemName: "plus")
-                    .frame(width: 16, height: 16)
+                    .frame(width: 24, height: 24)
             }
             .help(String(localized: "Add Row"))
             .disabled(!isGridTab)
 
             Button(action: { handleDeleteRows(selectedRows) }) {
                 Image(systemName: "minus")
-                    .frame(width: 16, height: 16)
+                    .frame(width: 24, height: 24)
             }
             .help(String(localized: "Delete Selected"))
             .disabled(!isGridTab || selectedRows.isEmpty)
diff --git a/TablePro/Views/Structure/TableStructureView+Schema.swift b/TablePro/Views/Structure/TableStructureView+Schema.swift
@@ -119,13 +119,15 @@ extension TableStructureView {
                 HStack(spacing: 4) {
                     Button(action: { ddlFontSize = max(10, ddlFontSize - 1) }) {
                         Image(systemName: "textformat.size.smaller")
+                            .frame(width: 24, height: 24)
                     }
                     Text("\(Int(ddlFontSize))")
                         .font(.caption)
                         .foregroundStyle(.secondary)
                         .frame(width: 24)
                     Button(action: { ddlFontSize = min(24, ddlFontSize + 1) }) {
                         Image(systemName: "textformat.size.larger")
+                            .frame(width: 24, height: 24)
                     }
                 }
                 .buttonStyle(.borderless)
diff --git a/TablePro/Views/Toolbar/ConnectionStatusView.swift b/TablePro/Views/Toolbar/ConnectionStatusView.swift
@@ -73,7 +73,7 @@ struct ConnectionStatusView: View {
     private var databaseNameLabel: some View {
         HStack(spacing: 4) {
             Image(systemName: "cylinder")
-                .font(.system(size: 13))
+                .imageScale(.small)
                 .foregroundStyle(ThemeEngine.shared.colors.toolbar.secondaryTextSwiftUI)
 
             Text(databaseName)
diff --git a/TablePro/Views/Toolbar/SafeModeBadgeView.swift b/TablePro/Views/Toolbar/SafeModeBadgeView.swift
@@ -19,11 +19,9 @@ struct SafeModeBadgeView: View {
         Button {
             showPopover.toggle()
         } label: {
-            HStack(spacing: 4) {
-                Image(systemName: safeModeLevel.iconName)
-                    .font(.system(size: 12, weight: .medium))
-                    .foregroundStyle(safeModeLevel.badgeColor)
-            }
+            Image(systemName: safeModeLevel.iconName)
+                .fontWeight(.medium)
+                .foregroundStyle(safeModeLevel.badgeColor)
         }
         .buttonStyle(.plain)
         .help(String(format: String(localized: "Safe Mode: %@"), safeModeLevel.displayName))

Original file line number	Diff line number	Diff line change
`@@ -225,7 +225,7 @@ struct AIChatPanelView: View {`
`225`	`225`	`}`
`226`	`226`	`.padding(.horizontal, 12)`
`227`	`227`	`.padding(.vertical, 6)`
`228`		`- .background(Color.yellow.opacity(0.1))`
	`228`	`+ .background(Color(nsColor: .systemYellow).opacity(0.1))`
`229`	`229`	`}`
`230`	`230`
`231`	`231`	`// MARK: - Input Area`
Original file line number	Diff line number	Diff line change
`@@ -86,7 +86,7 @@ struct SyncStatusIndicator: View {`
`86`	`86`	`case .syncing:`
`87`	`87`	`return AnyShapeStyle(.secondary)`
`88`	`88`	`case .error:`
`89`		`- return AnyShapeStyle(Color.orange)`
	`89`	`+ return AnyShapeStyle(Color(nsColor: .systemOrange))`
`90`	`90`	`case .disabled:`
`91`	`91`	`return AnyShapeStyle(.tertiary)`
`92`	`92`	`}`
Original file line number	Diff line number	Diff line change
`@@ -194,6 +194,8 @@ struct OnboardingContentView: View {`
`194`	`194`	`.fill(i == currentPage ? Color.accentColor : Color(nsColor: .tertiaryLabelColor))`
`195`	`195`	`.frame(width: 8, height: 8)`
`196`	`196`	`.scaleEffect(i == currentPage ? 1.2 : 1.0)`
	`197`	`+ .frame(width: 24, height: 24)`
	`198`	`+ .contentShape(Circle())`
`197`	`199`	`.onTapGesture { goToPage(i) }`
`198`	`200`	`}`
`199`	`201`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,13 +28,15 @@ struct ExplainResultView: View {`
`28`	`28`	`HStack(spacing: 4) {`
`29`	`29`	`Button(action: { fontSize = max(10, fontSize - 1) }) {`
`30`	`30`	`Image(systemName: "textformat.size.smaller")`
	`31`	`+ .frame(width: 24, height: 24)`
`31`	`32`	`}`
`32`	`33`	`Text("\(Int(fontSize))")`
`33`	`34`	`.font(.caption)`
`34`	`35`	`.foregroundStyle(.secondary)`
`35`	`36`	`.frame(width: 24)`
`36`	`37`	`Button(action: { fontSize = min(24, fontSize + 1) }) {`
`37`	`38`	`Image(systemName: "textformat.size.larger")`
	`39`	`+ .frame(width: 24, height: 24)`
`38`	`40`	`}`
`39`	`41`	`}`
`40`	`42`	`.buttonStyle(.borderless)`
Original file line number	Diff line number	Diff line change
`@@ -173,7 +173,6 @@ struct FilterPanelView: View {`
`173`	`173`	`}`
`174`	`174`	`} label: {`
`175`	`175`	`Image(systemName: "ellipsis.circle")`
`176`		`- .font(.system(size: ThemeEngine.shared.activeTheme.iconSizes.small))`
`177`	`176`	`}`
`178`	`177`	`.menuStyle(.borderlessButton)`
`179`	`178`	`.foregroundStyle(.secondary)`
Original file line number	Diff line number	Diff line change
`@@ -140,6 +140,7 @@ struct FilterRowView: View {`
`140`	`140`	`HStack(spacing: 4) {`
`141`	`141`	`Button(action: onAdd) {`
`142`	`142`	`Image(systemName: "plus")`
	`143`	`+ .frame(width: 24, height: 24)`
`143`	`144`	`}`
`144`	`145`	`.buttonStyle(.borderless)`
`145`	`146`	`.controlSize(.small)`
`@@ -148,6 +149,7 @@ struct FilterRowView: View {`
`148`	`149`
`149`	`150`	`Button(action: onRemove) {`
`150`	`151`	`Image(systemName: "minus")`
	`152`	`+ .frame(width: 24, height: 24)`
`151`	`153`	`}`
`152`	`154`	`.buttonStyle(.borderless)`
`153`	`155`	`.controlSize(.small)`