feat: Replace material icons with SVGs for sidebar buttons and enhance styling for better visual consistency

Author: Ashjha75

index.html

@@ -81,14 +81,14 @@ <h3>EXPLORER</h3>
 
                 <div class="sidebar-select">
                     <button class="btn-select-dir" id="selectDirBtn">
-                        <span class="material-symbols-outlined">folder_open</span>
+                        <img src="public/arrowRight.svg" alt="Select Directory" class="sidebar-btn-icon" />
                         Select Directory
                     </button>
                 </div>
 
                 <div class="sidebar-select">
                     <button class="btn-generate" id="generateContextBtn">
-                        <img src="public/contexticon.svg" alt="Context" class="context-btn-icon" />
+                        <img src="public/contexticon.svg" alt="Context" class="sidebar-btn-icon" />
                         Create Context
                     </button>
                 </div>

index.js

@@ -539,7 +539,7 @@
         if (isFolder) {
             return {
                 type: 'svg',
-                url: 'public/contexticon.svg',
+                url: 'public/arrowRight.svg',
                 color: '',
                 cls: 'folder-icon'
             };

style.css

@@ -1,3 +1,14 @@
+/* Only sidebar main action icons (Select Directory, Create Context) black and small */
+.sidebar-btn-icon {
+    width: 18px;
+    height: 18px;
+    vertical-align: middle;
+    margin-right: 8px;
+    margin-bottom: 2px;
+    filter: brightness(0) saturate(100%) invert(0);
+    -webkit-filter: brightness(0) saturate(100%) invert(0);
+    opacity: 0.92;
+}
 /* Context button icon */
 .context-btn-icon {
     width: 22px;