FabledSteward/fabledscryer/templates/settings/_catalog_partial.html

{# settings/_catalog_partial.html — HTMX partial for plugin catalog #}
<div id="plugin-catalog">

  {% if error %}
  <div style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0.75rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;margin-bottom:0.75rem;">
    {{ error }}
  </div>
  {% endif %}

  {% if catalog %}
  <div style="display:grid;gap:0.75rem;">
    {% for plugin in catalog %}
    {% set is_installed = plugin.name in installed_names %}
    {% set is_loaded = plugin.name in loaded_names %}
    <div class="card" style="margin-bottom:0;padding:1rem 1.25rem;">
      <div style="display:flex;align-items:flex-start;gap:1rem;">
        <div style="flex:1;min-width:0;">
          <div style="display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;">
            <span style="font-weight:600;color:var(--text);font-size:0.9rem;">{{ plugin.name }}</span>
            <span style="font-size:0.75rem;color:var(--text-muted);">v{{ plugin.version }}</span>
            {% if is_loaded %}
            <span class="badge badge-green" style="font-size:0.68rem;">Active</span>
            {% elif is_installed %}
            <span class="badge" style="background:var(--bg-elevated);color:var(--text-muted);font-size:0.68rem;">Installed</span>
            {% endif %}
            {% for tag in plugin.tags %}
            <span style="font-size:0.68rem;padding:0.1em 0.4em;background:var(--bg-elevated);color:var(--text-muted);border-radius:3px;">{{ tag }}</span>
            {% endfor %}
          </div>
          {% if plugin.description %}
          <div style="font-size:0.82rem;color:var(--text-muted);margin-top:0.25rem;">{{ plugin.description }}</div>
          {% endif %}
          <div style="font-size:0.75rem;color:var(--text-dim);margin-top:0.15rem;display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap;">
            {% if plugin.author %}<span>by {{ plugin.author }}</span>{% endif %}
            {% if plugin.license %}<span style="color:var(--text-muted);">{{ plugin.license }}</span>{% endif %}
            {% if plugin.min_app_version %}<span style="color:var(--text-muted);">requires v{{ plugin.min_app_version }}+</span>{% endif %}
          </div>
        </div>

        <div style="display:flex;gap:0.5rem;flex-shrink:0;align-items:center;">
          {% if plugin.homepage %}
          <a href="{{ plugin.homepage }}" target="_blank" rel="noopener"
             class="btn btn-ghost btn-sm" style="font-size:0.78rem;">Docs</a>
          {% elif plugin.repository_url %}
          <a href="{{ plugin.repository_url }}" target="_blank" rel="noopener"
             class="btn btn-ghost btn-sm" style="font-size:0.78rem;">Source</a>
          {% endif %}

          {% if is_loaded %}
          {# Already active — update available if versions differ #}
          <form method="post"
                action="/settings/plugins/install/{{ plugin.name }}"
                hx-post="/settings/plugins/install/{{ plugin.name }}"
                hx-target="#catalog-result-{{ plugin.name }}"
                hx-swap="outerHTML"
                style="margin:0;">
            <input type="hidden" name="download_url" value="{{ plugin.download_url }}">
            <input type="hidden" name="checksum_sha256" value="{{ plugin.checksum_sha256 }}">
            <button type="submit" class="btn btn-ghost btn-sm" style="font-size:0.78rem;">Update</button>
          </form>

          {% elif is_installed %}
          {# Installed but not active — offer hot-reload #}
          <form method="post"
                action="/settings/plugins/reload/{{ plugin.name }}"
                hx-post="/settings/plugins/reload/{{ plugin.name }}"
                hx-target="#catalog-result-{{ plugin.name }}"
                hx-swap="outerHTML"
                style="margin:0;">
            <button type="submit" class="btn btn-sm" style="font-size:0.78rem;">Activate</button>
          </form>

          {% else %}
          {# Not installed — offer install #}
          <form method="post"
                action="/settings/plugins/install/{{ plugin.name }}"
                hx-post="/settings/plugins/install/{{ plugin.name }}"
                hx-target="#catalog-result-{{ plugin.name }}"
                hx-swap="outerHTML"
                style="margin:0;">
            <input type="hidden" name="download_url" value="{{ plugin.download_url }}">
            <input type="hidden" name="checksum_sha256" value="{{ plugin.checksum_sha256 }}">
            <button type="submit" class="btn btn-sm" style="font-size:0.78rem;">Install</button>
          </form>
          {% endif %}
        </div>
      </div>

      {# Inline result placeholder — replaced by _install_result.html after action #}
      <div id="catalog-result-{{ plugin.name }}"></div>
    </div>
    {% endfor %}
  </div>
  {% elif not error %}
  <div style="color:var(--text-muted);font-size:0.85rem;">No plugins found in catalog.</div>
  {% endif %}

</div>