marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-02-10 05:23:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: refresh community plugins page

Browse source
This commit is contained in:
Marco Allegretti 2026-01-29 17:52:30 +01:00
parent bc3440cdef
commit 5937a0fc54
1 changed files with 71 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

166
frontend/src/pages/communities/[slug]/plugins.astro
View file

@ -6,17 +6,21 @@ const { slug } = Astro.params;
---
<Layout title="Community Plugins">
<section class="plugins-page">
<div class="page-header">
<section class="ui-page">
<div class="ui-container">
<div class="hero ui-card ui-card-glass">
<div class="hero-top">
<div>
<h1>Plugins</h1>
<p class="subtitle">Manage plugins for this community</p>
<h1 class="hero-title">Plugins</h1>
<p class="hero-subtitle">Manage plugins for this community</p>
</div>
<a class="ui-btn ui-btn-secondary" href={`/communities/${slug}`}>Back</a>
</div>
<a class="btn-secondary" href={`/communities/${slug}`}>Back</a>
</div>
<div id="plugins-content">
<p class="loading">Loading...</p>
<div class="state-card ui-card"><p class="loading">Loading...</p></div>
</div>
</div>
</section>
</Layout>
@ -121,7 +125,7 @@ const { slug } = Astro.params;
<p class="settings-hint">No schema defined. Edit raw JSON:</p>
<textarea class="settings-json" spellcheck="false" data-name="${escapeHtml(pluginName)}">${escapeHtml(settingsText)}</textarea>
<div class="settings-actions">
<button class="btn-primary btn-save-json" data-name="${escapeHtml(pluginName)}">Save Settings</button>
<button class="ui-btn ui-btn-primary btn-save-json" data-name="${escapeHtml(pluginName)}">Save Settings</button>
<span class="status" id="status-${escapeHtml(pluginName)}"></span>
</div>
</div>
@ -136,7 +140,7 @@ const { slug } = Astro.params;
<form class="settings-form" data-plugin="${escapeHtml(pluginName)}">
${fields}
<div class="settings-actions">
<button type="submit" class="btn-primary">Save Settings</button>
<button type="submit" class="ui-btn ui-btn-primary">Save Settings</button>
<span class="status" id="status-${escapeHtml(pluginName)}"></span>
</div>
</form>
@ -160,10 +164,13 @@ const { slug } = Astro.params;
}
container.innerHTML = `
<div class="community-badge">
<div class="community-badge ui-card">
<div class="community-badge-title">
<span class="name">${escapeHtml(community.name)}</span>
<span class="slug">/${escapeHtml(community.slug)}</span>
</div>
<div class="community-badge-subtitle">Community plugin settings</div>
</div>
<div class="plugins-list">
${plugins.map(p => {
@ -174,13 +181,13 @@ const { slug } = Astro.params;
const hasSchema = p.settings_schema && p.settings_schema.properties;
return `
<div class="plugin-card" data-name="${escapeHtml(p.name)}">
<div class="plugin-card ui-card" data-name="${escapeHtml(p.name)}">
<div class="plugin-head">
<div class="plugin-title">
<h3>${escapeHtml(p.name)}</h3>
<span class="version">v${escapeHtml(p.version)}</span>
${isCore ? `<span class="badge core">core</span>` : ''}
${disabledGlobally ? `<span class="badge disabled">disabled globally</span>` : ''}
${isCore ? `<span class="ui-pill tag-core">core</span>` : ''}
${disabledGlobally ? `<span class="ui-pill tag-disabled">disabled globally</span>` : ''}
</div>
<div class="plugin-controls">
@ -193,9 +200,12 @@ const { slug } = Astro.params;
${p.description ? `<p class="desc">${escapeHtml(p.description)}</p>` : ''}
<details class="settings">
<summary>Settings ${hasSchema ? '' : '<span class="schema-badge">JSON</span>'}</summary>
<div class="settings-body-wrap">
<details class="panel ui-card settings-panel">
<summary class="panel-summary">
<span class="panel-title">Settings</span>
<span class="panel-meta">${hasSchema ? 'Schema' : '<span class="ui-badge">JSON</span>'}</span>
</summary>
<div class="panel-body settings-body-wrap">
${renderSettingsForm(p.name, p.settings_schema, p.settings)}
</div>
</details>
@ -362,32 +372,51 @@ const { slug } = Astro.params;
</script>
<style>
.plugins-page {
padding: 2rem 0;
.hero {
padding: 1.25rem;
margin-bottom: 1rem;
}
.page-header {
.hero-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
h1 {
font-size: 2.25rem;
margin-bottom: 0.25rem;
.hero-title {
margin: 0;
font-size: 2.125rem;
letter-spacing: -0.02em;
}
.subtitle {
.hero-subtitle {
margin: 0.25rem 0 0;
color: var(--color-text-muted);
}
.state-card {
padding: 2.25rem 1.5rem;
text-align: center;
}
.community-badge {
padding: 1rem 1.1rem;
margin-bottom: 1.5rem;
}
.community-badge-title {
display: flex;
gap: 0.75rem;
align-items: baseline;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.community-badge-subtitle {
margin-top: 0.35rem;
color: var(--color-text-muted);
font-size: 0.875rem;
}
.community-badge .name {
@ -406,9 +435,6 @@ const { slug } = Astro.params;
}
.plugin-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 1rem;
}
@ -436,22 +462,14 @@ const { slug } = Astro.params;
font-family: monospace;
}
.badge {
font-size: 0.75rem;
border: 1px solid var(--color-border);
padding: 0.15rem 0.5rem;
border-radius: 999px;
color: var(--color-text-muted);
}
.badge.core {
.tag-core {
background: var(--color-info-muted);
color: var(--color-info);
border-color: var(--color-info-muted);
}
.badge.disabled {
.tag-disabled {
background: var(--color-error-muted);
color: var(--color-error);
border-color: var(--color-error-muted);
}
.desc {
@ -459,17 +477,8 @@ const { slug } = Astro.params;
margin-bottom: 0.75rem;
}
details.settings {
border-top: 1px solid var(--color-border);
padding-top: 0.75rem;
}
details.settings summary {
cursor: pointer;
user-select: none;
color: var(--color-text);
font-weight: 600;
margin-bottom: 0.75rem;
.settings-panel {
margin-top: 0.75rem;
}
.settings-body {
@ -495,6 +504,7 @@ const { slug } = Astro.params;
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.status {
@ -502,41 +512,6 @@ const { slug } = Astro.params;
font-size: 0.9rem;
}
.btn-primary, .btn-secondary {
padding: 0.6rem 1rem;
border-radius: 8px;
font-weight: 600;
display: inline-block;
}
.btn-primary {
background: var(--color-primary);
color: var(--color-on-primary);
border: none;
cursor: pointer;
}
.btn-primary:hover {
background: var(--color-primary-hover);
color: var(--color-on-primary);
}
.btn-primary:disabled {
opacity: 0.7;
cursor: default;
}
.btn-secondary {
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-text);
}
.btn-secondary:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.switch {
position: relative;
display: inline-block;
@ -622,12 +597,7 @@ const { slug } = Astro.params;
.schema-field input[type="text"],
.schema-field input[type="number"],
.schema-field select {
padding: 0.6rem 0.75rem;
border-radius: 8px;
border: 1px solid var(--color-border);
background: var(--color-field-bg);
color: var(--color-text);
font-size: 0.9rem;
border-radius: var(--radius-md);
}
.schema-field input[type="text"]:focus,
@ -662,13 +632,9 @@ const { slug } = Astro.params;
margin-bottom: 0.5rem;
}
.schema-badge {
font-size: 0.7rem;
background: var(--color-primary-muted);
color: var(--color-primary);
padding: 0.1rem 0.4rem;
border-radius: 4px;
margin-left: 0.5rem;
vertical-align: middle;
@media (max-width: 768px) {
.plugin-head {
flex-direction: column;
}
}
</style>