mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-04-10 13:02:59 +00:00
feat(plugins): add sorting, filtering, and fix Update All button (#252)
* feat(store): add sorting, filtering, and fix Update All button 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> * refactor(store): replace tag pills with category pills, fix sort dates - Replace tag filter pills with category filter pills (less duplication) - Prefer per-plugin last_updated over repo-wide pushed_at for sort Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * debug: add console logging to filter/sort handlers * fix: bump cache-buster versions for JS and CSS * feat(plugins): add sorting to installed plugins section Add A-Z, Z-A, and Enabled First sort options for installed plugins with localStorage persistence. Both installed and store sections now default to A-Z sorting. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(store): consolidate CSS, fix stale cache bug, add missing utilities, fix icon - Consolidate .filter-pill and .category-filter-pill into shared selectors and scope transition to only changed properties - Fix applyStoreFiltersAndSort ignoring fresh server-filtered results by accepting optional basePlugins parameter - Add missing .py-1.5 and .rounded-full CSS utility classes - Replace invalid fa-sparkles with fa-star (FA 6.0.0 compatible) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(store): semver-aware update badge and add missing gap-1.5 utility - Replace naive version !== comparison with isNewerVersion() that does semver greater-than check, preventing false "Update" badges on same-version or downgrade scenarios - Add missing .gap-1.5 CSS utility used by category pills and tag lists Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Chuck <chuck@example.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Chuck
@@ -28,6 +28,16 @@
|
||||
<h3 class="text-lg font-bold text-gray-900">Installed Plugins</h3>
|
||||
<span id="installed-count" class="text-sm text-gray-500 font-medium">0 installed</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<label for="installed-sort" class="text-sm font-medium text-gray-700 whitespace-nowrap">
|
||||
<i class="fas fa-sort mr-1"></i>Sort:
|
||||
</label>
|
||||
<select id="installed-sort" class="text-sm px-3 py-1.5 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500">
|
||||
<option value="a-z">A → Z</option>
|
||||
<option value="z-a">Z → A</option>
|
||||
<option value="enabled">Enabled First</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="installed-plugins-content" class="block">
|
||||
<div id="installed-plugins-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
|
||||
@@ -165,6 +175,68 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sort & Filter Controls -->
|
||||
<div id="store-filter-bar" class="mb-4 space-y-3">
|
||||
<!-- Row 1: Sort + Quick Filters -->
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<!-- Sort Dropdown -->
|
||||
<div class="flex items-center gap-2">
|
||||
<label for="store-sort" class="text-sm font-medium text-gray-700 whitespace-nowrap">
|
||||
<i class="fas fa-sort mr-1"></i>Sort:
|
||||
</label>
|
||||
<select id="store-sort" class="text-sm px-3 py-1.5 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500">
|
||||
<option value="a-z">A → Z</option>
|
||||
<option value="z-a">Z → A</option>
|
||||
<option value="verified">Verified First</option>
|
||||
<option value="newest">Recently Updated</option>
|
||||
<option value="category">Category</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="h-6 w-px bg-gray-300"></div>
|
||||
|
||||
<!-- Quick Filter Toggles -->
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<span class="text-sm font-medium text-gray-700">Filter:</span>
|
||||
<button id="filter-verified" type="button" class="filter-pill text-xs px-3 py-1.5 rounded-full border border-gray-300 bg-white hover:bg-gray-50 transition-colors" data-active="false">
|
||||
<i class="fas fa-check-circle mr-1"></i>Verified
|
||||
</button>
|
||||
<button id="filter-new" type="button" class="filter-pill text-xs px-3 py-1.5 rounded-full border border-gray-300 bg-white hover:bg-gray-50 transition-colors" data-active="false">
|
||||
<i class="fas fa-star mr-1"></i>New
|
||||
</button>
|
||||
<button id="filter-installed" type="button" class="filter-pill text-xs px-3 py-1.5 rounded-full border border-gray-300 bg-white hover:bg-gray-50 transition-colors" data-active="false">
|
||||
<i class="fas fa-download mr-1"></i><span>All</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="h-6 w-px bg-gray-300"></div>
|
||||
|
||||
<!-- Author Dropdown -->
|
||||
<select id="filter-author" class="text-sm px-3 py-1.5 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500">
|
||||
<option value="">All Authors</option>
|
||||
</select>
|
||||
|
||||
<!-- Clear Filters + Badge -->
|
||||
<button id="clear-filters-btn" type="button" class="hidden text-xs px-3 py-1.5 rounded-full bg-red-100 text-red-700 hover:bg-red-200 transition-colors font-medium">
|
||||
<i class="fas fa-times mr-1"></i>Clear Filters
|
||||
<span id="filter-count-badge" class="ml-1 inline-flex items-center justify-center bg-red-600 text-white rounded-full w-5 h-5 text-xs font-bold">0</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Row 2: Category Pills (populated dynamically) -->
|
||||
<div id="filter-categories-container" class="hidden">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<span class="text-xs font-medium text-gray-600 whitespace-nowrap">Categories:</span>
|
||||
<div id="filter-categories-pills" class="flex flex-wrap gap-1.5">
|
||||
<!-- Dynamically populated category pills -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="plugin-store-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
|
||||
<!-- Loading skeleton -->
|
||||
<div class="store-loading col-span-full">
|
||||
|
||||
Reference in New Issue
Block a user