From 23a7823cb4ecf51841a9a0cd35fab01655a8d737 Mon Sep 17 00:00:00 2001 From: Copilot <198982749+Copilot@users.noreply.github.com> Date: Thu, 2 Apr 2026 21:52:11 -0400 Subject: [PATCH 1/7] Fix: Tool detail page icon not adapting to dark/light theme (#510) * Initial plan * Fix tool detail page icon to be theme-aware (dark/light mode) Agent-Logs-Url: https://github.com/PowerPlatformToolBox/desktop-app/sessions/1d192ffc-640c-4a9e-9d8f-96251f98fd16 Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com> * Address review feedback: consolidate CSS and add theme-change handler for detail tab fallback icon Agent-Logs-Url: https://github.com/PowerPlatformToolBox/desktop-app/sessions/d7760afb-4ed5-4874-97a5-1bc4275d4dbc Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com> --- src/renderer/modules/marketplaceManagement.ts | 27 ++++--------------- src/renderer/modules/themeManagement.ts | 24 +++++++++++++++++ src/renderer/styles.scss | 4 +-- 3 files changed, 30 insertions(+), 25 deletions(-) diff --git a/src/renderer/modules/marketplaceManagement.ts b/src/renderer/modules/marketplaceManagement.ts index 5fb00019..0de20c1c 100644 --- a/src/renderer/modules/marketplaceManagement.ts +++ b/src/renderer/modules/marketplaceManagement.ts @@ -8,7 +8,7 @@ import type { Tool } from "../../common/types"; import type { ToolDetail } from "../types/index"; import { renderMarkdownToSafeHtml, wireExternalLinks } from "../utils/markdown"; import { getUnsupportedBadgeTitle, getUnsupportedRequirement } from "../utils/toolCompatibility"; -import { applyToolIconMasks, escapeHtml, generateToolIconHtml, resolveToolIconUrl } from "../utils/toolIconResolver"; +import { applyToolIconMasks, escapeHtml, generateToolIconHtml } from "../utils/toolIconResolver"; import { openToolDetailTab } from "./toolManagement"; import { loadSidebarTools } from "./toolsSidebarManagement"; @@ -21,9 +21,7 @@ interface InstalledTool { // Tool library loaded from registry let toolLibrary: ToolDetail[] = []; -const DEFAULT_TOOL_ICON_DARK_SVG = ` - -`; + /** * Get tool library @@ -601,24 +599,9 @@ async function loadToolReadme(panel: HTMLElement, readmeUrl: string | undefined, } function buildToolIconHtml(tool: ToolDetail): string { - // defaultToolIcon is a safe data:image/svg+xml URI generated from application constant - const defaultToolIcon = svgToDataUri(DEFAULT_TOOL_ICON_DARK_SVG); - const resolvedIconUrl = resolveToolIconUrl(tool.id, tool.icon); - - // Validate the generated data URI is safe (defensive check) - const escapedDefaultIcon = defaultToolIcon.startsWith("data:image/") ? escapeHtml(defaultToolIcon) : ""; - - if (!resolvedIconUrl) { - return escapedDefaultIcon ? `${escapeHtml(tool.name)} icon` : ""; - } - - const escapedResolvedUrl = escapeHtml(resolvedIconUrl); - const onerrorAttr = escapedDefaultIcon ? ` onerror="this.src='${escapedDefaultIcon}'"` : ""; - return `${escapeHtml(tool.name)} icon`; -} - -function svgToDataUri(svgContent: string): string { - return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgContent)}`; + const isDarkTheme = document.body.classList.contains("dark-theme"); + const defaultToolIcon = isDarkTheme ? "icons/dark/tool-default.svg" : "icons/light/tool-default.svg"; + return generateToolIconHtml(tool.id, tool.icon, tool.name, defaultToolIcon); } function formatError(error: unknown): string { diff --git a/src/renderer/modules/themeManagement.ts b/src/renderer/modules/themeManagement.ts index 2151ac72..4722e2a8 100644 --- a/src/renderer/modules/themeManagement.ts +++ b/src/renderer/modules/themeManagement.ts @@ -39,6 +39,9 @@ export function applyTheme(theme: string): void { // Update marketplace icons when theme changes updateMarketplaceIconsForTheme(); + // Update tool detail tab icons when theme changes + updateToolDetailIconsForTheme(); + // Update homepage icon when theme changes updateHomepageIconForTheme(); @@ -268,6 +271,27 @@ export function updateFilterIconsForTheme(): void { } } +/** + * Update tool detail tab fallback icons to match current theme + * Called when theme changes to update default tool icons in any open detail tab + */ +export function updateToolDetailIconsForTheme(): void { + const isDarkTheme = document.body.classList.contains("dark-theme"); + const cacheBuster = `?t=${Date.now()}`; + const defaultToolIcon = isDarkTheme ? "icons/dark/tool-default.svg" : "icons/light/tool-default.svg"; + + const detailPanel = document.getElementById("tool-detail-content-panel"); + if (!detailPanel) return; + + // Update fallback img icons (only default tool icons, not custom tool icons) + detailPanel.querySelectorAll(".tool-detail-tab-icon img").forEach((img) => { + const currentSrc = (img as HTMLImageElement).src; + if (currentSrc.includes("tool-default.svg")) { + (img as HTMLImageElement).src = defaultToolIcon + cacheBuster; + } + }); +} + /** * Apply terminal font family */ diff --git a/src/renderer/styles.scss b/src/renderer/styles.scss index 57ef3ff2..ddc831f4 100644 --- a/src/renderer/styles.scss +++ b/src/renderer/styles.scss @@ -2230,9 +2230,7 @@ body.dark-theme .settings-vscode-item:hover { .tool-detail-tab-icon span { width: 48px; height: 48px; - display: inline-flex; - align-items: center; - justify-content: center; + display: inline-block; } .tool-detail-tab-meta { From 8f3492fb6054a1892cbf0b6cbe9dc666000ed624 Mon Sep 17 00:00:00 2001 From: Danish Naglekar <36135520+Power-Maverick@users.noreply.github.com> Date: Thu, 2 Apr 2026 21:53:00 -0400 Subject: [PATCH 2/7] fix: improve empty state handling in sidebar tools by updating hint display (#516) --- src/renderer/modules/toolsSidebarManagement.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/renderer/modules/toolsSidebarManagement.ts b/src/renderer/modules/toolsSidebarManagement.ts index 03bba5ee..521e2be4 100644 --- a/src/renderer/modules/toolsSidebarManagement.ts +++ b/src/renderer/modules/toolsSidebarManagement.ts @@ -3,6 +3,7 @@ * Handles the display and management of installed tools in the sidebar */ +import { logError, logInfo } from "../../common/logger"; import { ToolDetail } from "../types/index"; import { getUnsupportedBadgeTitle, getUnsupportedRequirement } from "../utils/toolCompatibility"; import { applyToolIconMasks, generateToolIconHtml } from "../utils/toolIconResolver"; @@ -10,7 +11,6 @@ import { getToolSourceIconHtml } from "../utils/toolSourceIcon"; import { loadMarketplace, openToolDetail } from "./marketplaceManagement"; import { switchSidebar } from "./sidebarManagement"; import { launchTool } from "./toolManagement"; -import { logInfo, logError } from "../../common/logger"; let activeToolContextMenu: { menu: HTMLElement; anchor: HTMLElement; cleanup: () => void } | null = null; @@ -145,12 +145,17 @@ export async function loadSidebarTools(): Promise { toolsList.innerHTML = `

No matching tools

-

${emptyMessage}

+

${hasActiveFilters ? 'Clear all filters' : ""}
`; + const emptyStateHint = document.getElementById("empty-state-hint"); + if (emptyStateHint) { + emptyStateHint.textContent = emptyMessage; + } + // Add event listener for the marketplace search button attachMarketplaceNavigationButton("search-marketplace-btn", searchTerm); From b34b1b7a655e8eeaba7b3d981ab0260d6ec49242 Mon Sep 17 00:00:00 2001 From: Copilot <198982749+Copilot@users.noreply.github.com> Date: Thu, 2 Apr 2026 21:57:46 -0400 Subject: [PATCH 3/7] feat: Add visual indicator and one-click clear to filter button when filters are active (#509) * Initial plan * feat: add visual indicator dot on filter button when filters are active Agent-Logs-Url: https://github.com/PowerPlatformToolBox/desktop-app/sessions/66184e84-c43b-4345-8093-4b9e767369f7 Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com> * feat: add one-click clear button for active dropdown filters on filter icon Agent-Logs-Url: https://github.com/PowerPlatformToolBox/desktop-app/sessions/2f611815-65e8-44d8-b84c-47eb20959bb2 Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com> * style: reuse search-filter-btn styles for filter-clear-btn, remove duplicate CSS Agent-Logs-Url: https://github.com/PowerPlatformToolBox/desktop-app/sessions/23c5d071-ba7f-43a5-9964-6170812cf4c0 Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com> * Update src/renderer/index.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update src/renderer/index.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update src/renderer/index.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Power-Maverick <36135520+Power-Maverick@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/renderer/index.html | 27 ++++++++----- src/renderer/modules/connectionManagement.ts | 38 +++++++++++++++++++ src/renderer/modules/initialization.ts | 34 +++++++++++++++-- src/renderer/modules/marketplaceManagement.ts | 38 +++++++++++++++++++ .../modules/toolsSidebarManagement.ts | 32 ++++++++++++++++ src/renderer/styles.scss | 35 +++++++++++++++++ 6 files changed, 192 insertions(+), 12 deletions(-) diff --git a/src/renderer/index.html b/src/renderer/index.html index 613331e8..9f58292b 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -58,9 +58,12 @@

INSTALLED

- +
+ + +