fix: disable native context menu and add sidebar refresh button (#159)

Prevent browser native "Reload" from resetting app state in Tauri,
and add a refresh button to the sidebar header for convenience.

src/App.vue

@@ -377,9 +377,18 @@ async function reconnectRestoredTabs() {
   }
 }
 
+function handleContextMenu(e: MouseEvent) {
+  if (!(e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) {
+    e.preventDefault();
+  }
+}
+
 onMounted(async () => {
   applyTheme();
   window.addEventListener("keydown", handleKeydown, true);
+  if (isDesktop) {
+    document.addEventListener("contextmenu", handleContextMenu);
+  }
   if (!isDesktop) {
     try {
       const res = await fetch("/api/auth/check");
@@ -416,6 +425,7 @@ onMounted(async () => {
 
 onUnmounted(() => {
   window.removeEventListener("keydown", handleKeydown, true);
+  document.removeEventListener("contextmenu", handleContextMenu);
 });
 </script>
 

src/components/layout/AppSidebar.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-import { Upload, Download } from "lucide-vue-next";
+import { Upload, Download, RefreshCw } from "lucide-vue-next";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import ConnectionTree from "@/components/sidebar/ConnectionTree.vue";
+import { useConnectionStore } from "@/stores/connectionStore";
 
 defineProps<{
   sidebarWidth: number;
@@ -16,6 +17,7 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useI18n();
+const connectionStore = useConnectionStore();
 </script>
 
 <template>
@@ -24,6 +26,14 @@ const { t } = useI18n();
       <div class="h-9 flex items-center px-3 text-xs font-medium text-muted-foreground border-b bg-muted/20">
         {{ t("sidebar.connections") }}
         <span class="flex-1" />
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon" class="h-5 w-5" @click="connectionStore.refreshAllTree()">
+              <RefreshCw class="h-3 w-3" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{{ t("contextMenu.refreshChildren") }}</TooltipContent>
+        </Tooltip>
         <Tooltip>
           <TooltipTrigger as-child>
             <Button variant="ghost" size="icon" class="h-5 w-5" @click="emit('import')">

src/i18n/locales/en.ts

@@ -419,6 +419,7 @@ export default {
     refreshChildren: "Refresh",
     pin: "Pin",
     unpin: "Unpin",
+    refreshTab: "Refresh Data",
     closeTab: "Close Tab",
     closeOtherTabs: "Close Other Tabs",
     closeAllTabs: "Close All Tabs",

src/i18n/locales/zh-CN.ts

@@ -411,6 +411,7 @@ export default {
     refreshChildren: "刷新",
     pin: "置顶",
     unpin: "取消置顶",
+    refreshTab: "刷新数据",
     closeTab: "关闭标签页",
     closeOtherTabs: "关闭其他标签页",
     closeAllTabs: "关闭全部标签页",

src/stores/connectionStore.ts

@@ -800,6 +800,22 @@ export const useConnectionStore = defineStore("connection", () => {
     persistSidebarLayoutDebounced();
   }
 
+  function refreshAllTree() {
+    const resetChildren = (nodes: TreeNode[]) => {
+      for (const node of nodes) {
+        if (node.type === "connection-group") {
+          if (node.children) resetChildren(node.children);
+          continue;
+        }
+        if (node.isExpanded) {
+          node.isExpanded = false;
+          node.children = [];
+        }
+      }
+    };
+    resetChildren(treeNodes.value);
+  }
+
   async function exportConnectionsToFile(passphrase: string) {
     const { encryptConfig } = await import("@/lib/configCrypto");
     const exportData = { connections: connections.value, layout: sidebarLayout.value };
@@ -946,6 +962,7 @@ export const useConnectionStore = defineStore("connection", () => {
     connections,
     activeConnectionId,
     treeNodes,
+    refreshAllTree,
     connectedIds,
     connectionErrors,
     setConnectionError,