feat(app/web): order plugins by category [skip ci]

source/app/web/instance.mjs

@@ -84,7 +84,7 @@ export default async function({mock, nosettings} = {}) {
       .map(([key, value]) => [key, Object.fromEntries(Object.entries(value).filter(([key]) => ["name", "icon", "category", "web", "supports", "scopes"].includes(key)))])
       .map(([key, value]) => [key, key === "core" ? {...value, web:Object.fromEntries(Object.entries(value.web).filter(([key]) => /^config[.]/.test(key)).map(([key, value]) => [key.replace(/^config[.]/, ""), value]))} : value]),
   )
-  const enabled = Object.entries(metadata).filter(([_name, {category}]) => category !== "core").map(([name]) => ({name, enabled:plugins[name]?.enabled ?? false}))
+  const enabled = Object.entries(metadata).filter(([_name, {category}]) => category !== "core").map(([name]) => ({name, category:metadata[name]?.category ?? "community", enabled:plugins[name]?.enabled ?? false}))
   const templates = Object.entries(Templates).map(([name]) => ({name, enabled:(conf.settings.templates.enabled.length ? conf.settings.templates.enabled.includes(name) : true) ?? false}))
   const actions = {flush:new Map()}
   let requests = {limit:0, used:0, remaining:0, reset:NaN}

source/app/web/statics/app.js

@@ -32,6 +32,8 @@
         (async () => {
           const { data: plugins } = await axios.get("/.plugins")
           this.plugins.list = plugins.filter(({name}) => metadata[name]?.supports.includes("user") || metadata[name]?.supports.includes("organization"))
+          const categories = [...new Set(this.plugins.list.map(({category}) => category))]
+          this.plugins.categories = Object.fromEntries(categories.map(category => [category, this.plugins.list.filter(value => category === value.category)]))
         })(),
         //Base
         (async () => {
@@ -94,6 +96,7 @@
       plugins: {
         base: {},
         list: [],
+        categories: [],
         enabled: {},
         descriptions: {
           base: "🗃️ Base content",

source/app/web/statics/index.html

@@ -83,12 +83,17 @@
               </label>
             </div>
 
-            <div class="configuration" v-if="plugins.list.length">
+            <div class="configuration plugins" v-if="plugins.list.length">
               <b>🧩 Additional plugins</b>
-              <label v-for="plugin in plugins.list" :key="plugin" :class="{'not-available':!plugin.enabled}" :title="!plugin.enabled ? 'This plugin is not enabled on web instance, use it with GitHub actions !' : ''">
-                <input type="checkbox" v-model="plugins.enabled[plugin.name]" @change="mock" :disabled="generated.pending">
-                {{ plugins.descriptions[plugin.name] || plugin.name }}
-              </label>
+              <template v-for="(category, name) in plugins.categories" :key="category">
+                <details open>
+                  <summary>{{ name }}</summary>
+                  <label v-for="plugin in category" :class="{'not-available':!plugin.enabled}" :title="!plugin.enabled ? 'This plugin is not enabled on web instance, use it with GitHub actions !' : ''">
+                    <input type="checkbox" v-model="plugins.enabled[plugin.name]" @change="mock" :disabled="generated.pending">
+                    <div>{{ plugins.descriptions[plugin.name] || plugin.name }}</div>
+                  </label>
+                </details>
+              </template>
             </div>
 
             <div class="configuration" v-if="configure">

source/app/web/statics/style.css

@@ -126,10 +126,25 @@
     border-top: 1px solid var(--color-border-primary);
   }
 
+  .configuration.plugins label {
+    display: flex;
+    align-items: flex-start;
+  }
+
   .configuration .not-available {
     color: var(--color-text-secondary);
   }
 
+  .configuration details {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .configuration summary {
+    font-weight: bold;
+    text-transform: capitalize;
+  }
+
   .option {
     display: flex;
     flex-direction: column;