fix: add keyboard shortcut hint on data-unavailable page and make Mod+R work

When app restarts, table data shows "data unavailable" but Mod+R didn't
work because the DataGrid component wasn't mounted. Fixed by handling
the reload emit directly in handleModRTarget. Also added kbd-styled
shortcut hint (⌘R / Ctrl+R) on the data-unavailable placeholder.

apps/desktop/src/components/layout/ContentArea.vue

@@ -54,6 +54,7 @@ import { canCancelQueryExecution, queryExecutionLabelKey } from "@/lib/queryExec
 import { databaseDisplayNameForTab } from "@/lib/tabPresentation";
 import { isTableDataEditable } from "@/lib/tableEditing";
 import { tableMetaForDataTab } from "@/lib/tableDataTabMeta";
+import { formatShortcut } from "@/lib/shortcutRegistry";
 import { effectiveDatabaseTypeForConnection } from "@/lib/jdbcDialect";
 import type { QueryTab, ConnectionConfig } from "@/types/database";
 import type { SqlFormatDialect } from "@/lib/sqlFormatter";
@@ -177,6 +178,12 @@ const editorDialect = computed<"mysql" | "postgres" | "sqlserver">(() => {
 
 const shortcutModifier = computed(() => (navigator.platform.toLowerCase().includes("mac") ? "Cmd" : "Ctrl"));
 
+const modRKeys = computed(() =>
+  formatShortcut("Mod+R")
+    .split("+")
+    .map((key) => (key === "Cmd" ? "⌘" : key)),
+);
+
 const hasNumericData = computed(() => {
   const r = props.activeTab.result;
   if (!r || r.rows.length === 0) return false;
@@ -352,6 +359,10 @@ function handleModRTarget(target: Element): boolean {
   if (target.closest("[data-query-editor-root]")) return queryEditorRef.value?.openReplace() ?? false;
   if (target.closest("[data-cell-detail-editor-root]")) return dataGridRef.value?.openCellDetailSearch() ?? false;
   if (target.closest("[data-grid-root]")) return refreshData();
+  if (props.activeTab.mode === "data" && !props.activeTab.result && !props.activeTab.isExecuting) {
+    emit("reload");
+    return true;
+  }
   return false;
 }
 
@@ -860,6 +871,16 @@ defineExpose({ focusSearch, refreshData, handleModRTarget });
         <div v-else class="h-full flex flex-col items-center justify-center gap-3 text-muted-foreground text-sm">
           <Inbox class="h-8 w-8 opacity-60" />
           <div>{{ t("grid.dataUnavailable") }}</div>
+          <div class="text-xs text-muted-foreground/70 inline-flex items-center gap-1">
+            <span>{{ t("grid.dataUnavailableHintPrefix") }}</span>
+            <kbd
+              v-for="key in modRKeys"
+              :key="key"
+              class="min-w-5 rounded border border-border/60 bg-muted/50 px-1.5 py-0.5 text-center font-mono text-[12px] leading-none text-muted-foreground shadow-xs"
+              >{{ key }}</kbd
+            >
+            <span>{{ t("grid.dataUnavailableHintSuffix") }}</span>
+          </div>
           <Button variant="outline" size="sm" class="h-7 gap-1.5" @click="emit('reload')">
             <RefreshCcw class="h-3.5 w-3.5" />
             {{ t("grid.refresh") }}

apps/desktop/src/i18n/locales/en.ts

@@ -636,6 +636,8 @@ export default {
     tableInfoNoResults: "No results",
     queryError: "Query Error",
     dataUnavailable: "Table data needs to be reloaded.",
+    dataUnavailableHintPrefix: "Press ",
+    dataUnavailableHintSuffix: " or click Refresh below to reload.",
     refresh: "Refresh",
     commit: "Commit",
     rollback: "Rollback",

apps/desktop/src/i18n/locales/zh-CN.ts

@@ -631,6 +631,8 @@ export default {
     tableInfoNoResults: "无匹配结果",
     queryError: "查询出错",
     dataUnavailable: "表数据需要重新加载。",
+    dataUnavailableHintPrefix: "按 ",
+    dataUnavailableHintSuffix: " 或点击下方刷新按钮重新加载。",
     refresh: "刷新",
     commit: "提交",
     rollback: "回滚",