fix: hide snippet header when no snippets are present

Author: devvaannsh

src/extensionsIntegrated/CustomSnippets/src/UIHelper.js

@@ -112,10 +112,30 @@ define(function (require, exports, module) {
         }
     }
 
+    /**
+     * Shows the snippets list header
+     * this is called when there are snippets to display
+     */
+    function showSnippetsListHeader() {
+        const $snippetsListHeader = $("#snippets-list-header");
+        $snippetsListHeader.removeClass("hidden");
+    }
+
+    /**
+     * Hides the snippets list header
+     * this is called when there are no snippets to display (either none exist or all filtered out)
+     */
+    function hideSnippetsListHeader() {
+        const $snippetsListHeader = $("#snippets-list-header");
+        $snippetsListHeader.addClass("hidden");
+    }
+
     exports.showEmptySnippetMessage = showEmptySnippetMessage;
     exports.showSnippetsList = showSnippetsList;
     exports.clearSnippetsList = clearSnippetsList;
     exports.showAddSnippetMenu = showAddSnippetMenu;
     exports.showSnippetListMenu = showSnippetListMenu;
     exports.showDuplicateAbbreviationError = showDuplicateAbbreviationError;
+    exports.showSnippetsListHeader = showSnippetsListHeader;
+    exports.hideSnippetsListHeader = hideSnippetsListHeader;
 });

src/extensionsIntegrated/CustomSnippets/src/snippetsList.js

@@ -68,6 +68,7 @@ define(function (require, exports, module) {
      */
     function _showEmptyState() {
         UIHelper.showEmptySnippetMessage();
+        UIHelper.hideSnippetsListHeader();
         const $emptyMessage = $("#no-snippets-message");
         const $filterInput = $("#filter-snippets-input");
         const filterText = $filterInput.val().trim();
@@ -86,6 +87,7 @@ define(function (require, exports, module) {
      */
     function _renderSnippetsList(filteredSnippets) {
         UIHelper.showSnippetsList(); // show the snippets list wrapper
+        UIHelper.showSnippetsListHeader(); // show header when there are snippets to display
 
         // add each filtered snippet to the list
         filteredSnippets.forEach(function(snippetItem) {

src/styles/Extn-CustomSnippets.less

@@ -132,6 +132,10 @@
     display: none;
 }
 
+#snippets-list-header.hidden {
+    display: none;
+}
+
 #custom-snippets-panel .resizable-content {
     overflow-y: scroll;
     overflow-x: auto;