From a159dcfc83a2d34be09f1a9daa54e20ad918a123 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Thu, 21 May 2026 23:15:44 +0800
Subject: [PATCH] feat(grid): optimize transpose view toggle

---
 .../editor/EditorSettingsDialog.vue           |  4 +-
 apps/desktop/src/components/grid/DataGrid.vue | 70 +++++++++++----
 apps/desktop/src/i18n/locales/en.ts           |  2 +
 apps/desktop/src/i18n/locales/es.ts           |  2 +
 apps/desktop/src/i18n/locales/zh-CN.ts        |  2 +
 apps/desktop/src/lib/dataGridTranspose.ts     | 52 +++++++++++
 apps/desktop/src/lib/keyboardShortcuts.ts     |  4 +
 apps/desktop/src/lib/shortcutRegistry.ts      |  9 +-
 packages/app-tests/dataGridTranspose.test.ts  | 90 +++++++++++++++++++
 .../app-tests/dataGridTransposeSource.test.ts | 12 +++
 packages/app-tests/keyboardShortcuts.test.ts  |  7 ++
 .../app-tests/settingsDialogLayout.test.ts    |  3 +
 packages/app-tests/settingsStore.test.ts      |  1 +
 13 files changed, 237 insertions(+), 21 deletions(-)
 create mode 100644 packages/app-tests/dataGridTransposeSource.test.ts

diff --git a/apps/desktop/src/components/editor/EditorSettingsDialog.vue b/apps/desktop/src/components/editor/EditorSettingsDialog.vue
index 8237c7378a..20ef3d188f 100644
--- a/apps/desktop/src/components/editor/EditorSettingsDialog.vue
+++ b/apps/desktop/src/components/editor/EditorSettingsDialog.vue
@@ -647,7 +647,7 @@ watch(
         </nav>
 
         <div class="min-w-0 flex-1 overflow-hidden px-1 flex flex-col">
-          <div class="min-h-0 flex-1 overflow-y-auto overflow-x-hidden pr-1">
+          <div class="min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-1 pr-2">
             <section v-if="activeSettingsTab === 'editor'" class="flex flex-col gap-5 py-2">
               <div class="grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]">
                 <!-- Font Family -->
@@ -847,7 +847,7 @@ watch(
                 <textarea
                   id="sidebar-hidden-table-prefixes"
                   v-model="editSidebarHiddenTablePrefixes"
-                  class="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  class="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
                   :placeholder="t('settings.sidebarHiddenTablePrefixesPlaceholder')"
                 />
                 <p class="text-xs text-muted-foreground">
diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 9d3e6f7369..3002a79bb5 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -90,8 +90,9 @@ import {
 } from "@/lib/tableEditing";
 import { formatGridSqlLiteral } from "@/lib/dataGridSql";
 import {
-  buildTransposeRows,
+  buildVisibleTransposeRows,
   nextContextTransposeState,
+  nextKeyboardTransposeState,
   nextTransposeState,
   transposeFieldWidth,
   transposeScrollLeftForRecord,
@@ -118,7 +119,7 @@ import {
   type DateTimeFormatterUnit,
 } from "@/lib/columnFormatter";
 import { temporalCellEditorKind, type TemporalCellEditorKind } from "@/lib/dataGridTemporalEditor";
-import { isCancelSearchShortcut, isFocusSearchShortcut } from "@/lib/keyboardShortcuts";
+import { isCancelSearchShortcut, isFocusSearchShortcut, isToggleTransposeShortcut } from "@/lib/keyboardShortcuts";
 import { dataGridHeaderContentWidth, scrollbarGutterWidth } from "@/lib/dataGridScrollGutter";
 import { dataGridSaveActionMode, dataGridSaveToolbarState } from "@/lib/dataGridSaveUi";
 import { appendColumnValueFilterCondition, buildColumnValueFilterCondition } from "@/lib/dataGridColumnFilter";
@@ -2258,6 +2259,33 @@ function scrollCellIntoView(rowIndex: number, colIndex: number) {
   });
 }
 
+function currentTransposeRequestedRowIndex(): number {
+  const position = currentSelectedCellPosition();
+  if (position) return position.rowIndex;
+  if (transposeRowIndex.value !== null) return transposeRowIndex.value;
+  return 0;
+}
+
+function toggleKeyboardTranspose(): boolean {
+  if (displayItems.value.length === 0) return false;
+  const next = nextKeyboardTransposeState({
+    showTranspose: showTranspose.value,
+    transposeRowIndex: transposeRowIndex.value,
+    requestedRowIndex: currentTransposeRequestedRowIndex(),
+    rowIds: displayItems.value.map((item) => item.id),
+    selectedRowIds: selectedRowIds.value,
+    selectedRange: selectedRange.value,
+  });
+  showTranspose.value = next.showTranspose;
+  transposeRowIndex.value = next.transposeRowIndex;
+  if (next.showTranspose) {
+    closeCellDetails();
+    nextTick(updateTransposeViewport);
+    if (next.transposeRowIndex !== null) scrollTransposeRecordIntoView(next.transposeRowIndex);
+  }
+  return true;
+}
+
 function moveSelectedCell(rowDelta: number, colDelta: number): boolean {
   const position = currentSelectedCellPosition();
   if (!position || editingCell.value || displayItems.value.length === 0 || visibleColumnIndexes.value.length === 0)
@@ -2293,6 +2321,10 @@ async function onGridKeydown(event: KeyboardEvent) {
     return;
   }
   if (eventTargetAllowsNativeClipboard(event)) return;
+  if (isToggleTransposeShortcut(event, settingsStore.editorSettings.shortcuts) && toggleKeyboardTranspose()) {
+    event.preventDefault();
+    return;
+  }
   if (event.key === "ArrowLeft" && moveTransposeRecordSelection(-1)) {
     event.preventDefault();
     return;
@@ -2375,15 +2407,6 @@ const transposePinnedWidth = computed(
   () => transposePinnedWidthOverride.value ?? transposeFieldWidth(visibleColumns.value),
 );
 
-const transposeRows = computed(() => {
-  return buildTransposeRows({
-    columns: visibleColumns.value,
-    records: displayItems.value.map((item) => visibleColumnIndexes.value.map((columnIndex) => item.data[columnIndex])),
-    typeByColumn: columnTypeMap.value,
-    displayValue: (value, _column, index) => formatCell(value, visibleColumnIndexes.value[index]),
-  });
-});
-const isTransposeMode = computed(() => showTranspose.value && transposeRows.value.length > 0);
 const transposeRecordWindow = computed(() =>
   visibleTransposeRecordWindow({
     totalRecords: displayItems.value.length,
@@ -2398,6 +2421,17 @@ const visibleTransposeRecordIndexes = computed(() => {
   const window = transposeRecordWindow.value;
   return Array.from({ length: window.end - window.start }, (_, offset) => window.start + offset);
 });
+const transposeRows = computed(() => {
+  return buildVisibleTransposeRows({
+    columns: visibleColumns.value,
+    records: displayItems.value.map((item) => item.data),
+    recordIndexes: visibleTransposeRecordIndexes.value,
+    valueIndexes: visibleColumnIndexes.value,
+    typeByColumn: columnTypeMap.value,
+    displayValue: (value, _column, index) => formatCell(value, visibleColumnIndexes.value[index]),
+  });
+});
+const isTransposeMode = computed(() => showTranspose.value && transposeRows.value.length > 0);
 const transposeTotalWidth = computed(
   () => transposePinnedWidth.value + displayItems.value.length * transposeRecordWidth.value,
 );
@@ -3344,18 +3378,18 @@ defineExpose({
                       </div>
                       <div class="shrink-0" :style="{ width: `${transposeRecordWindow.beforeWidth}px` }" />
                       <div
-                        v-for="recordIndex in visibleTransposeRecordIndexes"
-                        :key="`${item.id}:${recordIndex}`"
+                        v-for="cell in item.values"
+                        :key="`${item.id}:${cell.recordIndex}`"
                         class="shrink-0 border-r border-border/70 px-2 py-1.5 font-mono truncate"
                         :class="{
-                          'text-muted-foreground italic': item.values[recordIndex]?.isNull,
-                          'bg-primary/10': recordIndex === transposeRowIndex,
+                          'text-muted-foreground italic': cell.isNull,
+                          'bg-primary/10': cell.recordIndex === transposeRowIndex,
                         }"
                         :style="{ width: `${transposeRecordWidth}px` }"
-                        :title="item.values[recordIndex]?.display"
-                        @click="selectTransposeRecord(recordIndex)"
+                        :title="cell.display"
+                        @click="selectTransposeRecord(cell.recordIndex)"
                       >
-                        {{ item.values[recordIndex]?.display }}
+                        {{ cell.display }}
                       </div>
                       <div class="shrink-0" :style="{ width: `${transposeRecordWindow.afterWidth}px` }" />
                     </div>
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index c81a295452..78e9db535b 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -1219,9 +1219,11 @@ export default {
     shortcutCloseTab: "Close tab",
     shortcutFocusSearch: "Focus search",
     shortcutRefreshData: "Refresh data",
+    shortcutToggleTranspose: "Toggle transpose view",
     shortcutCancelSearch: "Cancel search",
     shortcutScopeGlobal: "Global",
     shortcutScopeEditor: "SQL editor",
+    shortcutScopeGrid: "Data grid",
     shortcutScopeSearch: "Search fields",
     shortcutPressShortcut: "Press shortcut",
     shortcutConflict: "This shortcut conflicts with another action in the same scope.",
diff --git a/apps/desktop/src/i18n/locales/es.ts b/apps/desktop/src/i18n/locales/es.ts
index 35becd3e14..19451ba160 100644
--- a/apps/desktop/src/i18n/locales/es.ts
+++ b/apps/desktop/src/i18n/locales/es.ts
@@ -1117,9 +1117,11 @@ export default {
     shortcutCloseTab: "Cerrar pestaña",
     shortcutFocusSearch: "Enfocar búsqueda",
     shortcutRefreshData: "Actualizar datos",
+    shortcutToggleTranspose: "Alternar vista transpuesta",
     shortcutCancelSearch: "Cancelar búsqueda",
     shortcutScopeGlobal: "Global",
     shortcutScopeEditor: "Editor SQL",
+    shortcutScopeGrid: "Cuadrícula de datos",
     shortcutScopeSearch: "Campos de búsqueda",
     shortcutPressShortcut: "Presiona un atajo",
     shortcutConflict: "Este atajo entra en conflicto con otra acción del mismo ámbito.",
diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts
index b100cff008..410438505c 100644
--- a/apps/desktop/src/i18n/locales/zh-CN.ts
+++ b/apps/desktop/src/i18n/locales/zh-CN.ts
@@ -1197,9 +1197,11 @@ export default {
     shortcutCloseTab: "关闭标签页",
     shortcutFocusSearch: "聚焦搜索",
     shortcutRefreshData: "刷新数据",
+    shortcutToggleTranspose: "切换转置视图",
     shortcutCancelSearch: "取消搜索",
     shortcutScopeGlobal: "全局",
     shortcutScopeEditor: "SQL 编辑器",
+    shortcutScopeGrid: "数据表格",
     shortcutScopeSearch: "搜索框",
     shortcutPressShortcut: "按下快捷键",
     shortcutConflict: "这个快捷键与同一作用域内的其他操作冲突。",
diff --git a/apps/desktop/src/lib/dataGridTranspose.ts b/apps/desktop/src/lib/dataGridTranspose.ts
index 7df3645184..7878c17562 100644
--- a/apps/desktop/src/lib/dataGridTranspose.ts
+++ b/apps/desktop/src/lib/dataGridTranspose.ts
@@ -16,6 +16,10 @@ export interface DataGridTransposeCell<T> {
   isNull: boolean;
 }
 
+export interface DataGridVisibleTransposeCell<T> extends DataGridTransposeCell<T> {
+  recordIndex: number;
+}
+
 export interface DataGridTransposeRow<T> {
   id: string;
   column: string;
@@ -23,6 +27,18 @@ export interface DataGridTransposeRow<T> {
   values: Array<DataGridTransposeCell<T>>;
 }
 
+export interface DataGridVisibleTransposeRow<T> {
+  id: string;
+  column: string;
+  type: string;
+  values: Array<DataGridVisibleTransposeCell<T>>;
+}
+
+export interface BuildVisibleTransposeRowsOptions<T> extends BuildTransposeRowsOptions<T> {
+  recordIndexes: number[];
+  valueIndexes?: number[];
+}
+
 export interface TransposeRecordWindowOptions {
   totalRecords: number;
   scrollLeft: number;
@@ -58,6 +74,8 @@ export interface ContextTransposeStateOptions extends TransposeAnchorOptions {
   transposeRowIndex: number | null;
 }
 
+export type KeyboardTransposeStateOptions = ContextTransposeStateOptions;
+
 export interface TransposeFieldWidthOptions {
   minWidth?: number;
   maxWidth?: number;
@@ -89,6 +107,14 @@ export function nextContextTransposeState(options: ContextTransposeStateOptions)
   return nextTransposeState(options.showTranspose, options.transposeRowIndex, anchorRowIndex);
 }
 
+export function nextKeyboardTransposeState(options: KeyboardTransposeStateOptions): DataGridTransposeState {
+  if (options.showTranspose) return { showTranspose: false, transposeRowIndex: null };
+  if (options.rowIds.length === 0) return { showTranspose: false, transposeRowIndex: null };
+  const requestedRowIndex = Math.max(0, Math.min(options.rowIds.length - 1, options.requestedRowIndex));
+  const anchorRowIndex = transposeAnchorRowIndex({ ...options, requestedRowIndex });
+  return { showTranspose: true, transposeRowIndex: anchorRowIndex };
+}
+
 export function buildTransposeRows<T>(options: BuildTransposeRowsOptions<T>): Array<DataGridTransposeRow<T>> {
   return options.columns.map((column, columnIndex) => {
     return {
@@ -107,6 +133,32 @@ export function buildTransposeRows<T>(options: BuildTransposeRowsOptions<T>): Ar
   });
 }
 
+export function buildVisibleTransposeRows<T>(
+  options: BuildVisibleTransposeRowsOptions<T>,
+): Array<DataGridVisibleTransposeRow<T>> {
+  return options.columns.map((column, columnIndex) => {
+    return {
+      id: `${columnIndex}:${column}`,
+      column,
+      type: options.typeByColumn?.get(column) || "",
+      values: options.recordIndexes.flatMap((recordIndex) => {
+        const record = options.records[recordIndex];
+        if (!record) return [];
+        const valueIndex = options.valueIndexes?.[columnIndex] ?? columnIndex;
+        const value = record[valueIndex] as T;
+        return [
+          {
+            recordIndex,
+            value,
+            display: options.displayValue(value, column, columnIndex, recordIndex),
+            isNull: value === null,
+          },
+        ];
+      }),
+    };
+  });
+}
+
 export function visibleTransposeRecordWindow(options: TransposeRecordWindowOptions): TransposeRecordWindow {
   if (options.totalRecords <= 0 || options.recordWidth <= 0) {
     return { start: 0, end: 0, beforeWidth: 0, afterWidth: 0 };
diff --git a/apps/desktop/src/lib/keyboardShortcuts.ts b/apps/desktop/src/lib/keyboardShortcuts.ts
index 46a6003344..608475d293 100644
--- a/apps/desktop/src/lib/keyboardShortcuts.ts
+++ b/apps/desktop/src/lib/keyboardShortcuts.ts
@@ -88,6 +88,10 @@ export function isRefreshDataShortcut(event: ShortcutLikeEvent, shortcuts?: Part
   return matchesShortcut(event, actionShortcut("refreshData", shortcuts));
 }
 
+export function isToggleTransposeShortcut(event: ShortcutLikeEvent, shortcuts?: Partial<ShortcutSettings>): boolean {
+  return matchesShortcut(event, actionShortcut("toggleTranspose", shortcuts));
+}
+
 export function isSaveShortcut(event: ShortcutLikeEvent, shortcuts?: Partial<ShortcutSettings>): boolean {
   return matchesShortcut(event, actionShortcut("saveSql", shortcuts));
 }
diff --git a/apps/desktop/src/lib/shortcutRegistry.ts b/apps/desktop/src/lib/shortcutRegistry.ts
index d34397a866..491096cce6 100644
--- a/apps/desktop/src/lib/shortcutRegistry.ts
+++ b/apps/desktop/src/lib/shortcutRegistry.ts
@@ -5,9 +5,10 @@ export type ShortcutActionId =
   | "closeTab"
   | "focusSearch"
   | "refreshData"
+  | "toggleTranspose"
   | "cancelSearch";
 
-export type ShortcutScope = "global" | "editor" | "search";
+export type ShortcutScope = "global" | "editor" | "grid" | "search";
 
 export interface ShortcutDefinition {
   id: ShortcutActionId;
@@ -55,6 +56,12 @@ export const SHORTCUT_DEFINITIONS: ShortcutDefinition[] = [
     scope: "global",
     defaultShortcut: "F5",
   },
+  {
+    id: "toggleTranspose",
+    labelKey: "settings.shortcutToggleTranspose",
+    scope: "grid",
+    defaultShortcut: "Tab",
+  },
   {
     id: "cancelSearch",
     labelKey: "settings.shortcutCancelSearch",
diff --git a/packages/app-tests/dataGridTranspose.test.ts b/packages/app-tests/dataGridTranspose.test.ts
index bbec7161c9..d8b70345a2 100644
--- a/packages/app-tests/dataGridTranspose.test.ts
+++ b/packages/app-tests/dataGridTranspose.test.ts
@@ -2,7 +2,9 @@ import { strict as assert } from "node:assert";
 import test from "node:test";
 import {
   buildTransposeRows,
+  buildVisibleTransposeRows,
   nextContextTransposeState,
+  nextKeyboardTransposeState,
   nextTransposeState,
   transposeAnchorRowIndex,
   transposeFieldWidth,
@@ -93,6 +95,94 @@ test("builds one virtualizable transpose row per field with all record values",
   ]);
 });
 
+test("builds transpose rows for only the visible record window", () => {
+  const formatted: string[] = [];
+  const rows = buildVisibleTransposeRows({
+    columns: ["id", "name"],
+    records: [
+      [1, "Ada"],
+      [2, "Grace"],
+      [3, "Linus"],
+    ],
+    recordIndexes: [1, 2],
+    displayValue: (value, column, _columnIndex, recordIndex) => {
+      formatted.push(`${recordIndex}:${column}`);
+      return String(value);
+    },
+  });
+
+  assert.deepEqual(
+    rows.map((row) => ({
+      column: row.column,
+      values: row.values.map((cell) => ({ recordIndex: cell.recordIndex, display: cell.display })),
+    })),
+    [
+      {
+        column: "id",
+        values: [
+          { recordIndex: 1, display: "2" },
+          { recordIndex: 2, display: "3" },
+        ],
+      },
+      {
+        column: "name",
+        values: [
+          { recordIndex: 1, display: "Grace" },
+          { recordIndex: 2, display: "Linus" },
+        ],
+      },
+    ],
+  );
+  assert.deepEqual(formatted, ["1:id", "2:id", "1:name", "2:name"]);
+});
+
+test("builds visible transpose rows from mapped source column indexes", () => {
+  const rows = buildVisibleTransposeRows({
+    columns: ["name"],
+    records: [
+      [1, "Ada"],
+      [2, "Grace"],
+    ],
+    recordIndexes: [0],
+    valueIndexes: [1],
+    displayValue: (value) => String(value),
+  });
+
+  assert.equal(rows[0].values[0].display, "Ada");
+});
+
+test("keyboard transpose opens from the selected cell row and closes when active", () => {
+  assert.deepEqual(
+    nextKeyboardTransposeState({
+      showTranspose: false,
+      transposeRowIndex: null,
+      requestedRowIndex: 3,
+      rowIds: [10, 11, 12, 13, 14],
+      selectedRowIds: new Set(),
+      selectedRange: null,
+    }),
+    {
+      showTranspose: true,
+      transposeRowIndex: 3,
+    },
+  );
+
+  assert.deepEqual(
+    nextKeyboardTransposeState({
+      showTranspose: true,
+      transposeRowIndex: 3,
+      requestedRowIndex: 3,
+      rowIds: [10, 11, 12, 13, 14],
+      selectedRowIds: new Set(),
+      selectedRange: null,
+    }),
+    {
+      showTranspose: false,
+      transposeRowIndex: null,
+    },
+  );
+});
+
 test("calculates a horizontal record window with spacer widths", () => {
   assert.deepEqual(
     visibleTransposeRecordWindow({
diff --git a/packages/app-tests/dataGridTransposeSource.test.ts b/packages/app-tests/dataGridTransposeSource.test.ts
new file mode 100644
index 0000000000..9fda519d03
--- /dev/null
+++ b/packages/app-tests/dataGridTransposeSource.test.ts
@@ -0,0 +1,12 @@
+import { readFileSync } from "node:fs";
+import { strict as assert } from "node:assert";
+import test from "node:test";
+
+const source = readFileSync("apps/desktop/src/components/grid/DataGrid.vue", "utf8");
+
+test("data grid uses lazy transpose rows and Tab keyboard toggle", () => {
+  assert.match(source, /buildVisibleTransposeRows/);
+  assert.match(source, /nextKeyboardTransposeState/);
+  assert.match(source, /isToggleTransposeShortcut/);
+  assert.match(source, /settingsStore\.editorSettings\.shortcuts/);
+});
diff --git a/packages/app-tests/keyboardShortcuts.test.ts b/packages/app-tests/keyboardShortcuts.test.ts
index 8abaa3a186..aa036b467e 100644
--- a/packages/app-tests/keyboardShortcuts.test.ts
+++ b/packages/app-tests/keyboardShortcuts.test.ts
@@ -10,6 +10,7 @@ import {
   isObjectSourceSaveShortcutTarget,
   isRefreshDataShortcut,
   isSaveShortcut,
+  isToggleTransposeShortcut,
 } from "../../apps/desktop/src/lib/keyboardShortcuts.ts";
 import { shortcutToCodeMirrorKey } from "../../apps/desktop/src/lib/shortcutRegistry.ts";
 
@@ -85,6 +86,12 @@ test("matches F5 for refreshing data", () => {
   assert.equal(isRefreshDataShortcut({ key: "F5" }), true);
 });
 
+test("matches configurable shortcut for toggling transpose view", () => {
+  assert.equal(isToggleTransposeShortcut({ key: "Tab" }), true);
+  assert.equal(isToggleTransposeShortcut({ key: "Tab" }, { toggleTranspose: "Alt+T" } as any), false);
+  assert.equal(isToggleTransposeShortcut({ key: "t", altKey: true }, { toggleTranspose: "Alt+T" } as any), true);
+});
+
 test("matches custom shortcut settings for refreshing data", () => {
   assert.equal(isRefreshDataShortcut({ key: "F5" }, { refreshData: "Shift+Mod+R" } as any), false);
   assert.equal(
diff --git a/packages/app-tests/settingsDialogLayout.test.ts b/packages/app-tests/settingsDialogLayout.test.ts
index 0f435e1702..e8de0a5a12 100644
--- a/packages/app-tests/settingsDialogLayout.test.ts
+++ b/packages/app-tests/settingsDialogLayout.test.ts
@@ -3,6 +3,7 @@ import { strict as assert } from "node:assert";
 import test from "node:test";
 
 const source = readFileSync("apps/desktop/src/components/editor/EditorSettingsDialog.vue", "utf8");
+const shortcutSource = readFileSync("apps/desktop/src/lib/shortcutRegistry.ts", "utf8");
 
 test("settings dialog uses a side category navigation", () => {
   assert.match(source, /settingsCategoryNav/);
@@ -34,6 +35,7 @@ test("settings dialog has a shortcuts category", () => {
   assert.match(source, /value: "shortcuts"/);
   assert.match(source, /activeSettingsTab === ['"]shortcuts['"]/);
   assert.match(source, /SHORTCUT_DEFINITIONS/);
+  assert.match(shortcutSource, /settings\.shortcutToggleTranspose/);
 });
 
 test("shortcut settings capture custom keydown input instead of fixed select options", () => {
@@ -48,6 +50,7 @@ test("settings dialog exposes sidebar activation in navigation settings", () =>
   assert.match(source, /settings\.sidebarActivation/);
   assert.match(source, /settings\.sidebarHiddenTablePrefixes/);
   assert.match(source, /editSidebarHiddenTablePrefixes/);
+  assert.match(source, /focus-visible:ring-inset/);
 });
 
 test("AI settings can browse provider model names while keeping manual input", () => {
diff --git a/packages/app-tests/settingsStore.test.ts b/packages/app-tests/settingsStore.test.ts
index 022417d8bc..19f98890c0 100644
--- a/packages/app-tests/settingsStore.test.ts
+++ b/packages/app-tests/settingsStore.test.ts
@@ -31,6 +31,7 @@ test("defaults shortcut settings", () => {
   assert.equal(settings.shortcuts.newQuery, "Mod+T");
   assert.equal(settings.shortcuts.focusSearch, "Mod+F");
   assert.equal(settings.shortcuts.refreshData, "F5");
+  assert.equal(settings.shortcuts.toggleTranspose, "Tab");
 });
 
 test("keeps saved shortcut overrides", () => {