feat: add snippet list header

Author: devvaannsh

src/extensionsIntegrated/CustomSnippets/htmlContent/snippets-panel.html

@@ -16,7 +16,7 @@
         </div>
 
         <div id="filter-snippets-panel" class="filter-snippets-panel">
-            <input id="filter-snippets-input" type="text" placeholder="Filter..." autocomplete="off">
+            <input id="filter-snippets-input" type="text" placeholder="Filter..." autocomplete="off" />
         </div>
 
         <div id="close-custom-snippets-panel-btn">
@@ -34,6 +34,14 @@
                 </div>
             </div>
 
+            <div id="snippets-list-header" class="snippets-list-header">
+                <div id="snippet-abbr-header">Abbreviation</div>
+                <div id="snippet-template-header">Template Text</div>
+                <div id="snippet-description-header">Description</div>
+                <div id="snippet-file-extension-header">File Extension</div>
+                <div id="snippet-actions-header"></div>
+            </div>
+
             <div id="snippets-list-wrapper" class="snippets-list-wrapper hidden">
                 <!--leaving here for format reference-->
                 <!--

src/styles/Extn-CustomSnippets.less

@@ -13,14 +13,14 @@
     display: flex;
     align-items: center;
     position: relative;
-    border-bottom: 1px solid @bc-panel-separator;
+    border-bottom: none;
     box-shadow:
         inset 0 1px 0 @bc-highlight,
         0 -1px 3px @bc-shadow-small;
 
     .dark & {
         background-color: @dark-bc-panel-bg-promoted;
-        border-bottom: 1px solid @dark-bc-panel-separator;
+        border-bottom: none;
         box-shadow:
             inset 0 1px 0 @dark-bc-highlight,
             0 -1px 3px @dark-bc-shadow-small;
@@ -141,6 +141,45 @@
     padding: 0;
 }
 
+#snippets-list-header {
+    display: flex;
+    align-items: center;
+    padding: 6px 13px;
+    margin: 0;
+    border: none;
+    font-weight: 700;
+    background-color: @bc-section-separator;
+
+    .dark & {
+        background-color: @dark-bc-section-separator;
+    }
+}
+
+#snippet-abbr-header,
+#snippet-abbr {
+    flex: 1;
+    min-width: 80px;
+}
+
+#snippet-template-header,
+#snippet-template {
+    flex: 2.4;
+    min-width: 100px;
+}
+
+#snippet-description-header,
+#snippet-description {
+    flex: 1.5;
+    min-width: 80px;
+}
+
+#snippet-file-extension-header,
+#snippet-files {
+    flex: 0.8;
+    min-width: 60px;
+    text-align: center;
+}
+
 #snippet-item {
     display: flex;
     align-items: center;
@@ -191,8 +230,6 @@
 }
 
 #snippet-abbr {
-    flex: 1;
-    min-width: 80px;
     color: @bc-text;
     white-space: nowrap;
     overflow: hidden;
@@ -204,8 +241,6 @@
 }
 
 #snippet-template {
-    flex: 2.5;
-    min-width: 100px;
     margin: 0 12px;
     color: @bc-text-thin;
     white-space: nowrap;
@@ -218,8 +253,6 @@
 }
 
 #snippet-description {
-    flex: 1.5;
-    min-width: 80px;
     margin: 0 12px;
     color: @bc-text-thin-quiet;
     white-space: nowrap;
@@ -232,10 +265,7 @@
 }
 
 #snippet-files {
-    flex: 0.8;
-    min-width: 60px;
     color: @bc-text-thin-quiet;
-    text-align: center;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -246,7 +276,6 @@
 }
 
 .delete-snippet-btn {
-    flex: 0 0 20px;
     color: @bc-text-thin-quiet;
     cursor: pointer;
     opacity: 0.3;