-
+
${escapeHtml(plugin.name || plugin.id)}
${plugin.verified ? 'Verified' : ''}
+ ${installed ? 'Installed' : ''}
${isNewPlugin(plugin.last_updated) ? 'New' : ''}
${plugin._source === 'custom_repository' ? `Custom` : ''}
@@ -5326,26 +5533,26 @@ function renderPluginStore(plugins) {
` : ''}
-
- `).join('');
+
`;
+ }).join('');
}
// Expose functions to window for onclick handlers
@@ -5366,12 +5573,9 @@ window.installPlugin = function(pluginId, branch = null) {
.then(data => {
showNotification(data.message, data.status);
if (data.status === 'success') {
- // Refresh both installed plugins and store
+ // Refresh installed plugins list, then re-render store to update badges
loadInstalledPlugins();
- // Delay store refresh slightly to ensure DOM is ready
- setTimeout(() => {
- searchPluginStore();
- }, 100);
+ setTimeout(() => applyStoreFiltersAndSort(true), 500);
}
})
.catch(error => {
@@ -7323,8 +7527,59 @@ setTimeout(function() {
'use strict';
let starlarkSectionVisible = false;
- let starlarkAppsCache = null;
+ let starlarkFullCache = null; // All apps from server
+ let starlarkFilteredList = []; // After filters applied
+ let starlarkDataLoaded = false;
+ // ── Filter State ────────────────────────────────────────────────────────
+ const starlarkFilterState = {
+ sort: localStorage.getItem('starlarkSort') || 'a-z',
+ filterInstalled: null, // null=all, true=installed, false=not-installed
+ filterAuthor: '',
+ filterCategory: '',
+ searchQuery: '',
+ page: 1,
+ perPage: parseInt(localStorage.getItem('starlarkPerPage')) || 24,
+ persist() {
+ localStorage.setItem('starlarkSort', this.sort);
+ localStorage.setItem('starlarkPerPage', this.perPage);
+ },
+ reset() {
+ this.sort = 'a-z';
+ this.filterInstalled = null;
+ this.filterAuthor = '';
+ this.filterCategory = '';
+ this.searchQuery = '';
+ this.page = 1;
+ },
+ activeCount() {
+ let n = 0;
+ if (this.searchQuery) n++;
+ if (this.filterInstalled !== null) n++;
+ if (this.filterAuthor) n++;
+ if (this.filterCategory) n++;
+ if (this.sort !== 'a-z') n++;
+ return n;
+ }
+ };
+
+ // ── Helpers ─────────────────────────────────────────────────────────────
+ function escapeHtml(str) {
+ if (!str) return '';
+ const div = document.createElement('div');
+ div.textContent = str;
+ return div.innerHTML;
+ }
+
+ function isStarlarkInstalled(appId) {
+ // Check window.installedPlugins (populated by loadInstalledPlugins)
+ if (window.installedPlugins && Array.isArray(window.installedPlugins)) {
+ return window.installedPlugins.some(p => p.id === 'starlark:' + appId);
+ }
+ return false;
+ }
+
+ // ── Section Toggle + Init ───────────────────────────────────────────────
function initStarlarkSection() {
const toggleBtn = document.getElementById('toggle-starlark-section');
if (toggleBtn && !toggleBtn._starlarkInit) {
@@ -7341,16 +7596,18 @@ setTimeout(function() {
this.querySelector('span').textContent = starlarkSectionVisible ? 'Hide' : 'Show';
if (starlarkSectionVisible) {
loadStarlarkStatus();
- loadStarlarkCategories();
+ if (!starlarkDataLoaded) fetchStarlarkApps();
}
});
}
- const browseBtn = document.getElementById('starlark-browse-btn');
- if (browseBtn && !browseBtn._starlarkInit) {
- browseBtn._starlarkInit = true;
- browseBtn.addEventListener('click', browseStarlarkApps);
- }
+ // Restore persisted sort/perPage
+ const sortEl = document.getElementById('starlark-sort');
+ if (sortEl) sortEl.value = starlarkFilterState.sort;
+ const ppEl = document.getElementById('starlark-per-page');
+ if (ppEl) ppEl.value = starlarkFilterState.perPage;
+
+ setupStarlarkFilterListeners();
const uploadBtn = document.getElementById('starlark-upload-btn');
if (uploadBtn && !uploadBtn._starlarkInit) {
@@ -7367,6 +7624,7 @@ setTimeout(function() {
}
}
+ // ── Status ──────────────────────────────────────────────────────────────
function loadStarlarkStatus() {
fetch('/api/v3/starlark/status')
.then(r => r.json())
@@ -7387,52 +7645,60 @@ setTimeout(function() {
.catch(err => console.error('Starlark status error:', err));
}
- function loadStarlarkCategories() {
- fetch('/api/v3/starlark/repository/categories')
- .then(r => r.json())
- .then(data => {
- if (data.status !== 'success') return;
- const select = document.getElementById('starlark-category');
- if (!select) return;
- select.innerHTML = '
';
- (data.categories || []).forEach(cat => {
- const opt = document.createElement('option');
- opt.value = cat;
- opt.textContent = cat;
- select.appendChild(opt);
- });
- })
- .catch(err => console.error('Starlark categories error:', err));
- }
-
- function browseStarlarkApps() {
- const search = (document.getElementById('starlark-search') || {}).value || '';
- const category = (document.getElementById('starlark-category') || {}).value || '';
+ // ── Bulk Fetch All Apps ─────────────────────────────────────────────────
+ function fetchStarlarkApps() {
const grid = document.getElementById('starlark-apps-grid');
- const countEl = document.getElementById('starlark-apps-count');
+ if (grid) {
+ grid.innerHTML = `
+
+ ${Array(10).fill('
').join('')}
+
+
`;
+ }
- if (grid) grid.innerHTML = '
Loading Tronbyte apps...
';
-
- const params = new URLSearchParams();
- if (search) params.set('search', search);
- if (category) params.set('category', category);
- params.set('limit', '50');
-
- fetch('/api/v3/starlark/repository/browse?' + params.toString())
+ fetch('/api/v3/starlark/repository/browse')
.then(r => r.json())
.then(data => {
if (data.status !== 'success') {
if (grid) grid.innerHTML = `
${escapeHtml(data.message || 'Failed to load')}
`;
return;
}
- starlarkAppsCache = data.apps;
+
+ starlarkFullCache = data.apps || [];
+ starlarkDataLoaded = true;
+
+ // Populate category dropdown
+ const catSelect = document.getElementById('starlark-category');
+ if (catSelect) {
+ catSelect.innerHTML = '
';
+ (data.categories || []).forEach(cat => {
+ const opt = document.createElement('option');
+ opt.value = cat;
+ opt.textContent = cat;
+ catSelect.appendChild(opt);
+ });
+ }
+
+ // Populate author dropdown
+ const authSelect = document.getElementById('starlark-filter-author');
+ if (authSelect) {
+ authSelect.innerHTML = '
';
+ (data.authors || []).forEach(author => {
+ const opt = document.createElement('option');
+ opt.value = author;
+ opt.textContent = author;
+ authSelect.appendChild(opt);
+ });
+ }
+
+ const countEl = document.getElementById('starlark-apps-count');
if (countEl) countEl.textContent = `${data.count} apps`;
- renderStarlarkApps(data.apps, grid);
if (data.rate_limit) {
- const rl = data.rate_limit;
- console.log(`[Starlark] GitHub rate limit: ${rl.remaining}/${rl.limit} remaining`);
+ console.log(`[Starlark] GitHub rate limit: ${data.rate_limit.remaining}/${data.rate_limit.limit} remaining` + (data.cached ? ' (cached)' : ''));
}
+
+ applyStarlarkFiltersAndSort();
})
.catch(err => {
console.error('Starlark browse error:', err);
@@ -7440,6 +7706,151 @@ setTimeout(function() {
});
}
+ // ── Apply Filters + Sort ────────────────────────────────────────────────
+ function applyStarlarkFiltersAndSort(skipPageReset) {
+ if (!starlarkFullCache) return;
+ const st = starlarkFilterState;
+
+ let list = starlarkFullCache.slice();
+
+ // Text search
+ if (st.searchQuery) {
+ const q = st.searchQuery.toLowerCase();
+ list = list.filter(app => {
+ const hay = [app.name, app.summary, app.desc, app.author, app.id, app.category]
+ .filter(Boolean).join(' ').toLowerCase();
+ return hay.includes(q);
+ });
+ }
+
+ // Category filter
+ if (st.filterCategory) {
+ const cat = st.filterCategory.toLowerCase();
+ list = list.filter(app => (app.category || '').toLowerCase() === cat);
+ }
+
+ // Author filter
+ if (st.filterAuthor) {
+ list = list.filter(app => app.author === st.filterAuthor);
+ }
+
+ // Installed filter
+ if (st.filterInstalled === true) {
+ list = list.filter(app => isStarlarkInstalled(app.id));
+ } else if (st.filterInstalled === false) {
+ list = list.filter(app => !isStarlarkInstalled(app.id));
+ }
+
+ // Sort
+ list.sort((a, b) => {
+ const nameA = (a.name || a.id || '').toLowerCase();
+ const nameB = (b.name || b.id || '').toLowerCase();
+ switch (st.sort) {
+ case 'z-a': return nameB.localeCompare(nameA);
+ case 'category': {
+ const catCmp = (a.category || '').localeCompare(b.category || '');
+ return catCmp !== 0 ? catCmp : nameA.localeCompare(nameB);
+ }
+ case 'author': {
+ const authCmp = (a.author || '').localeCompare(b.author || '');
+ return authCmp !== 0 ? authCmp : nameA.localeCompare(nameB);
+ }
+ default: return nameA.localeCompare(nameB); // a-z
+ }
+ });
+
+ starlarkFilteredList = list;
+ if (!skipPageReset) st.page = 1;
+
+ renderStarlarkPage();
+ updateStarlarkFilterUI();
+ }
+
+ // ── Render Current Page ─────────────────────────────────────────────────
+ function renderStarlarkPage() {
+ const st = starlarkFilterState;
+ const total = starlarkFilteredList.length;
+ const totalPages = Math.max(1, Math.ceil(total / st.perPage));
+ if (st.page > totalPages) st.page = totalPages;
+
+ const start = (st.page - 1) * st.perPage;
+ const end = Math.min(start + st.perPage, total);
+ const pageApps = starlarkFilteredList.slice(start, end);
+
+ // Results info
+ const info = total > 0
+ ? `Showing ${start + 1}\u2013${end} of ${total} apps`
+ : 'No apps match your filters';
+ const infoEl = document.getElementById('starlark-results-info');
+ const infoElBot = document.getElementById('starlark-results-info-bottom');
+ if (infoEl) infoEl.textContent = info;
+ if (infoElBot) infoElBot.textContent = info;
+
+ // Pagination
+ renderStarlarkPagination('starlark-pagination-top', totalPages, st.page);
+ renderStarlarkPagination('starlark-pagination-bottom', totalPages, st.page);
+
+ // Grid
+ const grid = document.getElementById('starlark-apps-grid');
+ renderStarlarkApps(pageApps, grid);
+ }
+
+ // ── Pagination Controls ─────────────────────────────────────────────────
+ function renderStarlarkPagination(containerId, totalPages, currentPage) {
+ const container = document.getElementById(containerId);
+ if (!container) return;
+
+ if (totalPages <= 1) { container.innerHTML = ''; return; }
+
+ const btnClass = 'px-3 py-1 text-sm rounded-md border transition-colors';
+ const activeClass = 'bg-blue-600 text-white border-blue-600';
+ const normalClass = 'bg-white text-gray-700 border-gray-300 hover:bg-gray-100 cursor-pointer';
+ const disabledClass = 'bg-gray-100 text-gray-400 border-gray-200 cursor-not-allowed';
+
+ let html = '';
+
+ // Prev
+ html += `
`;
+
+ // Page numbers with ellipsis
+ const pages = [];
+ pages.push(1);
+ if (currentPage > 3) pages.push('...');
+ for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {
+ pages.push(i);
+ }
+ if (currentPage < totalPages - 2) pages.push('...');
+ if (totalPages > 1) pages.push(totalPages);
+
+ pages.forEach(p => {
+ if (p === '...') {
+ html += `
…`;
+ } else {
+ html += `
`;
+ }
+ });
+
+ // Next
+ html += `
`;
+
+ container.innerHTML = html;
+
+ // Event delegation for page buttons
+ container.querySelectorAll('[data-starlark-page]').forEach(btn => {
+ btn.addEventListener('click', function() {
+ const p = parseInt(this.getAttribute('data-starlark-page'));
+ if (p >= 1 && p <= totalPages && p !== currentPage) {
+ starlarkFilterState.page = p;
+ renderStarlarkPage();
+ // Scroll to top of grid
+ const grid = document.getElementById('starlark-apps-grid');
+ if (grid) grid.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ }
+ });
+ });
+ }
+
+ // ── Card Rendering ──────────────────────────────────────────────────────
function renderStarlarkApps(apps, grid) {
if (!grid) return;
if (!apps || apps.length === 0) {
@@ -7447,13 +7858,16 @@ setTimeout(function() {
return;
}
- grid.innerHTML = apps.map(app => `
+ grid.innerHTML = apps.map(app => {
+ const installed = isStarlarkInstalled(app.id);
+ return `
-
+
${escapeHtml(app.name || app.id)}
Starlark
+ ${installed ? 'Installed' : ''}
${app.author ? `
${escapeHtml(app.author)}
` : ''}
@@ -7462,25 +7876,143 @@ setTimeout(function() {
${escapeHtml(app.summary || app.desc || 'No description')}
-
-
- `).join('');
+
`;
+ }).join('');
}
- function escapeHtml(str) {
- if (!str) return '';
- const div = document.createElement('div');
- div.textContent = str;
- return div.innerHTML;
+ // ── Filter UI Updates ───────────────────────────────────────────────────
+ function updateStarlarkFilterUI() {
+ const st = starlarkFilterState;
+ const count = st.activeCount();
+
+ const badge = document.getElementById('starlark-active-filters');
+ const clearBtn = document.getElementById('starlark-clear-filters');
+ if (badge) {
+ badge.classList.toggle('hidden', count === 0);
+ badge.textContent = count + ' filter' + (count !== 1 ? 's' : '') + ' active';
+ }
+ if (clearBtn) clearBtn.classList.toggle('hidden', count === 0);
+
+ // Update installed toggle button text
+ const instBtn = document.getElementById('starlark-filter-installed');
+ if (instBtn) {
+ if (st.filterInstalled === true) {
+ instBtn.innerHTML = '
Installed';
+ instBtn.classList.add('border-green-400', 'bg-green-50');
+ instBtn.classList.remove('border-gray-300', 'bg-white', 'border-red-400', 'bg-red-50');
+ } else if (st.filterInstalled === false) {
+ instBtn.innerHTML = '
Not Installed';
+ instBtn.classList.add('border-red-400', 'bg-red-50');
+ instBtn.classList.remove('border-gray-300', 'bg-white', 'border-green-400', 'bg-green-50');
+ } else {
+ instBtn.innerHTML = '
All';
+ instBtn.classList.add('border-gray-300', 'bg-white');
+ instBtn.classList.remove('border-green-400', 'bg-green-50', 'border-red-400', 'bg-red-50');
+ }
+ }
}
+ // ── Event Listeners ─────────────────────────────────────────────────────
+ function setupStarlarkFilterListeners() {
+ // Search with debounce
+ const searchEl = document.getElementById('starlark-search');
+ if (searchEl && !searchEl._starlarkInit) {
+ searchEl._starlarkInit = true;
+ let debounce = null;
+ searchEl.addEventListener('input', function() {
+ clearTimeout(debounce);
+ debounce = setTimeout(() => {
+ starlarkFilterState.searchQuery = this.value.trim();
+ applyStarlarkFiltersAndSort();
+ }, 300);
+ });
+ }
+
+ // Category dropdown
+ const catEl = document.getElementById('starlark-category');
+ if (catEl && !catEl._starlarkInit) {
+ catEl._starlarkInit = true;
+ catEl.addEventListener('change', function() {
+ starlarkFilterState.filterCategory = this.value;
+ applyStarlarkFiltersAndSort();
+ });
+ }
+
+ // Sort dropdown
+ const sortEl = document.getElementById('starlark-sort');
+ if (sortEl && !sortEl._starlarkInit) {
+ sortEl._starlarkInit = true;
+ sortEl.addEventListener('change', function() {
+ starlarkFilterState.sort = this.value;
+ starlarkFilterState.persist();
+ applyStarlarkFiltersAndSort();
+ });
+ }
+
+ // Author dropdown
+ const authEl = document.getElementById('starlark-filter-author');
+ if (authEl && !authEl._starlarkInit) {
+ authEl._starlarkInit = true;
+ authEl.addEventListener('change', function() {
+ starlarkFilterState.filterAuthor = this.value;
+ applyStarlarkFiltersAndSort();
+ });
+ }
+
+ // Installed toggle (cycle: all → installed → not-installed → all)
+ const instBtn = document.getElementById('starlark-filter-installed');
+ if (instBtn && !instBtn._starlarkInit) {
+ instBtn._starlarkInit = true;
+ instBtn.addEventListener('click', function() {
+ const st = starlarkFilterState;
+ if (st.filterInstalled === null) st.filterInstalled = true;
+ else if (st.filterInstalled === true) st.filterInstalled = false;
+ else st.filterInstalled = null;
+ applyStarlarkFiltersAndSort();
+ });
+ }
+
+ // Clear filters
+ const clearBtn = document.getElementById('starlark-clear-filters');
+ if (clearBtn && !clearBtn._starlarkInit) {
+ clearBtn._starlarkInit = true;
+ clearBtn.addEventListener('click', function() {
+ starlarkFilterState.reset();
+ // Reset UI elements
+ const searchEl = document.getElementById('starlark-search');
+ if (searchEl) searchEl.value = '';
+ const catEl = document.getElementById('starlark-category');
+ if (catEl) catEl.value = '';
+ const sortEl = document.getElementById('starlark-sort');
+ if (sortEl) sortEl.value = 'a-z';
+ const authEl = document.getElementById('starlark-filter-author');
+ if (authEl) authEl.value = '';
+ starlarkFilterState.persist();
+ applyStarlarkFiltersAndSort();
+ });
+ }
+
+ // Per-page selector
+ const ppEl = document.getElementById('starlark-per-page');
+ if (ppEl && !ppEl._starlarkInit) {
+ ppEl._starlarkInit = true;
+ ppEl.addEventListener('change', function() {
+ starlarkFilterState.perPage = parseInt(this.value) || 24;
+ starlarkFilterState.persist();
+ applyStarlarkFiltersAndSort();
+ });
+ }
+ }
+
+ // ── Install / Upload / Pixlet ───────────────────────────────────────────
window.installStarlarkApp = function(appId) {
if (!confirm(`Install Starlark app "${appId}" from Tronbyte repository?`)) return;
@@ -7493,9 +8025,11 @@ setTimeout(function() {
.then(data => {
if (data.status === 'success') {
alert(`Installed: ${data.message || appId}`);
- // Refresh installed plugins to show the new starlark app
+ // Refresh installed plugins list
if (typeof loadInstalledPlugins === 'function') loadInstalledPlugins();
else if (typeof window.loadInstalledPlugins === 'function') window.loadInstalledPlugins();
+ // Re-render current page to update installed badges
+ setTimeout(() => applyStarlarkFiltersAndSort(true), 500);
} else {
alert(`Install failed: ${data.message || 'Unknown error'}`);
}
@@ -7537,6 +8071,7 @@ setTimeout(function() {
alert(`Uploaded: ${data.app_id}`);
if (typeof loadInstalledPlugins === 'function') loadInstalledPlugins();
else if (typeof window.loadInstalledPlugins === 'function') window.loadInstalledPlugins();
+ setTimeout(() => applyStarlarkFiltersAndSort(true), 500);
} else {
alert('Upload failed: ' + (data.message || 'Unknown error'));
}
@@ -7544,14 +8079,13 @@ setTimeout(function() {
.catch(err => alert('Upload failed: ' + err.message));
}
- // Initialize when plugins tab loads
+ // ── Bootstrap ───────────────────────────────────────────────────────────
const origInit = window.initializePlugins;
window.initializePlugins = function() {
if (origInit) origInit();
initStarlarkSection();
};
- // Also try to init on DOMContentLoaded and on HTMX load
document.addEventListener('DOMContentLoaded', initStarlarkSection);
document.addEventListener('htmx:afterSwap', function(e) {
if (e.detail && e.detail.target && e.detail.target.id === 'plugins-content') {
diff --git a/web_interface/templates/v3/partials/plugins.html b/web_interface/templates/v3/partials/plugins.html
index ef155ce8..3b01bd74 100644
--- a/web_interface/templates/v3/partials/plugins.html
+++ b/web_interface/templates/v3/partials/plugins.html
@@ -147,24 +147,61 @@