mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-04-10 13:02:59 +00:00
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>
This commit is contained in:
@@ -144,6 +144,7 @@ body {
|
||||
|
||||
.rounded-lg { border-radius: 0.5rem; }
|
||||
.rounded-md { border-radius: 0.375rem; }
|
||||
.rounded-full { border-radius: 9999px; }
|
||||
.rounded { border-radius: 0.25rem; }
|
||||
|
||||
.shadow { box-shadow: var(--shadow); }
|
||||
@@ -155,6 +156,7 @@ body {
|
||||
.p-4 { padding: 1rem; }
|
||||
.p-2 { padding: 0.5rem; }
|
||||
.px-4 { padding-left: 1rem; padding-right: 1rem; }
|
||||
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
|
||||
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
|
||||
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
|
||||
.pb-4 { padding-bottom: 1rem; }
|
||||
@@ -667,35 +669,27 @@ button.bg-white {
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Category Filter Pills */
|
||||
.filter-pill,
|
||||
.category-filter-pill {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.filter-pill[data-active="true"],
|
||||
.category-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,
|
||||
.category-filter-pill[data-active="true"]:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.category-filter-pill[data-active="true"] {
|
||||
box-shadow: 0 0 0 1px var(--color-info);
|
||||
}
|
||||
|
||||
|
||||
@@ -5278,10 +5278,11 @@ function setupStoreFilterListeners() {
|
||||
}
|
||||
}
|
||||
|
||||
function applyStoreFiltersAndSort() {
|
||||
if (!pluginStoreCache) return;
|
||||
function applyStoreFiltersAndSort(basePlugins) {
|
||||
const source = basePlugins || pluginStoreCache;
|
||||
if (!source) return;
|
||||
|
||||
let plugins = [...pluginStoreCache];
|
||||
let plugins = [...source];
|
||||
const installedIds = new Set(
|
||||
(window.installedPlugins || []).map(p => p.id)
|
||||
);
|
||||
@@ -5342,7 +5343,7 @@ function applyStoreFiltersAndSort() {
|
||||
// Update result count
|
||||
const countEl = document.getElementById('store-count');
|
||||
if (countEl) {
|
||||
const total = pluginStoreCache.length;
|
||||
const total = source.length;
|
||||
const shown = plugins.length;
|
||||
countEl.innerHTML = shown < total
|
||||
? `${shown} of ${total} shown`
|
||||
@@ -5481,20 +5482,9 @@ function searchPluginStore(fetchCommitInfo = true) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Route through filter/sort pipeline if cache is available, otherwise render directly
|
||||
if (pluginStoreCache) {
|
||||
applyStoreFiltersAndSort();
|
||||
} else {
|
||||
renderPluginStore(plugins);
|
||||
try {
|
||||
const countEl = document.getElementById('store-count');
|
||||
if (countEl) {
|
||||
countEl.innerHTML = `${plugins.length} available`;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Could not update store count:', e);
|
||||
}
|
||||
}
|
||||
// Route through filter/sort pipeline — pass fresh plugins
|
||||
// so server-filtered results (query/category) aren't ignored
|
||||
applyStoreFiltersAndSort(plugins);
|
||||
|
||||
// Ensure GitHub token collapse handler is attached after store is rendered
|
||||
// The button might not exist until the store content is loaded
|
||||
@@ -5611,7 +5601,7 @@ function renderPluginStore(plugins) {
|
||||
<div class="flex items-center flex-wrap gap-2 mb-2">
|
||||
<h4 class="font-semibold text-gray-900 text-base">${escapeHtml(plugin.name || plugin.id)}</h4>
|
||||
${plugin.verified ? '<span class="badge badge-success"><i class="fas fa-check-circle mr-1"></i>Verified</span>' : ''}
|
||||
${isNewPlugin(plugin.last_updated) ? '<span class="badge badge-info"><i class="fas fa-sparkles mr-1"></i>New</span>' : ''}
|
||||
${isNewPlugin(plugin.last_updated) ? '<span class="badge badge-info"><i class="fas fa-star mr-1"></i>New</span>' : ''}
|
||||
${isInstalled ? '<span class="badge badge-success"><i class="fas fa-check mr-1"></i>Installed</span>' : ''}
|
||||
${hasUpdate ? '<span class="badge badge-warning"><i class="fas fa-arrow-up mr-1"></i>Update</span>' : ''}
|
||||
${plugin._source === 'custom_repository' ? `<span class="badge badge-accent" title="From: ${escapeHtml(plugin._repository_name || plugin._repository_url || 'Custom Repository')}"><i class="fas fa-bookmark mr-1"></i>Custom</span>` : ''}
|
||||
|
||||
@@ -204,7 +204,7 @@
|
||||
<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-sparkles mr-1"></i>New
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user