From b597e4bfe6a921d703117beb11b23c24e5d002f1 Mon Sep 17 00:00:00 2001 From: LinkeD365 Date: Mon, 27 Apr 2026 13:28:02 +0100 Subject: [PATCH 1/4] [Bug]: Color/Size of update available not clear Fixes #524 --- src/main/index.ts | 8 ++ src/renderer/index.html | 42 ++++++- .../modules/toolsSidebarManagement.ts | 53 +++++++-- src/renderer/styles.scss | 104 ++++++++++++++---- 4 files changed, 172 insertions(+), 35 deletions(-) diff --git a/src/main/index.ts b/src/main/index.ts index 41112fd1..9cc04080 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -798,6 +798,14 @@ class ToolBoxApp { // Check for tool updates ipcMain.handle(TOOL_CHANNELS.CHECK_TOOL_UPDATES, async (_, toolId) => { + // DEV MOCK: randomly flag ~50% of tools as having an update available + if (process.env.NODE_ENV === "development") { + const hasMockUpdate = Math.random() < 0.5; + if (hasMockUpdate) { + return { hasUpdate: true, latestVersion: "99.0.0" }; + } + return { hasUpdate: false }; + } return await this.toolManager.checkForUpdates(toolId); }); diff --git a/src/renderer/index.html b/src/renderer/index.html index 885f4065..da009c30 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -62,7 +62,16 @@

INSTALLED

- + +
+
+ +
${description}
@@ -408,6 +423,7 @@ export async function loadSidebarTools(): Promise { const searchInput = document.getElementById("tools-search-input") as HTMLInputElement | null; const categoryFilter = document.getElementById("tools-category-filter") as HTMLSelectElement | null; const authorFilter = document.getElementById("tools-author-filter") as HTMLSelectElement | null; + const updateRequiredFilter = document.getElementById("tools-update-required-filter") as CheckboxElement | null; if (searchInput && !(searchInput as any)._pptbBound) { (searchInput as any)._pptbBound = true; @@ -431,6 +447,13 @@ export async function loadSidebarTools(): Promise { }); } + if (updateRequiredFilter && !updateRequiredFilter._pptbBound) { + updateRequiredFilter._pptbBound = true; + updateRequiredFilter.addEventListener("change", () => { + loadSidebarTools(); + }); + } + // Setup sort event listener const sortSelect = document.getElementById("tools-sort-select") as HTMLSelectElement | null; if (sortSelect && !(sortSelect as any)._pptbBound) { @@ -724,6 +747,11 @@ function clearAllFilters(): void { authorFilter.value = ""; } + const updateRequiredFilter = document.getElementById("tools-update-required-filter") as CheckboxElement | null; + if (updateRequiredFilter) { + updateRequiredFilter.checked = false; + } + // Reload the sidebar tools to reflect the cleared filters loadSidebarTools(); } @@ -745,6 +773,11 @@ export function clearInstalledToolsDropdownFilters(): void { authorFilter.value = ""; } + const updateRequiredFilter = document.getElementById("tools-update-required-filter") as CheckboxElement | null; + if (updateRequiredFilter) { + updateRequiredFilter.checked = false; + } + // Reload the sidebar tools to reflect the cleared filters loadSidebarTools(); } diff --git a/src/renderer/styles.scss b/src/renderer/styles.scss index 97041f7b..ecd93ac2 100644 --- a/src/renderer/styles.scss +++ b/src/renderer/styles.scss @@ -469,7 +469,9 @@ body { border-radius: 10px; padding: 16px 18px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); - transition: border-color 0.2s ease, box-shadow 0.2s ease; + transition: + border-color 0.2s ease, + box-shadow 0.2s ease; } .settings-section-card:hover { @@ -1645,7 +1647,9 @@ body.dark-theme .settings-section-card { cursor: pointer; color: var(--text-color); opacity: 0.7; - transition: opacity 0.2s, background-color 0.2s; + transition: + opacity 0.2s, + background-color 0.2s; z-index: 10; flex-shrink: 0; } @@ -1785,7 +1789,9 @@ body.dark-theme .settings-section-card { line-height: 1; border-radius: 3px; opacity: 0; - transition: opacity 0.2s, background-color 0.2s; + transition: + opacity 0.2s, + background-color 0.2s; } .tool-tab:hover .tool-tab-close { @@ -1807,7 +1813,9 @@ body.dark-theme .settings-section-card { line-height: 1; border-radius: 3px; opacity: 0; - transition: opacity 0.2s, background-color 0.2s; + transition: + opacity 0.2s, + background-color 0.2s; display: flex; align-items: center; justify-content: center; @@ -2033,7 +2041,9 @@ body.dark-theme .settings-section-card { text-decoration: none; cursor: pointer; border-left: 3px solid transparent; - transition: background 0.15s, color 0.15s; + transition: + background 0.15s, + color 0.15s; } .settings-nav-link:hover { @@ -2462,7 +2472,10 @@ body.dark-theme .settings-vscode-item:hover { opacity: 0; pointer-events: none; visibility: hidden; - transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease; + transition: + opacity 0.2s ease, + background-color 0.2s ease, + color 0.2s ease; } .sidebar-search-input-wrapper:has(.search-input:not(:placeholder-shown)) .search-clear-btn { @@ -2489,7 +2502,6 @@ body.dark-theme .settings-vscode-item:hover { flex-shrink: 0; } - .search-filter-btn { padding: 6px 8px; background: none; @@ -2570,6 +2582,25 @@ body.dark-theme .search-filter-btn.active img { padding: 8px 12px; } +.filter-checkbox-label { + display: inline-flex; + align-items: center; + gap: 8px; + cursor: pointer; + font-size: 13px; + color: var(--text-color); + user-select: none; +} + +.filter-checkbox-input { + width: 16px; + height: 16px; + margin: 0; + cursor: pointer; + accent-color: var(--accent-color, #0078d4); + flex-shrink: 0; +} + .filter-section-title { font-size: 11px; font-weight: 600; @@ -2695,7 +2726,10 @@ body.dark-theme .search-filter-btn.active img { background: var(--card-background); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); cursor: pointer; - transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s; + transition: + background-color 0.2s, + box-shadow 0.2s, + border-color 0.2s; } .tool-item-pptb-local { @@ -2728,10 +2762,23 @@ body.dark-theme .search-filter-btn.active img { .tool-item-header-right-pptb { display: flex; - align-items: center; + align-items: flex-start; gap: 8px; } +.tool-item-menu-stack-pptb { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; +} + +.tool-favorite-icon { + display: block; + align-self: flex-start; + margin-top: 0; +} + .tool-item-icon-pptb { font-size: 16px; width: 30px; @@ -2784,7 +2831,9 @@ img.tool-item-icon-img { border: none; cursor: pointer; padding: 2px 4px; - transition: transform 0.2s, opacity 0.2s; + transition: + transform 0.2s, + opacity 0.2s; display: flex; align-items: center; justify-content: center; @@ -2877,10 +2926,10 @@ img.tool-item-icon-img { } .tool-update-badge { - display: inline-block; + display: block; font-size: 12px; - color: #0078d4; - margin-left: 6px; + line-height: 1; + color: var(--accent-color, #6a00ff); animation: pulse 2s infinite; } @@ -3037,7 +3086,10 @@ img.tool-item-icon-img { border-radius: 8px; background: var(--card-background); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); - transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s; + transition: + background-color 0.2s, + box-shadow 0.2s, + border-color 0.2s; } .marketplace-item-pptb:hover { @@ -3107,7 +3159,11 @@ img.tool-item-icon-img { color: var(--text-color); padding: 0; cursor: pointer; - transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease; } body.dark-theme .install-button { @@ -3242,7 +3298,10 @@ body.light-theme .install-button:focus-visible img { border-radius: 8px; background: var(--card-background); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); - transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s; + transition: + background-color 0.2s, + box-shadow 0.2s, + border-color 0.2s; margin-bottom: 10px; } @@ -3911,8 +3970,8 @@ body.dark-theme .home-container::-webkit-scrollbar-thumb:hover { content: ""; position: absolute; inset: 0; - background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%), - radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%); + background: + radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%), radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none; } body.dark-theme #tool-detail-modal .modal-content.tool-detail-modern { @@ -4735,7 +4794,9 @@ fluent-badge { border-radius: 3px; font-size: 13px; cursor: pointer; - transition: background-color 0.2s, color 0.2s; + transition: + background-color 0.2s, + color 0.2s; white-space: nowrap; } @@ -5102,7 +5163,9 @@ body.dark-theme .csp-warning ul { align-items: flex-start; gap: 12px; animation: slideInRight 0.3s ease-out; - transition: opacity 0.2s ease-out, transform 0.2s ease-out; + transition: + opacity 0.2s ease-out, + transform 0.2s ease-out; max-width: 100%; } @@ -5707,7 +5770,6 @@ body.dark-theme .global-search-item-badge.badge-settings { } } - /* Export button on category group header */ .connection-group-export-btn { background: none; From 30dbc679e0aff4f996506b4873477d04ced19995 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 27 Apr 2026 12:44:59 +0000 Subject: [PATCH 2/4] fix: apply PR review feedback - update badge icon and checkbox accent color Agent-Logs-Url: https://github.com/PowerPlatformToolBox/desktop-app/sessions/ef1aad69-82ba-4d9b-afce-07c091abc7c7 Co-authored-by: LinkeD365 <43988771+LinkeD365@users.noreply.github.com> --- src/renderer/modules/toolsSidebarManagement.ts | 5 +++-- src/renderer/styles.scss | 7 +++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/renderer/modules/toolsSidebarManagement.ts b/src/renderer/modules/toolsSidebarManagement.ts index cfdfc3d4..08fe6382 100644 --- a/src/renderer/modules/toolsSidebarManagement.ts +++ b/src/renderer/modules/toolsSidebarManagement.ts @@ -211,6 +211,7 @@ export async function loadSidebarTools(): Promise { const favoriteIconPath = isDarkTheme ? "icons/dark/star-filled.svg" : "icons/light/star-filled.svg"; const moreIconPath = isDarkTheme ? "icons/dark/more-icon.svg" : "icons/light/more-icon.svg"; const moreIcon = `More actions`; + const updateIconPath = isDarkTheme ? "icons/dark/update.svg" : "icons/light/update.svg"; const hasUpdate = !!tool.hasUpdate; const isUpdating = !!tool.isUpdating; @@ -294,7 +295,7 @@ export async function loadSidebarTools(): Promise { - ${shouldShowUpdateBadge ? '▲' : ""} + ${shouldShowUpdateBadge ? `Update available` : ""} @@ -328,7 +329,7 @@ export async function loadSidebarTools(): Promise { - ${shouldShowUpdateBadge ? '▲' : ""} + ${shouldShowUpdateBadge ? `Update available` : ""} diff --git a/src/renderer/styles.scss b/src/renderer/styles.scss index ecd93ac2..283c37a7 100644 --- a/src/renderer/styles.scss +++ b/src/renderer/styles.scss @@ -2597,7 +2597,7 @@ body.dark-theme .search-filter-btn.active img { height: 16px; margin: 0; cursor: pointer; - accent-color: var(--accent-color, #0078d4); + accent-color: var(--accent-color, #6a00ff); flex-shrink: 0; } @@ -2927,9 +2927,8 @@ img.tool-item-icon-img { .tool-update-badge { display: block; - font-size: 12px; - line-height: 1; - color: var(--accent-color, #6a00ff); + width: 16px; + height: 16px; animation: pulse 2s infinite; } From 4b43126261fbd3a849638db517eaba8dcc9d12a9 Mon Sep 17 00:00:00 2001 From: LinkeD365 Date: Mon, 27 Apr 2026 13:53:21 +0100 Subject: [PATCH 3/4] fix: update tool update badge styling and replace image with text indicator Co-authored-by: Copilot --- src/renderer/modules/toolsSidebarManagement.ts | 4 ++-- src/renderer/styles.scss | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/renderer/modules/toolsSidebarManagement.ts b/src/renderer/modules/toolsSidebarManagement.ts index 08fe6382..542b62cb 100644 --- a/src/renderer/modules/toolsSidebarManagement.ts +++ b/src/renderer/modules/toolsSidebarManagement.ts @@ -295,7 +295,7 @@ export async function loadSidebarTools(): Promise { - ${shouldShowUpdateBadge ? `Update available` : ""} + ${shouldShowUpdateBadge ? '▲' : ""} @@ -329,7 +329,7 @@ export async function loadSidebarTools(): Promise { - ${shouldShowUpdateBadge ? `Update available` : ""} + ${shouldShowUpdateBadge ? '▲' : ""} diff --git a/src/renderer/styles.scss b/src/renderer/styles.scss index 283c37a7..f3ead13f 100644 --- a/src/renderer/styles.scss +++ b/src/renderer/styles.scss @@ -2927,8 +2927,9 @@ img.tool-item-icon-img { .tool-update-badge { display: block; - width: 16px; - height: 16px; + font-size: 12px; + line-height: 1; + color: var(--accent-color, #6a00ff); animation: pulse 2s infinite; } From 5d987b63de789c3896203fdd060acefc4012d1ce Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 27 Apr 2026 13:02:57 +0000 Subject: [PATCH 4/4] fix: address review feedback - remove unused var, add ARIA attrs, fix doc comment, remove dev mock Agent-Logs-Url: https://github.com/PowerPlatformToolBox/desktop-app/sessions/82a20789-a4d1-4ba9-b4a0-1ccd6012a19d Co-authored-by: LinkeD365 <43988771+LinkeD365@users.noreply.github.com> --- src/main/index.ts | 8 -------- src/renderer/modules/toolsSidebarManagement.ts | 7 +++---- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/src/main/index.ts b/src/main/index.ts index 9cc04080..41112fd1 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -798,14 +798,6 @@ class ToolBoxApp { // Check for tool updates ipcMain.handle(TOOL_CHANNELS.CHECK_TOOL_UPDATES, async (_, toolId) => { - // DEV MOCK: randomly flag ~50% of tools as having an update available - if (process.env.NODE_ENV === "development") { - const hasMockUpdate = Math.random() < 0.5; - if (hasMockUpdate) { - return { hasUpdate: true, latestVersion: "99.0.0" }; - } - return { hasUpdate: false }; - } return await this.toolManager.checkForUpdates(toolId); }); diff --git a/src/renderer/modules/toolsSidebarManagement.ts b/src/renderer/modules/toolsSidebarManagement.ts index 542b62cb..b9b003a5 100644 --- a/src/renderer/modules/toolsSidebarManagement.ts +++ b/src/renderer/modules/toolsSidebarManagement.ts @@ -211,7 +211,6 @@ export async function loadSidebarTools(): Promise { const favoriteIconPath = isDarkTheme ? "icons/dark/star-filled.svg" : "icons/light/star-filled.svg"; const moreIconPath = isDarkTheme ? "icons/dark/more-icon.svg" : "icons/light/more-icon.svg"; const moreIcon = `More actions`; - const updateIconPath = isDarkTheme ? "icons/dark/update.svg" : "icons/light/update.svg"; const hasUpdate = !!tool.hasUpdate; const isUpdating = !!tool.isUpdating; @@ -295,7 +294,7 @@ export async function loadSidebarTools(): Promise { - ${shouldShowUpdateBadge ? '▲' : ""} + ${shouldShowUpdateBadge ? '▲' : ""} @@ -329,7 +328,7 @@ export async function loadSidebarTools(): Promise { - ${shouldShowUpdateBadge ? '▲' : ""} + ${shouldShowUpdateBadge ? '▲' : ""} @@ -758,7 +757,7 @@ function clearAllFilters(): void { } /** - * Clear only the dropdown filter selections (category, author) for installed tools. + * Clear only the dropdown filter selections (category, author) and the "Update Available" checkbox for installed tools. * Leaves the search input unchanged. */ export function clearInstalledToolsDropdownFilters(): void {