refactor: merge data table info bar and transaction toolbar into one row

Move refresh/commit/rollback buttons from DataGrid's internal toolbar
to ContentArea's table info header. Remove the redundant second row
and the column count display.

src/components/grid/DataGrid.vue

@@ -28,9 +28,6 @@ import {
   Info,
   Rows3,
   TriangleAlert,
-  RefreshCcw,
-  RotateCcw,
-  Table2,
 } from "lucide-vue-next";
 import { Button } from "@/components/ui/button";
 import {
@@ -1088,6 +1085,8 @@ function escapeAndHighlightKeywords(s: string): string {
     .replace(/>/g, ">")
     .replace(SQL_KEYWORDS, '<span class="ddl-kw">$1</span>');
 }
+
+defineExpose({ useTransaction, transactionActive, isSaving, onToolbarRefresh, onToolbarCommit, onToolbarRollback });
 </script>
 
 <template>
@@ -1095,55 +1094,6 @@ function escapeAndHighlightKeywords(s: string): string {
     <ContextMenu>
       <ContextMenuTrigger as-child>
         <div v-if="hasData" class="flex-1 flex flex-col overflow-hidden">
-          <!-- Transaction toolbar -->
-          <div
-            v-if="useTransaction"
-            class="flex items-center gap-1.5 px-2 py-1 border-b shrink-0"
-            :class="transactionActive ? 'bg-emerald-500/5 border-emerald-500/20' : 'bg-muted/20'"
-          >
-            <span
-              v-if="tableMeta"
-              class="inline-flex items-center gap-1 text-xs font-medium"
-              :class="transactionActive ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'"
-            >
-              <Table2 class="w-3 h-3" />
-              {{ tableMeta.tableName }}
-            </span>
-            <span
-              v-if="transactionActive"
-              class="text-xs text-emerald-600 dark:text-emerald-400 flex items-center gap-1"
-            >
-              <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
-              {{ t("grid.transactionActive") }}
-            </span>
-            <span class="flex-1" />
-            <Button variant="ghost" size="sm" class="h-5 text-xs px-1.5" :disabled="isSaving" @click="onToolbarRefresh">
-              <Loader2 v-if="loading" class="w-3 h-3 mr-1 animate-spin" />
-              <RefreshCcw v-else class="w-3 h-3 mr-1" />
-              {{ t("grid.refresh") }}
-            </Button>
-            <Button
-              :variant="transactionActive ? 'default' : 'secondary'"
-              size="sm"
-              class="h-5 text-xs px-1.5"
-              :disabled="!transactionActive || isSaving"
-              @click="onToolbarCommit"
-            >
-              <Loader2 v-if="isSaving" class="w-3 h-3 mr-1 animate-spin" />
-              <Save v-else class="w-3 h-3 mr-1" />
-              {{ t("grid.commit") }}
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              class="h-5 text-xs px-1.5"
-              :disabled="!transactionActive"
-              @click="onToolbarRollback"
-            >
-              <RotateCcw class="w-3 h-3 mr-1" />
-              {{ t("grid.rollback") }}
-            </Button>
-          </div>
           <!-- Search bar -->
           <div class="flex items-center gap-1 px-2 py-1 border-b shrink-0 bg-muted/20">
             <Search class="w-3.5 h-3.5 text-muted-foreground shrink-0" />

src/components/layout/ContentArea.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, defineAsyncComponent } from "vue";
 import { useI18n } from "vue-i18n";
-import { Loader2, Square, Bot, Table2, GitBranch, BarChart3 } from "lucide-vue-next";
+import { Loader2, Square, Bot, Table2, GitBranch, BarChart3, RefreshCcw, Save, RotateCcw } from "lucide-vue-next";
 import { Splitpanes, Pane } from "splitpanes";
 import "splitpanes/dist/splitpanes.css";
 import { Button } from "@/components/ui/button";
@@ -54,6 +54,7 @@ const showColumnInfo = ref(false);
 const columnInfoColumns = ref<ColumnInfo[]>([]);
 const columnInfoLoading = ref(false);
 const columnInfoError = ref<string | undefined>(undefined);
+const dataGridRef = ref<InstanceType<typeof DataGrid>>();
 
 const activeSqlFormatDialect = computed<SqlFormatDialect>(() => {
   switch (props.activeConnection?.db_type) {
@@ -333,12 +334,46 @@ function onHandleCloseColumnPanel() {
             {{ databaseDisplayNameForTab(activeTab.connectionId, activeTab.database) }}
             <template v-if="activeTab.tableMeta?.schema"> &middot; {{ activeTab.tableMeta.schema }}</template>
           </span>
-          <span v-if="activeTab.tableMeta" class="ml-auto text-muted-foreground">
-            {{ activeTab.tableMeta.columns.length }} {{ t("tree.columns") }}
+          <span v-if="activeTab.tableMeta" class="ml-auto flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              class="h-5 text-xs px-1.5"
+              :disabled="dataGridRef?.isSaving"
+              @click="dataGridRef?.onToolbarRefresh()"
+            >
+              <Loader2 v-if="activeTab.isExecuting" class="w-3 h-3 mr-1 animate-spin" />
+              <RefreshCcw v-else class="w-3 h-3 mr-1" />
+              {{ t("grid.refresh") }}
+            </Button>
+            <template v-if="dataGridRef?.useTransaction">
+              <Button
+                :variant="dataGridRef?.transactionActive ? 'default' : 'secondary'"
+                size="sm"
+                class="h-5 text-xs px-1.5"
+                :disabled="!dataGridRef?.transactionActive || dataGridRef?.isSaving"
+                @click="dataGridRef?.onToolbarCommit()"
+              >
+                <Loader2 v-if="dataGridRef?.isSaving" class="w-3 h-3 mr-1 animate-spin" />
+                <Save v-else class="w-3 h-3 mr-1" />
+                {{ t("grid.commit") }}
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                class="h-5 text-xs px-1.5"
+                :disabled="!dataGridRef?.transactionActive"
+                @click="dataGridRef?.onToolbarRollback()"
+              >
+                <RotateCcw class="w-3 h-3 mr-1" />
+                {{ t("grid.rollback") }}
+              </Button>
+            </template>
           </span>
         </div>
         <DataGrid
           v-if="activeTab.result"
+          ref="dataGridRef"
           class="flex-1 min-h-0"
           :key="activeTab.id"
           :result="activeTab.result"