mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-05-15 18:03:32 +00:00
44d1a08db4
* fix(cache): check odds keys before generic live check in get_data_type_from_key Cache keys like odds_espn_basketball_nba_<id>_live contain both 'odds' and 'live'. The previous ordering matched the generic 'live' check first, returning 'sports_live' (30 s TTL) instead of the correct 'odds_live' (120 s TTL). This caused the ESPN odds API to be hit every 30 s per live game, frequently triggering the 3-second per-request timeout and returning no odds data. Moving the 'odds' check above the generic 'live' block restores the correct 120-second cache TTL for in-progress game odds. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(display): use single-quoted HTML attributes for JSON hidden inputs Placing |tojson output (which contains double quotes) inside a double-quoted HTML attribute broke the attribute — browsers closed the attribute at the first inner quote, leaving JS with an empty or truncated value. JSON.parse then failed silently, leaving excluded=[] so all Vegas scroll plugins appeared checked (included) regardless of the actual excluded_plugins config. Switch to single-quoted HTML attributes so the JSON double quotes are valid inside the attribute value. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * perf(plugins): dramatically speed up plugin manager tab load time ## Problem The Plugins tab loaded slowly and inconsistently (5–30s depending on cache state), with a blank spinner for the entire wait. Three root causes: 1. **N+1 subprocess per installed plugin** — `_get_local_git_info` ran 4 separate git subprocesses per plugin (rev-parse HEAD, abbrev-ref, config --get remote.origin.url, log --format=%cI). With 15 plugins that's 60 blocking subprocess spawns before the endpoint returned. 2. **Serial per-plugin loop** — the `/plugins/installed` endpoint processed each plugin sequentially: manifest read → git info → instance lookup → Vegas mode query, one plugin at a time. 3. **Serial JS loading** — the store search only started after installed plugins fully completed, so users waited for both round-trips back to back. No UI feedback during the wait. ## Changes ### Backend — src/plugin_system/store_manager.py - Consolidate 4 git subprocesses → 1: branch read from `.git/HEAD` (file I/O, no subprocess), remote URL parsed from `.git/config` (file I/O, no subprocess), SHA + commit date fetched together in a single `git log -1 --format=%H%n%cI` call - Existing signature-based cache already eliminates all subprocesses on warm hits; this change cuts cold-cache cost from 4 → 1 per plugin ### Backend — web_interface/blueprints/api_v3.py - Wrap per-plugin work in a `_build_plugin_entry()` helper and execute it across a `ThreadPoolExecutor(max_workers=8)` so all plugins are processed in parallel instead of sequentially - Fix double `get_plugin()` call per plugin (was called once for the enabled fallback and again for Vegas mode — now one shared call) ### Frontend — web_interface/static/v3/plugins_manager.js - Fire `searchPluginStore()` and `loadInstalledPlugins()` simultaneously instead of waiting for installed to complete before starting the store - After installed data arrives, call `applyStoreFiltersAndSort(true)` to refresh install/update/reinstall badges from already-cached store data (instant, no extra network call) ### Frontend — web_interface/templates/v3/partials/plugins.html - Add responsive skeleton cards to the installed plugins section that match real card proportions (removed automatically when data renders) - Replace the 5 featureless gray boxes in the store skeleton with 10 structured skeleton cards matching the real card layout ## Measured improvement on Pi 4 (11 installed plugins, ledpi-ticker) | Scenario | Before | After | |---|---|---| | Cold cache (first open) | ~8–15s | **0.9s** | | Warm cache (git cache hit) | ~1–2s | **55ms** | | UI feedback during load | blank spinner | skeleton cards | | Store waits for installed | yes (serial) | no (parallel) | Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(plugins): harden git metadata parsing and plugin entry building store_manager.py: - Detect worktree/submodule .git files (gitdir: <path>) and resolve to the actual git directory before reading HEAD or config - Wrap HEAD read_text in try/except OSError/NotADirectoryError so atypical repos return None instead of propagating exceptions - Guard config url line split with '=' presence check to avoid IndexError on malformed lines api_v3.py: - Wrap _build_plugin_entry body in a try/except via a thin outer wrapper so a single plugin's failure doesn't 500 the whole endpoint; failed entries return None and are filtered by the existing [r for r in results if r is not None] step - Narrow manifest except clause to FileNotFoundError, PermissionError, json.JSONDecodeError instead of bare Exception - Validate manifest is a dict before calling plugin_info.update() and log a debug message when it isn't Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
675 lines
36 KiB
HTML
675 lines
36 KiB
HTML
<div class="bg-white rounded-lg shadow-md p-6" data-plugins-loaded="true">
|
|
<div class="section-header">
|
|
<h2 class="text-xl font-bold text-gray-900 mb-1">Plugin Management</h2>
|
|
<p class="text-sm text-gray-600">Manage installed plugins, configure settings, and browse the plugin store.</p>
|
|
</div>
|
|
|
|
<!-- Plugin Controls -->
|
|
<div class="flex flex-wrap items-center justify-between gap-4 mb-6">
|
|
<div class="flex items-center space-x-4">
|
|
<button type="button" id="refresh-plugins-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
|
|
<i class="fas fa-sync-alt mr-2"></i>Refresh Plugins
|
|
</button>
|
|
<button type="button" id="update-all-plugins-btn" class="btn bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md flex items-center">
|
|
<i class="fas fa-cloud-download-alt mr-2"></i>Check & Update All
|
|
</button>
|
|
<button type="button" id="restart-display-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
|
|
<i class="fas fa-redo mr-2"></i>Restart Display
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plugin Content Area -->
|
|
<div class="space-y-8">
|
|
<!-- Installed Plugins Section (Always visible at top) -->
|
|
<div id="installed-plugins-section" class="mb-8">
|
|
<div class="flex items-center justify-between mb-5 pb-3 border-b border-gray-200">
|
|
<div class="flex items-center gap-3">
|
|
<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>
|
|
<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">
|
|
<!-- Skeleton cards shown while installed plugins load -->
|
|
<div class="installed-skeleton plugin-card animate-pulse">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="flex-1 min-w-0 space-y-2">
|
|
<div class="h-4 bg-gray-200 rounded w-3/4"></div>
|
|
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
|
<div class="h-3 bg-gray-200 rounded w-2/3"></div>
|
|
</div>
|
|
<div class="h-6 w-10 bg-gray-200 rounded-full ml-4 flex-shrink-0"></div>
|
|
</div>
|
|
<div class="space-y-2 mb-4">
|
|
<div class="h-3 bg-gray-200 rounded w-full"></div>
|
|
<div class="h-3 bg-gray-200 rounded w-5/6"></div>
|
|
</div>
|
|
<div class="h-8 bg-gray-200 rounded w-full mt-auto"></div>
|
|
</div>
|
|
<div class="installed-skeleton plugin-card animate-pulse hidden md:block">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="flex-1 min-w-0 space-y-2">
|
|
<div class="h-4 bg-gray-200 rounded w-2/3"></div>
|
|
<div class="h-3 bg-gray-200 rounded w-1/3"></div>
|
|
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
|
</div>
|
|
<div class="h-6 w-10 bg-gray-200 rounded-full ml-4 flex-shrink-0"></div>
|
|
</div>
|
|
<div class="space-y-2 mb-4">
|
|
<div class="h-3 bg-gray-200 rounded w-full"></div>
|
|
<div class="h-3 bg-gray-200 rounded w-4/5"></div>
|
|
</div>
|
|
<div class="h-8 bg-gray-200 rounded w-full mt-auto"></div>
|
|
</div>
|
|
<div class="installed-skeleton plugin-card animate-pulse hidden lg:block">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="flex-1 min-w-0 space-y-2">
|
|
<div class="h-4 bg-gray-200 rounded w-4/5"></div>
|
|
<div class="h-3 bg-gray-200 rounded w-2/5"></div>
|
|
<div class="h-3 bg-gray-200 rounded w-3/5"></div>
|
|
</div>
|
|
<div class="h-6 w-10 bg-gray-200 rounded-full ml-4 flex-shrink-0"></div>
|
|
</div>
|
|
<div class="space-y-2 mb-4">
|
|
<div class="h-3 bg-gray-200 rounded w-full"></div>
|
|
<div class="h-3 bg-gray-200 rounded w-3/4"></div>
|
|
</div>
|
|
<div class="h-8 bg-gray-200 rounded w-full mt-auto"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plugin Store Section (Always visible at bottom) -->
|
|
<div id="plugin-store-section" class="border-t border-gray-200 pt-8 mt-8">
|
|
<div class="flex items-center justify-between mb-5 pb-3 border-b border-gray-200">
|
|
<div class="flex items-center gap-3">
|
|
<h3 class="text-lg font-bold text-gray-900">Plugin Store</h3>
|
|
<span id="store-count" class="text-sm text-gray-500 font-medium">
|
|
<i class="fas fa-spinner fa-spin mr-1"></i>Loading...
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="plugin-store-content" class="block">
|
|
|
|
<!-- GitHub Token Configuration (Combined Warning + Settings) -->
|
|
<div id="github-token-container" class="mb-5">
|
|
<!-- Warning Banner (shown when no token configured) -->
|
|
<div id="github-auth-warning" class="hidden bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-exclamation-triangle text-yellow-400"></i>
|
|
</div>
|
|
<div class="ml-3 flex-1">
|
|
<p class="text-sm text-yellow-700">
|
|
<strong>Limited API Access:</strong> GitHub API requests are limited to <span id="rate-limit-count">60</span> per hour without authentication.
|
|
Add a GitHub token to increase this to 5,000 requests/hour and get real-time plugin stats.
|
|
</p>
|
|
<p class="mt-2 text-sm text-yellow-700">
|
|
<a href="https://github.com/settings/tokens/new?description=LEDMatrix%20Plugin%20Manager&scopes=" target="_blank" class="font-medium underline hover:text-yellow-800">
|
|
Create a GitHub Token →
|
|
</a>
|
|
<span class="mx-2">|</span>
|
|
<a href="#" onclick="event.preventDefault(); openGithubTokenSettings()" class="font-medium underline hover:text-yellow-800">
|
|
Configure Token
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<button onclick="dismissGithubWarning()" class="text-yellow-700 hover:text-yellow-900">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Panel (expandable configuration form) -->
|
|
<div id="github-token-settings" class="hidden bg-blue-50 border border-blue-200 rounded-lg p-5 shadow-sm mt-3">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="flex items-center space-x-2">
|
|
<i class="fab fa-github text-blue-600 text-xl"></i>
|
|
<h4 class="font-bold text-gray-900">GitHub API Configuration</h4>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button id="toggle-github-token-collapse" class="text-gray-600 hover:text-gray-900 text-sm flex items-center font-medium transition-colors">
|
|
<i class="fas fa-chevron-up mr-1" id="github-token-icon-collapse"></i>
|
|
<span>Collapse</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="github-token-content" class="block">
|
|
|
|
<p class="text-sm text-gray-600 mb-3">
|
|
Configure your GitHub Personal Access Token to increase API rate limits and get real-time plugin statistics.
|
|
</p>
|
|
|
|
<div class="space-y-3">
|
|
<div>
|
|
<label for="github-token-input" class="block text-sm font-medium text-gray-700 mb-1">
|
|
GitHub Personal Access Token
|
|
</label>
|
|
<div class="relative">
|
|
<input type="password" id="github-token-input"
|
|
class="w-full px-3 py-2 pr-20 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
|
|
placeholder="ghp_xxxxxxxxxxxxxxxxxxxx">
|
|
<button type="button" onclick="toggleGithubTokenVisibility()"
|
|
class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700">
|
|
<i id="github-token-icon" class="fas fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mt-1">
|
|
Token is stored in config_secrets.json. No scopes required for public repositories.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<a href="https://github.com/settings/tokens/new?description=LEDMatrix%20Plugin%20Manager&scopes="
|
|
target="_blank"
|
|
class="text-sm text-blue-600 hover:text-blue-800">
|
|
<i class="fas fa-external-link-alt mr-1"></i>Create Token on GitHub
|
|
</a>
|
|
<div class="flex gap-2">
|
|
<button onclick="loadGithubToken()" class="px-3 py-1.5 text-sm bg-gray-600 hover:bg-gray-700 text-white rounded-md">
|
|
<i class="fas fa-sync mr-1"></i>Load Current
|
|
</button>
|
|
<button onclick="saveGithubToken()" class="px-4 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md">
|
|
<i class="fas fa-save mr-1"></i>Save Token
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white border border-blue-200 rounded p-3">
|
|
<p class="text-xs text-gray-600">
|
|
<strong>Rate Limits:</strong><br>
|
|
Without token: 60 requests/hour<br>
|
|
With token: 5,000 requests/hour
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Search Row -->
|
|
<div class="flex gap-3 mb-4">
|
|
<input type="text" id="plugin-search" placeholder="Search plugins by name, description, or tags..." class="form-control text-sm flex-[3] min-w-0 px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:shadow-md transition-shadow">
|
|
<select id="plugin-category" class="form-control text-sm flex-1 px-3 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:shadow-md transition-shadow">
|
|
<option value="">All Categories</option>
|
|
<option value="sports">Sports</option>
|
|
<option value="content">Content</option>
|
|
<option value="time">Time</option>
|
|
<option value="weather">Weather</option>
|
|
<option value="financial">Financial</option>
|
|
<option value="media">Media</option>
|
|
<option value="demo">Demo</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Sort & Filter Bar -->
|
|
<div id="store-filter-bar" class="flex flex-wrap items-center gap-3 mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200">
|
|
<!-- Sort -->
|
|
<select id="store-sort" class="text-sm px-3 py-1.5 border border-gray-300 rounded-md bg-white">
|
|
<option value="a-z">A → Z</option>
|
|
<option value="z-a">Z → A</option>
|
|
<option value="category">Category</option>
|
|
<option value="author">Author</option>
|
|
<option value="newest">Newest</option>
|
|
</select>
|
|
|
|
<div class="w-px h-6 bg-gray-300"></div>
|
|
|
|
<!-- Installed filter toggle -->
|
|
<button id="store-filter-installed" class="text-sm px-3 py-1.5 rounded-md border border-gray-300 bg-white hover:bg-gray-100 transition-colors" title="Cycle: All → Installed → Not Installed">
|
|
<i class="fas fa-filter mr-1 text-gray-400"></i>All
|
|
</button>
|
|
|
|
<div class="flex-1"></div>
|
|
|
|
<!-- Active filter count + clear -->
|
|
<span id="store-active-filters" class="hidden text-xs text-blue-600 font-medium"></span>
|
|
<button id="store-clear-filters" class="hidden text-sm px-3 py-1.5 rounded-md border border-red-300 bg-white text-red-600 hover:bg-red-50 transition-colors">
|
|
<i class="fas fa-times mr-1"></i>Clear Filters
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Results Bar (top pagination) -->
|
|
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
|
|
<span id="store-results-info" class="text-sm text-gray-600"></span>
|
|
<div class="flex items-center gap-3">
|
|
<select id="store-per-page" class="text-sm px-2 py-1 border border-gray-300 rounded-md bg-white">
|
|
<option value="12">12 per page</option>
|
|
<option value="24">24 per page</option>
|
|
<option value="48">48 per page</option>
|
|
</select>
|
|
<div id="store-pagination-top" class="flex items-center gap-1"></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 — hidden by showStoreLoading(false) when data arrives -->
|
|
<div class="store-loading col-span-full">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
|
|
{% for _ in range(10) %}
|
|
<div class="plugin-card animate-pulse">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="flex-1 min-w-0 space-y-2">
|
|
<div class="h-4 bg-gray-200 rounded w-3/4"></div>
|
|
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
|
</div>
|
|
<div class="h-5 w-14 bg-gray-200 rounded-full ml-3 flex-shrink-0"></div>
|
|
</div>
|
|
<div class="space-y-2 mb-4">
|
|
<div class="h-3 bg-gray-200 rounded w-full"></div>
|
|
<div class="h-3 bg-gray-200 rounded w-5/6"></div>
|
|
<div class="h-3 bg-gray-200 rounded w-4/6"></div>
|
|
</div>
|
|
<div class="flex gap-2 mt-auto">
|
|
<div class="h-3 bg-gray-200 rounded w-12"></div>
|
|
<div class="h-3 bg-gray-200 rounded w-16"></div>
|
|
</div>
|
|
<div class="h-8 bg-gray-200 rounded w-full mt-3"></div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Pagination -->
|
|
<div class="flex flex-wrap items-center justify-between gap-3 mt-4">
|
|
<span id="store-results-info-bottom" class="text-sm text-gray-600"></span>
|
|
<div id="store-pagination-bottom" class="flex items-center gap-1"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Starlark Apps Section (Tronbyte Community Apps) -->
|
|
<div id="starlark-apps-section" class="border-t border-gray-200 pt-8 mt-8">
|
|
<div class="flex items-center justify-between mb-5 pb-3 border-b border-gray-200">
|
|
<div class="flex items-center gap-3">
|
|
<h3 class="text-lg font-bold text-gray-900"><i class="fas fa-star text-yellow-500 mr-2"></i>Starlark Apps</h3>
|
|
<span id="starlark-apps-count" class="text-sm text-gray-500 font-medium"></span>
|
|
</div>
|
|
<button id="toggle-starlark-section" class="text-sm text-blue-600 hover:text-blue-800 flex items-center font-medium transition-colors">
|
|
<i class="fas fa-chevron-down mr-1" id="starlark-section-icon"></i>
|
|
<span>Show</span>
|
|
</button>
|
|
</div>
|
|
<div id="starlark-section-content" class="hidden">
|
|
<p class="text-sm text-gray-600 mb-4">Browse and install Starlark apps from the <a href="https://github.com/tronbyt/apps" target="_blank" class="text-blue-600 hover:text-blue-800 underline">Tronbyte community repository</a>. Requires <strong>Pixlet</strong> binary.</p>
|
|
|
|
<!-- Pixlet Status Banner -->
|
|
<div id="starlark-pixlet-status" class="mb-4"></div>
|
|
|
|
<!-- Search Row -->
|
|
<div class="flex gap-3 mb-4">
|
|
<input type="text" id="starlark-search" placeholder="Search by name, description, author..." class="form-control text-sm flex-[3] min-w-0 px-4 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:shadow-md transition-shadow">
|
|
<select id="starlark-category" class="form-control text-sm flex-1 px-3 py-2.5 border border-gray-300 rounded-lg shadow-sm focus:shadow-md transition-shadow">
|
|
<option value="">All Categories</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Sort & Filter Bar -->
|
|
<div id="starlark-filter-bar" class="flex flex-wrap items-center gap-3 mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200">
|
|
<!-- Sort -->
|
|
<select id="starlark-sort" class="text-sm px-3 py-1.5 border border-gray-300 rounded-md bg-white">
|
|
<option value="a-z">A → Z</option>
|
|
<option value="z-a">Z → A</option>
|
|
<option value="category">Category</option>
|
|
<option value="author">Author</option>
|
|
</select>
|
|
|
|
<div class="w-px h-6 bg-gray-300"></div>
|
|
|
|
<!-- Installed filter toggle -->
|
|
<button id="starlark-filter-installed" class="text-sm px-3 py-1.5 rounded-md border border-gray-300 bg-white hover:bg-gray-100 transition-colors" title="Cycle: All → Installed → Not Installed">
|
|
<i class="fas fa-filter mr-1 text-gray-400"></i>All
|
|
</button>
|
|
|
|
<!-- Author filter -->
|
|
<select id="starlark-filter-author" class="text-sm px-3 py-1.5 border border-gray-300 rounded-md bg-white">
|
|
<option value="">All Authors</option>
|
|
</select>
|
|
|
|
<div class="flex-1"></div>
|
|
|
|
<!-- Active filter count + clear -->
|
|
<span id="starlark-active-filters" class="hidden text-xs text-blue-600 font-medium"></span>
|
|
<button id="starlark-clear-filters" class="hidden text-sm px-3 py-1.5 rounded-md border border-red-300 bg-white text-red-600 hover:bg-red-50 transition-colors">
|
|
<i class="fas fa-times mr-1"></i>Clear Filters
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Results Bar (top pagination) -->
|
|
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
|
|
<span id="starlark-results-info" class="text-sm text-gray-600"></span>
|
|
<div class="flex items-center gap-3">
|
|
<select id="starlark-per-page" class="text-sm px-2 py-1 border border-gray-300 rounded-md bg-white">
|
|
<option value="24">24 per page</option>
|
|
<option value="48">48 per page</option>
|
|
<option value="96">96 per page</option>
|
|
</select>
|
|
<div id="starlark-pagination-top" class="flex items-center gap-1"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Starlark Apps Grid -->
|
|
<div id="starlark-apps-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
|
|
</div>
|
|
|
|
<!-- Bottom Pagination -->
|
|
<div class="flex flex-wrap items-center justify-between gap-3 mt-4">
|
|
<span id="starlark-results-info-bottom" class="text-sm text-gray-600"></span>
|
|
<div id="starlark-pagination-bottom" class="flex items-center gap-1"></div>
|
|
</div>
|
|
|
|
<!-- Upload .star file -->
|
|
<div class="flex gap-3 mt-6 pt-4 border-t border-gray-200">
|
|
<button id="starlark-upload-btn" class="btn bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm">
|
|
<i class="fas fa-upload mr-2"></i>Upload .star File
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Install from GitHub URL Section (Separate section, always visible) -->
|
|
<div class="border-t border-gray-200 pt-8 mt-8">
|
|
<div class="flex items-center justify-between mb-5 pb-3 border-b border-gray-200">
|
|
<div>
|
|
<h3 class="text-lg font-bold text-gray-900">Install from GitHub</h3>
|
|
<p class="text-sm text-gray-600 mt-1">Install plugins directly from GitHub repositories</p>
|
|
</div>
|
|
<button id="toggle-github-install" class="text-sm text-blue-600 hover:text-blue-800 flex items-center font-medium transition-colors">
|
|
<i class="fas fa-chevron-down mr-1" id="github-install-icon"></i>
|
|
<span>Show</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="github-install-section" class="hidden space-y-4">
|
|
<!-- Saved Repositories Section -->
|
|
<div class="bg-blue-50 rounded-lg p-5 border border-blue-200 shadow-sm">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="text-base font-bold text-gray-900">
|
|
<i class="fas fa-bookmark mr-2 text-blue-600"></i>Saved Repositories
|
|
</h4>
|
|
<span id="saved-repos-count" class="text-xs text-gray-600 font-medium">0 saved</span>
|
|
</div>
|
|
<p class="text-xs text-gray-600 mb-3">Saved repositories are automatically loaded and their plugins appear in the Plugin Store above.</p>
|
|
<div id="saved-repositories-list" class="space-y-2 mb-3">
|
|
<!-- Saved repositories will be loaded here -->
|
|
</div>
|
|
<button id="refresh-saved-repos" class="text-xs text-blue-600 hover:text-blue-800">
|
|
<i class="fas fa-sync mr-1"></i>Refresh
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Direct Plugin Installation -->
|
|
<div class="bg-gray-50 rounded-lg p-5 border border-gray-200 shadow-sm">
|
|
<h4 class="text-base font-bold text-gray-900 mb-3">
|
|
<i class="fas fa-code-branch mr-2 text-blue-600"></i>Install Single Plugin
|
|
</h4>
|
|
<p class="text-xs text-gray-600 mb-3">Install a plugin directly from its GitHub repository URL</p>
|
|
<div class="space-y-2">
|
|
<div class="flex gap-2">
|
|
<input type="text" id="github-plugin-url"
|
|
placeholder="https://github.com/user/ledmatrix-plugin-name"
|
|
class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
|
|
<button type="button" id="install-plugin-from-url"
|
|
onclick="if(window.handleGitHubPluginInstall){window.handleGitHubPluginInstall()}else{alert('Function not loaded yet, please refresh the page')}"
|
|
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-md whitespace-nowrap">
|
|
<i class="fas fa-download mr-2"></i>Install
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<label for="plugin-branch-input" class="text-xs text-gray-600 whitespace-nowrap">
|
|
<i class="fas fa-code-branch mr-1"></i>Branch (optional):
|
|
</label>
|
|
<input type="text" id="plugin-branch-input"
|
|
placeholder="main, test, etc. (default: main)"
|
|
class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
</div>
|
|
<div id="github-plugin-status" class="mt-2 text-sm"></div>
|
|
</div>
|
|
|
|
<!-- Registry-Style Monorepo Installation -->
|
|
<div class="bg-gray-50 rounded-lg p-5 border border-gray-200 shadow-sm">
|
|
<h4 class="text-base font-bold text-gray-900 mb-3">
|
|
<i class="fas fa-folder-open mr-2 text-green-600"></i>Browse Plugin Registry
|
|
</h4>
|
|
<p class="text-xs text-gray-600 mb-3">Load a registry-style monorepo (like the official ledmatrix-plugins repo) to browse and install plugins</p>
|
|
<div class="flex gap-2 mb-2">
|
|
<input type="text" id="github-registry-url"
|
|
placeholder="https://github.com/user/ledmatrix-plugins"
|
|
class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
|
|
<button id="load-registry-from-url" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm rounded-md whitespace-nowrap">
|
|
<i class="fas fa-search mr-2"></i>Load Registry
|
|
</button>
|
|
</div>
|
|
<div class="flex gap-2 mb-3">
|
|
<button id="save-registry-url" class="px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-md whitespace-nowrap">
|
|
<i class="fas fa-bookmark mr-2"></i>Save Repository
|
|
</button>
|
|
<div id="registry-status" class="flex-1 text-sm"></div>
|
|
</div>
|
|
<div id="custom-registry-plugins" class="hidden">
|
|
<div class="border-t border-gray-300 pt-3 mt-3">
|
|
<p class="text-xs font-medium text-gray-700 mb-2">Available Plugins:</p>
|
|
<div id="custom-registry-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
<!-- Custom registry plugins will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Plugin Configuration Modal -->
|
|
<div id="plugin-config-modal" class="fixed inset-0 modal-backdrop flex items-center justify-center z-50" style="display: none;">
|
|
<div class="modal-content p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 id="plugin-config-title" class="text-lg font-semibold">Plugin Configuration</h3>
|
|
<div class="flex items-center space-x-2">
|
|
<!-- View Toggle -->
|
|
<div class="flex items-center bg-gray-100 rounded-lg p-1">
|
|
<button id="view-toggle-form" class="view-toggle-btn active px-3 py-1 rounded text-sm font-medium transition-colors" data-view="form">
|
|
<i class="fas fa-list mr-1"></i>Form
|
|
</button>
|
|
<button id="view-toggle-json" class="view-toggle-btn px-3 py-1 rounded text-sm font-medium transition-colors" data-view="json">
|
|
<i class="fas fa-code mr-1"></i>JSON
|
|
</button>
|
|
</div>
|
|
<!-- Reset Button -->
|
|
<button id="reset-to-defaults-btn" class="px-3 py-1 text-sm bg-yellow-500 hover:bg-yellow-600 text-white rounded transition-colors" title="Reset to defaults">
|
|
<i class="fas fa-undo mr-1"></i>Reset
|
|
</button>
|
|
<button id="close-plugin-config" class="text-gray-400 hover:text-gray-600">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Validation Errors Display -->
|
|
<div id="plugin-config-validation-errors" class="hidden mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
|
|
<div class="flex items-start">
|
|
<i class="fas fa-exclamation-circle text-red-600 mt-0.5 mr-2"></i>
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium text-red-800 mb-2">Configuration Validation Errors</p>
|
|
<ul id="validation-errors-list" class="text-sm text-red-700 list-disc list-inside space-y-1"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Form View -->
|
|
<div id="plugin-config-form-view" class="plugin-config-view">
|
|
<div id="plugin-config-content">
|
|
<!-- Plugin config form will be loaded here -->
|
|
</div>
|
|
</div>
|
|
<!-- JSON Editor View -->
|
|
<div id="plugin-config-json-view" class="plugin-config-view hidden">
|
|
<div class="mb-2">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Configuration JSON</label>
|
|
<textarea id="plugin-config-json-editor" class="w-full border border-gray-300 rounded-md font-mono text-sm" rows="20"></textarea>
|
|
</div>
|
|
<div class="flex justify-end space-x-2 pt-2 border-t border-gray-200">
|
|
<button type="button" onclick="closePluginConfigModal()" class="btn bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md">
|
|
Cancel
|
|
</button>
|
|
<button type="button" id="save-json-config-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
|
|
<i class="fas fa-save mr-2"></i>Save Configuration
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- On-Demand Modal moved to base.html so it's always available -->
|
|
|
|
<style>
|
|
/* View toggle button styles */
|
|
.view-toggle-btn {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.view-toggle-btn.active {
|
|
background-color: #2563eb;
|
|
color: white;
|
|
}
|
|
|
|
.view-toggle-btn:not(.active) {
|
|
color: #374151;
|
|
}
|
|
|
|
.view-toggle-btn:not(.active):hover {
|
|
background-color: #e5e7eb;
|
|
}
|
|
|
|
/* CodeMirror editor styles */
|
|
.CodeMirror {
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 0.375rem;
|
|
font-size: 14px;
|
|
height: auto;
|
|
min-height: 400px;
|
|
}
|
|
|
|
.CodeMirror.cm-error {
|
|
border-color: #ef4444;
|
|
}
|
|
|
|
/* Plugin config view styles */
|
|
.plugin-config-view {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
/* Nested config section styles */
|
|
.nested-section {
|
|
position: relative;
|
|
margin-bottom: 1.5rem;
|
|
transition: all 0.2s ease;
|
|
z-index: 1;
|
|
clear: both;
|
|
/* Contain content but allow expansion */
|
|
overflow: visible;
|
|
/* Ensure proper stacking context */
|
|
isolation: isolate;
|
|
}
|
|
|
|
.nested-section button {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.nested-section button:hover {
|
|
background-color: #f3f4f6;
|
|
}
|
|
|
|
.nested-section .nested-content {
|
|
position: relative;
|
|
transition: max-height 0.3s ease, opacity 0.3s ease;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
/* Ensure content doesn't get clipped by parent */
|
|
min-height: 0;
|
|
/* Contain content properly */
|
|
contain: layout style;
|
|
}
|
|
|
|
/* When expanded, allow content to flow naturally */
|
|
.nested-content.expanded {
|
|
overflow: visible;
|
|
/* Ensure expanded content is fully visible */
|
|
min-height: auto;
|
|
}
|
|
|
|
.nested-section i {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
/* Smooth toggle animation */
|
|
.nested-content.collapsed {
|
|
opacity: 0;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nested-content.expanded {
|
|
opacity: 1;
|
|
max-height: none !important; /* Remove height constraint to allow natural expansion */
|
|
padding-bottom: 1rem !important; /* Ensure proper padding at bottom to prevent cutoff */
|
|
overflow: visible; /* Allow content to flow naturally when expanded */
|
|
margin-bottom: 0.5rem; /* Add spacing at bottom when expanded */
|
|
}
|
|
|
|
/* Nested sections within nested sections - add indentation and spacing */
|
|
.nested-content .nested-section {
|
|
margin-left: 1rem;
|
|
margin-bottom: 1.5rem; /* Increased spacing to prevent overlap */
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* Deeply nested sections need even more spacing */
|
|
.nested-content .nested-content .nested-section {
|
|
margin-bottom: 2rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* Form group spacing within nested sections */
|
|
.nested-content .form-group {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* Ensure form-groups that come after nested sections have proper spacing */
|
|
.nested-section + .form-group {
|
|
margin-top: 1.5rem !important;
|
|
position: relative;
|
|
z-index: 0;
|
|
clear: both;
|
|
/* Ensure form-group doesn't overlap */
|
|
display: block;
|
|
width: 100%;
|
|
/* Ensure it's in normal document flow */
|
|
float: none;
|
|
}
|
|
|
|
/* Ensure any content after nested sections is properly spaced */
|
|
.nested-section ~ .form-group {
|
|
clear: both !important;
|
|
position: relative;
|
|
z-index: 0;
|
|
display: block;
|
|
/* Prevent overlap */
|
|
margin-top: 1.5rem !important;
|
|
width: 100%;
|
|
float: none;
|
|
}
|
|
|
|
/* Make nested section headers slightly smaller for hierarchy */
|
|
.nested-content .nested-section h4 {
|
|
font-size: 0.95em;
|
|
}
|
|
</style>
|
|
|