rick/LEDMatrix
1
0
Fork 0
mirror of https://github.com/ChuckBuilds/LEDMatrix.git synced 2026-04-10 21:03:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(store): add sorting, filtering, and fix Update All button

Browse Source 
Add client-side sorting and filtering to the Plugin Store:
- Sort by A-Z, Z-A, Verified First, Recently Updated, Category
- Filter by verified, new, installed status, author, and tags
- Installed/Update Available badges on store cards
- Active filter count badge with clear-all button
- Sort preference persisted to localStorage

Fix three bugs causing button unresponsiveness:
- pluginsInitialized never reset on HTMX tab navigation (root cause
  of Update All silently doing nothing on second visit)
- htmx:afterSwap condition too broad (fired on unrelated swaps)
- data-running guard tied to DOM element replaced by cloneNode

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Chuck
2026-02-16 09:56:00 -05:00
parent 963c4d3b91
commit 34a55b5a55
3 changed files with 425 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web_interface/static/v3/app.css
View File

@@ -83,6 +83,9 @@
[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: #4b5563; }
[data-theme="dark"] .hover\:text-gray-700:hover { color: #e5e7eb; }
[data-theme="dark"] .hover\:border-gray-300:hover { border-color: #6b7280; }
[data-theme="dark"] .bg-red-100 { background-color: #450a0a; }
[data-theme="dark"] .text-red-700 { color: #fca5a5; }
[data-theme="dark"] .hover\:bg-red-200:hover { background-color: #7f1d1d; }
/* Base styles */
* {
@@ -663,6 +666,39 @@ button.bg-white {
color: var(--color-purple-text);
}
/* Filter Pill Toggle States */
.filter-pill {
cursor: pointer;
user-select: none;
transition: all 0.15s ease;
}
.filter-pill[data-active="true"] {
background-color: var(--color-info-bg);
border-color: var(--color-info);
color: var(--color-info);
font-weight: 600;
}
.filter-pill[data-active="true"]:hover {
opacity: 0.85;
}
/* Tag Filter Pills */
.tag-filter-pill {
cursor: pointer;
user-select: none;
transition: all 0.15s ease;
}
.tag-filter-pill[data-active="true"] {
background-color: var(--color-info-bg);
border-color: var(--color-info);
color: var(--color-info);
font-weight: 600;
box-shadow: 0 0 0 1px var(--color-info);
}
/* Section Headers with Subtle Gradients */
.section-header {
background: linear-gradient(135deg, rgb(255 255 255 / 90%) 0%, rgb(249 250 251 / 90%) 100%);