marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-02-09 21:13: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

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

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