Skip to content

FEAT: Alter colour of update icon and and filter #532

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LinkeD365 wants to merge 4 commits into
base: dev
Choose a base branch
from
+165 −36
Open

FEAT: Alter colour of update icon and and filter #532

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b597e4b
[Bug]: Color/Size of update available not clear
LinkeD365 Apr 27, 2026
30dbc67
fix: apply PR review feedback - update badge icon and checkbox accent…
Copilot Apr 27, 2026
4b43126
fix: update tool update badge styling and replace image with text ind…
LinkeD365 Apr 27, 2026
5d987b6
fix: address review feedback - remove unused var, add ARIA attrs, fix…
Copilot Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 38 additions & 4 deletions src/renderer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,16 @@ <h2 class="sidebar-title">INSTALLED</h2>
<button type="button" class="search-filter-btn" id="tools-filter-btn" aria-label="Open filters and sort" title="Filters and Sort">
<img width="16" height="16" alt="" aria-hidden="true" />
</button>
<button type="button" class="search-filter-btn filter-clear-btn" id="tools-filter-clear-btn" aria-label="Clear active filters" title="Clear active filters" style="display: none">&times;</button>
<button
type="button"
class="search-filter-btn filter-clear-btn"
id="tools-filter-clear-btn"
aria-label="Clear active filters"
title="Clear active filters"
style="display: none"
>
&times;
</button>
</div>
</div>
<div class="filter-dropdown" id="tools-filter-dropdown" style="display: none">
Expand Down Expand Up @@ -91,6 +100,13 @@ <h2 class="sidebar-title">INSTALLED</h2>
<option value="">All Authors</option>
</select>
</div>
<div class="filter-divider"></div>
<div class="filter-section">
<label class="filter-checkbox-label" for="tools-update-required-filter">
<input type="checkbox" id="tools-update-required-filter" class="filter-checkbox-input" />
<span>Update Available</span>
</label>
</div>
</div>
<div class="sidebar-body">
<div class="tools-list-pptb" id="sidebar-tools-list">
Expand Down Expand Up @@ -122,7 +138,16 @@ <h2 class="sidebar-title">CONNECTIONS</h2>
<button class="search-filter-btn" id="connections-filter-btn" title="Filters and Sort" aria-label="Open filters and sort">
<img width="16" height="16" alt="" aria-hidden="true" />
</button>
<button type="button" class="search-filter-btn filter-clear-btn" id="connections-filter-clear-btn" aria-label="Clear active filters" title="Clear active filters" style="display: none">&times;</button>
<button
type="button"
class="search-filter-btn filter-clear-btn"
id="connections-filter-clear-btn"
aria-label="Clear active filters"
title="Clear active filters"
style="display: none"
>
&times;
</button>
</div>
</div>
<div class="filter-dropdown" id="connections-filter-dropdown" style="display: none">
Expand Down Expand Up @@ -185,7 +210,16 @@ <h2 class="sidebar-title">MARKETPLACE</h2>
<button class="search-filter-btn" id="marketplace-filter-btn" aria-label="Open marketplace filters and sort options" title="Filters and Sort">
<img width="16" height="16" alt="" aria-hidden="true" />
</button>
<button type="button" class="search-filter-btn filter-clear-btn" id="marketplace-filter-clear-btn" aria-label="Clear active filters" title="Clear active filters" style="display: none">&times;</button>
<button
type="button"
class="search-filter-btn filter-clear-btn"
id="marketplace-filter-clear-btn"
aria-label="Clear active filters"
title="Clear active filters"
style="display: none"
>
&times;
</button>
</div>
</div>
<div class="filter-dropdown" id="marketplace-filter-dropdown" style="display: none">
Expand Down Expand Up @@ -723,7 +757,7 @@ <h3>Tool Settings</h3>
<div id="notification-container" class="notification-container"></div>

<!-- Modal Backdrop Overlay -->
<div id="modal-backdrop" class="modal-backdrop" style="display: none;" aria-hidden="true"></div>
<div id="modal-backdrop" class="modal-backdrop" style="display: none" aria-hidden="true"></div>

<!-- Global Search Command Palette -->
<div id="global-search-overlay" class="global-search-overlay" style="display: none" role="dialog" aria-modal="true" aria-label="Global Search">
Expand Down
55 changes: 44 additions & 11 deletions src/renderer/modules/toolsSidebarManagement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import { launchTool } from "./toolManagement";

let activeToolContextMenu: { menu: HTMLElement; anchor: HTMLElement; cleanup: () => void } | null = null;

type CheckboxElement = HTMLInputElement & { _pptbBound?: boolean };

/**
* Load and display installed tools in the sidebar
*/
Expand Down Expand Up @@ -62,13 +64,15 @@ export async function loadSidebarTools(): Promise<void> {
const categoryFilter = document.getElementById("tools-category-filter") as HTMLSelectElement | null;
const authorFilter = document.getElementById("tools-author-filter") as HTMLSelectElement | null;
const sortSelect = document.getElementById("tools-sort-select") as HTMLSelectElement | null;
const updateRequiredFilter = document.getElementById("tools-update-required-filter") as CheckboxElement | null;

const searchTerm = searchInput?.value ? searchInput.value.toLowerCase() : "";
const selectedCategory = categoryFilter?.value || "";
const selectedAuthor = authorFilter?.value || "";
const showUpdateRequiredOnly = !!updateRequiredFilter?.checked;

// Update filter button indicator and one-click clear button visibility
const hasDropdownFilters = !!(selectedCategory || selectedAuthor);
const hasDropdownFilters = !!(selectedCategory || selectedAuthor || showUpdateRequiredOnly);
const toolsFilterBtn = document.getElementById("tools-filter-btn");
if (toolsFilterBtn) {
toolsFilterBtn.classList.toggle("has-active-filters", hasDropdownFilters);
Expand Down Expand Up @@ -112,6 +116,11 @@ export async function loadSidebarTools(): Promise<void> {
return false;
}

// Update required filter
if (showUpdateRequiredOnly && !t.hasUpdate) {
return false;
}

// Deprecated filter
if (t.status === "deprecated") {
if (deprecatedToolsVisibility === "hide-all" || deprecatedToolsVisibility === "show-marketplace") {
Expand Down Expand Up @@ -151,7 +160,7 @@ export async function loadSidebarTools(): Promise<void> {
// Empty state when no matches after filtering
if (sortedTools.length === 0) {
const hasSearchTerm = searchTerm.length > 0;
const hasActiveFilters = hasSearchTerm || selectedCategory || selectedAuthor;
const hasActiveFilters = hasSearchTerm || selectedCategory || selectedAuthor || showUpdateRequiredOnly;
const emptyMessage = hasSearchTerm ? `No installed tools match "${searchTerm}".` : hasActiveFilters ? "No tools match the current filters." : "Try a different search term.";
toolsList.innerHTML = `
<div class="empty-state">
Expand Down Expand Up @@ -268,7 +277,7 @@ export async function loadSidebarTools(): Promise<void> {
<span class="tool-item-icon-pptb">${toolIconHtml}</span>
<div class="tool-item-info-pptb">
<div class="tool-item-name-pptb">
${tool.name} ${shouldShowUpdateBadge ? '<span class="tool-update-badge" title="Update available">⬆</span>' : ""}
${tool.name}
</div>
<div class="tool-item-version-pptb">v${tool.version}</div>
</div>
Expand All @@ -281,9 +290,12 @@ export async function loadSidebarTools(): Promise<void> {
`
: ""
}
<button class="icon-button tool-more-btn" data-action="more" data-tool-id="${
tool.id
}" title="More options" aria-haspopup="true" aria-expanded="false">${moreIcon}</button>
<div class="tool-item-menu-stack-pptb">
<button class="icon-button tool-more-btn" data-action="more" data-tool-id="${
tool.id
}" title="More options" aria-haspopup="true" aria-expanded="false">${moreIcon}</button>
${shouldShowUpdateBadge ? '<span class="tool-update-badge" title="Update available" role="img" aria-label="Update available">▲</span>' : ""}
</div>
</div>
</div>
<div class="tool-item-authors-pptb">${authorsDisplay}</div>
Expand All @@ -299,7 +311,7 @@ export async function loadSidebarTools(): Promise<void> {
<span class="tool-item-icon-pptb">${toolIconHtml}</span>
<div class="tool-item-info-pptb">
<div class="tool-item-name-pptb">
${tool.name} ${shouldShowUpdateBadge ? '<span class="tool-update-badge" title="Update available">⬆</span>' : ""}
${tool.name}
</div>
<div class="tool-item-version-pptb">v${tool.version}</div>
</div>
Expand All @@ -312,9 +324,12 @@ export async function loadSidebarTools(): Promise<void> {
`
: ""
}
<button class="icon-button tool-more-btn" data-action="more" data-tool-id="${
tool.id
}" title="More options" aria-haspopup="true" aria-expanded="false">${moreIcon}</button>
<div class="tool-item-menu-stack-pptb">
<button class="icon-button tool-more-btn" data-action="more" data-tool-id="${
tool.id
}" title="More options" aria-haspopup="true" aria-expanded="false">${moreIcon}</button>
${shouldShowUpdateBadge ? '<span class="tool-update-badge" title="Update available" role="img" aria-label="Update available">▲</span>' : ""}
</div>
</div>
</div>
<div class="tool-item-description-pptb">${description}</div>
Expand Down Expand Up @@ -408,6 +423,7 @@ export async function loadSidebarTools(): Promise<void> {
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;
Expand All @@ -431,6 +447,13 @@ export async function loadSidebarTools(): Promise<void> {
});
}

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) {
Expand Down Expand Up @@ -724,12 +747,17 @@ 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();
}

/**
* 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 {
Expand All @@ -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;
}

Comment thread
LinkeD365 marked this conversation as resolved.
// Reload the sidebar tools to reflect the cleared filters
loadSidebarTools();
}
Expand Down
Loading