Skip to content

Add sidebar filters menu #6

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
annehaley wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add sidebar filters menu #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
480d8ed
Add sidebar filters menu
annehaley Jul 7, 2026
57e1da9
Increase width of filters menu
annehaley Jul 9, 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
6 changes: 4 additions & 2 deletions templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@
</head>

<body>
{% from 'macros.html' import menu_icon, search_icon, mini_search_icon, builds_icon, packages_icon, releases_icon, left_arrow_icon, right_chevron_icon, down_chevron_icon, tag_icon, copy_icon, copy_command_button, install_icon, close_icon, plus_icon, cols_icon, eye_icon, eye_off_icon %}
{% from 'macros.html' import menu_icon, search_icon, mini_search_icon, builds_icon, packages_icon, releases_icon, left_arrow_icon, right_chevron_icon, down_chevron_icon, tag_icon, copy_icon, copy_command_button, install_icon, close_icon, plus_icon, cols_icon, eye_icon, eye_off_icon, filters_icon, box_checked, box_unchecked %}
{% include "sidebar.html" %}
{% include "install_dialog.html" %}

<!-- Main content -->
<div class="container" id="content-container" onclick="setColumnsMenuVisible(false); setBadgeOptionsMenuVisible(false)">
<div class="container" id="content-container" onclick="closeAllMenus()">
<div id="loading-content" class="py-8 pb-24">
<h1 style="width: 100%; text-align: center;">Loading...</h1>
</div>
Expand All @@ -59,6 +59,8 @@ <h1>Package not found.</h1>
{{ tag_icon() }}
{{ eye_icon() }}
{{ eye_off_icon() }}
{{ box_checked() }}
{{ box_unchecked() }}
</div>
</body>

Expand Down
28 changes: 27 additions & 1 deletion templates/macros.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
{% endmacro %}

{% macro mini_search_icon() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search h-3.5 w-3.5 text-muted-foreground" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search lucide-search-mini absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" aria-hidden="true">
<path d="m21 21-4.34-4.34"></path>
<circle cx="11" cy="11" r="8"></circle>
</svg>
Expand Down Expand Up @@ -139,4 +139,30 @@
<path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"></path>
<path d="m2 2 20 20"></path>
</svg>
{% endmacro %}

{% macro filters_icon() %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sliders-horizontal h-3.5 w-3.5" aria-hidden="true">
<path d="M10 5H3"></path>
<path d="M12 19H3"></path>
<path d="M14 3v4"></path>
<path d="M16 17v4"></path>
<path d="M21 12h-9"></path>
<path d="M21 19h-5"></path>
<path d="M21 5h-7"></path>
<path d="M8 10v4"></path>
<path d="M8 12H3"></path>
</svg>
{% endmacro %}

{% macro box_checked() %}
<span class="checkbox checkbox-checked grid h-3.5 w-3.5 shrink-0 place-content-center rounded border border-primary bg-primary text-primary-foreground">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check h-2.5 w-2.5" aria-hidden="true">
<path d="M20 6 9 17l-5-5"></path>
</svg>
</span>
{% endmacro %}

{% macro box_unchecked() %}
<span class="checkbox checkbox-unchecked grid h-3.5 w-3.5 shrink-0 place-content-center rounded border border-input bg-background"></span>
{% endmacro %}
4 changes: 2 additions & 2 deletions templates/package.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ <h1 class="text-2xl font-semibold tracking-tight package-name"></h1>
Add filter
</button>
<div id="badge-options-menu" class="hidden absolute left-0 top-full z-20 mt-1 w-80 overflow-hidden rounded-md border border-border bg-surface-elevated shadow-lg">
<div class="flex items-center gap-2 border-b border-border px-2 py-1.5">
<div class="relative flex items-center gap-2 border-b border-border px-2 py-1.5">
{{ mini_search_icon() }}
<input id="badge-options-filter" type="search" oninput="filterBadgeOptions()" placeholder="Filter attributes..." class="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground">
<input id="badge-options-filter" type="search" oninput="filterBadgeOptions()" placeholder="Filter attributes..." class="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground" style="padding-left: 18px">
</div>
<div class="max-h-72 overflow-auto">
<div id="badge-options-list" class="pb-1"></div>
Expand Down
31 changes: 25 additions & 6 deletions templates/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="mobile-toolbar" class="block">
<div id="mobile-toolbar" class="block" onclick="closeAllMenus()">
<header class="flex h-12 shrink-0 items-center justify-left border-b border-border bg-surface-elevated px-4">
<button class="w-7" onclick="setSidebarOpen(true)">{{ menu_icon() }}</button>
<button class="flex items-center gap-2 rounded text-left hover:opacity-80" title="Home" onclick="navigateToHome()">
Expand All @@ -13,7 +13,7 @@
</header>
<button id="sidebar-shadow" aria-label="Close navigation" class="fixed inset-0 z-10 bg-black/40" onclick="setSidebarOpen(false)"></button>
</div>
<div id="sidebar" class="bg-surface">
<div id="sidebar" class="bg-surface" onclick="closeAllMenus()">
<header class="flex h-12 shrink-0 items-center justify-left border-b border-border bg-surface-elevated px-4">
<button class="flex items-center gap-2 rounded text-left hover:opacity-80" title="Home" onclick="navigateToHome()">
<img src="{{ base_path }}/static/spack-logo.svg" class="max-h-full w-7" />
Expand All @@ -26,9 +26,19 @@
</button>
</header>
<div class="px-3 pt-3">
<div class="relative">
{{ search_icon() }}
<input id="sidebar-search" type="search" oninput="filterSidebar(event)" placeholder="Search by package name" class="w-full rounded-md border border-input bg-background py-1.5 pl-8 pr-7 text-sm outline-none focus:ring-2 focus:ring-ring">
<div class="flex gap-1">
<div class="relative flex-1">
{{ search_icon() }}
<input id="sidebar-search" type="search" oninput="filterSidebar(event)" placeholder="Search package name" class="w-full rounded-md border border-input bg-background py-1.5 pl-8 pr-7 text-sm outline-none focus:ring-2 focus:ring-ring">
</div>
<button id="filters-menu-button" onclick="event.stopPropagation(); setFiltersMenuVisible(true)" type="button" title="Filters" class="relative inline-flex shrink-0 items-center gap-1 rounded-md border border-input bg-background px-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground" aria-haspopup="dialog" aria-expanded="false" data-state="closed">
{{ filters_icon() }}
<span>Filters</span>
<span id="filters-count" class="hidden ml-0.5 rounded-full bg-primary px-1.5 text-[10px] font-semibold text-primary-foreground tabular-nums"></span>
</button>
</div>
<div id="filters-list" onclick="event.stopPropagation()" class="hidden mt-2 flex flex-wrap gap-1">
<button onclick="clearAllSidebarFilters()" type="button" class="rounded px-1.5 py-0.5 text-[10px] text-muted-foreground hover:bg-accent hover:text-foreground" style="order: 1">Clear all</button>
</div>
<div id="sidebar-tabs" class="mt-2 flex gap-1 rounded-md bg-muted p-0.5 text-xs">
<button id="all-packages-tab" onclick="selectSidebarTab('all-packages')" class="flex flex-1 items-center justify-center gap-1 rounded px-2 py-1 transition-colors text-muted-foreground hover:text-foreground tab active">
Expand Down Expand Up @@ -70,5 +80,14 @@
</div>
</div>
</div>
<div id="sidebar-resize"></div>
<div id="sidebar-resize" onclick="event.stopPropagation()"></div>
<div id="filters-menu" onclick="event.stopPropagation()" class="hidden z-50 rounded-md border bg-popover text-popover-foreground shadow-md outline-none">
<div class="flex max-h-[420px] flex-col">
<div class="flex items-center justify-between border-b border-border px-3 py-2">
<div class="text-xs font-medium">Filter by</div>
</div>
<div id="filters-menu-content" class="flex-1 overflow-y-auto p-1">Loading...</div>
</div>
</div>
</div>
</div>
Loading