From b8b8eca3c82c289a915fa586f71173707a0cf98d Mon Sep 17 00:00:00 2001
From: jakub961241 <144362244+jakub961241@users.noreply.github.com>
Date: Sun, 22 Mar 2026 01:11:30 +0100
Subject: [PATCH] fix: code editor tab persistence and close behavior (#12098)

Three bugs fixed in the file management code editor:

1. Closing tabs didn't persist - removeTab() and removeAllTab() never
   called saveTabsToStorage(), so closed tabs would reappear on next
   editor open.

2. Last tab couldn't be closed - :closable condition required
   fileTabs.length > 1, preventing closing the last remaining tab.
   Changed to >= 1. Context menu (close all, etc.) also now shows
   for single tabs.

3. Missing watch import in tabs component caused reactivity issues
   with tab selection synchronization.

Fixes #12098
---
 .../host/file-management/code-editor/index.vue     | 14 ++++++++++++--
 .../file-management/code-editor/tabs/index.vue     |  9 +++------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/host/file-management/code-editor/index.vue b/frontend/src/views/host/file-management/code-editor/index.vue
index e511a7174338..4d40847940a1 100644
--- a/frontend/src/views/host/file-management/code-editor/index.vue
+++ b/frontend/src/views/host/file-management/code-editor/index.vue
@@ -568,18 +568,25 @@ const removeTab = (targetPath: TabPaneName) => {
             .then(() => {
                 updateTabs();
                 saveContent();
-                getContent(selectTab.value, '');
+                saveTabsToStorage();
+                if (fileTabs.value.length > 0) {
+                    getContent(selectTab.value, '');
+                }
             })
             .catch(() => {
                 updateTabs();
                 isEdit.value = false;
+                saveTabsToStorage();
                 if (fileTabs.value.length > 0) {
                     getContent(selectTab.value, '');
                 }
             });
     } else {
         updateTabs();
-        getContent(selectTab.value, '');
+        saveTabsToStorage();
+        if (fileTabs.value.length > 0) {
+            getContent(selectTab.value, '');
+        }
     }
 };
 
@@ -613,6 +620,7 @@ const removeAllTab = (targetPath: string, type: 'left' | 'right' | 'all') => {
     const onConfirm = () => {
         updateTabs();
         saveContent();
+        saveTabsToStorage();
     };
 
     const onCancel = () => {
@@ -622,6 +630,7 @@ const removeAllTab = (targetPath: string, type: 'left' | 'right' | 'all') => {
         isEdit.value = false;
         isCreate.value = 'none';
         updateTabs();
+        saveTabsToStorage();
     };
 
     if (isEdit.value) {
@@ -635,6 +644,7 @@ const removeAllTab = (targetPath: string, type: 'left' | 'right' | 'all') => {
             .catch(onCancel);
     } else {
         updateTabs();
+        saveTabsToStorage();
         if (type === 'all') editor.dispose();
         else getContent(activeName, '');
     }
diff --git a/frontend/src/views/host/file-management/code-editor/tabs/index.vue b/frontend/src/views/host/file-management/code-editor/tabs/index.vue
index b45811f527ed..ae80ca36fd83 100644
--- a/frontend/src/views/host/file-management/code-editor/tabs/index.vue
+++ b/frontend/src/views/host/file-management/code-editor/tabs/index.vue
@@ -2,17 +2,14 @@
     <el-tabs
         v-model="currentTab"
         type="card"
-        :closable="props.fileTabs.length > 1"
+        :closable="props.fileTabs.length >= 1"
         class="monaco-editor monaco-editor-background"
         @tab-remove="props.onRemoveTab"
         @tab-change="props.onChangeTab"
     >
         <el-tab-pane v-for="item in props.fileTabs" :key="item.path" :name="item.path">
             <template #label>
-                <el-tooltip v-if="props.fileTabs.length == 1" :content="item.path" placement="bottom-start">
-                    <span>{{ item.name }}</span>
-                </el-tooltip>
-                <template v-if="props.fileTabs.length > 1">
+                <template v-if="props.fileTabs.length >= 1">
                     <el-dropdown
                         size="small"
                         :id="item.path"
@@ -58,7 +55,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 interface FileTabs {
     path: string;