refactor(panel): use SVG icons instead of FontAwesome classes for bottom panel tabs

Replace iconClass (FontAwesome class strings) with iconSvg (SVG file paths)
for all createBottomPanel callers. FA class approach caused inconsistent
sizing between fa-solid and fa-brands due to font-weight/font-size quirks
that required CSS overrides.

SVG icons are rendered via mask-image with background-color: currentColor
so they inherit the theme text color automatically — works correctly in
both light and dark themes, and for active/inactive tab states.

- New SVG files in src/styles/images/: panel-icon-{terminal,problems,
  search,git,snippets,shortcuts,default}.svg
- Updated callers: Terminal, CodeInspection, SearchResultsView, Git,
  CustomSnippets, DisplayShortcuts, DefaultPanelView
- PanelView.js and DefaultPanelView.js set mask-image inline via JS
- Removed iconClass support and related CSS overrides

Author: abose

src/extensions/default/Git/src/Panel.js

@@ -1240,7 +1240,7 @@ define(function (require, exports) {
         var $panelHtml = $(panelHtml);
         $panelHtml.find(".git-available, .git-not-available").hide();
 
-        gitPanel = WorkspaceManager.createBottomPanel("main-git.panel", $panelHtml, 100, Strings.GIT_PANEL_TITLE, {iconClass: "fa-brands fa-git-alt"});
+        gitPanel = WorkspaceManager.createBottomPanel("main-git.panel", $panelHtml, 100, Strings.GIT_PANEL_TITLE, {iconSvg: "styles/images/panel-icon-git.svg"});
         $gitPanel = gitPanel.$panel;
         const resizeObserver = new ResizeObserver(_panelResized);
         resizeObserver.observe($gitPanel[0]);

src/extensionsIntegrated/CustomSnippets/main.js

@@ -59,7 +59,7 @@ define(function (require, exports, module) {
      */
     function _createPanel() {
         customSnippetsPanel = WorkspaceManager.createBottomPanel(PANEL_ID, $snippetsPanel, PANEL_MIN_SIZE,
-            Strings.CUSTOM_SNIPPETS_PANEL_TITLE, {iconClass: "fa-solid fa-code"});
+            Strings.CUSTOM_SNIPPETS_PANEL_TITLE, {iconSvg: "styles/images/panel-icon-snippets.svg"});
         UIHelper.init(customSnippetsPanel);
         customSnippetsPanel.show();
 

src/extensionsIntegrated/DisplayShortcuts/main.js

@@ -479,7 +479,7 @@ define(function (require, exports, module) {
         // AppInit.htmlReady() has already executed before extensions are loaded
         // so, for now, we need to call this ourself
         panel = WorkspaceManager.createBottomPanel(TOGGLE_SHORTCUTS_ID, $(s), 300,
-            Strings.KEYBOARD_SHORTCUT_PANEL_TITLE, {iconClass: "fa-solid fa-keyboard"});
+            Strings.KEYBOARD_SHORTCUT_PANEL_TITLE, {iconSvg: "styles/images/panel-icon-shortcuts.svg"});
         panel.hide();
 
         $shortcutsPanel = $("#shortcuts-panel");

src/extensionsIntegrated/Terminal/main.js

@@ -115,7 +115,7 @@ define(function (require, exports, module) {
         };
 
         $panel = $(Mustache.render(panelHTML, templateVars));
-        panel = WorkspaceManager.createBottomPanel(PANEL_ID, $panel, PANEL_MIN_SIZE, undefined, {iconClass: "fa-solid fa-terminal"});
+        panel = WorkspaceManager.createBottomPanel(PANEL_ID, $panel, PANEL_MIN_SIZE, undefined, {iconSvg: "styles/images/panel-icon-terminal.svg"});
 
         // Override focus() so Shift+Escape can transfer focus to the terminal
         panel.focus = function () {

src/language/CodeInspection.js

@@ -1240,7 +1240,7 @@ define(function (require, exports, module) {
         Editor.registerGutter(CODE_INSPECTION_GUTTER, CODE_INSPECTION_GUTTER_PRIORITY);
         // Create bottom panel to list error details
         var panelHtml = Mustache.render(PanelTemplate, Strings);
-        problemsPanel = WorkspaceManager.createBottomPanel("errors", $(panelHtml), 100, Strings.CMD_VIEW_TOGGLE_PROBLEMS, {iconClass: "fa-solid fa-triangle-exclamation"});
+        problemsPanel = WorkspaceManager.createBottomPanel("errors", $(panelHtml), 100, Strings.CMD_VIEW_TOGGLE_PROBLEMS, {iconSvg: "styles/images/panel-icon-problems.svg"});
         $problemsPanel = $("#problems-panel");
         $fixAllBtn = $problemsPanel.find(".problems-fix-all-btn");
         $fixAllBtn.click(()=>{

src/search/SearchResultsView.js

@@ -82,7 +82,7 @@ define(function (require, exports, module) {
         const self = this;
         let panelHtml  = Mustache.render(searchPanelTemplate, {panelID: panelID});
 
-        this._panel    = WorkspaceManager.createBottomPanel(panelName, $(panelHtml), 100, title, {iconClass: "fa-solid fa-magnifying-glass"});
+        this._panel    = WorkspaceManager.createBottomPanel(panelName, $(panelHtml), 100, title, {iconSvg: "styles/images/panel-icon-search.svg"});
         this._$summary = this._panel.$panel.find(".title");
         this._$table   = this._panel.$panel.find(".table-container");
         this._$previewEditor   = this._panel.$panel.find(".search-editor-preview");

src/styles/Extn-BottomPanelTabs.less

@@ -144,31 +144,29 @@
     }
 }
 
-/* Tab icon: hidden by default, shown when tabs are collapsed */
-.bottom-panel-tab-icon {
-    display: none;
-    font-size: 1rem;
-    width: 1rem;
-    text-align: center;
-    pointer-events: none;
-}
-
-/* Override any FA class specificity (e.g. fa-brands sets font-size: 1.2em) */
-i.panel-titlebar-icon.panel-titlebar-icon {
-    font-size: 1rem;
-}
-
-img.panel-titlebar-icon {
+/* SVG icons rendered as masks so they inherit currentColor (works with light/dark themes).
+   The mask-image URL is set inline via JS (PanelView.js, DefaultPanelView.js). */
+.panel-titlebar-icon {
+    display: inline-block;
     width: 1rem;
     height: 1rem;
     vertical-align: middle;
+    background-color: currentColor;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    pointer-events: none;
 }
 
-.default-panel-btn i.panel-titlebar-icon {
-    font-size: 20px;
+/* Tab icon: hidden by default, shown when tabs are collapsed */
+.bottom-panel-tab-icon {
+    display: none;
 }
 
-.default-panel-btn img.panel-titlebar-icon {
+.default-panel-btn .panel-titlebar-icon {
     width: 20px;
     height: 20px;
 }