feat: add singular add/destroy panel functions to prevent whole DOM rebuilds

Author: devvaannsh

src/command/Commands.js

@@ -541,6 +541,9 @@ define(function (require, exports, module) {
     /** Toggles the git panel */
     exports.CMD_GIT_TOGGLE_PANEL = "git-toggle-panel";
 
+    /** Toggles the custom snippets panel */
+    exports.CMD_CUSTOM_SNIPPETS_PANEL = "custom_snippets";
+
     /** Goes to next git change */
     exports.CMD_GIT_GOTO_NEXT_CHANGE = "git-gotoNextChange";
 

src/view/DefaultPanelView.js

@@ -59,7 +59,7 @@ define(function (require, exports, module) {
             id: "snippets",
             icon: "fa-solid fa-code",
             label: Strings.CUSTOM_SNIPPETS_PANEL_TITLE || "Custom Snippets",
-            commandID: "custom_snippets"
+            commandID: Commands.CMD_CUSTOM_SNIPPETS_PANEL
         },
         {
             id: "shortcuts",
@@ -189,8 +189,7 @@ define(function (require, exports, module) {
         PanelView.on(PanelView.EVENT_PANEL_SHOWN, function (event, panelID) {
             if (panelID !== WorkspaceManager.DEFAULT_PANEL_ID) {
                 _panel.hide();
-            }
-            if (panelID === WorkspaceManager.DEFAULT_PANEL_ID) {
+            } else {
                 _updateButtonVisibility();
             }
         });

src/view/PanelView.js

@@ -139,6 +139,43 @@ define(function (require, exports, module) {
         });
     }
 
+    /**
+     * Append a single tab to the tab bar for the given panel.
+     * Use instead of _updateBottomPanelTabBar() when adding one tab.
+     * @param {string} panelId
+     * @private
+     */
+    function _addTabToBar(panelId) {
+        if (!_$tabsOverflow) {
+            return;
+        }
+        let panel = _panelMap[panelId];
+        if (!panel) {
+            return;
+        }
+        let title = panel._tabTitle || _getPanelTitle(panelId, panel.$panel);
+        let isActive = (panelId === _activeId);
+        let $tab = $('<div class="bottom-panel-tab"></div>')
+            .toggleClass('active', isActive)
+            .attr('data-panel-id', panelId);
+        $tab.append($('<span class="bottom-panel-tab-title"></span>').text(title));
+        $tab.append($('<span class="bottom-panel-tab-close-btn">&times;</span>').attr('title', Strings.CLOSE));
+        _$tabsOverflow.append($tab);
+    }
+
+    /**
+     * Remove a single tab from the tab bar by panel ID.
+     * Use instead of _updateBottomPanelTabBar() when removing one tab.
+     * @param {string} panelId
+     * @private
+     */
+    function _removeTabFromBar(panelId) {
+        if (!_$tabsOverflow) {
+            return;
+        }
+        _$tabsOverflow.find('.bottom-panel-tab[data-panel-id="' + panelId + '"]').remove();
+    }
+
     /**
      * Switch the active tab to the given panel. Does not show/hide the container.
      * @param {string} panelId
@@ -223,7 +260,7 @@ define(function (require, exports, module) {
      * Shows the panel
      */
     Panel.prototype.show = function () {
-        if (!this.canBeShown()) {
+        if (!this.canBeShown() || !_$container) {
             return;
         }
         let panelId = this.panelID;
@@ -256,7 +293,7 @@ define(function (require, exports, module) {
         }
 
         _switchToTab(panelId);
-        _updateBottomPanelTabBar();
+        _addTabToBar(panelId);
         exports.trigger(EVENT_PANEL_SHOWN, panelId);
     };
 
@@ -276,22 +313,30 @@ define(function (require, exports, module) {
         this.$panel.removeClass("active-bottom-panel");
 
         let wasActive = (_activeId === panelId);
+        let activatedId = null;
 
-        // Tab was removed — rebuild tab bar, then activate next if needed
         if (wasActive && _openIds.length > 0) {
             let nextIdx = Math.min(idx, _openIds.length - 1);
-            let nextId = _openIds[nextIdx];
+            activatedId = _openIds[nextIdx];
             _activeId = null; // clear so _switchToTab runs
-            _switchToTab(nextId);
-            exports.trigger(EVENT_PANEL_SHOWN, nextId);
+            _switchToTab(activatedId);
         } else if (wasActive) {
             // No more tabs - hide the container
             _activeId = null;
-            Resizer.hide(_$container[0]);
+            if (_$container) {
+                Resizer.hide(_$container[0]);
+            }
         }
-        _updateBottomPanelTabBar();
 
+        _removeTabFromBar(panelId);
+
+        // Always fire HIDDEN for the closed panel first
         exports.trigger(EVENT_PANEL_HIDDEN, panelId);
+
+        // Then fire SHOWN for the newly activated tab, if any
+        if (activatedId) {
+            exports.trigger(EVENT_PANEL_SHOWN, activatedId);
+        }
     };
 
     /**
@@ -318,6 +363,18 @@ define(function (require, exports, module) {
         }
     };
 
+    /**
+     * Destroys the panel, removing it from the tab bar, internal maps, and the DOM.
+     * After calling this, the Panel instance should not be reused.
+     */
+    Panel.prototype.destroy = function () {
+        if (_openIds.indexOf(this.panelID) !== -1) {
+            this.hide();
+        }
+        delete _panelMap[this.panelID];
+        this.$panel.remove();
+    };
+
     /**
      * gets the Panel's type
      * @return {string}

src/view/WorkspaceManager.js

@@ -262,6 +262,23 @@ define(function (require, exports, module) {
         return bottomPanel;
     }
 
+    /**
+     * Destroys a bottom panel, removing it from internal registries, the tab bar, and the DOM.
+     * After calling this, the panel ID is no longer valid and the Panel instance should not be reused.
+     *
+     * @param {!string} id  The panel ID that was passed to createBottomPanel.
+     */
+    function destroyBottomPanel(id) {
+        let panel = panelIDMap[id];
+        if (!panel) {
+            return;
+        }
+        if (typeof panel.destroy === 'function') {
+            panel.destroy();
+        }
+        delete panelIDMap[id];
+    }
+
     /**
      * Creates a new resizable plugin panel associated with the given toolbar icon. Panel is initially invisible.
      * The panel's size & visibility are automatically saved & restored. Only one panel can be associated with a
@@ -632,6 +649,7 @@ define(function (require, exports, module) {
 
     // Define public API
     exports.createBottomPanel               = createBottomPanel;
+    exports.destroyBottomPanel              = destroyBottomPanel;
     exports.createPluginPanel               = createPluginPanel;
     exports.isPanelVisible                  = isPanelVisible;
     exports.setPluginPanelWidth             = setPluginPanelWidth;