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

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;