From 06bb22f45d526c33231a4be0904d4c00e016c30c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 24 Apr 2023 18:05:07 +0200
Subject: [PATCH 001/275] args: reflect pydantic `visible` changes

---
 app/src/helpers/yunohostArguments.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/src/helpers/yunohostArguments.js b/app/src/helpers/yunohostArguments.js
index 641ae3769..4bfe37abf 100644
--- a/app/src/helpers/yunohostArguments.js
+++ b/app/src/helpers/yunohostArguments.js
@@ -131,7 +131,7 @@ export function formatYunoHostArgument(arg) {
   arg.ask = formatI18nField(arg.ask)
   const field = {
     is: arg.readonly ? 'ReadOnlyField' : 'FormField',
-    visible: [undefined, true, '"true"'].includes(arg.visible),
+    visible: arg.visible,
     props: {
       label: arg.ask,
       component: undefined,
@@ -433,12 +433,12 @@ export function formatYunoHostConfigPanels(data) {
       const section = {
         id: _section.id,
         isActionSection: _section.is_action_section,
-        visible: [undefined, true, '"true"'].includes(_section.visible),
+        visible: _section.visible
       }
       if (_section.help) section.help = formatI18nField(_section.help)
       if (_section.name) section.name = formatI18nField(_section.name)
-      if (_section.visible && ![false, '"false"'].includes(_section.visible)) {
-        addEvaluationGetter('visible', section, _section.visible, result.forms)
+      if (typeof _section.visible === "string") {
+        addEvaluationGetter('visible', section, section.visible, result.forms)
       }
 
       const { form, fields, validations, errors } = formatYunoHostArguments(

From 60934cf77287607649b8690599b5118a120ee2e5 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 24 Apr 2023 18:06:32 +0200
Subject: [PATCH 002/275] args: remove `current_value` and remove the need for
 int parsing for option prop min + max

---
 app/src/helpers/yunohostArguments.js | 27 ++++++++++-----------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/app/src/helpers/yunohostArguments.js b/app/src/helpers/yunohostArguments.js
index 4bfe37abf..0d79520a4 100644
--- a/app/src/helpers/yunohostArguments.js
+++ b/app/src/helpers/yunohostArguments.js
@@ -120,12 +120,7 @@ function addEvaluationGetter(prop, obj, expr, ctx, nested) {
  * @return {Object} an formated argument containing formItem props, validation and base value.
  */
 export function formatYunoHostArgument(arg) {
-  let value =
-    arg.value !== undefined
-      ? arg.value
-      : arg.current_value !== undefined
-        ? arg.current_value
-        : null
+  let value = arg.value !== undefined ? arg.value : null
   const validation = {}
   const error = { message: null }
   arg.ask = formatI18nField(arg.ask)
@@ -168,11 +163,11 @@ export function formatYunoHostArgument(arg) {
       name: 'InputItem',
       props: defaultProps.concat(['type', 'min', 'max', 'step']),
       callback: function () {
-        if (!isNaN(parseInt(arg.min))) {
-          validation.minValue = validators.minValue(parseInt(arg.min))
+        if (arg.min !== undefined) {
+          validation.minValue = validators.minValue(arg.min)
         }
-        if (!isNaN(parseInt(arg.max))) {
-          validation.maxValue = validators.maxValue(parseInt(arg.max))
+        if (arg.max !== undefined) {
+          validation.maxValue = validators.maxValue(arg.max)
         }
         validation.numValue = validators.integer
       },
@@ -277,11 +272,12 @@ export function formatYunoHostArgument(arg) {
   ]
 
   // Default type management if no one is filled
-  if (arg.choices && arg.choices.length) {
-    arg.type = 'select'
-  }
   if (arg.type === undefined) {
-    arg.type = 'string'
+    if (arg.choices && arg.choices.length) {
+      arg.type = 'select'
+    } else {
+      arg.type = 'string'
+    }
   }
 
   // Search the component bind to the type
@@ -328,9 +324,6 @@ export function formatYunoHostArgument(arg) {
   }
 
   // Default value if still `null`
-  if (value === null && arg.current_value) {
-    value = arg.current_value
-  }
   if (value === null && arg.default) {
     value = arg.default
   }

From 9dd29dff18249bf806b831f38b5c263d9b7e78d6 Mon Sep 17 00:00:00 2001
From: Tagadda <36127788+Tagadda@users.noreply.github.com>
Date: Fri, 12 May 2023 16:21:06 +0000
Subject: [PATCH 003/275] Update changelog for 12.0.0

---
 debian/changelog | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/debian/changelog b/debian/changelog
index 452e1921e..dc646f7f9 100644
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,3 +1,9 @@
+yunohost (12.0.0) unstable; urgency=low
+
+  - Tmp changelog to prepare Bookworm
+
+ -- Tagada <tagada@cant.at>  Fri, 12 May 2023 16:20:28 +0000
+ 
 yunohost-admin (11.2.4.1) stable; urgency=low
 
   - [i18n] Translations updated for Arabic, Basque, Catalan, Chinese (Simplified), English, French, Galician, German, Italian, Kabyle, Korean, Occitan, Spanish, Ukrainian

From 8db7691fe2546162f13b4be6942d896600b1252d Mon Sep 17 00:00:00 2001
From: Tagadda <36127788+Tagadda@users.noreply.github.com>
Date: Fri, 12 May 2023 16:46:33 +0000
Subject: [PATCH 004/275] s/bullseye/bookworm

---
 debian/rules | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/debian/rules b/debian/rules
index 02aeba18b..f34fca5c1 100755
--- a/debian/rules
+++ b/debian/rules
@@ -17,7 +17,7 @@ TMPDIR = $$(pwd)/debian/yunohost-admin
 override_dh_auto_build:
 	/usr/bin/curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | gpg --dearmor | tee /usr/share/keyrings/nodesource.gpg >/dev/null
 	/usr/bin/curl -s https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor | tee /etc/apt/trusted.gpg.d/yarn.gpg >/dev/null
-	echo 'deb [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_14.x bullseye main' > /etc/apt/sources.list.d/nodesource.list
+	echo 'deb [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_14.x bookworm main' > /etc/apt/sources.list.d/nodesource.list
 	echo "deb [signed-by=/etc/apt/trusted.gpg.d/yarn.gpg] https://dl.yarnpkg.com/debian/ stable main" > /etc/apt/sources.list.d/yarn.list
 	/usr/bin/apt update
 	/usr/bin/apt install nodejs yarn -y

From 1d892350cd90e6956645325f62300d05bdc4f12d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 29 Dec 2023 17:53:53 +0100
Subject: [PATCH 005/275] do not logout when trying to reconnect to the server
 since the session should still be valid

---
 app/src/api/api.js                              |  6 +++---
 app/src/i18n/locales/en.json                    |  2 +-
 app/src/store/info.js                           |  3 +--
 app/src/views/_partials/ReconnectingDisplay.vue | 14 +++++++++-----
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/app/src/api/api.js b/app/src/api/api.js
index daeb56b03..e7c8e0614 100644
--- a/app/src/api/api.js
+++ b/app/src/api/api.js
@@ -217,12 +217,12 @@ export default {
       const api = this
 
       function reconnect(n) {
-        api
-          .get('logout', {}, { key: 'reconnecting' })
+        store
+          .dispatch('GET_YUNOHOST_INFOS')
           .then(resolve)
           .catch((err) => {
             if (err.name === 'APIUnauthorizedError') {
-              resolve()
+              reject(err)
             } else if (n < 1) {
               reject(err)
             } else {
diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index 3e476204d..d32f28b20 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -31,7 +31,7 @@
                 "unknown": "Connection with the server has been closed for unknown reasons.",
                 "upgrade_system": "Connection with the server has been closed due to YunoHost upgrade. Waiting for the server to be reachable again…"
             },
-            "success": "The server is now reachable! You can try to login",
+            "session_expired": "The server is now reachable! But it looks like your session expired, please login.",
             "title": "Trying to communicate with the server…"
         }
     },
diff --git a/app/src/store/info.js b/app/src/store/info.js
index 9bed6a85f..5bc5ce3f4 100644
--- a/app/src/store/info.js
+++ b/app/src/store/info.js
@@ -179,10 +179,9 @@ export default {
       return api.get('logout')
     },
 
-    TRY_TO_RECONNECT({ commit, dispatch }, args = {}) {
+    TRY_TO_RECONNECT({ commit }, args = {}) {
       // FIXME This is very ugly arguments forwarding, will use proper component way of doing this when switching to Vue 3 (teleport)
       commit('SET_RECONNECTING', args)
-      dispatch('RESET_CONNECTED')
     },
 
     GET_YUNOHOST_INFOS({ commit }) {
diff --git a/app/src/views/_partials/ReconnectingDisplay.vue b/app/src/views/_partials/ReconnectingDisplay.vue
index 5d33778ab..65e94c4a4 100644
--- a/app/src/views/_partials/ReconnectingDisplay.vue
+++ b/app/src/views/_partials/ReconnectingDisplay.vue
@@ -28,8 +28,8 @@
       </div>
     </template>
 
-    <template v-if="status === 'success'">
-      <BAlert variant="success" v-t="'api.reconnecting.success'" />
+    <template v-if="status === 'expired'">
+      <BAlert variant="success" v-t="'api.reconnecting.session_expired'" />
 
       <LoginView force-reload />
     </template>
@@ -66,10 +66,14 @@ export default {
       api
         .tryToReconnect({ ...this.reconnecting, initialDelay })
         .then(() => {
-          this.status = 'success'
+          this.$store.commit('SET_RECONNECTING', null)
         })
-        .catch(() => {
-          this.status = 'failed'
+        .catch((err) => {
+          if (err.name === 'APIUnauthorizedError') {
+            this.status = 'expired'
+          } else {
+            this.status = 'failed'
+          }
         })
     },
   },

From cbea05fa9b23b1e03309602665182d6b2cbf8112 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 20:22:19 +0100
Subject: [PATCH 006/275] lint

---
 app/src/helpers/yunohostArguments.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/helpers/yunohostArguments.js b/app/src/helpers/yunohostArguments.js
index 0d79520a4..ece0a1fc6 100644
--- a/app/src/helpers/yunohostArguments.js
+++ b/app/src/helpers/yunohostArguments.js
@@ -426,11 +426,11 @@ export function formatYunoHostConfigPanels(data) {
       const section = {
         id: _section.id,
         isActionSection: _section.is_action_section,
-        visible: _section.visible
+        visible: _section.visible,
       }
       if (_section.help) section.help = formatI18nField(_section.help)
       if (_section.name) section.name = formatI18nField(_section.name)
-      if (typeof _section.visible === "string") {
+      if (typeof _section.visible === 'string') {
         addEvaluationGetter('visible', section, section.visible, result.forms)
       }
 

From f66a59df580eb3448f39831661b8fd05dc3f453a Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 3 Mar 2024 18:08:10 +0100
Subject: [PATCH 007/275] refactor: upgrade to vue3 with compat mode 2

---
 app/package.json   |  7 ++++---
 app/src/main.js    | 37 ++++++++++++++++++++++---------------
 app/vite.config.js | 15 +++++++++++++--
 3 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/app/package.json b/app/package.json
index 9fc872c67..a68da12fe 100644
--- a/app/package.json
+++ b/app/package.json
@@ -15,11 +15,12 @@
   "dependencies": {
     "@fontsource/fira-code": "^4.5.13",
     "@fontsource/firago": "^4.5.3",
+    "@vue/compat": "3.3.4",
     "bootstrap-vue": "^2.22.0",
     "date-fns": "^2.29.3",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
-    "vue": "^2.7.14",
+    "vue": "3.3.4",
     "vue-i18n": "^8.28.2",
     "vue-router": "^3.6.5",
     "vue-showdown": "^2.4.1",
@@ -27,12 +28,12 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue2": "^2.2.0",
+    "@vitejs/plugin-vue": "^5.0.4",
     "bootstrap": "^4.6.0",
     "eslint": "^8.36.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.10.0",
+    "eslint-plugin-vue": "^9.22.0",
     "popper.js": "^1.16.0",
     "portal-vue": "^2.1.7",
     "prettier": "^3.2.5",
diff --git a/app/src/main.js b/app/src/main.js
index 7230e309d..e0d35cecd 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { createApp, configureCompat } from 'vue'
 import App from './App.vue'
 import BootstrapVue from 'bootstrap-vue'
 import VueShowdown from 'vue-showdown'
@@ -10,16 +10,26 @@ import i18n from './i18n'
 import { registerGlobalErrorHandlers } from './api'
 import { initDefaultLocales } from './i18n/helpers'
 
-Vue.config.productionTip = false
+const app = createApp({
+  ...App,
+})
+
+app.use(store)
+app.use(router)
+app.use(i18n)
+
+configureCompat({
+  MODE: 2,
+})
 
 // Styles are imported in `src/App.vue` <style>
-Vue.use(BootstrapVue, {
+app.use(BootstrapVue, {
   BSkeleton: { animation: 'none' },
   BAlert: { show: true },
   BBadge: { pill: true },
 })
 
-Vue.use(VueShowdown, {
+app.use(VueShowdown, {
   options: {
     emoji: true,
   },
@@ -27,7 +37,7 @@ Vue.use(VueShowdown, {
 
 // Ugly wrapper for `$bvModal.msgBoxConfirm` to set default i18n button titles
 // FIXME find or wait for a better way
-Vue.prototype.$askConfirmation = function (message, props) {
+app.config.globalProperties.$askConfirmation = function (message, props) {
   return this.$bvModal.msgBoxConfirm(message, {
     okTitle: this.$i18n.t('ok'),
     cancelTitle: this.$i18n.t('cancel'),
@@ -42,7 +52,11 @@ Vue.prototype.$askConfirmation = function (message, props) {
   })
 }
 
-Vue.prototype.$askMdConfirmation = function (markdown, props, ok = false) {
+app.config.globalProperties.$askMdConfirmation = function (
+  markdown,
+  props,
+  ok = false,
+) {
   const content = this.$createElement('vue-showdown', {
     props: { markdown, flavor: 'github', options: { headerLevelStart: 4 } },
   })
@@ -63,19 +77,12 @@ const globalComponentsModules = import.meta.glob(
 )
 Object.values(globalComponentsModules).forEach((module) => {
   const component = module.default
-  Vue.component(component.name, component)
+  app.component(component.name, component)
 })
 
 registerGlobalErrorHandlers()
 
 // Load default locales translations files and setup store data
 initDefaultLocales().then(() => {
-  const app = new Vue({
-    store,
-    router,
-    i18n,
-    render: (h) => h(App),
-  })
-
-  app.$mount('#app')
+  app.mount('#app')
 })
diff --git a/app/vite.config.js b/app/vite.config.js
index ec1ead654..ae7739956 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -1,7 +1,7 @@
 import { fileURLToPath, URL } from 'url'
 import { defineConfig, loadEnv } from 'vite'
 import fs from 'fs'
-import vue from '@vitejs/plugin-vue2'
+import createVuePlugin from '@vitejs/plugin-vue'
 
 export default defineConfig(({ command, mode }) => {
   // Load env file based on `mode` in the current working directory.
@@ -15,6 +15,7 @@ export default defineConfig(({ command, mode }) => {
     },
     resolve: {
       alias: [
+        { find: 'vue', replacement: '@vue/compat' },
         // this is required for the SCSS modules imports with `~` (node_modules)
         { find: /^~(.*)$/, replacement: '$1' },
         {
@@ -33,7 +34,17 @@ export default defineConfig(({ command, mode }) => {
         },
       },
     },
-    plugins: [vue()],
+    plugins: [
+      createVuePlugin({
+        template: {
+          compilerOptions: {
+            compatConfig: {
+              MODE: 2,
+            },
+          },
+        },
+      }),
+    ],
     build: {
       rollupOptions: {
         output: {

From 74e08afff9d78bd941b0014613d232c6157f4d10 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 03:26:54 +0100
Subject: [PATCH 008/275] refactor: upgrade to vue-router4

---
 app/package.json                    |  2 +-
 app/src/App.vue                     | 11 ++++++-----
 app/src/components/RoutableTabs.vue | 23 ++++++++++++-----------
 app/src/router/index.js             | 12 ++++--------
 4 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/app/package.json b/app/package.json
index a68da12fe..2ae083bb5 100644
--- a/app/package.json
+++ b/app/package.json
@@ -22,7 +22,7 @@
     "simple-evaluate": "^1.4.6",
     "vue": "3.3.4",
     "vue-i18n": "^8.28.2",
-    "vue-router": "^3.6.5",
+    "vue-router": "^4.3.0",
     "vue-showdown": "^2.4.1",
     "vuelidate": "^0.7.7",
     "vuex": "^3.6.2"
diff --git a/app/src/App.vue b/app/src/App.vue
index b45efeb98..c4da25557 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -6,7 +6,6 @@
         <BNavbarBrand
           :to="{ name: 'home' }"
           :disabled="waiting"
-          exact
           exact-active-class="active"
         >
           <span v-if="theme">
@@ -45,10 +44,12 @@
       <main id="main">
         <!-- The `key` on RouterView make sure that if a link points to a page that
         use the same component as the previous one, it will be refreshed -->
-        <Transition v-if="transitions" :name="transitionName">
-          <RouterView class="animated" :key="routerKey" />
-        </Transition>
-        <RouterView v-else class="static" :key="routerKey" />
+        <RouterView v-slot="{ Component }" :key="routerKey">
+          <Transition v-if="transitions" :name="transitionName">
+            <Component :is="Component" class="animated" />
+          </Transition>
+          <Component v-else :is="Component" class="static" />
+        </RouterView>
       </main>
     </ViewLockOverlay>
 
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index dfeff852b..651446241 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -6,7 +6,6 @@
           v-for="route in routes"
           :key="route.text"
           :to="route.to"
-          exact
           exact-active-class="active"
         >
           <YIcon v-if="route.icon" :iname="route.icon" />
@@ -16,16 +15,18 @@
     </BCardHeader>
 
     <!-- Bind extra props to the child view and forward child events to parent -->
-    <RouterView v-bind="$attrs" v-on="$listeners">
-      <template #tab-top>
-        <slot name="tab-top" />
-      </template>
-      <template #tab-before>
-        <slot name="tab-before" />
-      </template>
-      <template #tab-after>
-        <slot name="tab-after" />
-      </template>
+    <RouterView v-slot="{ Component }">
+      <Component v-bind="$attrs" v-on="$listeners" :is="Component">
+        <template #tab-top>
+          <slot name="tab-top" />
+        </template>
+        <template #tab-before>
+          <slot name="tab-before" />
+        </template>
+        <template #tab-after>
+          <slot name="tab-after" />
+        </template>
+      </Component>
     </RouterView>
   </BCard>
 </template>
diff --git a/app/src/router/index.js b/app/src/router/index.js
index dcb547344..8af04f874 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -1,13 +1,9 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import routes from './routes'
 import store from '@/store'
 
-Vue.use(VueRouter)
-
-const router = new VueRouter({
-  // mode: 'history', // this allow all routes to be real ones (without '#')
-  base: import.meta.env.BASE_URL,
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes,
 
   scrollBehavior(to, from, savedPosition) {
@@ -22,7 +18,7 @@ const router = new VueRouter({
         setTimeout(() => resolve(savedPosition), 0)
       })
     } else {
-      return savedPosition || { x: 0, y: 0 }
+      return savedPosition || { left: 0, top: 0 }
     }
   },
 })

From dd9ae21472a3f236c33ba5217c93f3d9136f7b49 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 03:28:55 +0100
Subject: [PATCH 009/275] refactor: upgrade to vuex4

---
 app/package.json       | 3 +--
 app/src/store/index.js | 7 ++-----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/package.json b/app/package.json
index 2ae083bb5..9a20cdf00 100644
--- a/app/package.json
+++ b/app/package.json
@@ -24,8 +24,7 @@
     "vue-i18n": "^8.28.2",
     "vue-router": "^4.3.0",
     "vue-showdown": "^2.4.1",
-    "vuelidate": "^0.7.7",
-    "vuex": "^3.6.2"
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
diff --git a/app/src/store/index.js b/app/src/store/index.js
index ea7adddfa..1aff80779 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -1,13 +1,10 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 
 import info from './info'
 import settings from './settings'
 import data from './data'
 
-Vue.use(Vuex)
-
-export default new Vuex.Store({
+export default createStore({
   state: settings.state,
   mutations: settings.mutations,
   actions: settings.actions,

From 81707bb11ac6f0cd70f7e386306476c4b335cf90 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 03:31:24 +0100
Subject: [PATCH 010/275] refactor: upgrade to i18n9

---
 app/package.json                     |  2 +-
 app/src/api/errors.js                | 12 +++--
 app/src/helpers/yunohostArguments.js |  6 +--
 app/src/i18n/helpers.js              | 69 ++++++++++++++++++----------
 app/src/i18n/index.js                | 11 ++---
 app/src/store/info.js                |  8 ++--
 app/src/store/settings.js            | 16 ++-----
 app/vite.config.js                   | 30 ++++++++++++
 8 files changed, 97 insertions(+), 57 deletions(-)

diff --git a/app/package.json b/app/package.json
index 9a20cdf00..17ce6d946 100644
--- a/app/package.json
+++ b/app/package.json
@@ -21,7 +21,7 @@
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
     "vue": "3.3.4",
-    "vue-i18n": "^8.28.2",
+    "vue-i18n": "^9.10.1",
     "vue-router": "^4.3.0",
     "vue-showdown": "^2.4.1",
     "vuex": "^4.1.0"
diff --git a/app/src/api/errors.js b/app/src/api/errors.js
index 066c02d80..af2f53174 100644
--- a/app/src/api/errors.js
+++ b/app/src/api/errors.js
@@ -10,7 +10,7 @@ class APIError extends Error {
     super(
       error
         ? error.replaceAll('\n', '<br>')
-        : i18n.t('error_server_unexpected'),
+        : i18n.global.t('error_server_unexpected'),
     )
     const urlObj = new URL(url)
     this.name = 'APIError'
@@ -39,7 +39,9 @@ class APIErrorLog extends APIError {
 // 0 — (means "the connexion has been closed" apparently)
 class APIConnexionError extends APIError {
   constructor(method, response) {
-    super(method, response, { error: i18n.t('error_connection_interrupted') })
+    super(method, response, {
+      error: i18n.global.t('error_connection_interrupted'),
+    })
     this.name = 'APIConnexionError'
   }
 }
@@ -57,7 +59,7 @@ class APIBadRequestError extends APIError {
 // 401 — Unauthorized
 class APIUnauthorizedError extends APIError {
   constructor(method, response, errorData) {
-    super(method, response, { error: i18n.t('unauthorized') })
+    super(method, response, { error: i18n.global.t('unauthorized') })
     this.name = 'APIUnauthorizedError'
   }
 }
@@ -65,7 +67,7 @@ class APIUnauthorizedError extends APIError {
 // 404 — Not Found
 class APINotFoundError extends APIError {
   constructor(method, response, errorData) {
-    errorData.error = i18n.t('api_not_found')
+    errorData.error = i18n.global.t('api_not_found')
     super(method, response, errorData)
     this.name = 'APINotFoundError'
   }
@@ -83,7 +85,7 @@ class APIInternalError extends APIError {
 // 502 — Bad gateway (means API is down)
 class APINotRespondingError extends APIError {
   constructor(method, response) {
-    super(method, response, { error: i18n.t('api_not_responding') })
+    super(method, response, { error: i18n.global.t('api_not_responding') })
     this.name = 'APINotRespondingError'
   }
 }
diff --git a/app/src/helpers/yunohostArguments.js b/app/src/helpers/yunohostArguments.js
index ece0a1fc6..bba66f7f4 100644
--- a/app/src/helpers/yunohostArguments.js
+++ b/app/src/helpers/yunohostArguments.js
@@ -152,7 +152,7 @@ export function formatYunoHostArgument(arg) {
       props: defaultProps.concat(['type', 'autocomplete', 'trim']),
       callback: function () {
         if (!arg.help) {
-          arg.help = i18n.t('good_practices_about_admin_password')
+          arg.help = i18n.global.t('good_practices_about_admin_password')
         }
         arg.example = '••••••••••••'
         validation.passwordLenght = validators.minLength(8)
@@ -180,7 +180,7 @@ export function formatYunoHostArgument(arg) {
         if (arg.type !== 'select') {
           field.props.link = {
             name: arg.type + '-list',
-            text: i18n.t(`manage_${arg.type}s`),
+            text: i18n.global.t(`manage_${arg.type}s`),
           }
         }
       },
@@ -337,7 +337,7 @@ export function formatYunoHostArgument(arg) {
   if (arg.helpLink) {
     field.props.link = {
       href: arg.helpLink.href,
-      text: i18n.t(arg.helpLink.text),
+      text: i18n.global.t(arg.helpLink.text),
     }
   }
 
diff --git a/app/src/i18n/helpers.js b/app/src/i18n/helpers.js
index cd0b71172..1899f1cac 100644
--- a/app/src/i18n/helpers.js
+++ b/app/src/i18n/helpers.js
@@ -1,9 +1,9 @@
+import { nextTick } from 'vue'
 import store from '@/store'
 import i18n from '@/i18n'
 import supportedLocales from './supportedLocales'
 
-let dateFnsLocale
-const loadedLanguages = []
+export let dateFnsLocale
 
 /**
  * Returns the first two supported locales that can be found in the `localStorage` or
@@ -34,26 +34,54 @@ function getDefaultLocales() {
   return defaultLocales
 }
 
-function updateDocumentLocale(locale) {
-  document.documentElement.lang = locale
+export async function setI18nLocale(locale) {
+  if (!i18n.global.availableLocales.includes(locale)) {
+    await loadLocaleMessages(locale)
+    // also query/set the date-fns locale object for time translation
+    await loadDateFnsLocale(locale)
+  }
+
+  // Preload 'en' locales as it is the hard fallback
+  if (locale !== 'en' && !i18n.global.availableLocales.includes('en')) {
+    loadLocaleMessages('en')
+  }
+
+  if (i18n.mode === 'legacy') {
+    i18n.global.locale = locale
+  } else {
+    i18n.global.locale.value = locale
+  }
+
+  document.querySelector('html').setAttribute('lang', locale)
   // FIXME can't currently change document direction easily since bootstrap still doesn't handle rtl.
   // document.dir = locale === 'ar' ? 'rtl' : 'ltr'
 }
 
+export async function setI18nFallbackLocale(locale) {
+  if (!i18n.global.availableLocales.includes(locale)) {
+    await loadLocaleMessages(locale)
+  }
+
+  if (i18n.mode === 'legacy') {
+    i18n.global.fallbackLocale = [locale, 'en']
+  } else {
+    i18n.global.fallbackLocale.value = [locale, 'en']
+  }
+}
+
 /**
  * Loads a translation file and adds its content to the i18n plugin `messages`.
  *
  * @return {Promise<string>} Promise that resolve the given locale string
  */
-function loadLocaleMessages(locale) {
-  if (loadedLanguages.includes(locale)) {
-    return Promise.resolve(locale)
-  }
-  return import(`@/i18n/locales/${locale}.json`).then((messages) => {
-    i18n.setLocaleMessage(locale, messages.default)
-    loadedLanguages.push(locale)
-    return locale
-  })
+export async function loadLocaleMessages(locale) {
+  // load locale messages with dynamic import
+  const messages = await import(`./locales/${locale}.json`)
+
+  // set locale and locale message
+  i18n.global.setLocaleMessage(locale, messages)
+
+  return nextTick()
 }
 
 /**
@@ -71,19 +99,10 @@ async function loadDateFnsLocale(locale) {
 /**
  * Initialize all locales
  */
-function initDefaultLocales() {
+export async function initDefaultLocales() {
   // Get defined locales from `localStorage` or `navigator`
   const [locale, fallbackLocale] = getDefaultLocales()
 
-  store.dispatch('UPDATE_LOCALE', locale)
-  store.dispatch('UPDATE_FALLBACKLOCALE', fallbackLocale || 'en')
-  return loadLocaleMessages('en')
-}
-
-export {
-  initDefaultLocales,
-  updateDocumentLocale,
-  loadLocaleMessages,
-  loadDateFnsLocale,
-  dateFnsLocale,
+  await store.dispatch('UPDATE_LOCALE', locale)
+  await store.dispatch('UPDATE_FALLBACKLOCALE', fallbackLocale || 'en')
 }
diff --git a/app/src/i18n/index.js b/app/src/i18n/index.js
index f575be80e..df48cfc58 100644
--- a/app/src/i18n/index.js
+++ b/app/src/i18n/index.js
@@ -3,10 +3,9 @@
  * @module i18n
  */
 
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
+import { createI18n } from 'vue-i18n'
 
-// Plugin Initialization
-Vue.use(VueI18n)
-
-export default new VueI18n({})
+export default createI18n({
+  // FIXME
+  legacy: true,
+})
diff --git a/app/src/store/info.js b/app/src/store/info.js
index 5bc5ce3f4..fc6698bc8 100644
--- a/app/src/store/info.js
+++ b/app/src/store/info.js
@@ -199,7 +199,7 @@ export default {
         ? humanKey
         : { key: humanKey }
       const humanRoute = key
-        ? i18n.t('human_routes.' + key, args)
+        ? i18n.global.t('human_routes.' + key, args)
         : `[${method}] /${uri}`
 
       let request = {
@@ -368,9 +368,9 @@ export default {
         // if a traduction key string has been given and we also need to pass
         // the route param as a variable.
         if (trad && param) {
-          text = i18n.t(trad, { [param]: to.params[param] })
+          text = i18n.global.t(trad, { [param]: to.params[param] })
         } else if (trad) {
-          text = i18n.t(trad)
+          text = i18n.global.t(trad)
         } else {
           text = to.params[param]
         }
@@ -395,7 +395,7 @@ export default {
       }
 
       // Display a simplified breadcrumb as the document title.
-      document.title = `${getTitle(breadcrumb)} | ${i18n.t('yunohost_admin')}`
+      document.title = `${getTitle(breadcrumb)} | ${i18n.global.t('yunohost_admin')}`
     },
 
     UPDATE_TRANSITION_NAME({ state, commit }, { to, from }) {
diff --git a/app/src/store/settings.js b/app/src/store/settings.js
index a67e98d0a..68ba324ce 100644
--- a/app/src/store/settings.js
+++ b/app/src/store/settings.js
@@ -3,12 +3,7 @@
  * @module store/settings
  */
 
-import i18n from '@/i18n'
-import {
-  loadLocaleMessages,
-  updateDocumentLocale,
-  loadDateFnsLocale,
-} from '@/i18n/helpers'
+import { setI18nLocale, setI18nFallbackLocale } from '@/i18n/helpers'
 import supportedLocales from '@/i18n/supportedLocales'
 
 export default {
@@ -62,19 +57,14 @@ export default {
 
   actions: {
     UPDATE_LOCALE({ commit }, locale) {
-      loadLocaleMessages(locale).then(() => {
-        updateDocumentLocale(locale)
+      return setI18nLocale(locale).then(() => {
         commit('SET_LOCALE', locale)
-        i18n.locale = locale
       })
-      // also query the date-fns locale object for filters
-      loadDateFnsLocale(locale)
     },
 
     UPDATE_FALLBACKLOCALE({ commit }, locale) {
-      loadLocaleMessages(locale).then(() => {
+      return setI18nFallbackLocale(locale).then(() => {
         commit('SET_FALLBACKLOCALE', locale)
-        i18n.fallbackLocale = [locale, 'en']
       })
     },
 
diff --git a/app/vite.config.js b/app/vite.config.js
index ae7739956..01fb68258 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -3,6 +3,14 @@ import { defineConfig, loadEnv } from 'vite'
 import fs from 'fs'
 import createVuePlugin from '@vitejs/plugin-vue'
 
+import supportedLocales from './src/i18n/supportedLocales'
+
+const supportedDatefnsLocales = Object.entries(supportedLocales).map(
+  ([locale, { dateFnsLocale }]) => {
+    return dateFnsLocale || locale
+  },
+)
+
 export default defineConfig(({ command, mode }) => {
   // Load env file based on `mode` in the current working directory.
   // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
@@ -53,6 +61,28 @@ export default defineConfig(({ command, mode }) => {
             if (!id.includes('node_modules') && id.includes('api/')) {
               return 'core'
             }
+            // Translations
+            if (id.includes('locales')) {
+              const match = /.*\/i18n\/locales\/([\w-]+)\.json/.exec(id)
+              return `locales/${match[1]}/translations`
+            }
+            // Split date-fns locales
+            if (id.includes('date-fns')) {
+              const match = /.*\/date-fns\/esm\/locale\/([\w-]+)\/.*\.js/.exec(
+                id,
+              )
+              if (match) {
+                if (supportedDatefnsLocales.includes(match[1])) {
+                  return `locales/${match[1]}/date-fns`
+                } else {
+                  // FIXME: currently difficult to cherry pick only needed locales,
+                  // hopefully this chunk should not be fetched.
+                  return 'locales/not-used'
+                }
+              } else {
+                return 'date-fns'
+              }
+            }
           },
         },
       },

From c5976dbd48372598c7b090cb8fdb4b9b3ca01996 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 03:37:39 +0100
Subject: [PATCH 011/275] refactor: upgrade to vuelidate2

---
 app/package.json                              |  2 +
 app/src/components/ConfigPanels.vue           | 15 ++--
 app/src/components/globals/AbstractForm.vue   |  4 +-
 app/src/components/globals/CardForm.vue       |  2 +-
 app/src/components/globals/FormField.vue      | 43 +++++++-----
 .../helpers/validators/customValidators.js    | 59 +++++++---------
 app/src/helpers/validators/index.js           |  2 +-
 app/src/helpers/yunohostArguments.js          | 31 +++-----
 app/src/views/LoginView.vue                   | 16 +++--
 app/src/views/PostInstall.vue                 | 16 +++--
 app/src/views/_partials/DomainForm.vue        | 22 +++---
 app/src/views/app/AppCatalog.vue              | 14 ++--
 app/src/views/app/AppInfo.vue                 | 29 +++++---
 app/src/views/app/AppInstall.vue              | 14 ++--
 app/src/views/domain/DomainInfo.vue           | 12 +++-
 app/src/views/group/GroupCreate.vue           | 14 ++--
 app/src/views/tool/ToolFirewall.vue           | 14 ++--
 app/src/views/tool/ToolSettings.vue           |  6 +-
 app/src/views/user/UserCreate.vue             | 24 ++++---
 app/src/views/user/UserEdit.vue               | 70 +++++++++++--------
 app/src/views/user/UserImport.vue             | 14 ++--
 21 files changed, 246 insertions(+), 177 deletions(-)

diff --git a/app/package.json b/app/package.json
index 17ce6d946..e88b2ce30 100644
--- a/app/package.json
+++ b/app/package.json
@@ -16,6 +16,8 @@
     "@fontsource/fira-code": "^4.5.13",
     "@fontsource/firago": "^4.5.3",
     "@vue/compat": "3.3.4",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
     "bootstrap-vue": "^2.22.0",
     "date-fns": "^2.29.3",
     "fork-awesome": "^1.2.0",
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 1ac211d62..ae4b7a333 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -3,7 +3,7 @@
     <RoutableTabs
       v-if="routes_.length > 1"
       :routes="routes_"
-      v-bind="{ panels, forms, v: $v, ...$attrs }"
+      v-bind="{ panels, forms, v: v$, ...$attrs }"
       v-on="$listeners"
     >
       <template #tab-top>
@@ -26,7 +26,8 @@
 </template>
 
 <script>
-import { validationMixin } from 'vuelidate'
+import { toRef } from 'vue'
+import { useVuelidate } from '@vuelidate/core'
 
 export default {
   name: 'ConfigPanels',
@@ -37,8 +38,6 @@ export default {
     RoutableTabs: () => import('@/components/RoutableTabs.vue'),
   },
 
-  mixins: [validationMixin],
-
   props: {
     panels: { type: Array, default: undefined },
     forms: { type: Object, default: undefined },
@@ -46,6 +45,14 @@ export default {
     errors: { type: Object, default: undefined }, // never used
     routes: { type: Array, default: null },
     noRedirect: { type: Boolean, default: false },
+    externalResults: { type: Object, required: true },
+  },
+
+  setup(props) {
+    const externalResults = toRef(props, 'externalResults')
+    return {
+      v$: useVuelidate({ $externalResults: externalResults, $autoDirty: true }),
+    }
   },
 
   computed: {
diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index 243cfb7de..8bf225963 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -47,7 +47,7 @@ export default {
   computed: {
     errorFeedback() {
       if (this.serverError) return this.serverError
-      else if (this.validation && this.validation.$anyError) {
+      else if (this.validation && this.validation.$errors.length) {
         return this.$i18n.t('form_errors.invalid_form')
       } else return ''
     },
@@ -58,7 +58,7 @@ export default {
       const v = this.validation
       if (v) {
         v.$touch()
-        if (v.$pending || v.$invalid) return
+        if (v.$pending || v.$errors.length) return
       }
       this.$emit('submit', e)
     },
diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index 31774dc0a..16e8d0adc 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -52,7 +52,7 @@ export default {
   computed: {
     errorFeedback() {
       if (this.serverError) return this.serverError
-      else if (this.validation && this.validation.$anyError) {
+      else if (this.validation && this.validation.$errors.length) {
         return this.$i18n.t('form_errors.invalid_form')
       } else return ''
     },
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 4def25e64..c9272302c 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -65,6 +65,7 @@ export default {
     value: { type: null, default: null },
     props: { type: Object, default: () => ({}) },
     validation: { type: Object, default: null },
+    validationIndex: { type: Number, default: null },
   },
 
   computed: {
@@ -93,19 +94,36 @@ export default {
       return attrs
     },
 
-    state() {
-      // Need to set state as null if no error, else component turn green
+    error() {
       if (this.validation) {
-        return this.validation.$anyError === true ? false : null
+        if (this.validationIndex !== null) {
+          const errors =
+            this.validation.$each.$response.$errors[this.validationIndex]
+          const err = Object.values(errors).find((part) => {
+            return part.length
+          })
+          return err?.length ? err[0] : null
+        }
+        return this.validation.$errors.length
+          ? { ...this.validation.$errors[0], $model: this.validation.$model }
+          : null
       }
       return null
     },
 
+    state() {
+      // Need to set state as null if no error, else component turn green
+      return this.error ? false : null
+    },
+
     errorMessage() {
-      const validation = this.validation
-      if (validation && validation.$anyError) {
-        const [type, errData] = this.findError(validation.$params, validation)
-        return this.$i18n.t('form_errors.' + type, errData)
+      const err = this.error
+      if (err) {
+        if (err.$message) return err.$message
+        return this.$i18n.t('form_errors.' + err.$validator, {
+          value: err.$model,
+          ...err.$params,
+        })
       }
       return ''
     },
@@ -122,17 +140,6 @@ export default {
         }
       }
     },
-
-    findError(params, obj, parent = obj) {
-      for (const key in params) {
-        if (!obj[key]) {
-          return [key, obj.$params[key]]
-        }
-        if (obj[key].$anyError) {
-          return this.findError(obj[key].$params, obj[key], parent)
-        }
-      }
-    },
   },
 }
 </script>
diff --git a/app/src/helpers/validators/customValidators.js b/app/src/helpers/validators/customValidators.js
index 154f594d2..181a532a0 100644
--- a/app/src/helpers/validators/customValidators.js
+++ b/app/src/helpers/validators/customValidators.js
@@ -1,70 +1,61 @@
-import { helpers } from 'vuelidate/lib/validators'
+import { helpers } from '@vuelidate/validators'
 
 // Unicode ranges are taken from https://stackoverflow.com/a/37668315
 const nonAsciiWordCharacters =
   '\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0-\u08B4\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D5F-\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16F1-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FD5\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788\uA78B-\uA7AD\uA7B0-\uA7B7\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC'
 
-const alphalownumdot_ = helpers.regex('alphalownumdot_', /^[a-z0-9_.]+$/)
+const alphalownumdot_ = helpers.regex(/^[a-z0-9_.]+$/)
 
 const domain = helpers.regex(
-  'domain',
   new RegExp(
     `^(?:[\\da-z${nonAsciiWordCharacters}]+(?:-*[\\da-z${nonAsciiWordCharacters}]+)*\\.)+(?:(?:xn--)?[\\da-z${nonAsciiWordCharacters}]{2,})$`,
   ),
 )
 
 const dynDomain = helpers.regex(
-  'dynDomain',
   new RegExp(`^(?:xn--)?[\\da-z-${nonAsciiWordCharacters}]+$`),
 )
 
-const emailLocalPart = helpers.regex('emailLocalPart', /^[\w.-]+$/)
+const emailLocalPart = helpers.regex(/^[\w.-]+$/)
 
-const emailForwardLocalPart = helpers.regex(
-  'emailForwardLocalPart',
-  /^[\w+.-]+$/,
-)
+const emailForwardLocalPart = helpers.regex(/^[\w+.-]+$/)
 
-const email = (value) =>
-  helpers.withParams({ type: 'email', value }, (value) => {
-    const [localPart, domainPart] = value.split('@')
-    if (!domainPart) return !helpers.req(value) || false
-    return (
-      !helpers.req(value) || (emailLocalPart(localPart) && domain(domainPart))
-    )
-  })(value)
+const email = (value) => {
+  const [localPart, domainPart] = value.split('@')
+  if (!domainPart) return !helpers.req(value) || false
+  return (
+    !helpers.req(value) || (emailLocalPart(localPart) && domain(domainPart))
+  )
+}
 
 // Same as email but with `+` allowed.
-const emailForward = (value) =>
-  helpers.withParams({ type: 'emailForward', value }, (value) => {
-    const [localPart, domainPart] = value.split('@')
-    if (!domainPart) return !helpers.req(value) || false
-    return (
-      !helpers.req(value) ||
-      (emailForwardLocalPart(localPart) && domain(domainPart))
-    )
-  })(value)
+const emailForward = (value) => {
+  const [localPart, domainPart] = value.split('@')
+  if (!domainPart) return !helpers.req(value) || false
+  return (
+    !helpers.req(value) ||
+    (emailForwardLocalPart(localPart) && domain(domainPart))
+  )
+}
 
 const appRepoUrl = helpers.regex(
-  'appRepoUrl',
   /^https:\/\/[a-zA-Z0-9-_.]+\/[a-zA-Z0-9-_./~]+\/[a-zA-Z0-9-_.]+_ynh(\/?(-\/)?tree\/[a-zA-Z0-9-_.]+)?(\.git)?\/?$/,
 )
 
-const includes = (items) => (item) =>
+const includes = (items) =>
   helpers.withParams(
-    { type: 'includes', value: item },
+    { type: 'includes' },
     (item) => !helpers.req(item) || (items ? items.includes(item) : false),
-  )(item)
+  )
 
 const name = helpers.regex(
-  'name',
   new RegExp(`^(?:[A-Za-z${nonAsciiWordCharacters}]{1,30}[ ,.'-]{0,3})+$`),
 )
 
-const unique = (items) => (item) =>
-  helpers.withParams({ type: 'unique', arg: items, value: item }, (item) =>
+const unique = (items) =>
+  helpers.withParams({ type: 'unique', arg: items }, (item) =>
     items ? !helpers.req(item) || !items.includes(item) : true,
-  )(item)
+  )
 
 export {
   alphalownumdot_,
diff --git a/app/src/helpers/validators/index.js b/app/src/helpers/validators/index.js
index 41708c0c8..76a53e70c 100644
--- a/app/src/helpers/validators/index.js
+++ b/app/src/helpers/validators/index.js
@@ -9,4 +9,4 @@ export {
   minValue,
   required,
   sameAs,
-} from 'vuelidate/lib/validators'
+} from '@vuelidate/validators'
diff --git a/app/src/helpers/yunohostArguments.js b/app/src/helpers/yunohostArguments.js
index bba66f7f4..9cd733bac 100644
--- a/app/src/helpers/yunohostArguments.js
+++ b/app/src/helpers/yunohostArguments.js
@@ -121,8 +121,7 @@ function addEvaluationGetter(prop, obj, expr, ctx, nested) {
  */
 export function formatYunoHostArgument(arg) {
   let value = arg.value !== undefined ? arg.value : null
-  const validation = {}
-  const error = { message: null }
+  let validation = {}
   arg.ask = formatI18nField(arg.ask)
   const field = {
     is: arg.readonly ? 'ReadOnlyField' : 'FormField',
@@ -272,6 +271,9 @@ export function formatYunoHostArgument(arg) {
   ]
 
   // Default type management if no one is filled
+  if (arg.type !== 'tags' && arg.choices && arg.choices.length) {
+    arg.type = 'select'
+  }
   if (arg.type === undefined) {
     if (arg.choices && arg.choices.length) {
       arg.type = 'select'
@@ -308,21 +310,12 @@ export function formatYunoHostArgument(arg) {
     validation.required = validators.required
   }
   if (arg.pattern && arg.type !== 'tags') {
-    validation.pattern = validators.helpers.regex(
+    validation.pattern = validators.helpers.withMessage(
       formatI18nField(arg.pattern.error),
-      new RegExp(arg.pattern.regexp),
+      validators.helpers.regex(new RegExp(arg.pattern.regexp)),
     )
   }
 
-  if (!component.renderSelf && !arg.readonly) {
-    // Bind a validation with what the server may respond
-    validation.remote = validators.helpers.withParams(error, (v) => {
-      const result = !error.message
-      error.message = null
-      return result
-    })
-  }
-
   // Default value if still `null`
   if (value === null && arg.default) {
     value = arg.default
@@ -351,7 +344,6 @@ export function formatYunoHostArgument(arg) {
     field,
     // Return null instead of empty object if there's no validation
     validation: Object.keys(validation).length === 0 ? null : validation,
-    error,
   }
 }
 
@@ -367,14 +359,12 @@ export function formatYunoHostArguments(args, forms) {
   const form = {}
   const fields = {}
   const validations = {}
-  const errors = {}
 
   for (const arg of args) {
-    const { value, field, validation, error } = formatYunoHostArgument(arg)
+    const { value, field, validation } = formatYunoHostArgument(arg)
     fields[arg.id] = field
     form[arg.id] = value
     if (validation) validations[arg.id] = validation
-    errors[arg.id] = error
 
     if ('visible' in arg && typeof arg.visible === 'string') {
       addEvaluationGetter(
@@ -397,7 +387,7 @@ export function formatYunoHostArguments(args, forms) {
     }
   }
 
-  return { form, fields, validations, errors }
+  return { form, fields, validations }
 }
 
 export function formatYunoHostConfigPanels(data) {
@@ -405,7 +395,6 @@ export function formatYunoHostConfigPanels(data) {
     panels: [],
     forms: {},
     validations: {},
-    errors: {},
   }
 
   for (const { id: panelId, name, help, sections } of data.panels) {
@@ -417,7 +406,6 @@ export function formatYunoHostConfigPanels(data) {
     }
     result.forms[panelId] = {}
     result.validations[panelId] = {}
-    result.errors[panelId] = {}
 
     if (name) panel.name = formatI18nField(name)
     if (help) panel.help = formatI18nField(help)
@@ -434,14 +422,13 @@ export function formatYunoHostConfigPanels(data) {
         addEvaluationGetter('visible', section, section.visible, result.forms)
       }
 
-      const { form, fields, validations, errors } = formatYunoHostArguments(
+      const { form, fields, validations } = formatYunoHostArguments(
         _section.options,
         result.forms,
       )
       // Merge all sections forms to the panel to get a unique form
       Object.assign(result.forms[panelId], form)
       Object.assign(result.validations[panelId], validations)
-      Object.assign(result.errors[panelId], errors)
       section.fields = fields
       panel.sections.push(section)
 
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index 1dcb4f98b..e2c478685 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -2,7 +2,7 @@
   <CardForm
     :title="$t('login')"
     icon="lock"
-    :validation="$v"
+    :validation="v$"
     :server-error="serverError"
     @submit.prevent="login"
   >
@@ -10,14 +10,14 @@
     <FormField
       v-bind="fields.username"
       v-model="form.username"
-      :validation="$v.form.username"
+      :validation="v$.form.username"
     />
 
     <!-- ADMIN PASSWORD -->
     <FormField
       v-bind="fields.password"
       v-model="form.password"
-      :validation="$v.form.password"
+      :validation="v$.form.password"
     />
 
     <template #buttons>
@@ -35,18 +35,22 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 import { alphalownumdot_, required, minLength } from '@/helpers/validators'
 
 export default {
   name: 'LoginView',
 
-  mixins: [validationMixin],
-
   props: {
     forceReload: { type: Boolean, default: false },
   },
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       serverError: '',
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 560cbf537..8b1e92e01 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -40,7 +40,7 @@
       <CardForm
         :title="$t('postinstall.user.title')"
         icon="user-plus"
-        :validation="$v"
+        :validation="v$"
         :server-error="serverError"
         :submit-text="$t('next')"
         @submit.prevent="setUser"
@@ -55,7 +55,7 @@
           :key="name"
           v-bind="field"
           v-model="user[name]"
-          :validation="$v.user[name]"
+          :validation="v$.user[name]"
         />
       </CardForm>
 
@@ -89,7 +89,7 @@
 </template>
 
 <script>
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import api from '@/api'
 import { DomainForm } from '@/views/_partials'
@@ -106,13 +106,17 @@ import {
 export default {
   name: 'PostInstall',
 
-  mixins: [validationMixin],
-
   components: {
     DomainForm,
     LoginView,
   },
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       step: 'start',
@@ -224,7 +228,7 @@ export default {
         username: { required, alphalownumdot_ },
         fullname: { required, name },
         password: { required, passwordLenght: minLength(8) },
-        confirmation: { required, passwordMatch: sameAs('password') },
+        confirmation: { required, passwordMatch: sameAs(this.user.password) },
       },
     }
   },
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index a67530eb4..92aec5959 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -3,7 +3,7 @@
     :title="title"
     icon="globe"
     :submit-text="submitText"
-    :validation="$v"
+    :validation="v$"
     :server-error="serverError"
     @submit.prevent="onSubmit"
   >
@@ -32,7 +32,7 @@
       <FormField
         v-bind="fields.domain"
         v-model="form.domain"
-        :validation="$v.form.domain"
+        :validation="v$.form.domain"
         class="mt-3"
       />
     </BCollapse>
@@ -58,7 +58,7 @@
 
       <FormField
         v-bind="fields.dynDomain"
-        :validation="$v.form.dynDomain"
+        :validation="v$.form.dynDomain"
         class="mt-3"
       >
         <template #default="{ self }">
@@ -68,13 +68,13 @@
 
       <FormField
         v-bind="fields.dynDomainPassword"
-        :validation="$v.form.dynDomainPassword"
+        :validation="v$.form.dynDomainPassword"
         v-model="form.dynDomainPassword"
       />
 
       <FormField
         v-bind="fields.dynDomainPasswordConfirmation"
-        :validation="$v.form.dynDomainPasswordConfirmation"
+        :validation="v$.form.dynDomainPasswordConfirmation"
         v-model="form.dynDomainPasswordConfirmation"
       />
     </BCollapse>
@@ -103,7 +103,7 @@
 
       <FormField
         v-bind="fields.localDomain"
-        :validation="$v.form.localDomain"
+        :validation="v$.form.localDomain"
         class="mt-3"
       >
         <template #default="{ self }">
@@ -116,7 +116,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import AdressInputSelect from '@/components/AdressInputSelect.vue'
 import { formatFormData } from '@/helpers/yunohostArguments'
@@ -137,6 +137,12 @@ export default {
     serverError: { type: String, default: '' },
   },
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       selected: '',
@@ -262,8 +268,6 @@ export default {
     }
   },
 
-  mixins: [validationMixin],
-
   components: {
     AdressInputSelect,
   },
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index cc7f9afe6..27b3e1e5e 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -171,7 +171,7 @@
         icon="download"
         @submit.prevent="onCustomInstallClick"
         :submit-text="$t('install')"
-        :validation="$v"
+        :validation="v$"
         class="mt-5"
       >
         <template #disclaimer>
@@ -185,7 +185,7 @@
         <FormField
           v-bind="customInstall.field"
           v-model="customInstall.url"
-          :validation="$v.customInstall.url"
+          :validation="v$.customInstall.url"
         />
       </CardForm>
     </template>
@@ -220,7 +220,7 @@
 </template>
 
 <script>
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import CardDeckFeed from '@/components/CardDeckFeed.vue'
 import { required, appRepoUrl } from '@/helpers/validators'
@@ -240,6 +240,12 @@ export default {
     subtag: { type: String, default: 'all' },
   },
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       queries: [['GET', 'apps/catalog?full&with_categories&with_antifeatures']],
@@ -421,8 +427,6 @@ export default {
 
     randint,
   },
-
-  mixins: [validationMixin],
 }
 </script>
 
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index ef2295e27..af43ae5f3 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -128,7 +128,11 @@
     </YAlert>
 
     <!-- BASIC INFOS -->
-    <ConfigPanels v-bind="config" @submit="onConfigSubmit">
+    <ConfigPanels
+      v-bind="config"
+      :external-results="externalResults"
+      @submit="onConfigSubmit"
+    >
       <!-- OPERATIONS TAB -->
       <template v-if="currentTab === 'operations'" #tab-top>
         <!-- CHANGE PERMISSIONS LABEL -->
@@ -144,7 +148,7 @@
             label-cols="0"
             label-class=""
             class="m-0"
-            :validation="$v.form.labels.$each[i]"
+            :validation="v$.form.labels.$each[i]"
           >
             <template #default="{ self }">
               <BInputGroup>
@@ -361,11 +365,11 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import api, { objectToParams } from '@/api'
 import { humanPermissionName } from '@/helpers/filters/human'
-import { required } from '@/helpers/validators'
+import { helpers, required } from '@/helpers/validators'
 import { isEmptyValue } from '@/helpers/commons'
 import {
   formatFormData,
@@ -385,6 +389,12 @@ export default {
     id: { type: String, required: true },
   },
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       queries: [
@@ -408,6 +418,7 @@ export default {
         ],
         validations: {},
       },
+      externalResults: {},
       doc: undefined,
     }
   },
@@ -429,7 +440,9 @@ export default {
     return {
       form: {
         labels: {
-          $each: { label: { required } },
+          $each: helpers.forEach({
+            label: { required },
+          }),
         },
         url: { path: { required } },
       },
@@ -614,7 +627,9 @@ export default {
           if (err.name !== 'APIBadRequestError') throw err
           const panel = this.config.panels.find((panel) => panel.id === id)
           if (err.data.name) {
-            this.config.errors[id][err.data.name].message = err.message
+            Object.assign(this.externalResults, {
+              forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
+            })
           } else this.$set(panel, 'serverError', err.message)
         })
     },
@@ -687,8 +702,6 @@ export default {
         })
     },
   },
-
-  mixins: [validationMixin],
 }
 </script>
 
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index b668a2eae..ddae6b3c8 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -179,7 +179,7 @@
         :title="$t('app_install_parameters')"
         icon="cog"
         :submit-text="$t('install')"
-        :validation="$v"
+        :validation="v$"
         :server-error="serverError"
         @submit.prevent="performInstall"
       >
@@ -189,7 +189,7 @@
             :is="field.is"
             v-bind="field.props"
             v-model="form[fname]"
-            :validation="$v.form[fname]"
+            :validation="v$.form[fname]"
             :key="fname"
           />
         </template>
@@ -210,7 +210,7 @@
 </template>
 
 <script>
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import api, { objectToParams } from '@/api'
 import {
@@ -223,8 +223,6 @@ import CardCollapse from '@/components/CardCollapse.vue'
 export default {
   name: 'AppInstall',
 
-  mixins: [validationMixin],
-
   components: {
     CardCollapse,
   },
@@ -233,6 +231,12 @@ export default {
     id: { type: String, required: true },
   },
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       queries: [
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 7edf60904..8a48510b4 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -108,7 +108,12 @@
       </DescriptionRow>
     </YCard>
 
-    <ConfigPanels v-if="config.panels" v-bind="config" @submit="onConfigSubmit">
+    <ConfigPanels
+      v-if="config.panels"
+      v-bind="config"
+      :external-results="externalResults"
+      @submit="onConfigSubmit"
+    >
       <template v-if="currentTab === 'dns'" #tab-after>
         <DomainDns :name="name" />
       </template>
@@ -166,6 +171,7 @@ export default {
         ['GET', `domains/${this.name}/config?full`],
       ],
       config: {},
+      externalResults: {},
       unsubscribeDomainFromDyndns: false,
     }
   },
@@ -247,7 +253,9 @@ export default {
           if (err.name !== 'APIBadRequestError') throw err
           const panel = this.config.panels.find((panel) => panel.id === id)
           if (err.data.name) {
-            this.config.errors[id][err.data.name].message = err.message
+            Object.assign(this.externalResults, {
+              forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
+            })
           } else this.$set(panel, 'serverError', err.message)
         })
     },
diff --git a/app/src/views/group/GroupCreate.vue b/app/src/views/group/GroupCreate.vue
index c1dc6109b..fb571677d 100644
--- a/app/src/views/group/GroupCreate.vue
+++ b/app/src/views/group/GroupCreate.vue
@@ -2,7 +2,7 @@
   <CardForm
     :title="$t('group_new')"
     icon="users"
-    :validation="$v"
+    :validation="v$"
     :server-error="serverError"
     @submit.prevent="onSubmit"
   >
@@ -10,13 +10,13 @@
     <FormField
       v-bind="groupname"
       v-model="form.groupname"
-      :validation="$v.form.groupname"
+      :validation="v$.form.groupname"
     />
   </CardForm>
 </template>
 
 <script>
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import api from '@/api'
 import { required, alphalownumdot_ } from '@/helpers/validators'
@@ -24,6 +24,12 @@ import { required, alphalownumdot_ } from '@/helpers/validators'
 export default {
   name: 'GroupCreate',
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       form: {
@@ -63,7 +69,5 @@ export default {
         })
     },
   },
-
-  mixins: [validationMixin],
 }
 </script>
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 57724f790..3e95b0cf6 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -56,7 +56,7 @@
     <CardForm
       :title="$t('operations')"
       icon="cogs"
-      :validation="$v"
+      :validation="v$"
       :server-error="serverError"
       @submit.prevent="onFormPortToggling"
       inline
@@ -66,7 +66,7 @@
         <BFormSelect v-model="form.action" :options="actionChoices" />
       </BInputGroup>
 
-      <FormField :validation="$v.form.port">
+      <FormField :validation="v$.form.port">
         <BInputGroup :prepend="$t('port')">
           <InputItem
             id="input-port"
@@ -119,7 +119,7 @@
 </template>
 
 <script>
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import api from '@/api'
 import { required, integer, between } from '@/helpers/validators'
@@ -127,6 +127,12 @@ import { required, integer, between } from '@/helpers/validators'
 export default {
   name: 'ToolFirewall',
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       queries: [['GET', '/firewall?raw']],
@@ -281,8 +287,6 @@ export default {
       })
     },
   },
-
-  mixins: [validationMixin],
 }
 </script>
 
diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index 71897e04a..69eacd1a6 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -8,6 +8,7 @@
     <ConfigPanels
       v-if="config.panels"
       v-bind="config"
+      :external-results="externalResults"
       @submit="onConfigSubmit"
     />
   </ViewBase>
@@ -34,6 +35,7 @@ export default {
     return {
       queries: [['GET', 'settings?full']],
       config: {},
+      externalResults: {},
     }
   },
 
@@ -62,7 +64,9 @@ export default {
           if (err.name !== 'APIBadRequestError') throw err
           const panel = this.config.panels.find((panel) => panel.id === id)
           if (err.data.name) {
-            this.config.errors[id][err.data.name].message = err.message
+            Object.assign(this.externalResults, {
+              forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
+            })
           } else this.$set(panel, 'serverError', err.message)
         })
     },
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index 2f3675f1d..7d62555d3 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -7,7 +7,7 @@
     <CardForm
       :title="$t('users_new')"
       icon="user-plus"
-      :validation="$v"
+      :validation="v$"
       :server-error="serverError"
       @submit.prevent="onSubmit"
     >
@@ -15,19 +15,19 @@
       <FormField
         v-bind="fields.username"
         v-model="form.username"
-        :validation="$v.form.username"
+        :validation="v$.form.username"
       />
 
       <!-- USER FULLNAME -->
       <FormField
         v-bind="fields.fullname"
-        :validation="$v.form.fullname"
+        :validation="v$.form.fullname"
         v-model="form.fullname"
       />
       <hr />
 
       <!-- USER MAIL DOMAIN -->
-      <FormField v-bind="fields.domain" :validation="$v.form.domain">
+      <FormField v-bind="fields.domain" :validation="v$.form.domain">
         <template #default="{ self }">
           <BInputGroup>
             <BInputGroupAppend>
@@ -55,14 +55,14 @@
       <FormField
         v-bind="fields.password"
         v-model="form.password"
-        :validation="$v.form.password"
+        :validation="v$.form.password"
       />
 
       <!-- USER PASSWORD CONFIRMATION -->
       <FormField
         v-bind="fields.confirmation"
         v-model="form.confirmation"
-        :validation="$v.form.confirmation"
+        :validation="v$.form.confirmation"
       />
     </CardForm>
   </ViewBase>
@@ -71,7 +71,7 @@
 <script>
 import api from '@/api'
 import { mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import { formatFormData } from '@/helpers/yunohostArguments'
 import {
@@ -86,6 +86,12 @@ import {
 export default {
   name: 'UserCreate',
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       queries: [
@@ -164,7 +170,7 @@ export default {
         fullname: { required, name },
         domain: { required },
         password: { required, passwordLenght: minLength(8) },
-        confirmation: { required, passwordMatch: sameAs('password') },
+        confirmation: { required, passwordMatch: sameAs(this.form.password) },
       },
     }
   },
@@ -191,8 +197,6 @@ export default {
         })
     },
   },
-
-  mixins: [validationMixin],
 }
 </script>
 
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index aea68a3f6..e8ae18b6b 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -7,7 +7,7 @@
     <CardForm
       :title="$t('user_username_edit', { name })"
       icon="user"
-      :validation="$v"
+      :validation="v$"
       :server-error="serverError"
       @submit.prevent="onSubmit"
     >
@@ -18,13 +18,13 @@
       <FormField
         v-bind="fields.fullname"
         v-model="form.fullname"
-        :validation="$v.form.fullname"
+        :validation="v$.form.fullname"
       />
 
       <hr />
 
       <!-- USER EMAIL -->
-      <FormField v-bind="fields.mail" :validation="$v.form.mail">
+      <FormField v-bind="fields.mail" :validation="v$.form.mail">
         <template #default="{ self }">
           <AdressInputSelect v-bind="self" v-model="form.mail" />
         </template>
@@ -33,7 +33,7 @@
       <!-- MAILBOX QUOTA -->
       <FormField
         v-bind="fields.mailbox_quota"
-        :validation="$v.form.mailbox_quota"
+        :validation="v$.form.mailbox_quota"
       >
         <template #default="{ self }">
           <BInputGroup append="M">
@@ -49,7 +49,8 @@
           <FormField
             v-bind="fields.mail_aliases"
             :id="'mail_aliases' + i"
-            :validation="$v.form.mail_aliases.$each[i]"
+            :validation="v$.form.mail_aliases"
+            :validation-index="i"
           >
             <template #default="{ self }">
               <AdressInputSelect v-bind="self" v-model="form.mail_aliases[i]" />
@@ -72,9 +73,10 @@
         <div v-for="(mail, i) in form.mail_forward" :key="i" class="mail-list">
           <FormField
             v-bind="fields.mail_forward"
-            v-model="form.mail_forward[i]"
+            v-model="form.mail_forward[i].mail"
             :id="'mail-forward' + i"
-            :validation="$v.form.mail_forward.$each[i]"
+            :validation="v$.form.mail_forward"
+            :validation-index="i"
           />
 
           <BButton variant="danger" @click="removeEmailField('forward', i)">
@@ -93,14 +95,14 @@
       <FormField
         v-bind="fields.change_password"
         v-model="form.change_password"
-        :validation="$v.form.change_password"
+        :validation="v$.form.change_password"
       />
 
       <!-- USER PASSWORD CONFIRMATION -->
       <FormField
         v-bind="fields.confirmation"
         v-model="form.confirmation"
-        :validation="$v.form.confirmation"
+        :validation="v$.form.confirmation"
       />
     </CardForm>
   </ViewBase>
@@ -108,7 +110,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import api from '@/api'
 import { arrayDiff } from '@/helpers/commons'
@@ -118,6 +120,7 @@ import {
   formatFormData,
 } from '@/helpers/yunohostArguments'
 import {
+  helpers,
   name,
   required,
   minLength,
@@ -137,6 +140,12 @@ export default {
     name: { type: String, required: true },
   },
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       queries: [
@@ -227,24 +236,28 @@ export default {
 
   computed: mapGetters(['user', 'domainsAsChoices', 'mainDomain']),
 
-  validations: {
-    form: {
-      fullname: { required, name },
-      mail: {
-        localPart: { required, email: emailLocalPart },
-      },
-      mailbox_quota: { integer, minValue: minValue(0) },
-      mail_aliases: {
-        $each: {
+  validations() {
+    return {
+      form: {
+        fullname: { required, name },
+        mail: {
           localPart: { required, email: emailLocalPart },
         },
+        mailbox_quota: { integer, minValue: minValue(0) },
+        mail_aliases: {
+          $each: helpers.forEach({
+            localPart: { required, email: emailLocalPart },
+          }),
+        },
+        mail_forward: {
+          $each: helpers.forEach({
+            mail: { required, emailForward },
+          }),
+        },
+        change_password: { passwordLenght: minLength(8) },
+        confirmation: { passwordMatch: sameAs(this.form.change_password) },
       },
-      mail_forward: {
-        $each: { required, emailForward },
-      },
-      change_password: { passwordLenght: minLength(8) },
-      confirmation: { passwordMatch: sameAs('change_password') },
-    },
+    }
   },
 
   methods: {
@@ -260,7 +273,7 @@ export default {
         )
       }
       if (user['mail-forward']) {
-        this.form.mail_forward = user['mail-forward'].slice() // Copy value
+        this.form.mail_forward = user['mail-forward'].map((mail) => ({ mail })) // Copy value
       }
       // mailbox-quota could be 'No quota' or 'Pas de quota'...
       if (parseInt(user['mailbox-quota'].limit) > 0) {
@@ -278,6 +291,8 @@ export default {
         formData.mailbox_quota = ''
       }
 
+      formData.mail_forward = formData.mail_forward?.map((v) => v.mail)
+
       for (const key of ['mail_aliases', 'mail_forward']) {
         const dashedKey = key.replace('_', '-')
         const newKey = key.replace('_', '').replace('es', '')
@@ -323,7 +338,7 @@ export default {
       this.form['mail_' + type].push(
         type === 'aliases'
           ? { localPart: '', separator: '@', domain: this.mainDomain }
-          : '',
+          : { mail: '' },
       )
       // Focus last input after rendering update
       this.$nextTick(() => {
@@ -337,7 +352,6 @@ export default {
     },
   },
 
-  mixins: [validationMixin],
   components: { AdressInputSelect },
 }
 </script>
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index 3f2238d35..b0286b7f1 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -2,7 +2,7 @@
   <CardForm
     :title="$t('users_import')"
     icon="user-plus"
-    :validation="$v"
+    :validation="v$"
     :server-error="serverError"
     @submit.prevent="onSubmit"
   >
@@ -10,7 +10,7 @@
     <FormField
       v-bind="fields.csvfile"
       v-model="form.csvfile"
-      :validation="$v.form.csvfile"
+      :validation="v$.form.csvfile"
     />
 
     <!-- UPDATE -->
@@ -23,7 +23,7 @@
 
 <script>
 import api from '@/api'
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import { formatFormData } from '@/helpers/yunohostArguments'
 import { required } from '@/helpers/validators'
@@ -31,6 +31,12 @@ import { required } from '@/helpers/validators'
 export default {
   name: 'UserImport',
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       form: {
@@ -112,7 +118,5 @@ export default {
         })
     },
   },
-
-  mixins: [validationMixin],
 }
 </script>

From fdbe64cf9550f33fc1b3e2c4e43f7b738b4625e3 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 03:38:23 +0100
Subject: [PATCH 012/275] chore: upgrade bootstrap-vue to last version

---
 app/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/package.json b/app/package.json
index e88b2ce30..3c90df243 100644
--- a/app/package.json
+++ b/app/package.json
@@ -18,7 +18,7 @@
     "@vue/compat": "3.3.4",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "bootstrap-vue": "^2.22.0",
+    "bootstrap-vue": "^2.23.1",
     "date-fns": "^2.29.3",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",

From 03b136478a5631a289657d656e456482137a199c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 04:20:02 +0100
Subject: [PATCH 013/275] refactor: single `key` on template `v-for`

---
 app/src/components/RecursiveListGroup.vue                 | 4 +---
 app/src/components/globals/skeletons/CardFormSkeleton.vue | 6 +++---
 app/src/views/group/GroupList.vue                         | 6 +++---
 app/src/views/service/ServiceInfo.vue                     | 6 +++---
 app/src/views/tool/ToolWebadmin.vue                       | 6 +++---
 5 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 1a5b493b5..c65c63c07 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -1,8 +1,7 @@
 <template>
   <BListGroup :flush="flush" :style="{ '--depth': tree.depth }">
-    <template v-for="(node, i) in tree.children">
+    <template v-for="(node, i) in tree.children" :key="node.id">
       <BListGroupItem
-        :key="node.id"
         class="list-group-item-action"
         :class="getClasses(node, i)"
         @click="$router.push(node.data.to)"
@@ -26,7 +25,6 @@
 
       <BCollapse
         v-if="node.children"
-        :key="'collapse-' + node.id"
         v-model="node.data.opened"
         :id="'collapse-' + node.id"
       >
diff --git a/app/src/components/globals/skeletons/CardFormSkeleton.vue b/app/src/components/globals/skeletons/CardFormSkeleton.vue
index 9205a2251..4cf810cfe 100644
--- a/app/src/components/globals/skeletons/CardFormSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardFormSkeleton.vue
@@ -4,8 +4,8 @@
       <BSkeleton width="30%" height="36px" class="m-0" />
     </template>
 
-    <template v-for="count in itemCount">
-      <BRow :key="count" :class="{ 'd-block': cols === null }">
+    <template v-for="count in itemCount" :key="count">
+      <BRow :class="{ 'd-block': cols === null }">
         <BCol v-bind="cols">
           <div style="height: 38px" class="d-flex align-items-center">
             <BSkeleton
@@ -32,7 +32,7 @@
         </BCol>
       </BRow>
 
-      <hr :key="count + '-hr'" />
+      <hr />
     </template>
 
     <template #footer>
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 03d14f80d..375941db4 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -96,8 +96,8 @@
       :title="$t('group_specific_permissions')"
       icon="group"
     >
-      <template v-for="(userName, index) in activeUserGroups">
-        <BRow :key="userName">
+      <template v-for="userName in activeUserGroups" :key="userName">
+        <BRow>
           <BCol md="3" lg="2">
             <YIcon iname="user" /> <strong>{{ userName }}</strong>
           </BCol>
@@ -116,7 +116,7 @@
             />
           </BCol>
         </BRow>
-        <hr :key="index" />
+        <hr />
       </template>
 
       <TagsSelectizeItem
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index eaf08c8ff..fd9082e99 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -70,12 +70,12 @@
         </BButton>
       </template>
 
-      <template v-for="({ filename, content }, i) in logs">
-        <h3 :key="i + '-filename'">
+      <template v-for="{ filename, content } in logs" :key="filename">
+        <h3>
           {{ filename }}
         </h3>
 
-        <pre :key="i + '-content'" class="log"><code>{{ content }}</code></pre>
+        <pre class="log"><code>{{ content }}</code></pre>
       </template>
     </YCard>
   </ViewBase>
diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index f3359f6dd..90200cf49 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/app/src/views/tool/ToolWebadmin.vue
@@ -1,8 +1,8 @@
 <template>
   <CardForm :title="$t('tools_webadmin_settings')" icon="cog" no-footer>
-    <template v-for="(field, fname) in fields">
-      <FormField v-bind="field" v-model="self[fname]" :key="fname" />
-      <hr :key="fname + 'hr'" />
+    <template v-for="(field, fname) in fields" :key="fname">
+      <FormField v-bind="field" v-model="self[fname]" />
+      <hr />
     </template>
   </CardForm>
 </template>

From 4abbb4b2fceb32d78760e923c50a576f399d133d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 04:20:55 +0100
Subject: [PATCH 014/275] refactor: properly pass scoped slots

---
 app/src/components/RecursiveListGroup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index c65c63c07..2e30a3dc6 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -34,7 +34,7 @@
           flush
         >
           <!-- PASS THE DEFAULT SLOT WITH SCOPE TO NEXT NESTED COMPONENT -->
-          <template slot="default" slot-scope="scope">
+          <template #default="scope">
             <slot name="default" v-bind="scope" />
           </template>
         </RecursiveListGroup>

From 298dc73dfd7077abddb87d0bad89990061660cd5 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 04:57:03 +0100
Subject: [PATCH 015/275] refactor: `v-bind` first

---
 app/src/components/ConfigPanels.vue           | 2 +-
 app/src/components/QueryHeader.vue            | 2 +-
 app/src/components/globals/FormField.vue      | 2 +-
 app/src/components/globals/YListGroupItem.vue | 2 +-
 app/src/views/app/AppInstall.vue              | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index ae4b7a333..57c5a2208 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -2,8 +2,8 @@
   <div class="config-panel">
     <RoutableTabs
       v-if="routes_.length > 1"
-      :routes="routes_"
       v-bind="{ panels, forms, v: v$, ...$attrs }"
+      :routes="routes_"
       v-on="$listeners"
     >
       <template #tab-top>
diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index b2f6c3eb1..05e7d943f 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="query-header w-100" v-on="$listeners" v-bind="$attrs">
+  <div v-bind="$attrs" class="query-header w-100" v-on="$listeners">
     <!-- STATUS -->
     <span
       class="status"
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index c9272302c..cd8b1315a 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -11,8 +11,8 @@
     <slot v-bind="{ self: { ...props, state }, touch }">
       <!-- if no component was passed as slot, render a component from the props -->
       <Component
-        :is="component"
         v-bind="props"
+        :is="component"
         v-on="$listeners"
         :value="value"
         :state="state"
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index 5a20071e7..cf2cc82ab 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <BListGroupItem class="yuno-list-group-item" :class="_class" v-bind="$attrs">
+  <BListGroupItem v-bind="$attrs" class="yuno-list-group-item" :class="_class">
     <div v-if="!noStatus" class="yuno-list-group-item-status">
       <YIcon v-if="_icon" :iname="_icon" :class="['icon-' + variant]" />
     </div>
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index ddae6b3c8..678ba9e6a 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -186,8 +186,8 @@
         <template v-for="(field, fname) in fields">
           <Component
             v-if="field.visible"
-            :is="field.is"
             v-bind="field.props"
+            :is="field.is"
             v-model="form[fname]"
             :validation="v$.form[fname]"
             :key="fname"

From 1b8dd46395cba864d33efd520a74988aec5fd427 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 05:17:08 +0100
Subject: [PATCH 016/275] refactor: css `::v-deep` to `:deep()`

---
 app/src/components/ConfigPanel.vue            |  2 +-
 app/src/components/globals/ExplainWhat.vue    |  2 +-
 app/src/components/globals/FormField.vue      |  2 +-
 app/src/components/globals/TopBar.vue         |  4 +--
 app/src/components/globals/YCard.vue          |  6 ++---
 .../components/globals/formItems/FileItem.vue |  2 +-
 .../globals/formItems/TagsSelectizeItem.vue   |  2 +-
 app/src/views/_partials/ViewLockOverlay.vue   | 26 +++++++++----------
 app/src/views/app/AppCatalog.vue              |  2 +-
 app/src/views/tool/ToolFirewall.vue           |  4 +--
 10 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
index cd868fadb..9c62cbf3a 100644
--- a/app/src/components/ConfigPanel.vue
+++ b/app/src/components/ConfigPanel.vue
@@ -105,7 +105,7 @@ export default {
   margin-bottom: 1em;
   border-bottom: solid $border-width $gray-500;
 }
-::v-deep .panel-section:not(:last-child) {
+:deep(.panel-section:not(:last-child)) {
   margin-bottom: 3rem;
 }
 </style>
diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index 6cb2a0b17..411bcdd79 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -57,7 +57,7 @@ export default {
     background-color: $white;
     border-width: 2px;
 
-    ::v-deep .popover-body {
+    :deep(.popover-body) {
       color: $dark;
     }
   }
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index cd8b1315a..640359746 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -145,7 +145,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .invalid-feedback code {
+:deep(.invalid-feedback code) {
   background-color: $gray-200;
 }
 </style>
diff --git a/app/src/components/globals/TopBar.vue b/app/src/components/globals/TopBar.vue
index 80ce5c4fa..171eaed2e 100644
--- a/app/src/components/globals/TopBar.vue
+++ b/app/src/components/globals/TopBar.vue
@@ -67,7 +67,7 @@ export default {
     #top-bar-right {
       margin-bottom: 0.75rem;
 
-      ::v-deep > * {
+      :deep(> *) {
         margin-bottom: 0.25rem;
       }
     }
@@ -88,7 +88,7 @@ export default {
       margin-left: auto;
     }
 
-    ::v-deep .btn {
+    :deep(.btn) {
       margin-left: 0.5rem;
       &.dropdown-toggle-split {
         margin-left: 0;
diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index cbbcb101a..edf6c5b54 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -83,7 +83,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.card-header {
+:deep(.card-header) {
   display: flex;
 
   .custom-header {
@@ -97,7 +97,7 @@ export default {
   }
 }
 
-.card-footer {
+:deep(.card-footer) {
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -106,7 +106,7 @@ export default {
     margin-left: 0.5rem;
   }
 }
-.collapse:not(.show) + .card-footer {
+:deep(.collapse:not(.show) + .card-footer) {
   display: none;
 }
 </style>
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 1afde1495..14b693110 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -80,7 +80,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .custom-file-label {
+:deep(.custom-file-label) {
   color: $input-placeholder-color;
 
   .btn-danger + .b-form-file & {
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index 5d36f1b3d..9151fb664 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -176,7 +176,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .dropdown-menu {
+:deep(.dropdown-menu) {
   max-height: 300px;
   overflow-y: auto;
   padding-top: 0;
diff --git a/app/src/views/_partials/ViewLockOverlay.vue b/app/src/views/_partials/ViewLockOverlay.vue
index 87bc75352..8450b12fd 100644
--- a/app/src/views/_partials/ViewLockOverlay.vue
+++ b/app/src/views/_partials/ViewLockOverlay.vue
@@ -74,23 +74,21 @@ export default {
     margin: 0 15%;
   }
 
-  ::v-deep {
-    .card-body {
-      padding: 1.5rem;
-      padding-bottom: 0;
-      max-height: 60vh;
-      overflow-y: auto;
+  :deep(.card-body) {
+    padding: 1.5rem;
+    padding-bottom: 0;
+    max-height: 60vh;
+    overflow-y: auto;
 
-      & > :last-child {
-        margin-bottom: 1.5rem;
-      }
+    & > :last-child {
+      margin-bottom: 1.5rem;
     }
+  }
 
-    .card-footer {
-      padding: 0.5rem 0.75rem;
-      display: flex;
-      justify-content: flex-end;
-    }
+  :deep(.card-footer) {
+    padding: 0.5rem 0.75rem;
+    display: flex;
+    justify-content: flex-end;
   }
 
   .card-header {
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 27b3e1e5e..edc67c49f 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -514,7 +514,7 @@ export default {
 
     flex-basis: 90%;
 
-    .card-body {
+    :deep(.card-body) {
       display: flex;
       flex-direction: column;
       justify-content: center;
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 3e95b0cf6..21a080c52 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -291,7 +291,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .on-off-switch {
+:deep(.on-off-switch) {
   .custom-control-input {
     &:checked ~ .custom-control-label::before {
       border-color: $success;
@@ -322,7 +322,7 @@ export default {
   }
 }
 
-::v-deep form {
+:deep(form) {
   margin-bottom: -1rem;
 
   & > * {

From 2a7733611d6abf2e7e46ac20865da458e3feb9dc Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 15:12:40 +0100
Subject: [PATCH 017/275] refactor: upgrade to vue-showdown4

---
 app/package.json                                          | 2 +-
 app/src/components/globals/FormField.vue                  | 1 -
 app/src/components/globals/formItems/MarkdownItem.vue     | 2 +-
 .../components/globals/formItems/ReadOnlyAlertItem.vue    | 7 +------
 app/src/main.js                                           | 5 +++--
 app/src/views/app/AppInfo.vue                             | 6 ++----
 app/src/views/app/AppInstall.vue                          | 8 ++------
 app/src/views/update/SystemUpdate.vue                     | 1 -
 8 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/app/package.json b/app/package.json
index 3c90df243..bf75782af 100644
--- a/app/package.json
+++ b/app/package.json
@@ -25,7 +25,7 @@
     "vue": "3.3.4",
     "vue-i18n": "^9.10.1",
     "vue-router": "^4.3.0",
-    "vue-showdown": "^2.4.1",
+    "vue-showdown": "^4.2.0",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 640359746..51c5937ab 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -36,7 +36,6 @@
         <VueShowdown
           v-if="description"
           :markdown="description"
-          flavor="github"
           :class="{
             ['alert p-1 px-2 alert-' + descriptionVariant]: descriptionVariant,
           }"
diff --git a/app/src/components/globals/formItems/MarkdownItem.vue b/app/src/components/globals/formItems/MarkdownItem.vue
index 4a7d0ca20..8f9501688 100644
--- a/app/src/components/globals/formItems/MarkdownItem.vue
+++ b/app/src/components/globals/formItems/MarkdownItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <VueShowdown :markdown="label" flavor="github" />
+  <VueShowdown :markdown="label" />
 </template>
 
 <script>
diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index d1c4354e1..aa70ea26c 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -6,12 +6,7 @@
   >
     <YIcon :iname="icon_" class="mr-md-3 mb-md-0 mb-2" :variant="type" />
 
-    <VueShowdown
-      :markdown="label"
-      flavor="github"
-      tag="span"
-      class="markdown"
-    />
+    <VueShowdown :markdown="label" tag="span" class="markdown" />
   </BAlert>
 </template>
 
diff --git a/app/src/main.js b/app/src/main.js
index e0d35cecd..75815f438 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -1,7 +1,7 @@
 import { createApp, configureCompat } from 'vue'
 import App from './App.vue'
 import BootstrapVue from 'bootstrap-vue'
-import VueShowdown from 'vue-showdown'
+import { VueShowdownPlugin } from 'vue-showdown'
 
 import store from './store'
 import router from './router'
@@ -29,7 +29,8 @@ app.use(BootstrapVue, {
   BBadge: { pill: true },
 })
 
-app.use(VueShowdown, {
+app.use(VueShowdownPlugin, {
+  flavor: 'github',
   options: {
     emoji: true,
   },
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index af43ae5f3..591858468 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -32,7 +32,6 @@
         v-for="[name, notif] in app.doc.notifications.postInstall"
         :key="name"
         :markdown="notif"
-        flavor="github"
         :options="{ headerLevelStart: 4 }"
       />
     </YAlert>
@@ -64,7 +63,6 @@
         v-for="[name, notif] in app.doc.notifications.postUpgrade"
         :key="name"
         :markdown="notif"
-        flavor="github"
         :options="{ headerLevelStart: 4 }"
       />
     </YAlert>
@@ -118,7 +116,7 @@
         </a>
       </p>
 
-      <VueShowdown :markdown="app.description" flavor="github" />
+      <VueShowdown :markdown="app.description" />
     </section>
 
     <YAlert v-if="config_panel_err" class="mb-4" variant="danger" icon="bug">
@@ -279,7 +277,7 @@
             <YIcon iname="book" class="mr-2" />
             {{ name === 'admin' ? $t('app.doc.admin.title') : name }}
           </template>
-          <VueShowdown :markdown="content" flavor="github" />
+          <VueShowdown :markdown="content" />
         </BTab>
       </BTabs>
     </BCard>
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 678ba9e6a..1da7fb8f2 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -27,7 +27,7 @@
           </template>
         </p>
 
-        <VueShowdown :markdown="app.description" flavor="github" />
+        <VueShowdown :markdown="app.description" />
 
         <BImg
           v-if="app.screenshot"
@@ -120,11 +120,7 @@
           v-t="'app.install.problems.lowquality'"
         />
 
-        <VueShowdown
-          v-if="app.preInstall"
-          :markdown="app.preInstall"
-          flavor="github"
-        />
+        <VueShowdown v-if="app.preInstall" :markdown="app.preInstall" />
       </YAlert>
 
       <YAlert
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 8b15fc376..08b3cbbd6 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -127,7 +127,6 @@
             <BCardBody>
               <VueShowdown
                 :markdown="notif"
-                flavor="github"
                 :options="{ headerLevelStart: 6 }"
               />
             </BCardBody>

From 654d73e7611f4843023ccc1fb266242e62e7cf01 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 16:42:30 +0100
Subject: [PATCH 018/275] refactor: upgrade to date-fns3

---
 app/package.json        | 2 +-
 app/src/i18n/helpers.js | 4 +---
 app/vite.config.js      | 4 +---
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/package.json b/app/package.json
index bf75782af..070941e5d 100644
--- a/app/package.json
+++ b/app/package.json
@@ -19,7 +19,7 @@
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "bootstrap-vue": "^2.23.1",
-    "date-fns": "^2.29.3",
+    "date-fns": "^3.3.1",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
     "vue": "3.3.4",
diff --git a/app/src/i18n/helpers.js b/app/src/i18n/helpers.js
index 1899f1cac..bc25555f7 100644
--- a/app/src/i18n/helpers.js
+++ b/app/src/i18n/helpers.js
@@ -90,9 +90,7 @@ export async function loadLocaleMessages(locale) {
 async function loadDateFnsLocale(locale) {
   const dateFnsLocaleName = supportedLocales[locale].dateFnsLocale || locale
   dateFnsLocale = (
-    await import(
-      `../../node_modules/date-fns/esm/locale/${dateFnsLocaleName}/index.js`
-    )
+    await import(`../../node_modules/date-fns/locale/${dateFnsLocaleName}.mjs`)
   ).default
 }
 
diff --git a/app/vite.config.js b/app/vite.config.js
index 01fb68258..c1997d07b 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -68,9 +68,7 @@ export default defineConfig(({ command, mode }) => {
             }
             // Split date-fns locales
             if (id.includes('date-fns')) {
-              const match = /.*\/date-fns\/esm\/locale\/([\w-]+)\/.*\.js/.exec(
-                id,
-              )
+              const match = /.*\/date-fns\/locale\/([\w-]+)\/.*\.mjs/.exec(id)
               if (match) {
                 if (supportedDatefnsLocales.includes(match[1])) {
                   return `locales/${match[1]}/date-fns`

From d398b93c6a7742fd66b4db9f0fa8d10805df0578 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 16:43:14 +0100
Subject: [PATCH 019/275] refactor: upgrade fonts

---
 app/package.json       |   4 +-
 app/src/scss/font.scss | 141 +++++++++++++++++++++++++++++++++--------
 2 files changed, 116 insertions(+), 29 deletions(-)

diff --git a/app/package.json b/app/package.json
index 070941e5d..39c9c1de8 100644
--- a/app/package.json
+++ b/app/package.json
@@ -13,8 +13,8 @@
     "lintfix": "prettier --write --list-different . && yarn lint:js --fix"
   },
   "dependencies": {
-    "@fontsource/fira-code": "^4.5.13",
-    "@fontsource/firago": "^4.5.3",
+    "@fontsource/fira-code": "^5.0.17",
+    "@fontsource/firago": "^5.0.7",
     "@vue/compat": "3.3.4",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
diff --git a/app/src/scss/font.scss b/app/src/scss/font.scss
index bcc4f4277..401828778 100644
--- a/app/src/scss/font.scss
+++ b/app/src/scss/font.scss
@@ -6,90 +6,98 @@
   ╰─────────────────────────╯
 */
 
-/* firago-all-300-italic*/
+/* firago-latin-300-italic*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO ExtraLight Italic'),
-    url('~@fontsource/firago/files/firago-all-200-italic.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-200-italic.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-200-italic.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-200-italic.woff') format('woff');
   font-weight: 200;
   font-style: italic;
   font-display: swap;
 }
-/* firago-all-300-normal*/
+/* firago-latin-300-normal*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO ExtraLight'),
-    url('~@fontsource/firago/files/firago-all-200-normal.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-200-normal.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-200-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-200-normal.woff') format('woff');
   font-weight: 200;
   font-style: normal;
   font-display: swap;
 }
-/* firago-all-400-italic*/
+/* firago-latin-400-italic*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO Italic'),
-    url('~@fontsource/firago/files/firago-all-400-italic.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-400-italic.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-400-italic.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-400-italic.woff') format('woff');
   font-weight: 400;
   font-style: italic;
   font-display: swap;
 }
-/* firago-all-400-normal*/
+/* firago-latin-400-normal*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO Regular'),
-    url('~@fontsource/firago/files/firago-all-400-normal.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-400-normal.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-400-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-400-normal.woff') format('woff');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
-/* firago-all-500-italic*/
+/* firago-latin-500-italic*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO Medium Italic'),
-    url('~@fontsource/firago/files/firago-all-500-italic.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-500-italic.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-500-italic.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-500-italic.woff') format('woff');
   font-weight: 500;
   font-style: italic;
   font-display: swap;
 }
-/* firago-all-500-normal*/
+/* firago-latin-500-normal*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO Medium'),
-    url('~@fontsource/firago/files/firago-all-500-normal.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-500-normal.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-500-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-500-normal.woff') format('woff');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
-/* firago-all-700-italic*/
+/* firago-latin-700-italic*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO Bold Italic'),
-    url('~@fontsource/firago/files/firago-all-700-italic.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-700-italic.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-700-italic.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-700-italic.woff') format('woff');
   font-weight: 700;
   font-style: italic;
   font-display: swap;
 }
-/* firago-all-700-normal*/
+/* firago-latin-700-normal*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO Bold'),
-    url('~@fontsource/firago/files/firago-all-700-normal.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-700-normal.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-700-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-700-normal.woff') format('woff');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
@@ -103,13 +111,92 @@
   ╰───────────────────────────────╯
 */
 
+/* fira-code-cyrillic-ext-400-normal */
 @font-face {
   font-family: 'Fira Code';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    url('~@fontsource/fira-code/files/fira-code-cyrillic-ext-400-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/fira-code/files/fira-code-cyrillic-ext-400-normal.woff')
+      format('woff');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+/* fira-code-cyrillic-400-normal */
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    url('~@fontsource/fira-code/files/fira-code-cyrillic-400-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/fira-code/files/fira-code-cyrillic-400-normal.woff')
+      format('woff');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* fira-code-greek-ext-400-normal */
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    url('~@fontsource/fira-code/files/fira-code-greek-ext-400-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/fira-code/files/fira-code-greek-ext-400-normal.woff')
+      format('woff');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* fira-code-greek-400-normal */
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
   src:
-    local('Fira Code Regular'),
-    // url('~@fontsource/fira-code/files/fira-code-all-400-normal.woff2') format('woff2'),
-    url('~@fontsource/fira-code/files/fira-code-all-400-normal.woff')
+    url('~@fontsource/fira-code/files/fira-code-greek-400-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/fira-code/files/fira-code-greek-400-normal.woff')
       format('woff');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
+    U+03A3-03FF;
+}
+
+/* fira-code-latin-ext-400-normal */
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-display: swap;
   font-weight: 400;
+  src:
+    url('~@fontsource/fira-code/files/fira-code-latin-ext-400-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/fira-code/files/fira-code-latin-ext-400-normal.woff')
+      format('woff');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
+    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* fira-code-latin-400-normal */
+@font-face {
+  font-family: 'Fira Code';
   font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    // local('Fira Code Regular'),
+    url('~@fontsource/fira-code/files/fira-code-latin-400-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/fira-code/files/fira-code-latin-400-normal.woff')
+      format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

From 4ff3c33b784bf85f4fe8d7ce27d1875013521201 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 16:44:05 +0100
Subject: [PATCH 020/275] refactor: upgrade to vite5

---
 app/package.json   | 2 +-
 app/vite.config.js | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/package.json b/app/package.json
index 39c9c1de8..5533369d9 100644
--- a/app/package.json
+++ b/app/package.json
@@ -39,7 +39,7 @@
     "portal-vue": "^2.1.7",
     "prettier": "^3.2.5",
     "sass": "^1.60.0",
-    "vite": "^4.2.1"
+    "vite": "^5.1.4"
   },
   "browserslist": [
     "> 1%",
diff --git a/app/vite.config.js b/app/vite.config.js
index c1997d07b..bd9be9d74 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -25,7 +25,12 @@ export default defineConfig(({ command, mode }) => {
       alias: [
         { find: 'vue', replacement: '@vue/compat' },
         // this is required for the SCSS modules imports with `~` (node_modules)
-        { find: /^~(.*)$/, replacement: '$1' },
+        {
+          find: /^~(.*)$/,
+          replacement: fileURLToPath(
+            new URL('./node_modules/$1', import.meta.url),
+          ),
+        },
         {
           find: '@',
           replacement: fileURLToPath(new URL('./src', import.meta.url)),

From 37cc90dffd5e4d8743d9e19f1e8de91346f396e3 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 16:44:37 +0100
Subject: [PATCH 021/275] chore: upgrade eslint + sass

---
 app/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/package.json b/app/package.json
index 5533369d9..49b3242f9 100644
--- a/app/package.json
+++ b/app/package.json
@@ -31,14 +31,14 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
     "bootstrap": "^4.6.0",
-    "eslint": "^8.36.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.22.0",
     "popper.js": "^1.16.0",
     "portal-vue": "^2.1.7",
     "prettier": "^3.2.5",
-    "sass": "^1.60.0",
+    "sass": "^1.71.1",
     "vite": "^5.1.4"
   },
   "browserslist": [

From f1cbc360c70b162ba98bb87afe3cf22bafb829fa Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 8 Mar 2024 03:02:25 +0100
Subject: [PATCH 022/275] refactor: turn all components/views to compat 3

---
 app/src/App.vue                                              | 1 +
 app/src/components/AdressInputSelect.vue                     | 1 +
 app/src/components/CardCollapse.vue                          | 1 +
 app/src/components/CardDeckFeed.vue                          | 1 +
 app/src/components/ConfigPanel.vue                           | 1 +
 app/src/components/ConfigPanels.vue                          | 1 +
 app/src/components/LazyRenderer.vue                          | 1 +
 app/src/components/MessageListGroup.vue                      | 1 +
 app/src/components/QueryHeader.vue                           | 1 +
 app/src/components/RecursiveListGroup.vue                    | 1 +
 app/src/components/RoutableTabs.vue                          | 1 +
 app/src/components/globals/AbstractForm.vue                  | 1 +
 app/src/components/globals/CardForm.vue                      | 1 +
 app/src/components/globals/DescriptionRow.vue                | 1 +
 app/src/components/globals/ExplainWhat.vue                   | 1 +
 app/src/components/globals/FormField.vue                     | 1 +
 app/src/components/globals/ReadOnlyField.vue                 | 1 +
 app/src/components/globals/TopBar.vue                        | 1 +
 app/src/components/globals/ViewBase.vue                      | 1 +
 app/src/components/globals/ViewSearch.vue                    | 1 +
 app/src/components/globals/YAlert.vue                        | 1 +
 app/src/components/globals/YBreadcrumb.vue                   | 1 +
 app/src/components/globals/YCard.vue                         | 1 +
 app/src/components/globals/YIcon.vue                         | 1 +
 app/src/components/globals/YListGroupItem.vue                | 1 +
 app/src/components/globals/YSpinner.vue                      | 1 +
 app/src/components/globals/formItems/ButtonItem.vue          | 1 +
 app/src/components/globals/formItems/CheckboxItem.vue        | 1 +
 app/src/components/globals/formItems/DisplayTextItem.vue     | 1 +
 app/src/components/globals/formItems/FileItem.vue            | 1 +
 app/src/components/globals/formItems/InputItem.vue           | 1 +
 app/src/components/globals/formItems/MarkdownItem.vue        | 1 +
 app/src/components/globals/formItems/ReadOnlyAlertItem.vue   | 1 +
 app/src/components/globals/formItems/SelectItem.vue          | 1 +
 app/src/components/globals/formItems/TagsItem.vue            | 1 +
 app/src/components/globals/formItems/TagsSelectizeItem.vue   | 1 +
 app/src/components/globals/formItems/TextAreaItem.vue        | 1 +
 app/src/components/globals/skeletons/CardButtonsSkeleton.vue | 1 +
 app/src/components/globals/skeletons/CardFormSkeleton.vue    | 1 +
 app/src/components/globals/skeletons/CardInfoSkeleton.vue    | 1 +
 app/src/components/globals/skeletons/CardListSkeleton.vue    | 1 +
 app/src/components/globals/skeletons/ListGroupSkeleton.vue   | 1 +
 app/src/views/HomeView.vue                                   | 1 +
 app/src/views/LoginView.vue                                  | 1 +
 app/src/views/PostInstall.vue                                | 1 +
 app/src/views/_partials/DomainForm.vue                       | 1 +
 app/src/views/_partials/ErrorDisplay.vue                     | 1 +
 app/src/views/_partials/HistoryConsole.vue                   | 1 +
 app/src/views/_partials/ReconnectingDisplay.vue              | 1 +
 app/src/views/_partials/ViewLockOverlay.vue                  | 1 +
 app/src/views/_partials/WaitingDisplay.vue                   | 1 +
 app/src/views/_partials/WarningDisplay.vue                   | 1 +
 app/src/views/app/AppCatalog.vue                             | 1 +
 app/src/views/app/AppInfo.vue                                | 1 +
 app/src/views/app/AppInstall.vue                             | 1 +
 app/src/views/app/AppList.vue                                | 1 +
 app/src/views/backup/BackupCreate.vue                        | 1 +
 app/src/views/backup/BackupInfo.vue                          | 1 +
 app/src/views/backup/BackupList.vue                          | 1 +
 app/src/views/backup/BackupView.vue                          | 1 +
 app/src/views/diagnosis/DiagnosisView.vue                    | 1 +
 app/src/views/domain/DomainAdd.vue                           | 1 +
 app/src/views/domain/DomainDns.vue                           | 1 +
 app/src/views/domain/DomainInfo.vue                          | 1 +
 app/src/views/domain/DomainList.vue                          | 1 +
 app/src/views/group/GroupCreate.vue                          | 1 +
 app/src/views/group/GroupList.vue                            | 1 +
 app/src/views/service/ServiceInfo.vue                        | 1 +
 app/src/views/service/ServiceList.vue                        | 1 +
 app/src/views/tool/ToolFirewall.vue                          | 1 +
 app/src/views/tool/ToolList.vue                              | 1 +
 app/src/views/tool/ToolLog.vue                               | 1 +
 app/src/views/tool/ToolLogs.vue                              | 1 +
 app/src/views/tool/ToolMigrations.vue                        | 1 +
 app/src/views/tool/ToolPower.vue                             | 1 +
 app/src/views/tool/ToolSettings.vue                          | 1 +
 app/src/views/tool/ToolWebadmin.vue                          | 1 +
 app/src/views/update/SystemUpdate.vue                        | 1 +
 app/src/views/user/UserCreate.vue                            | 1 +
 app/src/views/user/UserEdit.vue                              | 1 +
 app/src/views/user/UserImport.vue                            | 1 +
 app/src/views/user/UserInfo.vue                              | 1 +
 app/src/views/user/UserList.vue                              | 1 +
 83 files changed, 83 insertions(+)

diff --git a/app/src/App.vue b/app/src/App.vue
index c4da25557..b66eba504 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -101,6 +101,7 @@ import { mapGetters } from 'vuex'
 import { HistoryConsole, ViewLockOverlay } from '@/views/_partials'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'App',
 
   components: {
diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
index aa0dc19f2..623921cb9 100644
--- a/app/src/components/AdressInputSelect.vue
+++ b/app/src/components/AdressInputSelect.vue
@@ -39,6 +39,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'AdressInputSelect',
 
   inheritAttrs: false,
diff --git a/app/src/components/CardCollapse.vue b/app/src/components/CardCollapse.vue
index ef6471686..ed70a418d 100644
--- a/app/src/components/CardCollapse.vue
+++ b/app/src/components/CardCollapse.vue
@@ -23,6 +23,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardCollapse',
 
   props: {
diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index 54b157d5d..f747932cb 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -3,6 +3,7 @@
 // https://www.w3.org/WAI/ARIA/apg/patterns/feed/
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardDeckFeed',
 
   props: {
diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
index 9c62cbf3a..9ccb523a9 100644
--- a/app/src/components/ConfigPanel.vue
+++ b/app/src/components/ConfigPanel.vue
@@ -54,6 +54,7 @@
 import { filterObject } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ConfigPanel',
 
   props: {
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 57c5a2208..1fd948d62 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -30,6 +30,7 @@ import { toRef } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ConfigPanels',
 
   inheritAttrs: false,
diff --git a/app/src/components/LazyRenderer.vue b/app/src/components/LazyRenderer.vue
index 829f2d3c1..d2b6b2cc2 100644
--- a/app/src/components/LazyRenderer.vue
+++ b/app/src/components/LazyRenderer.vue
@@ -6,6 +6,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'LazyRenderer',
 
   props: {
diff --git a/app/src/components/MessageListGroup.vue b/app/src/components/MessageListGroup.vue
index 0295bf2e1..c0830e685 100644
--- a/app/src/components/MessageListGroup.vue
+++ b/app/src/components/MessageListGroup.vue
@@ -24,6 +24,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'MessageListGroup',
 
   props: {
diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index 05e7d943f..e6b04543c 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -49,6 +49,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'QueryHeader',
 
   props: {
diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 2e30a3dc6..415cdd30c 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -45,6 +45,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'RecursiveListGroup',
 
   props: {
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index 651446241..d046b7c88 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -33,6 +33,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'RoutableTabs',
 
   // Thanks to `v-bind="$attrs"` and `inheritAttrs: false`, this component can forward
diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index 8bf225963..170bb4143 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -32,6 +32,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'AbstractForm',
 
   props: {
diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index 16e8d0adc..b28d60f60 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -37,6 +37,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardForm',
 
   props: {
diff --git a/app/src/components/globals/DescriptionRow.vue b/app/src/components/globals/DescriptionRow.vue
index e7265c3df..ec986a2f4 100644
--- a/app/src/components/globals/DescriptionRow.vue
+++ b/app/src/components/globals/DescriptionRow.vue
@@ -16,6 +16,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DescriptionRow',
 
   props: {
diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index 411bcdd79..37c114d09 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -24,6 +24,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ExplainWhat',
 
   props: {
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 51c5937ab..b19bd42a7 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -49,6 +49,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'FormField',
 
   inheritAttrs: false,
diff --git a/app/src/components/globals/ReadOnlyField.vue b/app/src/components/globals/ReadOnlyField.vue
index 39949a728..f22d08ac5 100644
--- a/app/src/components/globals/ReadOnlyField.vue
+++ b/app/src/components/globals/ReadOnlyField.vue
@@ -13,6 +13,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ReadOnlyField',
 
   inheritAttrs: false,
diff --git a/app/src/components/globals/TopBar.vue b/app/src/components/globals/TopBar.vue
index 171eaed2e..7f0379c37 100644
--- a/app/src/components/globals/TopBar.vue
+++ b/app/src/components/globals/TopBar.vue
@@ -16,6 +16,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'TopBar',
 
   props: {
diff --git a/app/src/components/globals/ViewBase.vue b/app/src/components/globals/ViewBase.vue
index f1c696848..dbc79d422 100644
--- a/app/src/components/globals/ViewBase.vue
+++ b/app/src/components/globals/ViewBase.vue
@@ -33,6 +33,7 @@
 import api from '@/api'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ViewBase',
 
   props: {
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index d2affd539..4eddcadcf 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -57,6 +57,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ViewSearch',
 
   props: {
diff --git a/app/src/components/globals/YAlert.vue b/app/src/components/globals/YAlert.vue
index 5cc9a8533..8d69995b5 100644
--- a/app/src/components/globals/YAlert.vue
+++ b/app/src/components/globals/YAlert.vue
@@ -18,6 +18,7 @@
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'YAlert',
 
   props: {
diff --git a/app/src/components/globals/YBreadcrumb.vue b/app/src/components/globals/YBreadcrumb.vue
index 858708a8e..2a74e6839 100644
--- a/app/src/components/globals/YBreadcrumb.vue
+++ b/app/src/components/globals/YBreadcrumb.vue
@@ -20,6 +20,7 @@
 import { mapGetters } from 'vuex'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'YBreadcrumb',
 
   computed: {
diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index edf6c5b54..1f730810c 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -56,6 +56,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'YCard',
 
   props: {
diff --git a/app/src/components/globals/YIcon.vue b/app/src/components/globals/YIcon.vue
index 15fbcc8ce..447f7ccfa 100644
--- a/app/src/components/globals/YIcon.vue
+++ b/app/src/components/globals/YIcon.vue
@@ -7,6 +7,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'YIcon',
   props: {
     iname: { type: String, required: true },
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index cf2cc82ab..2d602ae5a 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -14,6 +14,7 @@
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'YListGroupItem',
 
   props: {
diff --git a/app/src/components/globals/YSpinner.vue b/app/src/components/globals/YSpinner.vue
index 388e80d57..16ea4019e 100644
--- a/app/src/components/globals/YSpinner.vue
+++ b/app/src/components/globals/YSpinner.vue
@@ -6,6 +6,7 @@
 import { mapGetters } from 'vuex'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'YSpinner',
 
   computed: {
diff --git a/app/src/components/globals/formItems/ButtonItem.vue b/app/src/components/globals/formItems/ButtonItem.vue
index 5bd09ad99..42541441f 100644
--- a/app/src/components/globals/formItems/ButtonItem.vue
+++ b/app/src/components/globals/formItems/ButtonItem.vue
@@ -13,6 +13,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ButtonItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index fa1158d37..e6722e2da 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -12,6 +12,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CheckboxItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/DisplayTextItem.vue b/app/src/components/globals/formItems/DisplayTextItem.vue
index 3b85983ce..e83740c22 100644
--- a/app/src/components/globals/formItems/DisplayTextItem.vue
+++ b/app/src/components/globals/formItems/DisplayTextItem.vue
@@ -6,6 +6,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DisplayTextItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 14b693110..3e9705d4d 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -30,6 +30,7 @@
 import { getFileContent } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'FileItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index 4bdb87125..687b42807 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -18,6 +18,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'InputItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/MarkdownItem.vue b/app/src/components/globals/formItems/MarkdownItem.vue
index 8f9501688..9347c78e8 100644
--- a/app/src/components/globals/formItems/MarkdownItem.vue
+++ b/app/src/components/globals/formItems/MarkdownItem.vue
@@ -4,6 +4,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'MarkdownItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index aa70ea26c..c825da6f2 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -12,6 +12,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ReadOnlyAlertItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index 586d48a07..f02bbe703 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -11,6 +11,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'SelectItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index c212287d4..c8d378121 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -16,6 +16,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'TagsItem',
 
   data() {
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index 9151fb664..89efb9334 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -93,6 +93,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'TagsSelectizeItem',
 
   inheritAttrs: false,
diff --git a/app/src/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index ef4088915..9e909b364 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -13,6 +13,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'TextAreaItem',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardButtonsSkeleton.vue b/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
index cd05d93b5..0e64374ba 100644
--- a/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
@@ -21,6 +21,7 @@
 import { randint } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardButtonsSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardFormSkeleton.vue b/app/src/components/globals/skeletons/CardFormSkeleton.vue
index 4cf810cfe..5ea6c9f9e 100644
--- a/app/src/components/globals/skeletons/CardFormSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardFormSkeleton.vue
@@ -47,6 +47,7 @@
 import { randint } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardFormSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardInfoSkeleton.vue b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
index 7a5435ae6..59cf82c31 100644
--- a/app/src/components/globals/skeletons/CardInfoSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
@@ -19,6 +19,7 @@
 import { randint } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardInfoSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardListSkeleton.vue b/app/src/components/globals/skeletons/CardListSkeleton.vue
index 0726603b7..bf1ed6e5f 100644
--- a/app/src/components/globals/skeletons/CardListSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardListSkeleton.vue
@@ -23,6 +23,7 @@
 import { randint } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardListSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/ListGroupSkeleton.vue b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
index 0f638d3ef..41a381ad3 100644
--- a/app/src/components/globals/skeletons/ListGroupSkeleton.vue
+++ b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
@@ -11,6 +11,7 @@
 import { randint } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ListGroupSkeleton',
 
   props: {
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index ae303438d..e9a4c4606 100644
--- a/app/src/views/HomeView.vue
+++ b/app/src/views/HomeView.vue
@@ -16,6 +16,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'HomeView',
 
   data() {
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index e2c478685..5782f2af3 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -39,6 +39,7 @@ import { useVuelidate } from '@vuelidate/core'
 import { alphalownumdot_, required, minLength } from '@/helpers/validators'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'LoginView',
 
   props: {
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 8b1e92e01..145ae58d1 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -104,6 +104,7 @@ import {
 } from '@/helpers/validators'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'PostInstall',
 
   components: {
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 92aec5959..41952a57c 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -129,6 +129,7 @@ import {
 } from '@/helpers/validators'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DomainForm',
 
   props: {
diff --git a/app/src/views/_partials/ErrorDisplay.vue b/app/src/views/_partials/ErrorDisplay.vue
index fd11eea02..1bfa0c51e 100644
--- a/app/src/views/_partials/ErrorDisplay.vue
+++ b/app/src/views/_partials/ErrorDisplay.vue
@@ -54,6 +54,7 @@
 import MessageListGroup from '@/components/MessageListGroup.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ErrorDisplay',
 
   components: {
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index 022fc0d03..725797c82 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -94,6 +94,7 @@ import QueryHeader from '@/components/QueryHeader.vue'
 import MessageListGroup from '@/components/MessageListGroup.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'HistoryConsole',
 
   components: {
diff --git a/app/src/views/_partials/ReconnectingDisplay.vue b/app/src/views/_partials/ReconnectingDisplay.vue
index 65e94c4a4..acbf7dee5 100644
--- a/app/src/views/_partials/ReconnectingDisplay.vue
+++ b/app/src/views/_partials/ReconnectingDisplay.vue
@@ -43,6 +43,7 @@ import api from '@/api'
 import LoginView from '@/views/LoginView.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ReconnectingDisplay',
 
   components: {
diff --git a/app/src/views/_partials/ViewLockOverlay.vue b/app/src/views/_partials/ViewLockOverlay.vue
index 8450b12fd..f1b3dc464 100644
--- a/app/src/views/_partials/ViewLockOverlay.vue
+++ b/app/src/views/_partials/ViewLockOverlay.vue
@@ -30,6 +30,7 @@ import {
 import QueryHeader from '@/components/QueryHeader.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ViewLockOverlay',
 
   components: {
diff --git a/app/src/views/_partials/WaitingDisplay.vue b/app/src/views/_partials/WaitingDisplay.vue
index baee407db..89d9d821a 100644
--- a/app/src/views/_partials/WaitingDisplay.vue
+++ b/app/src/views/_partials/WaitingDisplay.vue
@@ -30,6 +30,7 @@
 import MessageListGroup from '@/components/MessageListGroup.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'WaitingDisplay',
 
   components: {
diff --git a/app/src/views/_partials/WarningDisplay.vue b/app/src/views/_partials/WarningDisplay.vue
index 62360d187..000b9a96a 100644
--- a/app/src/views/_partials/WarningDisplay.vue
+++ b/app/src/views/_partials/WarningDisplay.vue
@@ -13,6 +13,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'WarningDisplay',
 
   props: {
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index edc67c49f..e63ee4185 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -227,6 +227,7 @@ import { required, appRepoUrl } from '@/helpers/validators'
 import { randint } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'AppCatalog',
 
   components: {
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 591858468..989ae31c3 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -377,6 +377,7 @@ import {
 import ConfigPanels from '@/components/ConfigPanels.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'AppInfo',
 
   components: {
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 1da7fb8f2..345b7dacd 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -217,6 +217,7 @@ import {
 import CardCollapse from '@/components/CardCollapse.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'AppInstall',
 
   components: {
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index e699ac42b..3eae3af10 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -39,6 +39,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'AppList',
 
   data() {
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index 38c6cda8d..3a5d1a7fa 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -127,6 +127,7 @@
 import api from '@/api'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'BackupCreate',
 
   props: {
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index 891fec748..dddf626c2 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -142,6 +142,7 @@ import { humanSize } from '@/helpers/filters/human'
 import { isEmptyValue } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'BackupInfo',
 
   props: {
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index 5389b086d..16a0701b6 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -49,6 +49,7 @@ import { distanceToNow, readableDate } from '@/helpers/filters/date'
 import { humanSize } from '@/helpers/filters/human'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'BackupList',
 
   props: {
diff --git a/app/src/views/backup/BackupView.vue b/app/src/views/backup/BackupView.vue
index f94a5f8b9..8202b19b4 100644
--- a/app/src/views/backup/BackupView.vue
+++ b/app/src/views/backup/BackupView.vue
@@ -24,6 +24,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'BackupView',
 
   data() {
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 58549cee1..aac150340 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -153,6 +153,7 @@ import { distanceToNow } from '@/helpers/filters/date'
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DiagnosisView',
 
   data() {
diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/domain/DomainAdd.vue
index 745a81ad3..73b8d6ac1 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -14,6 +14,7 @@ import api from '@/api'
 import { DomainForm } from '@/views/_partials'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DomainAdd',
 
   data() {
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index 4ac881aaf..c99145a30 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -148,6 +148,7 @@ import api from '@/api'
 import { isEmptyValue } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DomainDns',
 
   props: {
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 8a48510b4..8715fa1d8 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -149,6 +149,7 @@ import ConfigPanels from '@/components/ConfigPanels.vue'
 import DomainDns from './DomainDns.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DomainInfo',
 
   components: {
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 4c123e78f..62a471bf0 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -53,6 +53,7 @@ import { mapGetters } from 'vuex'
 import RecursiveListGroup from '@/components/RecursiveListGroup.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DomainList',
 
   components: {
diff --git a/app/src/views/group/GroupCreate.vue b/app/src/views/group/GroupCreate.vue
index fb571677d..aad17ee7b 100644
--- a/app/src/views/group/GroupCreate.vue
+++ b/app/src/views/group/GroupCreate.vue
@@ -22,6 +22,7 @@ import api from '@/api'
 import { required, alphalownumdot_ } from '@/helpers/validators'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'GroupCreate',
 
   setup() {
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 375941db4..527413cfe 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -142,6 +142,7 @@ import TagsSelectizeItem from '@/components/globals/formItems/TagsSelectizeItem.
 // TODO add global search with type (search by: group, user, permission)
 // TODO add vuex store update on inputs ?
 export default {
+  compatConfig: { MODE: 3 },
   name: 'GroupList',
 
   components: {
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index fd9082e99..6270b35b0 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -86,6 +86,7 @@ import api from '@/api'
 import { distanceToNow } from '@/helpers/filters/date'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ServiceInfo',
 
   props: {
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 9702aac78..3858177b6 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -46,6 +46,7 @@
 import { distanceToNow } from '@/helpers/filters/date'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ServiceList',
 
   data() {
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 21a080c52..7e81e71f2 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -125,6 +125,7 @@ import api from '@/api'
 import { required, integer, between } from '@/helpers/validators'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolFirewall',
 
   setup() {
diff --git a/app/src/views/tool/ToolList.vue b/app/src/views/tool/ToolList.vue
index 8c4cead27..ec611ac52 100644
--- a/app/src/views/tool/ToolList.vue
+++ b/app/src/views/tool/ToolList.vue
@@ -15,6 +15,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolList',
 
   data() {
diff --git a/app/src/views/tool/ToolLog.vue b/app/src/views/tool/ToolLog.vue
index 2a4e0fd6c..1c44d5549 100644
--- a/app/src/views/tool/ToolLog.vue
+++ b/app/src/views/tool/ToolLog.vue
@@ -78,6 +78,7 @@ import { escapeHtml } from '@/helpers/commons'
 import { readableDate } from '@/helpers/filters/date'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolLog',
 
   props: {
diff --git a/app/src/views/tool/ToolLogs.vue b/app/src/views/tool/ToolLogs.vue
index c1874d8ff..f94577b8a 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -29,6 +29,7 @@
 import { distanceToNow, readableDate } from '@/helpers/filters/date'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolLogs',
 
   data() {
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index 643a966ec..98fbec3e3 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -91,6 +91,7 @@ import api from '@/api'
 
 // FIXME not tested with pending migrations (disclaimer and stuff)
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolMigrations',
 
   data() {
diff --git a/app/src/views/tool/ToolPower.vue b/app/src/views/tool/ToolPower.vue
index 0443f0434..7864da33a 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -37,6 +37,7 @@
 import api from '@/api'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolPower',
 
   methods: {
diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index 69eacd1a6..2542d677c 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -23,6 +23,7 @@ import {
 import ConfigPanels from '@/components/ConfigPanels.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolSettingsConfig',
 
   components: {
diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index 90200cf49..b4ee2cc23 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/app/src/views/tool/ToolWebadmin.vue
@@ -27,6 +27,7 @@ function mapStoreGetSet(props = [], action = 'commit') {
 }
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolWebadmin',
 
   data() {
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 08b3cbbd6..2c0e49913 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -144,6 +144,7 @@ import { mapGetters } from 'vuex'
 import CardCollapse from '@/components/CardCollapse.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'SystemUpdate',
 
   components: {
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index 7d62555d3..64557e5ae 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -84,6 +84,7 @@ import {
 } from '@/helpers/validators'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'UserCreate',
 
   setup() {
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index e8ae18b6b..2cbe98209 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -134,6 +134,7 @@ import {
 import AdressInputSelect from '@/components/AdressInputSelect.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'UserEdit',
 
   props: {
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index b0286b7f1..9fd16f2e3 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -29,6 +29,7 @@ import { formatFormData } from '@/helpers/yunohostArguments'
 import { required } from '@/helpers/validators'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'UserImport',
 
   setup() {
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index 2929cfd40..922e47233 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -106,6 +106,7 @@
 import api from '@/api'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'UserInfo',
 
   props: {
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 4fd56f4cd..328cba5c7 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -56,6 +56,7 @@
 import { mapGetters } from 'vuex'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'UserList',
 
   data() {

From cc98de76b5545a645861480696beb2bb4703fb14 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sat, 9 Mar 2024 17:34:47 +0100
Subject: [PATCH 023/275] migration: vue3 TRANSITION_CLASSES

---
 app/src/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index b66eba504..85985becf 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -227,7 +227,7 @@ main {
   .animated {
     transition: all 0.15s ease-in-out;
   }
-  .slide-left-enter,
+  .slide-left-enter-from,
   .slide-right-leave-active {
     position: absolute;
     width: 100%;
@@ -235,7 +235,7 @@ main {
     transform: translate(100vw, 0);
   }
   .slide-left-leave-active,
-  .slide-right-enter {
+  .slide-right-enter-from {
     position: absolute;
     width: 100%;
     top: 0;

From 2898a4f5bda928e9a2b66c7fd9474aca6749834d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 10 Mar 2024 19:50:13 +0100
Subject: [PATCH 024/275] migration: vue3 COMPONENT_V_MODEL

---
 app/src/components/AdressInputSelect.vue      | 21 +++++++++----------
 app/src/components/globals/FormField.vue      |  5 +++--
 .../globals/formItems/CheckboxItem.vue        | 14 +++++--------
 .../components/globals/formItems/FileItem.vue | 16 +++++++-------
 .../globals/formItems/InputItem.vue           |  5 +++--
 .../globals/formItems/SelectItem.vue          |  7 ++++---
 .../components/globals/formItems/TagsItem.vue | 10 +++------
 .../globals/formItems/TagsSelectizeItem.vue   |  8 ++++---
 .../globals/formItems/TextAreaItem.vue        |  5 +++--
 9 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
index 623921cb9..be5abd243 100644
--- a/app/src/components/AdressInputSelect.vue
+++ b/app/src/components/AdressInputSelect.vue
@@ -2,24 +2,24 @@
   <BInputGroup v-bind="$attrs">
     <InputItem
       :id="id"
-      :value="value.localPart"
+      :modelValue="modelValue.localPart"
       :placeholder="placeholder"
       :state="state"
       :aria-describedby="id + 'local-part-desc'"
-      @input="onInput('localPart', $event)"
+      @update:modelValue="onInput('localPart', $event)"
       @blur="$parent.$emit('touch')"
     />
 
     <BInputGroupAppend>
-      <BInputGroupText>{{ value.separator }}</BInputGroupText>
+      <BInputGroupText>{{ modelValue.separator }}</BInputGroupText>
     </BInputGroupAppend>
 
     <BInputGroupAppend>
       <SelectItem
-        :value="value.domain"
+        :modelValue="modelValue.domain"
         :choices="choices"
         :aria-describedby="id + 'domain-desc'"
-        @input="onInput('domain', $event)"
+        @update:modelValue="onInput('domain', $event)"
         @blur="$parent.$emit('touch')"
       />
     </BInputGroupAppend>
@@ -45,8 +45,7 @@ export default {
   inheritAttrs: false,
 
   props: {
-    // `value` is actually passed thru the `v-model` directive
-    value: { type: Object, required: true },
+    modelValue: { type: Object, required: true },
     choices: { type: Array, required: true },
     placeholder: { type: String, default: null },
     id: { type: String, default: null },
@@ -55,10 +54,10 @@ export default {
   },
 
   methods: {
-    onInput(key, value) {
-      this.$emit('input', {
-        ...this.value,
-        [key]: value,
+    onInput(key, modelValue) {
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        [key]: modelValue,
       })
     },
   },
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index b19bd42a7..9d4a85cce 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -14,7 +14,8 @@
         v-bind="props"
         :is="component"
         v-on="$listeners"
-        :value="value"
+        :modelValue="modelValue"
+        @update:modelValue="$emit('update:modelValue', $event)"
         :state="state"
         :required="validation ? 'required' in validation : false"
       />
@@ -62,7 +63,7 @@ export default {
     link: { type: Object, default: null },
     // Rendered field component props
     component: { type: String, default: 'InputItem' },
-    value: { type: null, default: null },
+    modelValue: { type: null, default: null },
     props: { type: Object, default: () => ({}) },
     validation: { type: Object, default: null },
     validationIndex: { type: Number, default: null },
diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index e6722e2da..27a544e8b 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -1,12 +1,14 @@
 <template>
+  <!-- FIXME vue3 - `modelValue`+`@update:model` doesn't work here, probably to the prop's name not being `value`. Sticking for now to `checked`+`@input` -->
   <BFormCheckbox
-    v-model="checked"
+    :checked="modelValue"
+    @input="$emit('update:modelValue', $event)"
     v-on="$listeners"
     :id="id"
     :aria-describedby="$parent.id + '__BV_description_'"
     switch
   >
-    {{ label || $t(labels[checked]) }}
+    {{ label || $t(labels[modelValue]) }}
   </BFormCheckbox>
 </template>
 
@@ -16,16 +18,10 @@ export default {
   name: 'CheckboxItem',
 
   props: {
-    value: { type: Boolean, required: true },
+    modelValue: { type: Boolean, required: true },
     id: { type: String, default: null },
     label: { type: String, default: null },
     labels: { type: Object, default: () => ({ true: 'yes', false: 'no' }) },
   },
-
-  data() {
-    return {
-      checked: this.value,
-    }
-  },
 }
 </script>
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 3e9705d4d..4a4a4fa93 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -1,7 +1,7 @@
 <template>
   <BButtonGroup class="w-100">
     <BButton
-      v-if="!this.required && this.value.file !== null"
+      v-if="!this.required && this.modelValue.file !== null"
       @click="clearFiles"
       variant="danger"
     >
@@ -10,7 +10,7 @@
     </BButton>
 
     <BFormFile
-      :value="value.file"
+      :modelValue="modelValue.file"
       ref="input-file"
       :id="id"
       :required="required"
@@ -35,7 +35,7 @@ export default {
 
   props: {
     id: { type: String, default: null },
-    value: { type: Object, default: () => ({ file: null }) },
+    modelValue: { type: Object, default: () => ({ file: null }) },
     placeholder: { type: String, default: 'Choose a file or drop it here...' },
     dropPlaceholder: { type: String, default: null },
     accept: { type: String, default: null },
@@ -46,7 +46,9 @@ export default {
 
   computed: {
     _placeholder: function () {
-      return this.value.file === null ? this.placeholder : this.value.file.name
+      return this.modelValue.file === null
+        ? this.placeholder
+        : this.modelValue.file.name
     },
   },
 
@@ -59,17 +61,17 @@ export default {
         removed: false,
       }
       // Update the value with the new File and an empty content for now
-      this.$emit('input', value)
+      this.$emit('update:modelValue', value)
 
       // Asynchronously load the File content and update the value again
       getFileContent(file).then((content) => {
-        this.$emit('input', { ...value, content })
+        this.$emit('update:modelValue', { ...value, content })
       })
     },
 
     clearFiles() {
       this.$refs['input-file'].reset()
-      this.$emit('input', {
+      this.$emit('update:modelValue', {
         file: null,
         content: '',
         current: false,
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index 687b42807..24e486d1a 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -1,6 +1,7 @@
 <template>
   <BFormInput
-    :value="value"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
     :placeholder="placeholder"
     :type="type"
@@ -22,7 +23,7 @@ export default {
   name: 'InputItem',
 
   props: {
-    value: { type: [String, Number], default: null },
+    modelValue: { type: [String, Number], default: null },
     id: { type: String, default: null },
     placeholder: { type: String, default: null },
     type: { type: String, default: 'text' },
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index f02bbe703..6b04fd14d 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -1,11 +1,12 @@
 <template>
   <BFormSelect
-    :value="value"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
     :options="choices"
     :required="required"
     v-on="$listeners"
-    @blur.native="$emit('blur', value)"
+    @blur.native="$emit('blur', modelValue)"
   />
 </template>
 
@@ -15,7 +16,7 @@ export default {
   name: 'SelectItem',
 
   props: {
-    value: { type: [String, null], default: null },
+    modelValue: { type: [String, null], default: null },
     id: { type: String, default: null },
     choices: { type: [Array, Object], required: true },
     required: { type: Boolean, default: false },
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index c8d378121..366ccd94b 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -1,6 +1,7 @@
 <template>
   <BFormTags
-    v-model="tags"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event)"
     :id="id"
     :placeholder="placeholder"
     :required="required"
@@ -19,13 +20,8 @@ export default {
   compatConfig: { MODE: 3 },
   name: 'TagsItem',
 
-  data() {
-    return {
-      tags: this.value,
-    }
-  },
   props: {
-    value: { type: Array, default: null },
+    modelValue: { type: Array, default: null },
     id: { type: String, default: null },
     placeholder: { type: String, default: null },
     limit: { type: Number, default: null },
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index 89efb9334..d17176f34 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -3,7 +3,8 @@
     <BFormTags
       v-bind="$attrs"
       v-on="$listeners"
-      :value="value"
+      :modelValue="modelValue"
+      @update:modelValue="$emit('update:modelValue', $event)"
       :id="id"
       size="lg"
       class="p-0 border-0"
@@ -99,7 +100,7 @@ export default {
   inheritAttrs: false,
 
   props: {
-    value: { type: Array, required: true },
+    modelValue: { type: Array, required: true },
     options: { type: Array, required: true },
     id: { type: String, required: true },
     placeholder: { type: String, default: null },
@@ -129,7 +130,8 @@ export default {
       const criteria = this.criteria
       const options = this.options.filter((opt) => {
         return (
-          this.value.indexOf(opt) === -1 && !this.disabledItems.includes(opt)
+          this.modelValue.indexOf(opt) === -1 &&
+          !this.disabledItems.includes(opt)
         )
       })
       if (criteria) {
diff --git a/app/src/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index 9e909b364..4989835d9 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -1,6 +1,7 @@
 <template>
   <BFormTextarea
-    :value="value"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
     :placeholder="placeholder"
     :required="required"
@@ -17,7 +18,7 @@ export default {
   name: 'TextAreaItem',
 
   props: {
-    value: { type: String, default: null },
+    modelValue: { type: String, default: null },
     id: { type: String, default: null },
     placeholder: { type: String, default: null },
     type: { type: String, default: 'text' },

From 04872f6eed277db1d6dcbb319675eaf9cb03b49c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:30:26 +0100
Subject: [PATCH 025/275] migration: vue3 COMPILER_V_BIND_SYNC

---
 app/src/views/_partials/DomainForm.vue | 6 +++---
 app/src/views/app/AppList.vue          | 2 +-
 app/src/views/domain/DomainList.vue    | 2 +-
 app/src/views/group/GroupList.vue      | 2 +-
 app/src/views/service/ServiceList.vue  | 2 +-
 app/src/views/tool/ToolLogs.vue        | 2 +-
 app/src/views/user/UserList.vue        | 2 +-
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 41952a57c..20f245f2c 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -23,7 +23,7 @@
       {{ $t('domain.add.from_registrar') }}
     </BFormRadio>
 
-    <BCollapse id="collapse-domain" :visible.sync="domainIsVisible">
+    <BCollapse id="collapse-domain" v-model:visible="domainIsVisible">
       <p class="mt-2 alert alert-info">
         <YIcon iname="info-circle" />
         <span class="pl-1" v-html="$t('domain.add.from_registrar_desc')" />
@@ -50,7 +50,7 @@
       {{ $t('domain.add.from_yunohost') }}
     </BFormRadio>
 
-    <BCollapse id="collapse-dynDomain" :visible.sync="dynDomainIsVisible">
+    <BCollapse id="collapse-dynDomain" v-model:visible="dynDomainIsVisible">
       <p class="mt-2 alert alert-info">
         <YIcon iname="info-circle" />
         <span class="pl-1" v-html="$t('domain.add.from_yunohost_desc')" />
@@ -95,7 +95,7 @@
       {{ $t('domain.add.from_local') }}
     </BFormRadio>
 
-    <BCollapse id="collapse-localDomain" :visible.sync="localDomainIsVisible">
+    <BCollapse id="collapse-localDomain" v-model:visible="localDomainIsVisible">
       <p class="mt-2 alert alert-info">
         <YIcon iname="info-circle" />
         <span class="pl-1" v-html="$t('domain.add.from_local_desc')" />
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index 3eae3af10..171cfc1ce 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -1,6 +1,6 @@
 <template>
   <ViewSearch
-    :search.sync="search"
+    v-model:search="search"
     items-name="installed_apps"
     :items="apps"
     :filtered-items="filteredApps"
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 62a471bf0..7f194ce30 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -1,7 +1,7 @@
 <template>
   <ViewSearch
     id="domain-list"
-    :search.sync="search"
+    v-model:search="search"
     :items="domains"
     items-name="domains"
     :queries="queries"
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 527413cfe..92be1db02 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -1,7 +1,7 @@
 <template>
   <ViewSearch
     items-name="groups"
-    :search.sync="search"
+    v-model:search="search"
     :items="primaryGroups"
     :filtered-items="filteredGroups"
     :queries="queries"
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 3858177b6..189621dd2 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -1,7 +1,7 @@
 <template>
   <ViewSearch
     id="service-list"
-    :search.sync="search"
+    v-model:search="search"
     :items="services"
     :filtered-items="filteredServices"
     items-name="services"
diff --git a/app/src/views/tool/ToolLogs.vue b/app/src/views/tool/ToolLogs.vue
index f94577b8a..72161903c 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -1,6 +1,6 @@
 <template>
   <ViewSearch
-    :search.sync="search"
+    v-model:search="search"
     :items="operations"
     :filtered-items="filteredOperations"
     items-name="logs"
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 328cba5c7..1b227bf5f 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -1,6 +1,6 @@
 <template>
   <ViewSearch
-    :search.sync="search"
+    v-model:search="search"
     :items="users"
     :filtered-items="filteredUsers"
     items-name="users"

From 1430c03a4fe999230f294f5add86eed308e99c6f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:37:47 +0100
Subject: [PATCH 026/275] refactor: use `apply` event instead of `submit` on
 ConfigPanels

---
 app/src/components/ConfigPanel.vue          | 6 +++---
 app/src/components/ConfigPanels.vue         | 3 ++-
 app/src/components/RoutableTabs.vue         | 7 ++++++-
 app/src/components/globals/AbstractForm.vue | 5 +++--
 app/src/views/app/AppInfo.vue               | 2 +-
 app/src/views/domain/DomainInfo.vue         | 2 +-
 app/src/views/tool/ToolSettings.vue         | 2 +-
 7 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
index 9ccb523a9..52a191afe 100644
--- a/app/src/components/ConfigPanel.vue
+++ b/app/src/components/ConfigPanel.vue
@@ -6,7 +6,7 @@
       validation,
       serverError: panel.serverError,
     }"
-    @submit.prevent.stop="onApply"
+    @apply="onApply"
     :no-footer="!panel.hasApplyButton"
   >
     <slot name="tab-top" />
@@ -78,7 +78,7 @@ export default {
     onApply() {
       const panelId = this.panel.id
 
-      this.$emit('submit', {
+      this.$emit('apply', {
         id: panelId,
         form: this.forms[panelId],
       })
@@ -88,7 +88,7 @@ export default {
       const panelId = this.panel.id
       const actionFieldsKeys = Object.keys(actionFields)
 
-      this.$emit('submit', {
+      this.$emit('apply', {
         id: panelId,
         form: filterObject(this.forms[panelId], ([key]) =>
           actionFieldsKeys.includes(key),
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 1fd948d62..0ac19296a 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="config-panel">
+    <!-- FIXME vue3 - weird stuff with event binding, need to propagate by hand for now -->
     <RoutableTabs
       v-if="routes_.length > 1"
       v-bind="{ panels, forms, v: v$, ...$attrs }"
       :routes="routes_"
-      v-on="$listeners"
+      @apply="$emit('apply', $event)"
     >
       <template #tab-top>
         <slot name="tab-top" />
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index d046b7c88..4d06bcf5e 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -16,7 +16,12 @@
 
     <!-- Bind extra props to the child view and forward child events to parent -->
     <RouterView v-slot="{ Component }">
-      <Component v-bind="$attrs" v-on="$listeners" :is="Component">
+      <Component
+        v-bind="$attrs"
+        :is="Component"
+        v-on="$listeners"
+        @apply="$emit('apply', $event)"
+      >
         <template #tab-top>
           <slot name="tab-top" />
         </template>
diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index 170bb4143..e117c54ab 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -7,8 +7,8 @@
         :id="id"
         :inline="inline"
         :class="formClasses"
-        @submit.prevent="onSubmit"
         novalidate
+        @submit.prevent.stop="onSubmit"
       >
         <slot name="default" />
 
@@ -61,7 +61,8 @@ export default {
         v.$touch()
         if (v.$pending || v.$errors.length) return
       }
-      this.$emit('submit', e)
+      // Weird bug with `INSTANCE_LISTENERS: true` with 'submit' event (double exec before of conflict with native submit event?)
+      this.$emit('apply')
     },
   },
 }
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 989ae31c3..2bf5e6360 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -129,7 +129,7 @@
     <ConfigPanels
       v-bind="config"
       :external-results="externalResults"
-      @submit="onConfigSubmit"
+      @apply="onConfigSubmit"
     >
       <!-- OPERATIONS TAB -->
       <template v-if="currentTab === 'operations'" #tab-top>
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 8715fa1d8..e37a75b61 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -112,7 +112,7 @@
       v-if="config.panels"
       v-bind="config"
       :external-results="externalResults"
-      @submit="onConfigSubmit"
+      @apply="onConfigSubmit"
     >
       <template v-if="currentTab === 'dns'" #tab-after>
         <DomainDns :name="name" />
diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index 2542d677c..c1be632d8 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -9,7 +9,7 @@
       v-if="config.panels"
       v-bind="config"
       :external-results="externalResults"
-      @submit="onConfigSubmit"
+      @apply="onConfigSubmit"
     />
   </ViewBase>
 </template>

From 4b01c4e7c37e12728e3148d823bbd0bc6f82e962 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:40:44 +0100
Subject: [PATCH 027/275] migration: vue3 INSTANCE_LISTENERS

---
 app/src/components/QueryHeader.vue                         | 2 +-
 app/src/components/RoutableTabs.vue                        | 1 -
 app/src/components/globals/FormField.vue                   | 1 -
 app/src/components/globals/ViewSearch.vue                  | 2 +-
 app/src/components/globals/formItems/CheckboxItem.vue      | 1 -
 app/src/components/globals/formItems/InputItem.vue         | 1 -
 app/src/components/globals/formItems/SelectItem.vue        | 1 -
 app/src/components/globals/formItems/TagsItem.vue          | 1 -
 app/src/components/globals/formItems/TagsSelectizeItem.vue | 1 -
 app/src/components/globals/formItems/TextAreaItem.vue      | 1 -
 10 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index e6b04543c..38723aa54 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="$attrs" class="query-header w-100" v-on="$listeners">
+  <div v-bind="$attrs" class="query-header w-100">
     <!-- STATUS -->
     <span
       class="status"
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index 4d06bcf5e..707c3cbf5 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -19,7 +19,6 @@
       <Component
         v-bind="$attrs"
         :is="Component"
-        v-on="$listeners"
         @apply="$emit('apply', $event)"
       >
         <template #tab-top>
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 9d4a85cce..724e34dd3 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -13,7 +13,6 @@
       <Component
         v-bind="props"
         :is="component"
-        v-on="$listeners"
         :modelValue="modelValue"
         @update:modelValue="$emit('update:modelValue', $event)"
         :state="state"
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index 4eddcadcf..b507f081a 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <ViewBase v-bind="$attrs" v-on="$listeners" :skeleton="skeleton">
+  <ViewBase v-bind="$attrs" :skeleton="skeleton">
     <template v-if="hasCustomTopBar" #top-bar>
       <slot name="top-bar" />
     </template>
diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index 27a544e8b..4753ab0db 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -3,7 +3,6 @@
   <BFormCheckbox
     :checked="modelValue"
     @input="$emit('update:modelValue', $event)"
-    v-on="$listeners"
     :id="id"
     :aria-describedby="$parent.id + '__BV_description_'"
     switch
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index 24e486d1a..de6d13dbb 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -12,7 +12,6 @@
     :step="step"
     :trim="trim"
     :autocomplete="autocomplete_"
-    v-on="$listeners"
     @blur="$parent.$emit('touch', name)"
   />
 </template>
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index 6b04fd14d..581c40dbb 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -5,7 +5,6 @@
     :id="id"
     :options="choices"
     :required="required"
-    v-on="$listeners"
     @blur.native="$emit('blur', modelValue)"
   />
 </template>
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index 366ccd94b..abccf055d 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -10,7 +10,6 @@
     remove-on-delete
     :state="state"
     :options="options"
-    v-on="$listeners"
     @blur="$parent.$emit('touch', name)"
   />
 </template>
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index d17176f34..ef23f8bde 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -2,7 +2,6 @@
   <div class="tags-selectize">
     <BFormTags
       v-bind="$attrs"
-      v-on="$listeners"
       :modelValue="modelValue"
       @update:modelValue="$emit('update:modelValue', $event)"
       :id="id"
diff --git a/app/src/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index 4989835d9..f20c9ac21 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -7,7 +7,6 @@
     :required="required"
     :state="state"
     rows="4"
-    v-on="$listeners"
     @blur="$parent.$emit('touch', name)"
   />
 </template>

From 20e80765a35e0dce6becaf97de14fa2e386a546a Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:42:48 +0100
Subject: [PATCH 028/275] migration: vue3 INSTANCE_SCOPED_SLOTS

---
 app/src/components/CardDeckFeed.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index f747932cb..26c6b2f47 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -14,7 +14,7 @@ export default {
     return {
       busy: false,
       range: this.stacks,
-      childrenCount: this.$slots.default.length,
+      childrenCount: this.$slots.default().length,
     }
   },
 
@@ -60,7 +60,7 @@ export default {
   },
 
   beforeUpdate() {
-    const slots = this.$slots.default
+    const slots = this.$slots.default()
     if (this.childrenCount !== slots.length) {
       this.range = this.stacks
       this.childrenCount = slots.length
@@ -75,7 +75,7 @@ export default {
         props: { deck: true },
         ref: 'feed',
       },
-      this.$slots.default.slice(0, this.range),
+      this.$slots.default().slice(0, this.range),
     )
   },
 

From 68d5c6baeb7ca417cb6da9c338d3d093d8ef3baf Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:43:18 +0100
Subject: [PATCH 029/275] migration: vue3 OPTIONS_BEFORE_DESTROY

---
 app/src/components/CardDeckFeed.vue | 2 +-
 app/src/components/LazyRenderer.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index 26c6b2f47..f67100776 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -79,7 +79,7 @@ export default {
     )
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('scroll', this.onScroll)
     this.$refs.feed.removeEventListener('keydown', this.onKeydown)
   },
diff --git a/app/src/components/LazyRenderer.vue b/app/src/components/LazyRenderer.vue
index d2b6b2cc2..b1b360af3 100644
--- a/app/src/components/LazyRenderer.vue
+++ b/app/src/components/LazyRenderer.vue
@@ -70,7 +70,7 @@ export default {
     this.observer.observe(this.$el)
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.observer.disconnect()
   },
 }

From 123577c9ee888074a60a84fe088bafcd7ff36770 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:43:56 +0100
Subject: [PATCH 030/275] migration: vue3 RENDER_FUNCTION

---
 app/src/components/CardDeckFeed.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index f67100776..752e139c6 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -1,6 +1,8 @@
 <script>
 // Implementation of the feed pattern
 // https://www.w3.org/WAI/ARIA/apg/patterns/feed/
+import { h } from 'vue'
+import { BCardGroup } from 'bootstrap-vue'
 
 export default {
   compatConfig: { MODE: 3 },
@@ -67,12 +69,13 @@ export default {
     }
   },
 
-  render(h) {
+  render() {
     return h(
-      'BCardGroup',
+      BCardGroup,
       {
-        attrs: { role: 'feed', 'aria-busy': this.busy.toString() },
-        props: { deck: true },
+        deck: true,
+        role: 'feed',
+        'aria-busy': this.busy.toString(),
         ref: 'feed',
       },
       this.$slots.default().slice(0, this.range),

From 27a6f90cf78401d4fd522bbcfd7833fd629034c9 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:44:35 +0100
Subject: [PATCH 031/275] migration: vue3 COMPONENT_ASYNC

---
 app/src/components/ConfigPanels.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 0ac19296a..4d531b2a7 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -28,6 +28,7 @@
 
 <script>
 import { toRef } from 'vue'
+import { defineAsyncComponent } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 
 export default {
@@ -37,7 +38,9 @@ export default {
   inheritAttrs: false,
 
   components: {
-    RoutableTabs: () => import('@/components/RoutableTabs.vue'),
+    RoutableTabs: defineAsyncComponent(
+      () => import('@/components/RoutableTabs.vue'),
+    ),
   },
 
   props: {

From 2a5bbb594dcb66f364232f43c1a1681cf62fbb27 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:44:55 +0100
Subject: [PATCH 032/275] migration: vue3 WATCH_ARRAY

---
 app/src/components/MessageListGroup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/MessageListGroup.vue b/app/src/components/MessageListGroup.vue
index c0830e685..dd62d721c 100644
--- a/app/src/components/MessageListGroup.vue
+++ b/app/src/components/MessageListGroup.vue
@@ -66,7 +66,7 @@ export default {
 
   created() {
     if (this.autoScroll) {
-      this.$watch('messages', this.scrollToEnd)
+      this.$watch('messages', this.scrollToEnd, { deep: true })
     }
   },
 }

From f6adc876917660b5fcb44764a5de6589349a8f83 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:47:36 +0100
Subject: [PATCH 033/275] migration: vue3 GLOBAL_DELETE INSTANCE_DELETE
 GLOBAL_SET INSTANCE_SET

---
 app/src/store/data.js                 | 24 +++++++++++-------------
 app/src/store/info.js                 |  7 +++----
 app/src/views/app/AppInfo.vue         |  4 +++-
 app/src/views/domain/DomainInfo.vue   |  4 +++-
 app/src/views/group/GroupList.vue     |  4 +---
 app/src/views/tool/ToolFirewall.vue   |  4 ++--
 app/src/views/tool/ToolMigrations.vue |  2 +-
 app/src/views/tool/ToolSettings.vue   |  4 +++-
 8 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/app/src/store/data.js b/app/src/store/data.js
index 9edbd2160..c868490e1 100644
--- a/app/src/store/data.js
+++ b/app/src/store/data.js
@@ -1,5 +1,3 @@
-import Vue from 'vue'
-
 import api from '@/api'
 import { isEmptyValue } from '@/helpers/commons'
 import { stratify } from '@/helpers/data/tree'
@@ -34,7 +32,7 @@ export default {
     },
 
     SET_DOMAINS_DETAILS(state, [name, details]) {
-      Vue.set(state.domains_details, name, details)
+      state.domains_details[name] = details
     },
 
     UPDATE_DOMAINS_DETAILS(state, payload) {
@@ -43,9 +41,9 @@ export default {
     },
 
     DEL_DOMAINS_DETAILS(state, [name]) {
-      Vue.delete(state.domains_details, name)
+      delete state.domains_details[name]
       if (state.domains) {
-        Vue.delete(state.domains, name)
+        delete state.domains[name]
       }
     },
 
@@ -72,16 +70,16 @@ export default {
 
     ADD_USERS(state, [user]) {
       if (!state.users) state.users = {}
-      Vue.set(state.users, user.username, user)
+      state.users[user.username] = user
     },
 
     SET_USERS_DETAILS(state, [username, userData]) {
-      Vue.set(state.users_details, username, userData)
+      state.users_details[username] = userData
       if (!state.users) return
       const user = state.users[username]
       for (const key of ['fullname', 'mail']) {
         if (user[key] !== userData[key]) {
-          Vue.set(user, key, userData[key])
+          user[key] = userData[key]
         }
       }
     },
@@ -92,9 +90,9 @@ export default {
     },
 
     DEL_USERS_DETAILS(state, [username]) {
-      Vue.delete(state.users_details, username)
+      delete state.users_details[username]
       if (state.users) {
-        Vue.delete(state.users, username)
+        delete state.users[username]
         if (Object.keys(state.users).length === 0) {
           state.users = null
         }
@@ -107,16 +105,16 @@ export default {
 
     ADD_GROUPS(state, [{ name }]) {
       if (state.groups !== undefined) {
-        Vue.set(state.groups, name, { members: [], permissions: [] })
+        state.groups[name] = { members: [], permissions: [] }
       }
     },
 
     UPDATE_GROUPS(state, [data, { groupName }]) {
-      Vue.set(state.groups, groupName, data)
+      state.groups[groupName] = data
     },
 
     DEL_GROUPS(state, [groupname]) {
-      Vue.delete(state.groups, groupname)
+      delete state.groups[groupname]
     },
 
     SET_PERMISSIONS(state, [permissions]) {
diff --git a/app/src/store/info.js b/app/src/store/info.js
index fc6698bc8..1d92b539f 100644
--- a/app/src/store/info.js
+++ b/app/src/store/info.js
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import router from '@/router'
 import i18n from '@/i18n'
 import api from '@/api'
@@ -55,7 +54,7 @@ export default {
 
     UPDATE_REQUEST(state, { request, key, value }) {
       // This rely on data persistance and reactivity.
-      Vue.set(request, key, value)
+      request[key] = value
     },
 
     REMOVE_REQUEST(state, request) {
@@ -303,7 +302,7 @@ export default {
         // the ownership to stay generic.
         const request = error.request
         delete error.request
-        Vue.set(request, 'error', error)
+        request.error = error
         // Display the error in a modal on the current view.
         commit('SET_ERROR', request)
       }
@@ -330,7 +329,7 @@ export default {
 
     DISMISS_WARNING({ commit, state }, request) {
       commit('SET_WAITING', false)
-      Vue.delete(request, 'showWarningMessage')
+      delete request.showWarningMessage
     },
 
     UPDATE_ROUTER_KEY({ commit }, { to, from }) {
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 2bf5e6360..a2facae3d 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -629,7 +629,9 @@ export default {
             Object.assign(this.externalResults, {
               forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
             })
-          } else this.$set(panel, 'serverError', err.message)
+          } else {
+            panel.serverError = err.message
+          }
         })
     },
 
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index e37a75b61..630f92791 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -257,7 +257,9 @@ export default {
             Object.assign(this.externalResults, {
               forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
             })
-          } else this.$set(panel, 'serverError', err.message)
+          } else {
+            panel.serverError = err.message
+          }
         })
     },
 
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 92be1db02..3b2d9afb2 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -133,8 +133,6 @@
 </template>
 
 <script>
-import Vue from 'vue'
-
 import api from '@/api'
 import { isEmptyValue } from '@/helpers/commons'
 import TagsSelectizeItem from '@/components/globals/formItems/TagsSelectizeItem.vue'
@@ -325,7 +323,7 @@ export default {
           { key: 'groups.delete', name: groupName },
         )
         .then(() => {
-          Vue.delete(this.primaryGroups, groupName)
+          delete this.primaryGroups[groupName]
         })
     },
   },
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 7e81e71f2..371da98b9 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -270,13 +270,13 @@ export default {
     },
 
     onTablePortToggling(port, protocol, connection, index, value) {
-      this.$set(this.protocols[protocol][index], connection, value)
+      this.protocols[protocol][index][connection] = value
       const action = value ? 'allow' : 'disallow'
       this.togglePort({ action, port, protocol, connection }).then(
         (toggled) => {
           // Revert change on cancel
           if (!toggled) {
-            this.$set(this.protocols[protocol][index], connection, !value)
+            this.protocols[protocol][index][connection] = !value
           }
         },
       )
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index 98fbec3e3..5210855aa 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -112,7 +112,7 @@ export default {
       pending.forEach((migration) => {
         if (migration.disclaimer) {
           migration.disclaimer = migration.disclaimer.replaceAll('\n', '<br>')
-          this.$set(this.checked, migration.id, null)
+          this.checked[migration.id] = null
         }
       })
       // FIXME change to pending
diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index c1be632d8..4e71fa274 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -68,7 +68,9 @@ export default {
             Object.assign(this.externalResults, {
               forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
             })
-          } else this.$set(panel, 'serverError', err.message)
+          } else {
+            panel.serverError = err.message
+          }
         })
     },
   },

From 547d0ed7342ad96979bb86cb0eb09f81b9569735 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:51:37 +0100
Subject: [PATCH 034/275] refactor: vue-router currentRoute is now a ref

---
 app/src/store/info.js       | 1 +
 app/src/views/LoginView.vue | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/src/store/info.js b/app/src/store/info.js
index 1d92b539f..e68190289 100644
--- a/app/src/store/info.js
+++ b/app/src/store/info.js
@@ -153,6 +153,7 @@ export default {
     },
 
     DISCONNECT({ dispatch }, route = router.currentRoute) {
+      // FIXME vue3 currentRoute is now a ref (currentRoute.value)
       dispatch('RESET_CONNECTED')
       if (router.currentRoute.name === 'login') return
       router.push({
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index 5782f2af3..79a5095c7 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -102,7 +102,9 @@ export default {
             window.location.href = '/yunohost/admin/'
           } else {
             this.$router.push(
-              this.$router.currentRoute.query.redirect || { name: 'home' },
+              this.$router.currentRoute.value.query.redirect || {
+                name: 'home',
+              },
             )
           }
         })

From 796dad8dbe0445702feddf9a98abb3f423324120 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:56:25 +0100
Subject: [PATCH 035/275] chore: update linter setup + silence bootstrap-vue
 errors + reactivate needed compat features

---
 app/.eslintrc.js                          | 19 ++++++++++++++-----
 app/src/components/globals/ViewSearch.vue |  2 +-
 app/src/main.js                           | 21 +++++++++++++++++++++
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/app/.eslintrc.js b/app/.eslintrc.js
index 728ddd1a5..5390038e3 100644
--- a/app/.eslintrc.js
+++ b/app/.eslintrc.js
@@ -5,14 +5,23 @@ module.exports = {
     node: true,
   },
   extends: [
-    'plugin:vue/strongly-recommended',
+    'plugin:vue/vue3-strongly-recommended',
     'eslint:recommended',
     'plugin:prettier/recommended',
   ],
   rules: {
-    'no-unused-vars': [
-      'warn',
-      { varsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
-    ],
+    // 'no-unused-vars': [
+    //   'warn',
+    //   { varsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
+    // ],
+    // temp vue3 compat3
+    'vue/no-v-for-template-key-on-child': 'error',
+    'vue/no-v-for-template-key': 'off',
+    'vue/attribute-hyphenation': 'off',
+    'vue/v-on-event-hyphenation': 'off',
+    // temp flemme
+    'vue/require-explicit-emits': 'off',
+    'vue/require-default-prop': 'off',
+    'no-unused-vars': 'off',
   },
 }
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index b507f081a..0fa71d2f1 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -57,7 +57,7 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
+  compatConfig: { MODE: 3, INSTANCE_LISTENERS: false },
   name: 'ViewSearch',
 
   props: {
diff --git a/app/src/main.js b/app/src/main.js
index 75815f438..e99b41dd6 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -20,6 +20,27 @@ app.use(i18n)
 
 configureCompat({
   MODE: 2,
+  // warnings we can do something about should be fixed
+  // next warnings are suppressed because those come from bootstrap-vue (vue2)
+  INSTANCE_EVENT_EMITTER: 'suppress-warning',
+  COMPONENT_FUNCTIONAL: 'suppress-warning',
+  RENDER_FUNCTION: 'suppress-warning',
+  GLOBAL_EXTEND: 'suppress-warning',
+  GLOBAL_MOUNT: 'suppress-warning',
+  WATCH_ARRAY: 'suppress-warning',
+  GLOBAL_PROTOTYPE: 'suppress-warning',
+  INSTANCE_SCOPED_SLOTS: 'suppress-warning',
+  INSTANCE_LISTENERS: 'suppress-warning',
+  OPTIONS_DATA_MERGE: 'suppress-warning',
+  OPTIONS_BEFORE_DESTROY: 'suppress-warning',
+  INSTANCE_ATTRS_CLASS_STYLE: 'suppress-warning',
+  CUSTOM_DIR: 'suppress-warning',
+  // TODO
+  // ATTR_FALSE_VALUE: 'suppress-warning',
+  // ATTR_ENUMERATED_COERCION
+  // ATTR_FALSE_VALUE
+  // COMPONENT_V_MODEL: 'suppress-warning',
+  // COMPILER_V_BIND_SYNC
 })
 
 // Styles are imported in `src/App.vue` <style>

From 23594bc33883610c5b1b7a4ceee6be459c09b579 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 12 Mar 2024 03:09:59 +0100
Subject: [PATCH 036/275] fix: temp fix for reactivity problems on nested obj
 request

---
 app/src/store/info.js | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/src/store/info.js b/app/src/store/info.js
index e68190289..a631b37dd 100644
--- a/app/src/store/info.js
+++ b/app/src/store/info.js
@@ -13,6 +13,7 @@ export default {
     reconnecting: null, // null|Object { attemps, delay, initialDelay }
     history: [], // Array of `request`
     requests: [], // Array of `request`
+    currentRequest: null,
     error: null, // null || request
     historyTimer: null, // null || setTimeout id
     tempMessages: [], // Array of messages
@@ -43,6 +44,10 @@ export default {
       state.reconnecting = args
     },
 
+    SET_CURRENT_REQUEST(state, request) {
+      state.currentRequest = request
+    },
+
     ADD_REQUEST(state, request) {
       if (state.requests.length > 10) {
         // We do not remove requests right after it resolves since an error might bring
@@ -52,9 +57,9 @@ export default {
       state.requests.push(request)
     },
 
-    UPDATE_REQUEST(state, { request, key, value }) {
+    UPDATE_REQUEST(state, { key, value }) {
       // This rely on data persistance and reactivity.
-      request[key] = value
+      state.currentRequest[key] = value
     },
 
     REMOVE_REQUEST(state, request) {
@@ -70,7 +75,7 @@ export default {
       state.tempMessages.push([message, type])
     },
 
-    UPDATE_DISPLAYED_MESSAGES(state, { request }) {
+    UPDATE_DISPLAYED_MESSAGES(state) {
       if (!state.tempMessages.length) {
         state.historyTimer = null
         return
@@ -86,9 +91,10 @@ export default {
       )
       state.tempMessages = []
       state.historyTimer = null
-      request.messages = request.messages.concat(messages)
-      request.warnings += warnings
-      request.errors += errors
+      state.currentRequest.messages =
+        state.currentRequest.messages.concat(messages)
+      state.currentRequest.warnings += warnings
+      state.currentRequest.errors += errors
     },
 
     SET_ERROR(state, request) {
@@ -221,6 +227,7 @@ export default {
         commit('ADD_HISTORY_ACTION', request)
       }
       commit('ADD_REQUEST', request)
+      commit('SET_CURRENT_REQUEST', request)
       if (wait) {
         setTimeout(() => {
           // Display the waiting modal only if the request takes some time.
@@ -245,13 +252,13 @@ export default {
           messages.length &&
           messages[messages.length - 1].color === 'warning'
         ) {
-          request.showWarningMessage = true
+          state.currentRequest.showWarningMessage = true
         }
         status = 'warning'
       }
 
       commit('UPDATE_REQUEST', { request, key: 'status', value: status })
-      if (wait && !request.showWarningMessage) {
+      if (wait && !state.currentRequest.showWarningMessage) {
         // Remove the overlay after a short delay to allow an error to display withtout flickering.
         setTimeout(() => {
           commit('SET_WAITING', false)
@@ -419,10 +426,7 @@ export default {
     reconnecting: (state) => state.reconnecting,
     history: (state) => state.history,
     lastAction: (state) => state.history[state.history.length - 1],
-    currentRequest: (state) => {
-      const request = state.requests.find(({ status }) => status === 'pending')
-      return request || state.requests[state.requests.length - 1]
-    },
+    currentRequest: (state) => state.currentRequest,
     routerKey: (state) => state.routerKey,
     breadcrumb: (state) => state.breadcrumb,
     transitionName: (state) => state.transitionName,

From 1d2aa3387d6a9762817060109ceb30d7d038b60b Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 12 Mar 2024 04:32:20 +0100
Subject: [PATCH 037/275] migration: remove @vue/compat + update to vue 3.4.21

---
 app/package.json                              |  3 +--
 app/src/App.vue                               |  1 -
 app/src/components/AdressInputSelect.vue      |  1 -
 app/src/components/CardCollapse.vue           |  1 -
 app/src/components/CardDeckFeed.vue           |  1 -
 app/src/components/ConfigPanel.vue            |  1 -
 app/src/components/ConfigPanels.vue           |  1 -
 app/src/components/LazyRenderer.vue           |  1 -
 app/src/components/MessageListGroup.vue       |  1 -
 app/src/components/QueryHeader.vue            |  1 -
 app/src/components/RecursiveListGroup.vue     |  1 -
 app/src/components/RoutableTabs.vue           |  1 -
 app/src/components/globals/AbstractForm.vue   |  1 -
 app/src/components/globals/CardForm.vue       |  1 -
 app/src/components/globals/DescriptionRow.vue |  1 -
 app/src/components/globals/ExplainWhat.vue    |  1 -
 app/src/components/globals/FormField.vue      |  1 -
 app/src/components/globals/ReadOnlyField.vue  |  1 -
 app/src/components/globals/TopBar.vue         |  1 -
 app/src/components/globals/ViewBase.vue       |  1 -
 app/src/components/globals/ViewSearch.vue     |  1 -
 app/src/components/globals/YAlert.vue         |  1 -
 app/src/components/globals/YBreadcrumb.vue    |  1 -
 app/src/components/globals/YCard.vue          |  1 -
 app/src/components/globals/YIcon.vue          |  1 -
 app/src/components/globals/YListGroupItem.vue |  1 -
 app/src/components/globals/YSpinner.vue       |  1 -
 .../globals/formItems/ButtonItem.vue          |  1 -
 .../globals/formItems/CheckboxItem.vue        |  1 -
 .../globals/formItems/DisplayTextItem.vue     |  1 -
 .../components/globals/formItems/FileItem.vue |  1 -
 .../globals/formItems/InputItem.vue           |  1 -
 .../globals/formItems/MarkdownItem.vue        |  1 -
 .../globals/formItems/ReadOnlyAlertItem.vue   |  1 -
 .../globals/formItems/SelectItem.vue          |  1 -
 .../components/globals/formItems/TagsItem.vue |  1 -
 .../globals/formItems/TagsSelectizeItem.vue   |  1 -
 .../globals/formItems/TextAreaItem.vue        |  1 -
 .../globals/skeletons/CardButtonsSkeleton.vue |  1 -
 .../globals/skeletons/CardFormSkeleton.vue    |  1 -
 .../globals/skeletons/CardInfoSkeleton.vue    |  1 -
 .../globals/skeletons/CardListSkeleton.vue    |  1 -
 .../globals/skeletons/ListGroupSkeleton.vue   |  1 -
 app/src/main.js                               | 27 +------------------
 app/src/views/HomeView.vue                    |  1 -
 app/src/views/LoginView.vue                   |  1 -
 app/src/views/PostInstall.vue                 |  1 -
 app/src/views/_partials/DomainForm.vue        |  1 -
 app/src/views/_partials/ErrorDisplay.vue      |  1 -
 app/src/views/_partials/HistoryConsole.vue    |  1 -
 .../views/_partials/ReconnectingDisplay.vue   |  1 -
 app/src/views/_partials/ViewLockOverlay.vue   |  1 -
 app/src/views/_partials/WaitingDisplay.vue    |  1 -
 app/src/views/_partials/WarningDisplay.vue    |  1 -
 app/src/views/app/AppCatalog.vue              |  1 -
 app/src/views/app/AppInfo.vue                 |  1 -
 app/src/views/app/AppInstall.vue              |  1 -
 app/src/views/app/AppList.vue                 |  1 -
 app/src/views/backup/BackupCreate.vue         |  1 -
 app/src/views/backup/BackupInfo.vue           |  1 -
 app/src/views/backup/BackupList.vue           |  1 -
 app/src/views/backup/BackupView.vue           |  1 -
 app/src/views/diagnosis/DiagnosisView.vue     |  1 -
 app/src/views/domain/DomainAdd.vue            |  1 -
 app/src/views/domain/DomainDns.vue            |  1 -
 app/src/views/domain/DomainInfo.vue           |  1 -
 app/src/views/domain/DomainList.vue           |  1 -
 app/src/views/group/GroupCreate.vue           |  1 -
 app/src/views/group/GroupList.vue             |  1 -
 app/src/views/service/ServiceInfo.vue         |  1 -
 app/src/views/service/ServiceList.vue         |  1 -
 app/src/views/tool/ToolFirewall.vue           |  1 -
 app/src/views/tool/ToolList.vue               |  1 -
 app/src/views/tool/ToolLog.vue                |  1 -
 app/src/views/tool/ToolLogs.vue               |  1 -
 app/src/views/tool/ToolMigrations.vue         |  1 -
 app/src/views/tool/ToolPower.vue              |  1 -
 app/src/views/tool/ToolSettings.vue           |  1 -
 app/src/views/tool/ToolWebadmin.vue           |  1 -
 app/src/views/update/SystemUpdate.vue         |  1 -
 app/src/views/user/UserCreate.vue             |  1 -
 app/src/views/user/UserEdit.vue               |  1 -
 app/src/views/user/UserImport.vue             |  1 -
 app/src/views/user/UserInfo.vue               |  1 -
 app/src/views/user/UserList.vue               |  1 -
 app/vite.config.js                            | 13 +--------
 86 files changed, 3 insertions(+), 123 deletions(-)

diff --git a/app/package.json b/app/package.json
index 49b3242f9..b61fa4b72 100644
--- a/app/package.json
+++ b/app/package.json
@@ -15,14 +15,13 @@
   "dependencies": {
     "@fontsource/fira-code": "^5.0.17",
     "@fontsource/firago": "^5.0.7",
-    "@vue/compat": "3.3.4",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "bootstrap-vue": "^2.23.1",
     "date-fns": "^3.3.1",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
-    "vue": "3.3.4",
+    "vue": "^3.4.21",
     "vue-i18n": "^9.10.1",
     "vue-router": "^4.3.0",
     "vue-showdown": "^4.2.0",
diff --git a/app/src/App.vue b/app/src/App.vue
index 85985becf..42c5c8c29 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -101,7 +101,6 @@ import { mapGetters } from 'vuex'
 import { HistoryConsole, ViewLockOverlay } from '@/views/_partials'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'App',
 
   components: {
diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
index be5abd243..0a23f78c5 100644
--- a/app/src/components/AdressInputSelect.vue
+++ b/app/src/components/AdressInputSelect.vue
@@ -39,7 +39,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AdressInputSelect',
 
   inheritAttrs: false,
diff --git a/app/src/components/CardCollapse.vue b/app/src/components/CardCollapse.vue
index ed70a418d..ef6471686 100644
--- a/app/src/components/CardCollapse.vue
+++ b/app/src/components/CardCollapse.vue
@@ -23,7 +23,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardCollapse',
 
   props: {
diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index 752e139c6..e6bd4166d 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -5,7 +5,6 @@ import { h } from 'vue'
 import { BCardGroup } from 'bootstrap-vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardDeckFeed',
 
   props: {
diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
index 52a191afe..6220a6087 100644
--- a/app/src/components/ConfigPanel.vue
+++ b/app/src/components/ConfigPanel.vue
@@ -54,7 +54,6 @@
 import { filterObject } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ConfigPanel',
 
   props: {
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 4d531b2a7..e1ab25f22 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -32,7 +32,6 @@ import { defineAsyncComponent } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ConfigPanels',
 
   inheritAttrs: false,
diff --git a/app/src/components/LazyRenderer.vue b/app/src/components/LazyRenderer.vue
index b1b360af3..26b7b2097 100644
--- a/app/src/components/LazyRenderer.vue
+++ b/app/src/components/LazyRenderer.vue
@@ -6,7 +6,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'LazyRenderer',
 
   props: {
diff --git a/app/src/components/MessageListGroup.vue b/app/src/components/MessageListGroup.vue
index dd62d721c..5b32d2126 100644
--- a/app/src/components/MessageListGroup.vue
+++ b/app/src/components/MessageListGroup.vue
@@ -24,7 +24,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'MessageListGroup',
 
   props: {
diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index 38723aa54..321288bb5 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -49,7 +49,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'QueryHeader',
 
   props: {
diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 415cdd30c..2e30a3dc6 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -45,7 +45,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'RecursiveListGroup',
 
   props: {
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index 707c3cbf5..1fa13bbe4 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -37,7 +37,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'RoutableTabs',
 
   // Thanks to `v-bind="$attrs"` and `inheritAttrs: false`, this component can forward
diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index e117c54ab..767fc9f2f 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -32,7 +32,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AbstractForm',
 
   props: {
diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index b28d60f60..16e8d0adc 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -37,7 +37,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardForm',
 
   props: {
diff --git a/app/src/components/globals/DescriptionRow.vue b/app/src/components/globals/DescriptionRow.vue
index ec986a2f4..e7265c3df 100644
--- a/app/src/components/globals/DescriptionRow.vue
+++ b/app/src/components/globals/DescriptionRow.vue
@@ -16,7 +16,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DescriptionRow',
 
   props: {
diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index 37c114d09..411bcdd79 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -24,7 +24,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ExplainWhat',
 
   props: {
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 724e34dd3..bba49ece6 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -49,7 +49,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'FormField',
 
   inheritAttrs: false,
diff --git a/app/src/components/globals/ReadOnlyField.vue b/app/src/components/globals/ReadOnlyField.vue
index f22d08ac5..39949a728 100644
--- a/app/src/components/globals/ReadOnlyField.vue
+++ b/app/src/components/globals/ReadOnlyField.vue
@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ReadOnlyField',
 
   inheritAttrs: false,
diff --git a/app/src/components/globals/TopBar.vue b/app/src/components/globals/TopBar.vue
index 7f0379c37..171eaed2e 100644
--- a/app/src/components/globals/TopBar.vue
+++ b/app/src/components/globals/TopBar.vue
@@ -16,7 +16,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'TopBar',
 
   props: {
diff --git a/app/src/components/globals/ViewBase.vue b/app/src/components/globals/ViewBase.vue
index dbc79d422..f1c696848 100644
--- a/app/src/components/globals/ViewBase.vue
+++ b/app/src/components/globals/ViewBase.vue
@@ -33,7 +33,6 @@
 import api from '@/api'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ViewBase',
 
   props: {
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index 0fa71d2f1..cd2d7f068 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -57,7 +57,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3, INSTANCE_LISTENERS: false },
   name: 'ViewSearch',
 
   props: {
diff --git a/app/src/components/globals/YAlert.vue b/app/src/components/globals/YAlert.vue
index 8d69995b5..5cc9a8533 100644
--- a/app/src/components/globals/YAlert.vue
+++ b/app/src/components/globals/YAlert.vue
@@ -18,7 +18,6 @@
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YAlert',
 
   props: {
diff --git a/app/src/components/globals/YBreadcrumb.vue b/app/src/components/globals/YBreadcrumb.vue
index 2a74e6839..858708a8e 100644
--- a/app/src/components/globals/YBreadcrumb.vue
+++ b/app/src/components/globals/YBreadcrumb.vue
@@ -20,7 +20,6 @@
 import { mapGetters } from 'vuex'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YBreadcrumb',
 
   computed: {
diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index 1f730810c..edf6c5b54 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -56,7 +56,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YCard',
 
   props: {
diff --git a/app/src/components/globals/YIcon.vue b/app/src/components/globals/YIcon.vue
index 447f7ccfa..15fbcc8ce 100644
--- a/app/src/components/globals/YIcon.vue
+++ b/app/src/components/globals/YIcon.vue
@@ -7,7 +7,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YIcon',
   props: {
     iname: { type: String, required: true },
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index 2d602ae5a..cf2cc82ab 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -14,7 +14,6 @@
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YListGroupItem',
 
   props: {
diff --git a/app/src/components/globals/YSpinner.vue b/app/src/components/globals/YSpinner.vue
index 16ea4019e..388e80d57 100644
--- a/app/src/components/globals/YSpinner.vue
+++ b/app/src/components/globals/YSpinner.vue
@@ -6,7 +6,6 @@
 import { mapGetters } from 'vuex'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YSpinner',
 
   computed: {
diff --git a/app/src/components/globals/formItems/ButtonItem.vue b/app/src/components/globals/formItems/ButtonItem.vue
index 42541441f..5bd09ad99 100644
--- a/app/src/components/globals/formItems/ButtonItem.vue
+++ b/app/src/components/globals/formItems/ButtonItem.vue
@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ButtonItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index 4753ab0db..8eb1b0319 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CheckboxItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/DisplayTextItem.vue b/app/src/components/globals/formItems/DisplayTextItem.vue
index e83740c22..3b85983ce 100644
--- a/app/src/components/globals/formItems/DisplayTextItem.vue
+++ b/app/src/components/globals/formItems/DisplayTextItem.vue
@@ -6,7 +6,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DisplayTextItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 4a4a4fa93..18a4ea533 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -30,7 +30,6 @@
 import { getFileContent } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'FileItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index de6d13dbb..752381247 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -18,7 +18,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'InputItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/MarkdownItem.vue b/app/src/components/globals/formItems/MarkdownItem.vue
index 9347c78e8..8f9501688 100644
--- a/app/src/components/globals/formItems/MarkdownItem.vue
+++ b/app/src/components/globals/formItems/MarkdownItem.vue
@@ -4,7 +4,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'MarkdownItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index c825da6f2..aa70ea26c 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -12,7 +12,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ReadOnlyAlertItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index 581c40dbb..f47a76f91 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -11,7 +11,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'SelectItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index abccf055d..55dbdf29f 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -16,7 +16,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'TagsItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index ef23f8bde..b809c6604 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -93,7 +93,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'TagsSelectizeItem',
 
   inheritAttrs: false,
diff --git a/app/src/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index f20c9ac21..7659026f3 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'TextAreaItem',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardButtonsSkeleton.vue b/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
index 0e64374ba..cd05d93b5 100644
--- a/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
@@ -21,7 +21,6 @@
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardButtonsSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardFormSkeleton.vue b/app/src/components/globals/skeletons/CardFormSkeleton.vue
index 5ea6c9f9e..4cf810cfe 100644
--- a/app/src/components/globals/skeletons/CardFormSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardFormSkeleton.vue
@@ -47,7 +47,6 @@
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardFormSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardInfoSkeleton.vue b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
index 59cf82c31..7a5435ae6 100644
--- a/app/src/components/globals/skeletons/CardInfoSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
@@ -19,7 +19,6 @@
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardInfoSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardListSkeleton.vue b/app/src/components/globals/skeletons/CardListSkeleton.vue
index bf1ed6e5f..0726603b7 100644
--- a/app/src/components/globals/skeletons/CardListSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardListSkeleton.vue
@@ -23,7 +23,6 @@
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardListSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/ListGroupSkeleton.vue b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
index 41a381ad3..0f638d3ef 100644
--- a/app/src/components/globals/skeletons/ListGroupSkeleton.vue
+++ b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
@@ -11,7 +11,6 @@
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ListGroupSkeleton',
 
   props: {
diff --git a/app/src/main.js b/app/src/main.js
index e99b41dd6..c6bd4686d 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -1,4 +1,4 @@
-import { createApp, configureCompat } from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 import BootstrapVue from 'bootstrap-vue'
 import { VueShowdownPlugin } from 'vue-showdown'
@@ -18,31 +18,6 @@ app.use(store)
 app.use(router)
 app.use(i18n)
 
-configureCompat({
-  MODE: 2,
-  // warnings we can do something about should be fixed
-  // next warnings are suppressed because those come from bootstrap-vue (vue2)
-  INSTANCE_EVENT_EMITTER: 'suppress-warning',
-  COMPONENT_FUNCTIONAL: 'suppress-warning',
-  RENDER_FUNCTION: 'suppress-warning',
-  GLOBAL_EXTEND: 'suppress-warning',
-  GLOBAL_MOUNT: 'suppress-warning',
-  WATCH_ARRAY: 'suppress-warning',
-  GLOBAL_PROTOTYPE: 'suppress-warning',
-  INSTANCE_SCOPED_SLOTS: 'suppress-warning',
-  INSTANCE_LISTENERS: 'suppress-warning',
-  OPTIONS_DATA_MERGE: 'suppress-warning',
-  OPTIONS_BEFORE_DESTROY: 'suppress-warning',
-  INSTANCE_ATTRS_CLASS_STYLE: 'suppress-warning',
-  CUSTOM_DIR: 'suppress-warning',
-  // TODO
-  // ATTR_FALSE_VALUE: 'suppress-warning',
-  // ATTR_ENUMERATED_COERCION
-  // ATTR_FALSE_VALUE
-  // COMPONENT_V_MODEL: 'suppress-warning',
-  // COMPILER_V_BIND_SYNC
-})
-
 // Styles are imported in `src/App.vue` <style>
 app.use(BootstrapVue, {
   BSkeleton: { animation: 'none' },
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index e9a4c4606..ae303438d 100644
--- a/app/src/views/HomeView.vue
+++ b/app/src/views/HomeView.vue
@@ -16,7 +16,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'HomeView',
 
   data() {
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index 79a5095c7..a05bb1975 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -39,7 +39,6 @@ import { useVuelidate } from '@vuelidate/core'
 import { alphalownumdot_, required, minLength } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'LoginView',
 
   props: {
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 145ae58d1..8b1e92e01 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -104,7 +104,6 @@ import {
 } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'PostInstall',
 
   components: {
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 20f245f2c..3ede67f63 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -129,7 +129,6 @@ import {
 } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DomainForm',
 
   props: {
diff --git a/app/src/views/_partials/ErrorDisplay.vue b/app/src/views/_partials/ErrorDisplay.vue
index 1bfa0c51e..fd11eea02 100644
--- a/app/src/views/_partials/ErrorDisplay.vue
+++ b/app/src/views/_partials/ErrorDisplay.vue
@@ -54,7 +54,6 @@
 import MessageListGroup from '@/components/MessageListGroup.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ErrorDisplay',
 
   components: {
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index 725797c82..022fc0d03 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -94,7 +94,6 @@ import QueryHeader from '@/components/QueryHeader.vue'
 import MessageListGroup from '@/components/MessageListGroup.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'HistoryConsole',
 
   components: {
diff --git a/app/src/views/_partials/ReconnectingDisplay.vue b/app/src/views/_partials/ReconnectingDisplay.vue
index acbf7dee5..65e94c4a4 100644
--- a/app/src/views/_partials/ReconnectingDisplay.vue
+++ b/app/src/views/_partials/ReconnectingDisplay.vue
@@ -43,7 +43,6 @@ import api from '@/api'
 import LoginView from '@/views/LoginView.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ReconnectingDisplay',
 
   components: {
diff --git a/app/src/views/_partials/ViewLockOverlay.vue b/app/src/views/_partials/ViewLockOverlay.vue
index f1b3dc464..8450b12fd 100644
--- a/app/src/views/_partials/ViewLockOverlay.vue
+++ b/app/src/views/_partials/ViewLockOverlay.vue
@@ -30,7 +30,6 @@ import {
 import QueryHeader from '@/components/QueryHeader.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ViewLockOverlay',
 
   components: {
diff --git a/app/src/views/_partials/WaitingDisplay.vue b/app/src/views/_partials/WaitingDisplay.vue
index 89d9d821a..baee407db 100644
--- a/app/src/views/_partials/WaitingDisplay.vue
+++ b/app/src/views/_partials/WaitingDisplay.vue
@@ -30,7 +30,6 @@
 import MessageListGroup from '@/components/MessageListGroup.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'WaitingDisplay',
 
   components: {
diff --git a/app/src/views/_partials/WarningDisplay.vue b/app/src/views/_partials/WarningDisplay.vue
index 000b9a96a..62360d187 100644
--- a/app/src/views/_partials/WarningDisplay.vue
+++ b/app/src/views/_partials/WarningDisplay.vue
@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'WarningDisplay',
 
   props: {
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index e63ee4185..edc67c49f 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -227,7 +227,6 @@ import { required, appRepoUrl } from '@/helpers/validators'
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AppCatalog',
 
   components: {
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index a2facae3d..860c20347 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -377,7 +377,6 @@ import {
 import ConfigPanels from '@/components/ConfigPanels.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AppInfo',
 
   components: {
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 345b7dacd..1da7fb8f2 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -217,7 +217,6 @@ import {
 import CardCollapse from '@/components/CardCollapse.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AppInstall',
 
   components: {
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index 171cfc1ce..20a2bbbf4 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -39,7 +39,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AppList',
 
   data() {
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index 3a5d1a7fa..38c6cda8d 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -127,7 +127,6 @@
 import api from '@/api'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'BackupCreate',
 
   props: {
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index dddf626c2..891fec748 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -142,7 +142,6 @@ import { humanSize } from '@/helpers/filters/human'
 import { isEmptyValue } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'BackupInfo',
 
   props: {
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index 16a0701b6..5389b086d 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -49,7 +49,6 @@ import { distanceToNow, readableDate } from '@/helpers/filters/date'
 import { humanSize } from '@/helpers/filters/human'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'BackupList',
 
   props: {
diff --git a/app/src/views/backup/BackupView.vue b/app/src/views/backup/BackupView.vue
index 8202b19b4..f94a5f8b9 100644
--- a/app/src/views/backup/BackupView.vue
+++ b/app/src/views/backup/BackupView.vue
@@ -24,7 +24,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'BackupView',
 
   data() {
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index aac150340..58549cee1 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -153,7 +153,6 @@ import { distanceToNow } from '@/helpers/filters/date'
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DiagnosisView',
 
   data() {
diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/domain/DomainAdd.vue
index 73b8d6ac1..745a81ad3 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -14,7 +14,6 @@ import api from '@/api'
 import { DomainForm } from '@/views/_partials'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DomainAdd',
 
   data() {
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index c99145a30..4ac881aaf 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -148,7 +148,6 @@ import api from '@/api'
 import { isEmptyValue } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DomainDns',
 
   props: {
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 630f92791..b63c7578b 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -149,7 +149,6 @@ import ConfigPanels from '@/components/ConfigPanels.vue'
 import DomainDns from './DomainDns.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DomainInfo',
 
   components: {
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 7f194ce30..c95a96bfa 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -53,7 +53,6 @@ import { mapGetters } from 'vuex'
 import RecursiveListGroup from '@/components/RecursiveListGroup.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DomainList',
 
   components: {
diff --git a/app/src/views/group/GroupCreate.vue b/app/src/views/group/GroupCreate.vue
index aad17ee7b..fb571677d 100644
--- a/app/src/views/group/GroupCreate.vue
+++ b/app/src/views/group/GroupCreate.vue
@@ -22,7 +22,6 @@ import api from '@/api'
 import { required, alphalownumdot_ } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'GroupCreate',
 
   setup() {
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 3b2d9afb2..aa1f6ed25 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -140,7 +140,6 @@ import TagsSelectizeItem from '@/components/globals/formItems/TagsSelectizeItem.
 // TODO add global search with type (search by: group, user, permission)
 // TODO add vuex store update on inputs ?
 export default {
-  compatConfig: { MODE: 3 },
   name: 'GroupList',
 
   components: {
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index 6270b35b0..fd9082e99 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -86,7 +86,6 @@ import api from '@/api'
 import { distanceToNow } from '@/helpers/filters/date'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ServiceInfo',
 
   props: {
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 189621dd2..789a3eed0 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -46,7 +46,6 @@
 import { distanceToNow } from '@/helpers/filters/date'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ServiceList',
 
   data() {
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 371da98b9..2c722c2ea 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -125,7 +125,6 @@ import api from '@/api'
 import { required, integer, between } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolFirewall',
 
   setup() {
diff --git a/app/src/views/tool/ToolList.vue b/app/src/views/tool/ToolList.vue
index ec611ac52..8c4cead27 100644
--- a/app/src/views/tool/ToolList.vue
+++ b/app/src/views/tool/ToolList.vue
@@ -15,7 +15,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolList',
 
   data() {
diff --git a/app/src/views/tool/ToolLog.vue b/app/src/views/tool/ToolLog.vue
index 1c44d5549..2a4e0fd6c 100644
--- a/app/src/views/tool/ToolLog.vue
+++ b/app/src/views/tool/ToolLog.vue
@@ -78,7 +78,6 @@ import { escapeHtml } from '@/helpers/commons'
 import { readableDate } from '@/helpers/filters/date'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolLog',
 
   props: {
diff --git a/app/src/views/tool/ToolLogs.vue b/app/src/views/tool/ToolLogs.vue
index 72161903c..62724a6b9 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -29,7 +29,6 @@
 import { distanceToNow, readableDate } from '@/helpers/filters/date'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolLogs',
 
   data() {
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index 5210855aa..55e749baf 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -91,7 +91,6 @@ import api from '@/api'
 
 // FIXME not tested with pending migrations (disclaimer and stuff)
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolMigrations',
 
   data() {
diff --git a/app/src/views/tool/ToolPower.vue b/app/src/views/tool/ToolPower.vue
index 7864da33a..0443f0434 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -37,7 +37,6 @@
 import api from '@/api'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolPower',
 
   methods: {
diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index 4e71fa274..a42993034 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -23,7 +23,6 @@ import {
 import ConfigPanels from '@/components/ConfigPanels.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolSettingsConfig',
 
   components: {
diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index b4ee2cc23..90200cf49 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/app/src/views/tool/ToolWebadmin.vue
@@ -27,7 +27,6 @@ function mapStoreGetSet(props = [], action = 'commit') {
 }
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolWebadmin',
 
   data() {
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 2c0e49913..08b3cbbd6 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -144,7 +144,6 @@ import { mapGetters } from 'vuex'
 import CardCollapse from '@/components/CardCollapse.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'SystemUpdate',
 
   components: {
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index 64557e5ae..7d62555d3 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -84,7 +84,6 @@ import {
 } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'UserCreate',
 
   setup() {
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 2cbe98209..e8ae18b6b 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -134,7 +134,6 @@ import {
 import AdressInputSelect from '@/components/AdressInputSelect.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'UserEdit',
 
   props: {
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index 9fd16f2e3..b0286b7f1 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -29,7 +29,6 @@ import { formatFormData } from '@/helpers/yunohostArguments'
 import { required } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'UserImport',
 
   setup() {
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index 922e47233..2929cfd40 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -106,7 +106,6 @@
 import api from '@/api'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'UserInfo',
 
   props: {
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 1b227bf5f..2622c4ea2 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -56,7 +56,6 @@
 import { mapGetters } from 'vuex'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'UserList',
 
   data() {
diff --git a/app/vite.config.js b/app/vite.config.js
index bd9be9d74..5086a3a44 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -23,7 +23,6 @@ export default defineConfig(({ command, mode }) => {
     },
     resolve: {
       alias: [
-        { find: 'vue', replacement: '@vue/compat' },
         // this is required for the SCSS modules imports with `~` (node_modules)
         {
           find: /^~(.*)$/,
@@ -47,17 +46,7 @@ export default defineConfig(({ command, mode }) => {
         },
       },
     },
-    plugins: [
-      createVuePlugin({
-        template: {
-          compilerOptions: {
-            compatConfig: {
-              MODE: 2,
-            },
-          },
-        },
-      }),
-    ],
+    plugins: [createVuePlugin()],
     build: {
       rollupOptions: {
         output: {

From bba1aa85c21ef3dffa39e1dd01b9114c5218312c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 12 Mar 2024 05:00:33 +0100
Subject: [PATCH 038/275] migration(vue3): COMPILER_V_ON_NATIVE

---
 app/src/components/globals/formItems/FileItem.vue          | 2 +-
 app/src/components/globals/formItems/SelectItem.vue        | 2 +-
 app/src/components/globals/formItems/TagsSelectizeItem.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 18a4ea533..02d7f3f51 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -21,7 +21,7 @@
       :browse-text="$t('words.browse')"
       @input="onInput"
       @blur="$parent.$emit('touch', name)"
-      @focusout.native="$parent.$emit('touch', name)"
+      @focusout="$parent.$emit('touch', name)"
     />
   </BButtonGroup>
 </template>
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index f47a76f91..2140f49f8 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -5,7 +5,7 @@
     :id="id"
     :options="choices"
     :required="required"
-    @blur.native="$emit('blur', modelValue)"
+    @blur="$emit('blur', modelValue)"
   />
 </template>
 
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index b809c6604..dd161f128 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -35,7 +35,7 @@
           variant="outline-dark"
           block
           menu-class="w-100"
-          @keydown.native="onDropdownKeydown"
+          @keydown="onDropdownKeydown"
         >
           <template #button-content>
             <YIcon iname="search-plus" /> {{ label }}

From ccc7298213c58eaf39f884426cd374e94baf4fbf Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 12 Mar 2024 18:36:14 +0100
Subject: [PATCH 039/275] migration(vue-i18n): legacy mode off

---
 app/src/components/globals/AbstractForm.vue   |  2 +-
 app/src/components/globals/CardForm.vue       |  2 +-
 app/src/components/globals/FormField.vue      |  2 +-
 app/src/components/globals/ReadOnlyField.vue  |  8 ++---
 app/src/components/globals/ViewSearch.vue     |  8 +++--
 .../globals/formItems/TagsSelectizeItem.vue   | 20 ++++++++----
 app/src/i18n/index.js                         |  3 +-
 app/src/main.js                               |  8 ++---
 app/src/views/LoginView.vue                   |  6 ++--
 app/src/views/PostInstall.vue                 | 16 +++++-----
 app/src/views/_partials/DomainForm.vue        | 18 +++++------
 app/src/views/app/AppCatalog.vue              | 24 +++++++-------
 app/src/views/app/AppInfo.vue                 | 12 +++----
 app/src/views/app/AppInstall.vue              | 16 ++++------
 app/src/views/backup/BackupCreate.vue         |  6 ++--
 app/src/views/backup/BackupInfo.vue           | 10 +++---
 app/src/views/backup/BackupList.vue           |  2 +-
 app/src/views/backup/BackupView.vue           |  2 +-
 app/src/views/domain/DomainDns.vue            |  2 +-
 app/src/views/domain/DomainInfo.vue           |  4 +--
 app/src/views/group/GroupCreate.vue           |  6 ++--
 app/src/views/group/GroupList.vue             |  4 +--
 app/src/views/service/ServiceInfo.vue         |  2 +-
 app/src/views/tool/ToolFirewall.vue           | 32 +++++++++----------
 app/src/views/tool/ToolMigrations.vue         |  2 +-
 app/src/views/tool/ToolPower.vue              |  2 +-
 app/src/views/tool/ToolWebadmin.vue           | 20 ++++++------
 app/src/views/update/SystemUpdate.vue         | 12 +++----
 app/src/views/user/UserCreate.vue             | 18 +++++------
 app/src/views/user/UserEdit.vue               | 28 ++++++++--------
 app/src/views/user/UserImport.vue             | 18 +++++------
 31 files changed, 156 insertions(+), 159 deletions(-)

diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index 767fc9f2f..273073cac 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -48,7 +48,7 @@ export default {
     errorFeedback() {
       if (this.serverError) return this.serverError
       else if (this.validation && this.validation.$errors.length) {
-        return this.$i18n.t('form_errors.invalid_form')
+        return this.$t('form_errors.invalid_form')
       } else return ''
     },
   },
diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index 16e8d0adc..c63bbbeb7 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -53,7 +53,7 @@ export default {
     errorFeedback() {
       if (this.serverError) return this.serverError
       else if (this.validation && this.validation.$errors.length) {
-        return this.$i18n.t('form_errors.invalid_form')
+        return this.$t('form_errors.invalid_form')
       } else return ''
     },
   },
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index bba49ece6..e08692e74 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -119,7 +119,7 @@ export default {
       const err = this.error
       if (err) {
         if (err.$message) return err.$message
-        return this.$i18n.t('form_errors.' + err.$validator, {
+        return this.$t('form_errors.' + err.$validator, {
           value: err.$model,
           ...err.$params,
         })
diff --git a/app/src/components/globals/ReadOnlyField.vue b/app/src/components/globals/ReadOnlyField.vue
index 39949a728..0a631a691 100644
--- a/app/src/components/globals/ReadOnlyField.vue
+++ b/app/src/components/globals/ReadOnlyField.vue
@@ -38,15 +38,13 @@ export default {
     parseValue(value) {
       const item = this.component
       if (item === 'FileItem') value = value.file ? value.file.name : null
-      if (item === 'CheckboxItem') value = this.$i18n.t(value ? 'yes' : 'no')
+      if (item === 'CheckboxItem') value = this.$t(value ? 'yes' : 'no')
       if (item === 'TextAreaItem') value = value.replaceAll('\n', '<br>')
       if (Array.isArray(value)) {
-        value = value.length
-          ? value.join(this.$i18n.t('words.separator'))
-          : null
+        value = value.length ? value.join(this.$t('words.separator')) : null
       }
       if ([null, undefined, ''].includes(this.value))
-        value = this.$i18n.t('words.none')
+        value = this.$t('words.none')
       return value
     },
   },
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index cd2d7f068..94073c989 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -14,7 +14,7 @@
           :value="search"
           @input="$emit('update:search', $event)"
           :placeholder="
-            $t('search.for', { items: $tc('items.' + itemsName, 2) })
+            $t('search.for', { items: $t('items.' + itemsName, 2) })
           "
           :disabled="!items"
         />
@@ -33,10 +33,12 @@
         <slot name="alert-message">
           <YIcon iname="exclamation-triangle" />
           {{
-            $tc(
+            $t(
               items === null ? 'items_verbose_count' : 'search.not_found',
+              {
+                items: $t('items.' + itemsName, 0),
+              },
               0,
-              { items: $tc('items.' + itemsName, 0) },
             )
           }}
         </slot>
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index dd161f128..685576c41 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -49,9 +49,13 @@
                 label-size="sm"
                 :label-for="id + '-search-input'"
                 :invalid-feedback="
-                  $tc('search.not_found', 0, {
-                    items: $tc('items.' + itemsName, 0),
-                  })
+                  $t(
+                    'search.not_found',
+                    {
+                      items: $t('items.' + itemsName, 0),
+                    },
+                    0,
+                  )
                 "
                 :state="searchState"
                 :disabled="disabled"
@@ -80,9 +84,13 @@
           <BDropdownText v-if="!criteria && availableOptions.length === 0">
             <YIcon iname="exclamation-triangle" />
             {{
-              $tc('items_verbose_items_left', 0, {
-                items: $tc('items.' + itemsName, 0),
-              })
+              $t(
+                'items_verbose_items_left',
+                {
+                  items: $t('items.' + itemsName, 0),
+                },
+                0,
+              )
             }}
           </BDropdownText>
         </BDropdown>
diff --git a/app/src/i18n/index.js b/app/src/i18n/index.js
index df48cfc58..fa6e965ef 100644
--- a/app/src/i18n/index.js
+++ b/app/src/i18n/index.js
@@ -6,6 +6,5 @@
 import { createI18n } from 'vue-i18n'
 
 export default createI18n({
-  // FIXME
-  legacy: true,
+  legacy: false,
 })
diff --git a/app/src/main.js b/app/src/main.js
index c6bd4686d..f130934ed 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -36,8 +36,8 @@ app.use(VueShowdownPlugin, {
 // FIXME find or wait for a better way
 app.config.globalProperties.$askConfirmation = function (message, props) {
   return this.$bvModal.msgBoxConfirm(message, {
-    okTitle: this.$i18n.t('ok'),
-    cancelTitle: this.$i18n.t('cancel'),
+    okTitle: this.$t('ok'),
+    cancelTitle: this.$t('cancel'),
     bodyBgVariant: 'warning',
     centered: true,
     bodyClass: [
@@ -58,8 +58,8 @@ app.config.globalProperties.$askMdConfirmation = function (
     props: { markdown, flavor: 'github', options: { headerLevelStart: 4 } },
   })
   return this.$bvModal['msgBox' + (ok ? 'Ok' : 'Confirm')](content, {
-    okTitle: this.$i18n.t('yes'),
-    cancelTitle: this.$i18n.t('cancel'),
+    okTitle: this.$t('yes'),
+    cancelTitle: this.$t('cancel'),
     headerBgVariant: 'warning',
     headerClass: store.state.theme ? 'text-white' : 'text-black',
     centered: true,
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index a05bb1975..7e4f9435f 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -60,14 +60,14 @@ export default {
       },
       fields: {
         username: {
-          label: this.$i18n.t('user_username'),
+          label: this.$t('user_username'),
           props: {
             id: 'username',
             autocomplete: 'username',
           },
         },
         password: {
-          label: this.$i18n.t('password'),
+          label: this.$t('password'),
           props: {
             id: 'password',
             type: 'password',
@@ -109,7 +109,7 @@ export default {
         })
         .catch((err) => {
           if (err.name !== 'APIUnauthorizedError') throw err
-          this.serverError = this.$i18n.t('wrong_password_or_username')
+          this.serverError = this.$t('wrong_password_or_username')
         })
     },
   },
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 8b1e92e01..ac9c0dd43 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -132,30 +132,30 @@ export default {
 
       fields: {
         username: {
-          label: this.$i18n.t('user_username'),
+          label: this.$t('user_username'),
           props: {
             id: 'username',
-            placeholder: this.$i18n.t('placeholder.username'),
+            placeholder: this.$t('placeholder.username'),
           },
         },
 
         fullname: {
-          label: this.$i18n.t('user_fullname'),
+          label: this.$t('user_fullname'),
           props: {
             id: 'fullname',
-            placeholder: this.$i18n.t('placeholder.fullname'),
+            placeholder: this.$t('placeholder.fullname'),
           },
         },
 
         password: {
-          label: this.$i18n.t('password'),
-          description: this.$i18n.t('good_practices_about_admin_password'),
+          label: this.$t('password'),
+          description: this.$t('good_practices_about_admin_password'),
           descriptionVariant: 'warning',
           props: { id: 'password', placeholder: '••••••••', type: 'password' },
         },
 
         confirmation: {
-          label: this.$i18n.t('password_confirmation'),
+          label: this.$t('password_confirmation'),
           props: {
             id: 'confirmation',
             placeholder: '••••••••',
@@ -180,7 +180,7 @@ export default {
 
     async setUser() {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_postinstall', { domain: this.domain }),
+        this.$t('confirm_postinstall', { domain: this.domain }),
       )
       if (!confirmed) return
       this.performPostInstall()
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 3ede67f63..28de1fba9 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -157,26 +157,26 @@ export default {
 
       fields: {
         domain: {
-          label: this.$i18n.t('domain_name'),
+          label: this.$t('domain_name'),
           props: {
             id: 'domain',
-            placeholder: this.$i18n.t('placeholder.domain'),
+            placeholder: this.$t('placeholder.domain'),
           },
         },
 
         dynDomain: {
-          label: this.$i18n.t('domain_name'),
+          label: this.$t('domain_name'),
           props: {
             id: 'dyn-domain',
-            placeholder: this.$i18n.t('placeholder.domain').split('.')[0],
+            placeholder: this.$t('placeholder.domain').split('.')[0],
             type: 'domain',
             choices: ['nohost.me', 'noho.st', 'ynh.fr'],
           },
         },
 
         dynDomainPassword: {
-          label: this.$i18n.t('domain.add.dyn_dns_password'),
-          description: this.$i18n.t('domain.add.dyn_dns_password_desc'),
+          label: this.$t('domain.add.dyn_dns_password'),
+          description: this.$t('domain.add.dyn_dns_password_desc'),
           props: {
             id: 'dyn-dns-password',
             placeholder: '••••••••',
@@ -185,7 +185,7 @@ export default {
         },
 
         dynDomainPasswordConfirmation: {
-          label: this.$i18n.t('password_confirmation'),
+          label: this.$t('password_confirmation'),
           props: {
             id: 'dyn-dns-password-confirmation',
             placeholder: '••••••••',
@@ -194,10 +194,10 @@ export default {
         },
 
         localDomain: {
-          label: this.$i18n.t('domain_name'),
+          label: this.$t('domain_name'),
           props: {
             id: 'dyn-domain',
-            placeholder: this.$i18n.t('placeholder.domain').split('.')[0],
+            placeholder: this.$t('placeholder.domain').split('.')[0],
             type: 'domain',
             choices: ['local', 'test'],
           },
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index edc67c49f..5f6afe7f6 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -15,7 +15,7 @@
           </BInputGroupPrepend>
           <BFormInput
             id="search-input"
-            :placeholder="$t('search.for', { items: $tc('items.apps', 2) })"
+            :placeholder="$t('search.for', { items: $t('items.apps', 2) })"
             :value="search"
             @input="updateQuery('search', $event)"
           />
@@ -257,24 +257,24 @@ export default {
 
       // Filtering options
       qualityOptions: [
-        { value: 'high_quality', text: this.$i18n.t('only_highquality_apps') },
+        { value: 'high_quality', text: this.$t('only_highquality_apps') },
         {
           value: 'decent_quality',
-          text: this.$i18n.t('only_decent_quality_apps'),
+          text: this.$t('only_decent_quality_apps'),
         },
-        { value: 'working', text: this.$i18n.t('only_working_apps') },
-        { value: 'all', text: this.$i18n.t('all_apps') },
+        { value: 'working', text: this.$t('only_working_apps') },
+        { value: 'all', text: this.$t('all_apps') },
       ],
       categories: [
-        { text: this.$i18n.t('app_choose_category'), value: null },
-        { text: this.$i18n.t('all_apps'), value: 'all', icon: 'search' },
+        { text: this.$t('app_choose_category'), value: null },
+        { text: this.$t('all_apps'), value: 'all', icon: 'search' },
         // The rest is filled from api data
       ],
 
       // Custom install form
       customInstall: {
         field: {
-          label: this.$i18n.t('url'),
+          label: this.$t('url'),
           props: {
             id: 'custom-install',
             placeholder: 'https://some.git.forge.tld/USER/REPOSITORY',
@@ -321,11 +321,11 @@ export default {
           (cat) => cat.value === this.category,
         )
         if (category.subtags) {
-          const subtags = [{ text: this.$i18n.t('all'), value: 'all' }]
+          const subtags = [{ text: this.$t('all'), value: 'all' }]
           category.subtags.forEach((subtag) => {
             subtags.push({ text: subtag.title, value: subtag.id })
           })
-          subtags.push({ text: this.$i18n.t('others'), value: 'others' })
+          subtags.push({ text: this.$t('others'), value: 'others' })
           return subtags
         }
       }
@@ -404,7 +404,7 @@ export default {
       const app = this.apps.find((app) => app.id === appId)
       if (!app.decent_quality) {
         const confirmed = await this.$askConfirmation(
-          this.$i18n.t('confirm_install_app_' + app.state),
+          this.$t('confirm_install_app_' + app.state),
         )
         if (!confirmed) return
       }
@@ -414,7 +414,7 @@ export default {
     // INSTALL CUSTOM APP
     async onCustomInstallClick() {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_install_custom_app'),
+        this.$t('confirm_install_custom_app'),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 860c20347..435074de5 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -411,7 +411,7 @@ export default {
           {
             hasApplyButton: false,
             id: 'operations',
-            name: this.$i18n.t('operations'),
+            name: this.$t('operations'),
           },
         ],
         validations: {},
@@ -467,7 +467,7 @@ export default {
 
       const mainPermission = app.permissions[this.id + '.main']
       mainPermission.name = this.id + '.main'
-      mainPermission.title = this.$i18n.t('permission_main')
+      mainPermission.title = this.$t('permission_main')
       mainPermission.tileAvailable =
         mainPermission.url !== null && !mainPermission.url.startsWith('re:')
       form.labels.push({
@@ -507,7 +507,7 @@ export default {
         domain: app.settings.domain,
         alternativeTo: app.from_catalog.potential_alternative_to?.length
           ? app.from_catalog.potential_alternative_to.join(
-              this.$i18n.t('words.separator'),
+              this.$t('words.separator'),
             )
           : null,
         description: DESCRIPTION
@@ -517,7 +517,7 @@ export default {
           app.manifest.packaging_format >= 2
             ? {
                 archs: Array.isArray(archs)
-                  ? archs.join(this.$i18n.t('words.separator'))
+                  ? archs.join(this.$t('words.separator'))
                   : archs,
                 ldap: ldap === 'not_relevant' ? null : ldap,
                 sso: sso === 'not_relevant' ? null : sso,
@@ -647,7 +647,7 @@ export default {
 
     async changeUrl() {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_app_change_url'),
+        this.$t('confirm_app_change_url'),
       )
       if (!confirmed) return
 
@@ -663,7 +663,7 @@ export default {
 
     async setAsDefaultDomain(undo = false) {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_app_default'),
+        this.$t('confirm_app_default'),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 1da7fb8f2..4922d9532 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -313,9 +313,7 @@ export default {
         name,
         alternativeTo:
           _app.potential_alternative_to && _app.potential_alternative_to.length
-            ? _app.potential_alternative_to.join(
-                this.$i18n.t('words.separator'),
-              )
+            ? _app.potential_alternative_to.join(this.$t('words.separator'))
             : null,
         description: formatI18nField(_app.doc.DESCRIPTION || _app.description),
         screenshot: _app.screenshot,
@@ -326,7 +324,7 @@ export default {
           _app.packaging_format >= 2
             ? {
                 archs: Array.isArray(archs)
-                  ? archs.join(this.$i18n.t('words.separator'))
+                  ? archs.join(this.$t('words.separator'))
                   : archs,
                 ldap: ldap === 'not_relevant' ? null : ldap,
                 sso: sso === 'not_relevant' ? null : sso,
@@ -382,7 +380,7 @@ export default {
     async performInstall() {
       if ('path' in this.form && this.form.path === '/') {
         const confirmed = await this.$askConfirmation(
-          this.$i18n.t('confirm_install_domain_root', {
+          this.$t('confirm_install_domain_root', {
             domain: this.form.domain,
           }),
         )
@@ -406,16 +404,14 @@ export default {
           const postInstall = this.formatAppNotifs(notifications)
           if (postInstall) {
             const message =
-              this.$i18n.t('app.install.notifs.post.alert') +
-              '\n\n' +
-              postInstall
+              this.$t('app.install.notifs.post.alert') + '\n\n' + postInstall
             await this.$askMdConfirmation(
               message,
               {
-                title: this.$i18n.t('app.install.notifs.post.title', {
+                title: this.$t('app.install.notifs.post.title', {
                   name: this.app.name,
                 }),
-                okTitle: this.$i18n.t('ok'),
+                okTitle: this.$t('ok'),
               },
               true,
             )
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index 38c6cda8d..578faefeb 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -155,12 +155,12 @@ export default {
           : hook
         if (groupId in data) {
           data[groupId].value.push(hook)
-          data[groupId].description += ', ' + this.$i18n.t('hook_' + hook)
+          data[groupId].description += ', ' + this.$t('hook_' + hook)
         } else {
           data[groupId] = {
-            name: this.$i18n.t('hook_' + groupId),
+            name: this.$t('hook_' + groupId),
             value: [hook],
-            description: this.$i18n.t(
+            description: this.$t(
               groupId === hook ? `hook_${hook}_desc` : 'hook_' + hook,
             ),
           }
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index 891fec748..f4af06bd4 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -177,13 +177,13 @@ export default {
           : hook
         if (groupId in data) {
           data[groupId].value.push(hook)
-          data[groupId].description += ', ' + this.$i18n.t('hook_' + hook)
+          data[groupId].description += ', ' + this.$t('hook_' + hook)
           data[groupId].size += size
         } else {
           data[groupId] = {
-            name: this.$i18n.t('hook_' + groupId),
+            name: this.$t('hook_' + groupId),
             value: [hook],
-            description: this.$i18n.t(
+            description: this.$t(
               groupId === hook ? `hook_${hook}_desc` : 'hook_' + hook,
             ),
             size,
@@ -216,7 +216,7 @@ export default {
 
     async restoreBackup() {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_restore', { name: this.name }),
+        this.$t('confirm_restore', { name: this.name }),
       )
       if (!confirmed) return
 
@@ -246,7 +246,7 @@ export default {
 
     async deleteBackup() {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_delete', { name: this.name }),
+        this.$t('confirm_delete', { name: this.name }),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index 5389b086d..875f33900 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -16,7 +16,7 @@
 
     <BAlert v-if="!archives" variant="warning">
       <YIcon iname="exclamation-triangle" />
-      {{ $tc('items_verbose_count', 0, { items: $tc('items.backups', 0) }) }}
+      {{ $t('items_verbose_count', { items: $t('items.backups', 0) }, 0) }}
     </BAlert>
 
     <BListGroup v-else>
diff --git a/app/src/views/backup/BackupView.vue b/app/src/views/backup/BackupView.vue
index f94a5f8b9..b81f6ff6d 100644
--- a/app/src/views/backup/BackupView.vue
+++ b/app/src/views/backup/BackupView.vue
@@ -31,7 +31,7 @@ export default {
       storages: [
         {
           id: 'local',
-          name: this.$i18n.t('local_archives'),
+          name: this.$t('local_archives'),
           uri: '/home/yunohost.backup/',
         },
       ],
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index 4ac881aaf..32b5371d7 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -247,7 +247,7 @@ export default {
     async pushDnsChanges() {
       if (this.force) {
         const confirmed = await this.$askConfirmation(
-          this.$i18n.t('domain.dns.push_force_confirm'),
+          this.$t('domain.dns.push_force_confirm'),
         )
         if (!confirmed) return
       }
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index b63c7578b..824e0da5e 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -53,7 +53,7 @@
         <span class="text-secondary px-2">
           ({{
             $t('domain.cert.valid_for', {
-              days: $tc('day_validity', cert.validity),
+              days: $t('day_validity', cert.validity),
             })
           }})
         </span>
@@ -280,7 +280,7 @@ export default {
 
     async setAsDefaultDomain() {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_change_maindomain'),
+        this.$t('confirm_change_maindomain'),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/group/GroupCreate.vue b/app/src/views/group/GroupCreate.vue
index fb571677d..ef30e5f08 100644
--- a/app/src/views/group/GroupCreate.vue
+++ b/app/src/views/group/GroupCreate.vue
@@ -37,11 +37,11 @@ export default {
       },
       serverError: '',
       groupname: {
-        label: this.$i18n.t('group_name'),
-        description: this.$i18n.t('group_format_name_help'),
+        label: this.$t('group_name'),
+        description: this.$t('group_format_name_help'),
         props: {
           id: 'groupname',
-          placeholder: this.$i18n.t('placeholder.groupname'),
+          placeholder: this.$t('placeholder.groupname'),
         },
       },
     }
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index aa1f6ed25..56db370ec 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -265,7 +265,7 @@ export default {
       const permId = this.permissions.find((perm) => perm.label === option).id
       if (action === 'add' && ['sftp.main', 'ssh.main'].includes(permId)) {
         const confirmed = await this.$askConfirmation(
-          this.$i18n.t('confirm_group_add_access_permission', {
+          this.$t('confirm_group_add_access_permission', {
             name: groupName,
             perm: option,
           }),
@@ -311,7 +311,7 @@ export default {
 
     async deleteGroup(groupName) {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_delete', { name: groupName }),
+        this.$t('confirm_delete', { name: groupName }),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index fd9082e99..574724943 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -133,7 +133,7 @@ export default {
 
     async updateService(action) {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_service_' + action, { name: this.name }),
+        this.$t('confirm_service_' + action, { name: this.name }),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 2c722c2ea..c86e61058 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -140,27 +140,27 @@ export default {
 
       // Ports tables data
       fields: [
-        { key: 'port', label: this.$i18n.t('port') },
-        { key: 'ipv4', label: this.$i18n.t('ipv4') },
-        { key: 'ipv6', label: this.$i18n.t('ipv6') },
-        { key: 'uPnP', label: this.$i18n.t('upnp') },
+        { key: 'port', label: this.$t('port') },
+        { key: 'ipv4', label: this.$t('ipv4') },
+        { key: 'ipv6', label: this.$t('ipv6') },
+        { key: 'uPnP', label: this.$t('upnp') },
       ],
       protocols: undefined,
       portToToggle: undefined,
 
       // Ports form data
       actionChoices: [
-        { value: 'allow', text: this.$i18n.t('open') },
-        { value: 'disallow', text: this.$i18n.t('close') },
+        { value: 'allow', text: this.$t('open') },
+        { value: 'disallow', text: this.$t('close') },
       ],
       connectionChoices: [
-        { value: 'ipv4', text: this.$i18n.t('ipv4') },
-        { value: 'ipv6', text: this.$i18n.t('ipv6') },
+        { value: 'ipv4', text: this.$t('ipv4') },
+        { value: 'ipv6', text: this.$t('ipv6') },
       ],
       protocolChoices: [
-        { value: 'TCP', text: this.$i18n.t('tcp') },
-        { value: 'UDP', text: this.$i18n.t('udp') },
-        { value: 'Both', text: this.$i18n.t('both') },
+        { value: 'TCP', text: this.$t('tcp') },
+        { value: 'UDP', text: this.$t('udp') },
+        { value: 'Both', text: this.$t('both') },
       ],
       form: {
         action: 'allow',
@@ -216,7 +216,7 @@ export default {
 
     async togglePort({ action, port, protocol, connection }) {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_firewall_' + action, {
+        this.$t('confirm_firewall_' + action, {
           port,
           protocol,
           connection,
@@ -226,9 +226,7 @@ export default {
         return Promise.resolve(confirmed)
       }
 
-      const actionTrad = this.$i18n.t(
-        { allow: 'open', disallow: 'close' }[action],
-      )
+      const actionTrad = this.$t({ allow: 'open', disallow: 'close' }[action])
       return api
         .put(
           `firewall/${protocol}/${action}/${port}?${connection}_only`,
@@ -248,7 +246,7 @@ export default {
     async toggleUpnp(value) {
       const action = this.upnpEnabled ? 'disable' : 'enable'
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_upnp_' + action),
+        this.$t('confirm_upnp_' + action),
       )
       if (!confirmed) return
 
@@ -256,7 +254,7 @@ export default {
         .put(
           'firewall/upnp/' + action,
           {},
-          { key: 'firewall.upnp', action: this.$i18n.t(action) },
+          { key: 'firewall.upnp', action: this.$t(action) },
         )
         .then(() => {
           // FIXME Couldn't test when it works.
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index 55e749baf..bba1f2530 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -137,7 +137,7 @@ export default {
 
     async skipMigration(id) {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_migrations_skip'),
+        this.$t('confirm_migrations_skip'),
       )
       if (!confirmed) return
       api
diff --git a/app/src/views/tool/ToolPower.vue b/app/src/views/tool/ToolPower.vue
index 0443f0434..b9435cb39 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -42,7 +42,7 @@ export default {
   methods: {
     async triggerAction(action) {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_reboot_action_' + action),
+        this.$t('confirm_reboot_action_' + action),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index 90200cf49..cd053f953 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/app/src/views/tool/ToolWebadmin.vue
@@ -36,38 +36,36 @@ export default {
 
       fields: {
         locale: {
-          label: this.$i18n.t('tools_webadmin.language'),
+          label: this.$t('tools_webadmin.language'),
           component: 'SelectItem',
           props: { id: 'locale', choices: [] },
         },
 
         fallbackLocale: {
-          label: this.$i18n.t('tools_webadmin.fallback_language'),
-          description: this.$i18n.t(
-            'tools_webadmin.fallback_language_description',
-          ),
+          label: this.$t('tools_webadmin.fallback_language'),
+          description: this.$t('tools_webadmin.fallback_language_description'),
           component: 'SelectItem',
           props: { id: 'fallback-locale', choices: [] },
         },
 
         cache: {
           id: 'cache',
-          label: this.$i18n.t('tools_webadmin.cache'),
-          description: this.$i18n.t('tools_webadmin.cache_description'),
+          label: this.$t('tools_webadmin.cache'),
+          description: this.$t('tools_webadmin.cache_description'),
           component: 'CheckboxItem',
           props: { labels: { true: 'enabled', false: 'disabled' } },
         },
 
         transitions: {
           id: 'transitions',
-          label: this.$i18n.t('tools_webadmin.transitions'),
+          label: this.$t('tools_webadmin.transitions'),
           component: 'CheckboxItem',
           props: { labels: { true: 'enabled', false: 'disabled' } },
         },
 
         theme: {
           id: 'theme',
-          label: this.$i18n.t('tools_webadmin.theme'),
+          label: this.$t('tools_webadmin.theme'),
           component: 'CheckboxItem',
           props: { labels: { true: '🌙', false: '☀️' } },
         },
@@ -90,8 +88,8 @@ export default {
     if (import.meta.env.DEV) {
       this.fields.experimental = {
         id: 'experimental',
-        label: this.$i18n.t('tools_webadmin.experimental'),
-        description: this.$i18n.t('tools_webadmin.experimental_description'),
+        label: this.$t('tools_webadmin.experimental'),
+        description: this.$t('tools_webadmin.experimental_description'),
         component: 'CheckboxItem',
         props: { labels: { true: 'enabled', false: 'disabled' } },
       }
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 08b3cbbd6..349e33075 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -223,17 +223,15 @@ export default {
 
             if (postMessage) {
               const message =
-                this.$i18n.t('app.upgrade.notifs.post.alert') +
-                '\n\n' +
-                postMessage
+                this.$t('app.upgrade.notifs.post.alert') + '\n\n' + postMessage
               return this.$askMdConfirmation(
                 message,
                 {
-                  title: this.$i18n.t('app.upgrade.notifs.post.title', {
+                  title: this.$t('app.upgrade.notifs.post.title', {
                     name: app.name,
                   }),
-                  okTitle: this.$i18n.t(isLast ? 'ok' : 'app.upgrade.continue'),
-                  cancelTitle: this.$i18n.t('app.upgrade.stop'),
+                  okTitle: this.$t(isLast ? 'ok' : 'app.upgrade.continue'),
+                  cancelTitle: this.$t('app.upgrade.stop'),
                 },
                 isLast,
               )
@@ -251,7 +249,7 @@ export default {
 
     async performSystemUpgrade() {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_update_system'),
+        this.$t('confirm_update_system'),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index 7d62555d3..f1d1e3f48 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -111,32 +111,32 @@ export default {
 
       fields: {
         username: {
-          label: this.$i18n.t('user_username'),
+          label: this.$t('user_username'),
           props: {
             id: 'username',
-            placeholder: this.$i18n.t('placeholder.username'),
+            placeholder: this.$t('placeholder.username'),
           },
         },
 
         fullname: {
-          label: this.$i18n.t('user_fullname'),
+          label: this.$t('user_fullname'),
           props: {
             id: 'fullname',
-            placeholder: this.$i18n.t('placeholder.fullname'),
+            placeholder: this.$t('placeholder.fullname'),
           },
         },
 
         domain: {
           id: 'mail',
-          label: this.$i18n.t('user_email'),
-          description: this.$i18n.t('tip_about_user_email'),
+          label: this.$t('user_email'),
+          description: this.$t('tip_about_user_email'),
           descriptionVariant: 'info',
           props: { choices: [] },
         },
 
         password: {
-          label: this.$i18n.t('password'),
-          description: this.$i18n.t('good_practices_about_user_password'),
+          label: this.$t('password'),
+          description: this.$t('good_practices_about_user_password'),
           descriptionVariant: 'warning',
           props: {
             id: 'password',
@@ -146,7 +146,7 @@ export default {
         },
 
         confirmation: {
-          label: this.$i18n.t('password_confirmation'),
+          label: this.$t('password_confirmation'),
           props: {
             id: 'confirmation',
             placeholder: '••••••••',
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index e8ae18b6b..93b040156 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -167,51 +167,51 @@ export default {
 
       fields: {
         username: {
-          label: this.$i18n.t('user_username'),
+          label: this.$t('user_username'),
           value: this.name,
           props: { id: 'username', disabled: true },
         },
 
         fullname: {
-          label: this.$i18n.t('user_fullname'),
+          label: this.$t('user_fullname'),
           props: {
             id: 'fullname',
-            placeholder: this.$i18n.t('placeholder.fullname'),
+            placeholder: this.$t('placeholder.fullname'),
           },
         },
 
         mail: {
-          label: this.$i18n.t('user_email'),
+          label: this.$t('user_email'),
           props: { id: 'mail', choices: [] },
         },
 
         mailbox_quota: {
-          label: this.$i18n.t('user_mailbox_quota'),
-          description: this.$i18n.t('mailbox_quota_description'),
-          example: this.$i18n.t('mailbox_quota_example'),
+          label: this.$t('user_mailbox_quota'),
+          description: this.$t('mailbox_quota_description'),
+          example: this.$t('mailbox_quota_example'),
           props: {
             id: 'mailbox-quota',
-            placeholder: this.$i18n.t('mailbox_quota_placeholder'),
+            placeholder: this.$t('mailbox_quota_placeholder'),
           },
         },
 
         mail_aliases: {
           props: {
-            placeholder: this.$i18n.t('placeholder.username'),
+            placeholder: this.$t('placeholder.username'),
             choices: [],
           },
         },
 
         mail_forward: {
           props: {
-            placeholder: this.$i18n.t('user_new_forward'),
+            placeholder: this.$t('user_new_forward'),
             type: 'email',
           },
         },
 
         change_password: {
-          label: this.$i18n.t('password'),
-          description: this.$i18n.t('good_practices_about_user_password'),
+          label: this.$t('password'),
+          description: this.$t('good_practices_about_user_password'),
           descriptionVariant: 'warning',
           props: {
             id: 'change_password',
@@ -222,7 +222,7 @@ export default {
         },
 
         confirmation: {
-          label: this.$i18n.t('password_confirmation'),
+          label: this.$t('password_confirmation'),
           props: {
             id: 'confirmation',
             type: 'password',
@@ -315,7 +315,7 @@ export default {
       }
 
       if (Object.keys(data).length === 0) {
-        this.serverError = this.$i18n.t('error_modify_something')
+        this.serverError = this.$t('error_modify_something')
         return
       }
 
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index b0286b7f1..03ba1357d 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -49,19 +49,19 @@ export default {
 
       fields: {
         csvfile: {
-          label: this.$i18n.t('users_import_csv_file'),
-          description: this.$i18n.t('users_import_csv_file_desc'),
+          label: this.$t('users_import_csv_file'),
+          description: this.$t('users_import_csv_file_desc'),
           component: 'FileItem',
           props: {
             id: 'csvfile',
             accept: 'text/csv',
-            placeholder: this.$i18n.t('placeholder.file'),
+            placeholder: this.$t('placeholder.file'),
           },
         },
 
         update: {
-          label: this.$i18n.t('users_import_update'),
-          description: this.$i18n.t('users_import_update_desc'),
+          label: this.$t('users_import_update'),
+          description: this.$t('users_import_update_desc'),
           component: 'CheckboxItem',
           props: {
             id: 'update',
@@ -69,8 +69,8 @@ export default {
         },
 
         delete: {
-          label: this.$i18n.t('users_import_delete'),
-          description: this.$i18n.t('users_import_delete_desc'),
+          label: this.$t('users_import_delete'),
+          description: this.$t('users_import_delete_desc'),
           component: 'CheckboxItem',
           props: {
             id: 'delete',
@@ -90,8 +90,8 @@ export default {
     async onSubmit() {
       if (this.form.delete) {
         const confirmed = await this.$askConfirmation(
-          this.$i18n.t('users_import_confirm_destructive'),
-          { okTitle: this.$i18n.t('users_import_delete_others') },
+          this.$t('users_import_confirm_destructive'),
+          { okTitle: this.$t('users_import_delete_others') },
         )
         if (!confirmed) return
       }

From 1f45899d4b5e2ec44cff3fe4c676afd2baf5d9dc Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 13 Mar 2024 18:16:05 +0100
Subject: [PATCH 040/275] migration: bootstrap-vue to bootstrap-vue-next

---
 app/package.json                    |  7 +++----
 app/src/App.vue                     |  5 -----
 app/src/components/CardDeckFeed.vue |  2 +-
 app/src/main.js                     | 11 ++++-------
 app/src/scss/_variables.scss        |  9 ++++++---
 app/src/scss/main.scss              | 21 ++++++++++++---------
 app/vite.config.js                  |  9 ++++++++-
 7 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/app/package.json b/app/package.json
index b61fa4b72..912111fff 100644
--- a/app/package.json
+++ b/app/package.json
@@ -17,7 +17,8 @@
     "@fontsource/firago": "^5.0.7",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "bootstrap-vue": "^2.23.1",
+    "bootstrap": "^5.3.3",
+    "bootstrap-vue-next": "^0.16.6",
     "date-fns": "^3.3.1",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
@@ -29,15 +30,13 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
-    "bootstrap": "^4.6.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.22.0",
-    "popper.js": "^1.16.0",
-    "portal-vue": "^2.1.7",
     "prettier": "^3.2.5",
     "sass": "^1.71.1",
+    "unplugin-vue-components": "^0.26.0",
     "vite": "^5.1.4"
   },
   "browserslist": [
diff --git a/app/src/App.vue b/app/src/App.vue
index 42c5c8c29..65f22e43a 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -190,11 +190,6 @@ export default {
 }
 </script>
 
-<style lang="scss">
-// Global import of Bootstrap and custom styles
-@import '@/scss/main.scss';
-</style>
-
 <style lang="scss" scoped>
 // generic style for <html>, <body> and <#app> is in `scss/main.scss`
 header {
diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index e6bd4166d..6bf733a8b 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -2,7 +2,7 @@
 // Implementation of the feed pattern
 // https://www.w3.org/WAI/ARIA/apg/patterns/feed/
 import { h } from 'vue'
-import { BCardGroup } from 'bootstrap-vue'
+import { BCardGroup } from 'bootstrap-vue-next'
 
 export default {
   name: 'CardDeckFeed',
diff --git a/app/src/main.js b/app/src/main.js
index f130934ed..4b636d710 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import BootstrapVue from 'bootstrap-vue'
+import { createBootstrap } from 'bootstrap-vue-next'
 import { VueShowdownPlugin } from 'vue-showdown'
 
 import store from './store'
@@ -10,6 +10,8 @@ import i18n from './i18n'
 import { registerGlobalErrorHandlers } from './api'
 import { initDefaultLocales } from './i18n/helpers'
 
+import '@/scss/main.scss'
+
 const app = createApp({
   ...App,
 })
@@ -18,12 +20,7 @@ app.use(store)
 app.use(router)
 app.use(i18n)
 
-// Styles are imported in `src/App.vue` <style>
-app.use(BootstrapVue, {
-  BSkeleton: { animation: 'none' },
-  BAlert: { show: true },
-  BBadge: { pill: true },
-})
+app.use(createBootstrap())
 
 app.use(VueShowdownPlugin, {
   flavor: 'github',
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index 05cb003c8..a6cbd3796 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -25,6 +25,8 @@
 // For exemple, turning rounding of elements off, the bases colors, etc.
 // $enable-rounded: false;
 
+@import '~bootstrap/scss/functions.scss';
+
 $font-size-base: 0.9rem;
 $font-weight-bold: 500;
 
@@ -123,11 +125,12 @@ $custom-checkbox-indicator-icon-indeterminate: get-checkbox-icon-indeterminate(
 );
 
 // Import default variables after the above setup to compute all other variables.
-@import '~bootstrap/scss/functions.scss';
 @import '_functions-override.scss';
 @import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/mixins.scss';
-@import '~bootstrap-vue/src/variables';
+@import '~bootstrap/scss/variables-dark';
+@import '~bootstrap/scss/maps';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/utilities';
 
 $hr-border-color: $gray-200;
 
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 6ed444d9e..f485673b9 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -7,11 +7,11 @@
 
 // Dependencies SCSS imports
 // `~` allow to import a node_modules folder (resolved by Webpack)
-// @import "~bootstrap/scss/root";
+@import '~bootstrap/scss/root';
 @import '~bootstrap/scss/reboot';
 @import '~bootstrap/scss/type';
 @import '~bootstrap/scss/images';
-@import '~bootstrap/scss/code';
+@import '~bootstrap/scss/containers';
 @import '~bootstrap/scss/grid';
 @import '~bootstrap/scss/tables';
 @import '~bootstrap/scss/forms';
@@ -19,18 +19,15 @@
 @import '~bootstrap/scss/transitions';
 @import '~bootstrap/scss/dropdown';
 @import '~bootstrap/scss/button-group';
-@import '~bootstrap/scss/input-group';
-@import '~bootstrap/scss/custom-forms';
 @import '~bootstrap/scss/nav';
 @import '~bootstrap/scss/navbar';
 @import '~bootstrap/scss/card';
+// @import "~bootstrap/scss/accordion";
 @import '~bootstrap/scss/breadcrumb';
 // @import "~bootstrap/scss/pagination";
 @import '~bootstrap/scss/badge';
-// @import "~bootstrap/scss/jumbotron";
 @import '~bootstrap/scss/alert';
 @import '~bootstrap/scss/progress';
-// @import "~bootstrap/scss/media";
 @import '~bootstrap/scss/list-group';
 @import '~bootstrap/scss/close';
 // @import "~bootstrap/scss/toasts";
@@ -39,10 +36,16 @@
 @import '~bootstrap/scss/popover';
 // @import "~bootstrap/scss/carousel";
 @import '~bootstrap/scss/spinners';
-@import '~bootstrap/scss/utilities';
-// @import "~bootstrap/scss/print";
+@import '~bootstrap/scss/offcanvas';
+@import '~bootstrap/scss/placeholders';
 
-@import '~bootstrap-vue/src/index.scss';
+// Helpers
+@import '~bootstrap/scss/helpers';
+
+// Utilities
+@import '~bootstrap/scss/utilities/api';
+
+@import '~bootstrap-vue-next/src/styles/styles.scss';
 
 // Import fonts
 @import 'font';
diff --git a/app/vite.config.js b/app/vite.config.js
index 5086a3a44..6a5d6bacb 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -2,6 +2,8 @@ import { fileURLToPath, URL } from 'url'
 import { defineConfig, loadEnv } from 'vite'
 import fs from 'fs'
 import createVuePlugin from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import { BootstrapVueNextResolver } from 'unplugin-vue-components/resolvers'
 
 import supportedLocales from './src/i18n/supportedLocales'
 
@@ -46,7 +48,12 @@ export default defineConfig(({ command, mode }) => {
         },
       },
     },
-    plugins: [createVuePlugin()],
+    plugins: [
+      createVuePlugin(),
+      Components({
+        resolvers: [BootstrapVueNextResolver()],
+      }),
+    ],
     build: {
       rollupOptions: {
         output: {

From ad2f792e8b9a2a25917365d4118890ecd83a3126 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 13 Mar 2024 19:55:20 +0100
Subject: [PATCH 041/275] refactor: rm previous light/dark theme hacks

---
 app/src/scss/_functions-override.scss | 250 --------------------------
 app/src/scss/_variables.scss          |  27 ---
 app/src/scss/main.scss                | 103 -----------
 3 files changed, 380 deletions(-)
 delete mode 100644 app/src/scss/_functions-override.scss

diff --git a/app/src/scss/_functions-override.scss b/app/src/scss/_functions-override.scss
deleted file mode 100644
index 08cf131ac..000000000
--- a/app/src/scss/_functions-override.scss
+++ /dev/null
@@ -1,250 +0,0 @@
-@use 'sass:math';
-
-// Taken from https://gist.github.com/johanlef/518a511b2b2f6b96c4f429b3af2f169a
-// Those functions overrides built-in bootstrap's computation color functions (that
-// generate flat variants and its darken/lighten alterations) to allow `var(--color)` CSS
-// variables to be used as primary colors and be instead computed on the fly with `calc()`s
-
-@function is-color($color) {
-  @if (type-of($color) == color) {
-    @return true;
-  }
-  @return false;
-}
-
-@function count-occurrences($string, $search) {
-  $searchIndex: str-index($string, $search);
-  $searchCount: 0;
-  @while $searchIndex {
-    $searchCount: $searchCount + 1;
-    $string: str-slice($string, $searchIndex + 1);
-    $searchIndex: str-index($string, $search);
-  }
-  @return $searchCount;
-}
-
-@function str-is-between($string, $first, $last) {
-  $firstCount: count-occurrences($string, $first);
-  $lastCount: count-occurrences($string, $last);
-  @return $firstCount == $lastCount;
-}
-
-@function recursive-color($color, $index: 0) {
-  $indices: (
-    0: h,
-    1: s,
-    2: l,
-    3: a,
-  );
-  // find end of part
-  $end: str-index($color, ',');
-  @while (
-    $end and not str-is-between(str-slice($color, 0, $end - 1), '(', ')')
-  ) {
-    $newEnd: str-index(str-slice($color, $end + 1), ',');
-    @if (not $newEnd) {
-      $newEnd: 0;
-    }
-    $end: 2 + $end + $newEnd;
-  }
-  @if ($end) {
-    $part: str-slice($color, 0, $end - 1);
-    $value: map-merge(
-      (
-        map-get($indices, $index): $part,
-      ),
-      recursive-color(str-slice($color, $end + 1), $index + 1)
-    );
-    @return $value;
-  }
-  @return ();
-}
-
-@function to-hsl($color) {
-  $c: inspect($color);
-
-  $h: 0;
-  $s: 0;
-  $l: 0;
-  $a: 1;
-
-  @if (is-color($color)) {
-    // std color
-    $h: hue($color);
-    $s: saturation($color);
-    $l: lightness($color);
-    $a: alpha($color);
-
-    @return (h: $h, s: $s, l: $l, a: $a);
-  }
-
-  @if (str-slice($c, 0, 3) == 'var') {
-    // var(--color)
-    $commaPos: str-index($c, ',');
-    $end: -2;
-    @if ($commaPos) {
-      $end: $commaPos - 1;
-    }
-    $var: str-slice($c, 7, $end);
-
-    $h: var(--#{$var}-h);
-    $s: var(--#{$var}-s);
-    $l: var(--#{$var}-l);
-    $a: var(--#{$var}-a, 1);
-
-    @return (h: $h, s: $s, l: $l, a: $a);
-  }
-
-  @if ($c == '0') {
-    @return (h: $h, s: $s, l: $l, a: $a);
-  }
-
-  // color is (maybe complex) calculated color
-  // e.g.: hsla(calc((var(--white-h) + var(--primary-h)) / 2), calc((var(--white-s) + var(--primary-s)) / 2), calc((var(--white-l) + var(--primary-l)) / 2), calc((var(--white-a, 1) + var(--primary-a, 1)) / 2)), hsla(calc((var(--white-h) + var(--primary-h)) / 2), calc((var(--white-s) + var(--primary-s)) / 2), calc((var(--white-l) + var(--primary-l)) / 2), calc((var(--white-a, 1) + var(--primary-a, 1)) / 2))
-  $startPos: str-index($c, '(');
-  $c: str-slice($c, $startPos + 1, -2); // 3 or 4 comma-separated vomplex values
-  @return recursive-color($c);
-  // $hEnd: str-index($c, ',');
-  // @if ($hEnd) {
-  //   $h: str-slice($c, 0, $hEnd - 1);
-  //   $c: str-slice($c, $hEnd + 1);
-  //   $sEnd: str-index($c, ',');
-  //   @if ($hEnd) {
-  //     $h: str-slice($c, 0, $hEnd - 1);
-  //     $c: str-slice($c, $hEnd + 1);
-  //     $sEnd: str-index($c, ',');
-  //   }
-  // }
-
-  // @return (h: $h, s: $s, l: $l, a: $a);
-}
-
-@function render-hsla($h, $s, $l, $a: 1) {
-  // @return hsla($h, #{$s}, #{$l}, $a);
-  // Error when using sass `hsla` with css variables, fallback to browser native `hsla`
-  @return unquote('hsla(#{$h}, #{$s}, #{$l}, #{$a})');
-}
-
-@function lighten($color, $amount) {
-  @if (is-color($color)) {
-    @return scale-color($color: $color, $lightness: $amount);
-  }
-
-  $c: to-hsl($color);
-  $h: map-get($c, h);
-  $s: map-get($c, s);
-  $l: map-get($c, l);
-  $a: map-get($c, a);
-  @return render-hsla($h, $s, calc(#{$l} + #{$amount}), $a);
-}
-
-@function darken($color, $amount) {
-  @return lighten($color, $amount * -1);
-}
-
-@function rgba($red, $green, $blue: false, $alpha: false) {
-  $color: $red;
-
-  @if (not $blue and not $alpha) {
-    $alpha: $green;
-    $color: $red;
-  }
-
-  $c: to-hsl($color);
-  $h: map-get($c, h);
-  $s: map-get($c, s);
-  $l: map-get($c, l);
-  @return render-hsla($h, $s, $l, $alpha);
-}
-
-@function rgb($red, $green, $blue) {
-  @return rgba($red, $green, $blue, 1);
-}
-
-@function mix($color-1, $color-2, $weight: 50%) {
-  $c1: to-hsl($color-1);
-  $c2: to-hsl($color-2);
-
-  $h1: map-get($c1, h);
-  $s1: map-get($c1, s);
-  $l1: map-get($c1, l);
-  $a1: map-get($c1, a);
-
-  $h2: map-get($c2, h);
-  $s2: map-get($c2, s);
-  $l2: map-get($c2, l);
-  $a2: map-get($c2, a);
-
-  $h: calc((#{$h1} + #{$h2}) / 2);
-  $s: calc((#{$s1} + #{$s2}) / 2);
-  $l: calc((#{$l1} + #{$l2}) / 2);
-  $a: calc((#{$a1} + #{$a2}) / 2);
-
-  @return render-hsla($h, $s, $l, $a);
-}
-
-@function fade-in($color, $amount) {
-  $c: to-hsl($color);
-
-  $h: map-get($c, h);
-  $s: map-get($c, s);
-  $l: map-get($c, l);
-  $a: map-get($c, a);
-  @if (not $a) {
-    $a: 1;
-  }
-
-  @return render-hsla($h, $s, $l, $a + $amount);
-}
-
-@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
-  @if (is-color($color)) {
-    $r: red($color);
-    $g: green($color);
-    $b: blue($color);
-
-    $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
-
-    @if ($yiq >= $yiq-contrasted-threshold) {
-      @return $dark;
-    } @else {
-      @return $light;
-    }
-  } @else {
-    $c: to-hsl($color);
-    $l: map-get($c, l);
-
-    $th: calc($yiq-contrasted-threshold / 2.56); // convert hex to dec
-    $lightness: calc(-100 * calc(#{$l} - calc(#{$th} * 1%)));
-
-    // ignoring hue and saturation, just a light or dark gray
-    @return render-hsla(0, 0%, $lightness, 1);
-  }
-}
-
-// Taken from https://gist.github.com/johanlef/518a511b2b2f6b96c4f429b3af2f169a?permalink_comment_id=4053335#gistcomment-4053335
-@function theme-color-level($color-name: 'primary', $level: 0) {
-  $color: theme-color($color-name);
-  @if ($level == 0) {
-    @return $color;
-  }
-
-  $amount: math.div($theme-color-interval * abs($level), 100%);
-  $c: to-hsl($color);
-  $h: map-get($c, h);
-  $s: map-get($c, s);
-  $l: map-get($c, l);
-  $a: map-get($c, a);
-
-  @if ($level > 0) {
-    // Darken -X%: L = L * (1 - X)
-    // $rl: calc((#{$l} * #{1 - $amount}));
-    $rl: calc((#{$l} * #{$amount}));
-    @return render-hsla($h, $s, $rl, $a);
-  }
-  @if ($level < 0) {
-    // Ligthen +X%: L = L + X * (100 - L)
-    $rl: calc(#{$l} + #{$amount} * (100% - #{$l}));
-    @return render-hsla($h, $s, $rl, $a);
-  }
-}
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index a6cbd3796..635adaf35 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -57,15 +57,6 @@ $theme-colors: (
   'best': $purple,
 );
 
-$yiq-contrasted-threshold: var(--yiq-contrasted-threshold);
-
-$alert-bg-level: -10;
-$alert-border-level: -9;
-$alert-color-level: 5;
-
-$list-group-item-bg-level: -11;
-$list-group-item-color-level: 6;
-
 $code-color: $black;
 
 // Replace font-weight 300 with 200
@@ -107,25 +98,7 @@ $card-spacer-x: 1rem;
 
 $list-group-item-padding-x: 1rem;
 
-// Hard coded for scss compilation to pass
-$b-toast-background-opacity: 100%;
-
-// fixes for svg icon color not working with css variables
-@function get-checkbox-icon-checked($color) {
-  @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
-}
-
-@function get-checkbox-icon-indeterminate($color) {
-  @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$color}' d='M0 2h4'/></svg>");
-}
-
-$custom-checkbox-indicator-icon-checked: get-checkbox-icon-checked('%23fff');
-$custom-checkbox-indicator-icon-indeterminate: get-checkbox-icon-indeterminate(
-  '%23fff'
-);
-
 // Import default variables after the above setup to compute all other variables.
-@import '_functions-override.scss';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/variables-dark';
 @import '~bootstrap/scss/maps';
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index f485673b9..2afaecb7c 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -51,109 +51,6 @@
 @import 'font';
 @import '~fork-awesome/scss/fork-awesome.scss';
 
-// helper to set the required 4 CSS variables per color to allow `calc` computation of variants and states
-@mixin hsl-color($name, $h, $s, $l) {
-  --#{$name}: hsl(#{$h}, #{$s}, #{$l});
-  --#{$name}-h: #{$h};
-  --#{$name}-s: #{$s};
-  --#{$name}-l: #{$l};
-}
-
-:root {
-  color-scheme: light;
-
-  --yiq-contrasted-threshold: 150;
-
-  @include hsl-color('white', 0, 0%, 100%);
-  @include hsl-color('black', 0, 0%, 0%);
-  @include hsl-color('blue', 211, 64%, 50%);
-  @include hsl-color('indigo', 263, 90%, 51%);
-  @include hsl-color('purple', 280, 61%, 50%);
-  @include hsl-color('pink', 332, 79%, 58%);
-  @include hsl-color('red', 354, 70%, 54%);
-  @include hsl-color('orange', 27, 98%, 54%);
-  @include hsl-color('yellow', 45, 100%, 66%);
-  @include hsl-color('green', 134, 61%, 41%);
-  @include hsl-color('teal', 162, 73%, 46%);
-  @include hsl-color('cyan', 188, 78%, 41%);
-
-  @include hsl-color('gray-100', 210, 17%, 98%);
-  @include hsl-color('gray-200', 210, 16%, 93%);
-  @include hsl-color('gray-300', 210, 14%, 89%);
-  @include hsl-color('gray-400', 210, 14%, 83%);
-  @include hsl-color('gray-500', 210, 11%, 71%);
-  @include hsl-color('gray-600', 208, 7%, 46%);
-  @include hsl-color('gray-700', 210, 9%, 31%);
-  @include hsl-color('gray-800', 210, 10%, 23%);
-  @include hsl-color('gray-900', 210, 11%, 15%);
-
-  // Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
-  @each $color, $value in $theme-colors {
-    @include list-group-item-variant(
-      $color,
-      theme-color-level($color, $list-group-item-bg-level),
-      theme-color-level($color, $list-group-item-color-level)
-    );
-
-    .btn-#{$color} {
-      &:focus,
-      &.focus {
-        box-shadow: 0 0 0 $btn-focus-width rgba($value, 0.3);
-      }
-    }
-  }
-}
-
-[dark-theme='true'] {
-  color-scheme: dark; // Ask browser to use dark mode native styling
-
-  --yiq-contrasted-threshold: 120;
-
-  @include hsl-color('white', 256, 0%, 12.5%);
-  @include hsl-color('black', 256, 0%, 100%);
-  @include hsl-color('blue', 210.7, 95.5%, 65.5%);
-  @include hsl-color('purple', 280, 77.8%, 62.9%);
-  @include hsl-color('red', 0, 100%, 67.6%);
-  @include hsl-color('green', 134.3, 74.4%, 67.8%);
-  @include hsl-color('cyan', 188.4, 91.4%, 72.5%);
-
-  @include hsl-color('gray-900', 256, 0%, 98%);
-  @include hsl-color('gray-800', 256, 0%, 93%);
-  @include hsl-color('gray-700', 256, 0%, 89%);
-  @include hsl-color('gray-600', 256, 0%, 83%);
-  @include hsl-color('gray-500', 256, 0%, 71%);
-  @include hsl-color('gray-400', 256, 0%, 46%);
-  @include hsl-color('gray-300', 256, 0%, 31%);
-  @include hsl-color('gray-200', 256, 0%, 23%);
-  @include hsl-color('gray-100', 256, 0%, 15%);
-
-  @each $color, $value in $theme-colors {
-    @include list-group-item-variant(
-      $color,
-      theme-color-level($color, -6),
-      theme-color-level($color, 2)
-    );
-
-    .alert-#{$color} {
-      @include alert-variant(
-        theme-color-level($color, -6),
-        theme-color-level($color, -5),
-        theme-color-level($color, 2)
-      );
-    }
-  }
-
-  // FIX svg fill not working with CSS variables
-  .custom-checkbox .custom-control-input {
-    &:checked ~ .custom-control-label::after {
-      background-image: escape-svg(get-checkbox-icon-checked('#202020'));
-    }
-
-    &:indeterminate ~ .custom-control-label::after {
-      background-image: escape-svg(get-checkbox-icon-indeterminate('#202020'));
-    }
-  }
-}
 
 // Style overrides happens after dependencies imports
 

From 4f047d92d332a9be0451c6caa1b63eca757f8394 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 14 Mar 2024 13:39:11 +0100
Subject: [PATCH 042/275] migration(vue3): COMPONENT_V_MODEL

---
 app/src/components/globals/ViewSearch.vue        |  4 ++--
 .../globals/formItems/CheckboxItem.vue           |  5 ++---
 .../components/globals/formItems/FileItem.vue    |  2 +-
 .../components/globals/formItems/TagsItem.vue    |  4 ++--
 app/src/views/app/AppCatalog.vue                 | 16 ++++++++--------
 app/src/views/tool/ToolFirewall.vue              |  5 ++---
 app/src/views/user/UserEdit.vue                  |  2 +-
 7 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index 94073c989..de6912b03 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -11,8 +11,8 @@
 
         <BFormInput
           id="top-bar-search"
-          :value="search"
-          @input="$emit('update:search', $event)"
+          :modelValue="search"
+          @update:modelValue="$emit('update:search', $event)"
           :placeholder="
             $t('search.for', { items: $t('items.' + itemsName, 2) })
           "
diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index 8eb1b0319..7da516a77 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -1,8 +1,7 @@
 <template>
-  <!-- FIXME vue3 - `modelValue`+`@update:model` doesn't work here, probably to the prop's name not being `value`. Sticking for now to `checked`+`@input` -->
   <BFormCheckbox
-    :checked="modelValue"
-    @input="$emit('update:modelValue', $event)"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
     :aria-describedby="$parent.id + '__BV_description_'"
     switch
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 02d7f3f51..07392692a 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -19,7 +19,7 @@
       :drop-placeholder="dropPlaceholder"
       :state="state"
       :browse-text="$t('words.browse')"
-      @input="onInput"
+      @update:modelValue="onInput"
       @blur="$parent.$emit('touch', name)"
       @focusout="$parent.$emit('touch', name)"
     />
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index 55dbdf29f..d19377521 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -1,7 +1,7 @@
 <template>
   <BFormTags
-    :value="modelValue"
-    @input="$emit('update:modelValue', $event)"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
     :placeholder="placeholder"
     :required="required"
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 5f6afe7f6..40ded865e 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -16,14 +16,14 @@
           <BFormInput
             id="search-input"
             :placeholder="$t('search.for', { items: $t('items.apps', 2) })"
-            :value="search"
-            @input="updateQuery('search', $event)"
+            :modelValue="search"
+            @update:modelValue="updateQuery('search', $event)"
           />
           <BInputGroupAppend>
             <BFormSelect
-              :value="quality"
+              :modelValue="quality"
               :options="qualityOptions"
-              @change="updateQuery('quality', $event)"
+              @update:modelValue="updateQuery('quality', $event)"
             />
           </BInputGroupAppend>
         </BInputGroup>
@@ -34,9 +34,9 @@
             <YIcon iname="filter" />
           </BInputGroupPrepend>
           <BFormSelect
-            :value="category"
+            :modelValue="category"
             :options="categories"
-            @change="updateQuery('category', $event)"
+            @update:modelValue="updateQuery('category', $event)"
           />
           <BInputGroupAppend>
             <BButton
@@ -63,9 +63,9 @@
           />
           <BFormSelect
             id="subtags-select"
-            :value="subtag"
+            :modelValue="subtag"
             :options="subtags"
-            @change="updateQuery('subtag', $event)"
+            @update:modelValue="updateQuery('subtag', $event)"
           />
         </BInputGroup>
       </div>
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index c86e61058..9e6d35b9c 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -20,10 +20,9 @@
           <template #cell()="data">
             <BFormCheckbox
               v-if="data.field.key !== 'uPnP'"
-              class="on-off-switch"
-              v-model="data.value"
+              :modelValue="data.value"
               switch
-              @change="
+              @update:modelValue="
                 onTablePortToggling(
                   data.item.port,
                   protocol,
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 93b040156..4e6418b6d 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -168,7 +168,7 @@ export default {
       fields: {
         username: {
           label: this.$t('user_username'),
-          value: this.name,
+          modelValue: this.name,
           props: { id: 'username', disabled: true },
         },
 

From 5892842cec96df5bf67757538f82b27e0c3d0e5f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 14 Mar 2024 16:52:28 +0100
Subject: [PATCH 043/275] migration: rework dark theme enabling

---
 app/src/App.vue                               | 11 +++++++----
 app/src/components/globals/YListGroupItem.vue |  2 +-
 app/src/components/globals/YSpinner.vue       |  2 +-
 app/src/main.js                               |  4 ++--
 app/src/store/settings.js                     | 19 +++++++++++--------
 app/src/views/diagnosis/DiagnosisView.vue     |  2 +-
 app/src/views/tool/ToolWebadmin.vue           |  4 ++--
 app/src/views/update/SystemUpdate.vue         |  4 ++--
 8 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index 65f22e43a..3608feb2d 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -8,7 +8,7 @@
           :disabled="waiting"
           exact-active-class="active"
         >
-          <span v-if="theme">
+          <span v-if="dark">
             <img alt="YunoHost logo" src="./assets/logo_light.png" width="40" />
           </span>
           <span v-else>
@@ -116,7 +116,7 @@ export default {
       'transitions',
       'transitionName',
       'waiting',
-      'theme',
+      'dark',
       'ssoLink',
     ]),
   },
@@ -184,8 +184,11 @@ export default {
     if (today.getDate() === 31 && today.getMonth() + 1 === 10) {
       this.$store.commit('SET_SPINNER', 'spookycat')
     }
-
-    document.documentElement.setAttribute('dark-theme', this.theme) // updates the data-theme attribute
+    // updates the data-bs-theme attribute
+    document.documentElement.setAttribute(
+      'data-bs-theme',
+      this.dark ? 'dark' : 'light',
+    )
   },
 }
 </script>
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index cf2cc82ab..daf32ac04 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -63,7 +63,7 @@ export default {
     &-#{$color} {
       color: theme-color-level($color, 6);
 
-      [dark-theme='true'] & {
+      [data-bs-theme='light'] & {
         color: theme-color-level($color, -6);
       }
 
diff --git a/app/src/components/globals/YSpinner.vue b/app/src/components/globals/YSpinner.vue
index 388e80d57..a5741d68c 100644
--- a/app/src/components/globals/YSpinner.vue
+++ b/app/src/components/globals/YSpinner.vue
@@ -25,7 +25,7 @@ export default {
     background-image: url('../../assets/spinners/pacman_dark.gif');
     animation-name: back-and-forth-pacman;
 
-    [dark-theme='true'] & {
+    [data-bs-theme='dark'] & {
       background-image: url('../../assets/spinners/pacman_light.gif');
     }
 
diff --git a/app/src/main.js b/app/src/main.js
index 4b636d710..77627699d 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -40,7 +40,7 @@ app.config.globalProperties.$askConfirmation = function (message, props) {
     bodyClass: [
       'font-weight-bold',
       'rounded-top',
-      store.state.theme ? 'text-white' : 'text-black',
+      store.state.dark ? 'text-white' : 'text-black',
     ],
     ...props,
   })
@@ -58,7 +58,7 @@ app.config.globalProperties.$askMdConfirmation = function (
     okTitle: this.$t('yes'),
     cancelTitle: this.$t('cancel'),
     headerBgVariant: 'warning',
-    headerClass: store.state.theme ? 'text-white' : 'text-black',
+    headerClass: store.state.dark ? 'text-white' : 'text-black',
     centered: true,
     ...props,
   })
diff --git a/app/src/store/settings.js b/app/src/store/settings.js
index 68ba324ce..67a5d1a91 100644
--- a/app/src/store/settings.js
+++ b/app/src/store/settings.js
@@ -12,7 +12,7 @@ export default {
     fallbackLocale: localStorage.getItem('fallbackLocale'),
     cache: localStorage.getItem('cache') !== 'false',
     transitions: localStorage.getItem('transitions') !== 'false',
-    theme: localStorage.getItem('theme') === 'true',
+    dark: localStorage.getItem('dark') === 'true',
     experimental: localStorage.getItem('experimental') === 'true',
     spinner: 'pacman',
     supportedLocales,
@@ -48,10 +48,13 @@ export default {
       state.spinner = spinner
     },
 
-    SET_THEME(state, boolean) {
-      localStorage.setItem('theme', boolean)
-      state.theme = boolean
-      document.documentElement.setAttribute('dark-theme', boolean)
+    SET_DARK(state, boolean) {
+      localStorage.setItem('dark', boolean)
+      state.dark = boolean
+      document.documentElement.setAttribute(
+        'data-bs-theme',
+        boolean ? 'dark' : 'light',
+      )
     },
   },
 
@@ -68,8 +71,8 @@ export default {
       })
     },
 
-    UPDATE_THEME({ commit }, theme) {
-      commit('SET_THEME', theme)
+    UPDATE_DARK({ commit }, boolean) {
+      commit('SET_DARK', boolean)
     },
   },
 
@@ -78,7 +81,7 @@ export default {
     fallbackLocale: (state) => state.fallbackLocale,
     cache: (state) => state.cache,
     transitions: (state) => state.transitions,
-    theme: (state) => state.theme,
+    dark: (state) => state.dark,
     experimental: (state) => state.experimental,
     spinner: (state) => state.spinner,
 
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 58549cee1..1e99f9d33 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -166,7 +166,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['theme']),
+    ...mapGetters(['dark']),
   },
 
   methods: {
diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index cd053f953..1b172e0db 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/app/src/views/tool/ToolWebadmin.vue
@@ -63,7 +63,7 @@ export default {
           props: { labels: { true: 'enabled', false: 'disabled' } },
         },
 
-        theme: {
+        dark: {
           id: 'theme',
           label: this.$t('tools_webadmin.theme'),
           component: 'CheckboxItem',
@@ -77,7 +77,7 @@ export default {
 
   computed: {
     // Those are set/get computed properties
-    ...mapStoreGetSet(['locale', 'fallbackLocale', 'theme'], 'dispatch'),
+    ...mapStoreGetSet(['locale', 'fallbackLocale', 'dark'], 'dispatch'),
     ...mapStoreGetSet(['cache', 'transitions', 'experimental']),
   },
 
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 349e33075..74a1bd9c7 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -91,7 +91,7 @@
       id="apps-pre-upgrade"
       :title="$t('app.upgrade.confirm.title')"
       header-bg-variant="warning"
-      :header-class="theme ? 'text-white' : 'text-black'"
+      :header-class="dark ? 'text-white' : 'text-black'"
       :ok-title="$t('system_upgrade_btn')"
       ok-variant="success"
       :cancel-title="$t('cancel')"
@@ -166,7 +166,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['theme']),
+    ...mapGetters(['dark']),
   },
 
   methods: {

From c7bd9af3a2a3ec3878b132144581626825c1e90e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 14 Mar 2024 16:53:44 +0100
Subject: [PATCH 044/275] migration(bvn): add BSkeleton & BSkeletonWrapper
 component missing in bootstrap-vue-next

---
 .../globals/skeletons/BSkeleton.vue           | 34 +++++++++++++++++++
 .../globals/skeletons/BSkeletonWrapper.vue    | 22 ++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 app/src/components/globals/skeletons/BSkeleton.vue
 create mode 100644 app/src/components/globals/skeletons/BSkeletonWrapper.vue

diff --git a/app/src/components/globals/skeletons/BSkeleton.vue b/app/src/components/globals/skeletons/BSkeleton.vue
new file mode 100644
index 000000000..a9b7e2ba7
--- /dev/null
+++ b/app/src/components/globals/skeletons/BSkeleton.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{ height, width }" class="b-skeleton" />
+</template>
+
+<script>
+export default {
+  name: 'BSkeleton',
+
+  props: {
+    height: { type: String, required: true },
+    width: { type: String, required: true },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.b-skeleton {
+  position: relative;
+  overflow: hidden;
+  background-color: $gray-200;
+  cursor: wait;
+
+  height: $font-size-base;
+  margin-bottom: map-get($spacers, 1);
+
+  @if $enable-rounded {
+    border-radius: 0.25rem;
+  }
+
+  [data-bs-theme='dark'] & {
+    background-color: $gray-800;
+  }
+}
+</style>
diff --git a/app/src/components/globals/skeletons/BSkeletonWrapper.vue b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
new file mode 100644
index 000000000..0d4932556
--- /dev/null
+++ b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
@@ -0,0 +1,22 @@
+<template>
+  <div v-if="loading" class="b-skeleton-wrapper">
+    <slot name="loading" />
+  </div>
+  <slot v-else name="default" />
+</template>
+
+<script>
+export default {
+  name: 'BSkeletonWrapper',
+
+  props: {
+    loading: { type: Boolean, default: false },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.b-skeleton-wrapper {
+  cursor: wait;
+}
+</style>

From 6241ba4382c88f93f05e9b3228da3fe79066f6e0 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 14 Mar 2024 19:52:07 +0100
Subject: [PATCH 045/275] migration(bs5): media-breakpoint-down(): use
 breakpoint itself instead of next breakpoint

---
 app/src/components/QueryHeader.vue            | 2 +-
 app/src/components/globals/DescriptionRow.vue | 2 +-
 app/src/components/globals/ReadOnlyField.vue  | 2 +-
 app/src/components/globals/TopBar.vue         | 4 ++--
 app/src/scss/main.scss                        | 6 +++---
 app/src/views/_partials/HistoryConsole.vue    | 2 +-
 app/src/views/service/ServiceList.vue         | 2 +-
 app/src/views/tool/ToolFirewall.vue           | 4 ++--
 8 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index 321288bb5..91a1c1941 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -133,7 +133,7 @@ time {
   margin-left: 0.5rem;
 }
 
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
   .xs-hide .request-desc {
     display: none;
   }
diff --git a/app/src/components/globals/DescriptionRow.vue b/app/src/components/globals/DescriptionRow.vue
index e7265c3df..991d0742a 100644
--- a/app/src/components/globals/DescriptionRow.vue
+++ b/app/src/components/globals/DescriptionRow.vue
@@ -42,7 +42,7 @@ export default {
     }
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     flex-direction: column;
 
     &:not(:last-of-type) {
diff --git a/app/src/components/globals/ReadOnlyField.vue b/app/src/components/globals/ReadOnlyField.vue
index 0a631a691..7948964ed 100644
--- a/app/src/components/globals/ReadOnlyField.vue
+++ b/app/src/components/globals/ReadOnlyField.vue
@@ -56,7 +56,7 @@ export default {
   @include media-breakpoint-up(md) {
     margin: 1rem 0;
   }
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     flex-direction: column;
     &:not(:last-of-type) {
       margin-bottom: 0.5rem;
diff --git a/app/src/components/globals/TopBar.vue b/app/src/components/globals/TopBar.vue
index 171eaed2e..72ba209e1 100644
--- a/app/src/components/globals/TopBar.vue
+++ b/app/src/components/globals/TopBar.vue
@@ -55,13 +55,13 @@ export default {
     margin-bottom: 1rem;
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     .top-bar-group {
       flex-direction: column-reverse;
     }
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     flex-direction: column-reverse;
 
     #top-bar-right {
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 2afaecb7c..c1a1867e9 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -115,7 +115,7 @@ body {
     }
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     flex-direction: column;
 
     &:not(:last-of-type) {
@@ -190,14 +190,14 @@ h3.card-title {
   display: flex;
   justify-content: space-between;
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     .buttons {
       flex-direction: column;
       justify-content: space-between;
     }
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     flex-direction: column-reverse;
     margin-bottom: 2rem;
 
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index 022fc0d03..e3bd1b178 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -247,7 +247,7 @@ export default {
     align-items: center;
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     margin-left: -15px;
     width: calc(100% + 30px);
 
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 789a3eed0..8d0731e2e 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -86,7 +86,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@include media-breakpoint-down(md) {
+@include media-breakpoint-down(lg) {
   h5 small {
     display: block;
     margin-top: 0.25rem;
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 9e6d35b9c..c426d82ae 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -313,7 +313,7 @@ export default {
   }
   span {
     visibility: hidden;
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       display: none;
     }
   }
@@ -326,7 +326,7 @@ export default {
     margin-bottom: 1rem;
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     fieldset {
       width: 100%;
     }

From 9eb4b29cb87570e22860ffd019ecb559ca4c99a9 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 14 Mar 2024 20:15:38 +0100
Subject: [PATCH 046/275] migration(bs5): update to new color functions

---
 app/src/components/CardCollapse.vue           | 2 +-
 app/src/components/RecursiveListGroup.vue     | 5 +++--
 app/src/components/globals/YIcon.vue          | 2 +-
 app/src/components/globals/YListGroupItem.vue | 6 +++---
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/src/components/CardCollapse.vue b/app/src/components/CardCollapse.vue
index ef6471686..37726594c 100644
--- a/app/src/components/CardCollapse.vue
+++ b/app/src/components/CardCollapse.vue
@@ -78,7 +78,7 @@ export default {
   @each $color, $value in $theme-colors {
     &-#{$color} {
       background-color: $value;
-      color: color-yiq($value);
+      color: color-contrast($value);
     }
   }
 }
diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 2e30a3dc6..9a781ce97 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -112,8 +112,9 @@ export default {
     text-decoration: none;
     background-color: $list-group-hover-bg;
 
-    @include hover-focus() {
-      background-color: darken($list-group-hover-bg, 3%);
+    &:hover,
+    &:focus {
+      background-color: shade-color($gray-100, 3%);
     }
   }
 }
diff --git a/app/src/components/globals/YIcon.vue b/app/src/components/globals/YIcon.vue
index 15fbcc8ce..e25beedc8 100644
--- a/app/src/components/globals/YIcon.vue
+++ b/app/src/components/globals/YIcon.vue
@@ -48,7 +48,7 @@ export default {
     @each $color, $value in $theme-colors {
       &.#{$color} {
         background-color: $value;
-        color: color-yiq($value);
+        color: color-contrast($value);
       }
     }
   }
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index daf32ac04..3ed5c9f44 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -61,15 +61,15 @@ export default {
 
   @each $color, $value in $theme-colors {
     &-#{$color} {
-      color: theme-color-level($color, 6);
+      color: tint-color($value, 50%);
 
       [data-bs-theme='light'] & {
-        color: theme-color-level($color, -6);
+        color: shade-color($value, 60%);
       }
 
       .yuno-list-group-item-status {
         background-color: $value;
-        color: color-yiq($value);
+        color: color-contrast($value);
       }
     }
   }

From 6d26ef596d3230f1450a5447edf430b224933efb Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 14 Mar 2024 20:28:06 +0100
Subject: [PATCH 047/275] migration(bs5): rename left/right classes to
 start/end

---
 app/src/App.vue                                  |  4 ++--
 app/src/components/CardCollapse.vue              |  2 +-
 app/src/components/QueryHeader.vue               |  8 ++++----
 app/src/components/RecursiveListGroup.vue        |  2 +-
 app/src/components/globals/FormField.vue         |  2 +-
 app/src/components/globals/YAlert.vue            |  2 +-
 app/src/components/globals/YCard.vue             |  8 ++++----
 .../components/globals/formItems/ButtonItem.vue  |  2 +-
 .../globals/formItems/ReadOnlyAlertItem.vue      |  2 +-
 .../globals/skeletons/CardFormSkeleton.vue       |  2 +-
 .../globals/skeletons/CardListSkeleton.vue       |  2 +-
 app/src/views/HomeView.vue                       |  4 ++--
 app/src/views/_partials/DomainForm.vue           |  6 +++---
 app/src/views/_partials/HistoryConsole.vue       |  6 +++---
 app/src/views/_partials/ReconnectingDisplay.vue  |  2 +-
 app/src/views/app/AppCatalog.vue                 |  6 +++---
 app/src/views/app/AppInfo.vue                    | 14 +++++++-------
 app/src/views/app/AppInstall.vue                 |  6 +++---
 app/src/views/app/AppList.vue                    |  4 ++--
 app/src/views/backup/BackupCreate.vue            | 16 ++++++++--------
 app/src/views/backup/BackupInfo.vue              |  8 ++++----
 app/src/views/backup/BackupList.vue              |  4 ++--
 app/src/views/backup/BackupView.vue              |  4 ++--
 app/src/views/diagnosis/DiagnosisView.vue        |  8 ++++----
 app/src/views/domain/DomainInfo.vue              |  4 ++--
 app/src/views/domain/DomainList.vue              |  4 ++--
 app/src/views/service/ServiceList.vue            |  4 ++--
 app/src/views/tool/ToolList.vue                  |  4 ++--
 app/src/views/tool/ToolLogs.vue                  |  2 +-
 app/src/views/tool/ToolMigrations.vue            |  2 +-
 app/src/views/user/UserList.vue                  |  4 ++--
 31 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index 3608feb2d..773da1524 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -16,7 +16,7 @@
           </span>
         </BNavbarBrand>
 
-        <BNavbarNav class="ml-auto">
+        <BNavbarNav class="ms-auto">
           <li class="nav-item">
             <BButton :href="ssoLink" variant="primary" size="sm" block>
               {{ $t('user_interface_link') }} <YIcon iname="user" />
@@ -85,7 +85,7 @@
           <BNavText
             v-if="yunohost"
             id="yunohost-version"
-            class="ml-md-auto text-center"
+            class="ms-md-auto text-center"
           >
             <span v-html="$t('footer_version', yunohost)" />
           </BNavText>
diff --git a/app/src/components/CardCollapse.vue b/app/src/components/CardCollapse.vue
index 37726594c..c36db2c19 100644
--- a/app/src/components/CardCollapse.vue
+++ b/app/src/components/CardCollapse.vue
@@ -9,7 +9,7 @@
             class="card-collapse-button"
           >
             {{ title }}
-            <YIcon class="ml-auto" iname="chevron-right" />
+            <YIcon class="ms-auto" iname="chevron-right" />
           </BButton>
         </h2>
       </slot>
diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index 91a1c1941..456a437de 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -15,12 +15,12 @@
     <div v-if="request.errors || request.warnings">
       <!-- WEBSOCKET ERRORS COUNT -->
       <span class="count" v-if="request.errors">
-        {{ request.errors }}<YIcon iname="bug" class="text-danger ml-1" />
+        {{ request.errors }}<YIcon iname="bug" class="text-danger ms-1" />
       </span>
       <!-- WEBSOCKET WARNINGS COUNT -->
       <span class="count" v-if="request.warnings">
         {{ request.warnings
-        }}<YIcon iname="warning" class="text-warning ml-1" />
+        }}<YIcon iname="warning" class="text-warning ms-1" />
       </span>
     </div>
 
@@ -29,7 +29,7 @@
       v-if="showError && request.error"
       size="sm"
       pill
-      class="error-btn ml-auto py-0"
+      class="error-btn ms-auto py-0"
       variant="danger"
       @click="reviewError"
     >
@@ -40,7 +40,7 @@
     <time
       v-if="showTime"
       :datetime="hour(request.date)"
-      :class="request.error ? 'ml-2' : 'ml-auto'"
+      :class="request.error ? 'ms-2' : 'ms-auto'"
     >
       {{ hour(request.date) }}
     </time>
diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 9a781ce97..9c5645369 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -15,7 +15,7 @@
           :aria-expanded="node.data.opened ? 'true' : 'false'"
           :aria-controls="'collapse-' + node.id"
           :class="node.data.opened ? 'not-collapsed' : 'collapsed'"
-          class="ml-2"
+          class="ms-2"
           @click.stop="node.data.opened = !node.data.opened"
         >
           <span class="sr-only">{{ toggleText }}</span>
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index e08692e74..7a6d4d00a 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -28,7 +28,7 @@
       <!-- Render description -->
       <template v-if="description || link">
         <div class="d-flex">
-          <BLink v-if="link" :to="link" :href="link.href" class="ml-auto">
+          <BLink v-if="link" :to="link" :href="link.href" class="ms-auto">
             {{ link.text }}
           </BLink>
         </div>
diff --git a/app/src/components/globals/YAlert.vue b/app/src/components/globals/YAlert.vue
index 5cc9a8533..2032c42a6 100644
--- a/app/src/components/globals/YAlert.vue
+++ b/app/src/components/globals/YAlert.vue
@@ -6,7 +6,7 @@
     :class="{ ['alert alert-' + variant]: !alert }"
     class="yuno-alert d-flex flex-column flex-md-row align-items-center"
   >
-    <YIcon :iname="_icon" class="mr-md-3 mb-md-0 mb-2 md" />
+    <YIcon :iname="_icon" class="me-md-3 mb-md-0 mb-2 md" />
 
     <div class="w-100">
       <slot name="default" />
diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index edf6c5b54..a75564295 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -4,7 +4,7 @@
       <div class="w-100 d-flex align-items-center flex-wrap custom-header">
         <slot name="header">
           <Component :is="titleTag" class="custom-header-title">
-            <YIcon v-if="icon" :iname="icon" class="mr-2" />{{ title }}
+            <YIcon v-if="icon" :iname="icon" class="me-2" />{{ title }}
           </Component>
           <slot name="header-next" />
         </slot>
@@ -13,7 +13,7 @@
           v-if="hasButtons"
           class="mt-2 w-100 custom-header-buttons"
           :class="{
-            [`ml-${buttonUnbreak}-auto mt-${buttonUnbreak}-0 w-${buttonUnbreak}-auto`]:
+            [`ms-${buttonUnbreak}-auto mt-${buttonUnbreak}-0 w-${buttonUnbreak}-auto`]:
               buttonUnbreak,
           }"
         >
@@ -26,11 +26,11 @@
         @click="visible = !visible"
         size="sm"
         variant="outline-secondary"
-        class="align-self-center ml-auto"
+        class="align-self-center ms-auto"
         :class="{
           'not-collapsed': visible,
           collapsed: !visible,
-          [`ml-${buttonUnbreak}-2`]: buttonUnbreak,
+          [`ms-${buttonUnbreak}-2`]: buttonUnbreak,
         }"
       >
         <YIcon iname="chevron-right" />
diff --git a/app/src/components/globals/formItems/ButtonItem.vue b/app/src/components/globals/formItems/ButtonItem.vue
index 5bd09ad99..bac857995 100644
--- a/app/src/components/globals/formItems/ButtonItem.vue
+++ b/app/src/components/globals/formItems/ButtonItem.vue
@@ -6,7 +6,7 @@
     :disabled="!enabled"
     class="d-block mb-3"
   >
-    <YIcon :iname="icon_" class="mr-2" />
+    <YIcon :iname="icon_" class="me-2" />
     <span v-html="label" />
   </BButton>
 </template>
diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index aa70ea26c..851bfafb1 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -4,7 +4,7 @@
     :variant="type"
     show
   >
-    <YIcon :iname="icon_" class="mr-md-3 mb-md-0 mb-2" :variant="type" />
+    <YIcon :iname="icon_" class="me-md-3 mb-md-0 mb-2" :variant="type" />
 
     <VueShowdown :markdown="label" tag="span" class="markdown" />
   </BAlert>
diff --git a/app/src/components/globals/skeletons/CardFormSkeleton.vue b/app/src/components/globals/skeletons/CardFormSkeleton.vue
index 4cf810cfe..9b9cae02c 100644
--- a/app/src/components/globals/skeletons/CardFormSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardFormSkeleton.vue
@@ -23,7 +23,7 @@
           >
             <BSkeleton width="100%" height="38px" />
 
-            <BSkeleton width="38px" height="38px" class="ml-2" />
+            <BSkeleton width="38px" height="38px" class="ms-2" />
           </div>
 
           <BSkeleton v-else width="100%" height="38px" />
diff --git a/app/src/components/globals/skeletons/CardListSkeleton.vue b/app/src/components/globals/skeletons/CardListSkeleton.vue
index 0726603b7..277b37565 100644
--- a/app/src/components/globals/skeletons/CardListSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardListSkeleton.vue
@@ -10,7 +10,7 @@
           <BSkeleton
             :width="randint(50, 100) + '%'"
             height="24px"
-            class="mr-3"
+            class="me-3"
           />
         </div>
         <BSkeleton :width="randint(30, 80) + '%'" height="24px" class="m-0" />
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index ae303438d..514bfdd4f 100644
--- a/app/src/views/HomeView.vue
+++ b/app/src/views/HomeView.vue
@@ -6,9 +6,9 @@
         :key="item.routeName"
         :to="{ name: item.routeName }"
       >
-        <YIcon :iname="item.icon" class="lg ml-1" />
+        <YIcon :iname="item.icon" class="lg ms-1" />
         <h4>{{ $t(item.translation) }}</h4>
-        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>
   </div>
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 28de1fba9..8fe717304 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -26,7 +26,7 @@
     <BCollapse id="collapse-domain" v-model:visible="domainIsVisible">
       <p class="mt-2 alert alert-info">
         <YIcon iname="info-circle" />
-        <span class="pl-1" v-html="$t('domain.add.from_registrar_desc')" />
+        <span class="ps-1" v-html="$t('domain.add.from_registrar_desc')" />
       </p>
 
       <FormField
@@ -53,7 +53,7 @@
     <BCollapse id="collapse-dynDomain" v-model:visible="dynDomainIsVisible">
       <p class="mt-2 alert alert-info">
         <YIcon iname="info-circle" />
-        <span class="pl-1" v-html="$t('domain.add.from_yunohost_desc')" />
+        <span class="ps-1" v-html="$t('domain.add.from_yunohost_desc')" />
       </p>
 
       <FormField
@@ -98,7 +98,7 @@
     <BCollapse id="collapse-localDomain" v-model:visible="localDomainIsVisible">
       <p class="mt-2 alert alert-info">
         <YIcon iname="info-circle" />
-        <span class="pl-1" v-html="$t('domain.add.from_local_desc')" />
+        <span class="ps-1" v-html="$t('domain.add.from_local_desc')" />
       </p>
 
       <FormField
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index e3bd1b178..73ab25e0b 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -25,7 +25,7 @@
         v-if="lastAction"
         size="sm"
         pill
-        class="ml-auto py-0"
+        class="ms-auto py-0"
         :variant="open ? 'light' : 'best'"
         @click.prevent="onLastActionClick"
         @keyup.enter.space.prevent="onLastActionClick"
@@ -35,7 +35,7 @@
       <QueryHeader
         v-if="lastAction"
         :request="lastAction"
-        class="w-auto ml-2 xs-hide"
+        class="w-auto ms-2 xs-hide"
       />
     </BCardHeader>
 
@@ -50,7 +50,7 @@
           v-for="(action, i) in history"
           :key="i"
           no-body
-          class="rounded-0 rounded-top border-left-0 border-right-0"
+          class="rounded-0 rounded-top border-start-0 border-right-0"
         >
           <!-- ACTION -->
           <BCardHeader
diff --git a/app/src/views/_partials/ReconnectingDisplay.vue b/app/src/views/_partials/ReconnectingDisplay.vue
index 65e94c4a4..be8094c63 100644
--- a/app/src/views/_partials/ReconnectingDisplay.vue
+++ b/app/src/views/_partials/ReconnectingDisplay.vue
@@ -22,7 +22,7 @@
         <BButton
           variant="success"
           v-t="'retry'"
-          class="ml-auto"
+          class="ms-auto"
           @click="tryToReconnect()"
         />
       </div>
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 40ded865e..ba5b1c403 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -120,7 +120,7 @@
 
               <small
                 v-if="app.state !== 'working' || app.high_quality"
-                class="d-flex align-items-center ml-2 position-relative"
+                class="d-flex align-items-center ms-2 position-relative"
               >
                 <BBadge
                   v-if="app.state !== 'working'"
@@ -195,11 +195,11 @@
       <BCardGroup deck>
         <BCard v-for="i in 15" :key="i" no-body style="min-height: 10rem">
           <div class="d-flex w-100 mt-auto">
-            <BSkeleton width="30px" height="30px" class="mr-2 ml-auto" />
+            <BSkeleton width="30px" height="30px" class="me-2 ms-auto" />
             <BSkeleton
               :width="randint(30, 70) + '%'"
               height="30px"
-              class="mr-auto"
+              class="me-auto"
             />
           </div>
           <BSkeleton
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 435074de5..4226ffd86 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -20,7 +20,7 @@
         <BButton
           variant="primary"
           size="sm"
-          class="ml-auto mr-2"
+          class="ms-auto me-2"
           @click="dismissNotification('post_install')"
         >
           <YIcon iname="check" />
@@ -51,7 +51,7 @@
         <BButton
           variant="primary"
           size="sm"
-          class="ml-auto mr-2"
+          class="ms-auto me-2"
           @click="dismissNotification('post_upgrade')"
         >
           <YIcon iname="check" />
@@ -83,7 +83,7 @@
           :href="app.url"
           target="_blank"
           variant="success"
-          class="ml-auto mr-2"
+          class="ms-auto me-2"
         >
           <YIcon iname="external-link" />
           {{ $t('app.open_this_app') }}
@@ -93,7 +93,7 @@
           v-b-modal.uninstall-modal
           id="uninstall"
           variant="danger"
-          :class="{ 'ml-auto': !app.url }"
+          :class="{ 'ms-auto': !app.url }"
         >
           <YIcon iname="trash-o" />
           {{ $t('uninstall') }}
@@ -196,7 +196,7 @@
             size="sm"
             :to="{ name: 'group-list' }"
             variant="info"
-            class="ml-2"
+            class="ms-2"
           >
             <YIcon iname="key-modern" />
             {{ $t('groups_and_permissions_manage') }}
@@ -274,7 +274,7 @@
       <BTabs card fill pills>
         <BTab v-for="[name, content] in app.doc.admin" :key="name">
           <template #title>
-            <YIcon iname="book" class="mr-2" />
+            <YIcon iname="book" class="me-2" />
             {{ name === 'admin' ? $t('app.doc.admin.title') : name }}
           </template>
           <VueShowdown :markdown="content" />
@@ -331,7 +331,7 @@
       <BListGroup flush>
         <YListGroupItem v-for="[key, link] in app.links" :key="key" no-status>
           <BLink :href="link" target="_blank">
-            <YIcon :iname="appLinksIcons(key)" class="mr-1" />
+            <YIcon :iname="appLinksIcons(key)" class="me-1" />
             {{ $t('app.links.' + key) }}
           </BLink>
         </YListGroupItem>
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 4922d9532..e6a4b6d85 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -12,7 +12,7 @@
             :href="app.demo"
             target="_blank"
             variant="primary"
-            class="ml-auto"
+            class="ms-auto"
           >
             <YIcon iname="external-link" />
             {{ $t('app.install.try_demo') }}
@@ -90,7 +90,7 @@
         <BListGroup flush>
           <YListGroupItem v-for="[key, link] in app.links" :key="key" no-status>
             <BLink :href="link" target="_blank">
-              <YIcon :iname="appLinksIcons(key)" class="mr-1" />
+              <YIcon :iname="appLinksIcons(key)" class="me-1" />
               {{ $t('app.links.' + key) }}
             </BLink>
           </YListGroupItem>
@@ -105,7 +105,7 @@
           <dl class="antifeatures">
             <div v-for="antifeature in app.antifeatures" :key="antifeature.id">
               <dt class="d-inline">
-                <YIcon :iname="antifeature.icon" class="md mr-1" />
+                <YIcon :iname="antifeature.icon" class="md me-1" />
                 {{ antifeature.title }}:
               </dt>
               <dd class="d-inline">
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index 20a2bbbf4..890a9792d 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -19,7 +19,7 @@
         v-for="{ id, description, label } in filteredApps"
         :key="id"
         :to="{ name: 'app-info', params: { id } }"
-        class="d-flex justify-content-between align-items-center pr-0"
+        class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
           <h5 class="font-weight-bold">
@@ -31,7 +31,7 @@
           </p>
         </div>
 
-        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>
   </ViewSearch>
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index 578faefeb..699cd8b0b 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -19,7 +19,7 @@
           >
             <h4 class="m-0"><YIcon iname="cube" /> {{ $t('system') }}</h4>
 
-            <div class="ml-sm-auto mt-2 mt-sm-0">
+            <div class="ms-sm-auto mt-2 mt-sm-0">
               <BButton
                 @click="toggleSelected(true, 'system')"
                 v-t="'select_all'"
@@ -32,7 +32,7 @@
                 v-t="'select_none'"
                 size="sm"
                 variant="outline-dark"
-                class="ml-2"
+                class="ms-2"
               />
             </div>
           </BListGroupItem>
@@ -41,9 +41,9 @@
           <BListGroupItem
             v-for="(item, partName) in system"
             :key="partName"
-            class="d-flex justify-content-between align-items-center pr-0"
+            class="d-flex justify-content-between align-items-center pe-0"
           >
-            <div class="mr-2">
+            <div class="me-2">
               <h5 class="font-weight-bold">
                 {{ item.name }}
               </h5>
@@ -67,7 +67,7 @@
               <YIcon iname="cubes" /> {{ $t('applications') }}
             </h4>
 
-            <div class="ml-sm-auto mt-2 mt-sm-0">
+            <div class="ms-sm-auto mt-2 mt-sm-0">
               <BButton
                 @click="toggleSelected(true, 'apps')"
                 v-t="'select_all'"
@@ -80,7 +80,7 @@
                 v-t="'select_none'"
                 size="sm"
                 variant="outline-dark"
-                class="ml-2"
+                class="ms-2"
               />
             </div>
           </BListGroupItem>
@@ -89,9 +89,9 @@
           <BListGroupItem
             v-for="(item, appName) in apps"
             :key="appName"
-            class="d-flex justify-content-between align-items-center pr-0"
+            class="d-flex justify-content-between align-items-center pe-0"
           >
-            <div class="mr-2">
+            <div class="me-2">
               <h5 class="font-weight-bold">
                 {{ item.name }}
                 <small class="text-secondary">{{ item.id }}</small>
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index f4af06bd4..7d1191269 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -68,9 +68,9 @@
           <BListGroupItem
             v-for="(item, partName) in system"
             :key="partName"
-            class="d-flex justify-content-between align-items-center pr-0"
+            class="d-flex justify-content-between align-items-center pe-0"
           >
-            <div class="mr-2">
+            <div class="me-2">
               <h5 class="font-weight-bold">
                 {{ item.name }}
                 <small class="text-secondary" v-if="item.size">
@@ -89,9 +89,9 @@
           <BListGroupItem
             v-for="(item, appName) in apps"
             :key="appName"
-            class="d-flex justify-content-between align-items-center pr-0"
+            class="d-flex justify-content-between align-items-center pe-0"
           >
-            <div class="mr-2">
+            <div class="me-2">
               <h5 class="font-weight-bold">
                 {{ item.name }}
                 <small class="text-secondary">
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index 875f33900..96cbce56a 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -25,7 +25,7 @@
         :key="name"
         :to="{ name: 'backup-info', params: { name, id } }"
         :title="readableDate(created_at)"
-        class="d-flex justify-content-between align-items-center pr-0"
+        class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
           <h5 class="font-weight-bold">
@@ -38,7 +38,7 @@
             {{ path }}
           </p>
         </div>
-        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>
   </ViewBase>
diff --git a/app/src/views/backup/BackupView.vue b/app/src/views/backup/BackupView.vue
index b81f6ff6d..164447d31 100644
--- a/app/src/views/backup/BackupView.vue
+++ b/app/src/views/backup/BackupView.vue
@@ -5,7 +5,7 @@
         v-for="{ id, name, uri } in storages"
         :key="id"
         :to="{ name: 'backup-list', params: { id } }"
-        class="d-flex justify-content-between align-items-center pr-0"
+        class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
           <h5 class="font-weight-bold">
@@ -16,7 +16,7 @@
             {{ uri }}
           </p>
         </div>
-        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>
   </div>
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 1e99f9d33..29dceb190 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -86,9 +86,9 @@
           :faded="item.ignored"
         >
           <div class="item-button d-flex align-items-center">
-            <p class="mb-0 mr-2" v-html="item.summary" />
+            <p class="mb-0 me-2" v-html="item.summary" />
 
-            <div class="d-flex flex-column flex-lg-row ml-auto">
+            <div class="d-flex flex-column flex-lg-row ms-auto">
               <BButton
                 v-if="item.ignored"
                 size="sm"
@@ -109,7 +109,7 @@
                 v-if="item.details"
                 size="sm"
                 variant="outline-dark"
-                class="ml-lg-2 mt-2 mt-lg-0"
+                class="ms-lg-2 mt-2 mt-lg-0"
                 v-b-toggle="`collapse-${report.id}-item-${i}`"
               >
                 <YIcon iname="level-down" /> {{ $t('details') }}
@@ -121,7 +121,7 @@
             v-if="item.details"
             :id="`collapse-${report.id}-item-${i}`"
           >
-            <ul class="mt-2 pl-4">
+            <ul class="mt-2 ps-4">
               <li
                 v-for="(detail, index) in item.details"
                 :key="index"
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 824e0da5e..74821d6c8 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -48,7 +48,7 @@
 
       <!-- DOMAIN CERT AUTHORITY -->
       <DescriptionRow :term="$t('domain.info.certificate_authority')">
-        <YIcon :iname="cert.icon" :variant="cert.variant" class="mr-1" />
+        <YIcon :iname="cert.icon" :variant="cert.variant" class="me-1" />
         {{ $t('domain.cert.types.' + cert.authority) }}
         <span class="text-secondary px-2">
           ({{
@@ -83,7 +83,7 @@
             v-for="app in domain.apps"
             :key="app.id"
             size="sm"
-            class="mr-2 mb-2"
+            class="me-2 mb-2"
           >
             <BButton
               class="py-0 font-weight-bold"
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index c95a96bfa..b42367a1b 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -22,7 +22,7 @@
     >
       <template #default="{ data, parent }">
         <div class="w-100 d-flex justify-content-between align-items-center">
-          <h5 class="mr-3">
+          <h5 class="me-3">
             <BLink :to="data.to" class="text-body text-decoration-none">
               <span class="font-weight-bold">
                 {{ data.name.replace(parent ? parent.data.name : null, '') }}
@@ -35,7 +35,7 @@
             <small
               v-if="data.name === mainDomain"
               :title="$t('domain.types.main_domain')"
-              class="ml-1"
+              class="ms-1"
               v-b-tooltip.hover
             >
               <YIcon iname="star" />
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 8d0731e2e..8ee867d5a 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -18,7 +18,7 @@
         } in filteredServices"
         :key="name"
         :to="{ name: 'service-info', params: { name } }"
-        class="d-flex justify-content-between align-items-center pr-0"
+        class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
           <h5 class="font-weight-bold">
@@ -36,7 +36,7 @@
           </p>
         </div>
 
-        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>
   </ViewSearch>
diff --git a/app/src/views/tool/ToolList.vue b/app/src/views/tool/ToolList.vue
index 8c4cead27..2424d6d8e 100644
--- a/app/src/views/tool/ToolList.vue
+++ b/app/src/views/tool/ToolList.vue
@@ -6,9 +6,9 @@
       :key="item.routeName"
       :to="{ name: item.routeName }"
     >
-      <YIcon :iname="item.icon" class="lg ml-1" />
+      <YIcon :iname="item.icon" class="lg ms-1" />
       <h4>{{ $t(item.translation) }}</h4>
-      <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
+      <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
     </BListGroupItem>
   </BListGroup>
 </template>
diff --git a/app/src/views/tool/ToolLogs.vue b/app/src/views/tool/ToolLogs.vue
index 62724a6b9..c263c133d 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -16,7 +16,7 @@
           :to="{ name: 'tool-log', params: { name: log.name || log.log_path } }"
           :title="readableDate(log.started_at)"
         >
-          <small class="mr-3">{{ distanceToNow(log.started_at) }} </small>
+          <small class="me-3">{{ distanceToNow(log.started_at) }} </small>
           <YIcon :iname="log.icon" :class="'text-' + log.class" />
           {{ log.description }}
         </BListGroupItem>
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index bba1f2530..1b42b7c15 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -22,7 +22,7 @@
           <div class="d-flex align-items-center">
             {{ number }}. {{ description }}
 
-            <div class="ml-auto">
+            <div class="ms-auto">
               <BButton @click="skipMigration(id)" size="sm" variant="warning">
                 <YIcon iname="close" /> {{ $t('skip') }}
               </BButton>
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 2622c4ea2..ffdcdd000 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -35,7 +35,7 @@
         v-for="user in filteredUsers"
         :key="user.username"
         :to="{ name: 'user-info', params: { name: user.username } }"
-        class="d-flex justify-content-between align-items-center pr-0"
+        class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
           <h5 class="font-weight-bold">
@@ -46,7 +46,7 @@
             {{ user.mail }}
           </p>
         </div>
-        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>
   </ViewSearch>

From 915023de1d75fa70d8e319cbbbdb6ab98d77d2af Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 14 Mar 2024 21:42:38 +0100
Subject: [PATCH 048/275] migration(bs5): update scss variables (colors, etc.)

---
 app/src/scss/_variables.scss | 104 ++++++++++++++++++++++-------------
 app/src/scss/main.scss       |  16 +++++-
 2 files changed, 78 insertions(+), 42 deletions(-)

diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index 635adaf35..48cbe7dca 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -27,45 +27,77 @@
 
 @import '~bootstrap/scss/functions.scss';
 
-$font-size-base: 0.9rem;
-$font-weight-bold: 500;
-
-$white: var(--white);
-$gray-100: var(--gray-100);
-$gray-200: var(--gray-200);
-$gray-300: var(--gray-300);
-$gray-400: var(--gray-400);
-$gray-500: var(--gray-500);
-$gray-600: var(--gray-600);
-$gray-700: var(--gray-700);
-$gray-800: var(--gray-800);
-$gray-900: var(--gray-900);
-$black: var(--black);
-
-$blue: var(--blue);
-$indigo: var(--indigo);
-$purple: var(--purple);
-$pink: var(--pink);
-$red: var(--red);
-$orange: var(--orange);
-$yellow: var(--yellow);
-$green: var(--green);
-$teal: var(--teal);
-$cyan: var(--cyan);
+$prefix: bs-;
+
+$white: #fff;
+$gray-100: #fafafa;
+$gray-200: #ededed;
+$gray-300: #e3e3e3;
+$gray-400: #d4d4d4;
+$gray-500:  	#b5b5b5;
+$gray-600: #757575;
+$gray-700:  	#4f4f4f;
+$gray-800: #3b3b3b;
+$gray-900: #262626;
+$black: #202020;
+
+$blue: #60a5fa;
+$indigo: #6812f3;
+$purple: #b957ea;
+$pink: #e93f8e;
+$red: #ff5a5a;
+$orange: #fd7e17;
+$yellow: #ffd452;
+$green: #70ea8d;
+$teal: #20cb98;
+$cyan: #7dd3fc;
+
+$primary: $blue;
+$secondary: $gray-600;
+$success: $green;
+$info: $cyan;
+$warning: $yellow;
+$danger: $red;
+$light: $gray-100;
+$dark: $gray-900;
 
 $theme-colors: (
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'danger': $danger,
+  'light': $light,
+  'dark': $dark,
   'best': $purple,
 );
 
+$min-contrast-ratio: 7;
+
+$spacer: 1rem;
+
+$body-bg-dark: $black;
+
+$border-color: $gray-400;
+$border-color-dark: $gray-800;
+$hr-border-color: var(--#{$prefix}border-color);
+
+$link-color: shift-color($primary, 40%);
 $code-color: $black;
+$code-color-dark: $black;
+$component-active-color: $black;
 
-// Replace font-weight 300 with 200
+// Adapt font-weight based on fira
 $font-weight-light: 200;
-$display1-weight: 200;
-$display2-weight: 200;
-$display3-weight: 200;
-$display4-weight: 200;
-$lead-font-weight: 200;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 500;
+$font-weight-bold: 700;
+
+$headings-font-weight: 500;
+
+$font-size-base: 0.9rem;
 
 // Set fonts
 $font-family-sans-serif:
@@ -91,12 +123,7 @@ $h3-font-size: $font-size-base * 1.4;
 $h4-font-size: $font-size-base * 1.25;
 $h5-font-size: $font-size-base * 1.1;
 
-$alert-padding-x: 1rem;
-
-$card-spacer-y: 0.6rem;
-$card-spacer-x: 1rem;
-
-$list-group-item-padding-x: 1rem;
+$list-group-item-padding-y: $spacer * 0.75;
 
 // Import default variables after the above setup to compute all other variables.
 @import '~bootstrap/scss/variables';
@@ -131,6 +158,5 @@ $fa-font-size-base: $font-size-base;
 
 $thin-border: $hr-border-width solid $hr-border-color;
 
-$btn-padding-y-xs: 0.25rem;
+$btn-padding-y-xs: 0rem;
 $btn-padding-x-xs: 0.35rem;
-$btn-line-height-xs: 1.5;
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index c1a1867e9..1c15f2e21 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -75,14 +75,19 @@ body {
   align-items: center;
 }
 
+// BOOSTRAP OVERIDES/ADDITIONS
+
 // Add breakpoints for w-*
 @each $breakpoint in map-keys($grid-breakpoints) {
-  @each $size, $length in $sizes {
-    @include media-breakpoint-up($breakpoint) {
+  @include media-breakpoint-up($breakpoint) {
+    @each $size, $length in $position-values {
       .w-#{$breakpoint}-#{$size} {
         width: $length !important;
       }
     }
+    .w-#{$breakpoint}-auto {
+      width: auto !important;
+    }
   }
 }
 
@@ -92,11 +97,16 @@ body {
     $btn-padding-y-xs,
     $btn-padding-x-xs,
     $btn-font-size-sm,
-    $btn-line-height-xs,
     $btn-border-radius-sm
   );
 }
 
+.btn-outline-dark {
+  [data-bs-theme='dark'] & {
+    @include button-outline-variant($light);
+  }
+}
+
 // Allow state of input group to be displayed under the group
 .input-group .is-invalid ~ .invalid-feedback {
   display: block;

From 622e5be06145e78e46d8392fb92107cb68a96e41 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 17 Mar 2024 16:06:08 +0100
Subject: [PATCH 049/275] migration(bvn): update modals and modal system

---
 app/src/App.vue                       |  2 ++
 app/src/composables/useAutoModal.js   | 42 +++++++++++++++++++++++++++
 app/src/main.js                       | 35 ----------------------
 app/src/scss/main.scss                |  4 ++-
 app/src/views/PostInstall.vue         |  4 ++-
 app/src/views/app/AppCatalog.vue      |  6 ++--
 app/src/views/app/AppInfo.vue         | 10 +++----
 app/src/views/app/AppInstall.vue      |  9 +++---
 app/src/views/backup/BackupInfo.vue   | 11 +++++--
 app/src/views/domain/DomainDns.vue    |  9 +++++-
 app/src/views/domain/DomainInfo.vue   | 13 +++++++--
 app/src/views/group/GroupList.vue     | 11 +++++--
 app/src/views/service/ServiceInfo.vue |  9 +++++-
 app/src/views/tool/ToolFirewall.vue   |  6 ++--
 app/src/views/tool/ToolMigrations.vue |  9 +++++-
 app/src/views/tool/ToolPower.vue      |  9 +++++-
 app/src/views/update/SystemUpdate.vue | 19 ++++++++----
 app/src/views/user/UserImport.vue     |  4 ++-
 app/src/views/user/UserInfo.vue       |  3 +-
 19 files changed, 146 insertions(+), 69 deletions(-)
 create mode 100644 app/src/composables/useAutoModal.js

diff --git a/app/src/App.vue b/app/src/App.vue
index 773da1524..8347c71a0 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -53,6 +53,8 @@
       </main>
     </ViewLockOverlay>
 
+    <BModalOrchestrator />
+
     <!-- HISTORY CONSOLE -->
     <HistoryConsole />
 
diff --git a/app/src/composables/useAutoModal.js b/app/src/composables/useAutoModal.js
new file mode 100644
index 000000000..b0ba93ec9
--- /dev/null
+++ b/app/src/composables/useAutoModal.js
@@ -0,0 +1,42 @@
+import { h } from 'vue'
+import { useModalController, BModal } from 'bootstrap-vue-next'
+import { VueShowdown } from 'vue-showdown'
+
+export function useAutoModal() {
+  const { confirm, show } = useModalController()
+
+  return function (
+    message,
+    props_,
+    { markdown = false, cancelable = true } = {},
+  ) {
+    const props = {
+      okTitle: this.$t('ok'),
+      cancelTitle: this.$t('cancel'),
+      centered: true,
+      okOnly: !cancelable,
+      ...(markdown
+        ? { headerBgVariant: 'warning', headerClass: 'text-black' }
+        : {
+            hideHeader: true,
+            bodyBgVariant: 'warning',
+            bodyClass: ['fw-bold', 'rounded-top', 'text-black'],
+          }),
+      ...props_,
+    }
+
+    const fn = cancelable ? confirm : show
+    return fn?.({
+      props,
+      component: h(BModal, null, {
+        default: () =>
+          markdown
+            ? h(VueShowdown, {
+                markdown: message,
+                options: { headerLevelStart: 3 },
+              })
+            : message,
+      }),
+    })
+  }
+}
diff --git a/app/src/main.js b/app/src/main.js
index 77627699d..92f7cbcd1 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -29,41 +29,6 @@ app.use(VueShowdownPlugin, {
   },
 })
 
-// Ugly wrapper for `$bvModal.msgBoxConfirm` to set default i18n button titles
-// FIXME find or wait for a better way
-app.config.globalProperties.$askConfirmation = function (message, props) {
-  return this.$bvModal.msgBoxConfirm(message, {
-    okTitle: this.$t('ok'),
-    cancelTitle: this.$t('cancel'),
-    bodyBgVariant: 'warning',
-    centered: true,
-    bodyClass: [
-      'font-weight-bold',
-      'rounded-top',
-      store.state.dark ? 'text-white' : 'text-black',
-    ],
-    ...props,
-  })
-}
-
-app.config.globalProperties.$askMdConfirmation = function (
-  markdown,
-  props,
-  ok = false,
-) {
-  const content = this.$createElement('vue-showdown', {
-    props: { markdown, flavor: 'github', options: { headerLevelStart: 4 } },
-  })
-  return this.$bvModal['msgBox' + (ok ? 'Ok' : 'Confirm')](content, {
-    okTitle: this.$t('yes'),
-    cancelTitle: this.$t('cancel'),
-    headerBgVariant: 'warning',
-    headerClass: store.state.dark ? 'text-white' : 'text-black',
-    centered: true,
-    ...props,
-  })
-}
-
 // Register global components
 const globalComponentsModules = import.meta.glob(
   ['@/components/globals/*.vue', '@/components/globals/*/*.vue'],
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 1c15f2e21..7e770aaa9 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -45,7 +45,9 @@
 // Utilities
 @import '~bootstrap/scss/utilities/api';
 
-@import '~bootstrap-vue-next/src/styles/styles.scss';
+// @import '~bootstrap-vue-next/src/styles/styles.scss';
+// FIXME modals doesn't appears if we import the scss
+@import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
 
 // Import fonts
 @import 'font';
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index ac9c0dd43..599f77942 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -92,6 +92,7 @@
 import { useVuelidate } from '@vuelidate/core'
 
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { DomainForm } from '@/views/_partials'
 import LoginView from '@/views/LoginView.vue'
 import { formatFormData } from '@/helpers/yunohostArguments'
@@ -114,6 +115,7 @@ export default {
   setup() {
     return {
       v$: useVuelidate(),
+      modalConfirm: useAutoModal(),
     }
   },
 
@@ -179,7 +181,7 @@ export default {
     },
 
     async setUser() {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_postinstall', { domain: this.domain }),
       )
       if (!confirmed) return
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index ba5b1c403..5948d4ca2 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -223,6 +223,7 @@
 import { useVuelidate } from '@vuelidate/core'
 
 import CardDeckFeed from '@/components/CardDeckFeed.vue'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { required, appRepoUrl } from '@/helpers/validators'
 import { randint } from '@/helpers/commons'
 
@@ -243,6 +244,7 @@ export default {
   setup() {
     return {
       v$: useVuelidate(),
+      modalConfirm: useAutoModal(),
     }
   },
 
@@ -403,7 +405,7 @@ export default {
     async onInstallClick(appId) {
       const app = this.apps.find((app) => app.id === appId)
       if (!app.decent_quality) {
-        const confirmed = await this.$askConfirmation(
+        const confirmed = await this.modalConfirm(
           this.$t('confirm_install_app_' + app.state),
         )
         if (!confirmed) return
@@ -413,7 +415,7 @@ export default {
 
     // INSTALL CUSTOM APP
     async onCustomInstallClick() {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_install_custom_app'),
       )
       if (!confirmed) return
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 4226ffd86..4b55fc60d 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -343,8 +343,8 @@
       id="uninstall-modal"
       :title="$t('confirm_uninstall', { name: id })"
       header-bg-variant="warning"
+      header-class="text-black"
       :body-class="{ 'd-none': !app.supports_purge }"
-      body-bg-variant=""
       @ok="uninstall"
     >
       <BFormGroup v-if="app.supports_purge">
@@ -366,6 +366,7 @@ import { mapGetters } from 'vuex'
 import { useVuelidate } from '@vuelidate/core'
 
 import api, { objectToParams } from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { humanPermissionName } from '@/helpers/filters/human'
 import { helpers, required } from '@/helpers/validators'
 import { isEmptyValue } from '@/helpers/commons'
@@ -390,6 +391,7 @@ export default {
   setup() {
     return {
       v$: useVuelidate(),
+      modalConfirm: useAutoModal(),
     }
   },
 
@@ -646,7 +648,7 @@ export default {
     },
 
     async changeUrl() {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_app_change_url'),
       )
       if (!confirmed) return
@@ -662,9 +664,7 @@ export default {
     },
 
     async setAsDefaultDomain(undo = false) {
-      const confirmed = await this.$askConfirmation(
-        this.$t('confirm_app_default'),
-      )
+      const confirmed = await this.modalConfirm(this.$t('confirm_app_default'))
       if (!confirmed) return
 
       api
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index e6a4b6d85..4b8d9a976 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -209,6 +209,7 @@
 import { useVuelidate } from '@vuelidate/core'
 
 import api, { objectToParams } from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import {
   formatYunoHostArguments,
   formatI18nField,
@@ -230,6 +231,7 @@ export default {
   setup() {
     return {
       v$: useVuelidate(),
+      modalConfirm: useAutoModal(),
     }
   },
 
@@ -379,7 +381,7 @@ export default {
 
     async performInstall() {
       if ('path' in this.form && this.form.path === '/') {
-        const confirmed = await this.$askConfirmation(
+        const confirmed = await this.modalConfirm(
           this.$t('confirm_install_domain_root', {
             domain: this.form.domain,
           }),
@@ -405,15 +407,14 @@ export default {
           if (postInstall) {
             const message =
               this.$t('app.install.notifs.post.alert') + '\n\n' + postInstall
-            await this.$askMdConfirmation(
+            await this.modalConfirm(
               message,
               {
                 title: this.$t('app.install.notifs.post.title', {
                   name: this.app.name,
                 }),
-                okTitle: this.$t('ok'),
               },
-              true,
+              { markdown: true, cancelable: false },
             )
           }
           this.$router.push({ name: 'app-list' })
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index 7d1191269..ccc1b3b53 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -137,6 +137,7 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { readableDate } from '@/helpers/filters/date'
 import { humanSize } from '@/helpers/filters/human'
 import { isEmptyValue } from '@/helpers/commons'
@@ -149,6 +150,12 @@ export default {
     name: { type: String, required: true },
   },
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   data() {
     return {
       queries: [['GET', `backups/${this.name}?with_details`]],
@@ -215,7 +222,7 @@ export default {
     },
 
     async restoreBackup() {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_restore', { name: this.name }),
       )
       if (!confirmed) return
@@ -245,7 +252,7 @@ export default {
     },
 
     async deleteBackup() {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_delete', { name: this.name }),
       )
       if (!confirmed) return
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index 32b5371d7..f480a35cc 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -145,6 +145,7 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { isEmptyValue } from '@/helpers/commons'
 
 export default {
@@ -154,6 +155,12 @@ export default {
     name: { type: String, required: true },
   },
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   data() {
     return {
       queries: [['GET', `domains/${this.name}/dns/suggest`]],
@@ -246,7 +253,7 @@ export default {
 
     async pushDnsChanges() {
       if (this.force) {
-        const confirmed = await this.$askConfirmation(
+        const confirmed = await this.modalConfirm(
           this.$t('domain.dns.push_force_confirm'),
         )
         if (!confirmed) return
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 74821d6c8..cccdbef82 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -125,8 +125,8 @@
       :title="$t('confirm_delete', { name: this.name })"
       @ok="deleteDomain"
       header-bg-variant="warning"
-      body-class=""
-      body-bg-variant=""
+      header-class="text-black"
+      :body-class="{ 'd-none': !isMainDynDomain }"
     >
       <BFormGroup v-if="isMainDynDomain">
         <BFormCheckbox v-model="unsubscribeDomainFromDyndns">
@@ -141,6 +141,7 @@
 import { mapGetters } from 'vuex'
 
 import api, { objectToParams } from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import {
   formatFormData,
   formatYunoHostConfigPanels,
@@ -160,6 +161,12 @@ export default {
     name: { type: String, required: true },
   },
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   data() {
     return {
       queries: [
@@ -279,7 +286,7 @@ export default {
     },
 
     async setAsDefaultDomain() {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_change_maindomain'),
       )
       if (!confirmed) return
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 56db370ec..8b97b4760 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -134,6 +134,7 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { isEmptyValue } from '@/helpers/commons'
 import TagsSelectizeItem from '@/components/globals/formItems/TagsSelectizeItem.vue'
 
@@ -146,6 +147,12 @@ export default {
     TagsSelectizeItem,
   },
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   data() {
     return {
       queries: [
@@ -264,7 +271,7 @@ export default {
     async onPermissionChanged({ option, groupName, action, applyMethod }) {
       const permId = this.permissions.find((perm) => perm.label === option).id
       if (action === 'add' && ['sftp.main', 'ssh.main'].includes(permId)) {
-        const confirmed = await this.$askConfirmation(
+        const confirmed = await this.modalConfirm(
           this.$t('confirm_group_add_access_permission', {
             name: groupName,
             perm: option,
@@ -310,7 +317,7 @@ export default {
     },
 
     async deleteGroup(groupName) {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_delete', { name: groupName }),
       )
       if (!confirmed) return
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index 574724943..d14eb7bbb 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -83,6 +83,7 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { distanceToNow } from '@/helpers/filters/date'
 
 export default {
@@ -92,6 +93,12 @@ export default {
     name: { type: String, required: true },
   },
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   data() {
     return {
       queries: [
@@ -132,7 +139,7 @@ export default {
     },
 
     async updateService(action) {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_service_' + action, { name: this.name }),
       )
       if (!confirmed) return
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index c426d82ae..1eab60e14 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -121,6 +121,7 @@
 import { useVuelidate } from '@vuelidate/core'
 
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { required, integer, between } from '@/helpers/validators'
 
 export default {
@@ -129,6 +130,7 @@ export default {
   setup() {
     return {
       v$: useVuelidate(),
+      modalConfirm: useAutoModal(),
     }
   },
 
@@ -214,7 +216,7 @@ export default {
     },
 
     async togglePort({ action, port, protocol, connection }) {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_firewall_' + action, {
           port,
           protocol,
@@ -244,7 +246,7 @@ export default {
 
     async toggleUpnp(value) {
       const action = this.upnpEnabled ? 'disable' : 'enable'
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_upnp_' + action),
       )
       if (!confirmed) return
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index 1b42b7c15..3d5086555 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -88,11 +88,18 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 
 // FIXME not tested with pending migrations (disclaimer and stuff)
 export default {
   name: 'ToolMigrations',
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   data() {
     return {
       queries: [
@@ -136,7 +143,7 @@ export default {
     },
 
     async skipMigration(id) {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_migrations_skip'),
       )
       if (!confirmed) return
diff --git a/app/src/views/tool/ToolPower.vue b/app/src/views/tool/ToolPower.vue
index b9435cb39..b6688881a 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -35,13 +35,20 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 
 export default {
   name: 'ToolPower',
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   methods: {
     async triggerAction(action) {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_reboot_action_' + action),
       )
       if (!confirmed) return
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 74a1bd9c7..390e44a01 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -88,10 +88,11 @@
     </YCard>
 
     <BModal
+      v-model="showPreUpgradeModal"
       id="apps-pre-upgrade"
       :title="$t('app.upgrade.confirm.title')"
       header-bg-variant="warning"
-      :header-class="dark ? 'text-white' : 'text-black'"
+      header-class="text-black"
       :ok-title="$t('system_upgrade_btn')"
       ok-variant="success"
       :cancel-title="$t('cancel')"
@@ -139,6 +140,7 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { mapGetters } from 'vuex'
 
 import CardCollapse from '@/components/CardCollapse.vue'
@@ -150,6 +152,12 @@ export default {
     CardCollapse,
   },
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   data() {
     return {
       queries: [['PUT', 'update/all', {}, 'update']],
@@ -158,6 +166,7 @@ export default {
       apps: undefined,
       importantYunohostUpgrade: undefined,
       pendingMigrations: undefined,
+      showPreUpgradeModal: false,
       preUpgrade: {
         apps: [],
         notifs: [],
@@ -200,7 +209,7 @@ export default {
           : '',
       }))
       this.preUpgrade = { apps, hasNotifs: apps.some((app) => app.notif) }
-      this.$bvModal.show('apps-pre-upgrade')
+      this.showPreUpgradeModal = true
     },
 
     async performAppsUpgrade(ids) {
@@ -224,7 +233,7 @@ export default {
             if (postMessage) {
               const message =
                 this.$t('app.upgrade.notifs.post.alert') + '\n\n' + postMessage
-              return this.$askMdConfirmation(
+              return this.modalConfirm(
                 message,
                 {
                   title: this.$t('app.upgrade.notifs.post.title', {
@@ -233,7 +242,7 @@ export default {
                   okTitle: this.$t(isLast ? 'ok' : 'app.upgrade.continue'),
                   cancelTitle: this.$t('app.upgrade.stop'),
                 },
-                isLast,
+                { markdown: true, cancelable: !isLast },
               )
             } else {
               return Promise.resolve(true)
@@ -248,7 +257,7 @@ export default {
     },
 
     async performSystemUpgrade() {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_update_system'),
       )
       if (!confirmed) return
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index 03ba1357d..57916f1ac 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -23,6 +23,7 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { useVuelidate } from '@vuelidate/core'
 
 import { formatFormData } from '@/helpers/yunohostArguments'
@@ -34,6 +35,7 @@ export default {
   setup() {
     return {
       v$: useVuelidate(),
+      modalConfirm: useAutoModal(),
     }
   },
 
@@ -89,7 +91,7 @@ export default {
   methods: {
     async onSubmit() {
       if (this.form.delete) {
-        const confirmed = await this.$askConfirmation(
+        const confirmed = await this.modalConfirm(
           this.$t('users_import_confirm_destructive'),
           { okTitle: this.$t('users_import_delete_others') },
         )
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index 2929cfd40..d9b47bd39 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -83,8 +83,7 @@
       :title="$t('confirm_delete', { name: user.username })"
       @ok="deleteUser"
       header-bg-variant="warning"
-      body-class=""
-      body-bg-variant=""
+      header-class="text-black"
     >
       <BFormGroup>
         <BFormCheckbox v-model="purge">

From 6229e40ca8cb00a5ec6b3f70a14fbe2c3b1beac2 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 18 Mar 2024 15:40:21 +0100
Subject: [PATCH 050/275] fix: validation on blur

---
 app/src/components/AdressInputSelect.vue      |  2 --
 app/src/components/ConfigPanels.vue           |  2 +-
 app/src/components/globals/FormField.vue      | 31 +++++++++++--------
 .../components/globals/formItems/FileItem.vue | 11 +++++--
 .../globals/formItems/InputItem.vue           | 10 +++++-
 .../globals/formItems/SelectItem.vue          | 12 +++++--
 .../components/globals/formItems/TagsItem.vue | 10 +++++-
 .../globals/formItems/TextAreaItem.vue        | 10 +++++-
 8 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
index 0a23f78c5..2bb24d1a7 100644
--- a/app/src/components/AdressInputSelect.vue
+++ b/app/src/components/AdressInputSelect.vue
@@ -7,7 +7,6 @@
       :state="state"
       :aria-describedby="id + 'local-part-desc'"
       @update:modelValue="onInput('localPart', $event)"
-      @blur="$parent.$emit('touch')"
     />
 
     <BInputGroupAppend>
@@ -20,7 +19,6 @@
         :choices="choices"
         :aria-describedby="id + 'domain-desc'"
         @update:modelValue="onInput('domain', $event)"
-        @blur="$parent.$emit('touch')"
       />
     </BInputGroupAppend>
 
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index e1ab25f22..b1869b31e 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -55,7 +55,7 @@ export default {
   setup(props) {
     const externalResults = toRef(props, 'externalResults')
     return {
-      v$: useVuelidate({ $externalResults: externalResults, $autoDirty: true }),
+      v$: useVuelidate({ $externalResults: externalResults }),
     }
   },
 
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 7a6d4d00a..18114508c 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -48,6 +48,8 @@
 </template>
 
 <script>
+import { provide } from 'vue'
+
 export default {
   name: 'FormField',
 
@@ -67,6 +69,22 @@ export default {
     validationIndex: { type: Number, default: null },
   },
 
+  setup(props) {
+    function touch(name) {
+      if (props.validation) {
+        // For fields that have multiple elements
+        if (name) {
+          props.validation[name].$touch()
+        } else {
+          props.validation.$touch()
+        }
+      }
+    }
+    provide('touch', touch)
+
+    return { touch }
+  },
+
   computed: {
     _id() {
       if (this.id) return this.id
@@ -127,19 +145,6 @@ export default {
       return ''
     },
   },
-
-  methods: {
-    touch(name) {
-      if (this.validation) {
-        // For fields that have multiple elements
-        if (name) {
-          this.validation[name].$touch()
-        } else {
-          this.validation.$touch()
-        }
-      }
-    },
-  },
 }
 </script>
 
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 07392692a..4aff57725 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -20,13 +20,14 @@
       :state="state"
       :browse-text="$t('words.browse')"
       @update:modelValue="onInput"
-      @blur="$parent.$emit('touch', name)"
-      @focusout="$parent.$emit('touch', name)"
+      @blur="touch(name)"
+      @focusout="touch(name)"
     />
   </BButtonGroup>
 </template>
 
 <script>
+import { inject } from 'vue'
 import { getFileContent } from '@/helpers/commons'
 
 export default {
@@ -43,6 +44,12 @@ export default {
     name: { type: String, default: null },
   },
 
+  setup() {
+    return {
+      touch: inject('touch'),
+    }
+  },
+
   computed: {
     _placeholder: function () {
       return this.modelValue.file === null
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index 752381247..7bedd046c 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -12,11 +12,13 @@
     :step="step"
     :trim="trim"
     :autocomplete="autocomplete_"
-    @blur="$parent.$emit('touch', name)"
+    @blur="touch(name)"
   />
 </template>
 
 <script>
+import { inject } from 'vue'
+
 export default {
   name: 'InputItem',
 
@@ -36,6 +38,12 @@ export default {
     name: { type: String, default: null },
   },
 
+  setup() {
+    return {
+      touch: inject('touch'),
+    }
+  },
+
   data() {
     return {
       autocomplete_: this.autocomplete
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index 2140f49f8..3360bc923 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -5,20 +5,28 @@
     :id="id"
     :options="choices"
     :required="required"
-    @blur="$emit('blur', modelValue)"
+    @blur="touch(name)"
   />
 </template>
 
 <script>
+import { inject } from 'vue'
+
 export default {
   name: 'SelectItem',
 
   props: {
     modelValue: { type: [String, null], default: null },
     id: { type: String, default: null },
-    choices: { type: [Array, Object], required: true },
+    choices: { type: Array, required: true },
     required: { type: Boolean, default: false },
     name: { type: String, default: null },
   },
+
+  setup() {
+    return {
+      touch: inject('touch'),
+    }
+  },
 }
 </script>
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index d19377521..5b9913a88 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -10,11 +10,13 @@
     remove-on-delete
     :state="state"
     :options="options"
-    @blur="$parent.$emit('touch', name)"
+    @blur="touch(name)"
   />
 </template>
 
 <script>
+import { inject } from 'vue'
+
 export default {
   name: 'TagsItem',
 
@@ -28,5 +30,11 @@ export default {
     name: { type: String, default: null },
     options: { type: Array, default: null },
   },
+
+  setup() {
+    return {
+      touch: inject('touch'),
+    }
+  },
 }
 </script>
diff --git a/app/src/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index 7659026f3..2e1b4bbf6 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -7,11 +7,13 @@
     :required="required"
     :state="state"
     rows="4"
-    @blur="$parent.$emit('touch', name)"
+    @blur="touch(name)"
   />
 </template>
 
 <script>
+import { inject } from 'vue'
+
 export default {
   name: 'TextAreaItem',
 
@@ -24,5 +26,11 @@ export default {
     state: { type: Boolean, default: null },
     name: { type: String, default: null },
   },
+
+  setup() {
+    return {
+      touch: inject('touch'),
+    }
+  },
 }
 </script>

From 2156196f8beb6c5c05ddde3d143d28e1c99ec241 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 18 Mar 2024 16:25:36 +0100
Subject: [PATCH 051/275] fix: DomainAdd event bubbling

---
 app/src/components/globals/CardForm.vue | 2 +-
 app/src/views/_partials/DomainForm.vue  | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index c63bbbeb7..7ab7cb825 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -7,7 +7,7 @@
         :id="id"
         :inline="inline"
         :class="formClasses"
-        @submit.prevent="onSubmit"
+        @submit.prevent.stop="onSubmit"
         novalidate
       >
         <slot name="default" />
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 8fe717304..db8b59ab8 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -131,6 +131,8 @@ import {
 export default {
   name: 'DomainForm',
 
+  inheritAttrs: false,
+
   props: {
     title: { type: String, required: true },
     submitText: { type: String, default: null },

From 6be1609f1057d23896aeb18159286d278b6b423e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 18 Mar 2024 16:46:23 +0100
Subject: [PATCH 052/275] migration(vuex): currentRoute is now a ref

---
 app/src/store/info.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/src/store/info.js b/app/src/store/info.js
index a631b37dd..88aa1f388 100644
--- a/app/src/store/info.js
+++ b/app/src/store/info.js
@@ -158,16 +158,17 @@ export default {
       commit('SET_YUNOHOST_INFOS', null)
     },
 
-    DISCONNECT({ dispatch }, route = router.currentRoute) {
+    DISCONNECT({ dispatch }, route) {
       // FIXME vue3 currentRoute is now a ref (currentRoute.value)
       dispatch('RESET_CONNECTED')
-      if (router.currentRoute.name === 'login') return
+      if (router.currentRoute.value.name === 'login') return
+      const previousRoute = route ?? router.currentRoute.value
       router.push({
         name: 'login',
         // Add a redirect query if next route is not unknown (like `logout`) or `login`
         query:
-          route && !['login', null].includes(route.name)
-            ? { redirect: route.path }
+          previousRoute && !['login', null].includes(previousRoute.name)
+            ? { redirect: previousRoute.path }
             : {},
       })
     },

From 9ec1fbd714bc6e220cfbdb50cc7d40a120738fb0 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 18 Mar 2024 18:24:00 +0100
Subject: [PATCH 053/275] fix: ConfigPanels event bubbling

---
 app/src/components/ConfigPanel.vue          | 2 +-
 app/src/components/ConfigPanels.vue         | 1 -
 app/src/components/RoutableTabs.vue         | 6 +-----
 app/src/components/globals/AbstractForm.vue | 5 +++--
 4 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
index 6220a6087..4121ab610 100644
--- a/app/src/components/ConfigPanel.vue
+++ b/app/src/components/ConfigPanel.vue
@@ -6,7 +6,7 @@
       validation,
       serverError: panel.serverError,
     }"
-    @apply="onApply"
+    @submit="onApply"
     :no-footer="!panel.hasApplyButton"
   >
     <slot name="tab-top" />
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index b1869b31e..82d6abda4 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -5,7 +5,6 @@
       v-if="routes_.length > 1"
       v-bind="{ panels, forms, v: v$, ...$attrs }"
       :routes="routes_"
-      @apply="$emit('apply', $event)"
     >
       <template #tab-top>
         <slot name="tab-top" />
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index 1fa13bbe4..193810c4f 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -16,11 +16,7 @@
 
     <!-- Bind extra props to the child view and forward child events to parent -->
     <RouterView v-slot="{ Component }">
-      <Component
-        v-bind="$attrs"
-        :is="Component"
-        @apply="$emit('apply', $event)"
-      >
+      <Component v-bind="$attrs" :is="Component">
         <template #tab-top>
           <slot name="tab-top" />
         </template>
diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index 273073cac..ed7581b54 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -34,6 +34,8 @@
 export default {
   name: 'AbstractForm',
 
+  inheritAttrs: false,
+
   props: {
     id: { type: String, default: 'ynh-form' },
     submitText: { type: String, default: null },
@@ -60,8 +62,7 @@ export default {
         v.$touch()
         if (v.$pending || v.$errors.length) return
       }
-      // Weird bug with `INSTANCE_LISTENERS: true` with 'submit' event (double exec before of conflict with native submit event?)
-      this.$emit('apply')
+      this.$emit('submit')
     },
   },
 }

From cb7b13f11231ca986516e5f6c23a0f5efb7f7b86 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:15:12 +0100
Subject: [PATCH 054/275] fix: temp fix for RoutableTabs link active class

---
 app/src/components/RoutableTabs.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index 193810c4f..3bdbef920 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -6,8 +6,10 @@
           v-for="route in routes"
           :key="route.text"
           :to="route.to"
-          exact-active-class="active"
+          :active="$route.params.tabId === route.to.params.tabId"
         >
+          <!-- FIXME added :active="" because `exact-active-class` not working https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/1754 -->
+          <!-- exact-active-class="active" -->
           <YIcon v-if="route.icon" :iname="route.icon" />
           {{ route.text }}
         </BNavItem>

From cc02444e3373641b3243e2efa2af5558ca17f309 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:15:49 +0100
Subject: [PATCH 055/275] fix: ExplainWhat popover

---
 app/src/components/globals/ExplainWhat.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index 411bcdd79..ed3665ab5 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -2,16 +2,21 @@
   <span class="explain-what">
     <slot name="default" />
     <span class="explain-what-popover-container">
-      <BButton :id="id" href="#" variant="light">
+      <BButton
+        variant="light"
+        @focus="open = true"
+        @blur="open = false"
+        @click="open = !open"
+      >
         <YIcon iname="question" />
         <span class="sr-only">
           {{ $t('details_about', { subject: title }) }}
         </span>
       </BButton>
+      <!-- FIXME missing prop `trigger` in bvn https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/1275 and looks like `placement` doesn't work -->
       <BPopover
-        placement="auto"
-        :target="id"
-        triggers="focus"
+        v-model="open"
+        placement="top"
         custom-class="explain-what-popover"
         :variant="variant"
         :title="title"
@@ -38,6 +43,12 @@ export default {
       return Object.assign({ md: 4, xl: 3 }, this.cols)
     },
   },
+
+  data() {
+    return {
+      open: false,
+    }
+  },
 }
 </script>
 

From 620694c42ddf08992a02b2c559cabb272c6d616c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:17:26 +0100
Subject: [PATCH 056/275] fix: CardDeckFeed slots slicing + keyboard navigation

---
 app/src/components/CardDeckFeed.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index 6bf733a8b..c68484985 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -15,19 +15,19 @@ export default {
     return {
       busy: false,
       range: this.stacks,
-      childrenCount: this.$slots.default().length,
+      childrenCount: this.$slots.default()[0].children,
     }
   },
 
   methods: {
     getTopParent(prev) {
-      return prev.parentElement === this.$refs.feed
+      return prev.parentElement === this.$refs.feed.$el
         ? prev
         : this.getTopParent(prev.parentElement)
     },
 
     onScroll() {
-      const elem = this.$refs.feed
+      const elem = this.$refs.feed.$el
       if (
         window.innerHeight >
         elem.clientHeight + elem.getBoundingClientRect().top - 200
@@ -56,12 +56,12 @@ export default {
 
   mounted() {
     window.addEventListener('scroll', this.onScroll)
-    this.$refs.feed.addEventListener('keydown', this.onKeydown)
+    this.$refs.feed.$el.addEventListener('keydown', this.onKeydown)
     this.onScroll()
   },
 
   beforeUpdate() {
-    const slots = this.$slots.default()
+    const slots = this.$slots.default()[0].children
     if (this.childrenCount !== slots.length) {
       this.range = this.stacks
       this.childrenCount = slots.length
@@ -77,13 +77,15 @@ export default {
         'aria-busy': this.busy.toString(),
         ref: 'feed',
       },
-      this.$slots.default().slice(0, this.range),
+      {
+        default: () => this.$slots.default()[0].children.slice(0, this.range),
+      },
     )
   },
 
   beforeUnmount() {
     window.removeEventListener('scroll', this.onScroll)
-    this.$refs.feed.removeEventListener('keydown', this.onKeydown)
+    this.$refs.feed.$el.removeEventListener('keydown', this.onKeydown)
   },
 }
 </script>

From c730de8b3217d8359d5adab4bd4708ed245d3a9d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:18:01 +0100
Subject: [PATCH 057/275] fix: FileItem display

---
 .../components/globals/formItems/FileItem.vue | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 4aff57725..7bd3f2503 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -1,13 +1,15 @@
 <template>
-  <BButtonGroup class="w-100">
-    <BButton
-      v-if="!this.required && this.modelValue.file !== null"
-      @click="clearFiles"
-      variant="danger"
-    >
-      <span class="sr-only">{{ $t('delete') }}</span>
-      <YIcon iname="trash" />
-    </BButton>
+  <BInputGroup class="w-100">
+    <template #append>
+      <BButton
+        v-if="!this.required && this.modelValue.file !== null"
+        @click="clearFiles"
+        variant="danger"
+      >
+        <span class="sr-only">{{ $t('delete') }}</span>
+        <YIcon iname="trash" />
+      </BButton>
+    </template>
 
     <BFormFile
       :modelValue="modelValue.file"
@@ -23,7 +25,7 @@
       @blur="touch(name)"
       @focusout="touch(name)"
     />
-  </BButtonGroup>
+  </BInputGroup>
 </template>
 
 <script>
@@ -38,7 +40,7 @@ export default {
     modelValue: { type: Object, default: () => ({ file: null }) },
     placeholder: { type: String, default: 'Choose a file or drop it here...' },
     dropPlaceholder: { type: String, default: null },
-    accept: { type: String, default: null },
+    accept: { type: String, default: '' },
     state: { type: Boolean, default: null },
     required: { type: Boolean, default: false },
     name: { type: String, default: null },
@@ -89,6 +91,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// fix https://getbootstrap.com/docs/5.2/migration/#forms
 :deep(.custom-file-label) {
   color: $input-placeholder-color;
 

From 4b33e67514dd8f1adb19964f5d93cdbfa6b3f5da Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:26:18 +0100
Subject: [PATCH 058/275] fix: misc component issues

---
 app/src/App.vue                               |  2 +-
 .../globals/formItems/TagsSelectizeItem.vue   |  2 +-
 app/src/store/data.js                         | 19 +++++++++++--------
 app/src/views/app/AppCatalog.vue              |  5 ++++-
 app/src/views/domain/DomainList.vue           | 11 +----------
 5 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index 8347c71a0..d5e7ae7bf 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -142,7 +142,7 @@ export default {
       if (key === copypastaCode[copypastastep++]) {
         if (copypastastep === copypastaCode.length) {
           document
-            .getElementsByClassName('unselectable')
+            .querySelectorAll('.unselectable')
             .forEach((element) => element.classList.remove('unselectable'))
           copypastastep = 0
         }
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index 685576c41..b85566c0b 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -175,7 +175,7 @@ export default {
       // Allow to start searching after dropdown opening
       if (
         !['Tab', 'Space'].includes(e.code) &&
-        e.target === this.$refs.dropdown.$el.lastElementChild
+        e.target === this.$refs.dropdown.$el.firstElementChild
       ) {
         this.$refs['search-input'].focus()
       }
diff --git a/app/src/store/data.js b/app/src/store/data.js
index c868490e1..e778f72ee 100644
--- a/app/src/store/data.js
+++ b/app/src/store/data.js
@@ -1,6 +1,7 @@
 import api from '@/api'
 import { isEmptyValue } from '@/helpers/commons'
 import { stratify } from '@/helpers/data/tree'
+import { reactive } from 'vue'
 
 export function getParentDomain(domain, domains, highest = false) {
   const method = highest ? 'lastIndexOf' : 'indexOf'
@@ -277,14 +278,16 @@ export default {
       // action when state.domain change)
       const domains = getters.orderedDomains
       if (!domains) return
-      const dataset = domains.map((name) => ({
-        // data to build a hierarchy
-        name,
-        parent: getParentDomain(name, domains),
-        // utility data that will be used by `RecursiveListGroup` component
-        to: { name: 'domain-info', params: { name } },
-        opened: true,
-      }))
+      const dataset = reactive(
+        domains.map((name) => ({
+          // data to build a hierarchy
+          name,
+          parent: getParentDomain(name, domains),
+          // utility data that will be used by `RecursiveListGroup` component
+          to: { name: 'domain-info', params: { name } },
+          opened: true,
+        })),
+      )
       return stratify(dataset)
     },
 
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 5948d4ca2..7f87ec1aa 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -80,7 +80,10 @@
         class="category-card"
       >
         <BCardTitle>
-          <BLink @click="updateQuery('category', cat.value)" class="card-link">
+          <BLink
+            @click.prevent="updateQuery('category', cat.value)"
+            class="card-link"
+          >
             <YIcon :iname="cat.icon" /> {{ cat.text }}
           </BLink>
         </BCardTitle>
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index b42367a1b..1b3b7399b 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -6,7 +6,6 @@
     items-name="domains"
     :queries="queries"
     :filtered-items="hasFilteredItems"
-    @queries-response="onQueriesResponse"
   >
     <template #top-bar-buttons>
       <BButton variant="success" :to="{ name: 'domain-add' }">
@@ -63,12 +62,11 @@ export default {
     return {
       queries: [['GET', { uri: 'domains', storeKey: 'domains' }]],
       search: '',
-      domainsTree: undefined,
     }
   },
 
   computed: {
-    ...mapGetters(['domains', 'mainDomain']),
+    ...mapGetters(['domains', 'mainDomain', 'domainsTree']),
 
     tree() {
       if (!this.domainsTree) return
@@ -86,12 +84,5 @@ export default {
       return this.tree.children || null
     },
   },
-
-  methods: {
-    onQueriesResponse() {
-      // Add the tree to `data` to make it reactive
-      this.domainsTree = this.$store.getters.domainsTree
-    },
-  },
 }
 </script>

From 94956c57eeacd97ac9cc33b821a6bc2da7a674ab Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:27:09 +0100
Subject: [PATCH 059/275] fix: adapt `choices` data structure

---
 app/src/helpers/yunohostArguments.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/src/helpers/yunohostArguments.js b/app/src/helpers/yunohostArguments.js
index 9cd733bac..c6630ebe1 100644
--- a/app/src/helpers/yunohostArguments.js
+++ b/app/src/helpers/yunohostArguments.js
@@ -221,7 +221,7 @@ export function formatYunoHostArgument(arg) {
             label: arg.placeholder,
           })
         }
-        if (typeof value === 'string') {
+        if (typeof value === 'string' && value) {
           value = value.split(',')
         } else if (!value) {
           value = []
@@ -296,8 +296,15 @@ export function formatYunoHostArgument(arg) {
     prop = prop.split(':')
     const propName = prop[0]
     const argName = prop.slice(-1)[0]
+
     if (argName in arg) {
-      field.props.props[propName] = arg[argName]
+      if (propName === 'choices') {
+        field.props.props[propName] = Object.entries(arg[argName]).map(
+          ([value, text]) => ({ value, text }),
+        )
+      } else {
+        field.props.props[propName] = arg[argName]
+      }
     }
   }
 

From e87d76eea67528296d62dc7005837541e765cc50 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:28:06 +0100
Subject: [PATCH 060/275] fix: Diagnosis ignored count and display

---
 app/src/views/diagnosis/DiagnosisView.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 29dceb190..565fd5e62 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -188,15 +188,19 @@ export default {
           item.issue = false
 
           if (item.ignored) {
-            item.variant = 'light'
             report.ignoreds++
-          } else if (status === 'warning') {
+          }
+          if (status === 'warning') {
             item.issue = true
-            report.warnings++
+            if (!item.ignored) {
+              report.warnings++
+            }
           } else if (status === 'error') {
             item.variant = 'danger'
             item.issue = true
-            report.errors++
+            if (!item.ignored) {
+              report.errors++
+            }
           }
         }
 
@@ -232,10 +236,11 @@ export default {
           item.ignored = action === 'ignore'
           if (item.ignored) {
             report[item.status.toLowerCase() + 's']--
+            report.ignoreds++
           } else {
+            report[item.status.toLowerCase() + 's']++
             report.ignoreds--
           }
-          this.formatReportItem(report, item)
         })
     },
 

From 183e281d04982d542a1f05418ad49df3a474ae3c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:39:52 +0100
Subject: [PATCH 061/275] fix: css misc fixes

---
 app/src/components/RecursiveListGroup.vue     |  6 +-
 app/src/components/globals/ExplainWhat.vue    | 24 +++++--
 app/src/components/globals/YListGroupItem.vue |  1 +
 .../globals/formItems/TagsSelectizeItem.vue   |  9 ++-
 app/src/scss/_variables.scss                  |  2 -
 app/src/scss/main.scss                        | 31 +++++++++
 app/src/views/_partials/ViewLockOverlay.vue   | 10 ++-
 app/src/views/app/AppCatalog.vue              | 10 +--
 app/src/views/group/GroupList.vue             |  4 +-
 app/src/views/tool/ToolFirewall.vue           | 65 +++++++------------
 app/src/views/user/UserCreate.vue             |  6 --
 app/src/views/user/UserEdit.vue               |  5 --
 app/src/views/user/UserInfo.vue               |  2 +-
 13 files changed, 105 insertions(+), 70 deletions(-)

diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 9c5645369..599537bd0 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -114,7 +114,11 @@ export default {
 
     &:hover,
     &:focus {
-      background-color: shade-color($gray-100, 3%);
+      background-color: shade-color($body-tertiary-bg, 3%);
+
+      [data-bs-theme='dark'] & {
+        background-color: tint-color($body-tertiary-bg-dark, 3%);
+      }
     }
   }
 }
diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index ed3665ab5..5878a4497 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -58,18 +58,30 @@ export default {
 
   .btn {
     padding: 0;
-    margin-left: 0.1rem;
+    margin-left: 0.25rem;
     border-radius: 50rem;
     line-height: inherit;
     font-size: inherit;
   }
 
-  &-popover {
-    background-color: $white;
-    border-width: 2px;
+  :deep() {
+    .popover {
+      background-color: $gray-800;
+      color: $black;
+      border-width: 2px;
 
-    :deep(.popover-body) {
-      color: $dark;
+      [data-bs-theme='dark'] & {
+        background-color: $white;
+        color: $white;
+      }
+
+      .popover-body {
+        color: $white;
+
+        [data-bs-theme='dark'] & {
+          color: $black;
+        }
+      }
     }
   }
 }
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index 3ed5c9f44..5ac6962f8 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -49,6 +49,7 @@ export default {
 
   &-status {
     width: 2rem;
+    min-width: 2rem;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index b85566c0b..525e39540 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -194,7 +194,14 @@ export default {
     padding-top: 0.5rem;
     position: sticky;
     top: 0;
-    background-color: $white;
+  }
+}
+
+// FIXME bvn fix (should be fixed in lib)
+:deep(.btn-group) {
+  display: block;
+  .btn {
+    width: 100%;
   }
 }
 </style>
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index 48cbe7dca..b484a8969 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -132,8 +132,6 @@ $list-group-item-padding-y: $spacer * 0.75;
 @import '~bootstrap/scss/mixins';
 @import '~bootstrap/scss/utilities';
 
-$hr-border-color: $gray-200;
-
 $list-group-action-color: $gray-800;
 
 //  ╭──────────────────────────────────────╮
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 7e770aaa9..dbea35074 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -117,6 +117,29 @@ body {
 .tooltip {
   top: 0;
 }
+
+// BVN fixes
+// FIXME move to CardForm ?
+form {
+  .row {
+    margin-bottom: $spacer;
+  }
+  fieldset {
+    margin-bottom: $spacer;
+    width: 100%;
+    .row {
+      margin-bottom: 0;
+    }
+  }
+  .form-text {
+    display: block;
+
+    .alert {
+      margin-bottom: 0;
+    }
+  }
+}
+
 // Descriptive list (<b-row /> elems with <b-col> inside)
 // FIXME REMOVE when every infos switch to `DescriptionRow`
 .row-line {
@@ -247,6 +270,10 @@ code {
   background: $gray-300;
   padding: 0.15rem 0.25rem;
   border-radius: $border-radius;
+
+  [data-bs-theme='dark'] & {
+    background-color: $gray-800;
+  }
 }
 
 pre code {
@@ -258,6 +285,10 @@ pre code {
   padding: 1rem;
   background-color: $light;
   overflow: auto;
+
+  [data-bs-theme='dark'] & {
+    background-color: $dark;
+  }
 }
 
 .unselectable {
diff --git a/app/src/views/_partials/ViewLockOverlay.vue b/app/src/views/_partials/ViewLockOverlay.vue
index 8450b12fd..a32fe2636 100644
--- a/app/src/views/_partials/ViewLockOverlay.vue
+++ b/app/src/views/_partials/ViewLockOverlay.vue
@@ -1,6 +1,6 @@
 <template>
   <BOverlay
-    variant="white"
+    :variant="dark ? 'dark' : 'light'"
     opacity="0.75"
     no-center
     :show="waiting || reconnecting || error !== null"
@@ -41,7 +41,13 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['waiting', 'reconnecting', 'error', 'currentRequest']),
+    ...mapGetters([
+      'waiting',
+      'reconnecting',
+      'error',
+      'currentRequest',
+      'dark',
+    ]),
 
     component() {
       const { error, reconnecting, currentRequest: request } = this
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 7f87ec1aa..c7542ae84 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -466,19 +466,20 @@ export default {
 .card-deck {
   padding: 0;
   margin-bottom: 0;
+  display: flex;
+  flex-flow: row wrap;
 
   > * {
-    margin-bottom: 2rem;
     flex-basis: 100%;
 
     @include media-breakpoint-up(md) {
       flex-basis: 50%;
-      max-width: calc(50% - 30px);
+      max-width: calc(50% - 0.75rem);
     }
 
     @include media-breakpoint-up(lg) {
       flex-basis: 33%;
-      max-width: calc(33.3% - 30px);
+      max-width: calc(33.3% - 1rem);
     }
   }
 
@@ -489,8 +490,9 @@ export default {
       border-color: $dark;
     }
 
-    .card-link {
+    :deep(.card-link) {
       color: inherit;
+      text-decoration: none;
 
       &::after {
         content: '';
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 8b97b4760..b09d37679 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -45,11 +45,11 @@
 
         <BCol>
           <template v-if="group.isSpecial">
-            <p class="text-primary">
+            <p class="text-primary-emphasis">
               <YIcon iname="info-circle" />
               {{ $t('group_explain_' + groupName) }}
             </p>
-            <p class="text-primary" v-if="groupName === 'visitors'">
+            <p class="text-primary-emphasis" v-if="groupName === 'visitors'">
               <em>{{
                 $t('group_explain_visitors_needed_for_external_client')
               }}</em>
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 1eab60e14..30a475130 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -33,9 +33,7 @@
               "
             >
               <span
-                :class="
-                  'btn btn-sm py-0 btn-' + (data.value ? 'danger' : 'success')
-                "
+                :class="'btn btn-xs btn-' + (data.value ? 'danger' : 'success')"
               >
                 {{ $t(data.value ? 'close' : 'open') }}
               </span>
@@ -59,13 +57,13 @@
       :server-error="serverError"
       @submit.prevent="onFormPortToggling"
       inline
-      form-classes="d-flex justify-content-between align-items-start"
+      form-classes="d-flex flex-column flex-lg-row gap-3 justify-content-between align-items-start"
     >
       <BInputGroup :prepend="$t('action')">
         <BFormSelect v-model="form.action" :options="actionChoices" />
       </BInputGroup>
 
-      <FormField :validation="v$.form.port">
+      <FormField :validation="v$.form.port" class="mb-0">
         <BInputGroup :prepend="$t('port')">
           <InputItem
             id="input-port"
@@ -290,47 +288,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-:deep(.on-off-switch) {
-  .custom-control-input {
-    &:checked ~ .custom-control-label::before {
-      border-color: $success;
-      background-color: $success;
-    }
-    &:not(:checked) ~ .custom-control-label {
-      &::before {
+:deep() {
+  .form-switch {
+    .form-check-input {
+      --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(255, 255, 255)'/></svg>") !important;
+      [data-bs-theme='dark'] * & {
+        --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(34, 38, 42)'/></svg>") !important;
+      }
+      &:checked {
+        border-color: $success;
+        background-color: $success;
+      }
+      &:not(:checked) {
         border-color: $danger;
         background-color: $danger;
       }
-      &::after {
-        background-color: $white;
-      }
     }
-  }
 
-  input:focus ~ .custom-control-label,
-  &:hover {
-    span {
-      visibility: visible;
-    }
-  }
-  span {
-    visibility: hidden;
-    @include media-breakpoint-down(sm) {
-      display: none;
+    input:focus ~ .custom-control-label,
+    &:hover {
+      span {
+        visibility: visible;
+      }
     }
-  }
-}
-
-:deep(form) {
-  margin-bottom: -1rem;
-
-  & > * {
-    margin-bottom: 1rem;
-  }
-
-  @include media-breakpoint-down(sm) {
-    fieldset {
-      width: 100%;
+    span {
+      visibility: hidden;
+      @include media-breakpoint-down(sm) {
+        display: none;
+      }
     }
   }
 }
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index f1d1e3f48..fa4eb56b9 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -199,9 +199,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss" scoped>
-.custom-select {
-  flex-basis: 40%;
-}
-</style>
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 4e6418b6d..7d64224a2 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -361,11 +361,6 @@ export default {
   display: flex;
   justify-items: stretch;
 
-  .form-group {
-    margin-bottom: 0.5rem;
-    width: 100%;
-  }
-
   .btn-danger {
     align-self: flex-start;
     margin-left: 0.5rem;
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index d9b47bd39..b10095858 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -16,7 +16,7 @@
             <BCol>
               <strong>{{ $t('user_email') }}</strong>
             </BCol>
-            <BCol class="font-italic">
+            <BCol class="fst-italic">
               {{ user.mail }}
             </BCol>
           </BRow>

From e53c2c14d3993ba680f4bcd1acad0551e09da7e0 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:43:29 +0100
Subject: [PATCH 062/275] migration(bs5): font-weight-* to fw-*

---
 app/src/components/globals/FormField.vue     | 2 +-
 app/src/components/globals/ReadOnlyField.vue | 2 +-
 app/src/views/_partials/HistoryConsole.vue   | 2 +-
 app/src/views/app/AppInfo.vue                | 8 ++++----
 app/src/views/app/AppList.vue                | 2 +-
 app/src/views/backup/BackupCreate.vue        | 4 ++--
 app/src/views/backup/BackupInfo.vue          | 4 ++--
 app/src/views/backup/BackupList.vue          | 2 +-
 app/src/views/backup/BackupView.vue          | 2 +-
 app/src/views/domain/DomainInfo.vue          | 2 +-
 app/src/views/domain/DomainList.vue          | 2 +-
 app/src/views/service/ServiceList.vue        | 2 +-
 app/src/views/user/UserList.vue              | 2 +-
 13 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 18114508c..16b58903b 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -98,7 +98,7 @@ export default {
         const defaultAttrs = {
           'label-cols-md': 4,
           'label-cols-lg': 3,
-          'label-class': ['font-weight-bold', 'py-0'],
+          'label-class': ['fw-bold', 'py-0'],
         }
         if (!('label-cols' in attrs)) {
           for (const attr in defaultAttrs) {
diff --git a/app/src/components/globals/ReadOnlyField.vue b/app/src/components/globals/ReadOnlyField.vue
index 7948964ed..1fedf9521 100644
--- a/app/src/components/globals/ReadOnlyField.vue
+++ b/app/src/components/globals/ReadOnlyField.vue
@@ -1,6 +1,6 @@
 <template>
   <BRow no-gutters class="description-row">
-    <BCol v-bind="cols_" class="font-weight-bold">
+    <BCol v-bind="cols_" class="fw-bold">
       {{ label }}
     </BCol>
 
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index 73ab25e0b..d12fc2c3a 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -15,7 +15,7 @@
     >
       <h5 class="m-0">
         <YIcon iname="history" />
-        <span class="d-none d-sm-inline font-weight-bold">
+        <span class="d-none d-sm-inline fw-bold">
           {{ $t('history.title') }}
         </span>
       </h5>
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 4b55fc60d..877715c9e 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -136,7 +136,7 @@
         <!-- CHANGE PERMISSIONS LABEL -->
         <BFormGroup
           :label="$t('app_manage_label_and_tiles')"
-          label-class="font-weight-bold"
+          label-class="fw-bold"
         >
           <FormField
             v-for="(perm, i) in app.permissions"
@@ -186,7 +186,7 @@
         <BFormGroup
           :label="$t('app_info_access_desc')"
           label-for="permissions"
-          label-class="font-weight-bold"
+          label-class="fw-bold"
           label-cols-lg="0"
         >
           {{
@@ -209,7 +209,7 @@
           :label="$t('app_info_changeurl_desc')"
           label-for="input-url"
           :label-cols-lg="app.supports_change_url ? 0 : 0"
-          label-class="font-weight-bold"
+          label-class="fw-bold"
           v-if="app.is_webapp"
         >
           <BInputGroup v-if="app.supports_change_url">
@@ -243,7 +243,7 @@
         <BFormGroup
           :label="$t('app_info_default_desc', { domain: app.domain })"
           label-for="main-domain"
-          label-class="font-weight-bold"
+          label-class="fw-bold"
           label-cols-md="4"
           v-if="app.is_webapp"
         >
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index 890a9792d..93fc8ffc5 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -22,7 +22,7 @@
         class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
-          <h5 class="font-weight-bold">
+          <h5 class="fw-bold">
             {{ label }}
             <small class="text-secondary">{{ id }}</small>
           </h5>
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index 699cd8b0b..c340d1776 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -44,7 +44,7 @@
             class="d-flex justify-content-between align-items-center pe-0"
           >
             <div class="me-2">
-              <h5 class="font-weight-bold">
+              <h5 class="fw-bold">
                 {{ item.name }}
               </h5>
               <p class="m-0 text-muted">
@@ -92,7 +92,7 @@
             class="d-flex justify-content-between align-items-center pe-0"
           >
             <div class="me-2">
-              <h5 class="font-weight-bold">
+              <h5 class="fw-bold">
                 {{ item.name }}
                 <small class="text-secondary">{{ item.id }}</small>
               </h5>
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index ccc1b3b53..74a355145 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -71,7 +71,7 @@
             class="d-flex justify-content-between align-items-center pe-0"
           >
             <div class="me-2">
-              <h5 class="font-weight-bold">
+              <h5 class="fw-bold">
                 {{ item.name }}
                 <small class="text-secondary" v-if="item.size">
                   ({{ humanSize(item.size) }})
@@ -92,7 +92,7 @@
             class="d-flex justify-content-between align-items-center pe-0"
           >
             <div class="me-2">
-              <h5 class="font-weight-bold">
+              <h5 class="fw-bold">
                 {{ item.name }}
                 <small class="text-secondary">
                   {{ appName }} ({{ humanSize(item.size) }})
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index 96cbce56a..4a58bae44 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -28,7 +28,7 @@
         class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
-          <h5 class="font-weight-bold">
+          <h5 class="fw-bold">
             {{ distanceToNow(created_at) }}
             <small class="text-secondary"
               >{{ name }} ({{ humanSize(size) }})</small
diff --git a/app/src/views/backup/BackupView.vue b/app/src/views/backup/BackupView.vue
index 164447d31..5601b05de 100644
--- a/app/src/views/backup/BackupView.vue
+++ b/app/src/views/backup/BackupView.vue
@@ -8,7 +8,7 @@
         class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
-          <h5 class="font-weight-bold">
+          <h5 class="fw-bold">
             {{ name }}
             <small class="text-secondary">{{ id }}</small>
           </h5>
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index cccdbef82..076a561a5 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -86,7 +86,7 @@
             class="me-2 mb-2"
           >
             <BButton
-              class="py-0 font-weight-bold"
+              class="py-0 fw-bold"
               variant="outline-dark"
               :to="{ name: 'app-info', params: { id: app.id } }"
             >
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 1b3b7399b..48118a4d6 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -23,7 +23,7 @@
         <div class="w-100 d-flex justify-content-between align-items-center">
           <h5 class="me-3">
             <BLink :to="data.to" class="text-body text-decoration-none">
-              <span class="font-weight-bold">
+              <span class="fw-bold">
                 {{ data.name.replace(parent ? parent.data.name : null, '') }}
               </span>
               <span v-if="parent" class="text-secondary">
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 8ee867d5a..874206a67 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -21,7 +21,7 @@
         class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
-          <h5 class="font-weight-bold">
+          <h5 class="fw-bold">
             {{ name }}
             <small class="text-secondary">{{ description }}</small>
           </h5>
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index ffdcdd000..88a8319e8 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -38,7 +38,7 @@
         class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
-          <h5 class="font-weight-bold">
+          <h5 class="fw-bold">
             {{ user.username }}
             <small class="text-secondary">{{ user.fullname }}</small>
           </h5>

From 357405d2a3c2b5cf3e106849e52b2bd9693d53b8 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 03:06:03 +0100
Subject: [PATCH 063/275] migration(bvn): remove no longer necessary
 BInputGroupAppend|Prepend

---
 app/src/components/AdressInputSelect.vue  | 28 ++++-----------
 app/src/components/globals/ViewSearch.vue |  4 +--
 app/src/views/app/AppCatalog.vue          | 44 ++++++++++++-----------
 app/src/views/app/AppInfo.vue             | 30 +++++++---------
 app/src/views/user/UserCreate.vue         | 12 ++-----
 5 files changed, 48 insertions(+), 70 deletions(-)

diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
index 2bb24d1a7..42b88dddc 100644
--- a/app/src/components/AdressInputSelect.vue
+++ b/app/src/components/AdressInputSelect.vue
@@ -9,18 +9,14 @@
       @update:modelValue="onInput('localPart', $event)"
     />
 
-    <BInputGroupAppend>
-      <BInputGroupText>{{ modelValue.separator }}</BInputGroupText>
-    </BInputGroupAppend>
+    <BInputGroupText>{{ modelValue.separator }}</BInputGroupText>
 
-    <BInputGroupAppend>
-      <SelectItem
-        :modelValue="modelValue.domain"
-        :choices="choices"
-        :aria-describedby="id + 'domain-desc'"
-        @update:modelValue="onInput('domain', $event)"
-      />
-    </BInputGroupAppend>
+    <SelectItem
+      :modelValue="modelValue.domain"
+      :choices="choices"
+      :aria-describedby="id + 'domain-desc'"
+      @update:modelValue="onInput('domain', $event)"
+    />
 
     <span
       class="sr-only"
@@ -60,13 +56,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss" scoped>
-.input-group-append ~ .input-group-append {
-  flex-basis: 40%;
-}
-select {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-</style>
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index de6912b03..f808cbbe4 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -5,9 +5,9 @@
     </template>
     <template v-if="!hasCustomTopBar" #top-bar-group-left>
       <BInputGroup class="w-100">
-        <BInputGroupPrepend is-text>
+        <BInputGroupText>
           <YIcon iname="search" />
-        </BInputGroupPrepend>
+        </BInputGroupText>
 
         <BFormInput
           id="top-bar-search"
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index c7542ae84..888a0a349 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -10,48 +10,49 @@
       <div id="view-top-bar">
         <!-- APP SEARCH -->
         <BInputGroup>
-          <BInputGroupPrepend is-text>
+          <BInputGroupText>
             <YIcon iname="search" />
-          </BInputGroupPrepend>
+          </BInputGroupText>
+
           <BFormInput
             id="search-input"
             :placeholder="$t('search.for', { items: $t('items.apps', 2) })"
             :modelValue="search"
             @update:modelValue="updateQuery('search', $event)"
           />
-          <BInputGroupAppend>
-            <BFormSelect
-              :modelValue="quality"
-              :options="qualityOptions"
-              @update:modelValue="updateQuery('quality', $event)"
-            />
-          </BInputGroupAppend>
+
+          <BFormSelect
+            :modelValue="quality"
+            :options="qualityOptions"
+            @update:modelValue="updateQuery('quality', $event)"
+          />
         </BInputGroup>
 
         <!-- CATEGORY SELECT -->
         <BInputGroup class="mt-3">
-          <BInputGroupPrepend is-text>
+          <BInputGroupText>
             <YIcon iname="filter" />
-          </BInputGroupPrepend>
+          </BInputGroupText>
+
           <BFormSelect
             :modelValue="category"
             :options="categories"
             @update:modelValue="updateQuery('category', $event)"
           />
-          <BInputGroupAppend>
-            <BButton
-              variant="primary"
-              :disabled="category === null"
-              @click="updateQuery('category', null)"
-            >
-              {{ $t('app_show_categories') }}
-            </BButton>
-          </BInputGroupAppend>
+
+          <BButton
+            variant="primary"
+            :disabled="category === null"
+            @click="updateQuery('category', null)"
+          >
+            {{ $t('app_show_categories') }}
+          </BButton>
         </BInputGroup>
 
         <!-- CATEGORIES SUBTAGS -->
         <BInputGroup v-if="subtags" class="mt-3 subtags">
-          <BInputGroupPrepend is-text> Subtags </BInputGroupPrepend>
+          <BInputGroupText>Subtags</BInputGroupText>
+
           <BFormRadioGroup
             id="subtags-radio"
             name="subtags"
@@ -61,6 +62,7 @@
             buttons
             button-variant="outline-secondary"
           />
+
           <BFormSelect
             id="subtags-select"
             :modelValue="subtag"
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 877715c9e..eb9fdf03f 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -156,19 +156,19 @@
                   :id="'perm' + i"
                   :aria-describedby="'perm-' + i + '_group__BV_description_'"
                 />
-                <BInputGroupAppend v-if="perm.tileAvailable" is-text>
+
+                <BInputGroupText v-if="perm.tileAvailable">
                   <CheckboxItem
                     v-model="form.labels[i].show_tile"
                     :label="$t('permission_show_tile_enabled')"
                   />
-                </BInputGroupAppend>
-                <BInputGroupAppend>
-                  <BButton
-                    variant="info"
-                    v-t="'save'"
-                    @click="changeLabel(perm.name, form.labels[i])"
-                  />
-                </BInputGroupAppend>
+                </BInputGroupText>
+
+                <BButton
+                  variant="info"
+                  v-t="'save'"
+                  @click="changeLabel(perm.name, form.labels[i])"
+                />
               </BInputGroup>
             </template>
 
@@ -213,13 +213,11 @@
           v-if="app.is_webapp"
         >
           <BInputGroup v-if="app.supports_change_url">
-            <BInputGroupPrepend is-text> https:// </BInputGroupPrepend>
+            <BInputGroupText>https://</BInputGroupText>
 
-            <BInputGroupPrepend class="flex-grow-1">
-              <BFormSelect v-model="form.url.domain" :options="domains" />
-            </BInputGroupPrepend>
+            <BFormSelect v-model="form.url.domain" :options="domains" />
 
-            <BInputGroupPrepend is-text> / </BInputGroupPrepend>
+            <BInputGroupText>/</BInputGroupText>
 
             <BFormInput
               id="input-url"
@@ -227,9 +225,7 @@
               class="flex-grow-3"
             />
 
-            <BInputGroupAppend>
-              <BButton @click="changeUrl" variant="info" v-t="'save'" />
-            </BInputGroupAppend>
+            <BButton @click="changeUrl" variant="info" v-t="'save'" />
           </BInputGroup>
 
           <div v-else class="alert alert-warning">
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index fa4eb56b9..d2095e496 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -30,15 +30,9 @@
       <FormField v-bind="fields.domain" :validation="v$.form.domain">
         <template #default="{ self }">
           <BInputGroup>
-            <BInputGroupAppend>
-              <BInputGroupText
-                id="local-part"
-                tag="label"
-                class="border-right-0"
-              >
-                {{ form.username }}@
-              </BInputGroupText>
-            </BInputGroupAppend>
+            <BInputGroupText id="local-part" tag="label" class="border-right-0">
+              {{ form.username }}@
+            </BInputGroupText>
 
             <SelectItem
               aria-labelledby="local-part"

From 26b691d9d646cf69b1edbb536f63a968f315227c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 03:15:55 +0100
Subject: [PATCH 064/275] migration(bs5): r/sr-only/visually-hidden

---
 app/src/components/AdressInputSelect.vue          | 4 ++--
 app/src/components/RecursiveListGroup.vue         | 2 +-
 app/src/components/globals/ExplainWhat.vue        | 2 +-
 app/src/components/globals/YBreadcrumb.vue        | 2 +-
 app/src/components/globals/YCard.vue              | 2 +-
 app/src/components/globals/formItems/FileItem.vue | 2 +-
 app/src/views/domain/DomainInfo.vue               | 2 +-
 app/src/views/user/UserEdit.vue                   | 4 ++--
 8 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
index 42b88dddc..be10a063c 100644
--- a/app/src/components/AdressInputSelect.vue
+++ b/app/src/components/AdressInputSelect.vue
@@ -19,12 +19,12 @@
     />
 
     <span
-      class="sr-only"
+      class="visually-hidden"
       :id="id + 'local-part-desc'"
       v-t="'address.local_part_description.' + type"
     />
     <span
-      class="sr-only"
+      class="visually-hidden"
       :id="id + 'domain-desc'"
       v-t="'address.domain_description.' + type"
     />
diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 599537bd0..66a74f69f 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -18,7 +18,7 @@
           class="ms-2"
           @click.stop="node.data.opened = !node.data.opened"
         >
-          <span class="sr-only">{{ toggleText }}</span>
+          <span class="visually-hidden">{{ toggleText }}</span>
           <YIcon iname="chevron-right" />
         </BButton>
       </BListGroupItem>
diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index 5878a4497..cc27000af 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -9,7 +9,7 @@
         @click="open = !open"
       >
         <YIcon iname="question" />
-        <span class="sr-only">
+        <span class="visually-hidden">
           {{ $t('details_about', { subject: title }) }}
         </span>
       </BButton>
diff --git a/app/src/components/globals/YBreadcrumb.vue b/app/src/components/globals/YBreadcrumb.vue
index 858708a8e..6e30430ec 100644
--- a/app/src/components/globals/YBreadcrumb.vue
+++ b/app/src/components/globals/YBreadcrumb.vue
@@ -1,7 +1,7 @@
 <template>
   <BBreadcrumb v-if="breadcrumb.length">
     <BBreadcrumbItem to="/">
-      <span class="sr-only">{{ $t('home') }}</span>
+      <span class="visually-hidden">{{ $t('home') }}</span>
       <YIcon iname="home" />
     </BBreadcrumbItem>
 
diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index a75564295..6a1c3429f 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -34,7 +34,7 @@
         }"
       >
         <YIcon iname="chevron-right" />
-        <span class="sr-only">{{ $t('words.collapse') }}</span>
+        <span class="visually-hidden">{{ $t('words.collapse') }}</span>
       </BButton>
     </template>
 
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 7bd3f2503..ecadae23e 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -6,7 +6,7 @@
         @click="clearFiles"
         variant="danger"
       >
-        <span class="sr-only">{{ $t('delete') }}</span>
+        <span class="visually-hidden">{{ $t('delete') }}</span>
         <YIcon iname="trash" />
       </BButton>
     </template>
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 076a561a5..4445929e2 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -98,7 +98,7 @@
               :href="'https://' + name + app.path"
               target="_blank"
             >
-              <span class="sr-only">{{ $t('app.visit_app') }}</span>
+              <span class="visually-hidden">{{ $t('app.visit_app') }}</span>
               <YIcon iname="external-link" />
             </BButton>
           </BButton-group>
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 7d64224a2..bdb025451 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -59,7 +59,7 @@
 
           <BButton variant="danger" @click="removeEmailField('aliases', i)">
             <YIcon :title="$t('delete')" iname="trash-o" />
-            <span class="sr-only">{{ $t('delete') }}</span>
+            <span class="visually-hidden">{{ $t('delete') }}</span>
           </BButton>
         </div>
 
@@ -81,7 +81,7 @@
 
           <BButton variant="danger" @click="removeEmailField('forward', i)">
             <YIcon :title="$t('delete')" iname="trash-o" />
-            <span class="sr-only">{{ $t('delete') }}</span>
+            <span class="visually-hidden">{{ $t('delete') }}</span>
           </BButton>
         </div>
 

From dc530e36a1fb8dfb1cf7aefea93f57ebd9e5a13c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 03:29:26 +0100
Subject: [PATCH 065/275] migration(bvn): BAlert needs explicit show value

---
 app/src/components/globals/AbstractForm.vue            |  7 ++++++-
 app/src/components/globals/CardForm.vue                |  2 +-
 app/src/components/globals/ViewSearch.vue              |  6 +++++-
 app/src/components/globals/YAlert.vue                  |  1 +
 .../components/globals/formItems/ReadOnlyAlertItem.vue |  2 +-
 app/src/views/_partials/ErrorDisplay.vue               |  2 +-
 app/src/views/_partials/ReconnectingDisplay.vue        | 10 +++++++---
 app/src/views/app/AppInstall.vue                       |  2 +-
 app/src/views/backup/BackupList.vue                    |  2 +-
 9 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index ed7581b54..10934e691 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -13,7 +13,12 @@
         <slot name="default" />
 
         <slot name="server-error" v-bind="{ errorFeedback }">
-          <BAlert v-if="errorFeedback" variant="danger" class="my-3" icon="ban">
+          <BAlert
+            :modelValue="!!errorFeedback"
+            variant="danger"
+            class="my-3"
+            icon="ban"
+          >
             <div v-html="errorFeedback" />
           </BAlert>
         </slot>
diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index 7ab7cb825..7c7128870 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -17,7 +17,7 @@
             variant="danger"
             class="my-3"
             icon="ban"
-            :show="errorFeedback !== ''"
+            :modelValue="errorFeedback !== ''"
           >
             <div v-html="errorFeedback" />
           </BAlert>
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index f808cbbe4..8a1a7cc4b 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -29,7 +29,11 @@
     </template>
 
     <template #default>
-      <BAlert v-if="items === null || filteredItems === null" variant="warning">
+      <BAlert
+        v-if="items === null || filteredItems === null"
+        :modelValue="true"
+        variant="warning"
+      >
         <slot name="alert-message">
           <YIcon iname="exclamation-triangle" />
           {{
diff --git a/app/src/components/globals/YAlert.vue b/app/src/components/globals/YAlert.vue
index 2032c42a6..7456636e4 100644
--- a/app/src/components/globals/YAlert.vue
+++ b/app/src/components/globals/YAlert.vue
@@ -2,6 +2,7 @@
   <Component
     v-bind="$attrs"
     :is="alert ? 'BAlert' : 'div'"
+    :modelValue="alert ? true : null"
     :variant="alert ? variant : null"
     :class="{ ['alert alert-' + variant]: !alert }"
     class="yuno-alert d-flex flex-column flex-md-row align-items-center"
diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index 851bfafb1..9e16dd862 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -2,7 +2,7 @@
   <BAlert
     class="d-flex flex-column flex-md-row align-items-center"
     :variant="type"
-    show
+    :modelValue="true"
   >
     <YIcon :iname="icon_" class="me-md-3 mb-md-0 mb-2" :variant="type" />
 
diff --git a/app/src/views/_partials/ErrorDisplay.vue b/app/src/views/_partials/ErrorDisplay.vue
index fd11eea02..997096ec5 100644
--- a/app/src/views/_partials/ErrorDisplay.vue
+++ b/app/src/views/_partials/ErrorDisplay.vue
@@ -23,7 +23,7 @@
 
       <p>
         <strong v-t="'api_error.error_message'" />
-        <BAlert class="mt-2" variant="danger">
+        <BAlert :modelValue="true" class="mt-2" variant="danger">
           <div v-html="error.message" />
         </BAlert>
       </p>
diff --git a/app/src/views/_partials/ReconnectingDisplay.vue b/app/src/views/_partials/ReconnectingDisplay.vue
index be8094c63..25ea97118 100644
--- a/app/src/views/_partials/ReconnectingDisplay.vue
+++ b/app/src/views/_partials/ReconnectingDisplay.vue
@@ -7,14 +7,14 @@
       <YSpinner class="mb-4" />
 
       <BAlert
-        v-if="origin"
+        :modelValue="!!origin"
         v-t="'api.reconnecting.reason.' + origin"
         :variant="origin === 'unknow' ? 'warning' : 'info'"
       />
     </template>
 
     <template v-if="status === 'failed'">
-      <BAlert variant="danger">
+      <BAlert :modelValue="true" variant="danger">
         <MarkdownItem :label="$t('api.reconnecting.failed')" />
       </BAlert>
 
@@ -29,7 +29,11 @@
     </template>
 
     <template v-if="status === 'expired'">
-      <BAlert variant="success" v-t="'api.reconnecting.session_expired'" />
+      <BAlert
+        :modelValue="true"
+        variant="success"
+        v-t="'api.reconnecting.session_expired'"
+      />
 
       <LoginView force-reload />
     </template>
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 4b8d9a976..965d758c8 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -193,7 +193,7 @@
     </template>
 
     <!-- In case of a custom url with no manifest found -->
-    <BAlert v-else-if="app === null" variant="warning">
+    <BAlert :modelValue="app === null" variant="warning">
       <YIcon iname="exclamation-triangle" />
       {{ $t('app_install_custom_no_manifest') }}
     </BAlert>
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index 4a58bae44..a1a19f454 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -14,7 +14,7 @@
       />
     </template>
 
-    <BAlert v-if="!archives" variant="warning">
+    <BAlert v-if="!archives" :modelValue="!archives" variant="warning">
       <YIcon iname="exclamation-triangle" />
       {{ $t('items_verbose_count', { items: $t('items.backups', 0) }, 0) }}
     </BAlert>

From e4ab46b10ce0ef43a09343321c9a614ad6c7939d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 20:48:04 +0100
Subject: [PATCH 066/275] chore: update yarn.lock

---
 app/yarn.lock | 1199 ++++++++++++++++++++++++++++---------------------
 1 file changed, 691 insertions(+), 508 deletions(-)

diff --git a/app/yarn.lock b/app/yarn.lock
index d0e7639ce..178d74834 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -7,127 +7,130 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
-"@babel/parser@^7.23.5":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.0.tgz#26a3d1ff49031c53a97d03b604375f028746a9ac"
-  integrity sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==
-
-"@babel/runtime@^7.21.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
-  integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
-  dependencies:
-    regenerator-runtime "^0.14.0"
-
-"@esbuild/android-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
-  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
-
-"@esbuild/android-arm@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
-  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
-
-"@esbuild/android-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
-  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
-
-"@esbuild/darwin-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
-  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
-
-"@esbuild/darwin-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
-  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
-
-"@esbuild/freebsd-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
-  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
-
-"@esbuild/freebsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
-  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
-
-"@esbuild/linux-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
-  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
-
-"@esbuild/linux-arm@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
-  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
-
-"@esbuild/linux-ia32@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
-  integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
-
-"@esbuild/linux-loong64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
-  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
-
-"@esbuild/linux-mips64el@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
-  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
-
-"@esbuild/linux-ppc64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
-  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
-
-"@esbuild/linux-riscv64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
-  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
-
-"@esbuild/linux-s390x@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
-  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
-
-"@esbuild/linux-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338"
-  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
-
-"@esbuild/netbsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
-  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
-
-"@esbuild/openbsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
-  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
-
-"@esbuild/sunos-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
-  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
-
-"@esbuild/win32-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
-  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
-
-"@esbuild/win32-ia32@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
-  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
-
-"@esbuild/win32-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
-  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
+"@antfu/utils@^0.7.6":
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.7.7.tgz#26ea493a831b4f3a85475e7157be02fb4eab51fb"
+  integrity sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==
+
+"@babel/parser@^7.23.9":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.1.tgz#1e416d3627393fab1cb5b0f2f1796a100ae9133a"
+  integrity sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==
+
+"@esbuild/aix-ppc64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f"
+  integrity sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==
+
+"@esbuild/android-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz#7ad65a36cfdb7e0d429c353e00f680d737c2aed4"
+  integrity sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==
+
+"@esbuild/android-arm@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.19.12.tgz#b0c26536f37776162ca8bde25e42040c203f2824"
+  integrity sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==
+
+"@esbuild/android-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.19.12.tgz#cb13e2211282012194d89bf3bfe7721273473b3d"
+  integrity sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==
+
+"@esbuild/darwin-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz#cbee41e988020d4b516e9d9e44dd29200996275e"
+  integrity sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==
+
+"@esbuild/darwin-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz#e37d9633246d52aecf491ee916ece709f9d5f4cd"
+  integrity sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==
+
+"@esbuild/freebsd-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz#1ee4d8b682ed363b08af74d1ea2b2b4dbba76487"
+  integrity sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==
+
+"@esbuild/freebsd-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz#37a693553d42ff77cd7126764b535fb6cc28a11c"
+  integrity sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==
+
+"@esbuild/linux-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz#be9b145985ec6c57470e0e051d887b09dddb2d4b"
+  integrity sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==
+
+"@esbuild/linux-arm@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz#207ecd982a8db95f7b5279207d0ff2331acf5eef"
+  integrity sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==
+
+"@esbuild/linux-ia32@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz#d0d86b5ca1562523dc284a6723293a52d5860601"
+  integrity sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==
+
+"@esbuild/linux-loong64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz#9a37f87fec4b8408e682b528391fa22afd952299"
+  integrity sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==
+
+"@esbuild/linux-mips64el@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz#4ddebd4e6eeba20b509d8e74c8e30d8ace0b89ec"
+  integrity sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==
+
+"@esbuild/linux-ppc64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz#adb67dadb73656849f63cd522f5ecb351dd8dee8"
+  integrity sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==
+
+"@esbuild/linux-riscv64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz#11bc0698bf0a2abf8727f1c7ace2112612c15adf"
+  integrity sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==
+
+"@esbuild/linux-s390x@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz#e86fb8ffba7c5c92ba91fc3b27ed5a70196c3cc8"
+  integrity sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==
+
+"@esbuild/linux-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz#5f37cfdc705aea687dfe5dfbec086a05acfe9c78"
+  integrity sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==
+
+"@esbuild/netbsd-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz#29da566a75324e0d0dd7e47519ba2f7ef168657b"
+  integrity sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==
+
+"@esbuild/openbsd-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz#306c0acbdb5a99c95be98bdd1d47c916e7dc3ff0"
+  integrity sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==
+
+"@esbuild/sunos-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz#0933eaab9af8b9b2c930236f62aae3fc593faf30"
+  integrity sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==
+
+"@esbuild/win32-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz#773bdbaa1971b36db2f6560088639ccd1e6773ae"
+  integrity sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==
+
+"@esbuild/win32-ia32@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz#000516cad06354cc84a73f0943a4aa690ef6fd67"
+  integrity sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==
+
+"@esbuild/win32-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz#c57c8afbb4054a3ab8317591a0b7320360b444ae"
+  integrity sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==
 
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
@@ -161,15 +164,44 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
-"@fontsource/fira-code@^4.5.13":
-  version "4.5.13"
-  resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-4.5.13.tgz#7ddd62472f7e6002acf9371815090eecf5d28f8c"
-  integrity sha512-T1IG6/2AXSwEKwlrEm3kyIL3RQTMblPyj68HgnBGl0IBGFxgS5LZ7StRdDo/QimJ4Tz6FQGHuy1Y/ShNxaUefA==
+"@floating-ui/core@^1.0.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
+  integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
+  dependencies:
+    "@floating-ui/utils" "^0.2.1"
+
+"@floating-ui/dom@^1.6.1":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
+  integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
 
-"@fontsource/firago@^4.5.3":
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/@fontsource/firago/-/firago-4.5.3.tgz#ba0c15105b20e161b7a31675697865851fc6175a"
-  integrity sha512-Kn6FBi6MGNPYwzVKUtgyWGUj0zV18El263ieZi8A7TM2LPKsfzON5ENeKfjyTKfYErkjg9ktwiNP3SLsEOSBNQ==
+"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
+
+"@floating-ui/vue@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-1.0.6.tgz#31860a12f1135d19554c232d99c5bab631c5c576"
+  integrity sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==
+  dependencies:
+    "@floating-ui/dom" "^1.6.1"
+    "@floating-ui/utils" "^0.2.1"
+    vue-demi ">=0.13.0"
+
+"@fontsource/fira-code@^5.0.17":
+  version "5.0.17"
+  resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-5.0.17.tgz#7b0c402548190ea55a613fe19b879a5f4ddaf8ab"
+  integrity sha512-Ai0qE5PWvm6ETny7ToAitwdhYtO3YrNIHoa0arPquXxpnlRSB+OsJfhKnfgDKm6WMmCnxKOfsIslbVw5PqQvvQ==
+
+"@fontsource/firago@^5.0.7":
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/@fontsource/firago/-/firago-5.0.7.tgz#24dfb34a1a1744001bc1d9c093e5233a1c84f12f"
+  integrity sha512-xuTYVOBSwev2IVp2dqgrnq3gABUnehn91Ii+R1TM5Jpvr86gCPrMxmqfL9fgpUb5r12u7U1LBVC20GypIy8jeg==
 
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
@@ -190,6 +222,32 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
   integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
 
+"@intlify/core-base@9.10.2":
+  version "9.10.2"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.10.2.tgz#e7f8857f8011184e4afbdcfae7dbd85c50ba5271"
+  integrity sha512-HGStVnKobsJL0DoYIyRCGXBH63DMQqEZxDUGrkNI05FuTcruYUtOAxyL3zoAZu/uDGO6mcUvm3VXBaHG2GdZCg==
+  dependencies:
+    "@intlify/message-compiler" "9.10.2"
+    "@intlify/shared" "9.10.2"
+
+"@intlify/message-compiler@9.10.2":
+  version "9.10.2"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.10.2.tgz#c44cbb915bdd0d62780a38595a84006c781f717a"
+  integrity sha512-ntY/kfBwQRtX5Zh6wL8cSATujPzWW2ZQd1QwKyWwAy5fMqJyyixHMeovN4fmEyCqSu+hFfYOE63nU94evsy4YA==
+  dependencies:
+    "@intlify/shared" "9.10.2"
+    source-map-js "^1.0.2"
+
+"@intlify/shared@9.10.2":
+  version "9.10.2"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.10.2.tgz#693300ea033868cbe4086b832170612f002e24a9"
+  integrity sha512-ttHCAJkRy7R5W2S9RVnN9KYQYPIpV2+GiS79T4EE37nrPyH6/1SrOh3bmdCRC1T3ocL8qCDx7x2lBJ0xaITU7Q==
+
+"@jridgewell/sourcemap-codec@^1.4.15":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -198,12 +256,12 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@2.0.5":
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
-"@nodelib/fs.walk@^1.2.8":
+"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
@@ -211,47 +269,236 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@nuxt/opencollective@^0.3.2":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@nuxt/opencollective/-/opencollective-0.3.3.tgz#80ff0eb8f6fca1d0ed5a089b9688f41bff2dd8ab"
-  integrity sha512-6IKCd+gP0HliixqZT/p8nW3tucD6Sv/u/eR2A9X4rxT/6hXlMzA4GZQzq4d2qnBAwSwGpmKyzkyTjNjrhaA25A==
-  dependencies:
-    chalk "^4.1.0"
-    consola "^2.15.0"
-    node-fetch "^2.6.7"
-
 "@pkgr/core@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
   integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
 
+"@rollup/pluginutils@^5.0.4":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
+  integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
+"@rollup/rollup-android-arm-eabi@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz#b98786c1304b4ff8db3a873180b778649b5dff2b"
+  integrity sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==
+
+"@rollup/rollup-android-arm64@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz#8833679af11172b1bf1ab7cb3bad84df4caf0c9e"
+  integrity sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==
+
+"@rollup/rollup-darwin-arm64@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz#ef02d73e0a95d406e0eb4fd61a53d5d17775659b"
+  integrity sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==
+
+"@rollup/rollup-darwin-x64@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz#3ce5b9bcf92b3341a5c1c58a3e6bcce0ea9e7455"
+  integrity sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz#3d3d2c018bdd8e037c6bfedd52acfff1c97e4be4"
+  integrity sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==
+
+"@rollup/rollup-linux-arm64-gnu@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz#5fc8cc978ff396eaa136d7bfe05b5b9138064143"
+  integrity sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==
+
+"@rollup/rollup-linux-arm64-musl@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz#f2ae7d7bed416ffa26d6b948ac5772b520700eef"
+  integrity sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==
+
+"@rollup/rollup-linux-riscv64-gnu@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz#303d57a328ee9a50c85385936f31cf62306d30b6"
+  integrity sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==
+
+"@rollup/rollup-linux-x64-gnu@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz#f672f6508f090fc73f08ba40ff76c20b57424778"
+  integrity sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==
+
+"@rollup/rollup-linux-x64-musl@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz#d2f34b1b157f3e7f13925bca3288192a66755a89"
+  integrity sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==
+
+"@rollup/rollup-win32-arm64-msvc@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz#8ffecc980ae4d9899eb2f9c4ae471a8d58d2da6b"
+  integrity sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==
+
+"@rollup/rollup-win32-ia32-msvc@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz#a7505884f415662e088365b9218b2b03a88fc6f2"
+  integrity sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==
+
+"@rollup/rollup-win32-x64-msvc@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz#6abd79db7ff8d01a58865ba20a63cfd23d9e2a10"
+  integrity sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==
+
+"@types/estree@1.0.5", "@types/estree@^1.0.0":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
+  integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
+
+"@types/showdown@^2.0.1":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/showdown/-/showdown-2.0.6.tgz#3d7affd5f971b4a17783ec2b23b4ad3b97477b7e"
+  integrity sha512-pTvD/0CIeqe4x23+YJWlX2gArHa8G0J0Oh6GKaVXV7TAeickpkkZiNOgFcFcmLQ5lB/K0qBJL1FtRYltBfbGCQ==
+
+"@types/web-bluetooth@^0.0.20":
+  version "0.0.20"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
+  integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
+
 "@ungap/structured-clone@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
-"@vitejs/plugin-vue2@^2.2.0":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue2/-/plugin-vue2-2.3.1.tgz#53078d3d9d50d9863f1fbb1c1ef7791a5fcd4948"
-  integrity sha512-/ksaaz2SRLN11JQhLdEUhDzOn909WEk99q9t9w+N12GjQCljzv7GyvAbD/p20aBUjHkvpGOoQ+FCOkG+mjDF4A==
+"@vitejs/plugin-vue@^5.0.4":
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz#508d6a0f2440f86945835d903fcc0d95d1bb8a37"
+  integrity sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==
 
-"@vue/compiler-sfc@2.7.16":
-  version "2.7.16"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz#ff81711a0fac9c68683d8bb00b63f857de77dc83"
-  integrity sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==
+"@vue/compiler-core@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.21.tgz#868b7085378fc24e58c9aed14c8d62110a62be1a"
+  integrity sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==
   dependencies:
-    "@babel/parser" "^7.23.5"
-    postcss "^8.4.14"
-    source-map "^0.6.1"
-  optionalDependencies:
-    prettier "^1.18.2 || ^2.0.0"
+    "@babel/parser" "^7.23.9"
+    "@vue/shared" "3.4.21"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.0.2"
+
+"@vue/compiler-dom@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz#0077c355e2008207283a5a87d510330d22546803"
+  integrity sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==
+  dependencies:
+    "@vue/compiler-core" "3.4.21"
+    "@vue/shared" "3.4.21"
+
+"@vue/compiler-sfc@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz#4af920dc31ab99e1ff5d152b5fe0ad12181145b2"
+  integrity sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==
+  dependencies:
+    "@babel/parser" "^7.23.9"
+    "@vue/compiler-core" "3.4.21"
+    "@vue/compiler-dom" "3.4.21"
+    "@vue/compiler-ssr" "3.4.21"
+    "@vue/shared" "3.4.21"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.7"
+    postcss "^8.4.35"
+    source-map-js "^1.0.2"
+
+"@vue/compiler-ssr@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz#b84ae64fb9c265df21fc67f7624587673d324fef"
+  integrity sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==
+  dependencies:
+    "@vue/compiler-dom" "3.4.21"
+    "@vue/shared" "3.4.21"
+
+"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.5.1":
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.1.tgz#7c14346383751d9f6ad4bea0963245b30220ef83"
+  integrity sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==
+
+"@vue/reactivity@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.21.tgz#affd3415115b8ebf4927c8d2a0d6a24bccfa9f02"
+  integrity sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==
+  dependencies:
+    "@vue/shared" "3.4.21"
+
+"@vue/runtime-core@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.21.tgz#3749c3f024a64c4c27ecd75aea4ca35634db0062"
+  integrity sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==
+  dependencies:
+    "@vue/reactivity" "3.4.21"
+    "@vue/shared" "3.4.21"
+
+"@vue/runtime-dom@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz#91f867ef64eff232cac45095ab28ebc93ac74588"
+  integrity sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==
+  dependencies:
+    "@vue/runtime-core" "3.4.21"
+    "@vue/shared" "3.4.21"
+    csstype "^3.1.3"
+
+"@vue/server-renderer@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.21.tgz#150751579d26661ee3ed26a28604667fa4222a97"
+  integrity sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==
+  dependencies:
+    "@vue/compiler-ssr" "3.4.21"
+    "@vue/shared" "3.4.21"
+
+"@vue/shared@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.21.tgz#de526a9059d0a599f0b429af7037cd0c3ed7d5a1"
+  integrity sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==
+
+"@vuelidate/core@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.3.tgz#40468c5ed15b72bde880a026b0699c2f0f1ecede"
+  integrity sha512-AN6l7KF7+mEfyWG0doT96z+47ljwPpZfi9/JrNMkOGLFv27XVZvKzRLXlmDPQjPl/wOB1GNnHuc54jlCLRNqGA==
+  dependencies:
+    vue-demi "^0.13.11"
+
+"@vuelidate/validators@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.4.tgz#0a88a7b2b18f15fd9c384095593f369a6f7384e9"
+  integrity sha512-odTxtUZ2JpwwiQ10t0QWYJkkYrfd0SyFYhdHH44QQ1jDatlZgTh/KRzrWVmn/ib9Gq7H4hFD4e8ahoo5YlUlDw==
+  dependencies:
+    vue-demi "^0.13.11"
+
+"@vueuse/core@^10.7.2":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.9.0.tgz#7d779a95cf0189de176fee63cee4ba44b3c85d64"
+  integrity sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.20"
+    "@vueuse/metadata" "10.9.0"
+    "@vueuse/shared" "10.9.0"
+    vue-demi ">=0.14.7"
+
+"@vueuse/metadata@10.9.0":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.9.0.tgz#769a1a9db65daac15cf98084cbf7819ed3758620"
+  integrity sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==
+
+"@vueuse/shared@10.9.0":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.9.0.tgz#13af2a348de15d07b7be2fd0c7fc9853a69d8fe0"
+  integrity sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==
+  dependencies:
+    vue-demi ">=0.14.7"
 
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.9.0:
+acorn@^8.11.3, acorn@^8.9.0:
   version "8.11.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
   integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
@@ -266,23 +513,11 @@ ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ansi-regex@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.1.tgz#164daac87ab2d6f6db3a29875e2d1766582dabed"
-  integrity sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==
-
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
-ansi-styles@^3.2.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
 ansi-styles@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
@@ -309,30 +544,27 @@ balanced-match@^1.0.0:
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
 binary-extensions@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
-  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
 boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
-bootstrap-vue@^2.22.0:
-  version "2.23.1"
-  resolved "https://registry.yarnpkg.com/bootstrap-vue/-/bootstrap-vue-2.23.1.tgz#8f866f7cda27eb0e7e13a0bea8d55d8fc7a82199"
-  integrity sha512-SEWkG4LzmMuWjQdSYmAQk1G/oOKm37dtNfjB5kxq0YafnL2W6qUAmeDTcIZVbPiQd2OQlIkWOMPBRGySk/zGsg==
+bootstrap-vue-next@^0.16.6:
+  version "0.16.6"
+  resolved "https://registry.yarnpkg.com/bootstrap-vue-next/-/bootstrap-vue-next-0.16.6.tgz#bd35ad1ed64692badd8c7093fd238b5d6fc65ab0"
+  integrity sha512-CDjq3KgIOALJO/Zvmcgxqavv1NznFROUl7yWHAmp4T4R8IRJLfyMj1zizjw2OzCvQ+uJ9PZ28T1Cx7xq8+m2xg==
   dependencies:
-    "@nuxt/opencollective" "^0.3.2"
-    bootstrap "^4.6.1"
-    popper.js "^1.16.1"
-    portal-vue "^2.1.7"
-    vue-functional-data-merge "^3.1.0"
+    "@floating-ui/vue" "^1.0.6"
+    "@vueuse/core" "^10.7.2"
 
-bootstrap@^4.6.0, bootstrap@^4.6.1:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.2.tgz#8e0cd61611728a5bf65a3a2b8d6ff6c77d5d7479"
-  integrity sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==
+bootstrap@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.3.tgz#de35e1a765c897ac940021900fcbb831602bac38"
+  integrity sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -342,7 +574,14 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@~3.0.2:
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
+braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -354,12 +593,7 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camelcase@^5.0.0:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
-  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
-
-chalk@^4.0.0, chalk@^4.1.0:
+chalk@^4.0.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -367,7 +601,7 @@ chalk@^4.0.0, chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-"chokidar@>=3.0.0 <4.0.0":
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3, chokidar@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -382,22 +616,6 @@ chalk@^4.0.0, chalk@^4.1.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-cliui@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
-  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
-  dependencies:
-    string-width "^3.1.0"
-    strip-ansi "^5.2.0"
-    wrap-ansi "^5.1.0"
-
-color-convert@^1.9.0:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -405,26 +623,21 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
-
 color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+commander@^9.0.0:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
+  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
-consola@^2.15.0:
-  version "2.15.3"
-  resolved "https://registry.yarnpkg.com/consola/-/consola-2.15.3.tgz#2e11f98d6a4be71ff72e0bdf07bd23e12cb61550"
-  integrity sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==
-
 cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -439,17 +652,15 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-csstype@^3.1.0:
+csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-date-fns@^2.29.3:
-  version "2.30.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
-  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
-  dependencies:
-    "@babel/runtime" "^7.21.0"
+date-fns@^3.3.1:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
+  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
 
 debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
@@ -458,11 +669,6 @@ debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   dependencies:
     ms "2.1.2"
 
-decamelize@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
-  integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
-
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
@@ -475,38 +681,39 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
-  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
+entities@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
-esbuild@^0.18.10:
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
-  integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
+esbuild@^0.19.3:
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.12.tgz#dc82ee5dc79e82f5a5c3b4323a2a641827db3e04"
+  integrity sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==
   optionalDependencies:
-    "@esbuild/android-arm" "0.18.20"
-    "@esbuild/android-arm64" "0.18.20"
-    "@esbuild/android-x64" "0.18.20"
-    "@esbuild/darwin-arm64" "0.18.20"
-    "@esbuild/darwin-x64" "0.18.20"
-    "@esbuild/freebsd-arm64" "0.18.20"
-    "@esbuild/freebsd-x64" "0.18.20"
-    "@esbuild/linux-arm" "0.18.20"
-    "@esbuild/linux-arm64" "0.18.20"
-    "@esbuild/linux-ia32" "0.18.20"
-    "@esbuild/linux-loong64" "0.18.20"
-    "@esbuild/linux-mips64el" "0.18.20"
-    "@esbuild/linux-ppc64" "0.18.20"
-    "@esbuild/linux-riscv64" "0.18.20"
-    "@esbuild/linux-s390x" "0.18.20"
-    "@esbuild/linux-x64" "0.18.20"
-    "@esbuild/netbsd-x64" "0.18.20"
-    "@esbuild/openbsd-x64" "0.18.20"
-    "@esbuild/sunos-x64" "0.18.20"
-    "@esbuild/win32-arm64" "0.18.20"
-    "@esbuild/win32-ia32" "0.18.20"
-    "@esbuild/win32-x64" "0.18.20"
+    "@esbuild/aix-ppc64" "0.19.12"
+    "@esbuild/android-arm" "0.19.12"
+    "@esbuild/android-arm64" "0.19.12"
+    "@esbuild/android-x64" "0.19.12"
+    "@esbuild/darwin-arm64" "0.19.12"
+    "@esbuild/darwin-x64" "0.19.12"
+    "@esbuild/freebsd-arm64" "0.19.12"
+    "@esbuild/freebsd-x64" "0.19.12"
+    "@esbuild/linux-arm" "0.19.12"
+    "@esbuild/linux-arm64" "0.19.12"
+    "@esbuild/linux-ia32" "0.19.12"
+    "@esbuild/linux-loong64" "0.19.12"
+    "@esbuild/linux-mips64el" "0.19.12"
+    "@esbuild/linux-ppc64" "0.19.12"
+    "@esbuild/linux-riscv64" "0.19.12"
+    "@esbuild/linux-s390x" "0.19.12"
+    "@esbuild/linux-x64" "0.19.12"
+    "@esbuild/netbsd-x64" "0.19.12"
+    "@esbuild/openbsd-x64" "0.19.12"
+    "@esbuild/sunos-x64" "0.19.12"
+    "@esbuild/win32-arm64" "0.19.12"
+    "@esbuild/win32-ia32" "0.19.12"
+    "@esbuild/win32-x64" "0.19.12"
 
 escape-string-regexp@^4.0.0:
   version "4.0.0"
@@ -526,10 +733,10 @@ eslint-plugin-prettier@^5.1.3:
     prettier-linter-helpers "^1.0.0"
     synckit "^0.8.6"
 
-eslint-plugin-vue@^9.10.0:
-  version "9.22.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.22.0.tgz#e8a625adb0b6ce3b65635dd74fec8345146f8e26"
-  integrity sha512-7wCXv5zuVnBtZE/74z4yZ0CM8AjH6bk4MQGm7hZjUC2DBppKU5ioeOk5LGSg/s9a1ZJnIsdPLJpXnu1Rc+cVHg==
+eslint-plugin-vue@^9.22.0:
+  version "9.23.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.23.0.tgz#1354a33b0cd21e0cb373557ff73c5d7a6698fbcd"
+  integrity sha512-Bqd/b7hGYGrlV+wP/g77tjyFmp81lh5TMw0be9093X02SyelxRRfCI6/IsGq/J7Um0YwB9s0Ry0wlFyjPdmtUw==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
     natural-compare "^1.4.0"
@@ -552,7 +759,7 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint@^8.36.0:
+eslint@^8.57.0:
   version "8.57.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
   integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
@@ -624,6 +831,11 @@ estraverse@^5.1.0, estraverse@^5.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -639,6 +851,17 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
   integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
 
+fast-glob@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -670,13 +893,6 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-find-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
-  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
-  dependencies:
-    locate-path "^3.0.0"
-
 find-up@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
@@ -709,21 +925,28 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@~2.3.2:
+fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
-get-caller-file@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
-  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
 get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
   integrity sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==
 
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
@@ -731,13 +954,6 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
-glob-parent@~5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
-  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
-  dependencies:
-    is-glob "^4.0.1"
-
 glob@^7.1.3:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
@@ -767,6 +983,13 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+hasown@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
 ignore@^5.2.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
@@ -810,16 +1033,18 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
+is-core-module@^2.13.0:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
+  integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
+  dependencies:
+    hasown "^2.0.0"
+
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-  integrity sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==
-
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
@@ -879,13 +1104,10 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-locate-path@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
-  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
-  dependencies:
-    p-locate "^3.0.0"
-    path-exists "^3.0.0"
+local-pkg@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.4.3.tgz#0ff361ab3ae7f1c19113d9bb97b98b905dbc4963"
+  integrity sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==
 
 locate-path@^6.0.0:
   version "6.0.0"
@@ -911,6 +1133,26 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+magic-string@^0.30.3, magic-string@^0.30.7:
+  version "0.30.8"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.8.tgz#14e8624246d2bedba70d5462aa99ac9681844613"
+  integrity sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
+merge2@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
 minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -918,6 +1160,13 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^9.0.3:
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
+  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -933,13 +1182,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-node-fetch@^2.6.7:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
-  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
-  dependencies:
-    whatwg-url "^5.0.0"
-
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -971,13 +1213,6 @@ optionator@^0.9.3:
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
 
-p-limit@^2.0.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
-  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
-  dependencies:
-    p-try "^2.0.0"
-
 p-limit@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
@@ -985,13 +1220,6 @@ p-limit@^3.0.2:
   dependencies:
     yocto-queue "^0.1.0"
 
-p-locate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
-  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
-  dependencies:
-    p-limit "^2.0.0"
-
 p-locate@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
@@ -999,11 +1227,6 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
-p-try@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
-  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
-
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -1011,11 +1234,6 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-path-exists@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
-  integrity sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==
-
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -1031,42 +1249,37 @@ path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-popper.js@^1.16.0, popper.js@^1.16.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
-portal-vue@^2.1.7:
-  version "2.1.7"
-  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.7.tgz#ea08069b25b640ca08a5b86f67c612f15f4e4ad4"
-  integrity sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==
-
 postcss-selector-parser@^6.0.15:
-  version "6.0.15"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535"
-  integrity sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==
+  version "6.0.16"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz#3b88b9f5c5abd989ef4e2fc9ec8eedd34b20fb04"
+  integrity sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss@^8.4.14, postcss@^8.4.27:
-  version "8.4.35"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7"
-  integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==
+postcss@^8.4.35:
+  version "8.4.37"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.37.tgz#4505f992cd0c20e03d25f13b31901640b2db731a"
+  integrity sha512-7iB/v/r7Woof0glKLH8b1SPHrsX7uhdO+Geb41QpF/+mWZHU3uxxSlN+UXGVit1PawOYDToO+AbZzhBzWRDwbQ==
   dependencies:
     nanoid "^3.3.7"
     picocolors "^1.0.0"
-    source-map-js "^1.0.2"
+    source-map-js "^1.2.0"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -1080,11 +1293,6 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-"prettier@^1.18.2 || ^2.0.0":
-  version "2.8.8"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
-  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
-
 prettier@^3.2.5:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
@@ -1107,26 +1315,20 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-regenerator-runtime@^0.14.0:
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
-  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
-
-require-directory@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
-  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
-
-require-main-filename@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
-  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
-
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve@^1.22.4:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
@@ -1139,11 +1341,26 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rollup@^3.27.1:
-  version "3.29.4"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"
-  integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==
+rollup@^4.2.0:
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.13.0.tgz#dd2ae144b4cdc2ea25420477f68d4937a721237a"
+  integrity sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==
+  dependencies:
+    "@types/estree" "1.0.5"
   optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.13.0"
+    "@rollup/rollup-android-arm64" "4.13.0"
+    "@rollup/rollup-darwin-arm64" "4.13.0"
+    "@rollup/rollup-darwin-x64" "4.13.0"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.13.0"
+    "@rollup/rollup-linux-arm64-gnu" "4.13.0"
+    "@rollup/rollup-linux-arm64-musl" "4.13.0"
+    "@rollup/rollup-linux-riscv64-gnu" "4.13.0"
+    "@rollup/rollup-linux-x64-gnu" "4.13.0"
+    "@rollup/rollup-linux-x64-musl" "4.13.0"
+    "@rollup/rollup-win32-arm64-msvc" "4.13.0"
+    "@rollup/rollup-win32-ia32-msvc" "4.13.0"
+    "@rollup/rollup-win32-x64-msvc" "4.13.0"
     fsevents "~2.3.2"
 
 run-parallel@^1.1.9:
@@ -1153,10 +1370,10 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-sass@^1.60.0:
-  version "1.71.1"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.71.1.tgz#dfb09c63ce63f89353777bbd4a88c0a38386ee54"
-  integrity sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==
+sass@^1.71.1:
+  version "1.72.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.72.0.tgz#5b9978943fcfb32b25a6a5acb102fc9dabbbf41c"
+  integrity sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -1169,11 +1386,6 @@ semver@^7.3.6, semver@^7.6.0:
   dependencies:
     lru-cache "^6.0.0"
 
-set-blocking@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
-  integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -1186,12 +1398,12 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-showdown@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/showdown/-/showdown-1.9.1.tgz#134e148e75cd4623e09c21b0511977d79b5ad0ef"
-  integrity sha512-9cGuS382HcvExtf5AHk7Cb4pAeQQ+h0eTr33V1mu+crYWV4KvWAw6el92bDrqGEk5d46Ai/fhbEUwqJ/mTCNEA==
+showdown@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/showdown/-/showdown-2.1.0.tgz#1251f5ed8f773f0c0c7bfc8e6fd23581f9e545c5"
+  integrity sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==
   dependencies:
-    yargs "^14.2"
+    commander "^9.0.0"
 
 simple-evaluate@^1.4.6:
   version "1.4.6"
@@ -1200,31 +1412,10 @@ simple-evaluate@^1.4.6:
   dependencies:
     get-value "^2.0.6"
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
-  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
-
-source-map@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
-string-width@^3.0.0, string-width@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
-  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
-  dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
-
-strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
-  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
-  dependencies:
-    ansi-regex "^4.1.0"
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
 strip-ansi@^6.0.1:
   version "6.0.1"
@@ -1245,6 +1436,11 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
 synckit@^0.8.6:
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.8.tgz#fe7fe446518e3d3d49f5e429f443cf08b6edfcd7"
@@ -1265,11 +1461,6 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-tr46@~0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
-  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
-
 tslib@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
@@ -1287,6 +1478,32 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
+unplugin-vue-components@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/unplugin-vue-components/-/unplugin-vue-components-0.26.0.tgz#6d79caa770039a1eb3d7c09fdd28778ea20afef3"
+  integrity sha512-s7IdPDlnOvPamjunVxw8kNgKNK8A5KM1YpK5j/p97jEKTjlPNrA0nZBiSfAKKlK1gWZuyWXlKL5dk3EDw874LQ==
+  dependencies:
+    "@antfu/utils" "^0.7.6"
+    "@rollup/pluginutils" "^5.0.4"
+    chokidar "^3.5.3"
+    debug "^4.3.4"
+    fast-glob "^3.3.1"
+    local-pkg "^0.4.3"
+    magic-string "^0.30.3"
+    minimatch "^9.0.3"
+    resolve "^1.22.4"
+    unplugin "^1.4.0"
+
+unplugin@^1.4.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.10.0.tgz#9cb8140f61e3fbcf27c7c38d305e9d62d5dbbf0b"
+  integrity sha512-CuZtvvO8ua2Wl+9q2jEaqH6m3DoQ38N7pvBYQbbaeNlWGvK2l6GHiKi29aIHDPoSxdUzQ7Unevf1/ugil5X6Pg==
+  dependencies:
+    acorn "^8.11.3"
+    chokidar "^3.6.0"
+    webpack-sources "^3.2.3"
+    webpack-virtual-modules "^0.6.1"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -1299,16 +1516,26 @@ util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-vite@^4.2.1:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.2.tgz#d6ea8610e099851dad8c7371599969e0f8b97e82"
-  integrity sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==
+vite@^5.1.4:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.1.6.tgz#706dae5fab9e97f57578469eef1405fc483943e4"
+  integrity sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==
   dependencies:
-    esbuild "^0.18.10"
-    postcss "^8.4.27"
-    rollup "^3.27.1"
+    esbuild "^0.19.3"
+    postcss "^8.4.35"
+    rollup "^4.2.0"
   optionalDependencies:
-    fsevents "~2.3.2"
+    fsevents "~2.3.3"
+
+vue-demi@>=0.13.0, vue-demi@>=0.14.7:
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2"
+  integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
+
+vue-demi@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
 
 vue-eslint-parser@^9.4.2:
   version "9.4.2"
@@ -1323,63 +1550,58 @@ vue-eslint-parser@^9.4.2:
     lodash "^4.17.21"
     semver "^7.3.6"
 
-vue-functional-data-merge@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz#08a7797583b7f35680587f8a1d51d729aa1dc657"
-  integrity sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA==
-
-vue-i18n@^8.28.2:
-  version "8.28.2"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.28.2.tgz#913558066e274395c0a9f40b2f3393d5c2636840"
-  integrity sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA==
-
-vue-router@^3.6.5:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"
-  integrity sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==
-
-vue-showdown@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/vue-showdown/-/vue-showdown-2.4.1.tgz#7cd94597dc1f9ae1286f8a8aab04abfa69b522aa"
-  integrity sha512-bjIadKGnP6XrX41gWL/lKl+7D3t22XXAIPZji/wt0sK32hEK/ejALfN1BSRWcs7oEe+EFOsJG9KRoC+B5HDmnQ==
+vue-i18n@^9.10.1:
+  version "9.10.2"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.10.2.tgz#6f4b5d76bce649f1e18bb9b7767b72962b3e30a3"
+  integrity sha512-ECJ8RIFd+3c1d3m1pctQ6ywG5Yj8Efy1oYoAKQ9neRdkLbuKLVeW4gaY5HPkD/9ssf1pOnUrmIFjx2/gkGxmEw==
   dependencies:
-    showdown "^1.9.0"
+    "@intlify/core-base" "9.10.2"
+    "@intlify/shared" "9.10.2"
+    "@vue/devtools-api" "^6.5.0"
 
-vue@^2.7.14:
-  version "2.7.16"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"
-  integrity sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==
+vue-router@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.3.0.tgz#d5913f27bf68a0a178ee798c3c88be471811a235"
+  integrity sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==
   dependencies:
-    "@vue/compiler-sfc" "2.7.16"
-    csstype "^3.1.0"
+    "@vue/devtools-api" "^6.5.1"
 
-vuelidate@^0.7.7:
-  version "0.7.7"
-  resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.7.7.tgz#5df3930a63ddecf56fde7bdacea9dbaf0c9bf899"
-  integrity sha512-pT/U2lDI67wkIqI4tum7cMSIfGcAMfB+Phtqh2ttdXURwvHRBJEAQ0tVbUsW9Upg83Q5QH59bnCoXI7A9JDGnA==
-
-vuex@^3.6.2:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
-  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
+vue-showdown@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/vue-showdown/-/vue-showdown-4.2.0.tgz#6da563e4d77b9b23f1bdb4905acec09061975442"
+  integrity sha512-2/daUw8TsMFCAb+6yRC87eM4U/B/vp/oCWPbSlUSNbttKitIiQ7NCDRVzhjPmNVIzzToEBnQNonZEE5ZJyTzIg==
+  dependencies:
+    "@types/showdown" "^2.0.1"
+    showdown "^2.1.0"
+    vue "^3.3.4"
 
-webidl-conversions@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
-  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
+vue@^3.3.4, vue@^3.4.21:
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.21.tgz#69ec30e267d358ee3a0ce16612ba89e00aaeb731"
+  integrity sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==
+  dependencies:
+    "@vue/compiler-dom" "3.4.21"
+    "@vue/compiler-sfc" "3.4.21"
+    "@vue/runtime-dom" "3.4.21"
+    "@vue/server-renderer" "3.4.21"
+    "@vue/shared" "3.4.21"
 
-whatwg-url@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
-  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
+vuex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.1.0.tgz#aa1b3ea5c7385812b074c86faeeec2217872e36c"
+  integrity sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==
   dependencies:
-    tr46 "~0.0.3"
-    webidl-conversions "^3.0.0"
+    "@vue/devtools-api" "^6.0.0-beta.11"
 
-which-module@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.1.tgz#776b1fe35d90aebe99e8ac15eb24093389a4a409"
-  integrity sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==
+webpack-sources@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
+  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
+
+webpack-virtual-modules@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz#ac6fdb9c5adb8caecd82ec241c9631b7a3681b6f"
+  integrity sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==
 
 which@^2.0.1:
   version "2.0.2"
@@ -1388,15 +1610,6 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-wrap-ansi@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
-  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
-  dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^3.0.0"
-    strip-ansi "^5.0.0"
-
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -1407,41 +1620,11 @@ xml-name-validator@^4.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
   integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
 
-y18n@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
-  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
-
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yargs-parser@^15.0.1:
-  version "15.0.3"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.3.tgz#316e263d5febe8b38eef61ac092b33dfcc9b1115"
-  integrity sha512-/MVEVjTXy/cGAjdtQf8dW3V9b97bPN7rNn8ETj6BmAQL7ibC7O1Q9SPJbGjgh3SlwoBNXMzj/ZGIj8mBgl12YA==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
-yargs@^14.2:
-  version "14.2.3"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.3.tgz#1a1c3edced1afb2a2fea33604bc6d1d8d688a414"
-  integrity sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==
-  dependencies:
-    cliui "^5.0.0"
-    decamelize "^1.2.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^15.0.1"
-
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"

From c28d6ddeab61a851dc563321a68f6b0ce0c1abd8 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 17 May 2024 16:39:10 +0200
Subject: [PATCH 067/275] rename js files to ts

---
 app/src/api/{api.js => api.ts}                                    | 0
 app/src/api/{errors.js => errors.ts}                              | 0
 app/src/api/{handlers.js => handlers.ts}                          | 0
 app/src/api/{index.js => index.ts}                                | 0
 app/src/composables/{useAutoModal.js => useAutoModal.ts}          | 0
 app/src/helpers/{commons.js => commons.ts}                        | 0
 app/src/helpers/data/{tree.js => tree.ts}                         | 0
 app/src/helpers/filters/{date.js => date.ts}                      | 0
 app/src/helpers/filters/{human.js => human.ts}                    | 0
 .../validators/{customValidators.js => customValidators.ts}       | 0
 app/src/helpers/validators/{index.js => index.ts}                 | 0
 app/src/helpers/{yunohostArguments.js => yunohostArguments.ts}    | 0
 app/src/i18n/{helpers.js => helpers.ts}                           | 0
 app/src/i18n/{index.js => index.ts}                               | 0
 app/src/i18n/{supportedLocales.js => supportedLocales.ts}         | 0
 app/src/{main.js => main.ts}                                      | 0
 app/src/router/{index.js => index.ts}                             | 0
 app/src/router/{routes.js => routes.ts}                           | 0
 app/src/store/{data.js => data.ts}                                | 0
 app/src/store/{index.js => index.ts}                              | 0
 app/src/store/{info.js => info.ts}                                | 0
 app/src/store/{settings.js => settings.ts}                        | 0
 app/src/views/_partials/{index.js => index.ts}                    | 0
 23 files changed, 0 insertions(+), 0 deletions(-)
 rename app/src/api/{api.js => api.ts} (100%)
 rename app/src/api/{errors.js => errors.ts} (100%)
 rename app/src/api/{handlers.js => handlers.ts} (100%)
 rename app/src/api/{index.js => index.ts} (100%)
 rename app/src/composables/{useAutoModal.js => useAutoModal.ts} (100%)
 rename app/src/helpers/{commons.js => commons.ts} (100%)
 rename app/src/helpers/data/{tree.js => tree.ts} (100%)
 rename app/src/helpers/filters/{date.js => date.ts} (100%)
 rename app/src/helpers/filters/{human.js => human.ts} (100%)
 rename app/src/helpers/validators/{customValidators.js => customValidators.ts} (100%)
 rename app/src/helpers/validators/{index.js => index.ts} (100%)
 rename app/src/helpers/{yunohostArguments.js => yunohostArguments.ts} (100%)
 rename app/src/i18n/{helpers.js => helpers.ts} (100%)
 rename app/src/i18n/{index.js => index.ts} (100%)
 rename app/src/i18n/{supportedLocales.js => supportedLocales.ts} (100%)
 rename app/src/{main.js => main.ts} (100%)
 rename app/src/router/{index.js => index.ts} (100%)
 rename app/src/router/{routes.js => routes.ts} (100%)
 rename app/src/store/{data.js => data.ts} (100%)
 rename app/src/store/{index.js => index.ts} (100%)
 rename app/src/store/{info.js => info.ts} (100%)
 rename app/src/store/{settings.js => settings.ts} (100%)
 rename app/src/views/_partials/{index.js => index.ts} (100%)

diff --git a/app/src/api/api.js b/app/src/api/api.ts
similarity index 100%
rename from app/src/api/api.js
rename to app/src/api/api.ts
diff --git a/app/src/api/errors.js b/app/src/api/errors.ts
similarity index 100%
rename from app/src/api/errors.js
rename to app/src/api/errors.ts
diff --git a/app/src/api/handlers.js b/app/src/api/handlers.ts
similarity index 100%
rename from app/src/api/handlers.js
rename to app/src/api/handlers.ts
diff --git a/app/src/api/index.js b/app/src/api/index.ts
similarity index 100%
rename from app/src/api/index.js
rename to app/src/api/index.ts
diff --git a/app/src/composables/useAutoModal.js b/app/src/composables/useAutoModal.ts
similarity index 100%
rename from app/src/composables/useAutoModal.js
rename to app/src/composables/useAutoModal.ts
diff --git a/app/src/helpers/commons.js b/app/src/helpers/commons.ts
similarity index 100%
rename from app/src/helpers/commons.js
rename to app/src/helpers/commons.ts
diff --git a/app/src/helpers/data/tree.js b/app/src/helpers/data/tree.ts
similarity index 100%
rename from app/src/helpers/data/tree.js
rename to app/src/helpers/data/tree.ts
diff --git a/app/src/helpers/filters/date.js b/app/src/helpers/filters/date.ts
similarity index 100%
rename from app/src/helpers/filters/date.js
rename to app/src/helpers/filters/date.ts
diff --git a/app/src/helpers/filters/human.js b/app/src/helpers/filters/human.ts
similarity index 100%
rename from app/src/helpers/filters/human.js
rename to app/src/helpers/filters/human.ts
diff --git a/app/src/helpers/validators/customValidators.js b/app/src/helpers/validators/customValidators.ts
similarity index 100%
rename from app/src/helpers/validators/customValidators.js
rename to app/src/helpers/validators/customValidators.ts
diff --git a/app/src/helpers/validators/index.js b/app/src/helpers/validators/index.ts
similarity index 100%
rename from app/src/helpers/validators/index.js
rename to app/src/helpers/validators/index.ts
diff --git a/app/src/helpers/yunohostArguments.js b/app/src/helpers/yunohostArguments.ts
similarity index 100%
rename from app/src/helpers/yunohostArguments.js
rename to app/src/helpers/yunohostArguments.ts
diff --git a/app/src/i18n/helpers.js b/app/src/i18n/helpers.ts
similarity index 100%
rename from app/src/i18n/helpers.js
rename to app/src/i18n/helpers.ts
diff --git a/app/src/i18n/index.js b/app/src/i18n/index.ts
similarity index 100%
rename from app/src/i18n/index.js
rename to app/src/i18n/index.ts
diff --git a/app/src/i18n/supportedLocales.js b/app/src/i18n/supportedLocales.ts
similarity index 100%
rename from app/src/i18n/supportedLocales.js
rename to app/src/i18n/supportedLocales.ts
diff --git a/app/src/main.js b/app/src/main.ts
similarity index 100%
rename from app/src/main.js
rename to app/src/main.ts
diff --git a/app/src/router/index.js b/app/src/router/index.ts
similarity index 100%
rename from app/src/router/index.js
rename to app/src/router/index.ts
diff --git a/app/src/router/routes.js b/app/src/router/routes.ts
similarity index 100%
rename from app/src/router/routes.js
rename to app/src/router/routes.ts
diff --git a/app/src/store/data.js b/app/src/store/data.ts
similarity index 100%
rename from app/src/store/data.js
rename to app/src/store/data.ts
diff --git a/app/src/store/index.js b/app/src/store/index.ts
similarity index 100%
rename from app/src/store/index.js
rename to app/src/store/index.ts
diff --git a/app/src/store/info.js b/app/src/store/info.ts
similarity index 100%
rename from app/src/store/info.js
rename to app/src/store/info.ts
diff --git a/app/src/store/settings.js b/app/src/store/settings.ts
similarity index 100%
rename from app/src/store/settings.js
rename to app/src/store/settings.ts
diff --git a/app/src/views/_partials/index.js b/app/src/views/_partials/index.ts
similarity index 100%
rename from app/src/views/_partials/index.js
rename to app/src/views/_partials/index.ts

From f67f5047661cddcd862d0689155db18aba0b78ef Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 17 May 2024 16:39:50 +0200
Subject: [PATCH 068/275] refactor: add ts libs and config

---
 app/.eslintrc.js                       |  15 ++--
 app/components.d.ts                    | 115 +++++++++++++++++++++++++
 app/env.d.ts                           |   1 +
 app/index.html                         |   2 +-
 app/package.json                       |   6 +-
 app/src/main.ts                        |  22 +++--
 app/tsconfig.json                      |  10 +++
 app/tsconfig.node.json                 |  14 +++
 app/{vite.config.js => vite.config.ts} |   0
 app/vuex.d.ts                          |   6 ++
 10 files changed, 174 insertions(+), 17 deletions(-)
 create mode 100644 app/components.d.ts
 create mode 100644 app/env.d.ts
 create mode 100644 app/tsconfig.json
 create mode 100644 app/tsconfig.node.json
 rename app/{vite.config.js => vite.config.ts} (100%)
 create mode 100644 app/vuex.d.ts

diff --git a/app/.eslintrc.js b/app/.eslintrc.js
index 5390038e3..737ca969a 100644
--- a/app/.eslintrc.js
+++ b/app/.eslintrc.js
@@ -7,6 +7,7 @@ module.exports = {
   extends: [
     'plugin:vue/vue3-strongly-recommended',
     'eslint:recommended',
+    '@vue/eslint-config-typescript',
     'plugin:prettier/recommended',
   ],
   rules: {
@@ -15,13 +16,13 @@ module.exports = {
     //   { varsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
     // ],
     // temp vue3 compat3
-    'vue/no-v-for-template-key-on-child': 'error',
-    'vue/no-v-for-template-key': 'off',
-    'vue/attribute-hyphenation': 'off',
-    'vue/v-on-event-hyphenation': 'off',
+    // 'vue/no-v-for-template-key-on-child': 'error',
+    // 'vue/no-v-for-template-key': 'off',
+    // 'vue/attribute-hyphenation': 'off',
+    // 'vue/v-on-event-hyphenation': 'off',
     // temp flemme
-    'vue/require-explicit-emits': 'off',
-    'vue/require-default-prop': 'off',
-    'no-unused-vars': 'off',
+    // 'vue/require-explicit-emits': 'off',
+    // 'vue/require-default-prop': 'off',
+    // 'no-unused-vars': 'off',
   },
 }
diff --git a/app/components.d.ts b/app/components.d.ts
new file mode 100644
index 000000000..d01e61fce
--- /dev/null
+++ b/app/components.d.ts
@@ -0,0 +1,115 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    AbstractForm: typeof import('./src/components/globals/AbstractForm.vue')['default']
+    AdressInputSelect: typeof import('./src/components/AdressInputSelect.vue')['default']
+    BAlert: typeof import('bootstrap-vue-next')['BAlert']
+    BBadge: typeof import('bootstrap-vue-next')['BBadge']
+    BBreadcrumb: typeof import('bootstrap-vue-next')['BBreadcrumb']
+    BBreadcrumbItem: typeof import('bootstrap-vue-next')['BBreadcrumbItem']
+    BButton: typeof import('bootstrap-vue-next')['BButton']
+    BButtonGroup: typeof import('bootstrap-vue-next')['BButtonGroup']
+    BButtonToolbar: typeof import('bootstrap-vue-next')['BButtonToolbar']
+    BCard: typeof import('bootstrap-vue-next')['BCard']
+    BCardBody: typeof import('bootstrap-vue-next')['BCardBody']
+    BCardFooter: typeof import('bootstrap-vue-next')['BCardFooter']
+    BCardGroup: typeof import('bootstrap-vue-next')['BCardGroup']
+    BCardHeader: typeof import('bootstrap-vue-next')['BCardHeader']
+    BCardText: typeof import('bootstrap-vue-next')['BCardText']
+    BCardTitle: typeof import('bootstrap-vue-next')['BCardTitle']
+    BCol: typeof import('bootstrap-vue-next')['BCol']
+    BCollapse: typeof import('bootstrap-vue-next')['BCollapse']
+    BDropdown: typeof import('bootstrap-vue-next')['BDropdown']
+    BDropdownDivider: typeof import('bootstrap-vue-next')['BDropdownDivider']
+    BDropdownForm: typeof import('bootstrap-vue-next')['BDropdownForm']
+    BDropdownGroup: typeof import('bootstrap-vue-next')['BDropdownGroup']
+    BDropdownItem: typeof import('bootstrap-vue-next')['BDropdownItem']
+    BDropdownItemButton: typeof import('bootstrap-vue-next')['BDropdownItemButton']
+    BDropdownText: typeof import('bootstrap-vue-next')['BDropdownText']
+    BForm: typeof import('bootstrap-vue-next')['BForm']
+    BFormCheckbox: typeof import('bootstrap-vue-next')['BFormCheckbox']
+    BFormFile: typeof import('bootstrap-vue-next')['BFormFile']
+    BFormGroup: typeof import('bootstrap-vue-next')['BFormGroup']
+    BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
+    BFormRadio: typeof import('bootstrap-vue-next')['BFormRadio']
+    BFormRadioGroup: typeof import('bootstrap-vue-next')['BFormRadioGroup']
+    BFormSelect: typeof import('bootstrap-vue-next')['BFormSelect']
+    BFormTag: typeof import('bootstrap-vue-next')['BFormTag']
+    BFormTags: typeof import('bootstrap-vue-next')['BFormTags']
+    BFormTextarea: typeof import('bootstrap-vue-next')['BFormTextarea']
+    BImg: typeof import('bootstrap-vue-next')['BImg']
+    BInputGroup: typeof import('bootstrap-vue-next')['BInputGroup']
+    BInputGroupText: typeof import('bootstrap-vue-next')['BInputGroupText']
+    BLink: typeof import('bootstrap-vue-next')['BLink']
+    BListGroup: typeof import('bootstrap-vue-next')['BListGroup']
+    BListGroupItem: typeof import('bootstrap-vue-next')['BListGroupItem']
+    BModal: typeof import('bootstrap-vue-next')['BModal']
+    BModalOrchestrator: typeof import('bootstrap-vue-next')['BModalOrchestrator']
+    BNav: typeof import('bootstrap-vue-next')['BNav']
+    BNavbar: typeof import('bootstrap-vue-next')['BNavbar']
+    BNavbarBrand: typeof import('bootstrap-vue-next')['BNavbarBrand']
+    BNavbarNav: typeof import('bootstrap-vue-next')['BNavbarNav']
+    BNavItem: typeof import('bootstrap-vue-next')['BNavItem']
+    BNavText: typeof import('bootstrap-vue-next')['BNavText']
+    BOverlay: typeof import('bootstrap-vue-next')['BOverlay']
+    BPopover: typeof import('bootstrap-vue-next')['BPopover']
+    BProgress: typeof import('bootstrap-vue-next')['BProgress']
+    BProgressBar: typeof import('bootstrap-vue-next')['BProgressBar']
+    BRow: typeof import('bootstrap-vue-next')['BRow']
+    BSkeleton: typeof import('./src/components/globals/skeletons/BSkeleton.vue')['default']
+    BSkeletonWrapper: typeof import('./src/components/globals/skeletons/BSkeletonWrapper.vue')['default']
+    ButtonItem: typeof import('./src/components/globals/formItems/ButtonItem.vue')['default']
+    CardButtonsSkeleton: typeof import('./src/components/globals/skeletons/CardButtonsSkeleton.vue')['default']
+    CardCollapse: typeof import('./src/components/CardCollapse.vue')['default']
+    CardDeckFeed: typeof import('./src/components/CardDeckFeed.vue')['default']
+    CardForm: typeof import('./src/components/globals/CardForm.vue')['default']
+    CardFormSkeleton: typeof import('./src/components/globals/skeletons/CardFormSkeleton.vue')['default']
+    CardInfoSkeleton: typeof import('./src/components/globals/skeletons/CardInfoSkeleton.vue')['default']
+    CardListSkeleton: typeof import('./src/components/globals/skeletons/CardListSkeleton.vue')['default']
+    CheckboxItem: typeof import('./src/components/globals/formItems/CheckboxItem.vue')['default']
+    ConfigPanel: typeof import('./src/components/ConfigPanel.vue')['default']
+    ConfigPanels: typeof import('./src/components/ConfigPanels.vue')['default']
+    DescriptionRow: typeof import('./src/components/globals/DescriptionRow.vue')['default']
+    DisplayTextItem: typeof import('./src/components/globals/formItems/DisplayTextItem.vue')['default']
+    ExplainWhat: typeof import('./src/components/globals/ExplainWhat.vue')['default']
+    FileItem: typeof import('./src/components/globals/formItems/FileItem.vue')['default']
+    FormField: typeof import('./src/components/globals/FormField.vue')['default']
+    InputItem: typeof import('./src/components/globals/formItems/InputItem.vue')['default']
+    LazyRenderer: typeof import('./src/components/LazyRenderer.vue')['default']
+    ListGroupSkeleton: typeof import('./src/components/globals/skeletons/ListGroupSkeleton.vue')['default']
+    MarkdownItem: typeof import('./src/components/globals/formItems/MarkdownItem.vue')['default']
+    MessageListGroup: typeof import('./src/components/MessageListGroup.vue')['default']
+    QueryHeader: typeof import('./src/components/QueryHeader.vue')['default']
+    ReadOnlyAlertItem: typeof import('./src/components/globals/formItems/ReadOnlyAlertItem.vue')['default']
+    ReadOnlyField: typeof import('./src/components/globals/ReadOnlyField.vue')['default']
+    RecursiveListGroup: typeof import('./src/components/RecursiveListGroup.vue')['default']
+    RoutableTabs: typeof import('./src/components/RoutableTabs.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SelectItem: typeof import('./src/components/globals/formItems/SelectItem.vue')['default']
+    TagsItem: typeof import('./src/components/globals/formItems/TagsItem.vue')['default']
+    TagsSelectizeItem: typeof import('./src/components/globals/formItems/TagsSelectizeItem.vue')['default']
+    TextAreaItem: typeof import('./src/components/globals/formItems/TextAreaItem.vue')['default']
+    TopBar: typeof import('./src/components/globals/TopBar.vue')['default']
+    ViewBase: typeof import('./src/components/globals/ViewBase.vue')['default']
+    ViewSearch: typeof import('./src/components/globals/ViewSearch.vue')['default']
+    YAlert: typeof import('./src/components/globals/YAlert.vue')['default']
+    YBreadcrumb: typeof import('./src/components/globals/YBreadcrumb.vue')['default']
+    YCard: typeof import('./src/components/globals/YCard.vue')['default']
+    YIcon: typeof import('./src/components/globals/YIcon.vue')['default']
+    YListGroupItem: typeof import('./src/components/globals/YListGroupItem.vue')['default']
+    YSpinner: typeof import('./src/components/globals/YSpinner.vue')['default']
+  }
+  export interface ComponentCustomProperties {
+    vBModal: typeof import('bootstrap-vue-next')['vBModal']
+    vBPopover: typeof import('bootstrap-vue-next')['vBPopover']
+    vBToggle: typeof import('bootstrap-vue-next')['vBToggle']
+    vBTooltip: typeof import('bootstrap-vue-next')['vBTooltip']
+  }
+}
diff --git a/app/env.d.ts b/app/env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/app/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/app/index.html b/app/index.html
index 8db9df95d..5a4b97100 100644
--- a/app/index.html
+++ b/app/index.html
@@ -21,6 +21,6 @@
       </strong>
     </noscript>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/app/package.json b/app/package.json
index 912111fff..30c89a3dd 100644
--- a/app/package.json
+++ b/app/package.json
@@ -30,14 +30,18 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/tsconfig": "^0.5.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.22.0",
     "prettier": "^3.2.5",
     "sass": "^1.71.1",
+    "typescript": "^5.4.5",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.1.4"
+    "vite": "^5.1.4",
+    "vue-tsc": "^2.0.19"
   },
   "browserslist": [
     "> 1%",
diff --git a/app/src/main.ts b/app/src/main.ts
index 92f7cbcd1..6f3569599 100644
--- a/app/src/main.ts
+++ b/app/src/main.ts
@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import { createApp, type Component } from 'vue'
 import App from './App.vue'
 import { createBootstrap } from 'bootstrap-vue-next'
 import { VueShowdownPlugin } from 'vue-showdown'
@@ -12,9 +12,9 @@ import { initDefaultLocales } from './i18n/helpers'
 
 import '@/scss/main.scss'
 
-const app = createApp({
-  ...App,
-})
+type Module = { default: Component }
+
+const app = createApp(App)
 
 app.use(store)
 app.use(router)
@@ -33,11 +33,17 @@ app.use(VueShowdownPlugin, {
 const globalComponentsModules = import.meta.glob(
   ['@/components/globals/*.vue', '@/components/globals/*/*.vue'],
   { eager: true },
+) as Record<string, Module>
+Object.values(globalComponentsModules).forEach(
+  ({ default: component }: Module) => {
+    // FIXME component name is not automatic (there is the `__name` but it's private and may change)
+    // Solution seems to use:
+    // defineOptions({
+    //   name: 'FormField',
+    // })
+    app.component(component.__name || component.name, component)
+  },
 )
-Object.values(globalComponentsModules).forEach((module) => {
-  const component = module.default
-  app.component(component.name, component)
-})
 
 registerGlobalErrorHandlers()
 
diff --git a/app/tsconfig.json b/app/tsconfig.json
new file mode 100644
index 000000000..d9eac4f9e
--- /dev/null
+++ b/app/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["vite/client"]
+  }
+}
diff --git a/app/tsconfig.node.json b/app/tsconfig.node.json
new file mode 100644
index 000000000..81c218077
--- /dev/null
+++ b/app/tsconfig.node.json
@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+      "composite": true,
+      "skipLibCheck": true,
+      "module": "ESNext",
+      "moduleResolution": "bundler",
+      "allowSyntheticDefaultImports": true,
+      "strict": true,
+      "types": [
+        "node"
+      ]
+    },
+    "include": ["vite.config.ts"]
+  }
diff --git a/app/vite.config.js b/app/vite.config.ts
similarity index 100%
rename from app/vite.config.js
rename to app/vite.config.ts
diff --git a/app/vuex.d.ts b/app/vuex.d.ts
new file mode 100644
index 000000000..f10bd1206
--- /dev/null
+++ b/app/vuex.d.ts
@@ -0,0 +1,6 @@
+declare module 'vuex' {
+  export * from 'vuex/types/index.d.ts'
+  export * from 'vuex/types/helpers.d.ts'
+  export * from 'vuex/types/logger.d.ts'
+  export * from 'vuex/types/vue.d.ts'
+}

From 0f673709afbf6f1c985582a7cb6e4a65fd2d6a40 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 17 May 2024 16:39:50 +0200
Subject: [PATCH 069/275] refactor: add ts libs and config

---
 app/tsconfig.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/tsconfig.json b/app/tsconfig.json
index d9eac4f9e..d2a0565ff 100644
--- a/app/tsconfig.json
+++ b/app/tsconfig.json
@@ -2,6 +2,8 @@
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
     "target": "ESNext",
+    "noErrorTruncation": true,
+    "lib": ["es2021", "dom"],
     "paths": {
       "@/*": ["./src/*"]
     },

From cc7952a454afd0821b518a325188fbdb56d3dbf1 Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Fri, 26 Jul 2024 22:32:35 +0200
Subject: [PATCH 070/275] Update changelog for 12.0.1

---
 debian/changelog | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/debian/changelog b/debian/changelog
index dc646f7f9..aee220f53 100644
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,3 +1,13 @@
+yunohost-admin (12.0.1) testing; urgency=low
+
+  - Reflect change in the core about pydantic/config panels (06bb22f4, 60934cf7)
+  - No need anymore to the server after yunohost upgrades because the session should still be valid (1d892350)
+  - i18n: Translations updated for Basque, Chinese (Simplified), Danish, Dutch, French, Galician, German, Indonesian, Italian, Polish, Russian, Slovak, Spanish
+
+  Thanks to all contributors <3 ! (Andreas Gammelgaard Damsbo, axolotle, Boudewijn, bruno van den bosch, cjdw, Émile, Ivan Davydov, José M, Jose Riha, Kuba Bazan, Øjvind Fritjof Arnfred, OniriCorpe, Poesty Li, rosbeef andino, Tagadda, Titus PiJean, Tommi, xabirequejo)
+
+ -- Alexandre Aubin <alex.aubin@mailoo.org>  Fri, 26 Jul 2024 22:30:32 +0200
+
 yunohost (12.0.0) unstable; urgency=low
 
   - Tmp changelog to prepare Bookworm

From dd4bedeeb41c5d3008c70f0acadebba34b95e08d Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Tue, 30 Jul 2024 16:13:29 +0200
Subject: [PATCH 071/275] Require yunohost >= 12.0

---
 debian/control | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/debian/control b/debian/control
index c3e8a4d6e..57233cab4 100644
--- a/debian/control
+++ b/debian/control
@@ -10,7 +10,7 @@ Homepage: https://yunohost.org/
 Package: yunohost-admin
 Architecture: all
 Depends: ${misc:Depends}
- , yunohost (>= 11.1)
+ , yunohost (>= 12.0)
 Description: web administration interface for yunohost
  YunoHost aims to make self-hosting accessible to everyone. It configures
  an email, Web and IM server alongside a LDAP base. It also provides

From 7123ba6cdc1a328540b2a7c1faf2de8954da3380 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 30 May 2024 00:42:53 +0200
Subject: [PATCH 072/275] refactor: quickly turn components to script setup +
 ts

---
 app/src/App.vue                               | 182 +++--
 app/src/components/AdressInputSelect.vue      |  62 +-
 app/src/components/CardCollapse.vue           |  60 +-
 app/src/components/CardDeckFeed.vue           | 164 +++--
 app/src/components/ConfigPanel.vue            | 113 +--
 app/src/components/ConfigPanels.vue           | 124 ++--
 app/src/components/LazyRenderer.vue           | 140 ++--
 app/src/components/MessageListGroup.vue       | 103 +--
 app/src/components/QueryHeader.vue            |  96 +--
 app/src/components/RecursiveListGroup.vue     |  61 +-
 app/src/components/RoutableTabs.vue           |  32 +-
 app/src/components/globals/AbstractForm.vue   |  92 ++-
 app/src/components/globals/CardForm.vue       |  92 ++-
 app/src/components/globals/DescriptionRow.vue |  45 +-
 app/src/components/globals/ExplainWhat.vue    |  44 +-
 app/src/components/globals/FormField.vue      | 230 +++---
 app/src/components/globals/ReadOnlyField.vue  |  92 +--
 app/src/components/globals/TopBar.vue         |  57 +-
 app/src/components/globals/ViewBase.vue       | 123 ++--
 app/src/components/globals/ViewSearch.vue     |  64 +-
 app/src/components/globals/YAlert.vue         |  46 +-
 app/src/components/globals/YBreadcrumb.vue    |  32 +-
 app/src/components/globals/YCard.vue          |  70 +-
 app/src/components/globals/YIcon.vue          |  19 +-
 app/src/components/globals/YListGroupItem.vue |  75 +-
 app/src/components/globals/YSpinner.vue       |  18 +-
 .../globals/formItems/ButtonItem.vue          |  65 +-
 .../globals/formItems/CheckboxItem.vue        |  35 +-
 .../globals/formItems/DisplayTextItem.vue     |  24 +-
 .../components/globals/formItems/FileItem.vue | 142 ++--
 .../globals/formItems/InputItem.vue           |  90 +--
 .../globals/formItems/MarkdownItem.vue        |  18 +-
 .../globals/formItems/ReadOnlyAlertItem.vue   |  49 +-
 .../globals/formItems/SelectItem.vue          |  50 +-
 .../components/globals/formItems/TagsItem.vue |  58 +-
 .../globals/formItems/TagsSelectizeItem.vue   | 196 ++---
 .../globals/formItems/TextAreaItem.vue        |  57 +-
 .../globals/skeletons/BSkeleton.vue           |  18 +-
 .../globals/skeletons/BSkeletonWrapper.vue    |  14 +-
 .../globals/skeletons/CardButtonsSkeleton.vue |  20 +-
 .../globals/skeletons/CardFormSkeleton.vue    |  36 +-
 .../globals/skeletons/CardInfoSkeleton.vue    |  20 +-
 .../globals/skeletons/CardListSkeleton.vue    |  20 +-
 .../globals/skeletons/ListGroupSkeleton.vue   |  20 +-
 app/src/store/utils.ts                        |  12 +
 app/src/types/commons.ts                      |  25 +
 app/src/views/HomeView.vue                    |  40 +-
 app/src/views/LoginView.vue                   | 170 +++--
 app/src/views/PostInstall.vue                 | 287 ++++----
 app/src/views/_partials/DomainForm.vue        | 317 ++++----
 app/src/views/_partials/ErrorDisplay.vue      |  67 +-
 app/src/views/_partials/HistoryConsole.vue    | 251 ++++---
 .../views/_partials/ReconnectingDisplay.vue   |  82 +--
 app/src/views/_partials/ViewLockOverlay.vue   |  77 +-
 app/src/views/_partials/WaitingDisplay.vue    |  55 +-
 app/src/views/_partials/WarningDisplay.vue    |  44 +-
 app/src/views/app/AppCatalog.vue              | 393 +++++-----
 app/src/views/app/AppInfo.vue                 | 675 +++++++++---------
 app/src/views/app/AppInstall.vue              | 437 ++++++------
 app/src/views/app/AppList.vue                 |  77 +-
 app/src/views/backup/BackupCreate.vue         | 168 +++--
 app/src/views/backup/BackupInfo.vue           | 282 ++++----
 app/src/views/backup/BackupList.vue           |  69 +-
 app/src/views/backup/BackupView.vue           |  30 +-
 app/src/views/diagnosis/DiagnosisView.vue     | 212 +++---
 app/src/views/domain/DomainAdd.vue            |  62 +-
 app/src/views/domain/DomainDns.vue            | 276 ++++---
 app/src/views/domain/DomainInfo.vue           | 324 ++++-----
 app/src/views/domain/DomainList.vue           |  75 +-
 app/src/views/group/GroupCreate.vue           |  99 ++-
 app/src/views/group/GroupList.vue             | 387 +++++-----
 app/src/views/service/ServiceInfo.vue         | 186 +++--
 app/src/views/service/ServiceList.vue         |  73 +-
 app/src/views/tool/ToolFirewall.vue           | 334 +++++----
 app/src/views/tool/ToolList.vue               |  64 +-
 app/src/views/tool/ToolLog.vue                | 171 +++--
 app/src/views/tool/ToolLogs.vue               |  83 +--
 app/src/views/tool/ToolMigrations.vue         | 135 ++--
 app/src/views/tool/ToolPower.vue              |  60 +-
 app/src/views/tool/ToolSettings.vue           | 115 ++-
 app/src/views/tool/ToolWebadmin.vue           | 162 ++---
 app/src/views/update/SystemUpdate.vue         | 253 +++----
 app/src/views/user/UserCreate.vue             | 247 +++----
 app/src/views/user/UserEdit.vue               | 477 ++++++-------
 app/src/views/user/UserImport.vue             | 188 +++--
 app/src/views/user/UserInfo.vue               |  75 +-
 app/src/views/user/UserList.vue               |  83 +--
 87 files changed, 5265 insertions(+), 5602 deletions(-)
 create mode 100644 app/src/store/utils.ts
 create mode 100644 app/src/types/commons.ts

diff --git a/app/src/App.vue b/app/src/App.vue
index d5e7ae7bf..32ac2b4d1 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,3 +1,87 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useStore } from 'vuex'
+
+import { useStoreGetters } from '@/store/utils'
+import { HistoryConsole, ViewLockOverlay } from '@/views/_partials'
+
+const store = useStore()
+const {
+  connected,
+  yunohost,
+  routerKey,
+  transitions,
+  transitionName,
+  waiting,
+  dark,
+  ssoLink,
+} = useStoreGetters()
+
+async function logout() {
+  store.dispatch('LOGOUT')
+}
+
+store.dispatch('ON_APP_CREATED')
+
+onMounted(() => {
+  const copypastaCode = ['ArrowDown', 'ArrowDown', 'ArrowUp', 'ArrowUp']
+  let copypastastep = 0
+  document.addEventListener('keydown', ({ key }) => {
+    if (key === copypastaCode[copypastastep++]) {
+      if (copypastastep === copypastaCode.length) {
+        document
+          .querySelectorAll('.unselectable')
+          .forEach((element) => element.classList.remove('unselectable'))
+        copypastastep = 0
+      }
+    } else {
+      copypastastep = 0
+    }
+  })
+
+  // Konamicode ;P
+  const konamiCode = [
+    'ArrowUp',
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowLeft',
+    'ArrowRight',
+    'b',
+    'a',
+  ]
+  let konamistep = 0
+  document.addEventListener('keydown', ({ key }) => {
+    if (key === konamiCode[konamistep++]) {
+      if (konamistep === konamiCode.length) {
+        store.commit('SET_SPINNER', 'nyancat')
+        konamistep = 0
+      }
+    } else {
+      konamistep = 0
+    }
+  })
+
+  // April fools easter egg ;)
+  const today = new Date()
+  if (today.getDate() === 1 && today.getMonth() + 1 === 4) {
+    store.commit('SET_SPINNER', 'magikarp')
+  }
+
+  // Halloween easter egg ;)
+  if (today.getDate() === 31 && today.getMonth() + 1 === 10) {
+    store.commit('SET_SPINNER', 'spookycat')
+  }
+  // updates the data-bs-theme attribute
+  document.documentElement.setAttribute(
+    'data-bs-theme',
+    dark.value ? 'dark' : 'light',
+  )
+})
+</script>
+
 <template>
   <div id="app" class="container">
     <!-- HEADER -->
@@ -97,104 +181,6 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { HistoryConsole, ViewLockOverlay } from '@/views/_partials'
-
-export default {
-  name: 'App',
-
-  components: {
-    HistoryConsole,
-    ViewLockOverlay,
-  },
-
-  computed: {
-    ...mapGetters([
-      'connected',
-      'yunohost',
-      'routerKey',
-      'transitions',
-      'transitionName',
-      'waiting',
-      'dark',
-      'ssoLink',
-    ]),
-  },
-
-  methods: {
-    async logout() {
-      this.$store.dispatch('LOGOUT')
-    },
-  },
-
-  // This hook is only triggered at page first load
-  created() {
-    this.$store.dispatch('ON_APP_CREATED')
-  },
-
-  mounted() {
-    // Unlock copypasta on log view
-    const copypastaCode = ['ArrowDown', 'ArrowDown', 'ArrowUp', 'ArrowUp']
-    let copypastastep = 0
-    document.addEventListener('keydown', ({ key }) => {
-      if (key === copypastaCode[copypastastep++]) {
-        if (copypastastep === copypastaCode.length) {
-          document
-            .querySelectorAll('.unselectable')
-            .forEach((element) => element.classList.remove('unselectable'))
-          copypastastep = 0
-        }
-      } else {
-        copypastastep = 0
-      }
-    })
-
-    // Konamicode ;P
-    const konamiCode = [
-      'ArrowUp',
-      'ArrowUp',
-      'ArrowDown',
-      'ArrowDown',
-      'ArrowLeft',
-      'ArrowRight',
-      'ArrowLeft',
-      'ArrowRight',
-      'b',
-      'a',
-    ]
-    let konamistep = 0
-    document.addEventListener('keydown', ({ key }) => {
-      if (key === konamiCode[konamistep++]) {
-        if (konamistep === konamiCode.length) {
-          this.$store.commit('SET_SPINNER', 'nyancat')
-          konamistep = 0
-        }
-      } else {
-        konamistep = 0
-      }
-    })
-
-    // April fools easter egg ;)
-    const today = new Date()
-    if (today.getDate() === 1 && today.getMonth() + 1 === 4) {
-      this.$store.commit('SET_SPINNER', 'magikarp')
-    }
-
-    // Halloween easter egg ;)
-    if (today.getDate() === 31 && today.getMonth() + 1 === 10) {
-      this.$store.commit('SET_SPINNER', 'spookycat')
-    }
-    // updates the data-bs-theme attribute
-    document.documentElement.setAttribute(
-      'data-bs-theme',
-      this.dark ? 'dark' : 'light',
-    )
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 // generic style for <html>, <body> and <#app> is in `scss/main.scss`
 header {
diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
index be10a063c..6d6a0a4d7 100644
--- a/app/src/components/AdressInputSelect.vue
+++ b/app/src/components/AdressInputSelect.vue
@@ -1,3 +1,39 @@
+<script setup lang="ts">
+type CustomEmail = {
+  localPart: string | null
+  separator: string
+  domain: string | null
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: CustomEmail
+    choices: string[]
+    placeholder?: string
+    id?: string
+    state?: false | null
+    type?: string
+  }>(),
+  {
+    placeholder: undefined,
+    id: undefined,
+    state: undefined,
+    type: 'email',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: CustomEmail]
+}>()
+
+function onInput(key: 'localPart' | 'domain', modelValue: string | null) {
+  emit('update:modelValue', {
+    ...props.modelValue,
+    [key]: modelValue,
+  })
+}
+</script>
+
 <template>
   <BInputGroup v-bind="$attrs">
     <InputItem
@@ -30,29 +66,3 @@
     />
   </BInputGroup>
 </template>
-
-<script>
-export default {
-  name: 'AdressInputSelect',
-
-  inheritAttrs: false,
-
-  props: {
-    modelValue: { type: Object, required: true },
-    choices: { type: Array, required: true },
-    placeholder: { type: String, default: null },
-    id: { type: String, default: null },
-    state: { type: null, default: null },
-    type: { type: String, default: 'email' },
-  },
-
-  methods: {
-    onInput(key, modelValue) {
-      this.$emit('update:modelValue', {
-        ...this.modelValue,
-        [key]: modelValue,
-      })
-    },
-  },
-}
-</script>
diff --git a/app/src/components/CardCollapse.vue b/app/src/components/CardCollapse.vue
index c36db2c19..358a20d46 100644
--- a/app/src/components/CardCollapse.vue
+++ b/app/src/components/CardCollapse.vue
@@ -1,5 +1,36 @@
+<script setup lang="ts">
+import type { ColorVariant } from 'bootstrap-vue-next'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    title: string
+    variant?: ColorVariant
+    visible?: boolean
+    flush?: boolean
+  }>(),
+  {
+    variant: 'light',
+    visible: false,
+    flush: false,
+  },
+)
+
+const class_ = computed(() => {
+  const baseClass = 'card-collapse'
+  return [
+    baseClass,
+    {
+      [`${baseClass}-flush`]: props.flush,
+      [`${baseClass}-${props.variant}`]: props.variant,
+    },
+  ]
+})
+</script>
+
 <template>
-  <BCard v-bind="$attrs" no-body :class="_class">
+  <BCard no-body :class="class_">
     <template #header>
       <slot name="header">
         <h2>
@@ -21,33 +52,6 @@
   </BCard>
 </template>
 
-<script>
-export default {
-  name: 'CardCollapse',
-
-  props: {
-    id: { type: String, required: true },
-    title: { type: String, required: true },
-    variant: { type: String, default: 'white' },
-    visible: { type: Boolean, default: false },
-    flush: { type: Boolean, default: false },
-  },
-
-  computed: {
-    _class() {
-      const baseClass = 'card-collapse'
-      return [
-        baseClass,
-        {
-          [`${baseClass}-flush`]: this.flush,
-          [`${baseClass}-${this.variant}`]: this.variant,
-        },
-      ]
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .card-collapse {
   .card-header {
diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index c68484985..a5528eb56 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -1,91 +1,97 @@
-<script>
-// Implementation of the feed pattern
-// https://www.w3.org/WAI/ARIA/apg/patterns/feed/
-import { h } from 'vue'
+<script setup lang="ts">
 import { BCardGroup } from 'bootstrap-vue-next'
+import {
+  getCurrentInstance,
+  h,
+  nextTick,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onMounted,
+  ref,
+} from 'vue'
 
-export default {
-  name: 'CardDeckFeed',
+// Implementation of the feed pattern
+// https://www.w3.org/WAI/ARIA/apg/patterns/feed/
 
-  props: {
-    stacks: { type: Number, default: 21 },
-  },
+const props = withDefaults(defineProps<{ stacks?: number }>(), { stacks: 21 })
+const slots = defineSlots<{
+  default: any
+}>()
 
-  data() {
-    return {
-      busy: false,
-      range: this.stacks,
-      childrenCount: this.$slots.default()[0].children,
-    }
-  },
+const busy = ref(false)
+const range = ref(props.stacks)
+const childrenCount = ref(slots.default()[0].children.length)
+const feedElem = ref<InstanceType<typeof BCardGroup> | null>(null)
 
-  methods: {
-    getTopParent(prev) {
-      return prev.parentElement === this.$refs.feed.$el
-        ? prev
-        : this.getTopParent(prev.parentElement)
-    },
+function getTopParent(prev: HTMLElement): HTMLElement {
+  return prev.parentElement === feedElem.value?.$el
+    ? prev
+    : getTopParent(prev.parentElement!)
+}
 
-    onScroll() {
-      const elem = this.$refs.feed.$el
-      if (
-        window.innerHeight >
-        elem.clientHeight + elem.getBoundingClientRect().top - 200
-      ) {
-        this.busy = true
-        this.range = Math.min(this.range + this.stacks, this.childrenCount)
-        this.$nextTick().then(() => {
-          this.busy = false
-        })
-      }
-    },
+const i = getCurrentInstance()
+function onScroll() {
+  const elem = feedElem.value?.$el
+  if (
+    window.innerHeight >
+    elem.clientHeight + elem.getBoundingClientRect().top - 200
+  ) {
+    busy.value = true
+    range.value = Math.min(range.value + props.stacks, childrenCount.value)
+    nextTick().then(() => {
+      busy.value = false
+    })
+  }
+}
 
-    onKeydown(e) {
-      if (['PageUp', 'PageDown'].includes(e.code)) {
-        e.preventDefault()
-        const key = e.code === 'PageUp' ? 'previous' : 'next'
-        const sibling = this.getTopParent(e.target)[`${key}ElementSibling`]
-        if (sibling) {
-          sibling.focus()
-          sibling.scrollIntoView({ block: 'center' })
-        }
-      }
-      // FIXME Add `Home` and `End` shorcuts
-    },
-  },
+function onKeydown(e: KeyboardEvent) {
+  if (['PageUp', 'PageDown'].includes(e.code)) {
+    e.preventDefault()
+    const key = e.code === 'PageUp' ? 'previous' : 'next'
+    const sibling = getTopParent(e.target as HTMLElement)[
+      `${key}ElementSibling`
+    ] as HTMLElement | null
+    sibling?.focus()
+    sibling?.scrollIntoView({ block: 'center' })
+  }
+  // FIXME Add `Home` and `End` shorcuts
+}
 
-  mounted() {
-    window.addEventListener('scroll', this.onScroll)
-    this.$refs.feed.$el.addEventListener('keydown', this.onKeydown)
-    this.onScroll()
-  },
+onMounted(() => {
+  window.addEventListener('scroll', onScroll)
+  feedElem.value?.$el.addEventListener('keydown', onKeydown)
+  onScroll()
+})
 
-  beforeUpdate() {
-    const slots = this.$slots.default()[0].children
-    if (this.childrenCount !== slots.length) {
-      this.range = this.stacks
-      this.childrenCount = slots.length
-    }
-  },
+onBeforeUpdate(() => {
+  const children = slots.default()[0].children
+  if (childrenCount.value !== children.length) {
+    range.value = props.stacks
+    childrenCount.value = children.length
+  }
+})
 
-  render() {
-    return h(
-      BCardGroup,
-      {
-        deck: true,
-        role: 'feed',
-        'aria-busy': this.busy.toString(),
-        ref: 'feed',
-      },
-      {
-        default: () => this.$slots.default()[0].children.slice(0, this.range),
-      },
-    )
-  },
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', onScroll)
+  feedElem.value?.$el.removeEventListener('keydown', onKeydown)
+})
 
-  beforeUnmount() {
-    window.removeEventListener('scroll', this.onScroll)
-    this.$refs.feed.$el.removeEventListener('keydown', this.onKeydown)
-  },
-}
+const root = () =>
+  h(
+    BCardGroup,
+    {
+      deck: true,
+      role: 'feed',
+      'aria-busy': busy.value,
+      ref: feedElem,
+    },
+    {
+      default: () => slots.default()[0].children.slice(0, range.value),
+    },
+  )
 </script>
+
+<template>
+  {{ busy }}
+  <root />
+</template>
diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
index 4121ab610..71d5788e7 100644
--- a/app/src/components/ConfigPanel.vue
+++ b/app/src/components/ConfigPanel.vue
@@ -1,3 +1,64 @@
+<script setup lang="ts">
+import type { BaseValidation } from '@vuelidate/core'
+import { computed } from 'vue'
+
+import { filterObject } from '@/helpers/commons'
+import type { Obj } from '@/types/commons'
+
+const props = defineProps<{
+  tabId: string
+  panels: Obj[]
+  forms: Obj<Obj>
+  v: BaseValidation
+}>()
+
+const slots = defineSlots<{
+  'tab-top': any
+  'tab-before': any
+  'tab-after': any
+}>()
+
+const emit = defineEmits<{
+  apply: [
+    value:
+      | { id: string; form: Obj }
+      | { id: string; form: Obj; action: string; name: string },
+  ]
+}>()
+
+const panel = computed(() => {
+  // FIXME throw error if no panel?
+  return props.panels.find((panel) => panel.id === props.tabId)
+})
+
+const validation = computed(() => {
+  return props.v.forms[panel.value?.id]
+})
+
+function onApply() {
+  const panelId = panel.value?.id
+
+  emit('apply', {
+    id: panelId,
+    form: props.forms[panelId],
+  })
+}
+
+function onAction(sectionId: string, actionId: string, actionFields) {
+  const panelId = panel.value?.id
+  const actionFieldsKeys = Object.keys(actionFields)
+
+  emit('apply', {
+    id: panelId,
+    form: filterObject(props.forms[panelId], ([key]) =>
+      actionFieldsKeys.includes(key),
+    ),
+    action: [panelId, sectionId, actionId].join('.'),
+    name: actionId,
+  })
+}
+</script>
+
 <template>
   <AbstractForm
     v-if="panel"
@@ -12,7 +73,7 @@
     <slot name="tab-top" />
 
     <template v-if="panel.help" #disclaimer>
-      <div class="alert alert-info" v-html="help" />
+      <div class="alert alert-info" v-html="panel.help" />
     </template>
 
     <slot name="tab-before" />
@@ -50,56 +111,6 @@
   </AbstractForm>
 </template>
 
-<script>
-import { filterObject } from '@/helpers/commons'
-
-export default {
-  name: 'ConfigPanel',
-
-  props: {
-    tabId: { type: String, required: true },
-    panels: { type: Array, default: undefined },
-    forms: { type: Object, default: undefined },
-    v: { type: Object, default: undefined },
-  },
-
-  computed: {
-    panel() {
-      return this.panels.find((panel) => panel.id === this.tabId)
-    },
-
-    validation() {
-      return this.v.forms[this.panel.id]
-    },
-  },
-
-  methods: {
-    onApply() {
-      const panelId = this.panel.id
-
-      this.$emit('apply', {
-        id: panelId,
-        form: this.forms[panelId],
-      })
-    },
-
-    onAction(sectionId, actionId, actionFields) {
-      const panelId = this.panel.id
-      const actionFieldsKeys = Object.keys(actionFields)
-
-      this.$emit('apply', {
-        id: panelId,
-        form: filterObject(this.forms[panelId], ([key]) =>
-          actionFieldsKeys.includes(key),
-        ),
-        action: [panelId, sectionId, actionId].join('.'),
-        name: actionId,
-      })
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .card-title {
   margin-bottom: 1em;
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 82d6abda4..d7c05a6d5 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -1,10 +1,72 @@
+<script setup lang="ts">
+import { useVuelidate, type BaseValidation } from '@vuelidate/core'
+import { computed, defineAsyncComponent, toRef } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import type { CustomRoute, Obj } from '@/types/commons'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const RoutableTabs = defineAsyncComponent(
+  () => import('@/components/RoutableTabs.vue'),
+)
+
+const props = withDefaults(
+  defineProps<{
+    panels: Obj[]
+    forms: Obj<Obj>
+    validations: BaseValidation
+    externalResults: Obj
+    errors?: Obj // never used
+    noRedirect?: boolean
+    routes?: CustomRoute[]
+  }>(),
+  {
+    errors: undefined,
+    routes: undefined,
+    noRedirect: false,
+  },
+)
+
+const slots = defineSlots<{
+  'tab-top': any
+  'tab-before': any
+  'tab-after': any
+}>()
+
+const externalResults = toRef(props, 'externalResults')
+const rules = computed(() => ({ forms: props.validations }))
+const v$ = useVuelidate(rules, props.forms, {
+  $externalResults: externalResults,
+})
+
+const router = useRouter()
+const route = useRoute()
+const routes = computed(() => {
+  return (
+    props.routes ||
+    props.panels.map((panel) => ({
+      to: { params: { tabId: panel.id } },
+      text: panel.name,
+      icon: panel.icon || 'wrench',
+    }))
+  )
+})
+
+if (!props.noRedirect && !route.params.tabId) {
+  router.replace({ params: { tabId: props.panels[0].id } })
+}
+</script>
+
 <template>
   <div class="config-panel">
     <!-- FIXME vue3 - weird stuff with event binding, need to propagate by hand for now -->
     <RoutableTabs
-      v-if="routes_.length > 1"
+      v-if="routes.length > 1"
       v-bind="{ panels, forms, v: v$, ...$attrs }"
-      :routes="routes_"
+      :routes="routes"
     >
       <template #tab-top>
         <slot name="tab-top" />
@@ -17,66 +79,10 @@
       </template>
     </RoutableTabs>
 
-    <YCard v-else :title="routes_[0].text" :icon="routes_[0].icon">
+    <YCard v-else :title="routes[0].text" :icon="routes[0].icon">
       <slot name="tab-top" />
       <slot name="tab-before" />
       <slot name="tab-after" />
     </YCard>
   </div>
 </template>
-
-<script>
-import { toRef } from 'vue'
-import { defineAsyncComponent } from 'vue'
-import { useVuelidate } from '@vuelidate/core'
-
-export default {
-  name: 'ConfigPanels',
-
-  inheritAttrs: false,
-
-  components: {
-    RoutableTabs: defineAsyncComponent(
-      () => import('@/components/RoutableTabs.vue'),
-    ),
-  },
-
-  props: {
-    panels: { type: Array, default: undefined },
-    forms: { type: Object, default: undefined },
-    validations: { type: Object, default: undefined },
-    errors: { type: Object, default: undefined }, // never used
-    routes: { type: Array, default: null },
-    noRedirect: { type: Boolean, default: false },
-    externalResults: { type: Object, required: true },
-  },
-
-  setup(props) {
-    const externalResults = toRef(props, 'externalResults')
-    return {
-      v$: useVuelidate({ $externalResults: externalResults }),
-    }
-  },
-
-  computed: {
-    routes_() {
-      if (this.routes) return this.routes
-      return this.panels.map((panel) => ({
-        to: { params: { tabId: panel.id } },
-        text: panel.name,
-        icon: panel.icon || 'wrench',
-      }))
-    },
-  },
-
-  validations() {
-    return { forms: this.validations }
-  },
-
-  created() {
-    if (!this.noRedirect && !this.$route.params.tabId) {
-      this.$router.replace({ params: { tabId: this.panels[0].id } })
-    }
-  },
-}
-</script>
diff --git a/app/src/components/LazyRenderer.vue b/app/src/components/LazyRenderer.vue
index 26b7b2097..92e5278b7 100644
--- a/app/src/components/LazyRenderer.vue
+++ b/app/src/components/LazyRenderer.vue
@@ -1,76 +1,88 @@
-<template>
-  <div class="lazy-renderer" :style="`min-height: ${fixedMinHeight}px`">
-    <slot v-if="render" />
-  </div>
-</template>
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 
-<script>
-export default {
-  name: 'LazyRenderer',
-
-  props: {
-    unrender: { type: Boolean, default: true },
-    minHeight: { type: Number, default: 0 },
-    renderDelay: { type: Number, default: 100 },
-    unrenderDelay: { type: Number, default: 2000 },
-    rootMargin: { type: String, default: '300px' },
+const props = withDefaults(
+  defineProps<{
+    unrender?: boolean
+    minHeight?: number
+    renderDelay?: number
+    unrenderDelay?: number
+    rootMargin?: string
+  }>(),
+  {
+    unrender: true,
+    minHeight: 0,
+    renderDelay: 100,
+    unrenderDelay: 2000,
+    rootMargin: '300px',
   },
+)
 
-  data() {
-    return {
-      observer: null,
-      render: false,
-      fixedMinHeight: this.minHeight,
-    }
-  },
+defineSlots<{
+  default: any
+}>()
 
-  mounted() {
-    let unrenderTimer
-    let renderTimer
+const observer = ref<IntersectionObserver | null>(null)
+const render = ref(false)
+const fixedMinHeight = ref(props.minHeight)
+const rootElem = ref<HTMLDivElement | null>(null)
 
-    this.observer = new IntersectionObserver(
-      (entries) => {
-        let intersecting = entries[0].isIntersecting
+onMounted(() => {
+  let unrenderTimer: NodeJS.Timeout
+  let renderTimer: NodeJS.Timeout
 
-        // Fix for weird bug when typing fast in app search or on slow client.
-        // Intersection is triggered but even if the element is indeed in the viewport,
-        // isIntersecting is `false`, so we have to manually check this…
-        // FIXME Would be great to find out why this is happening
-        if (!intersecting && this.$el.offsetTop < window.innerHeight) {
-          intersecting = true
-        }
+  observer.value = new IntersectionObserver(
+    (entries) => {
+      let intersecting = entries[0].isIntersecting
+
+      // Fix for weird bug when typing fast in app search or on slow client.
+      // Intersection is triggered but even if the element is indeed in the viewport,
+      // isIntersecting is `false`, so we have to manually check this…
+      // FIXME Would be great to find out why this is happening
+      if (!intersecting && rootElem.value!.offsetTop < window.innerHeight) {
+        intersecting = true
+      }
 
-        if (intersecting) {
-          clearTimeout(unrenderTimer)
-          // Show the component after a delay (to avoid rendering while scrolling fast)
-          renderTimer = setTimeout(
-            () => {
-              this.render = true
-            },
-            this.unrender ? this.renderDelay : 0,
-          )
+      if (intersecting) {
+        clearTimeout(unrenderTimer)
+        // Show the component after a delay (to avoid rendering while scrolling fast)
+        renderTimer = setTimeout(
+          () => {
+            render.value = true
+          },
+          props.unrender ? props.renderDelay : 0,
+        )
 
-          if (!this.unrender) {
-            // Stop listening to intersections after first appearance if unrendering is not activated
-            this.observer.disconnect()
-          }
-        } else if (this.unrender) {
-          clearTimeout(renderTimer)
-          // Hide the component after a delay if it's no longer in the viewport
-          unrenderTimer = setTimeout(() => {
-            this.fixedMinHeight = this.$el.clientHeight
-            this.render = false
-          }, this.unrenderDelay)
+        if (!props.unrender) {
+          // Stop listening to intersections after first appearance if unrendering is not activated
+          this.observer.disconnect()
         }
-      },
-      { rootMargin: this.rootMargin },
-    )
+      } else if (props.unrender) {
+        clearTimeout(renderTimer)
+        // Hide the component after a delay if it's no longer in the viewport
+        unrenderTimer = setTimeout(() => {
+          fixedMinHeight.value = rootElem.value!.clientHeight
+          render.value = false
+        }, props.unrenderDelay)
+      }
+    },
+    { rootMargin: props.rootMargin },
+  )
 
-    this.observer.observe(this.$el)
-  },
+  observer.value.observe(rootElem.value!)
+})
 
-  beforeUnmount() {
-    this.observer.disconnect()
-  },
-}
+onBeforeUnmount(() => {
+  observer.value!.disconnect()
+})
 </script>
+
+<template>
+  <div
+    ref="rootElem"
+    class="lazy-renderer"
+    :style="`min-height: ${fixedMinHeight}px`"
+  >
+    <slot v-if="render" />
+  </div>
+</template>
diff --git a/app/src/components/MessageListGroup.vue b/app/src/components/MessageListGroup.vue
index 5b32d2126..98355c97e 100644
--- a/app/src/components/MessageListGroup.vue
+++ b/app/src/components/MessageListGroup.vue
@@ -1,6 +1,58 @@
+<script setup lang="ts">
+import type { BListGroup, ColorVariant } from 'bootstrap-vue-next'
+import { computed, nextTick, watch, ref } from 'vue'
+
+type ActionMessage = { color: ColorVariant; text: string }
+
+const props = withDefaults(
+  defineProps<{
+    messages: ActionMessage[]
+    fixedHeight?: boolean
+    bordered?: boolean
+    autoScroll?: boolean
+    limit?: number
+  }>(),
+  {
+    fixedHeight: false,
+    bordered: false,
+    autoScroll: false,
+    limit: undefined,
+  },
+)
+
+const auto = ref(true)
+const rootElem = ref<InstanceType<typeof BListGroup> | null>(null)
+
+if (props.autoScroll) {
+  watch(() => props.messages, scrollToEnd, { deep: true })
+}
+
+const reducedMessages = computed(() => {
+  const len = props.messages.length
+  if (!props.limit || len <= props.limit) {
+    return props.messages
+  }
+  return props.messages.slice(len - props.limit)
+})
+
+function scrollToEnd() {
+  if (!auto.value) return
+  nextTick(() => {
+    rootElem.value!.$el.scrollTo(
+      0,
+      rootElem.value!.$el.lastElementChild.offsetTop,
+    )
+  })
+}
+
+function onScroll(e: Event) {
+  const target = e.target as HTMLElement
+  auto.value = target.scrollHeight === target.scrollTop + target.clientHeight
+}
+</script>
 <template>
   <BListGroup
-    v-bind="$attrs"
+    ref="rootElem"
     flush
     :class="{ 'fixed-height': fixedHeight, bordered: bordered }"
     @scroll="onScroll"
@@ -22,55 +74,6 @@
   </BListGroup>
 </template>
 
-<script>
-export default {
-  name: 'MessageListGroup',
-
-  props: {
-    messages: { type: Array, required: true },
-    fixedHeight: { type: Boolean, default: false },
-    bordered: { type: Boolean, default: false },
-    autoScroll: { type: Boolean, default: false },
-    limit: { type: Number, default: null },
-  },
-
-  data() {
-    return {
-      auto: true,
-    }
-  },
-
-  computed: {
-    reducedMessages() {
-      const len = this.messages.length
-      if (!this.limit || len <= this.limit) {
-        return this.messages
-      }
-      return this.messages.slice(len - this.limit)
-    },
-  },
-
-  methods: {
-    scrollToEnd() {
-      if (!this.auto) return
-      this.$nextTick(() => {
-        this.$el.scrollTo(0, this.$el.lastElementChild.offsetTop)
-      })
-    },
-
-    onScroll({ target }) {
-      this.auto = target.scrollHeight === target.scrollTop + target.clientHeight
-    },
-  },
-
-  created() {
-    if (this.autoScroll) {
-      this.$watch('messages', this.scrollToEnd, { deep: true })
-    }
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .fixed-height {
   max-height: 20vh;
diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index 456a437de..5d79f45a4 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -1,5 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+
+import type { Obj } from '@/types/commons'
+
+const props = withDefaults(
+  defineProps<{
+    request: Obj
+    statusSize?: string
+    showTime?: boolean
+    showError?: boolean
+  }>(),
+  {
+    statusSize: '',
+    showTime: false,
+    showError: false,
+  },
+)
+
+const store = useStore()
+
+const color = computed(() => {
+  const statuses = {
+    pending: 'primary',
+    success: 'success',
+    warning: 'warning',
+    error: 'danger',
+  }
+  return statuses[props.request.status]
+})
+
+const errorsCount = computed(() => {
+  return props.request.messages.filter(({ type }) => type === 'danger').length
+})
+
+const warningsCount = computed(() => {
+  return props.request.messages.filter(({ type }) => type === 'warning').length
+})
+
+function reviewError() {
+  store.dispatch('REVIEW_ERROR', props.request)
+}
+
+function hour(date: Date) {
+  return new Date(date).toLocaleTimeString()
+}
+</script>
+
 <template>
-  <div v-bind="$attrs" class="query-header w-100">
+  <div class="query-header w-100">
     <!-- STATUS -->
     <span
       class="status"
@@ -47,51 +96,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'QueryHeader',
-
-  props: {
-    request: { type: Object, required: true },
-    statusSize: { type: String, default: '' },
-    showTime: { type: Boolean, default: false },
-    showError: { type: Boolean, default: false },
-  },
-
-  computed: {
-    color() {
-      const statuses = {
-        pending: 'primary',
-        success: 'success',
-        warning: 'warning',
-        error: 'danger',
-      }
-      return statuses[this.request.status]
-    },
-
-    errorsCount() {
-      return this.request.messages.filter(({ type }) => type === 'danger')
-        .length
-    },
-
-    warningsCount() {
-      return this.request.messages.filter(({ type }) => type === 'warning')
-        .length
-    },
-  },
-
-  methods: {
-    reviewError() {
-      this.$store.dispatch('REVIEW_ERROR', this.request)
-    },
-
-    hour(date) {
-      return new Date(date).toLocaleTimeString()
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 div {
   display: flex;
diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 66a74f69f..f418f294b 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -1,3 +1,35 @@
+<script setup lang="ts">
+import type { Obj } from '@/types/commons'
+
+const props = withDefaults(
+  defineProps<{
+    tree: Obj
+    flush?: boolean
+    last?: boolean
+    toggleText?: string
+  }>(),
+  {
+    flush: false,
+    last: undefined,
+    toggleText: undefined,
+  },
+)
+
+defineSlots<{
+  default: (props: any) => any
+}>()
+
+function getClasses(node: Obj, i: number) {
+  const children = node.height > 0
+  const opened = children && node.data?.opened
+  const last =
+    props.last !== false &&
+    (!children || !opened) &&
+    i === props.tree.children.length - 1
+  return { collapsible: children, uncollapsible: !children, opened, last }
+}
+</script>
+
 <template>
   <BListGroup :flush="flush" :style="{ '--depth': tree.depth }">
     <template v-for="(node, i) in tree.children" :key="node.id">
@@ -9,7 +41,7 @@
         <slot name="default" v-bind="node" />
 
         <BButton
-          v-if="node.children"
+          v-if="node.height > 0"
           size="xs"
           variant="outline-secondary"
           :aria-expanded="node.data.opened ? 'true' : 'false'"
@@ -24,7 +56,7 @@
       </BListGroupItem>
 
       <BCollapse
-        v-if="node.children"
+        v-if="node.height > 0"
         v-model="node.data.opened"
         :id="'collapse-' + node.id"
       >
@@ -43,31 +75,6 @@
   </BListGroup>
 </template>
 
-<script>
-export default {
-  name: 'RecursiveListGroup',
-
-  props: {
-    tree: { type: Object, required: true },
-    flush: { type: Boolean, default: false },
-    last: { type: Boolean, default: undefined },
-    toggleText: { type: String, default: null },
-  },
-
-  methods: {
-    getClasses(node, i) {
-      const children = node.height > 0
-      const opened = children && node.data.opened
-      const last =
-        this.last !== false &&
-        (!children || !opened) &&
-        i === this.tree.children.length - 1
-      return { collapsible: children, uncollapsible: !children, opened, last }
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .list-group {
   .collapse {
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index 3bdbef920..30a4dceeb 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import type { CustomRoute } from '@/types/commons'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{
+  routes: CustomRoute[]
+}>()
+
+defineSlots<{
+  'tab-top': any
+  'tab-before': any
+  'tab-after': any
+}>()
+</script>
+
 <template>
   <BCard no-body>
     <BCardHeader header-tag="nav">
@@ -32,17 +50,3 @@
     </RouterView>
   </BCard>
 </template>
-
-<script>
-export default {
-  name: 'RoutableTabs',
-
-  // Thanks to `v-bind="$attrs"` and `inheritAttrs: false`, this component can forward
-  // arbitrary attributes (props) directly to its children.
-  inheritAttrs: false,
-
-  props: {
-    routes: { type: Array, required: true },
-  },
-}
-</script>
diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index 10934e691..8ccfffed9 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -1,12 +1,64 @@
+<script setup lang="ts">
+import type { BaseValidation } from '@vuelidate/core'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    submitText?: string
+    validation?: BaseValidation
+    serverError?: string
+    inline?: boolean
+    noFooter?: boolean
+  }>(),
+  {
+    id: 'ynh-form',
+    submitText: undefined,
+    validation: undefined,
+    serverError: '',
+    inline: false,
+    noFooter: false,
+  },
+)
+
+const emit = defineEmits<{
+  submit: [e: SubmitEvent]
+}>()
+
+const { t } = useI18n()
+
+const errorFeedback = computed(() => {
+  const v = props.validation
+  return (
+    props.serverError ||
+    (v && v.$errors.length ? t('form_errors.invalid_form') : '')
+  )
+})
+
+function onSubmit(e: Event) {
+  const v = props.validation
+  if (v) {
+    v.$touch()
+    if (v.$pending || v.$errors.length) return
+  }
+  emit('submit', e as SubmitEvent)
+}
+</script>
+
 <template>
   <div>
     <BCardBody>
       <slot name="disclaimer" />
 
       <BForm
+        v-bind="$attrs"
         :id="id"
         :inline="inline"
-        :class="formClasses"
         novalidate
         @submit.prevent.stop="onSubmit"
       >
@@ -35,44 +87,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'AbstractForm',
-
-  inheritAttrs: false,
-
-  props: {
-    id: { type: String, default: 'ynh-form' },
-    submitText: { type: String, default: null },
-    validation: { type: Object, default: null },
-    serverError: { type: String, default: '' },
-    inline: { type: Boolean, default: false },
-    formClasses: { type: [Array, String, Object], default: null },
-    noFooter: { type: Boolean, default: false },
-  },
-
-  computed: {
-    errorFeedback() {
-      if (this.serverError) return this.serverError
-      else if (this.validation && this.validation.$errors.length) {
-        return this.$t('form_errors.invalid_form')
-      } else return ''
-    },
-  },
-
-  methods: {
-    onSubmit(e) {
-      const v = this.validation
-      if (v) {
-        v.$touch()
-        if (v.$pending || v.$errors.length) return
-      }
-      this.$emit('submit')
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .card-footer {
   display: flex;
diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index 7c7128870..097d0d0f6 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -1,8 +1,62 @@
+<script setup lang="ts">
+import type { BaseValidation } from '@vuelidate/core'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { VueClass } from '@/types/commons'
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    submitText?: string
+    validation?: BaseValidation
+    serverError?: string
+    inline?: boolean
+    formClasses?: VueClass
+    noFooter?: boolean
+  }>(),
+  {
+    id: 'ynh-form',
+    submitText: undefined,
+    validation: undefined,
+    serverError: '',
+    inline: false,
+    formClasses: undefined,
+    noFooter: false,
+  },
+)
+
+const emit = defineEmits<{
+  submit: [e: SubmitEvent]
+}>()
+
+const { t } = useI18n()
+
+const errorFeedback = computed(() => {
+  const v = props.validation
+  return (
+    props.serverError ||
+    (v && v.$errors.length ? t('form_errors.invalid_form') : '')
+  )
+})
+
+function onSubmit(e: Event) {
+  const v = props.validation
+  if (v) {
+    v.$touch()
+    if (v.$pending || v.$errors.length) return
+  }
+  emit('submit', e as SubmitEvent)
+}
+</script>
+
 <template>
+  <!-- FIXME inheritAttrs false? probably remove vbind instead -->
   <YCard v-bind="$attrs" class="card-form">
     <template #default>
       <slot name="disclaimer" />
 
+      {{ serverError }}
       <BForm
         :id="id"
         :inline="inline"
@@ -34,41 +88,3 @@
     </template>
   </YCard>
 </template>
-
-<script>
-export default {
-  name: 'CardForm',
-
-  props: {
-    id: { type: String, default: 'ynh-form' },
-    submitText: { type: String, default: null },
-    validation: { type: Object, default: null },
-    serverError: { type: String, default: '' },
-    inline: { type: Boolean, default: false },
-    formClasses: { type: [Array, String, Object], default: null },
-    noFooter: { type: Boolean, default: false },
-  },
-
-  computed: {
-    errorFeedback() {
-      if (this.serverError) return this.serverError
-      else if (this.validation && this.validation.$errors.length) {
-        return this.$t('form_errors.invalid_form')
-      } else return ''
-    },
-  },
-
-  methods: {
-    onSubmit(e) {
-      const v = this.validation
-      if (v) {
-        v.$touch()
-        if (v.$pending || v.$invalid) return
-      }
-      this.$emit('submit', e)
-    },
-  },
-}
-</script>
-
-<style lang="scss"></style>
diff --git a/app/src/components/globals/DescriptionRow.vue b/app/src/components/globals/DescriptionRow.vue
index 991d0742a..32f538590 100644
--- a/app/src/components/globals/DescriptionRow.vue
+++ b/app/src/components/globals/DescriptionRow.vue
@@ -1,6 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { Cols } from '@/types/commons'
+
+const props = withDefaults(
+  defineProps<{
+    term?: string
+    details?: string
+    cols?: Cols
+  }>(),
+  {
+    term: undefined,
+    details: undefined,
+    cols: () => ({ md: 4, xl: 3 }),
+  },
+)
+
+const cols = computed<Cols>(() => ({
+  md: 4,
+  xl: 3,
+  ...props.cols,
+}))
+</script>
+
 <template>
   <BRow no-gutters class="description-row">
-    <BCol v-bind="cols_">
+    <BCol v-bind="cols">
       <slot name="term">
         <strong>{{ term }}</strong>
       </slot>
@@ -14,24 +39,6 @@
   </BRow>
 </template>
 
-<script>
-export default {
-  name: 'DescriptionRow',
-
-  props: {
-    term: { type: String, default: null },
-    details: { type: String, default: null },
-    cols: { type: Object, default: () => ({ md: 4, xl: 3 }) },
-  },
-
-  computed: {
-    cols_() {
-      return Object.assign({ md: 4, xl: 3 }, this.cols)
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .description-row {
   @include media-breakpoint-up(md) {
diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index cc27000af..2940df7c1 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+import type { ColorVariant } from 'bootstrap-vue-next'
+import { ref } from 'vue'
+
+withDefaults(
+  defineProps<{
+    id: string
+    title: string
+    content: string
+    variant?: ColorVariant
+  }>(),
+  {
+    variant: 'info',
+  },
+)
+
+const open = ref(false)
+</script>
+
 <template>
   <span class="explain-what">
     <slot name="default" />
@@ -27,31 +46,6 @@
   </span>
 </template>
 
-<script>
-export default {
-  name: 'ExplainWhat',
-
-  props: {
-    id: { type: String, required: true },
-    title: { type: String, required: true },
-    content: { type: String, required: true },
-    variant: { type: String, default: 'info' },
-  },
-
-  computed: {
-    cols_() {
-      return Object.assign({ md: 4, xl: 3 }, this.cols)
-    },
-  },
-
-  data() {
-    return {
-      open: false,
-    }
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .explain-what {
   line-height: 1.2;
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 16b58903b..138277b88 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -1,9 +1,130 @@
+<script setup lang="ts">
+import type { BaseValidation } from '@vuelidate/core'
+import type { BaseColorVariant } from 'bootstrap-vue-next'
+import { computed, provide, useAttrs, type Component } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { Obj } from '@/types/commons'
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'FormField',
+})
+
+const props = withDefaults(
+  defineProps<{
+    // Component props (other <form-group> related attrs are passed thanks to $attrs)
+    id?: string
+    description?: string
+    descriptionVariant?: BaseColorVariant
+    link?: { href: string; text: string }
+    component?: Component | string // FIXME limit to formItems?
+    modelValue?: unknown
+    props?: Obj
+    validation?: BaseValidation
+    validationIndex?: number
+  }>(),
+  {
+    id: undefined,
+    description: undefined,
+    descriptionVariant: undefined,
+    link: undefined,
+    component: 'InputItem',
+    modelValue: undefined,
+    props: () => ({}),
+    validation: undefined,
+    validationIndex: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const { t } = useI18n()
+
+function touch(name: string) {
+  if (props.validation) {
+    // For fields that have multiple elements
+    if (name) {
+      props.validation[name].$touch()
+    } else {
+      props.validation.$touch()
+    }
+  }
+}
+
+provide('touch', touch)
+
+const attrs_ = useAttrs()
+const attrs = computed(() => {
+  const attrs = { ...attrs_ }
+
+  if ('label' in attrs) {
+    const defaultAttrs = {
+      'label-cols-md': 4,
+      'label-cols-lg': 3,
+      'label-class': ['fw-bold', 'py-0'],
+    }
+
+    if (!('label-cols' in attrs)) {
+      let attr: keyof typeof defaultAttrs
+      for (attr in defaultAttrs) {
+        if (!(attr in attrs)) attrs[attr] = defaultAttrs[attr]
+      }
+    } else if (!('label-class' in attrs)) {
+      attrs['label-class'] = defaultAttrs['label-class']
+    }
+  }
+
+  return attrs
+})
+
+const id = computed(() => {
+  if (props.id) return props.id
+  const childId = props.props.id || attrs_['label-for']
+  return childId ? childId + '_group' : null
+})
+
+const error = computed(() => {
+  const v = props.validation
+  if (v) {
+    if (props.validationIndex !== undefined) {
+      const errors = v.$each.$response.$errors[props.validationIndex]
+      const err = Object.values(errors).find((part) => {
+        return part.length
+      })
+      return err?.length ? err[0] : null
+    }
+    return v.$errors.length ? { ...v.$errors[0], $model: v.$model } : null
+  }
+  return null
+})
+
+const state = computed(() => {
+  // Need to set state as null if no error, else component turn green
+  return error.value ? false : null
+})
+
+const errorMessage = computed(() => {
+  const err = error.value
+  if (err) {
+    if (err.$message) return err.$message
+    return t('form_errors.' + err.$validator, {
+      value: err.$model,
+      ...err.$params,
+    })
+  }
+  return ''
+})
+</script>
+
 <template>
   <!-- v-bind="$attrs" allow to pass default attrs not specified in this component slots -->
   <BFormGroup
     v-bind="attrs"
-    :id="_id"
-    :label-for="$attrs['label-for'] || props.id"
+    :id="id"
+    :label-for="attrs['label-for'] || props.id"
     :state="state"
     @touch="touch"
   >
@@ -11,10 +132,10 @@
     <slot v-bind="{ self: { ...props, state }, touch }">
       <!-- if no component was passed as slot, render a component from the props -->
       <Component
-        v-bind="props"
+        v-bind="props.props"
         :is="component"
         :modelValue="modelValue"
-        @update:modelValue="$emit('update:modelValue', $event)"
+        @update:modelValue="emit('update:modelValue', $event)"
         :state="state"
         :required="validation ? 'required' in validation : false"
       />
@@ -47,107 +168,6 @@
   </BFormGroup>
 </template>
 
-<script>
-import { provide } from 'vue'
-
-export default {
-  name: 'FormField',
-
-  inheritAttrs: false,
-
-  props: {
-    // Component props (other <form-group> related attrs are passed thanks to $attrs)
-    id: { type: String, default: null },
-    description: { type: String, default: null },
-    descriptionVariant: { type: String, default: null },
-    link: { type: Object, default: null },
-    // Rendered field component props
-    component: { type: String, default: 'InputItem' },
-    modelValue: { type: null, default: null },
-    props: { type: Object, default: () => ({}) },
-    validation: { type: Object, default: null },
-    validationIndex: { type: Number, default: null },
-  },
-
-  setup(props) {
-    function touch(name) {
-      if (props.validation) {
-        // For fields that have multiple elements
-        if (name) {
-          props.validation[name].$touch()
-        } else {
-          props.validation.$touch()
-        }
-      }
-    }
-    provide('touch', touch)
-
-    return { touch }
-  },
-
-  computed: {
-    _id() {
-      if (this.id) return this.id
-      const childId = this.props.id || this.$attrs['label-for']
-      return childId ? childId + '_group' : null
-    },
-
-    attrs() {
-      const attrs = { ...this.$attrs }
-      if ('label' in attrs) {
-        const defaultAttrs = {
-          'label-cols-md': 4,
-          'label-cols-lg': 3,
-          'label-class': ['fw-bold', 'py-0'],
-        }
-        if (!('label-cols' in attrs)) {
-          for (const attr in defaultAttrs) {
-            if (!(attr in attrs)) attrs[attr] = defaultAttrs[attr]
-          }
-        } else if (!('label-class' in attrs)) {
-          attrs['label-class'] = defaultAttrs['label-class']
-        }
-      }
-      return attrs
-    },
-
-    error() {
-      if (this.validation) {
-        if (this.validationIndex !== null) {
-          const errors =
-            this.validation.$each.$response.$errors[this.validationIndex]
-          const err = Object.values(errors).find((part) => {
-            return part.length
-          })
-          return err?.length ? err[0] : null
-        }
-        return this.validation.$errors.length
-          ? { ...this.validation.$errors[0], $model: this.validation.$model }
-          : null
-      }
-      return null
-    },
-
-    state() {
-      // Need to set state as null if no error, else component turn green
-      return this.error ? false : null
-    },
-
-    errorMessage() {
-      const err = this.error
-      if (err) {
-        if (err.$message) return err.$message
-        return this.$t('form_errors.' + err.$validator, {
-          value: err.$model,
-          ...err.$params,
-        })
-      }
-      return ''
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 :deep(.invalid-feedback code) {
   background-color: $gray-200;
diff --git a/app/src/components/globals/ReadOnlyField.vue b/app/src/components/globals/ReadOnlyField.vue
index 1fedf9521..097034143 100644
--- a/app/src/components/globals/ReadOnlyField.vue
+++ b/app/src/components/globals/ReadOnlyField.vue
@@ -1,6 +1,56 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { Cols } from '@/types/commons'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    component?: string
+    // FIXME modelValue? not a modelValue but idk
+    value?: any
+    cols?: Cols
+  }>(),
+  {
+    component: 'InputItem',
+    value: null,
+    cols: () => ({ md: 4, lg: 3 }),
+  },
+)
+
+const { t } = useI18n()
+
+const cols = computed<Cols>(() => ({
+  md: 4,
+  xl: 3,
+  ...props.cols,
+}))
+
+const text = computed(() => {
+  return parseValue(props.value)
+})
+
+function parseValue(value: any) {
+  const item = props.component
+  if (item === 'FileItem') value = value.file ? value.file.name : null
+  if (item === 'CheckboxItem') value = t(value ? 'yes' : 'no')
+  if (item === 'TextAreaItem') value = value.replaceAll('\n', '<br>')
+  if (Array.isArray(value)) {
+    value = value.length ? value.join(t('words.separator')) : null
+  }
+  if ([null, undefined, ''].includes(props.value)) value = t('words.none')
+  return value
+}
+</script>
+
 <template>
   <BRow no-gutters class="description-row">
-    <BCol v-bind="cols_" class="fw-bold">
+    <BCol v-bind="cols" class="fw-bold">
       {{ label }}
     </BCol>
 
@@ -11,46 +61,6 @@
   </BRow>
 </template>
 
-<script>
-export default {
-  name: 'ReadOnlyField',
-
-  inheritAttrs: false,
-
-  props: {
-    label: { type: String, required: true },
-    component: { type: String, default: 'InputItem' },
-    value: { type: null, default: null },
-    cols: { type: Object, default: () => ({ md: 4, lg: 3 }) },
-  },
-
-  computed: {
-    cols_() {
-      return Object.assign({ md: 4, lg: 3 }, this.cols)
-    },
-
-    text() {
-      return this.parseValue(this.value)
-    },
-  },
-
-  methods: {
-    parseValue(value) {
-      const item = this.component
-      if (item === 'FileItem') value = value.file ? value.file.name : null
-      if (item === 'CheckboxItem') value = this.$t(value ? 'yes' : 'no')
-      if (item === 'TextAreaItem') value = value.replaceAll('\n', '<br>')
-      if (Array.isArray(value)) {
-        value = value.length ? value.join(this.$t('words.separator')) : null
-      }
-      if ([null, undefined, ''].includes(this.value))
-        value = this.$t('words.none')
-      return value
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .description-row {
   @include media-breakpoint-up(md) {
diff --git a/app/src/components/globals/TopBar.vue b/app/src/components/globals/TopBar.vue
index 72ba209e1..61f679049 100644
--- a/app/src/components/globals/TopBar.vue
+++ b/app/src/components/globals/TopBar.vue
@@ -1,50 +1,37 @@
+<script setup lang="ts">
+import type { CustomRoute } from '@/types/commons'
+
+defineProps<{
+  label?: string
+  button?: CustomRoute
+}>()
+
+const slots = defineSlots<{
+  'group-left': any
+  'group-right': any
+}>()
+</script>
+
 <template>
   <BButtonToolbar :aria-label="label" id="top-bar">
-    <div id="top-bar-left" class="top-bar-group" v-if="hasLeftSlot">
+    <div id="top-bar-left" class="top-bar-group" v-if="slots['group-left']">
       <slot name="group-left" />
     </div>
 
-    <div id="top-bar-right" class="top-bar-group" v-if="hasRightSlot || button">
-      <slot v-if="hasRightSlot" name="group-right" />
+    <div
+      v-if="slots['group-right'] || button"
+      id="top-bar-right"
+      class="top-bar-group"
+    >
+      <slot v-if="slots['group-right']" name="group-right" />
 
-      <BButton v-else variant="success" :to="button.to">
+      <BButton v-else-if="button" variant="success" :to="button.to">
         <YIcon v-if="button.icon" :iname="button.icon" /> {{ button.text }}
       </BButton>
     </div>
   </BButtonToolbar>
 </template>
 
-<script>
-export default {
-  name: 'TopBar',
-
-  props: {
-    label: { type: String, default: null },
-    button: {
-      type: Object,
-      default: null,
-      validator(value) {
-        return ['text', 'to'].every((prop) => prop in value)
-      },
-    },
-  },
-
-  data() {
-    return {
-      hasLeftSlot: null,
-      hasRightSlot: null,
-    }
-  },
-
-  created() {
-    this.$nextTick(() => {
-      this.hasLeftSlot = 'group-left' in this.$slots
-      this.hasRightSlot = 'group-right' in this.$slots
-    })
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 #top-bar {
   margin-bottom: 1rem;
diff --git a/app/src/components/globals/ViewBase.vue b/app/src/components/globals/ViewBase.vue
index f1c696848..e30138e5e 100644
--- a/app/src/components/globals/ViewBase.vue
+++ b/app/src/components/globals/ViewBase.vue
@@ -1,6 +1,72 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { computed, ref } from 'vue'
+
+import api from '@/api'
+
+// FIXME type queries
+const props = withDefaults(
+  defineProps<{
+    queries?: any[]
+    queriesWait?: boolean
+    skeleton?: string | Component
+    loading?: boolean
+  }>(),
+  {
+    queries: undefined,
+    queriesWait: false,
+    skeleton: undefined,
+    loading: undefined,
+  },
+)
+
+const slots = defineSlots<{
+  'top-bar-group-left': any
+  'top-bar-group-right': any
+  'top-bar': any
+  top(props: { loading: boolean }): any
+  default(props: { loading: boolean }): any
+  bot(props: { loading: boolean }): any
+  skeleton: any
+}>()
+
+const emit = defineEmits<{
+  'queries-response': any[]
+}>()
+
+defineExpose({ fetchQueries })
+
+const fallbackLoading = ref(
+  props.loading === undefined && props.queries !== undefined ? true : null,
+)
+
+const isLoading = computed(() => {
+  if (props.loading !== undefined) return props.loading
+  return fallbackLoading.value
+})
+
+function fetchQueries({ triggerLoading = false } = {}) {
+  if (triggerLoading) {
+    fallbackLoading.value = true
+  }
+
+  return api
+    .fetchAll(props.queries, { wait: props.queriesWait, initial: true })
+    .then((responses) => {
+      emit('queries-response', ...responses)
+      fallbackLoading.value = false
+      return responses
+    })
+}
+
+if (props.queries) {
+  fetchQueries()
+}
+</script>
+
 <template>
   <div>
-    <TopBar v-if="hasTopBar">
+    <TopBar v-if="slots['top-bar-group-left'] || slots['top-bar-group-right']">
       <template #group-left>
         <slot name="top-bar-group-left" />
       </template>
@@ -28,58 +94,3 @@
     <slot name="bot" v-bind="{ loading: isLoading }" />
   </div>
 </template>
-
-<script>
-import api from '@/api'
-
-export default {
-  name: 'ViewBase',
-
-  props: {
-    queries: { type: Array, default: null },
-    queriesWait: { type: Boolean, default: false },
-    skeleton: { type: [String, Array], default: null },
-    // Optional prop to take control of the loading value
-    loading: { type: Boolean, default: null },
-  },
-
-  data() {
-    return {
-      fallback_loading:
-        this.loading === null && this.queries !== null ? true : null,
-    }
-  },
-
-  computed: {
-    isLoading() {
-      if (this.loading !== null) return this.loading
-      return this.fallback_loading
-    },
-
-    hasTopBar() {
-      return ['top-bar-group-left', 'top-bar-group-right'].some(
-        (slotName) => slotName in this.$slots,
-      )
-    },
-  },
-
-  methods: {
-    fetchQueries({ triggerLoading = false } = {}) {
-      if (triggerLoading) {
-        this.fallback_loading = true
-      }
-
-      api
-        .fetchAll(this.queries, { wait: this.queriesWait, initial: true })
-        .then((responses) => {
-          this.$emit('queries-response', ...responses)
-          this.fallback_loading = false
-        })
-    },
-  },
-
-  created() {
-    if (this.queries) this.fetchQueries()
-  },
-}
-</script>
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index 8a1a7cc4b..a52aa1ad4 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -1,9 +1,43 @@
+<script setup lang="ts" generic="T extends Obj">
+import type { Component } from 'vue'
+
+import type { Obj } from '@/types/commons'
+
+const props = withDefaults(
+  defineProps<{
+    items: T[] | null
+    itemsName: string | null
+    filteredItems: T[] | null
+    search?: string
+    skeleton?: string | Component
+  }>(),
+  {
+    search: undefined,
+    skeleton: 'ListGroupSkeleton',
+  },
+)
+
+const slots = defineSlots<{
+  'top-bar': any
+  'top-bar-buttons': any
+  top: any
+  'alert-message': any
+  default: any
+  bot: any
+  skeleton: any
+}>()
+
+const emit = defineEmits<{
+  'update:search': [value: string]
+}>()
+</script>
+
 <template>
-  <ViewBase v-bind="$attrs" :skeleton="skeleton">
-    <template v-if="hasCustomTopBar" #top-bar>
+  <ViewBase :skeleton="skeleton">
+    <template v-if="slots['top-bar']" #top-bar>
       <slot name="top-bar" />
     </template>
-    <template v-if="!hasCustomTopBar" #top-bar-group-left>
+    <template v-if="!slots['top-bar']" #top-bar-group-left>
       <BInputGroup class="w-100">
         <BInputGroupText>
           <YIcon iname="search" />
@@ -12,7 +46,7 @@
         <BFormInput
           id="top-bar-search"
           :modelValue="search"
-          @update:modelValue="$emit('update:search', $event)"
+          @update:modelValue="emit('update:search', $event)"
           :placeholder="
             $t('search.for', { items: $t('items.' + itemsName, 2) })
           "
@@ -20,7 +54,7 @@
         />
       </BInputGroup>
     </template>
-    <template v-if="!hasCustomTopBar" #top-bar-group-right>
+    <template v-if="!slots['top-bar']" #top-bar-group-right>
       <slot name="top-bar-buttons" />
     </template>
 
@@ -60,23 +94,3 @@
     </template>
   </ViewBase>
 </template>
-
-<script>
-export default {
-  name: 'ViewSearch',
-
-  props: {
-    items: { type: null, required: true },
-    itemsName: { type: String, required: true },
-    filteredItems: { type: null, required: true },
-    search: { type: String, default: null },
-    skeleton: { type: String, default: 'ListGroupSkeleton' },
-  },
-
-  computed: {
-    hasCustomTopBar() {
-      return 'top-bar' in this.$slots
-    },
-  },
-}
-</script>
diff --git a/app/src/components/globals/YAlert.vue b/app/src/components/globals/YAlert.vue
index 7456636e4..d91a3c99b 100644
--- a/app/src/components/globals/YAlert.vue
+++ b/app/src/components/globals/YAlert.vue
@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
+
+const props = withDefaults(
+  defineProps<{
+    alert?: boolean
+    variant?: keyof typeof DEFAULT_STATUS_ICON
+    icon?: string
+  }>(),
+  {
+    alert: false,
+    variant: 'info',
+    icon: undefined,
+  },
+)
+
+const icon = computed(() => {
+  return props.icon || DEFAULT_STATUS_ICON[props.variant]
+})
+</script>
+
 <template>
   <Component
     v-bind="$attrs"
@@ -7,31 +30,10 @@
     :class="{ ['alert alert-' + variant]: !alert }"
     class="yuno-alert d-flex flex-column flex-md-row align-items-center"
   >
-    <YIcon :iname="_icon" class="me-md-3 mb-md-0 mb-2 md" />
+    <YIcon :iname="icon" class="me-md-3 mb-md-0 mb-2 md" />
 
     <div class="w-100">
       <slot name="default" />
     </div>
   </Component>
 </template>
-
-<script>
-import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
-
-export default {
-  name: 'YAlert',
-
-  props: {
-    alert: { type: Boolean, default: false },
-    variant: { type: String, default: 'info' },
-    icon: { type: String, default: null },
-  },
-
-  computed: {
-    _icon() {
-      if (this.icon) return this.icon
-      return DEFAULT_STATUS_ICON[this.variant]
-    },
-  },
-}
-</script>
diff --git a/app/src/components/globals/YBreadcrumb.vue b/app/src/components/globals/YBreadcrumb.vue
index 6e30430ec..c8033ec27 100644
--- a/app/src/components/globals/YBreadcrumb.vue
+++ b/app/src/components/globals/YBreadcrumb.vue
@@ -1,3 +1,16 @@
+<script setup lang="ts">
+import { useStoreGetters } from '@/store/utils'
+
+const { breadcrumb } = useStoreGetters()
+</script>
+
+<style lang="scss" scoped>
+.breadcrumb {
+  border: none;
+  background-color: transparent;
+}
+</style>
+
 <template>
   <BBreadcrumb v-if="breadcrumb.length">
     <BBreadcrumbItem to="/">
@@ -15,22 +28,3 @@
     </BBreadcrumbItem>
   </BBreadcrumb>
 </template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-export default {
-  name: 'YBreadcrumb',
-
-  computed: {
-    ...mapGetters(['breadcrumb']),
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.breadcrumb {
-  border: none;
-  background-color: transparent;
-}
-</style>
diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index 6a1c3429f..327a7440c 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -1,5 +1,41 @@
+<script setup lang="ts">
+import type { Breakpoint } from 'bootstrap-vue-next'
+import { ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    title?: string
+    titleTag?: string
+    icon?: string
+    collapsable?: boolean
+    collapsed?: boolean
+    buttonUnbreak?: Breakpoint
+  }>(),
+  {
+    id: 'ynh-form',
+    title: undefined,
+    titleTag: 'h2',
+    icon: undefined,
+    collapsable: false,
+    collapsed: false,
+    buttonUnbreak: 'md',
+  },
+)
+
+const slots = defineSlots<{
+  header: any
+  'header-next': any
+  'header-buttons': any
+  default: any
+  buttons: any
+}>()
+
+const visible = ref(!props.collapsed)
+</script>
+
 <template>
-  <BCard v-bind="$attrs" :no-body="collapsable ? true : $attrs['no-body']">
+  <BCard :no-body="collapsable ? true : $attrs['no-body']">
     <template #header>
       <div class="w-100 d-flex align-items-center flex-wrap custom-header">
         <slot name="header">
@@ -10,7 +46,7 @@
         </slot>
 
         <div
-          v-if="hasButtons"
+          v-if="slots['header-buttons']"
           class="mt-2 w-100 custom-header-buttons"
           :class="{
             [`ms-${buttonUnbreak}-auto mt-${buttonUnbreak}-0 w-${buttonUnbreak}-auto`]:
@@ -48,40 +84,12 @@
       <slot name="default" />
     </template>
 
-    <template #footer v-if="'buttons' in $slots">
+    <template #footer v-if="slots['buttons']">
       <slot name="buttons" />
     </template>
   </BCard>
 </template>
 
-<script>
-export default {
-  name: 'YCard',
-
-  props: {
-    id: { type: String, default: 'ynh-form' },
-    title: { type: String, default: null },
-    titleTag: { type: String, default: 'h2' },
-    icon: { type: String, default: null },
-    collapsable: { type: Boolean, default: false },
-    collapsed: { type: Boolean, default: false },
-    buttonUnbreak: { type: String, default: 'md' },
-  },
-
-  data() {
-    return {
-      visible: !this.collapsed,
-    }
-  },
-
-  computed: {
-    hasButtons() {
-      return 'header-buttons' in this.$slots
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 :deep(.card-header) {
   display: flex;
diff --git a/app/src/components/globals/YIcon.vue b/app/src/components/globals/YIcon.vue
index e25beedc8..9e48cbad3 100644
--- a/app/src/components/globals/YIcon.vue
+++ b/app/src/components/globals/YIcon.vue
@@ -1,3 +1,12 @@
+<script setup lang="ts">
+import type { ColorVariant } from 'bootstrap-vue-next'
+
+defineProps<{
+  iname: string
+  variant?: ColorVariant
+}>()
+</script>
+
 <template>
   <span
     :class="['icon fa fa-' + iname, variant ? 'variant ' + variant : '']"
@@ -5,16 +14,6 @@
   />
 </template>
 
-<script>
-export default {
-  name: 'YIcon',
-  props: {
-    iname: { type: String, required: true },
-    variant: { type: String, default: null },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .icon {
   font-size: inherit;
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index 5ac6962f8..73f8c080e 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -1,7 +1,46 @@
+<script setup lang="ts">
+import type { Breakpoint, ColorVariant } from 'bootstrap-vue-next'
+import { computed } from 'vue'
+
+import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
+
+const props = withDefaults(
+  defineProps<{
+    variant?: ColorVariant
+    icon?: string
+    noIcon?: boolean
+    noStatus?: boolean
+    size?: Breakpoint
+    faded?: boolean
+  }>(),
+  {
+    variant: 'light',
+    icon: undefined,
+    noIcon: false,
+    noStatus: false,
+    size: undefined,
+    faded: false,
+  },
+)
+
+const icon = computed(() => {
+  if (props.noIcon) return
+  return props.icon || DEFAULT_STATUS_ICON[props.variant]
+})
+const class_ = computed(() => {
+  const baseClass = 'yuno-list-group-item-'
+  return [
+    baseClass + props.size,
+    baseClass + props.variant,
+    { [baseClass + 'faded']: props.faded },
+  ]
+})
+</script>
+
 <template>
-  <BListGroupItem v-bind="$attrs" class="yuno-list-group-item" :class="_class">
+  <BListGroupItem v-bind="$attrs" class="yuno-list-group-item" :class="class_">
     <div v-if="!noStatus" class="yuno-list-group-item-status">
-      <YIcon v-if="_icon" :iname="_icon" :class="['icon-' + variant]" />
+      <YIcon v-if="icon" :iname="icon" :class="['icon-' + variant]" />
     </div>
 
     <div class="yuno-list-group-item-content">
@@ -10,38 +49,6 @@
   </BListGroupItem>
 </template>
 
-<script>
-import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
-
-export default {
-  name: 'YListGroupItem',
-
-  props: {
-    variant: { type: String, default: 'white' },
-    icon: { type: String, default: null },
-    noIcon: { type: Boolean, default: false },
-    noStatus: { type: Boolean, default: false },
-    size: { type: String, default: 'md' },
-    faded: { type: Boolean, default: false },
-  },
-
-  computed: {
-    _icon() {
-      return this.noIcon ? null : this.icon || DEFAULT_STATUS_ICON[this.variant]
-    },
-
-    _class() {
-      const baseClass = 'yuno-list-group-item-'
-      return [
-        baseClass + this.size,
-        baseClass + this.variant,
-        { [baseClass + 'faded']: this.faded },
-      ]
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .yuno-list-group-item {
   display: flex;
diff --git a/app/src/components/globals/YSpinner.vue b/app/src/components/globals/YSpinner.vue
index a5741d68c..9c55c5eb1 100644
--- a/app/src/components/globals/YSpinner.vue
+++ b/app/src/components/globals/YSpinner.vue
@@ -1,19 +1,13 @@
+<script setup lang="ts">
+import { useStoreGetters } from '@/store/utils'
+
+const { spinner } = useStoreGetters()
+</script>
+
 <template>
   <div :class="['custom-spinner', spinner]" />
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-export default {
-  name: 'YSpinner',
-
-  computed: {
-    ...mapGetters(['spinner']),
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .custom-spinner {
   animation: 8s linear infinite;
diff --git a/app/src/components/globals/formItems/ButtonItem.vue b/app/src/components/globals/formItems/ButtonItem.vue
index bac857995..55a89c2c7 100644
--- a/app/src/components/globals/formItems/ButtonItem.vue
+++ b/app/src/components/globals/formItems/ButtonItem.vue
@@ -1,39 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    id?: string
+    type?: 'success' | 'info' | 'warning' | 'danger'
+    icon?: string
+    enabled?: string | boolean
+  }>(),
+  {
+    label: undefined,
+    id: undefined,
+    type: 'success',
+    icon: undefined,
+    enabled: true,
+  },
+)
+
+const emit = defineEmits(['action'])
+
+const icon = computed(() => {
+  const icons = {
+    success: 'thumbs-up',
+    info: 'info',
+    warning: 'exclamation',
+    danger: 'times',
+  }
+
+  return props.icon || icons[props.type]
+})
+</script>
+
 <template>
   <BButton
     :id="id"
     :variant="type"
-    @click="$emit('action', $event)"
+    @click="emit('action', $event)"
     :disabled="!enabled"
     class="d-block mb-3"
   >
-    <YIcon :iname="icon_" class="me-2" />
+    <YIcon :iname="icon" class="me-2" />
     <span v-html="label" />
   </BButton>
 </template>
-
-<script>
-export default {
-  name: 'ButtonItem',
-
-  props: {
-    label: { type: String, default: null },
-    id: { type: String, default: null },
-    type: { type: String, default: 'success' },
-    icon: { type: String, default: null },
-    enabled: { type: [Boolean, String], default: true },
-  },
-
-  computed: {
-    icon_() {
-      const icons = {
-        success: 'thumbs-up',
-        info: 'info',
-        warning: 'exclamation',
-        danger: 'times',
-      }
-
-      return this.icon || icons[this.type]
-    },
-  },
-}
-</script>
diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index 7da516a77..01a464c74 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -1,7 +1,27 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    modelValue: boolean
+    id?: string
+    label?: string
+    labels?: { true: string; false: string }
+  }>(),
+  {
+    id: undefined,
+    label: undefined,
+    labels: () => ({ true: 'yes', false: 'no' }),
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+</script>
+
 <template>
   <BFormCheckbox
     :modelValue="modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
+    @update:modelValue="emit('update:modelValue', $event)"
     :id="id"
     :aria-describedby="$parent.id + '__BV_description_'"
     switch
@@ -9,16 +29,3 @@
     {{ label || $t(labels[modelValue]) }}
   </BFormCheckbox>
 </template>
-
-<script>
-export default {
-  name: 'CheckboxItem',
-
-  props: {
-    modelValue: { type: Boolean, required: true },
-    id: { type: String, default: null },
-    label: { type: String, default: null },
-    labels: { type: Object, default: () => ({ true: 'yes', false: 'no' }) },
-  },
-}
-</script>
diff --git a/app/src/components/globals/formItems/DisplayTextItem.vue b/app/src/components/globals/formItems/DisplayTextItem.vue
index 3b85983ce..a4c219341 100644
--- a/app/src/components/globals/formItems/DisplayTextItem.vue
+++ b/app/src/components/globals/formItems/DisplayTextItem.vue
@@ -1,16 +1,18 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+  }>(),
+  {
+    id: undefined,
+    label: undefined,
+  },
+)
+</script>
+
 <template>
   <div>
     <p v-text="label" />
   </div>
 </template>
-
-<script>
-export default {
-  name: 'DisplayTextItem',
-
-  props: {
-    id: { type: String, default: null },
-    label: { type: String, default: null },
-  },
-}
-</script>
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index ecadae23e..c4ce4c9be 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -1,8 +1,84 @@
+<script setup lang="ts">
+import type { BFormFile } from 'bootstrap-vue-next'
+import { computed, inject, ref } from 'vue'
+
+import { getFileContent } from '@/helpers/commons'
+
+type CustomFile = {
+  file: File | null
+  content?: string | null
+  current?: boolean
+  removed?: boolean
+}
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    modelValue?: CustomFile
+    placeholder?: string
+    dropPlaceholder?: string
+    accept?: string
+    state?: string
+    required?: boolean
+    name?: string
+  }>(),
+  {
+    id: undefined,
+    modelValue: () => ({ file: null }),
+    placeholder: 'Choose a file or drop it here...',
+    dropPlaceholder: undefined,
+    accept: '',
+    state: undefined,
+    required: false,
+    name: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: CustomFile]
+}>()
+
+const touch = inject('touch')
+const inputElem = ref<InstanceType<typeof BFormFile> | null>(null)
+
+const _placeholder = computed(() => {
+  return props.modelValue.file === null
+    ? props.placeholder
+    : props.modelValue.file.name
+})
+
+function onInput(file: File | File[] | null) {
+  const value = {
+    file: file as File | null,
+    content: file !== null ? '' : null,
+    current: false,
+    removed: false,
+  }
+  // Update the value with the new File and an empty content for now
+  emit('update:modelValue', value)
+
+  // Asynchronously load the File content and update the value again
+  getFileContent(file as File).then((content) => {
+    emit('update:modelValue', { ...value, content })
+  })
+}
+
+function clearFiles() {
+  inputElem.value!.reset()
+  emit('update:modelValue', {
+    file: null,
+    content: '',
+    current: false,
+    removed: true,
+  })
+}
+</script>
+
 <template>
   <BInputGroup class="w-100">
     <template #append>
       <BButton
-        v-if="!this.required && this.modelValue.file !== null"
+        v-if="!required && modelValue.file !== null"
         @click="clearFiles"
         variant="danger"
       >
@@ -13,7 +89,7 @@
 
     <BFormFile
       :modelValue="modelValue.file"
-      ref="input-file"
+      ref="inputElem"
       :id="id"
       :required="required"
       :placeholder="_placeholder"
@@ -28,68 +104,6 @@
   </BInputGroup>
 </template>
 
-<script>
-import { inject } from 'vue'
-import { getFileContent } from '@/helpers/commons'
-
-export default {
-  name: 'FileItem',
-
-  props: {
-    id: { type: String, default: null },
-    modelValue: { type: Object, default: () => ({ file: null }) },
-    placeholder: { type: String, default: 'Choose a file or drop it here...' },
-    dropPlaceholder: { type: String, default: null },
-    accept: { type: String, default: '' },
-    state: { type: Boolean, default: null },
-    required: { type: Boolean, default: false },
-    name: { type: String, default: null },
-  },
-
-  setup() {
-    return {
-      touch: inject('touch'),
-    }
-  },
-
-  computed: {
-    _placeholder: function () {
-      return this.modelValue.file === null
-        ? this.placeholder
-        : this.modelValue.file.name
-    },
-  },
-
-  methods: {
-    onInput(file) {
-      const value = {
-        file,
-        content: '',
-        current: false,
-        removed: false,
-      }
-      // Update the value with the new File and an empty content for now
-      this.$emit('update:modelValue', value)
-
-      // Asynchronously load the File content and update the value again
-      getFileContent(file).then((content) => {
-        this.$emit('update:modelValue', { ...value, content })
-      })
-    },
-
-    clearFiles() {
-      this.$refs['input-file'].reset()
-      this.$emit('update:modelValue', {
-        file: null,
-        content: '',
-        current: false,
-        removed: true,
-      })
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 // fix https://getbootstrap.com/docs/5.2/migration/#forms
 :deep(.custom-file-label) {
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index 7bedd046c..44c3efb6e 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -1,7 +1,53 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number | null
+    id?: string
+    placeholder?: string
+    type?: string
+    required?: boolean
+    state?: false | null
+    min?: number
+    max?: number
+    step?: number
+    trim?: boolean
+    autocomplete?: string
+    // FIXME pattern?
+    pattern?: object
+    name?: string
+  }>(),
+  {
+    modelValue: null,
+    id: undefined,
+    placeholder: undefined,
+    type: 'text',
+    required: false,
+    state: undefined,
+    min: undefined,
+    max: undefined,
+    step: undefined,
+    trim: true,
+    autocomplete: undefined,
+    pattern: undefined,
+    name: undefined,
+  },
+)
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | null]
+}>()
+
+const touch = inject('touch')
+
+const autocomplete =
+  props.autocomplete || props.type === 'password' ? 'new-password' : null
+</script>
+
 <template>
   <BFormInput
     :modelValue="modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
+    @update:modelValue="emit('update:modelValue', $event)"
     :id="id"
     :placeholder="placeholder"
     :type="type"
@@ -11,47 +57,7 @@
     :max="max"
     :step="step"
     :trim="trim"
-    :autocomplete="autocomplete_"
+    :autocomplete="autocomplete"
     @blur="touch(name)"
   />
 </template>
-
-<script>
-import { inject } from 'vue'
-
-export default {
-  name: 'InputItem',
-
-  props: {
-    modelValue: { type: [String, Number], default: null },
-    id: { type: String, default: null },
-    placeholder: { type: String, default: null },
-    type: { type: String, default: 'text' },
-    required: { type: Boolean, default: false },
-    state: { type: Boolean, default: null },
-    min: { type: Number, default: null },
-    max: { type: Number, default: null },
-    step: { type: Number, default: null },
-    trim: { type: Boolean, default: true },
-    autocomplete: { type: String, default: null },
-    pattern: { type: Object, default: null },
-    name: { type: String, default: null },
-  },
-
-  setup() {
-    return {
-      touch: inject('touch'),
-    }
-  },
-
-  data() {
-    return {
-      autocomplete_: this.autocomplete
-        ? this.autocomplete
-        : this.type === 'password'
-          ? 'new-password'
-          : null,
-    }
-  },
-}
-</script>
diff --git a/app/src/components/globals/formItems/MarkdownItem.vue b/app/src/components/globals/formItems/MarkdownItem.vue
index 8f9501688..26a245e9b 100644
--- a/app/src/components/globals/formItems/MarkdownItem.vue
+++ b/app/src/components/globals/formItems/MarkdownItem.vue
@@ -1,14 +1,10 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+  id?: string
+}>()
+</script>
+
 <template>
   <VueShowdown :markdown="label" />
 </template>
-
-<script>
-export default {
-  name: 'MarkdownItem',
-
-  props: {
-    id: { type: String, default: null },
-    label: { type: String, default: null },
-  },
-}
-</script>
diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index 9e16dd862..ff975508d 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -1,36 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  label: string
+  id?: string
+  type?: 'success' | 'info' | 'warning' | 'danger'
+  icon?: string
+}>()
+
+const icon = computed(() => {
+  const icons = {
+    success: 'thumbs-up',
+    info: 'info',
+    warning: 'exclamation',
+    danger: 'times',
+  }
+
+  return props.icon || icons[props.type]
+})
+</script>
+
 <template>
   <BAlert
     class="d-flex flex-column flex-md-row align-items-center"
     :variant="type"
     :modelValue="true"
   >
-    <YIcon :iname="icon_" class="me-md-3 mb-md-0 mb-2" :variant="type" />
+    <YIcon :iname="icon" class="me-md-3 mb-md-0 mb-2" :variant="type" />
 
     <VueShowdown :markdown="label" tag="span" class="markdown" />
   </BAlert>
 </template>
-
-<script>
-export default {
-  name: 'ReadOnlyAlertItem',
-
-  props: {
-    id: { type: String, default: null },
-    label: { type: String, default: null },
-    type: { type: String, default: null },
-    icon: { type: String, default: null },
-  },
-
-  computed: {
-    icon_() {
-      const icons = {
-        success: 'thumbs-up',
-        info: 'info',
-        warning: 'exclamation',
-        danger: 'times',
-      }
-      return this.icon || icons[this.type]
-    },
-  },
-}
-</script>
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index 3360bc923..8b1d9e6f2 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -1,32 +1,36 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    id?: string
+    choices: string[]
+    required?: boolean
+    name?: string
+  }>(),
+  {
+    modelValue: null,
+    id: undefined,
+    required: false,
+    name: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | null]
+}>()
+
+const touch = inject('touch')
+</script>
+
 <template>
   <BFormSelect
     :modelValue="modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
+    @update:modelValue="emit('update:modelValue', $event)"
     :id="id"
     :options="choices"
     :required="required"
     @blur="touch(name)"
   />
 </template>
-
-<script>
-import { inject } from 'vue'
-
-export default {
-  name: 'SelectItem',
-
-  props: {
-    modelValue: { type: [String, null], default: null },
-    id: { type: String, default: null },
-    choices: { type: Array, required: true },
-    required: { type: Boolean, default: false },
-    name: { type: String, default: null },
-  },
-
-  setup() {
-    return {
-      touch: inject('touch'),
-    }
-  },
-}
-</script>
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index 5b9913a88..62c477cfa 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -1,3 +1,36 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+withDefaults(
+  defineProps<{
+    modelValue?: unknown[] | null
+    id?: string
+    placeholder?: string
+    limit?: number
+    required?: boolean
+    state?: boolean
+    name?: string
+    // FIXME no options on BFormTags
+    options?: unknown[]
+  }>(),
+  {
+    modelValue: null,
+    id: undefined,
+    placeholder: undefined,
+    limit: undefined,
+    required: false,
+    state: undefined,
+    name: undefined,
+    options: undefined,
+  },
+)
+
+const touch = inject('touch')
+
+// FIXME rework for options/choices
+// https://bootstrap-vue-next.github.io/bootstrap-vue-next/docs/components/form-tags.html#using-custom-form-components
+</script>
+
 <template>
   <BFormTags
     :modelValue="modelValue"
@@ -13,28 +46,3 @@
     @blur="touch(name)"
   />
 </template>
-
-<script>
-import { inject } from 'vue'
-
-export default {
-  name: 'TagsItem',
-
-  props: {
-    modelValue: { type: Array, default: null },
-    id: { type: String, default: null },
-    placeholder: { type: String, default: null },
-    limit: { type: Number, default: null },
-    required: { type: Boolean, default: false },
-    state: { type: Boolean, default: null },
-    name: { type: String, default: null },
-    options: { type: Array, default: null },
-  },
-
-  setup() {
-    return {
-      touch: inject('touch'),
-    }
-  },
-}
-</script>
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index 525e39540..77af271a4 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -1,9 +1,110 @@
+<script setup lang="ts">
+// FIXME addTag removeTag types
+import type { BDropdown, BFormInput } from 'bootstrap-vue-next'
+import { computed, ref } from 'vue'
+
+type TagUpdateArgs = {
+  action: 'add' | 'remove'
+  option: string
+  applyFn: (tag: string) => void
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string[]
+    // FIXME typing
+    options: string[]
+    id: string
+    placeholder?: string
+    limit?: number
+    name?: string
+    itemsName: string
+    disabledItems?: string[]
+    auto?: boolean
+    noTags?: boolean
+    label?: string
+    tagIcon?: string
+  }>(),
+  {
+    placeholder: undefined,
+    limit: undefined,
+    name: undefined,
+    disabledItems: () => [],
+    auto: false,
+    noTags: false,
+    label: undefined,
+    tagIcon: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]]
+  'tag-update': [value: TagUpdateArgs]
+}>()
+
+const search = ref('')
+const searchElem = ref<InstanceType<typeof BDropdown> | null>(null)
+const dropdownElem = ref<InstanceType<typeof BFormInput> | null>(null)
+
+const criteria = computed(() => {
+  return search.value.trim().toLowerCase()
+})
+
+const availableOptions = computed(() => {
+  const options = props.options.filter((opt) => {
+    return (
+      props.modelValue.indexOf(opt) === -1 && !props.disabledItems.includes(opt)
+    )
+  })
+  if (criteria.value) {
+    return options.filter(
+      (opt) => opt.toLowerCase().indexOf(criteria.value) > -1,
+    )
+  }
+  return options
+})
+
+const searchState = computed(() => {
+  return criteria.value && availableOptions.value.length === 0 ? false : null
+})
+
+function onAddTag(option: string, applyFn: TagUpdateArgs['applyFn']) {
+  emit('tag-update', { action: 'add', option, applyFn })
+  search.value = ''
+  if (props.auto) {
+    applyFn(option)
+  }
+}
+
+function onRemoveTag(option: string, applyFn: TagUpdateArgs['applyFn']) {
+  emit('tag-update', { action: 'remove', option, applyFn })
+  if (props.auto) {
+    applyFn(option)
+  }
+}
+
+function onDropdownKeydown(e) {
+  // Allow to start searching after dropdown opening
+  // FIXME check if dropdownElem.value!.firstElementChild works (removed the $el)
+  if (
+    !['Tab', 'Space'].includes(e.code) &&
+    e.target === dropdownElem.value!.$el.firstElementChild
+  ) {
+    searchElem.value!.$el.focus()
+  }
+}
+</script>
+
 <template>
   <div class="tags-selectize">
     <BFormTags
       v-bind="$attrs"
       :modelValue="modelValue"
-      @update:modelValue="$emit('update:modelValue', $event)"
+      @update:modelValue="emit('update:modelValue', $event)"
       :id="id"
       size="lg"
       class="p-0 border-0"
@@ -20,7 +121,7 @@
             class="list-inline-item"
           >
             <BFormTag
-              @remove="onRemoveTag({ option: tag, removeTag })"
+              @remove="onRemoveTag(tag, removeTag)"
               :title="tag"
               :disabled="disabled || disabledItems.includes(tag)"
               class="border border-dark mb-2"
@@ -31,7 +132,7 @@
         </ul>
 
         <BDropdown
-          ref="dropdown"
+          ref="dropdownElem"
           variant="outline-dark"
           block
           menu-class="w-100"
@@ -62,7 +163,7 @@
                 class="mb-0"
               >
                 <BFormInput
-                  ref="search-input"
+                  ref="searchElem"
                   v-model="search"
                   :id="id + '-search-input'"
                   type="search"
@@ -77,7 +178,7 @@
           <BDropdownItemButton
             v-for="option in availableOptions"
             :key="option"
-            @click="onAddTag({ option, addTag })"
+            @click="onAddTag(option, addTag)"
           >
             {{ option }}
           </BDropdownItemButton>
@@ -99,91 +200,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'TagsSelectizeItem',
-
-  inheritAttrs: false,
-
-  props: {
-    modelValue: { type: Array, required: true },
-    options: { type: Array, required: true },
-    id: { type: String, required: true },
-    placeholder: { type: String, default: null },
-    limit: { type: Number, default: null },
-    name: { type: String, default: null },
-    itemsName: { type: String, required: true },
-    disabledItems: { type: Array, default: () => [] },
-    // By default `addTag` and `removeTag` have to be executed manually by listening to 'tag-update'.
-    auto: { type: Boolean, default: false },
-    noTags: { type: Boolean, default: false },
-    label: { type: String, default: null },
-    tagIcon: { type: String, default: null },
-  },
-
-  data() {
-    return {
-      search: '',
-    }
-  },
-
-  computed: {
-    criteria() {
-      return this.search.trim().toLowerCase()
-    },
-
-    availableOptions() {
-      const criteria = this.criteria
-      const options = this.options.filter((opt) => {
-        return (
-          this.modelValue.indexOf(opt) === -1 &&
-          !this.disabledItems.includes(opt)
-        )
-      })
-      if (criteria) {
-        return options.filter((opt) => opt.toLowerCase().indexOf(criteria) > -1)
-      }
-      return options
-    },
-
-    searchState() {
-      return this.criteria && this.availableOptions.length === 0 ? false : null
-    },
-  },
-
-  methods: {
-    onAddTag({ option, addTag }) {
-      this.$emit('tag-update', { action: 'add', option, applyMethod: addTag })
-      this.search = ''
-      if (this.auto) {
-        addTag(option)
-      }
-    },
-
-    onRemoveTag({ option, removeTag }) {
-      this.$emit('tag-update', {
-        action: 'remove',
-        option,
-        applyMethod: removeTag,
-      })
-      if (this.auto) {
-        removeTag(option)
-      }
-    },
-
-    onDropdownKeydown(e) {
-      // Allow to start searching after dropdown opening
-      if (
-        !['Tab', 'Space'].includes(e.code) &&
-        e.target === this.$refs.dropdown.$el.firstElementChild
-      ) {
-        this.$refs['search-input'].focus()
-      }
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 :deep(.dropdown-menu) {
   max-height: 300px;
diff --git a/app/src/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index 2e1b4bbf6..5aaac3536 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -1,7 +1,38 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    id?: string
+    placeholder?: string
+    type?: string // FIXME unused?
+    required?: boolean
+    state?: boolean | null
+    name?: string
+  }>(),
+  {
+    modelValue: null,
+    id: undefined,
+    placeholder: undefined,
+    type: 'text',
+    required: false,
+    state: undefined,
+    name: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const touch = inject('touch')
+</script>
+
 <template>
   <BFormTextarea
     :modelValue="modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
+    @update:modelValue="emit('update:modelValue', $event)"
     :id="id"
     :placeholder="placeholder"
     :required="required"
@@ -10,27 +41,3 @@
     @blur="touch(name)"
   />
 </template>
-
-<script>
-import { inject } from 'vue'
-
-export default {
-  name: 'TextAreaItem',
-
-  props: {
-    modelValue: { type: String, default: null },
-    id: { type: String, default: null },
-    placeholder: { type: String, default: null },
-    type: { type: String, default: 'text' },
-    required: { type: Boolean, default: false },
-    state: { type: Boolean, default: null },
-    name: { type: String, default: null },
-  },
-
-  setup() {
-    return {
-      touch: inject('touch'),
-    }
-  },
-}
-</script>
diff --git a/app/src/components/globals/skeletons/BSkeleton.vue b/app/src/components/globals/skeletons/BSkeleton.vue
index a9b7e2ba7..061289f06 100644
--- a/app/src/components/globals/skeletons/BSkeleton.vue
+++ b/app/src/components/globals/skeletons/BSkeleton.vue
@@ -1,18 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  height: string
+  width: string
+}>()
+</script>
+
 <template>
   <div :style="{ height, width }" class="b-skeleton" />
 </template>
 
-<script>
-export default {
-  name: 'BSkeleton',
-
-  props: {
-    height: { type: String, required: true },
-    width: { type: String, required: true },
-  },
-}
-</script>
-
 <style scoped lang="scss">
 .b-skeleton {
   position: relative;
diff --git a/app/src/components/globals/skeletons/BSkeletonWrapper.vue b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
index 0d4932556..59680c5bc 100644
--- a/app/src/components/globals/skeletons/BSkeletonWrapper.vue
+++ b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ loading?: boolean }>(), { loading: false })
+</script>
+
 <template>
   <div v-if="loading" class="b-skeleton-wrapper">
     <slot name="loading" />
@@ -5,16 +9,6 @@
   <slot v-else name="default" />
 </template>
 
-<script>
-export default {
-  name: 'BSkeletonWrapper',
-
-  props: {
-    loading: { type: Boolean, default: false },
-  },
-}
-</script>
-
 <style scoped lang="scss">
 .b-skeleton-wrapper {
   cursor: wait;
diff --git a/app/src/components/globals/skeletons/CardButtonsSkeleton.vue b/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
index cd05d93b5..f8bf1038d 100644
--- a/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { randint } from '@/helpers/commons'
+
+withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 4 })
+</script>
+
 <template>
   <BCard>
     <template #header>
@@ -16,17 +22,3 @@
     </div>
   </BCard>
 </template>
-
-<script>
-import { randint } from '@/helpers/commons'
-
-export default {
-  name: 'CardButtonsSkeleton',
-
-  props: {
-    itemCount: { type: Number, default: 5 },
-  },
-
-  methods: { randint },
-}
-</script>
diff --git a/app/src/components/globals/skeletons/CardFormSkeleton.vue b/app/src/components/globals/skeletons/CardFormSkeleton.vue
index 9b9cae02c..09000634b 100644
--- a/app/src/components/globals/skeletons/CardFormSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardFormSkeleton.vue
@@ -1,3 +1,19 @@
+<script setup lang="ts">
+import { randint } from '@/helpers/commons'
+import type { Cols } from '@/types/commons'
+
+withDefaults(
+  defineProps<{
+    itemCount?: number
+    cols: Cols
+  }>(),
+  {
+    itemCount: 5,
+    cols: () => ({ md: 4, lg: 2 }),
+  },
+)
+</script>
+
 <template>
   <BCard>
     <template #header>
@@ -42,23 +58,3 @@
     </template>
   </BCard>
 </template>
-
-<script>
-import { randint } from '@/helpers/commons'
-
-export default {
-  name: 'CardFormSkeleton',
-
-  props: {
-    itemCount: { type: Number, default: 5 },
-    cols: {
-      type: [Object, null],
-      default() {
-        return { md: 4, lg: 2 }
-      },
-    },
-  },
-
-  methods: { randint },
-}
-</script>
diff --git a/app/src/components/globals/skeletons/CardInfoSkeleton.vue b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
index 7a5435ae6..3087d8d57 100644
--- a/app/src/components/globals/skeletons/CardInfoSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { randint } from '@/helpers/commons'
+
+withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
+</script>
+
 <template>
   <BCard>
     <template #header>
@@ -14,17 +20,3 @@
     </BRow>
   </BCard>
 </template>
-
-<script>
-import { randint } from '@/helpers/commons'
-
-export default {
-  name: 'CardInfoSkeleton',
-
-  props: {
-    itemCount: { type: Number, default: 5 },
-  },
-
-  methods: { randint },
-}
-</script>
diff --git a/app/src/components/globals/skeletons/CardListSkeleton.vue b/app/src/components/globals/skeletons/CardListSkeleton.vue
index 277b37565..4984cf1d0 100644
--- a/app/src/components/globals/skeletons/CardListSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardListSkeleton.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { randint } from '@/helpers/commons'
+
+withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
+</script>
+
 <template>
   <BCard no-body>
     <template #header>
@@ -18,17 +24,3 @@
     </BListGroup>
   </BCard>
 </template>
-
-<script>
-import { randint } from '@/helpers/commons'
-
-export default {
-  name: 'CardListSkeleton',
-
-  props: {
-    itemCount: { type: Number, default: 5 },
-  },
-
-  methods: { randint },
-}
-</script>
diff --git a/app/src/components/globals/skeletons/ListGroupSkeleton.vue b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
index 0f638d3ef..3e4d24924 100644
--- a/app/src/components/globals/skeletons/ListGroupSkeleton.vue
+++ b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { randint } from '@/helpers/commons'
+
+withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
+</script>
+
 <template>
   <BListGroup>
     <BListGroupItem v-for="count in itemCount" :key="count">
@@ -6,17 +12,3 @@
     </BListGroupItem>
   </BListGroup>
 </template>
-
-<script>
-import { randint } from '@/helpers/commons'
-
-export default {
-  name: 'ListGroupSkeleton',
-
-  props: {
-    itemCount: { type: Number, default: 5 },
-  },
-
-  methods: { randint },
-}
-</script>
diff --git a/app/src/store/utils.ts b/app/src/store/utils.ts
new file mode 100644
index 000000000..41e30447a
--- /dev/null
+++ b/app/src/store/utils.ts
@@ -0,0 +1,12 @@
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+
+export function useStoreGetters() {
+  const store = useStore()
+  return Object.fromEntries(
+    Object.keys(store.getters).map((getter) => [
+      getter,
+      computed(() => store.getters[getter]),
+    ]),
+  )
+}
diff --git a/app/src/types/commons.ts b/app/src/types/commons.ts
new file mode 100644
index 000000000..f75f493c9
--- /dev/null
+++ b/app/src/types/commons.ts
@@ -0,0 +1,25 @@
+import type { Breakpoint } from 'bootstrap-vue-next'
+import type { RouteLocationNamedRaw } from 'vue-router'
+
+export type Obj<T = any> = Record<string, T>
+
+// Vue
+
+export type VueClass =
+  | string
+  | Record<string, boolean>
+  | (string | Record<string, boolean>)[]
+
+// BVN (not exported types for now)
+
+// eslint-disable-next-line prettier/prettier
+type ColsNumbers = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
+export type Cols = Partial<Record<Breakpoint, boolean | ColsNumbers | 'auto'>>
+
+// CUSTOM
+
+export type CustomRoute = {
+  to: RouteLocationNamedRaw
+  text: string
+  icon?: string
+}
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index 514bfdd4f..880d1880a 100644
--- a/app/src/views/HomeView.vue
+++ b/app/src/views/HomeView.vue
@@ -1,3 +1,19 @@
+<script setup lang="ts">
+const menu = [
+  { routeName: 'user-list', icon: 'users', translation: 'users' },
+  { routeName: 'domain-list', icon: 'globe', translation: 'domains' },
+  { routeName: 'app-list', icon: 'cubes', translation: 'applications' },
+  { routeName: 'update', icon: 'refresh', translation: 'system_update' },
+  { routeName: 'tool-list', icon: 'wrench', translation: 'tools' },
+  {
+    routeName: 'diagnosis',
+    icon: 'stethoscope',
+    translation: 'diagnosis',
+  },
+  { routeName: 'backup', icon: 'archive', translation: 'backup' },
+]
+</script>
+
 <template>
   <div class="home">
     <BListGroup class="menu-list">
@@ -14,30 +30,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'HomeView',
-
-  data() {
-    return {
-      menu: [
-        { routeName: 'user-list', icon: 'users', translation: 'users' },
-        { routeName: 'domain-list', icon: 'globe', translation: 'domains' },
-        { routeName: 'app-list', icon: 'cubes', translation: 'applications' },
-        { routeName: 'update', icon: 'refresh', translation: 'system_update' },
-        { routeName: 'tool-list', icon: 'wrench', translation: 'tools' },
-        {
-          routeName: 'diagnosis',
-          icon: 'stethoscope',
-          translation: 'diagnosis',
-        },
-        { routeName: 'backup', icon: 'archive', translation: 'backup' },
-      ],
-    }
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .home {
   margin-top: 2rem;
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index 7e4f9435f..32dd5ecd8 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -1,6 +1,85 @@
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core'
+import { reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter, type LocationQueryValue } from 'vue-router'
+import { useStore } from 'vuex'
+
+import { alphalownumdot_, minLength, required } from '@/helpers/validators'
+import { useStoreGetters } from '@/store/utils'
+
+const props = withDefaults(
+  defineProps<{
+    forceReload?: boolean
+  }>(),
+  {
+    forceReload: false,
+  },
+)
+
+const { t } = useI18n()
+const store = useStore()
+const router = useRouter()
+
+const { installed } = useStoreGetters()
+const serverError = ref('')
+const form = reactive({
+  username: '',
+  password: '',
+})
+const v$ = useVuelidate(
+  {
+    username: { required, alphalownumdot_ },
+    password: { required, passwordLenght: minLength(4) },
+  },
+  form,
+)
+
+console.log(v$.value)
+
+const fields = {
+  username: {
+    label: t('user_username'),
+    props: {
+      id: 'username',
+      autocomplete: 'username',
+    },
+  },
+  password: {
+    label: t('password'),
+    props: {
+      id: 'password',
+      type: 'password',
+      autocomplete: 'current-password',
+    },
+  },
+}
+
+function login() {
+  const credentials = [form.username, form.password].join(':')
+  store
+    .dispatch('LOGIN', credentials)
+    .then(() => {
+      if (props.forceReload) {
+        window.location.href = '/yunohost/admin/'
+      } else {
+        router.push(
+          (router.currentRoute.value.query.redirect as LocationQueryValue) || {
+            name: 'home',
+          },
+        )
+      }
+    })
+    .catch((err) => {
+      if (err.name !== 'APIUnauthorizedError') throw err
+      serverError.value = t('wrong_password_or_username')
+    })
+}
+</script>
+
 <template>
   <CardForm
-    :title="$t('login')"
+    :title="t('login')"
     icon="lock"
     :validation="v$"
     :server-error="serverError"
@@ -10,14 +89,14 @@
     <FormField
       v-bind="fields.username"
       v-model="form.username"
-      :validation="v$.form.username"
+      :validation="v$.username"
     />
 
     <!-- ADMIN PASSWORD -->
     <FormField
       v-bind="fields.password"
       v-model="form.password"
-      :validation="v$.form.password"
+      :validation="v$.password"
     />
 
     <template #buttons>
@@ -27,91 +106,8 @@
         :disabled="!installed"
         form="ynh-form"
       >
-        {{ $t('login') }}
+        {{ t('login') }}
       </BButton>
     </template>
   </CardForm>
 </template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { useVuelidate } from '@vuelidate/core'
-import { alphalownumdot_, required, minLength } from '@/helpers/validators'
-
-export default {
-  name: 'LoginView',
-
-  props: {
-    forceReload: { type: Boolean, default: false },
-  },
-
-  setup() {
-    return {
-      v$: useVuelidate(),
-    }
-  },
-
-  data() {
-    return {
-      serverError: '',
-      form: {
-        username: '',
-        password: '',
-      },
-      fields: {
-        username: {
-          label: this.$t('user_username'),
-          props: {
-            id: 'username',
-            autocomplete: 'username',
-          },
-        },
-        password: {
-          label: this.$t('password'),
-          props: {
-            id: 'password',
-            type: 'password',
-            autocomplete: 'current-password',
-          },
-        },
-      },
-    }
-  },
-
-  computed: {
-    ...mapGetters(['installed']),
-  },
-
-  validations() {
-    return {
-      form: {
-        username: { required, alphalownumdot_ },
-        password: { required, passwordLenght: minLength(4) },
-      },
-    }
-  },
-
-  methods: {
-    login() {
-      const credentials = [this.form.username, this.form.password].join(':')
-      this.$store
-        .dispatch('LOGIN', credentials)
-        .then(() => {
-          if (this.forceReload) {
-            window.location.href = '/yunohost/admin/'
-          } else {
-            this.$router.push(
-              this.$router.currentRoute.value.query.redirect || {
-                name: 'home',
-              },
-            )
-          }
-        })
-        .catch((err) => {
-          if (err.name !== 'APIUnauthorizedError') throw err
-          this.serverError = this.$t('wrong_password_or_username')
-        })
-    },
-  },
-}
-</script>
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 599f77942..3aa944337 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -1,3 +1,133 @@
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core'
+import { computed, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
+import {
+  alphalownumdot_,
+  minLength,
+  name,
+  required,
+  sameAs,
+} from '@/helpers/validators'
+import { formatFormData } from '@/helpers/yunohostArguments'
+import LoginView from '@/views/LoginView.vue'
+import { DomainForm } from '@/views/_partials'
+
+const { t } = useI18n()
+const modalConfirm = useAutoModal()
+
+const step = ref('start')
+const serverError = ref('')
+const domain = ref(undefined)
+const dyndns_recovery_password = ref('')
+
+const form = reactive({
+  username: '',
+  fullname: '',
+  password: '',
+  confirmation: '',
+})
+const rules = computed(() => ({
+  username: { required, alphalownumdot_ },
+  fullname: { required, name },
+  password: { required, passwordLenght: minLength(8) },
+  confirmation: { required, passwordMatch: sameAs(form.password) },
+}))
+const v$ = useVuelidate(rules, form)
+
+const fields = {
+  username: {
+    label: t('user_username'),
+    props: {
+      id: 'username',
+      placeholder: t('placeholder.username'),
+    },
+  },
+
+  fullname: {
+    label: t('user_fullname'),
+    props: {
+      id: 'fullname',
+      placeholder: t('placeholder.fullname'),
+    },
+  },
+
+  password: {
+    label: t('password'),
+    description: t('good_practices_about_admin_password'),
+    descriptionVariant: 'warning',
+    props: { id: 'password', placeholder: '••••••••', type: 'password' },
+  },
+
+  confirmation: {
+    label: t('password_confirmation'),
+    props: {
+      id: 'confirmation',
+      placeholder: '••••••••',
+      type: 'password',
+    },
+  },
+}
+
+function goToStep(step_) {
+  serverError.value = ''
+  step.value = step_
+}
+
+function setDomain(data) {
+  domain.value = data.domain
+  dyndns_recovery_password.value = data.dyndns_recovery_password
+  goToStep('user')
+}
+
+async function setUser() {
+  const confirmed = await modalConfirm(
+    t('confirm_postinstall', { domain: domain.value }),
+  )
+  if (!confirmed) return
+  performPostInstall()
+}
+
+async function performPostInstall(force = false) {
+  // FIXME update formatFormData to unwrap ref auto
+  const data = await formatFormData({
+    domain: domain.value,
+    dyndns_recovery_password: dyndns_recovery_password.value,
+    username: form.username,
+    fullname: form.fullname,
+    password: form.password,
+  })
+
+  // FIXME does the api will throw an error for bad passwords ?
+  api
+    .post('postinstall' + (force ? '?force_diskspace' : ''), data, {
+      key: 'postinstall',
+    })
+    .then(() => {
+      // Display success message and allow the user to login
+      goToStep('login')
+    })
+    .catch((err) => {
+      const hasWordsInError = (words) =>
+        words.some((word) => (err.key || err.message).includes(word))
+      if (err.name !== 'APIBadRequestError') throw err
+      if (err.key === 'postinstall_low_rootfsspace') {
+        step.value = 'rootfsspace-error'
+      } else if (hasWordsInError(['domain', 'dyndns'])) {
+        step.value = 'domain'
+      } else if (hasWordsInError(['password', 'user'])) {
+        step.value = 'user'
+      } else {
+        throw err
+      }
+      serverError.value = err.message
+    })
+}
+</script>
+
 <template>
   <div class="post-install">
     <!-- START STEP -->
@@ -51,11 +181,11 @@
         />
 
         <FormField
-          v-for="(field, name) in fields"
-          :key="name"
+          v-for="(field, key) in fields"
+          :key="key"
           v-bind="field"
-          v-model="user[name]"
-          :validation="v$.user[name]"
+          v-model="form[key]"
+          :validation="v$.form[key]"
         />
       </CardForm>
 
@@ -87,152 +217,3 @@
     </template>
   </div>
 </template>
-
-<script>
-import { useVuelidate } from '@vuelidate/core'
-
-import api from '@/api'
-import { useAutoModal } from '@/composables/useAutoModal'
-import { DomainForm } from '@/views/_partials'
-import LoginView from '@/views/LoginView.vue'
-import { formatFormData } from '@/helpers/yunohostArguments'
-import {
-  alphalownumdot_,
-  required,
-  minLength,
-  name,
-  sameAs,
-} from '@/helpers/validators'
-
-export default {
-  name: 'PostInstall',
-
-  components: {
-    DomainForm,
-    LoginView,
-  },
-
-  setup() {
-    return {
-      v$: useVuelidate(),
-      modalConfirm: useAutoModal(),
-    }
-  },
-
-  data() {
-    return {
-      step: 'start',
-      serverError: '',
-      domain: undefined,
-      dyndns_recovery_password: '',
-      user: {
-        username: '',
-        fullname: '',
-        password: '',
-        confirmation: '',
-      },
-
-      fields: {
-        username: {
-          label: this.$t('user_username'),
-          props: {
-            id: 'username',
-            placeholder: this.$t('placeholder.username'),
-          },
-        },
-
-        fullname: {
-          label: this.$t('user_fullname'),
-          props: {
-            id: 'fullname',
-            placeholder: this.$t('placeholder.fullname'),
-          },
-        },
-
-        password: {
-          label: this.$t('password'),
-          description: this.$t('good_practices_about_admin_password'),
-          descriptionVariant: 'warning',
-          props: { id: 'password', placeholder: '••••••••', type: 'password' },
-        },
-
-        confirmation: {
-          label: this.$t('password_confirmation'),
-          props: {
-            id: 'confirmation',
-            placeholder: '••••••••',
-            type: 'password',
-          },
-        },
-      },
-    }
-  },
-
-  methods: {
-    goToStep(step) {
-      this.serverError = ''
-      this.step = step
-    },
-
-    setDomain({ domain, dyndns_recovery_password }) {
-      this.domain = domain
-      this.dyndns_recovery_password = dyndns_recovery_password
-      this.goToStep('user')
-    },
-
-    async setUser() {
-      const confirmed = await this.modalConfirm(
-        this.$t('confirm_postinstall', { domain: this.domain }),
-      )
-      if (!confirmed) return
-      this.performPostInstall()
-    },
-
-    async performPostInstall(force = false) {
-      const data = await formatFormData({
-        domain: this.domain,
-        dyndns_recovery_password: this.dyndns_recovery_password,
-        username: this.user.username,
-        fullname: this.user.fullname,
-        password: this.user.password,
-      })
-
-      // FIXME does the api will throw an error for bad passwords ?
-      api
-        .post('postinstall' + (force ? '?force_diskspace' : ''), data, {
-          key: 'postinstall',
-        })
-        .then(() => {
-          // Display success message and allow the user to login
-          this.goToStep('login')
-        })
-        .catch((err) => {
-          const hasWordsInError = (words) =>
-            words.some((word) => (err.key || err.message).includes(word))
-          if (err.name !== 'APIBadRequestError') throw err
-          if (err.key === 'postinstall_low_rootfsspace') {
-            this.step = 'rootfsspace-error'
-          } else if (hasWordsInError(['domain', 'dyndns'])) {
-            this.step = 'domain'
-          } else if (hasWordsInError(['password', 'user'])) {
-            this.step = 'user'
-          } else {
-            throw err
-          }
-          this.serverError = err.message
-        })
-    },
-  },
-
-  validations() {
-    return {
-      user: {
-        username: { required, alphalownumdot_ },
-        fullname: { required, name },
-        password: { required, passwordLenght: minLength(8) },
-        confirmation: { required, passwordMatch: sameAs(this.user.password) },
-      },
-    }
-  },
-}
-</script>
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index db8b59ab8..0cb9a7d15 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -1,3 +1,148 @@
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core'
+import { computed, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import AdressInputSelect from '@/components/AdressInputSelect.vue'
+import {
+  domain,
+  dynDomain,
+  minLength,
+  required,
+  sameAs,
+} from '@/helpers/validators'
+import { formatFormData } from '@/helpers/yunohostArguments'
+import { useStoreGetters } from '@/store/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+withDefaults(
+  defineProps<{
+    title: string
+    submitText?: string | null
+    serverError?: string
+  }>(),
+  {
+    submitText: null,
+    serverError: '',
+  },
+)
+const emit = defineEmits(['submit'])
+
+const { t } = useI18n()
+
+const { domains } = useStoreGetters()
+const dynDomains = ['nohost.me', 'noho.st', 'ynh.fr']
+
+const dynDnsForbiden = computed(() => {
+  if (!domains.value) return false
+  return domains.value.some((domain) => {
+    return dynDomains.some((dynDomain) => domain.includes(dynDomain))
+  })
+})
+
+const selected = ref(dynDnsForbiden.value ? 'domain' : '')
+const form = reactive({
+  domain: '',
+  dynDomain: { localPart: '', separator: '.', domain: 'nohost.me' },
+  dynDomainPassword: '',
+  dynDomainPasswordConfirmation: '',
+  localDomain: { localPart: '', separator: '.', domain: 'local' },
+})
+
+const rules = computed(() => ({
+  selected: { required },
+  form: ['domain', 'localDomain'].includes(selected.value)
+    ? {
+        [selected.value]:
+          selected.value === 'domain'
+            ? { required, domain }
+            : { localPart: { required, dynDomain } },
+      }
+    : {
+        dynDomain: { localPart: { required, dynDomain } },
+        dynDomainPassword: { passwordLenght: minLength(8) },
+        dynDomainPasswordConfirmation: {
+          passwordMatch: sameAs(form.dynDomainPassword),
+        },
+      },
+}))
+const v$ = useVuelidate(rules, { selected, form })
+
+const fields = {
+  domain: {
+    label: t('domain_name'),
+    props: {
+      id: 'domain',
+      placeholder: t('placeholder.domain'),
+    },
+  },
+
+  dynDomain: {
+    label: t('domain_name'),
+    props: {
+      id: 'dyn-domain',
+      placeholder: t('placeholder.domain').split('.')[0],
+      type: 'domain',
+      choices: dynDomains,
+    },
+  },
+
+  dynDomainPassword: {
+    label: t('domain.add.dyn_dns_password'),
+    description: t('domain.add.dyn_dns_password_desc'),
+    props: {
+      id: 'dyn-dns-password',
+      placeholder: '••••••••',
+      type: 'password',
+    },
+  },
+
+  dynDomainPasswordConfirmation: {
+    label: t('password_confirmation'),
+    props: {
+      id: 'dyn-dns-password-confirmation',
+      placeholder: '••••••••',
+      type: 'password',
+    },
+  },
+
+  localDomain: {
+    label: t('domain_name'),
+    props: {
+      id: 'dyn-domain',
+      placeholder: t('placeholder.domain').split('.')[0],
+      type: 'domain',
+      choices: ['local', 'test'],
+    },
+  },
+}
+
+const domainIsVisible = computed(() => {
+  return selected.value === 'domain'
+})
+
+const dynDomainIsVisible = computed(() => {
+  return selected.value === 'dynDomain'
+})
+
+const localDomainIsVisible = computed(() => {
+  return selected.value === 'localDomain'
+})
+
+async function onSubmit() {
+  const domainType = selected.value
+  const data = await formatFormData({
+    domain: form[domainType],
+    dyndns_recovery_password:
+      domainType === 'dynDomain' ? form.dynDomainPassword : '',
+  })
+  emit('submit', data)
+}
+</script>
+
 <template>
   <CardForm
     :title="title"
@@ -32,7 +177,7 @@
       <FormField
         v-bind="fields.domain"
         v-model="form.domain"
-        :validation="v$.form.domain"
+        :validation="v$.domain"
         class="mt-3"
       />
     </BCollapse>
@@ -58,7 +203,7 @@
 
       <FormField
         v-bind="fields.dynDomain"
-        :validation="v$.form.dynDomain"
+        :validation="v$.dynDomain"
         class="mt-3"
       >
         <template #default="{ self }">
@@ -68,13 +213,13 @@
 
       <FormField
         v-bind="fields.dynDomainPassword"
-        :validation="v$.form.dynDomainPassword"
+        :validation="v$.dynDomainPassword"
         v-model="form.dynDomainPassword"
       />
 
       <FormField
         v-bind="fields.dynDomainPasswordConfirmation"
-        :validation="v$.form.dynDomainPasswordConfirmation"
+        :validation="v$.dynDomainPasswordConfirmation"
         v-model="form.dynDomainPasswordConfirmation"
       />
     </BCollapse>
@@ -103,7 +248,7 @@
 
       <FormField
         v-bind="fields.localDomain"
-        :validation="v$.form.localDomain"
+        :validation="v$.localDomain"
         class="mt-3"
       >
         <template #default="{ self }">
@@ -113,165 +258,3 @@
     </BCollapse>
   </CardForm>
 </template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { useVuelidate } from '@vuelidate/core'
-
-import AdressInputSelect from '@/components/AdressInputSelect.vue'
-import { formatFormData } from '@/helpers/yunohostArguments'
-import {
-  required,
-  domain,
-  dynDomain,
-  minLength,
-  sameAs,
-} from '@/helpers/validators'
-
-export default {
-  name: 'DomainForm',
-
-  inheritAttrs: false,
-
-  props: {
-    title: { type: String, required: true },
-    submitText: { type: String, default: null },
-    serverError: { type: String, default: '' },
-  },
-
-  setup() {
-    return {
-      v$: useVuelidate(),
-    }
-  },
-
-  data() {
-    return {
-      selected: '',
-
-      form: {
-        domain: '',
-        dynDomain: { localPart: '', separator: '.', domain: 'nohost.me' },
-        dynDomainPassword: '',
-        dynDomainPasswordConfirmation: '',
-        localDomain: { localPart: '', separator: '.', domain: 'local' },
-      },
-
-      fields: {
-        domain: {
-          label: this.$t('domain_name'),
-          props: {
-            id: 'domain',
-            placeholder: this.$t('placeholder.domain'),
-          },
-        },
-
-        dynDomain: {
-          label: this.$t('domain_name'),
-          props: {
-            id: 'dyn-domain',
-            placeholder: this.$t('placeholder.domain').split('.')[0],
-            type: 'domain',
-            choices: ['nohost.me', 'noho.st', 'ynh.fr'],
-          },
-        },
-
-        dynDomainPassword: {
-          label: this.$t('domain.add.dyn_dns_password'),
-          description: this.$t('domain.add.dyn_dns_password_desc'),
-          props: {
-            id: 'dyn-dns-password',
-            placeholder: '••••••••',
-            type: 'password',
-          },
-        },
-
-        dynDomainPasswordConfirmation: {
-          label: this.$t('password_confirmation'),
-          props: {
-            id: 'dyn-dns-password-confirmation',
-            placeholder: '••••••••',
-            type: 'password',
-          },
-        },
-
-        localDomain: {
-          label: this.$t('domain_name'),
-          props: {
-            id: 'dyn-domain',
-            placeholder: this.$t('placeholder.domain').split('.')[0],
-            type: 'domain',
-            choices: ['local', 'test'],
-          },
-        },
-      },
-    }
-  },
-
-  computed: {
-    ...mapGetters(['domains']),
-
-    dynDnsForbiden() {
-      if (!this.domains) return false
-      const dynDomains = this.fields.dynDomain.props.choices
-      return this.domains.some((domain) => {
-        return dynDomains.some((dynDomain) => domain.includes(dynDomain))
-      })
-    },
-
-    domainIsVisible() {
-      return this.selected === 'domain'
-    },
-
-    dynDomainIsVisible() {
-      return this.selected === 'dynDomain'
-    },
-
-    localDomainIsVisible() {
-      return this.selected === 'localDomain'
-    },
-  },
-
-  validations() {
-    return {
-      selected: { required },
-      form: ['domain', 'localDomain'].includes(this.selected)
-        ? {
-            [this.selected]:
-              this.selected === 'domain'
-                ? { required, domain }
-                : { localPart: { required, dynDomain } },
-          }
-        : {
-            dynDomain: { localPart: { required, dynDomain } },
-            dynDomainPassword: { passwordLenght: minLength(8) },
-            dynDomainPasswordConfirmation: {
-              passwordMatch: sameAs('dynDomainPassword'),
-            },
-          },
-    }
-  },
-
-  methods: {
-    async onSubmit() {
-      const domainType = this.selected
-      const form = await formatFormData({
-        domain: this.form[domainType],
-        dyndns_recovery_password:
-          domainType === 'dynDomain' ? this.form.dynDomainPassword : '',
-      })
-      this.$emit('submit', form)
-    },
-  },
-
-  created() {
-    if (this.dynDnsForbiden) {
-      this.selected = 'domain'
-    }
-  },
-
-  components: {
-    AdressInputSelect,
-  },
-}
-</script>
diff --git a/app/src/views/_partials/ErrorDisplay.vue b/app/src/views/_partials/ErrorDisplay.vue
index 997096ec5..48a4bd038 100644
--- a/app/src/views/_partials/ErrorDisplay.vue
+++ b/app/src/views/_partials/ErrorDisplay.vue
@@ -1,3 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+
+import MessageListGroup from '@/components/MessageListGroup.vue'
+import type { Obj } from '@/types/commons'
+
+const props = withDefaults(
+  defineProps<{
+    request: Obj
+  }>(),
+  {},
+)
+
+const store = useStore()
+
+const error = computed(() => {
+  return props.request.error
+})
+
+const messages = computed(() => {
+  const messages = props.request.messages
+  if (messages && messages.length > 0) return messages
+  return null
+})
+
+function dismiss() {
+  store.dispatch('DISMISS_ERROR', props.request)
+}
+</script>
+
 <template>
   <!-- This card receives style from `ViewLockOverlay` if used inside it -->
   <div>
@@ -23,7 +54,7 @@
 
       <p>
         <strong v-t="'api_error.error_message'" />
-        <BAlert :modelValue="true" class="mt-2" variant="danger">
+        <BAlert :model-value="true" class="mt-2" variant="danger">
           <div v-html="error.message" />
         </BAlert>
       </p>
@@ -50,40 +81,6 @@
   </div>
 </template>
 
-<script>
-import MessageListGroup from '@/components/MessageListGroup.vue'
-
-export default {
-  name: 'ErrorDisplay',
-
-  components: {
-    MessageListGroup,
-  },
-
-  props: {
-    request: { type: [Object, null], default: null },
-  },
-
-  computed: {
-    error() {
-      return this.request.error
-    },
-
-    messages() {
-      const messages = this.request.messages
-      if (messages && messages.length > 0) return messages
-      return null
-    },
-  },
-
-  methods: {
-    dismiss() {
-      this.$store.dispatch('DISMISS_ERROR', this.request)
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 code,
 pre code {
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index d12fc2c3a..087dd80d9 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -1,5 +1,122 @@
+<script setup lang="ts">
+import type { BCard } from 'bootstrap-vue-next'
+import { getCurrentInstance, nextTick, ref } from 'vue'
+
+import MessageListGroup from '@/components/MessageListGroup.vue'
+import QueryHeader from '@/components/QueryHeader.vue'
+import { useStoreGetters } from '@/store/utils'
+
+// FIXME prop `value` not used?
+const props = withDefaults(
+  defineProps<{
+    value?: boolean
+    height?: number | string
+  }>(),
+  {
+    value: false,
+    height: 30,
+  },
+)
+
+const { history, lastAction, waiting, error } = useStoreGetters()
+const rootElem = ref<InstanceType<typeof BCard> | null>(null)
+const historyElem = ref<HTMLElement | null>(null)
+const open = ref(false)
+
+function scrollToAction(actionIndex: number) {
+  const actionCard = rootElem.value!.$el.querySelector(
+    '#messages-collapse-' + actionIndex,
+  ).parentElement
+  const headerOffset = actionCard.firstElementChild.offsetHeight
+  // Can't use `scrollIntoView()` here since it will also scroll in the main content.
+  historyElem.value!.scrollTop = actionCard.offsetTop - headerOffset
+}
+
+async function onLastActionClick() {
+  if (!open.value) {
+    open.value = true
+    await nextTick()
+  }
+  const hElem = historyElem.value!
+  const lastActionCard = hElem.lastElementChild as HTMLElement
+  const lastCollapsable = lastActionCard.querySelector('.collapse')
+
+  if (lastCollapsable && !lastCollapsable.classList.contains('show')) {
+    // FIXME not sure root emits still work with bvn
+    const { emit: rootEmit } = getCurrentInstance()!
+    rootEmit('bv::toggle::collapse', lastCollapsable.id)
+    // `scrollToAction` will be triggered and will handle the scrolling.
+  } else {
+    const headerElem = lastActionCard.firstElementChild as HTMLElement
+    hElem.scrollTop = lastActionCard.offsetTop - headerElem.offsetHeight
+  }
+}
+
+function onHistoryBarKey(e: KeyboardEvent) {
+  // FIXME interactive element in another is not valid, need to find another way.
+  const { nodeName, parentElement } = e.target as HTMLElement
+  if (nodeName === 'BUTTON' || parentElement?.nodeName === 'BUTTON') return
+  open.value = !open.value
+}
+
+function onHistoryBarClick(e: MouseEvent) {
+  // FIXME interactive element in another is not valid, need to find another way.
+  const { nodeName, parentElement } = e.target as HTMLElement
+  if (nodeName === 'BUTTON' || parentElement?.nodeName === 'BUTTON') return
+
+  const hElem = historyElem.value!
+  let mousePos = e.clientY
+
+  const onMouseMove = ({ clientY }: MouseEvent) => {
+    if (!open.value) {
+      hElem.style.height = '0px'
+      open.value = true
+    }
+    const currentHeight = hElem.offsetHeight
+    const move = mousePos - clientY
+    const nextSize = currentHeight + move
+    if (nextSize < 10 && nextSize < currentHeight) {
+      // Close the console and reset its size if the user reduce it to less than 10px.
+      mousePos = e.clientY
+      hElem.style.height = ''
+      onMouseUp()
+    } else {
+      hElem.style.height = nextSize + 'px'
+      // Simulate scroll when reducing the box so the content doesn't move.
+      if (nextSize < currentHeight) {
+        hElem.scrollBy(0, -move)
+      }
+      mousePos = clientY
+    }
+  }
+
+  // Delay the mouse move listener to distinguish a click from a drag.
+  const listenToMouseMove = setTimeout(() => {
+    hElem.style.height = hElem.offsetHeight + 'px'
+    hElem.classList.add('no-max')
+    window.addEventListener('mousemove', onMouseMove)
+  }, 200)
+
+  const onMouseUp = () => {
+    // Toggle opening if no mouse movement.
+    if (mousePos === e.clientY) {
+      // remove the free height class if the box's height is not custom
+      if (!hElem.style.height) {
+        hElem.classList.remove('no-max')
+      }
+      open.value = !open.value
+    }
+    clearTimeout(listenToMouseMove)
+    window.removeEventListener('mousemove', onMouseMove)
+    window.removeEventListener('mouseup', onMouseUp)
+  }
+
+  window.addEventListener('mouseup', onMouseUp)
+}
+</script>
+
 <template>
-  <BCard no-body id="console">
+  <BCard id="console" ref="rootElem" no-body>
     <!-- HISTORY BAR -->
     <BCardHeader
       role="button"
@@ -40,7 +157,7 @@
     </BCardHeader>
 
     <BCollapse id="console-collapse" v-model="open">
-      <div class="accordion" role="tablist" id="history" ref="history">
+      <div class="accordion" role="tablist" id="history" ref="historyElem">
         <p v-if="history.length === 0" class="alert m-0 px-2 py-1">
           {{ $t('history.is_empty') }}
         </p>
@@ -62,7 +179,7 @@
             <QueryHeader
               role="tab"
               v-b-toggle="
-                action.messages.length ? 'messages-collapse-' + i : false
+                action.messages.length ? 'messages-collapse-' + i : undefined
               "
               :request="action"
               show-time
@@ -87,134 +204,6 @@
   </BCard>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import QueryHeader from '@/components/QueryHeader.vue'
-import MessageListGroup from '@/components/MessageListGroup.vue'
-
-export default {
-  name: 'HistoryConsole',
-
-  components: {
-    QueryHeader,
-    MessageListGroup,
-  },
-
-  props: {
-    value: { type: Boolean, default: false },
-    height: { type: [Number, String], default: 30 },
-  },
-
-  data() {
-    return {
-      open: false,
-    }
-  },
-
-  computed: {
-    ...mapGetters(['history', 'lastAction', 'waiting', 'error']),
-  },
-
-  methods: {
-    scrollToAction(actionIndex) {
-      const actionCard = this.$el.querySelector(
-        '#messages-collapse-' + actionIndex,
-      ).parentElement
-      const headerOffset = actionCard.firstElementChild.offsetHeight
-      // Can't use `scrollIntoView()` here since it will also scroll in the main content.
-      this.$refs.history.scrollTop = actionCard.offsetTop - headerOffset
-    },
-
-    async onLastActionClick() {
-      if (!this.open) {
-        this.open = true
-        await this.$nextTick()
-      }
-      const historyElem = this.$refs.history
-      const lastActionCard = historyElem.lastElementChild
-      const lastCollapsable = lastActionCard.querySelector('.collapse')
-
-      if (lastCollapsable && !lastCollapsable.classList.contains('show')) {
-        this.$root.$emit('bv::toggle::collapse', lastCollapsable.id)
-        // `scrollToAction` will be triggered and will handle the scrolling.
-      } else {
-        const headerOffset = lastActionCard.firstElementChild.offsetHeight
-        historyElem.scrollTop = lastActionCard.offsetTop - headerOffset
-      }
-    },
-
-    onHistoryBarKey(e) {
-      // FIXME interactive element in another is not valid, need to find another way.
-      if (
-        e.target.nodeName === 'BUTTON' ||
-        e.target.parentElement.nodeName === 'BUTTON'
-      )
-        return
-      this.open = !this.open
-    },
-
-    onHistoryBarClick(e) {
-      // FIXME interactive element in another is not valid, need to find another way.
-      if (
-        e.target.nodeName === 'BUTTON' ||
-        e.target.parentElement.nodeName === 'BUTTON'
-      )
-        return
-
-      const historyElem = this.$refs.history
-      let mousePos = e.clientY
-
-      const onMouseMove = ({ clientY }) => {
-        if (!this.open) {
-          historyElem.style.height = '0px'
-          this.open = true
-        }
-        const currentHeight = historyElem.offsetHeight
-        const move = mousePos - clientY
-        const nextSize = currentHeight + move
-        if (nextSize < 10 && nextSize < currentHeight) {
-          // Close the console and reset its size if the user reduce it to less than 10px.
-          mousePos = e.clientY
-          historyElem.style.height = ''
-          onMouseUp()
-        } else {
-          historyElem.style.height = nextSize + 'px'
-          // Simulate scroll when reducing the box so the content doesn't move.
-          if (nextSize < currentHeight) {
-            historyElem.scrollBy(0, -move)
-          }
-          mousePos = clientY
-        }
-      }
-
-      // Delay the mouse move listener to distinguish a click from a drag.
-      const listenToMouseMove = setTimeout(() => {
-        historyElem.style.height = historyElem.offsetHeight + 'px'
-        historyElem.classList.add('no-max')
-        window.addEventListener('mousemove', onMouseMove)
-      }, 200)
-
-      const onMouseUp = () => {
-        // Toggle opening if no mouse movement.
-        if (mousePos === e.clientY) {
-          // remove the free height class if the box's height is not custom
-          if (!historyElem.style.height) {
-            historyElem.classList.remove('no-max')
-          }
-          this.open = !this.open
-        }
-        clearTimeout(listenToMouseMove)
-        window.removeEventListener('mousemove', onMouseMove)
-        window.removeEventListener('mouseup', onMouseUp)
-      }
-
-      window.addEventListener('mouseup', onMouseUp)
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 // reset default style
 .card + .card {
diff --git a/app/src/views/_partials/ReconnectingDisplay.vue b/app/src/views/_partials/ReconnectingDisplay.vue
index 25ea97118..f4faea4df 100644
--- a/app/src/views/_partials/ReconnectingDisplay.vue
+++ b/app/src/views/_partials/ReconnectingDisplay.vue
@@ -1,3 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useStore } from 'vuex'
+
+import api from '@/api'
+import { useStoreGetters } from '@/store/utils'
+import LoginView from '@/views/LoginView.vue'
+
+const store = useStore()
+
+const { reconnecting } = useStoreGetters()
+const status = ref('reconnecting')
+const origin = ref(reconnecting.value.origin || 'unknown')
+
+function tryToReconnect(initialDelay = 0) {
+  status.value = 'reconnecting'
+  api
+    .tryToReconnect({ ...reconnecting.value, initialDelay })
+    .then(() => {
+      store.commit('SET_RECONNECTING', null)
+    })
+    .catch((err) => {
+      if (err.name === 'APIUnauthorizedError') {
+        status.value = 'expired'
+      } else {
+        status.value = 'failed'
+      }
+    })
+}
+
+tryToReconnect(reconnecting.value.initialDelay)
+</script>
+
 <template>
   <!-- This card receives style from `ViewLockOverlay` if used inside it -->
   <BCardBody>
@@ -39,52 +72,3 @@
     </template>
   </BCardBody>
 </template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-import api from '@/api'
-import LoginView from '@/views/LoginView.vue'
-
-export default {
-  name: 'ReconnectingDisplay',
-
-  components: {
-    LoginView,
-  },
-
-  data() {
-    return {
-      status: 'reconnecting',
-      origin: undefined,
-    }
-  },
-
-  computed: {
-    ...mapGetters(['reconnecting']),
-  },
-
-  methods: {
-    tryToReconnect(initialDelay = 0) {
-      this.status = 'reconnecting'
-      api
-        .tryToReconnect({ ...this.reconnecting, initialDelay })
-        .then(() => {
-          this.$store.commit('SET_RECONNECTING', null)
-        })
-        .catch((err) => {
-          if (err.name === 'APIUnauthorizedError') {
-            this.status = 'expired'
-          } else {
-            this.status = 'failed'
-          }
-        })
-    },
-  },
-
-  created() {
-    this.origin = this.reconnecting.origin || 'unknown'
-    this.tryToReconnect(this.reconnecting.initialDelay)
-  },
-}
-</script>
diff --git a/app/src/views/_partials/ViewLockOverlay.vue b/app/src/views/_partials/ViewLockOverlay.vue
index a32fe2636..76e0f883c 100644
--- a/app/src/views/_partials/ViewLockOverlay.vue
+++ b/app/src/views/_partials/ViewLockOverlay.vue
@@ -1,3 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import QueryHeader from '@/components/QueryHeader.vue'
+import { useStoreGetters } from '@/store/utils'
+import {
+  ErrorDisplay,
+  ReconnectingDisplay,
+  WaitingDisplay,
+  WarningDisplay,
+} from '@/views/_partials'
+
+const { waiting, reconnecting, error, currentRequest, dark } = useStoreGetters()
+const component = computed(() => {
+  const request = currentRequest.value
+  // FIXME should we pass refs or unwrap refs as props?
+  if (error.value) {
+    return { is: ErrorDisplay, request: error.value }
+  } else if (request.showWarningMessage) {
+    return { is: WarningDisplay, request: currentRequest.value }
+  } else if (reconnecting.value) {
+    return { is: ReconnectingDisplay }
+  } else {
+    return { is: WaitingDisplay, request: currentRequest.value }
+  }
+})
+</script>
+
 <template>
   <BOverlay
     :variant="dark ? 'dark' : 'light'"
@@ -13,59 +41,12 @@
           <QueryHeader :request="error || currentRequest" status-size="lg" />
         </BCardHeader>
 
-        <Component :is="component.name" :request="component.request" />
+        <Component :is="component.is" :request="component.request" />
       </BCard>
     </template>
   </BOverlay>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-import {
-  ErrorDisplay,
-  WarningDisplay,
-  WaitingDisplay,
-  ReconnectingDisplay,
-} from '@/views/_partials'
-import QueryHeader from '@/components/QueryHeader.vue'
-
-export default {
-  name: 'ViewLockOverlay',
-
-  components: {
-    ErrorDisplay,
-    WarningDisplay,
-    WaitingDisplay,
-    ReconnectingDisplay,
-    QueryHeader,
-  },
-
-  computed: {
-    ...mapGetters([
-      'waiting',
-      'reconnecting',
-      'error',
-      'currentRequest',
-      'dark',
-    ]),
-
-    component() {
-      const { error, reconnecting, currentRequest: request } = this
-
-      if (error) {
-        return { name: 'ErrorDisplay', request: error }
-      } else if (request.showWarningMessage) {
-        return { name: 'WarningDisplay', request }
-      } else if (reconnecting) {
-        return { name: 'ReconnectingDisplay' }
-      } else {
-        return { name: 'WaitingDisplay', request }
-      }
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 // Style for `*Display`'s cards
 .card-overlay {
diff --git a/app/src/views/_partials/WaitingDisplay.vue b/app/src/views/_partials/WaitingDisplay.vue
index baee407db..7d142555d 100644
--- a/app/src/views/_partials/WaitingDisplay.vue
+++ b/app/src/views/_partials/WaitingDisplay.vue
@@ -1,3 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import MessageListGroup from '@/components/MessageListGroup.vue'
+import type { Obj } from '@/types/commons'
+
+const props = defineProps<{
+  request: Obj
+}>()
+
+const hasMessages = computed(() => {
+  return props.request.messages && props.request.messages.length > 0
+})
+
+const progress = computed(() => {
+  const progress = props.request.progress
+  if (!progress) return null
+  return {
+    values: progress,
+    max: progress.reduce((sum, value) => sum + value, 0),
+  }
+})
+</script>
+
 <template>
   <!-- This card receives style from `ViewLockOverlay` if used inside it -->
   <BCardBody>
@@ -25,34 +49,3 @@
     />
   </BCardBody>
 </template>
-
-<script>
-import MessageListGroup from '@/components/MessageListGroup.vue'
-
-export default {
-  name: 'WaitingDisplay',
-
-  components: {
-    MessageListGroup,
-  },
-
-  props: {
-    request: { type: Object, required: true },
-  },
-
-  computed: {
-    hasMessages() {
-      return this.request.messages && this.request.messages.length > 0
-    },
-
-    progress() {
-      const progress = this.request.progress
-      if (!progress) return null
-      return {
-        values: progress,
-        max: progress.reduce((sum, value) => sum + value, 0),
-      }
-    },
-  },
-}
-</script>
diff --git a/app/src/views/_partials/WarningDisplay.vue b/app/src/views/_partials/WarningDisplay.vue
index 62360d187..8ec7e721a 100644
--- a/app/src/views/_partials/WarningDisplay.vue
+++ b/app/src/views/_partials/WarningDisplay.vue
@@ -1,3 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+
+import type { Obj } from '@/types/commons'
+
+const props = defineProps<{
+  request: Obj
+}>()
+
+const store = useStore()
+
+const warning = computed(() => {
+  const messages = props.request.messages
+  return messages[messages.length - 1]
+})
+
+function dismiss() {
+  store.dispatch('DISMISS_WARNING', props.request)
+}
+</script>
 <template>
   <!-- This card receives style from `ViewLockOverlay` if used inside it -->
   <div>
@@ -11,29 +32,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'WarningDisplay',
-
-  props: {
-    request: { type: Object, required: true },
-  },
-
-  computed: {
-    warning() {
-      const messages = this.request.messages
-      return messages[messages.length - 1]
-    },
-  },
-
-  methods: {
-    dismiss() {
-      this.$store.dispatch('DISMISS_WARNING', this.request)
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .card-body {
   padding-bottom: 1.5rem !important;
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 888a0a349..406a6bb25 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -1,3 +1,183 @@
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core'
+import { computed, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+import CardDeckFeed from '@/components/CardDeckFeed.vue'
+import { useAutoModal } from '@/composables/useAutoModal'
+import { randint } from '@/helpers/commons'
+import { appRepoUrl, required } from '@/helpers/validators'
+
+const props = withDefaults(
+  defineProps<{
+    search?: string
+    quality?: string
+    category?: string | null
+    subtag?: string
+  }>(),
+  {
+    search: '',
+    quality: 'decent_quality',
+    category: null,
+    subtag: 'all',
+  },
+)
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const modalConfirm = useAutoModal()
+
+const queries = [['GET', 'apps/catalog?full&with_categories&with_antifeatures']]
+
+const apps = ref()
+const selectedApp = ref()
+const antifeatures = ref()
+const url = ref()
+const v$ = useVuelidate({ url: { required, appRepoUrl } }, { url })
+
+const qualityOptions = [
+  { value: 'high_quality', text: t('only_highquality_apps') },
+  {
+    value: 'decent_quality',
+    text: t('only_decent_quality_apps'),
+  },
+  { value: 'working', text: t('only_working_apps') },
+  { value: 'all', text: t('all_apps') },
+]
+const categories = reactive([
+  { text: t('app_choose_category'), value: null },
+  { text: t('all_apps'), value: 'all', icon: 'search' },
+  // The rest is filled from api data
+])
+
+const filteredApps = computed(() => {
+  if (!apps.value || props.category === null) return
+  const search = props.search.toLowerCase()
+
+  if (props.quality === 'all' && props.category === 'all' && search === '') {
+    return apps.value
+  }
+  const filtered = apps.value.filter((app) => {
+    // app doesn't match quality filter
+    if (props.quality !== 'all' && !app[props.quality]) return false
+    // app doesn't match category filter
+    if (props.category !== 'all' && app.category !== props.category)
+      return false
+    if (props.subtag !== 'all') {
+      const appMatchSubtag =
+        props.subtag === 'others'
+          ? app.subtags.length === 0
+          : app.subtags.includes(props.subtag)
+      // app doesn't match subtag filter
+      if (!appMatchSubtag) return false
+    }
+    if (search === '') return true
+    if (app.searchValues.includes(search)) return true
+    return false
+  })
+  return filtered.length ? filtered : null
+})
+
+const subtags = computed(() => {
+  // build an options array for subtags v-model/options
+  if (props.category && categories.length > 2) {
+    const category = categories.find((cat) => cat.value === props.category)
+    if (category.subtags) {
+      const subtags = [{ text: t('all'), value: 'all' }]
+      category.subtags.forEach((subtag) => {
+        subtags.push({ text: subtag.title, value: subtag.id })
+      })
+      subtags.push({ text: t('others'), value: 'others' })
+      return subtags
+    }
+  }
+  return null
+})
+
+function onQueriesResponse(data) {
+  const apps = []
+  for (const key in data.apps) {
+    const app = data.apps[key]
+    app.isInstallable =
+      !app.installed || app.manifest.integration.multi_instance
+    app.working = app.state === 'working'
+    app.decent_quality = app.working && app.level > 4
+    app.high_quality = app.working && app.level >= 8
+    app.color = 'danger'
+    if (app.working && app.level <= 0) {
+      app.state = 'broken'
+      app.color = 'danger'
+    } else if (app.working && app.level <= 4) {
+      app.state = 'lowquality'
+      app.color = 'warning'
+    } else if (app.working) {
+      app.color = 'success'
+    }
+    app.searchValues = [
+      app.id,
+      app.state,
+      app.manifest.name,
+      app.manifest.description,
+      app.potential_alternative_to.join(' '),
+    ]
+      .join(' ')
+      .toLowerCase()
+    apps.push(app)
+  }
+  apps.value = apps.sort((a, b) => (a.id > b.id ? 1 : -1))
+
+  // CATEGORIES
+  data.categories.forEach(({ title, id, icon, subtags, description }) => {
+    categories.push({
+      text: title,
+      value: id,
+      icon,
+      subtags,
+      description,
+    })
+  })
+  antifeatures.value = Object.fromEntries(
+    data.antifeatures.map((af) => [af.id, af]),
+  )
+}
+
+function updateQuery(key, value) {
+  // Update the query string without reloading the page
+  router.replace({
+    query: {
+      ...route.query,
+      // allow search without selecting a category
+      category: route.query.category || 'all',
+      [key]: value,
+    },
+  })
+}
+
+// INSTALL APP
+async function onInstallClick(appId: string) {
+  const app = apps.value.find((app) => app.id === appId)
+  if (!app.decent_quality) {
+    const confirmed = await modalConfirm(t('confirm_install_app_' + app.state))
+    if (!confirmed) return
+  }
+  router.push({ name: 'app-install', params: { id: app.id } })
+}
+
+// INSTALL CUSTOM APP
+async function onCustomInstallClick() {
+  const confirmed = await modalConfirm(t('confirm_install_custom_app'))
+  if (!confirmed) return
+
+  const url_ = url.value
+  router.push({
+    name: 'app-install-custom',
+    params: { id: url_.endsWith('/') ? url_ : url_ + '/' },
+  })
+}
+</script>
+
 <template>
   <ViewSearch
     :items="apps"
@@ -224,219 +404,6 @@
   </ViewSearch>
 </template>
 
-<script>
-import { useVuelidate } from '@vuelidate/core'
-
-import CardDeckFeed from '@/components/CardDeckFeed.vue'
-import { useAutoModal } from '@/composables/useAutoModal'
-import { required, appRepoUrl } from '@/helpers/validators'
-import { randint } from '@/helpers/commons'
-
-export default {
-  name: 'AppCatalog',
-
-  components: {
-    CardDeckFeed,
-  },
-
-  props: {
-    search: { type: String, default: '' },
-    quality: { type: String, default: 'decent_quality' },
-    category: { type: String, default: null },
-    subtag: { type: String, default: 'all' },
-  },
-
-  setup() {
-    return {
-      v$: useVuelidate(),
-      modalConfirm: useAutoModal(),
-    }
-  },
-
-  data() {
-    return {
-      queries: [['GET', 'apps/catalog?full&with_categories&with_antifeatures']],
-
-      // Data
-      apps: undefined,
-      selectedApp: undefined,
-      antifeatures: undefined,
-
-      // Filtering options
-      qualityOptions: [
-        { value: 'high_quality', text: this.$t('only_highquality_apps') },
-        {
-          value: 'decent_quality',
-          text: this.$t('only_decent_quality_apps'),
-        },
-        { value: 'working', text: this.$t('only_working_apps') },
-        { value: 'all', text: this.$t('all_apps') },
-      ],
-      categories: [
-        { text: this.$t('app_choose_category'), value: null },
-        { text: this.$t('all_apps'), value: 'all', icon: 'search' },
-        // The rest is filled from api data
-      ],
-
-      // Custom install form
-      customInstall: {
-        field: {
-          label: this.$t('url'),
-          props: {
-            id: 'custom-install',
-            placeholder: 'https://some.git.forge.tld/USER/REPOSITORY',
-          },
-        },
-        url: '',
-      },
-    }
-  },
-
-  computed: {
-    filteredApps() {
-      if (!this.apps || this.category === null) return
-      const search = this.search.toLowerCase()
-
-      if (this.quality === 'all' && this.category === 'all' && search === '') {
-        return this.apps
-      }
-      const filtered = this.apps.filter((app) => {
-        // app doesn't match quality filter
-        if (this.quality !== 'all' && !app[this.quality]) return false
-        // app doesn't match category filter
-        if (this.category !== 'all' && app.category !== this.category)
-          return false
-        if (this.subtag !== 'all') {
-          const appMatchSubtag =
-            this.subtag === 'others'
-              ? app.subtags.length === 0
-              : app.subtags.includes(this.subtag)
-          // app doesn't match subtag filter
-          if (!appMatchSubtag) return false
-        }
-        if (search === '') return true
-        if (app.searchValues.includes(search)) return true
-        return false
-      })
-      return filtered.length ? filtered : null
-    },
-
-    subtags() {
-      // build an options array for subtags v-model/options
-      if (this.category && this.categories.length > 2) {
-        const category = this.categories.find(
-          (cat) => cat.value === this.category,
-        )
-        if (category.subtags) {
-          const subtags = [{ text: this.$t('all'), value: 'all' }]
-          category.subtags.forEach((subtag) => {
-            subtags.push({ text: subtag.title, value: subtag.id })
-          })
-          subtags.push({ text: this.$t('others'), value: 'others' })
-          return subtags
-        }
-      }
-      return null
-    },
-  },
-
-  validations: {
-    customInstall: {
-      url: { required, appRepoUrl },
-    },
-  },
-
-  methods: {
-    onQueriesResponse(data) {
-      const apps = []
-      for (const key in data.apps) {
-        const app = data.apps[key]
-        app.isInstallable =
-          !app.installed || app.manifest.integration.multi_instance
-        app.working = app.state === 'working'
-        app.decent_quality = app.working && app.level > 4
-        app.high_quality = app.working && app.level >= 8
-        app.color = 'danger'
-        if (app.working && app.level <= 0) {
-          app.state = 'broken'
-          app.color = 'danger'
-        } else if (app.working && app.level <= 4) {
-          app.state = 'lowquality'
-          app.color = 'warning'
-        } else if (app.working) {
-          app.color = 'success'
-        }
-        app.searchValues = [
-          app.id,
-          app.state,
-          app.manifest.name,
-          app.manifest.description,
-          app.potential_alternative_to.join(' '),
-        ]
-          .join(' ')
-          .toLowerCase()
-        apps.push(app)
-      }
-      this.apps = apps.sort((a, b) => (a.id > b.id ? 1 : -1))
-
-      // CATEGORIES
-      data.categories.forEach(({ title, id, icon, subtags, description }) => {
-        this.categories.push({
-          text: title,
-          value: id,
-          icon,
-          subtags,
-          description,
-        })
-      })
-      this.antifeatures = Object.fromEntries(
-        data.antifeatures.map((af) => [af.id, af]),
-      )
-    },
-
-    updateQuery(key, value) {
-      // Update the query string without reloading the page
-      this.$router.replace({
-        query: {
-          ...this.$route.query,
-          // allow search without selecting a category
-          category: this.$route.query.category || 'all',
-          [key]: value,
-        },
-      })
-    },
-
-    // INSTALL APP
-    async onInstallClick(appId) {
-      const app = this.apps.find((app) => app.id === appId)
-      if (!app.decent_quality) {
-        const confirmed = await this.modalConfirm(
-          this.$t('confirm_install_app_' + app.state),
-        )
-        if (!confirmed) return
-      }
-      this.$router.push({ name: 'app-install', params: { id: app.id } })
-    },
-
-    // INSTALL CUSTOM APP
-    async onCustomInstallClick() {
-      const confirmed = await this.modalConfirm(
-        this.$t('confirm_install_custom_app'),
-      )
-      if (!confirmed) return
-
-      const url = this.customInstall.url
-      this.$router.push({
-        name: 'app-install-custom',
-        params: { id: url.endsWith('/') ? url : url + '/' },
-      })
-    },
-
-    randint,
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 #view-top-bar {
   margin-bottom: 2rem;
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index eb9fdf03f..7107cda53 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -1,9 +1,338 @@
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core'
+import { computed, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+import api, { objectToParams } from '@/api'
+import { APIBadRequestError, type APIError } from '@/api/errors'
+import ConfigPanels from '@/components/ConfigPanels.vue'
+import type ViewBase from '@/components/globals/ViewBase.vue'
+import { useAutoModal } from '@/composables/useAutoModal'
+import { isEmptyValue } from '@/helpers/commons'
+import { humanPermissionName } from '@/helpers/filters/human'
+import { helpers, required } from '@/helpers/validators'
+import {
+  formatFormData,
+  formatI18nField,
+  formatYunoHostConfigPanels,
+} from '@/helpers/yunohostArguments'
+import { useStoreGetters } from '@/store/utils'
+import type { Obj } from '@/types/commons'
+
+const props = defineProps<{
+  id: string
+}>()
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const modalConfirm = useAutoModal()
+
+const { domains } = useStoreGetters()
+const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
+
+// FIXME
+type AppForm = {
+  labels: { label: string; show_tile: boolean }[]
+  url: { domain: string; path: string }
+}
+const form: AppForm = reactive({
+  labels: [],
+  url: { domain: '', path: '' },
+})
+const rules = computed(() => ({
+  labels: {
+    $each: helpers.forEach({
+      label: { required },
+    }),
+  },
+  url: { path: { required } },
+}))
+const externalResults = reactive({})
+const v$ = useVuelidate(rules, form, { $externalResults: externalResults })
+
+const queries = [
+  ['GET', `apps/${props.id}?full`],
+  ['GET', { uri: 'users/permissions?full', storeKey: 'permissions' }],
+  ['GET', { uri: 'domains' }],
+]
+const loading = ref(true)
+const app = ref()
+const purge = ref(false)
+const config_panel_err = ref(null)
+const config = ref({
+  panels: [
+    // Fake integration of operations in config panels
+    {
+      hasApplyButton: false,
+      id: 'operations',
+      name: t('operations'),
+    },
+  ],
+  validations: {},
+})
+const doc = ref()
+
+const currentTab = computed(() => {
+  return route.params.tabId
+})
+
+const allowedGroups = computed(() => {
+  if (!app.value) return
+  return app.value.permissions[0].allowed
+})
+
+function appLinksIcons(linkType) {
+  const linksIcons = {
+    license: 'institution',
+    website: 'globe',
+    admindoc: 'book',
+    userdoc: 'book',
+    code: 'code',
+    package: 'code',
+    package_license: 'institution',
+    forum: 'comments',
+  }
+  return linksIcons[linkType]
+}
+
+async function onQueriesResponse(app_: Obj) {
+  // const form = { labels: [] }
+
+  const mainPermission = app_.permissions[props.id + '.main']
+  mainPermission.name = props.id + '.main'
+  mainPermission.title = t('permission_main')
+  mainPermission.tileAvailable =
+    mainPermission.url !== null && !mainPermission.url.startsWith('re:')
+  form.labels.push({
+    label: mainPermission.label,
+    show_tile: mainPermission.show_tile,
+  })
+
+  const permissions = [mainPermission]
+  for (const [name, perm] of Object.entries(app_.permissions)) {
+    if (!name.endsWith('.main')) {
+      permissions.push({
+        ...perm,
+        name,
+        label: perm.sublabel,
+        title: humanPermissionName(name),
+        tileAvailable: perm.url !== null && !perm.url.startsWith('re:'),
+      })
+      form.labels.push({ label: perm.sublabel, show_tile: perm.show_tile })
+    }
+  }
+  // this.form = form
+
+  const { DESCRIPTION, ADMIN, ...doc } = app_.manifest.doc
+  const notifs = app_.manifest.notifications
+  const {
+    ldap,
+    sso,
+    multi_instance,
+    ram,
+    disk,
+    architectures: archs,
+  } = app_.manifest.integration
+  app.value = {
+    id: props.id,
+    version: app_.version,
+    label: mainPermission.label,
+    domain: app_.settings.domain,
+    alternativeTo: app_.from_catalog.potential_alternative_to?.length
+      ? app_.from_catalog.potential_alternative_to.join(t('words.separator'))
+      : null,
+    description: DESCRIPTION ? formatI18nField(DESCRIPTION) : app_.description,
+    integration:
+      app_.manifest.packaging_format >= 2
+        ? {
+            archs: Array.isArray(archs)
+              ? archs.join(t('words.separator'))
+              : archs,
+            ldap: ldap === 'not_relevant' ? null : ldap,
+            sso: sso === 'not_relevant' ? null : sso,
+            multi_instance,
+            resources: { ram: ram.runtime, disk },
+          }
+        : null,
+    links: [
+      [
+        'license',
+        `https://spdx.org/licenses/${app_.manifest.upstream.license}`,
+      ],
+      ...['website', 'admindoc', 'userdoc', 'code'].map((key) => {
+        return [key, app_.manifest.upstream[key]]
+      }),
+      ['package', app_.from_catalog.git?.url],
+      ['package_license', app_.from_catalog.git?.url + '/blob/master/LICENSE'],
+      ['forum', `https://forum.yunohost.org/tag/${app_.manifest.id}`],
+    ].filter(([key, val]) => !!val),
+    doc: {
+      notifications: {
+        postInstall:
+          notifs.POST_INSTALL && notifs.POST_INSTALL.main
+            ? [['main', formatI18nField(notifs.POST_INSTALL.main)]]
+            : [],
+        postUpgrade: notifs.POST_UPGRADE
+          ? Object.entries(notifs.POST_UPGRADE).map(([key, content]) => {
+              return [key, formatI18nField(content)]
+            })
+          : [],
+      },
+      admin: [
+        ['admin', formatI18nField(ADMIN)],
+        ...Object.keys(doc)
+          .sort()
+          .map((key) => [
+            key.charAt(0) + key.slice(1).toLowerCase(),
+            formatI18nField(doc[key]),
+          ]),
+      ].filter((doc) => doc[1]),
+    },
+    is_webapp: app_.is_webapp,
+    is_default: app_.is_default,
+    supports_change_url: app_.supports_change_url,
+    supports_config_panel: app_.supports_config_panel,
+    supports_purge: app_.supports_purge,
+    permissions,
+  }
+  if (app_.settings.domain && app_.settings.path) {
+    app.value.url = 'https://' + app_.settings.domain + app_.settings.path
+    form.url = {
+      domain: app_.settings.domain,
+      path: app_.settings.path.slice(1),
+    }
+  }
+
+  if (
+    !Object.values(app.value.doc.notifications).some((notif) => notif.length)
+  ) {
+    app.value.doc.notifications = null
+  }
+
+  if (app_.supports_config_panel) {
+    await api
+      .get(`apps/${props.id}/config?full`)
+      .then((cp) => {
+        const config_ = formatYunoHostConfigPanels(cp)
+        // reinject 'operations' fake config tab
+        config_.panels.unshift(config.panels[0])
+        config.value = config_
+      })
+      .catch((err: APIError) => {
+        config_panel_err.value = err.message
+      })
+  }
+  loading.value = false
+}
+
+async function onConfigSubmit({ id, form, action, name }) {
+  const args = await formatFormData(form, {
+    removeEmpty: false,
+    removeNull: true,
+  })
+
+  api
+    .put(
+      action
+        ? `apps/${props.id}/actions/${action}`
+        : `apps/${props.id}/config/${id}`,
+      isEmptyValue(args) ? {} : { args: objectToParams(args) },
+      {
+        key: `apps.${action ? 'action' : 'update'}_config`,
+        id,
+        name: props.id,
+      },
+    )
+    .then(() => {
+      loading.value = true
+      viewElem.value!.fetchQueries()
+    })
+    .catch((err: APIError) => {
+      if (!(err instanceof APIBadRequestError)) throw err
+      const panel = config.value.panels.find((panel) => panel.id === id)!
+      if (err.data.name) {
+        Object.assign(externalResults, {
+          forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
+        })
+      } else {
+        panel.serverError = err.message
+      }
+    })
+}
+
+function changeLabel(permName, data) {
+  data.show_tile = data.show_tile ? 'True' : 'False'
+  api
+    .put('users/permissions/' + permName, data, {
+      key: 'apps.change_label',
+      prevName: app.value.label,
+      nextName: data.label,
+    })
+    .then(() => viewElem.value!.fetchQueries())
+}
+
+async function changeUrl() {
+  const confirmed = await modalConfirm(t('confirm_app_change_url'))
+  if (!confirmed) return
+
+  const { domain, path } = form.url
+  api
+    .put(
+      `apps/${props.id}/changeurl`,
+      { domain, path: '/' + path },
+      { key: 'apps.change_url', name: app.value.label },
+    )
+    .then(() => viewElem.value!.fetchQueries())
+}
+
+async function setAsDefaultDomain(undo = false) {
+  const confirmed = await modalConfirm(t('confirm_app_default'))
+  if (!confirmed) return
+
+  api
+    .put(
+      `apps/${props.id}/default${undo ? '?undo' : ''}`,
+      {},
+      {
+        key: 'apps.set_default',
+        name: app.value.label,
+        domain: app.value.domain,
+      },
+    )
+    .then(() => viewElem.value!.fetchQueries())
+}
+
+async function dismissNotification(name: string) {
+  api
+    .put(
+      `apps/${props.id}/dismiss_notification/${name}`,
+      {},
+      { key: 'apps.dismiss_notification', name: app.value.label },
+    )
+    .then(() => viewElem.value!.fetchQueries())
+}
+
+async function uninstall() {
+  const data = purge.value === true ? { purge: 1 } : {}
+  api
+    .delete('apps/' + props.id, data, {
+      key: 'apps.uninstall',
+      name: app.value.label,
+    })
+    .then(() => {
+      router.push({ name: 'app-list' })
+    })
+}
+</script>
+
 <template>
   <ViewBase
     :queries="queries"
     @queries-response="onQueriesResponse"
     :loading="loading"
-    ref="view"
+    ref="viewElem"
   >
     <YAlert
       v-if="
@@ -357,350 +686,6 @@
   </ViewBase>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-import { useVuelidate } from '@vuelidate/core'
-
-import api, { objectToParams } from '@/api'
-import { useAutoModal } from '@/composables/useAutoModal'
-import { humanPermissionName } from '@/helpers/filters/human'
-import { helpers, required } from '@/helpers/validators'
-import { isEmptyValue } from '@/helpers/commons'
-import {
-  formatFormData,
-  formatI18nField,
-  formatYunoHostConfigPanels,
-} from '@/helpers/yunohostArguments'
-import ConfigPanels from '@/components/ConfigPanels.vue'
-
-export default {
-  name: 'AppInfo',
-
-  components: {
-    ConfigPanels,
-  },
-
-  props: {
-    id: { type: String, required: true },
-  },
-
-  setup() {
-    return {
-      v$: useVuelidate(),
-      modalConfirm: useAutoModal(),
-    }
-  },
-
-  data() {
-    return {
-      queries: [
-        ['GET', `apps/${this.id}?full`],
-        ['GET', { uri: 'users/permissions?full', storeKey: 'permissions' }],
-        ['GET', { uri: 'domains' }],
-      ],
-      loading: true,
-      app: undefined,
-      form: undefined,
-      purge: false,
-      config_panel_err: null,
-      config: {
-        panels: [
-          // Fake integration of operations in config panels
-          {
-            hasApplyButton: false,
-            id: 'operations',
-            name: this.$t('operations'),
-          },
-        ],
-        validations: {},
-      },
-      externalResults: {},
-      doc: undefined,
-    }
-  },
-
-  computed: {
-    ...mapGetters(['domains']),
-
-    currentTab() {
-      return this.$route.params.tabId
-    },
-
-    allowedGroups() {
-      if (!this.app) return
-      return this.app.permissions[0].allowed
-    },
-  },
-
-  validations() {
-    return {
-      form: {
-        labels: {
-          $each: helpers.forEach({
-            label: { required },
-          }),
-        },
-        url: { path: { required } },
-      },
-    }
-  },
-
-  methods: {
-    appLinksIcons(linkType) {
-      const linksIcons = {
-        license: 'institution',
-        website: 'globe',
-        admindoc: 'book',
-        userdoc: 'book',
-        code: 'code',
-        package: 'code',
-        package_license: 'institution',
-        forum: 'comments',
-      }
-      return linksIcons[linkType]
-    },
-
-    async onQueriesResponse(app) {
-      const form = { labels: [] }
-
-      const mainPermission = app.permissions[this.id + '.main']
-      mainPermission.name = this.id + '.main'
-      mainPermission.title = this.$t('permission_main')
-      mainPermission.tileAvailable =
-        mainPermission.url !== null && !mainPermission.url.startsWith('re:')
-      form.labels.push({
-        label: mainPermission.label,
-        show_tile: mainPermission.show_tile,
-      })
-
-      const permissions = [mainPermission]
-      for (const [name, perm] of Object.entries(app.permissions)) {
-        if (!name.endsWith('.main')) {
-          permissions.push({
-            ...perm,
-            name,
-            label: perm.sublabel,
-            title: humanPermissionName(name),
-            tileAvailable: perm.url !== null && !perm.url.startsWith('re:'),
-          })
-          form.labels.push({ label: perm.sublabel, show_tile: perm.show_tile })
-        }
-      }
-      this.form = form
-
-      const { DESCRIPTION, ADMIN, ...doc } = app.manifest.doc
-      const notifs = app.manifest.notifications
-      const {
-        ldap,
-        sso,
-        multi_instance,
-        ram,
-        disk,
-        architectures: archs,
-      } = app.manifest.integration
-      this.app = {
-        id: this.id,
-        version: app.version,
-        label: mainPermission.label,
-        domain: app.settings.domain,
-        alternativeTo: app.from_catalog.potential_alternative_to?.length
-          ? app.from_catalog.potential_alternative_to.join(
-              this.$t('words.separator'),
-            )
-          : null,
-        description: DESCRIPTION
-          ? formatI18nField(DESCRIPTION)
-          : app.description,
-        integration:
-          app.manifest.packaging_format >= 2
-            ? {
-                archs: Array.isArray(archs)
-                  ? archs.join(this.$t('words.separator'))
-                  : archs,
-                ldap: ldap === 'not_relevant' ? null : ldap,
-                sso: sso === 'not_relevant' ? null : sso,
-                multi_instance,
-                resources: { ram: ram.runtime, disk },
-              }
-            : null,
-        links: [
-          [
-            'license',
-            `https://spdx.org/licenses/${app.manifest.upstream.license}`,
-          ],
-          ...['website', 'admindoc', 'userdoc', 'code'].map((key) => {
-            return [key, app.manifest.upstream[key]]
-          }),
-          ['package', app.from_catalog.git?.url],
-          [
-            'package_license',
-            app.from_catalog.git?.url + '/blob/master/LICENSE',
-          ],
-          ['forum', `https://forum.yunohost.org/tag/${app.manifest.id}`],
-        ].filter(([key, val]) => !!val),
-        doc: {
-          notifications: {
-            postInstall:
-              notifs.POST_INSTALL && notifs.POST_INSTALL.main
-                ? [['main', formatI18nField(notifs.POST_INSTALL.main)]]
-                : [],
-            postUpgrade: notifs.POST_UPGRADE
-              ? Object.entries(notifs.POST_UPGRADE).map(([key, content]) => {
-                  return [key, formatI18nField(content)]
-                })
-              : [],
-          },
-          admin: [
-            ['admin', formatI18nField(ADMIN)],
-            ...Object.keys(doc)
-              .sort()
-              .map((key) => [
-                key.charAt(0) + key.slice(1).toLowerCase(),
-                formatI18nField(doc[key]),
-              ]),
-          ].filter((doc) => doc[1]),
-        },
-        is_webapp: app.is_webapp,
-        is_default: app.is_default,
-        supports_change_url: app.supports_change_url,
-        supports_config_panel: app.supports_config_panel,
-        supports_purge: app.supports_purge,
-        permissions,
-      }
-      if (app.settings.domain && app.settings.path) {
-        this.app.url = 'https://' + app.settings.domain + app.settings.path
-        form.url = {
-          domain: app.settings.domain,
-          path: app.settings.path.slice(1),
-        }
-      }
-
-      if (
-        !Object.values(this.app.doc.notifications).some((notif) => notif.length)
-      ) {
-        this.app.doc.notifications = null
-      }
-
-      if (app.supports_config_panel) {
-        await api
-          .get(`apps/${this.id}/config?full`)
-          .then((config) => {
-            const config_ = formatYunoHostConfigPanels(config)
-            // reinject 'operations' fake config tab
-            config_.panels.unshift(this.config.panels[0])
-            this.config = config_
-          })
-          .catch((err) => {
-            this.config_panel_err = err.message
-          })
-      }
-      this.loading = false
-    },
-
-    async onConfigSubmit({ id, form, action, name }) {
-      const args = await formatFormData(form, {
-        removeEmpty: false,
-        removeNull: true,
-      })
-
-      api
-        .put(
-          action
-            ? `apps/${this.id}/actions/${action}`
-            : `apps/${this.id}/config/${id}`,
-          isEmptyValue(args) ? {} : { args: objectToParams(args) },
-          {
-            key: `apps.${action ? 'action' : 'update'}_config`,
-            id,
-            name: this.id,
-          },
-        )
-        .then(() => {
-          this.loading = true
-          this.$refs.view.fetchQueries()
-        })
-        .catch((err) => {
-          if (err.name !== 'APIBadRequestError') throw err
-          const panel = this.config.panels.find((panel) => panel.id === id)
-          if (err.data.name) {
-            Object.assign(this.externalResults, {
-              forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
-            })
-          } else {
-            panel.serverError = err.message
-          }
-        })
-    },
-
-    changeLabel(permName, data) {
-      data.show_tile = data.show_tile ? 'True' : 'False'
-      api
-        .put('users/permissions/' + permName, data, {
-          key: 'apps.change_label',
-          prevName: this.app.label,
-          nextName: data.label,
-        })
-        .then(this.$refs.view.fetchQueries)
-    },
-
-    async changeUrl() {
-      const confirmed = await this.modalConfirm(
-        this.$t('confirm_app_change_url'),
-      )
-      if (!confirmed) return
-
-      const { domain, path } = this.form.url
-      api
-        .put(
-          `apps/${this.id}/changeurl`,
-          { domain, path: '/' + path },
-          { key: 'apps.change_url', name: this.app.label },
-        )
-        .then(this.$refs.view.fetchQueries)
-    },
-
-    async setAsDefaultDomain(undo = false) {
-      const confirmed = await this.modalConfirm(this.$t('confirm_app_default'))
-      if (!confirmed) return
-
-      api
-        .put(
-          `apps/${this.id}/default${undo ? '?undo' : ''}`,
-          {},
-          {
-            key: 'apps.set_default',
-            name: this.app.label,
-            domain: this.app.domain,
-          },
-        )
-        .then(this.$refs.view.fetchQueries)
-    },
-
-    async dismissNotification(name) {
-      api
-        .put(
-          `apps/${this.id}/dismiss_notification/${name}`,
-          {},
-          { key: 'apps.dismiss_notification', name: this.app.label },
-        )
-        .then(this.$refs.view.fetchQueries)
-    },
-
-    async uninstall() {
-      const data = this.purge === true ? { purge: 1 } : {}
-      api
-        .delete('apps/' + this.id, data, {
-          key: 'apps.uninstall',
-          name: this.app.label,
-        })
-        .then(() => {
-          this.$router.push({ name: 'app-list' })
-        })
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 select {
   border-top-right-radius: 0;
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 965d758c8..bd27bae23 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -1,3 +1,215 @@
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core'
+import { computed, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+import api, { objectToParams } from '@/api'
+import { APIBadRequestError, type APIError } from '@/api/errors'
+import { useAutoModal } from '@/composables/useAutoModal'
+import {
+  formatFormData,
+  formatI18nField,
+  formatYunoHostArguments,
+} from '@/helpers/yunohostArguments'
+
+const props = defineProps<{
+  id: string
+}>()
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const modalConfirm = useAutoModal()
+
+const form = reactive({})
+const validations = ref({})
+const rules = computed(() => validations)
+const externalResults = reactive({})
+const v$ = useVuelidate(rules, form, { $externalResults: externalResults })
+
+const queries = [
+  ['GET', 'apps/catalog?full&with_categories&with_antifeatures'],
+  ['GET', `apps/manifest?app=${props.id}&with_screenshot`],
+]
+
+// FIXME
+const app = ref(undefined)
+const name = ref(undefined)
+const fields = ref(undefined)
+const serverError = ref('')
+const force = ref(false)
+
+function appLinksIcons(linkType) {
+  const linksIcons = {
+    license: 'institution',
+    website: 'globe',
+    admindoc: 'book',
+    userdoc: 'book',
+    code: 'code',
+    package: 'code',
+    package_license: 'institution',
+    forum: 'comments',
+  }
+  return linksIcons[linkType]
+}
+
+function onQueriesResponse(catalog, _app) {
+  const antifeaturesList = Object.fromEntries(
+    catalog.antifeatures.map((af) => [af.id, af]),
+  )
+
+  const { id, name, version, requirements } = _app
+  const {
+    ldap,
+    sso,
+    multi_instance,
+    ram,
+    disk,
+    architectures: archs,
+  } = _app.integration
+
+  const quality = { state: _app.quality.state, variant: 'danger' }
+  if (quality.state === 'working') {
+    if (_app.quality.level <= 0) {
+      quality.state = 'broken'
+    } else if (_app.quality.level <= 4) {
+      quality.state = 'lowquality'
+      quality.variant = 'warning'
+    } else {
+      quality.variant = 'success'
+      quality.state = _app.quality.level >= 8 ? 'highquality' : 'goodquality'
+    }
+  }
+  const preInstall = formatI18nField(_app.notifications.PRE_INSTALL.main)
+  const antifeatures = _app.antifeatures?.length
+    ? _app.antifeatures.map((af) => antifeaturesList[af])
+    : null
+
+  const hasDanger = quality.variant === 'danger' || !requirements.ram.pass
+  const hasSupport = Object.keys(requirements).every((key) => {
+    // ram support is non-blocking requirement and handled on its own.
+    return key === 'ram' || requirements[key].pass
+  })
+
+  const app_ = {
+    id,
+    name,
+    alternativeTo:
+      _app.potential_alternative_to && _app.potential_alternative_to.length
+        ? _app.potential_alternative_to.join(t('words.separator'))
+        : null,
+    description: formatI18nField(_app.doc.DESCRIPTION || _app.description),
+    screenshot: _app.screenshot,
+    demo: _app.upstream.demo,
+    version,
+    license: _app.upstream.license,
+    integration:
+      _app.packaging_format >= 2
+        ? {
+            archs: Array.isArray(archs)
+              ? archs.join(t('words.separator'))
+              : archs,
+            ldap: ldap === 'not_relevant' ? null : ldap,
+            sso: sso === 'not_relevant' ? null : sso,
+            multi_instance,
+            resources: { ram: ram.runtime, disk },
+          }
+        : null,
+    links: [
+      ['license', `https://spdx.org/licenses/${_app.upstream.license}`],
+      ...['website', 'admindoc', 'userdoc', 'code'].map((key) => {
+        return [key, _app.upstream[key]]
+      }),
+      ['package', _app.remote.url],
+      ['package_license', _app.remote.url + '/blob/master/LICENSE'],
+      ['forum', `https://forum.yunohost.org/tag/${id}`],
+    ].filter(([key, val]) => !!val),
+    preInstall,
+    antifeatures,
+    quality,
+    requirements,
+    hasWarning: !!preInstall || antifeatures || quality.variant === 'warning',
+    hasDanger,
+    hasSupport,
+    canInstall: hasSupport && !hasDanger,
+  }
+
+  // FIXME yunohost should add the label field by default
+  _app.install.unshift({
+    ask: t('label_for_manifestname', { name }),
+    default: name,
+    name: 'label',
+    help: t('label_for_manifestname_help'),
+  })
+
+  const {
+    form: form_,
+    fields,
+    validations,
+  } = formatYunoHostArguments(_app.install)
+
+  app.value = app_
+  fieds.value = fields
+  Object.assign(form, form_)
+  validations.value = validations
+}
+
+function formatAppNotifs(notifs) {
+  return Object.keys(notifs).reduce((acc, key) => {
+    return acc + '\n\n' + notifs[key]
+  }, '')
+}
+
+async function performInstall() {
+  if ('path' in form && form.path === '/') {
+    const confirmed = await this.modalConfirm(
+      t('confirm_install_domain_root', {
+        domain: form.domain,
+      }),
+    )
+    if (!confirmed) return
+  }
+
+  const { data: args, label } = await formatFormData(form, {
+    extract: ['label'],
+    removeEmpty: false,
+    removeNull: true,
+  })
+  const data = {
+    app: props.id,
+    label,
+    args: Object.entries(args).length ? objectToParams(args) : undefined,
+  }
+
+  api
+    .post('apps', data, { key: 'apps.install', name: app.value.name })
+    .then(async ({ notifications }) => {
+      const postInstall = formatAppNotifs(notifications)
+      if (postInstall) {
+        const message =
+          t('app.install.notifs.post.alert') + '\n\n' + postInstall
+        await modalConfirm(
+          message,
+          {
+            title: t('app.install.notifs.post.title', {
+              name: app.value.name,
+            }),
+          },
+          { markdown: true, cancelable: false },
+        )
+      }
+      router.push({ name: 'app-list' })
+    })
+    .catch((err: APIError) => {
+      if (!(err instanceof APIBadRequestError)) throw err
+      if (err.data.name) {
+        externalResults[err.data.name] = err.message
+      } else serverError.value = err.message
+    })
+}
+</script>
+
 <template>
   <ViewBase :queries="queries" @queries-response="onQueriesResponse">
     <template v-if="app">
@@ -205,231 +417,6 @@
   </ViewBase>
 </template>
 
-<script>
-import { useVuelidate } from '@vuelidate/core'
-
-import api, { objectToParams } from '@/api'
-import { useAutoModal } from '@/composables/useAutoModal'
-import {
-  formatYunoHostArguments,
-  formatI18nField,
-  formatFormData,
-} from '@/helpers/yunohostArguments'
-import CardCollapse from '@/components/CardCollapse.vue'
-
-export default {
-  name: 'AppInstall',
-
-  components: {
-    CardCollapse,
-  },
-
-  props: {
-    id: { type: String, required: true },
-  },
-
-  setup() {
-    return {
-      v$: useVuelidate(),
-      modalConfirm: useAutoModal(),
-    }
-  },
-
-  data() {
-    return {
-      queries: [
-        ['GET', 'apps/catalog?full&with_categories&with_antifeatures'],
-        ['GET', `apps/manifest?app=${this.id}&with_screenshot`],
-      ],
-      app: undefined,
-      name: undefined,
-      form: undefined,
-      fields: undefined,
-      validations: {},
-      errors: undefined,
-      serverError: '',
-      force: false,
-    }
-  },
-
-  validations() {
-    return this.validations
-  },
-
-  methods: {
-    appLinksIcons(linkType) {
-      const linksIcons = {
-        license: 'institution',
-        website: 'globe',
-        admindoc: 'book',
-        userdoc: 'book',
-        code: 'code',
-        package: 'code',
-        package_license: 'institution',
-        forum: 'comments',
-      }
-      return linksIcons[linkType]
-    },
-
-    onQueriesResponse(catalog, _app) {
-      const antifeaturesList = Object.fromEntries(
-        catalog.antifeatures.map((af) => [af.id, af]),
-      )
-
-      const { id, name, version, requirements } = _app
-      const {
-        ldap,
-        sso,
-        multi_instance,
-        ram,
-        disk,
-        architectures: archs,
-      } = _app.integration
-
-      const quality = { state: _app.quality.state, variant: 'danger' }
-      if (quality.state === 'working') {
-        if (_app.quality.level <= 0) {
-          quality.state = 'broken'
-        } else if (_app.quality.level <= 4) {
-          quality.state = 'lowquality'
-          quality.variant = 'warning'
-        } else {
-          quality.variant = 'success'
-          quality.state =
-            _app.quality.level >= 8 ? 'highquality' : 'goodquality'
-        }
-      }
-      const preInstall = formatI18nField(_app.notifications.PRE_INSTALL.main)
-      const antifeatures = _app.antifeatures?.length
-        ? _app.antifeatures.map((af) => antifeaturesList[af])
-        : null
-
-      const hasDanger = quality.variant === 'danger' || !requirements.ram.pass
-      const hasSupport = Object.keys(requirements).every((key) => {
-        // ram support is non-blocking requirement and handled on its own.
-        return key === 'ram' || requirements[key].pass
-      })
-
-      const app = {
-        id,
-        name,
-        alternativeTo:
-          _app.potential_alternative_to && _app.potential_alternative_to.length
-            ? _app.potential_alternative_to.join(this.$t('words.separator'))
-            : null,
-        description: formatI18nField(_app.doc.DESCRIPTION || _app.description),
-        screenshot: _app.screenshot,
-        demo: _app.upstream.demo,
-        version,
-        license: _app.upstream.license,
-        integration:
-          _app.packaging_format >= 2
-            ? {
-                archs: Array.isArray(archs)
-                  ? archs.join(this.$t('words.separator'))
-                  : archs,
-                ldap: ldap === 'not_relevant' ? null : ldap,
-                sso: sso === 'not_relevant' ? null : sso,
-                multi_instance,
-                resources: { ram: ram.runtime, disk },
-              }
-            : null,
-        links: [
-          ['license', `https://spdx.org/licenses/${_app.upstream.license}`],
-          ...['website', 'admindoc', 'userdoc', 'code'].map((key) => {
-            return [key, _app.upstream[key]]
-          }),
-          ['package', _app.remote.url],
-          ['package_license', _app.remote.url + '/blob/master/LICENSE'],
-          ['forum', `https://forum.yunohost.org/tag/${id}`],
-        ].filter(([key, val]) => !!val),
-        preInstall,
-        antifeatures,
-        quality,
-        requirements,
-        hasWarning:
-          !!preInstall || antifeatures || quality.variant === 'warning',
-        hasDanger,
-        hasSupport,
-        canInstall: hasSupport && !hasDanger,
-      }
-
-      // FIXME yunohost should add the label field by default
-      _app.install.unshift({
-        ask: this.$t('label_for_manifestname', { name }),
-        default: name,
-        name: 'label',
-        help: this.$t('label_for_manifestname_help'),
-      })
-
-      const { form, fields, validations, errors } = formatYunoHostArguments(
-        _app.install,
-      )
-
-      this.app = app
-      this.fields = fields
-      this.form = form
-      this.validations = { form: validations }
-      this.errors = errors
-    },
-
-    formatAppNotifs(notifs) {
-      return Object.keys(notifs).reduce((acc, key) => {
-        return acc + '\n\n' + notifs[key]
-      }, '')
-    },
-
-    async performInstall() {
-      if ('path' in this.form && this.form.path === '/') {
-        const confirmed = await this.modalConfirm(
-          this.$t('confirm_install_domain_root', {
-            domain: this.form.domain,
-          }),
-        )
-        if (!confirmed) return
-      }
-
-      const { data: args, label } = await formatFormData(this.form, {
-        extract: ['label'],
-        removeEmpty: false,
-        removeNull: true,
-      })
-      const data = {
-        app: this.id,
-        label,
-        args: Object.entries(args).length ? objectToParams(args) : undefined,
-      }
-
-      api
-        .post('apps', data, { key: 'apps.install', name: this.app.name })
-        .then(async ({ notifications }) => {
-          const postInstall = this.formatAppNotifs(notifications)
-          if (postInstall) {
-            const message =
-              this.$t('app.install.notifs.post.alert') + '\n\n' + postInstall
-            await this.modalConfirm(
-              message,
-              {
-                title: this.$t('app.install.notifs.post.title', {
-                  name: this.app.name,
-                }),
-              },
-              { markdown: true, cancelable: false },
-            )
-          }
-          this.$router.push({ name: 'app-list' })
-        })
-        .catch((err) => {
-          if (err.name !== 'APIBadRequestError') throw err
-          if (err.data.name) {
-            this.errors[err.data.name].message = err.message
-          } else this.serverError = err.message
-        })
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .antifeatures {
   dt::before {
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index 93fc8ffc5..b5bd93cea 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -1,3 +1,38 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const queries = [['GET', 'apps?full']]
+const search = ref('')
+const apps = ref()
+
+const filteredApps = computed(() => {
+  if (!apps.value) return
+  const search_ = search.value.toLowerCase()
+  // Check if any value in apps (label, id, name, description) match the search query.
+  const filtered = apps.value.filter((app) =>
+    Object.values(app).some(
+      (item) => item && item.toLowerCase().includes(search_),
+    ),
+  )
+  return filtered.length ? filtered : null
+})
+
+function onQueriesResponse({ apps }) {
+  if (apps.length === 0) {
+    apps.value = null
+    return
+  }
+
+  apps.value = apps
+    .map(({ id, name, description, manifest }) => {
+      return { id, name: manifest.name, label: name, description }
+    })
+    .sort((prev, app) => {
+      return prev.label > app.label ? 1 : -1
+    })
+}
+</script>
+
 <template>
   <ViewSearch
     v-model:search="search"
@@ -36,45 +71,3 @@
     </BListGroup>
   </ViewSearch>
 </template>
-
-<script>
-export default {
-  name: 'AppList',
-
-  data() {
-    return {
-      queries: [['GET', 'apps?full']],
-      search: '',
-      apps: undefined,
-    }
-  },
-
-  computed: {
-    filteredApps() {
-      if (!this.apps) return
-      const search = this.search.toLowerCase()
-      const match = (item) => item && item.toLowerCase().includes(search)
-      // Check if any value in apps (label, id, name, description) match the search query.
-      const filtered = this.apps.filter((app) => Object.values(app).some(match))
-      return filtered.length ? filtered : null
-    },
-  },
-
-  methods: {
-    onQueriesResponse({ apps }) {
-      if (apps.length === 0) {
-        this.apps = null
-        return
-      }
-
-      this.apps = apps
-        .map(({ id, name, description, manifest }) => {
-          return { id, name: manifest.name, label: name, description }
-        })
-        .sort((prev, app) => {
-          return prev.label > app.label ? 1 : -1
-        })
-    },
-  },
-}
-</script>
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index c340d1776..0e0fac103 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -1,3 +1,83 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import api from '@/api'
+
+const props = defineProps<{
+  id: string
+}>()
+
+const { t } = useI18n()
+const router = useRouter()
+
+const queries = [
+  ['GET', 'hooks/backup'],
+  ['GET', 'apps?with_backup'],
+]
+const selected = ref<string[]>([])
+const system = ref()
+const apps = ref()
+
+function formatHooks(hooks) {
+  const data = {}
+  hooks.forEach((hook) => {
+    const groupId = hook.startsWith('conf_')
+      ? 'adminjs_group_configuration'
+      : hook
+    if (groupId in data) {
+      data[groupId].value.push(hook)
+      data[groupId].description += ', ' + t('hook_' + hook)
+    } else {
+      data[groupId] = {
+        name: t('hook_' + groupId),
+        value: [hook],
+        description: t(groupId === hook ? `hook_${hook}_desc` : 'hook_' + hook),
+      }
+    }
+  })
+  return data
+}
+
+function onQueriesResponse({ hooks }, { apps }) {
+  system.value = formatHooks(hooks)
+  // transform app array into literal object to match hooks data structure
+  apps.value = apps.reduce((obj, app) => {
+    obj[app.id] = app
+    return obj
+  }, {})
+  selected.value = [...Object.keys(system.value), ...Object.keys(apps.value)]
+}
+
+function toggleSelected(select: boolean, type: 'system' | 'apps') {
+  const keys = Object.keys((type === 'system' ? system : apps).value)
+  if (select) {
+    const toSelect = keys.filter((item) => !selected.value.includes(item))
+    selected.value = [...selected.value, ...toSelect]
+  } else {
+    selected.value = selected.value.filter(
+      (selected) => !keys.includes(selected),
+    )
+  }
+}
+
+function createBackup() {
+  const data = { apps: [], system: [] }
+  for (const item of selected.value) {
+    if (item in system.value) {
+      data.system = [...data.system, ...system.value[item].value]
+    } else {
+      data.apps.push(item)
+    }
+  }
+
+  api.post('backups', data, 'backups.create').then(() => {
+    router.push({ name: 'backup-list', params: { id: props.id } })
+  })
+}
+</script>
+
 <template>
   <ViewBase
     :queries="queries"
@@ -122,91 +202,3 @@
     </YCard>
   </ViewBase>
 </template>
-
-<script>
-import api from '@/api'
-
-export default {
-  name: 'BackupCreate',
-
-  props: {
-    id: { type: String, required: true },
-  },
-
-  data() {
-    return {
-      queries: [
-        ['GET', 'hooks/backup'],
-        ['GET', 'apps?with_backup'],
-      ],
-      selected: [],
-      // api data
-      system: undefined,
-      apps: undefined,
-    }
-  },
-
-  methods: {
-    formatHooks(hooks) {
-      const data = {}
-      hooks.forEach((hook) => {
-        const groupId = hook.startsWith('conf_')
-          ? 'adminjs_group_configuration'
-          : hook
-        if (groupId in data) {
-          data[groupId].value.push(hook)
-          data[groupId].description += ', ' + this.$t('hook_' + hook)
-        } else {
-          data[groupId] = {
-            name: this.$t('hook_' + groupId),
-            value: [hook],
-            description: this.$t(
-              groupId === hook ? `hook_${hook}_desc` : 'hook_' + hook,
-            ),
-          }
-        }
-      })
-      return data
-    },
-
-    onQueriesResponse({ hooks }, { apps }) {
-      this.system = this.formatHooks(hooks)
-      // transform app array into literal object to match hooks data structure
-      this.apps = apps.reduce((obj, app) => {
-        obj[app.id] = app
-        return obj
-      }, {})
-      this.selected = [...Object.keys(this.system), ...Object.keys(this.apps)]
-    },
-
-    toggleSelected(select, type) {
-      if (select) {
-        const toSelect = Object.keys(this[type]).filter(
-          (item) => !this.selected.includes(item),
-        )
-        this.selected = [...this.selected, ...toSelect]
-      } else {
-        const toUnselect = Object.keys(this[type])
-        this.selected = this.selected.filter(
-          (selected) => !toUnselect.includes(selected),
-        )
-      }
-    },
-
-    createBackup() {
-      const data = { apps: [], system: [] }
-      for (const item of this.selected) {
-        if (item in this.system) {
-          data.system = [...data.system, ...this.system[item].value]
-        } else {
-          data.apps.push(item)
-        }
-      }
-
-      api.post('backups', data, 'backups.create').then(() => {
-        this.$router.push({ name: 'backup-list', params: { id: this.id } })
-      })
-    },
-  },
-}
-</script>
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index 74a355145..7660e3ae1 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -1,3 +1,136 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import api from '@/api'
+import { APIBadRequestError, type APIError } from '@/api/errors'
+import { useAutoModal } from '@/composables/useAutoModal'
+import { isEmptyValue } from '@/helpers/commons'
+import { readableDate } from '@/helpers/filters/date'
+import { humanSize } from '@/helpers/filters/human'
+
+const props = defineProps<{
+  id: string
+  name: string
+}>()
+
+const { t } = useI18n()
+const router = useRouter()
+const store = useStore()
+const modalConfirm = useAutoModal()
+
+const queries = [['GET', `backups/${props.name}?with_details`]]
+const selected = ref<string[]>([])
+const error = ref('')
+const isValid = ref<boolean | null>(null)
+const infos = ref()
+const apps = ref()
+const system = ref()
+
+const hasBackupData = computed(() => {
+  return !isEmptyValue(system.value) || !isEmptyValue(apps.value)
+})
+
+function formatHooks(hooks) {
+  const data = {}
+  Object.entries(hooks).forEach(([hook, { size }]) => {
+    const groupId = hook.startsWith('conf_')
+      ? 'adminjs_group_configuration'
+      : hook
+    if (groupId in data) {
+      data[groupId].value.push(hook)
+      data[groupId].description += ', ' + t('hook_' + hook)
+      data[groupId].size += size
+    } else {
+      data[groupId] = {
+        name: t('hook_' + groupId),
+        value: [hook],
+        description: t(groupId === hook ? `hook_${hook}_desc` : 'hook_' + hook),
+        size,
+      }
+    }
+  })
+  return data
+}
+
+function onQueriesResponse(data) {
+  infos.value = {
+    name: props.name,
+    created_at: data.created_at,
+    size: data.size,
+    path: data.path,
+  }
+  system.value = formatHooks(data.system)
+  apps.value = data.apps
+
+  toggleSelected()
+}
+
+function toggleSelected(select = true) {
+  if (select) {
+    selected.value = [...Object.keys(apps.value), ...Object.keys(system.value)]
+  } else {
+    selected.value = []
+  }
+}
+
+async function restoreBackup() {
+  const confirmed = await modalConfirm(
+    t('confirm_restore', { name: props.name }),
+  )
+  if (!confirmed) return
+
+  const data = { apps: [], system: [], force: '' }
+  for (const item of selected.value) {
+    if (item in system.value) {
+      data.system = [...data.system, ...system.value[item].value]
+    } else {
+      data.apps.push(item)
+    }
+  }
+
+  api
+    .put(`backups/${props.name}/restore`, data, {
+      key: 'backups.restore',
+      name: props.name,
+    })
+    .then(() => {
+      isValid.value = null
+    })
+    .catch((err: APIError) => {
+      if (!(err instanceof APIBadRequestError)) throw err
+      error.value = err.message
+      isValid.value = false
+    })
+}
+
+async function deleteBackup() {
+  const confirmed = await modalConfirm(
+    t('confirm_delete', { name: props.name }),
+  )
+  if (!confirmed) return
+
+  api
+    .delete(
+      'backups/' + props.name,
+      {},
+      { key: 'backups.delete', name: props.name },
+    )
+    .then(() => {
+      router.push({ name: 'backup-list', params: { id: props.id } })
+    })
+}
+
+function downloadBackup() {
+  const host = store.getters.host
+  window.open(
+    `https://${host}/yunohost/api/backups/${props.name}/download`,
+    '_blank',
+  )
+}
+</script>
+
 <template>
   <ViewBase :queries="queries" @queries-response="onQueriesResponse">
     <!-- BACKUP INFO -->
@@ -106,7 +239,7 @@
         </BListGroup>
 
         <BFormInvalidFeedback id="backup-restore-feedback" :state="isValid">
-          <BAlert variant="danger" class="mb-0">
+          <BAlert :modelValue="true" variant="danger" class="mb-0">
             {{ error }}
           </BAlert>
         </BFormInvalidFeedback>
@@ -134,150 +267,3 @@
     </template>
   </ViewBase>
 </template>
-
-<script>
-import api from '@/api'
-import { useAutoModal } from '@/composables/useAutoModal'
-import { readableDate } from '@/helpers/filters/date'
-import { humanSize } from '@/helpers/filters/human'
-import { isEmptyValue } from '@/helpers/commons'
-
-export default {
-  name: 'BackupInfo',
-
-  props: {
-    id: { type: String, required: true },
-    name: { type: String, required: true },
-  },
-
-  setup() {
-    return {
-      modalConfirm: useAutoModal(),
-    }
-  },
-
-  data() {
-    return {
-      queries: [['GET', `backups/${this.name}?with_details`]],
-      selected: [],
-      error: '',
-      isValid: null,
-      // api data
-      infos: undefined,
-      apps: undefined,
-      system: undefined,
-    }
-  },
-
-  computed: {
-    hasBackupData() {
-      return !isEmptyValue(this.system) || !isEmptyValue(this.apps)
-    },
-  },
-
-  methods: {
-    formatHooks(hooks) {
-      const data = {}
-      Object.entries(hooks).forEach(([hook, { size }]) => {
-        const groupId = hook.startsWith('conf_')
-          ? 'adminjs_group_configuration'
-          : hook
-        if (groupId in data) {
-          data[groupId].value.push(hook)
-          data[groupId].description += ', ' + this.$t('hook_' + hook)
-          data[groupId].size += size
-        } else {
-          data[groupId] = {
-            name: this.$t('hook_' + groupId),
-            value: [hook],
-            description: this.$t(
-              groupId === hook ? `hook_${hook}_desc` : 'hook_' + hook,
-            ),
-            size,
-          }
-        }
-      })
-      return data
-    },
-
-    onQueriesResponse(data) {
-      this.infos = {
-        name: this.name,
-        created_at: data.created_at,
-        size: data.size,
-        path: data.path,
-      }
-      this.system = this.formatHooks(data.system)
-      this.apps = data.apps
-
-      this.toggleSelected()
-    },
-
-    toggleSelected(select = true) {
-      if (select) {
-        this.selected = [...Object.keys(this.apps), ...Object.keys(this.system)]
-      } else {
-        this.selected = []
-      }
-    },
-
-    async restoreBackup() {
-      const confirmed = await this.modalConfirm(
-        this.$t('confirm_restore', { name: this.name }),
-      )
-      if (!confirmed) return
-
-      const data = { apps: [], system: [], force: '' }
-      for (const item of this.selected) {
-        if (item in this.system) {
-          data.system = [...data.system, ...this.system[item].value]
-        } else {
-          data.apps.push(item)
-        }
-      }
-
-      api
-        .put(`backups/${this.name}/restore`, data, {
-          key: 'backups.restore',
-          name: this.name,
-        })
-        .then(() => {
-          this.isValid = null
-        })
-        .catch((err) => {
-          if (err.name !== 'APIBadRequestError') throw err
-          this.error = err.message
-          this.isValid = false
-        })
-    },
-
-    async deleteBackup() {
-      const confirmed = await this.modalConfirm(
-        this.$t('confirm_delete', { name: this.name }),
-      )
-      if (!confirmed) return
-
-      api
-        .delete(
-          'backups/' + this.name,
-          {},
-          { key: 'backups.delete', name: this.name },
-        )
-        .then(() => {
-          this.$router.push({ name: 'backup-list', params: { id: this.id } })
-        })
-    },
-
-    downloadBackup() {
-      const host = this.$store.getters.host
-      window.open(
-        `https://${host}/yunohost/api/backups/${this.name}/download`,
-        '_blank',
-      )
-    },
-
-    readableDate,
-    humanSize,
-  },
-}
-</script>
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index a1a19f454..cd9da0ac8 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -1,3 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { distanceToNow, readableDate } from '@/helpers/filters/date'
+import { humanSize } from '@/helpers/filters/human'
+import type { Obj } from '@/types/commons'
+
+const props = defineProps<{
+  id: string
+}>()
+
+const queries = [['GET', 'backups?with_info']]
+const archives = ref<Obj[] | null>(null)
+
+function onQueriesResponse(data) {
+  const archives_ = Object.entries(data.archives)
+  if (archives_.length) {
+    archives.value = archives_
+      .map(([name, infos]) => {
+        infos.name = name
+        return infos
+      })
+      .reverse()
+  } else {
+    archives.value = null
+  }
+}
+</script>
+
 <template>
   <ViewBase
     :queries="queries"
@@ -43,43 +72,3 @@
     </BListGroup>
   </ViewBase>
 </template>
-
-<script>
-import { distanceToNow, readableDate } from '@/helpers/filters/date'
-import { humanSize } from '@/helpers/filters/human'
-
-export default {
-  name: 'BackupList',
-
-  props: {
-    id: { type: String, required: true },
-  },
-
-  data() {
-    return {
-      queries: [['GET', 'backups?with_info']],
-      archives: undefined,
-    }
-  },
-
-  methods: {
-    onQueriesResponse(data) {
-      const archives = Object.entries(data.archives)
-      if (archives.length) {
-        this.archives = archives
-          .map(([name, infos]) => {
-            infos.name = name
-            return infos
-          })
-          .reverse()
-      } else {
-        this.archives = null
-      }
-    },
-
-    distanceToNow,
-    readableDate,
-    humanSize,
-  },
-}
-</script>
diff --git a/app/src/views/backup/BackupView.vue b/app/src/views/backup/BackupView.vue
index 5601b05de..d1f5da8bf 100644
--- a/app/src/views/backup/BackupView.vue
+++ b/app/src/views/backup/BackupView.vue
@@ -2,40 +2,18 @@
   <div>
     <BListGroup>
       <BListGroupItem
-        v-for="{ id, name, uri } in storages"
-        :key="id"
-        :to="{ name: 'backup-list', params: { id } }"
+        :to="{ name: 'backup-list', params: { id: 'local' } }"
         class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
           <h5 class="fw-bold">
-            {{ name }}
-            <small class="text-secondary">{{ id }}</small>
+            {{ $t('local_archives') }}
+            <small class="text-secondary">local</small>
           </h5>
-          <p class="m-0">
-            {{ uri }}
-          </p>
+          <p class="m-0">/home/yunohost.backup/</p>
         </div>
         <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'BackupView',
-
-  data() {
-    return {
-      storages: [
-        {
-          id: 'local',
-          name: this.$t('local_archives'),
-          uri: '/home/yunohost.backup/',
-        },
-      ],
-    }
-  },
-}
-</script>
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 565fd5e62..7518d79cf 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -1,9 +1,109 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import api from '@/api'
+import type ViewBase from '@/components/globals/ViewBase.vue'
+import { distanceToNow } from '@/helpers/filters/date'
+import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
+import { useStoreGetters } from '@/store/utils'
+
+const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
+
+const queries = [
+  ['PUT', 'diagnosis/run?except_if_never_ran_yet', {}, 'diagnosis.run'],
+  ['GET', 'diagnosis?full'],
+]
+const { dark } = useStoreGetters()
+
+const reports = ref()
+
+function onQueriesResponse(_, reportsData) {
+  if (reportsData === null) {
+    reports.value = null
+    return
+  }
+
+  const reports_ = reportsData.reports
+  for (const report of reports_) {
+    report.warnings = 0
+    report.errors = 0
+    report.ignoreds = 0
+
+    for (const item of report.items) {
+      const status = (item.variant = item.status.toLowerCase())
+      item.icon = DEFAULT_STATUS_ICON[status]
+      item.issue = false
+
+      if (item.ignored) {
+        report.ignoreds++
+      }
+      if (status === 'warning') {
+        item.issue = true
+        if (!item.ignored) {
+          report.warnings++
+        }
+      } else if (status === 'error') {
+        item.variant = 'danger'
+        item.issue = true
+        if (!item.ignored) {
+          report.errors++
+        }
+      }
+    }
+
+    report.noIssues = report.warnings + report.errors === 0
+  }
+  reports.value = reports_
+}
+
+function runDiagnosis({ id = null, description } = {}) {
+  const param = id !== null ? '?force' : ''
+  const data = id !== null ? { categories: [id] } : {}
+
+  api
+    .put('diagnosis/run' + param, data, {
+      key: 'diagnosis.run' + (id !== null ? '_specific' : ''),
+      description,
+    })
+    .then(() => viewElem.value!.fetchQueries())
+}
+
+function toggleIgnoreIssue(action, report, item) {
+  const filterArgs = [report.id].concat(
+    Object.entries(item.meta).map((entries) => entries.join('=')),
+  )
+
+  api
+    .put(
+      'diagnosis/' + action,
+      { filter: filterArgs },
+      `diagnosis.${action}.${item.status.toLowerCase()}`,
+    )
+    .then(() => {
+      item.ignored = action === 'ignore'
+      if (item.ignored) {
+        report[item.status.toLowerCase() + 's']--
+        report.ignoreds++
+      } else {
+        report[item.status.toLowerCase() + 's']++
+        report.ignoreds--
+      }
+    })
+}
+
+function shareLogs() {
+  api.get('diagnosis?share').then(({ url }) => {
+    window.open(url, '_blank')
+  })
+}
+</script>
+
 <template>
   <ViewBase
     :queries="queries"
     @queries-response="onQueriesResponse"
     queries-wait
-    ref="view"
+    ref="viewElem"
   >
     <template #top-bar-group-right>
       <BButton @click="shareLogs" variant="success">
@@ -145,116 +245,6 @@
   </ViewBase>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import api from '@/api'
-import { distanceToNow } from '@/helpers/filters/date'
-import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
-
-export default {
-  name: 'DiagnosisView',
-
-  data() {
-    return {
-      queries: [
-        ['PUT', 'diagnosis/run?except_if_never_ran_yet', {}, 'diagnosis.run'],
-        ['GET', 'diagnosis?full'],
-      ],
-      reports: undefined,
-    }
-  },
-
-  computed: {
-    ...mapGetters(['dark']),
-  },
-
-  methods: {
-    onQueriesResponse(_, reportsData) {
-      if (reportsData === null) {
-        this.reports = null
-        return
-      }
-
-      const reports = reportsData.reports
-      for (const report of reports) {
-        report.warnings = 0
-        report.errors = 0
-        report.ignoreds = 0
-
-        for (const item of report.items) {
-          const status = (item.variant = item.status.toLowerCase())
-          item.icon = DEFAULT_STATUS_ICON[status]
-          item.issue = false
-
-          if (item.ignored) {
-            report.ignoreds++
-          }
-          if (status === 'warning') {
-            item.issue = true
-            if (!item.ignored) {
-              report.warnings++
-            }
-          } else if (status === 'error') {
-            item.variant = 'danger'
-            item.issue = true
-            if (!item.ignored) {
-              report.errors++
-            }
-          }
-        }
-
-        report.noIssues = report.warnings + report.errors === 0
-      }
-      this.reports = reports
-    },
-
-    runDiagnosis({ id = null, description } = {}) {
-      const param = id !== null ? '?force' : ''
-      const data = id !== null ? { categories: [id] } : {}
-
-      api
-        .put('diagnosis/run' + param, data, {
-          key: 'diagnosis.run' + (id !== null ? '_specific' : ''),
-          description,
-        })
-        .then(this.$refs.view.fetchQueries)
-    },
-
-    toggleIgnoreIssue(action, report, item) {
-      const filterArgs = [report.id].concat(
-        Object.entries(item.meta).map((entries) => entries.join('=')),
-      )
-
-      api
-        .put(
-          'diagnosis/' + action,
-          { filter: filterArgs },
-          `diagnosis.${action}.${item.status.toLowerCase()}`,
-        )
-        .then(() => {
-          item.ignored = action === 'ignore'
-          if (item.ignored) {
-            report[item.status.toLowerCase() + 's']--
-            report.ignoreds++
-          } else {
-            report[item.status.toLowerCase() + 's']++
-            report.ignoreds--
-          }
-        })
-    },
-
-    shareLogs() {
-      api.get('diagnosis?share').then(({ url }) => {
-        window.open(url, '_blank')
-      })
-    },
-
-    distanceToNow,
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .badge + .badge {
   margin-left: 0.5rem;
diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/domain/DomainAdd.vue
index 745a81ad3..512821077 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -1,3 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+
+import api from '@/api'
+import { APIBadRequestError, type APIError } from '@/api/errors'
+import { DomainForm } from '@/views/_partials'
+
+const router = useRouter()
+const store = useStore()
+
+const queries = [['GET', { uri: 'domains' }]]
+const serverError = ref('')
+
+function onSubmit(data) {
+  api
+    .post('domains', data, { key: 'domains.add', name: data.domain })
+    .then(() => {
+      store.dispatch('RESET_CACHE_DATA', ['domains'])
+      router.push({ name: 'domain-list' })
+    })
+    .catch((err: APIError) => {
+      if (!(err instanceof APIBadRequestError)) throw err
+      serverError.value = err.message
+    })
+}
+</script>
+
 <template>
   <ViewBase :queries="queries" skeleton="CardFormSkeleton">
     <DomainForm
@@ -8,36 +37,3 @@
     />
   </ViewBase>
 </template>
-
-<script>
-import api from '@/api'
-import { DomainForm } from '@/views/_partials'
-
-export default {
-  name: 'DomainAdd',
-
-  data() {
-    return {
-      queries: [['GET', { uri: 'domains' }]],
-      serverError: '',
-    }
-  },
-
-  methods: {
-    onSubmit(data) {
-      api
-        .post('domains', data, { key: 'domains.add', name: data.domain })
-        .then(() => {
-          this.$store.dispatch('RESET_CACHE_DATA', ['domains'])
-          this.$router.push({ name: 'domain-list' })
-        })
-        .catch((err) => {
-          if (err.name !== 'APIBadRequestError') throw err
-          this.serverError = err.message
-        })
-    },
-  },
-
-  components: { DomainForm },
-}
-</script>
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index f480a35cc..2fc711802 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -1,3 +1,133 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
+import { isEmptyValue } from '@/helpers/commons'
+
+const props = defineProps<{
+  name: string
+}>()
+
+const { t } = useI18n()
+const modalConfirm = useAutoModal()
+
+const queries = [['GET', `domains/${props.name}/dns/suggest`]]
+const loading = ref(true)
+const showAutoConfigCard = ref(true)
+const showManualConfigCard = ref(false)
+const dnsConfig = ref('')
+const dnsChanges = ref(undefined)
+const dnsErrors = ref(undefined)
+const dnsZone = ref(undefined)
+const force = ref(null)
+
+getDnsChanges()
+
+function onQueriesResponse(suggestedConfig) {
+  dnsConfig.value = suggestedConfig
+}
+
+function getDnsChanges() {
+  loading.value = true
+
+  return api
+    .post(`domains/${props.name}/dns/push?dry_run`, {}, null, {
+      wait: false,
+      websocket: false,
+    })
+    .then((dnsChanges) => {
+      function getLongest(arr, key) {
+        return arr.reduce((acc, obj) => {
+          if (obj[key].length > acc) return obj[key].length
+          return acc
+        }, 0)
+      }
+
+      const changes = []
+      let canForce = false
+      const categories = [
+        { action: 'create', icon: 'plus', variant: 'success' },
+        { action: 'update', icon: 'exchange', variant: 'warning' },
+        { action: 'delete', icon: 'minus', variant: 'danger' },
+      ]
+      categories.forEach((category) => {
+        const records = dnsChanges[category.action]
+        if (records && records.length > 0) {
+          const longestName = getLongest(records, 'name')
+          const longestType = getLongest(records, 'type')
+          records.forEach((record) => {
+            record.name =
+              record.name + ' '.repeat(longestName - record.name.length + 1)
+            record.spaces = ' '.repeat(longestType - record.type.length + 1)
+            if (record.managed_by_yunohost === false) canForce = true
+          })
+          changes.push({ ...category, records })
+        }
+      })
+
+      const unchanged = dnsChanges.unchanged
+      if (unchanged) {
+        const longestName = getLongest(unchanged, 'name')
+        const longestType = getLongest(unchanged, 'type')
+        unchanged.forEach((record) => {
+          record.name =
+            record.name + ' '.repeat(longestName - record.name.length + 1)
+          record.spaces = ' '.repeat(longestType - record.type.length + 1)
+        })
+        dnsZone.value = unchanged
+      }
+
+      dnsChanges.value = changes.length > 0 ? changes : null
+      force.value = canForce ? false : null
+      loading.value = false
+    })
+    .catch((err) => {
+      if (err.name !== 'APIBadRequestError') throw err
+      const key = err.data.error_key
+      if (key === 'domain_dns_push_managed_in_parent_domain') {
+        const message = t(key, err.data)
+        dnsErrors.value = [{ icon: 'info', variant: 'info', message }]
+      } else if (key === 'domain_dns_push_failed_to_authenticate') {
+        const message = t(key, err.data)
+        dnsErrors.value = [{ icon: 'ban', variant: 'danger', message }]
+      } else {
+        showManualConfigCard.value = true
+        showAutoConfigCard.value = false
+      }
+      loading.value = false
+    })
+}
+
+async function pushDnsChanges() {
+  if (force.value) {
+    const confirmed = await modalConfirm(t('domain.dns.push_force_confirm'))
+    if (!confirmed) return
+  }
+
+  api
+    .post(
+      `domains/${props.name}/dns/push${force.value ? '?force' : ''}`,
+      {},
+      { key: 'domains.push_dns_changes', name: props.name },
+    )
+    .then(async (responseData) => {
+      await getDnsChanges()
+      if (!isEmptyValue(responseData)) {
+        dnsErrors.value = Object.keys(responseData).reduce((acc, key) => {
+          const args =
+            key === 'warnings'
+              ? { icon: 'warning', variant: 'warning' }
+              : { icon: 'ban', variant: 'danger' }
+          responseData[key].forEach((message) => acc.push({ ...args, message }))
+          return acc
+        }, [])
+      }
+    })
+}
+</script>
+
 <template>
   <ViewBase
     :queries="queries"
@@ -143,152 +273,6 @@
   </ViewBase>
 </template>
 
-<script>
-import api from '@/api'
-import { useAutoModal } from '@/composables/useAutoModal'
-import { isEmptyValue } from '@/helpers/commons'
-
-export default {
-  name: 'DomainDns',
-
-  props: {
-    name: { type: String, required: true },
-  },
-
-  setup() {
-    return {
-      modalConfirm: useAutoModal(),
-    }
-  },
-
-  data() {
-    return {
-      queries: [['GET', `domains/${this.name}/dns/suggest`]],
-      loading: true,
-      showAutoConfigCard: true,
-      showManualConfigCard: false,
-      dnsConfig: '',
-      dnsChanges: undefined,
-      dnsErrors: undefined,
-      dnsZone: undefined,
-      force: null,
-    }
-  },
-
-  methods: {
-    onQueriesResponse(suggestedConfig) {
-      this.dnsConfig = suggestedConfig
-    },
-
-    getDnsChanges() {
-      this.loading = true
-
-      return api
-        .post(`domains/${this.name}/dns/push?dry_run`, {}, null, {
-          wait: false,
-          websocket: false,
-        })
-        .then((dnsChanges) => {
-          function getLongest(arr, key) {
-            return arr.reduce((acc, obj) => {
-              if (obj[key].length > acc) return obj[key].length
-              return acc
-            }, 0)
-          }
-
-          const changes = []
-          let canForce = false
-          const categories = [
-            { action: 'create', icon: 'plus', variant: 'success' },
-            { action: 'update', icon: 'exchange', variant: 'warning' },
-            { action: 'delete', icon: 'minus', variant: 'danger' },
-          ]
-          categories.forEach((category) => {
-            const records = dnsChanges[category.action]
-            if (records && records.length > 0) {
-              const longestName = getLongest(records, 'name')
-              const longestType = getLongest(records, 'type')
-              records.forEach((record) => {
-                record.name =
-                  record.name + ' '.repeat(longestName - record.name.length + 1)
-                record.spaces = ' '.repeat(longestType - record.type.length + 1)
-                if (record.managed_by_yunohost === false) canForce = true
-              })
-              changes.push({ ...category, records })
-            }
-          })
-
-          const unchanged = dnsChanges.unchanged
-          if (unchanged) {
-            const longestName = getLongest(unchanged, 'name')
-            const longestType = getLongest(unchanged, 'type')
-            unchanged.forEach((record) => {
-              record.name =
-                record.name + ' '.repeat(longestName - record.name.length + 1)
-              record.spaces = ' '.repeat(longestType - record.type.length + 1)
-            })
-            this.dnsZone = unchanged
-          }
-
-          this.dnsChanges = changes.length > 0 ? changes : null
-          this.force = canForce ? false : null
-          this.loading = false
-        })
-        .catch((err) => {
-          if (err.name !== 'APIBadRequestError') throw err
-          const key = err.data.error_key
-          if (key === 'domain_dns_push_managed_in_parent_domain') {
-            const message = this.$t(key, err.data)
-            this.dnsErrors = [{ icon: 'info', variant: 'info', message }]
-          } else if (key === 'domain_dns_push_failed_to_authenticate') {
-            const message = this.$t(key, err.data)
-            this.dnsErrors = [{ icon: 'ban', variant: 'danger', message }]
-          } else {
-            this.showManualConfigCard = true
-            this.showAutoConfigCard = false
-          }
-          this.loading = false
-        })
-    },
-
-    async pushDnsChanges() {
-      if (this.force) {
-        const confirmed = await this.modalConfirm(
-          this.$t('domain.dns.push_force_confirm'),
-        )
-        if (!confirmed) return
-      }
-
-      api
-        .post(
-          `domains/${this.name}/dns/push${this.force ? '?force' : ''}`,
-          {},
-          { key: 'domains.push_dns_changes', name: this.name },
-        )
-        .then(async (responseData) => {
-          await this.getDnsChanges()
-          if (!isEmptyValue(responseData)) {
-            this.dnsErrors = Object.keys(responseData).reduce((acc, key) => {
-              const args =
-                key === 'warnings'
-                  ? { icon: 'warning', variant: 'warning' }
-                  : { icon: 'ban', variant: 'danger' }
-              responseData[key].forEach((message) =>
-                acc.push({ ...args, message }),
-              )
-              return acc
-            }, [])
-          }
-        })
-    },
-  },
-
-  created() {
-    this.getDnsChanges()
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .records {
   white-space: pre;
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 4445929e2..8cc6dd220 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -1,8 +1,159 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+
+import api, { objectToParams } from '@/api'
+import ConfigPanels from '@/components/ConfigPanels.vue'
+import type ViewBase from '@/components/globals/ViewBase.vue'
+import { useAutoModal } from '@/composables/useAutoModal'
+import {
+  formatFormData,
+  formatYunoHostConfigPanels,
+} from '@/helpers/yunohostArguments'
+import { useStoreGetters } from '@/store/utils'
+import DomainDns from '@/views/domain/DomainDns.vue'
+
+const props = defineProps<{
+  name: string
+}>()
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const store = useStore()
+const modalConfirm = useAutoModal()
+
+const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
+
+const { mainDomain } = useStoreGetters()
+
+const queries = [
+  ['GET', { uri: 'domains', storeKey: 'domains' }],
+  ['GET', { uri: 'domains', storeKey: 'domains_details', param: props.name }],
+  ['GET', `domains/${props.name}/config?full`],
+]
+const config = ref({})
+const externalResults = reactive({})
+const unsubscribeDomainFromDyndns = ref(false)
+
+const currentTab = computed(() => {
+  return route.params.tabId
+})
+
+const domain = computed(() => {
+  return store.getters.domain(props.name)
+})
+
+const parentName = computed(() => {
+  return store.getters.highestDomainParentName(props.name)
+})
+
+const cert = computed(() => {
+  const { CA_type: authority, validity } = domain.value.certificate
+  const baseInfos = { authority, validity }
+  if (validity <= 0) {
+    return { icon: 'times', variant: 'danger', ...baseInfos }
+  } else if (authority === 'other') {
+    return validity < 15
+      ? { icon: 'exclamation', variant: 'danger', ...baseInfos }
+      : { icon: 'check', variant: 'success', ...baseInfos }
+  } else if (authority === 'letsencrypt') {
+    return { icon: 'thumbs-up', variant: 'success', ...baseInfos }
+  }
+  return { icon: 'exclamation', variant: 'warning', ...baseInfos }
+})
+
+const dns = computed(() => {
+  return domain.value.dns
+})
+
+const isMainDomain = computed(() => {
+  if (!mainDomain.value) return
+  return props.name === mainDomain.value
+})
+
+const isMainDynDomain = computed(() => {
+  return (
+    domain.value.registrar === 'yunohost' && props.name.split('.').length === 3
+  )
+})
+
+function onQueriesResponse(domains, domain, config_) {
+  config.value = formatYunoHostConfigPanels(config_)
+}
+
+async function onConfigSubmit({ id, form, action, name }) {
+  const args = await formatFormData(form, {
+    removeEmpty: false,
+    removeNull: true,
+  })
+
+  api
+    .put(
+      action
+        ? `domain/${props.name}/actions/${action}`
+        : `domains/${props.name}/config/${id}`,
+      { args: objectToParams(args) },
+      {
+        key: `domains.${action ? 'action' : 'update'}_config`,
+        id,
+        name: props.name,
+      },
+    )
+    .then(() => viewElem.value!.fetchQueries({ triggerLoading: true }))
+    .catch((err) => {
+      if (err.name !== 'APIBadRequestError') throw err
+      const panel = config.value.panels.find((panel) => panel.id === id)
+      if (err.data.name) {
+        Object.assign(externalResults, {
+          forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
+        })
+      } else {
+        panel.serverError = err.message
+      }
+    })
+}
+
+async function deleteDomain() {
+  const data =
+    isMainDynDomain.value && !unsubscribeDomainFromDyndns.value
+      ? { ignore_dyndns: 1 }
+      : {}
+
+  api
+    .delete({ uri: 'domains', param: props.name }, data, {
+      key: 'domains.delete',
+      name: props.name,
+    })
+    .then(() => {
+      router.push({ name: 'domain-list' })
+    })
+}
+
+async function setAsDefaultDomain() {
+  const confirmed = await modalConfirm(t('confirm_change_maindomain'))
+  if (!confirmed) return
+
+  api
+    .put(
+      { uri: `domains/${props.name}/main`, storeKey: 'main_domain' },
+      {},
+      { key: 'domains.set_default', name: props.name },
+    )
+    .then(() => {
+      // FIXME Have to commit by hand here since the response is empty (should return the given name)
+      store.commit('UPDATE_MAIN_DOMAIN', props.name)
+    })
+}
+</script>
+
 <template>
   <ViewBase
     :queries="queries"
     @queries-response="onQueriesResponse"
-    ref="view"
+    ref="viewElem"
     skeleton="CardListSkeleton"
   >
     <!-- INFO CARD -->
@@ -122,7 +273,7 @@
     <BModal
       v-if="domain"
       id="delete-modal"
-      :title="$t('confirm_delete', { name: this.name })"
+      :title="$t('confirm_delete', { name: props.name })"
       @ok="deleteDomain"
       header-bg-variant="warning"
       header-class="text-black"
@@ -137,175 +288,6 @@
   </ViewBase>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import api, { objectToParams } from '@/api'
-import { useAutoModal } from '@/composables/useAutoModal'
-import {
-  formatFormData,
-  formatYunoHostConfigPanels,
-} from '@/helpers/yunohostArguments'
-import ConfigPanels from '@/components/ConfigPanels.vue'
-import DomainDns from './DomainDns.vue'
-
-export default {
-  name: 'DomainInfo',
-
-  components: {
-    ConfigPanels,
-    DomainDns,
-  },
-
-  props: {
-    name: { type: String, required: true },
-  },
-
-  setup() {
-    return {
-      modalConfirm: useAutoModal(),
-    }
-  },
-
-  data() {
-    return {
-      queries: [
-        ['GET', { uri: 'domains', storeKey: 'domains' }],
-        [
-          'GET',
-          { uri: 'domains', storeKey: 'domains_details', param: this.name },
-        ],
-        ['GET', `domains/${this.name}/config?full`],
-      ],
-      config: {},
-      externalResults: {},
-      unsubscribeDomainFromDyndns: false,
-    }
-  },
-
-  computed: {
-    ...mapGetters(['mainDomain']),
-
-    currentTab() {
-      return this.$route.params.tabId
-    },
-
-    domain() {
-      return this.$store.getters.domain(this.name)
-    },
-
-    parentName() {
-      return this.$store.getters.highestDomainParentName(this.name)
-    },
-
-    cert() {
-      const { CA_type: authority, validity } = this.domain.certificate
-      const baseInfos = { authority, validity }
-      if (validity <= 0) {
-        return { icon: 'times', variant: 'danger', ...baseInfos }
-      } else if (authority === 'other') {
-        return validity < 15
-          ? { icon: 'exclamation', variant: 'danger', ...baseInfos }
-          : { icon: 'check', variant: 'success', ...baseInfos }
-      } else if (authority === 'letsencrypt') {
-        return { icon: 'thumbs-up', variant: 'success', ...baseInfos }
-      }
-      return { icon: 'exclamation', variant: 'warning', ...baseInfos }
-    },
-
-    dns() {
-      return this.domain.dns
-    },
-
-    isMainDomain() {
-      if (!this.mainDomain) return
-      return this.name === this.mainDomain
-    },
-
-    isMainDynDomain() {
-      return (
-        this.domain.registrar === 'yunohost' &&
-        this.name.split('.').length === 3
-      )
-    },
-  },
-
-  methods: {
-    onQueriesResponse(domains, domain, config) {
-      this.config = formatYunoHostConfigPanels(config)
-    },
-
-    async onConfigSubmit({ id, form, action, name }) {
-      const args = await formatFormData(form, {
-        removeEmpty: false,
-        removeNull: true,
-      })
-
-      api
-        .put(
-          action
-            ? `domain/${this.name}/actions/${action}`
-            : `domains/${this.name}/config/${id}`,
-          { args: objectToParams(args) },
-          {
-            key: `domains.${action ? 'action' : 'update'}_config`,
-            id,
-            name: this.name,
-          },
-        )
-        .then(() => {
-          this.$refs.view.fetchQueries({ triggerLoading: true })
-        })
-        .catch((err) => {
-          if (err.name !== 'APIBadRequestError') throw err
-          const panel = this.config.panels.find((panel) => panel.id === id)
-          if (err.data.name) {
-            Object.assign(this.externalResults, {
-              forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
-            })
-          } else {
-            panel.serverError = err.message
-          }
-        })
-    },
-
-    async deleteDomain() {
-      const data =
-        this.isMainDynDomain && !this.unsubscribeDomainFromDyndns
-          ? { ignore_dyndns: 1 }
-          : {}
-
-      api
-        .delete({ uri: 'domains', param: this.name }, data, {
-          key: 'domains.delete',
-          name: this.name,
-        })
-        .then(() => {
-          this.$router.push({ name: 'domain-list' })
-        })
-    },
-
-    async setAsDefaultDomain() {
-      const confirmed = await this.modalConfirm(
-        this.$t('confirm_change_maindomain'),
-      )
-      if (!confirmed) return
-
-      api
-        .put(
-          { uri: `domains/${this.name}/main`, storeKey: 'main_domain' },
-          {},
-          { key: 'domains.set_default', name: this.name },
-        )
-        .then(() => {
-          // FIXME Have to commit by hand here since the response is empty (should return the given name)
-          this.$store.commit('UPDATE_MAIN_DOMAIN', this.name)
-        })
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .main-domain-badge {
   font-size: 0.75rem;
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 48118a4d6..82a289d07 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -1,3 +1,30 @@
+<script setup lang="ts">
+import { useStoreGetters } from '@/store/utils'
+import { computed, ref } from 'vue'
+
+import RecursiveListGroup from '@/components/RecursiveListGroup.vue'
+
+const { domains, mainDomain, domainsTree } = useStoreGetters()
+
+const queries = [['GET', { uri: 'domains', storeKey: 'domains' }]]
+const search = ref('')
+
+const tree = computed(() => {
+  // FIXME rm ts type when moved to pinia or else
+  if (!domainsTree.value) return
+  const search_ = search.value.toLowerCase()
+  if (search_) {
+    return domainsTree.value.filter((node) => node.id.includes(search_))
+  }
+  return domainsTree.value
+})
+
+const hasFilteredItems = computed(() => {
+  if (!tree.value) return null
+  return tree.value.children.length ? tree.value.children : null
+})
+</script>
+
 <template>
   <ViewSearch
     id="domain-list"
@@ -19,14 +46,17 @@
       :toggle-text="$t('domain.toggle_subdomains')"
       class="mb-5"
     >
+      <!-- FIXME slot typing not appearing? -->
       <template #default="{ data, parent }">
         <div class="w-100 d-flex justify-content-between align-items-center">
           <h5 class="me-3">
             <BLink :to="data.to" class="text-body text-decoration-none">
               <span class="fw-bold">
-                {{ data.name.replace(parent ? parent.data.name : null, '') }}
+                {{
+                  data.name.replace(parent?.data ? parent.data.name : null, '')
+                }}
               </span>
-              <span v-if="parent" class="text-secondary">
+              <span v-if="parent?.data" class="text-secondary">
                 {{ parent.data.name }}
               </span>
             </BLink>
@@ -45,44 +75,3 @@
     </RecursiveListGroup>
   </ViewSearch>
 </template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-import RecursiveListGroup from '@/components/RecursiveListGroup.vue'
-
-export default {
-  name: 'DomainList',
-
-  components: {
-    RecursiveListGroup,
-  },
-
-  data() {
-    return {
-      queries: [['GET', { uri: 'domains', storeKey: 'domains' }]],
-      search: '',
-    }
-  },
-
-  computed: {
-    ...mapGetters(['domains', 'mainDomain', 'domainsTree']),
-
-    tree() {
-      if (!this.domainsTree) return
-      if (this.search) {
-        const search = this.search.toLowerCase()
-        return this.domainsTree.filter((node) =>
-          node.data.name.includes(search),
-        )
-      }
-      return this.domainsTree
-    },
-
-    hasFilteredItems() {
-      if (!this.tree) return
-      return this.tree.children || null
-    },
-  },
-}
-</script>
diff --git a/app/src/views/group/GroupCreate.vue b/app/src/views/group/GroupCreate.vue
index ef30e5f08..f71379b92 100644
--- a/app/src/views/group/GroupCreate.vue
+++ b/app/src/views/group/GroupCreate.vue
@@ -1,3 +1,43 @@
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core'
+import { reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import api from '@/api'
+import { APIBadRequestError, APIError } from '@/api/errors'
+import { alphalownumdot_, required } from '@/helpers/validators'
+
+const { t } = useI18n()
+const router = useRouter()
+
+const form = reactive({ groupname: '' })
+const v$ = useVuelidate({ groupname: { required, alphalownumdot_ } }, form)
+const serverError = ref('')
+const groupnameField = {
+  label: t('group_name'),
+  description: t('group_format_name_help'),
+  props: {
+    id: 'groupname',
+    placeholder: t('placeholder.groupname'),
+  },
+}
+function onSubmit() {
+  api
+    .post({ uri: 'users/groups', storeKey: 'groups' }, form, {
+      key: 'groups.create',
+      name: form.groupname,
+    })
+    .then(() => {
+      router.push({ name: 'group-list' })
+    })
+    .catch((err: APIError) => {
+      if (!(err instanceof APIBadRequestError)) throw err
+      serverError.value = err.message
+    })
+}
+</script>
+
 <template>
   <CardForm
     :title="$t('group_new')"
@@ -8,66 +48,9 @@
   >
     <!-- GROUP NAME -->
     <FormField
-      v-bind="groupname"
+      v-bind="groupnameField"
       v-model="form.groupname"
       :validation="v$.form.groupname"
     />
   </CardForm>
 </template>
-
-<script>
-import { useVuelidate } from '@vuelidate/core'
-
-import api from '@/api'
-import { required, alphalownumdot_ } from '@/helpers/validators'
-
-export default {
-  name: 'GroupCreate',
-
-  setup() {
-    return {
-      v$: useVuelidate(),
-    }
-  },
-
-  data() {
-    return {
-      form: {
-        groupname: '',
-      },
-      serverError: '',
-      groupname: {
-        label: this.$t('group_name'),
-        description: this.$t('group_format_name_help'),
-        props: {
-          id: 'groupname',
-          placeholder: this.$t('placeholder.groupname'),
-        },
-      },
-    }
-  },
-
-  validations: {
-    form: {
-      groupname: { required, alphalownumdot_ },
-    },
-  },
-
-  methods: {
-    onSubmit() {
-      api
-        .post({ uri: 'users/groups', storeKey: 'groups' }, this.form, {
-          key: 'groups.create',
-          name: this.form.groupname,
-        })
-        .then(() => {
-          this.$router.push({ name: 'group-list' })
-        })
-        .catch((err) => {
-          if (err.name !== 'APIBadRequestError') throw err
-          this.serverError = err.message
-        })
-    },
-  },
-}
-</script>
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index b09d37679..350e1e0db 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -1,3 +1,185 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import api from '@/api'
+import TagsSelectizeItem from '@/components/globals/formItems/TagsSelectizeItem.vue'
+import { useAutoModal } from '@/composables/useAutoModal'
+import { isEmptyValue } from '@/helpers/commons'
+
+// TODO add global search with type (search by: group, user, permission)
+// TODO add vuex store update on inputs ?
+
+const { t } = useI18n()
+const modalConfirm = useAutoModal()
+
+const queries = [
+  ['GET', { uri: 'users' }],
+  [
+    'GET',
+    {
+      uri: 'users/groups?full&include_primary_groups',
+      storeKey: 'groups',
+    },
+  ],
+  ['GET', { uri: 'users/permissions?full', storeKey: 'permissions' }],
+]
+const search = ref('')
+const permissions = ref()
+const permissionsOptions = ref()
+const primaryGroups = ref()
+const userGroups = ref()
+const usersOptions = ref()
+const activeUserGroups = ref()
+
+const filteredGroups = computed(() => {
+  const groups = primaryGroups.value
+  if (!groups) return
+  const search_ = search.value.toLowerCase()
+  const filtered = {}
+  for (const groupName in groups) {
+    if (groupName.toLowerCase().includes(search_)) {
+      filtered[groupName] = groups[groupName]
+    }
+  }
+  return isEmptyValue(filtered) ? null : filtered
+})
+
+function onQueriesResponse(users, allGroups, permsDict) {
+  // Do not use computed properties to get values from the store here to avoid auto
+  // updates while modifying values.
+  const permissions_ = Object.entries(permsDict).map(([id, value]) => ({
+    id,
+    ...value,
+  }))
+  const userNames = users ? Object.keys(users) : []
+  const primaryGroups_ = {}
+  const userGroups_ = {}
+
+  for (const groupName in allGroups) {
+    // copy the group to unlink it from the store
+    const group_ = { ...allGroups[groupName] }
+    group_.permissions = group_.permissions.map((perm) => {
+      return permsDict[perm].label
+    })
+
+    if (userNames.includes(groupName)) {
+      userGroups_[groupName] = group_
+      continue
+    }
+
+    group_.isSpecial = ['visitors', 'all_users', 'admins'].includes(groupName)
+
+    if (groupName === 'visitors') {
+      // Forbid to add or remove a protected permission on group `visitors`
+      group_.disabledItems = permissions_
+        .filter(({ id }) => {
+          return (
+            ['mail.main', 'xmpp.main'].includes(id) || permsDict[id].protected
+          )
+        })
+        .map(({ id }) => permsDict[id].label)
+    }
+
+    if (groupName === 'all_users') {
+      // Forbid to add ssh and sftp permission on group `all_users`
+      group_.disabledItems = permissions_
+        .filter(({ id }) => {
+          return ['ssh.main', 'sftp.main'].includes(id)
+        })
+        .map(({ id }) => permsDict[id].label)
+    }
+
+    if (groupName === 'admins') {
+      // Forbid to add ssh and sftp permission on group `admins`
+      group_.disabledItems = permissions_
+        .filter(({ id }) => {
+          return ['ssh.main', 'sftp.main'].includes(id)
+        })
+        .map(({ id }) => permsDict[id].label)
+    }
+
+    primaryGroups_[groupName] = group_
+  }
+
+  const activeUserGroups_ = Object.entries(userGroups_)
+    .filter(([_, group]) => {
+      return group.permissions.length > 0
+    })
+    .map(([name]) => name)
+
+  permissions.value = permissions_
+  permissionsOptions.value = permissions_.map((perm) => perm.label)
+  primaryGroups.value = primaryGroups_
+  userGroups.value = isEmptyValue(userGroups_) ? null : userGroups_
+  usersOptions.value = userNames
+  activeUserGroups.value = activeUserGroups_
+}
+
+async function onPermissionChanged({ option, groupName, action, applyMethod }) {
+  const permId = permissions.value.find((perm) => perm.label === option).id
+  if (action === 'add' && ['sftp.main', 'ssh.main'].includes(permId)) {
+    const confirmed = await modalConfirm(
+      t('confirm_group_add_access_permission', {
+        name: groupName,
+        perm: option,
+      }),
+    )
+    if (!confirmed) return
+  }
+  api
+    .put(
+      // FIXME hacky way to update the store
+      {
+        uri: `users/permissions/${permId}/${action}/${groupName}`,
+        storeKey: 'permissions',
+        groupName,
+        action,
+        permId,
+      },
+      {},
+      { key: 'permissions.' + action, perm: option, name: groupName },
+    )
+    .then(() => applyMethod(option))
+}
+
+function onUserChanged({ option, groupName, action, applyMethod }) {
+  api
+    .put(
+      {
+        uri: `users/groups/${groupName}/${action}/${option}`,
+        storeKey: 'groups',
+        groupName,
+      },
+      {},
+      { key: 'groups.' + action, user: option, name: groupName },
+    )
+    .then(() => applyMethod(option))
+}
+
+function onSpecificUserAdded({ option: userName, action, applyMethod }) {
+  if (action === 'add') {
+    userGroups.value[userName].permissions = []
+    applyMethod(userName)
+  }
+}
+
+async function deleteGroup(groupName) {
+  const confirmed = await modalConfirm(t('confirm_delete', { name: groupName }))
+  if (!confirmed) return
+
+  api
+    .delete(
+      { uri: 'users/groups', param: groupName, storeKey: 'groups' },
+      {},
+      { key: 'groups.delete', name: groupName },
+    )
+    .then(() => {
+      delete primaryGroups.value[groupName]
+    })
+}
+</script>
+
 <template>
   <ViewSearch
     items-name="groups"
@@ -42,7 +224,6 @@
         <BCol md="3" lg="2">
           <strong>{{ $t('users') }}</strong>
         </BCol>
-
         <BCol>
           <template v-if="group.isSpecial">
             <p class="text-primary-emphasis">
@@ -132,210 +313,6 @@
   </ViewSearch>
 </template>
 
-<script>
-import api from '@/api'
-import { useAutoModal } from '@/composables/useAutoModal'
-import { isEmptyValue } from '@/helpers/commons'
-import TagsSelectizeItem from '@/components/globals/formItems/TagsSelectizeItem.vue'
-
-// TODO add global search with type (search by: group, user, permission)
-// TODO add vuex store update on inputs ?
-export default {
-  name: 'GroupList',
-
-  components: {
-    TagsSelectizeItem,
-  },
-
-  setup() {
-    return {
-      modalConfirm: useAutoModal(),
-    }
-  },
-
-  data() {
-    return {
-      queries: [
-        ['GET', { uri: 'users' }],
-        [
-          'GET',
-          {
-            uri: 'users/groups?full&include_primary_groups',
-            storeKey: 'groups',
-          },
-        ],
-        ['GET', { uri: 'users/permissions?full', storeKey: 'permissions' }],
-      ],
-      search: '',
-      permissions: undefined,
-      permissionsOptions: undefined,
-      primaryGroups: undefined,
-      userGroups: undefined,
-      usersOptions: undefined,
-      activeUserGroups: undefined,
-    }
-  },
-
-  computed: {
-    filteredGroups() {
-      const groups = this.primaryGroups
-      if (!groups) return
-      const search = this.search.toLowerCase()
-      const filtered = {}
-      for (const groupName in groups) {
-        if (groupName.toLowerCase().includes(search)) {
-          filtered[groupName] = groups[groupName]
-        }
-      }
-      return isEmptyValue(filtered) ? null : filtered
-    },
-  },
-
-  methods: {
-    onQueriesResponse(users, allGroups, permsDict) {
-      // Do not use computed properties to get values from the store here to avoid auto
-      // updates while modifying values.
-      const permissions = Object.entries(permsDict).map(([id, value]) => ({
-        id,
-        ...value,
-      }))
-      const userNames = users ? Object.keys(users) : []
-      const primaryGroups = {}
-      const userGroups = {}
-
-      for (const groupName in allGroups) {
-        // copy the group to unlink it from the store
-        const group = { ...allGroups[groupName] }
-        group.permissions = group.permissions.map((perm) => {
-          return permsDict[perm].label
-        })
-
-        if (userNames.includes(groupName)) {
-          userGroups[groupName] = group
-          continue
-        }
-
-        group.isSpecial = ['visitors', 'all_users', 'admins'].includes(
-          groupName,
-        )
-
-        if (groupName === 'visitors') {
-          // Forbid to add or remove a protected permission on group `visitors`
-          group.disabledItems = permissions
-            .filter(({ id }) => {
-              return (
-                ['mail.main', 'xmpp.main'].includes(id) ||
-                permsDict[id].protected
-              )
-            })
-            .map(({ id }) => permsDict[id].label)
-        }
-
-        if (groupName === 'all_users') {
-          // Forbid to add ssh and sftp permission on group `all_users`
-          group.disabledItems = permissions
-            .filter(({ id }) => {
-              return ['ssh.main', 'sftp.main'].includes(id)
-            })
-            .map(({ id }) => permsDict[id].label)
-        }
-
-        if (groupName === 'admins') {
-          // Forbid to add ssh and sftp permission on group `admins`
-          group.disabledItems = permissions
-            .filter(({ id }) => {
-              return ['ssh.main', 'sftp.main'].includes(id)
-            })
-            .map(({ id }) => permsDict[id].label)
-        }
-
-        primaryGroups[groupName] = group
-      }
-
-      const activeUserGroups = Object.entries(userGroups)
-        .filter(([_, group]) => {
-          return group.permissions.length > 0
-        })
-        .map(([name]) => name)
-
-      Object.assign(this, {
-        permissions,
-        permissionsOptions: permissions.map((perm) => perm.label),
-        primaryGroups,
-        userGroups: isEmptyValue(userGroups) ? null : userGroups,
-        usersOptions: userNames,
-        activeUserGroups,
-      })
-    },
-
-    async onPermissionChanged({ option, groupName, action, applyMethod }) {
-      const permId = this.permissions.find((perm) => perm.label === option).id
-      if (action === 'add' && ['sftp.main', 'ssh.main'].includes(permId)) {
-        const confirmed = await this.modalConfirm(
-          this.$t('confirm_group_add_access_permission', {
-            name: groupName,
-            perm: option,
-          }),
-        )
-        if (!confirmed) return
-      }
-      api
-        .put(
-          // FIXME hacky way to update the store
-          {
-            uri: `users/permissions/${permId}/${action}/${groupName}`,
-            storeKey: 'permissions',
-            groupName,
-            action,
-            permId,
-          },
-          {},
-          { key: 'permissions.' + action, perm: option, name: groupName },
-        )
-        .then(() => applyMethod(option))
-    },
-
-    onUserChanged({ option, groupName, action, applyMethod }) {
-      api
-        .put(
-          {
-            uri: `users/groups/${groupName}/${action}/${option}`,
-            storeKey: 'groups',
-            groupName,
-          },
-          {},
-          { key: 'groups.' + action, user: option, name: groupName },
-        )
-        .then(() => applyMethod(option))
-    },
-
-    onSpecificUserAdded({ option: userName, action, applyMethod }) {
-      if (action === 'add') {
-        this.userGroups[userName].permissions = []
-        applyMethod(userName)
-      }
-    },
-
-    async deleteGroup(groupName) {
-      const confirmed = await this.modalConfirm(
-        this.$t('confirm_delete', { name: groupName }),
-      )
-      if (!confirmed) return
-
-      api
-        .delete(
-          { uri: 'users/groups', param: groupName, storeKey: 'groups' },
-          {},
-          { key: 'groups.delete', name: groupName },
-        )
-        .then(() => {
-          delete this.primaryGroups[groupName]
-        })
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .row > div:first-child {
   margin-bottom: 1rem;
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index d14eb7bbb..afc808c6e 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -1,8 +1,94 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import api from '@/api'
+import type ViewBase from '@/components/globals/ViewBase.vue'
+import { useAutoModal } from '@/composables/useAutoModal'
+import { distanceToNow } from '@/helpers/filters/date'
+
+const props = defineProps<{
+  name: string
+}>()
+
+const { t } = useI18n()
+const modalConfirm = useAutoModal()
+const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
+
+const queries = [
+  ['GET', 'services/' + props.name],
+  ['GET', `services/${props.name}/log?number=50`],
+]
+const infos = ref()
+const uptime = ref()
+const isCritical = ref()
+const logs = ref()
+const action = ref()
+
+function onQueriesResponse(
+  // eslint-disable-next-line
+  { status, description, start_on_boot, last_state_change, configuration },
+  logs,
+) {
+  isCritical.value = ['nginx', 'ssh', 'slapd', 'yunohost-api'].includes(
+    props.name,
+  )
+  // eslint-disable-next-line
+  uptime.value = last_state_change === 'unknown' ? 0 : last_state_change
+  infos.value = { description, status, start_on_boot, configuration }
+
+  logs.value = Object.keys(logs)
+    .sort((prev, curr) => {
+      if (prev === 'journalctl') return -1
+      else if (curr === 'journalctl') return 1
+      else if (prev < curr) return -1
+      else return 1
+    })
+    .map((filename) => ({ content: logs[filename].join('\n'), filename }))
+}
+
+async function updateService(action) {
+  const confirmed = await modalConfirm(
+    t('confirm_service_' + action, { name: props.name }),
+  )
+  if (!confirmed) return
+
+  api
+    .put(
+      `services/${props.name}/${action}`,
+      {},
+      { key: 'services.' + action, name: props.name },
+    )
+    .then(() => viewElem.value!.fetchQueries())
+}
+
+function shareLogs() {
+  const logs = logs.value
+    .map(({ filename, content }) => {
+      return `LOGFILE: ${filename}\n${content}`
+    })
+    .join('\n\n')
+
+  fetch('https://paste.yunohost.org/documents', {
+    method: 'POST',
+    body: logs,
+  })
+    .then((response) => {
+      if (response.ok) return response.json()
+      // FIXME flash error
+      /* eslint-disable-next-line */ else console.log('error', response)
+    })
+    .then(({ key }) => {
+      window.open('https://paste.yunohost.org/' + key, '_blank')
+    })
+}
+</script>
+
 <template>
   <ViewBase
     :queries="queries"
     @queries-response="onQueriesResponse"
-    ref="view"
+    ref="viewElem"
     skeleton="CardInfoSkeleton"
   >
     <!-- INFO CARD -->
@@ -81,104 +167,6 @@
   </ViewBase>
 </template>
 
-<script>
-import api from '@/api'
-import { useAutoModal } from '@/composables/useAutoModal'
-import { distanceToNow } from '@/helpers/filters/date'
-
-export default {
-  name: 'ServiceInfo',
-
-  props: {
-    name: { type: String, required: true },
-  },
-
-  setup() {
-    return {
-      modalConfirm: useAutoModal(),
-    }
-  },
-
-  data() {
-    return {
-      queries: [
-        ['GET', 'services/' + this.name],
-        ['GET', `services/${this.name}/log?number=50`],
-      ],
-      // Service data
-      infos: undefined,
-      uptime: undefined,
-      isCritical: undefined,
-      logs: undefined,
-      // Modal action
-      action: undefined,
-    }
-  },
-
-  methods: {
-    onQueriesResponse(
-      // eslint-disable-next-line
-      { status, description, start_on_boot, last_state_change, configuration },
-      logs,
-    ) {
-      this.isCritical = ['nginx', 'ssh', 'slapd', 'yunohost-api'].includes(
-        this.name,
-      )
-      // eslint-disable-next-line
-      this.uptime = last_state_change === 'unknown' ? 0 : last_state_change
-      this.infos = { description, status, start_on_boot, configuration }
-
-      this.logs = Object.keys(logs)
-        .sort((prev, curr) => {
-          if (prev === 'journalctl') return -1
-          else if (curr === 'journalctl') return 1
-          else if (prev < curr) return -1
-          else return 1
-        })
-        .map((filename) => ({ content: logs[filename].join('\n'), filename }))
-    },
-
-    async updateService(action) {
-      const confirmed = await this.modalConfirm(
-        this.$t('confirm_service_' + action, { name: this.name }),
-      )
-      if (!confirmed) return
-
-      api
-        .put(
-          `services/${this.name}/${action}`,
-          {},
-          { key: 'services.' + action, name: this.name },
-        )
-        .then(this.$refs.view.fetchQueries)
-    },
-
-    shareLogs() {
-      const logs = this.logs
-        .map(({ filename, content }) => {
-          return `LOGFILE: ${filename}\n${content}`
-        })
-        .join('\n\n')
-
-      fetch('https://paste.yunohost.org/documents', {
-        method: 'POST',
-        body: logs,
-      })
-        .then((response) => {
-          if (response.ok) return response.json()
-          // FIXME flash error
-          /* eslint-disable-next-line */ else console.log('error', response)
-        })
-        .then(({ key }) => {
-          window.open('https://paste.yunohost.org/' + key, '_blank')
-        })
-    },
-
-    distanceToNow,
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 h3 {
   margin-bottom: 1rem;
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 874206a67..70b05ffad 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -1,3 +1,33 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { distanceToNow } from '@/helpers/filters/date'
+
+const queries = [['GET', 'services']]
+const search = ref('')
+const services = ref()
+
+const filteredServices = computed(() => {
+  if (!services.value) return
+  const services_ = services.value.filter(({ name }) => {
+    return name.toLowerCase().includes(search.value.toLowerCase())
+  })
+  return services_.length ? services_ : null
+})
+
+function onQueriesResponse(services) {
+  services.value = Object.keys(services)
+    .sort()
+    .map((name) => {
+      const service = services[name]
+      if (service.last_state_change === 'unknown') {
+        service.last_state_change = 0
+      }
+      return { ...service, name }
+    })
+}
+</script>
+
 <template>
   <ViewSearch
     id="service-list"
@@ -42,49 +72,6 @@
   </ViewSearch>
 </template>
 
-<script>
-import { distanceToNow } from '@/helpers/filters/date'
-
-export default {
-  name: 'ServiceList',
-
-  data() {
-    return {
-      queries: [['GET', 'services']],
-      search: '',
-      services: undefined,
-    }
-  },
-
-  computed: {
-    filteredServices() {
-      if (!this.services) return
-      const search = this.search.toLowerCase()
-      const services = this.services.filter(({ name }) => {
-        return name.toLowerCase().includes(search)
-      })
-      return services.length ? services : null
-    },
-  },
-
-  methods: {
-    onQueriesResponse(services) {
-      this.services = Object.keys(services)
-        .sort()
-        .map((name) => {
-          const service = services[name]
-          if (service.last_state_change === 'unknown') {
-            service.last_state_change = 0
-          }
-          return { ...service, name }
-        })
-    },
-
-    distanceToNow,
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 @include media-breakpoint-down(lg) {
   h5 small {
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 30a475130..10a56bf5c 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -1,8 +1,168 @@
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core'
+import { reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import api from '@/api'
+import { APIBadRequestError, type APIError } from '@/api/errors'
+import type ViewBase from '@/components/globals/ViewBase.vue'
+import { useAutoModal } from '@/composables/useAutoModal'
+import { between, integer, required } from '@/helpers/validators'
+
+const { t } = useI18n()
+const modalConfirm = useAutoModal()
+
+const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
+
+const queries = [['GET', '/firewall?raw']]
+
+const fields = [
+  { key: 'port', label: t('port') },
+  { key: 'ipv4', label: t('ipv4') },
+  { key: 'ipv6', label: t('ipv6') },
+  { key: 'uPnP', label: t('upnp') },
+]
+const form = reactive({
+  action: 'allow',
+  port: undefined,
+  connection: 'ipv4',
+  protocol: 'TCP',
+})
+const v$ = useVuelidate(
+  {
+    port: { number: required, integer, between: between(0, 65535) },
+  },
+  form,
+)
+const serverError = ref('')
+
+// Ports tables data
+const protocols = ref()
+
+// Ports form data
+const actionChoices = [
+  { value: 'allow', text: t('open') },
+  { value: 'disallow', text: t('close') },
+]
+const connectionChoices = [
+  { value: 'ipv4', text: t('ipv4') },
+  { value: 'ipv6', text: t('ipv6') },
+]
+const protocolChoices = [
+  { value: 'TCP', text: t('tcp') },
+  { value: 'UDP', text: t('udp') },
+  { value: 'Both', text: t('both') },
+]
+
+// uPnP
+const upnpEnabled = ref()
+const upnpError = ref('')
+
+function onQueriesResponse(data) {
+  const ports = Object.values(data).reduce(
+    (ports_, protocols_) => {
+      for (const type of ['TCP', 'UDP']) {
+        for (const port of protocols_[type]) {
+          ports_[type].add(port)
+        }
+      }
+      return ports
+    },
+    { TCP: new Set(), UDP: new Set() },
+  )
+
+  const tables = {
+    TCP: [],
+    UDP: [],
+  }
+  for (const protocol of ['TCP', 'UDP']) {
+    for (const port of ports[protocol]) {
+      const row = { port }
+      for (const connection of ['ipv4', 'ipv6', 'uPnP']) {
+        row[connection] = data[connection][protocol].includes(port)
+      }
+      tables[protocol].push(row)
+    }
+    tables[protocol].sort((a, b) => (a.port < b.port ? -1 : 1))
+  }
+
+  protocols.value = tables
+  upnpEnabled.value = data.uPnP.enabled
+}
+
+async function togglePort({ action, port, protocol, connection }) {
+  const confirmed = await modalConfirm(
+    t('confirm_firewall_' + action, {
+      port,
+      protocol,
+      connection,
+    }),
+  )
+  if (!confirmed) {
+    return Promise.resolve(confirmed)
+  }
+
+  const actionTrad = t({ allow: 'open', disallow: 'close' }[action])
+  return api
+    .put(
+      `firewall/${protocol}/${action}/${port}?${connection}_only`,
+      {},
+      {
+        key: 'firewall.ports',
+        protocol,
+        action: actionTrad,
+        port,
+        connection,
+      },
+      { wait: false },
+    )
+    .then(() => confirmed)
+}
+
+async function toggleUpnp(value) {
+  const action = upnpEnabled.value ? 'disable' : 'enable'
+  const confirmed = await modalConfirm(t('confirm_upnp_' + action))
+  if (!confirmed) return
+
+  api
+    .put(
+      'firewall/upnp/' + action,
+      {},
+      { key: 'firewall.upnp', action: t(action) },
+    )
+    .then(() => {
+      // FIXME Couldn't test when it works.
+      viewElem.value!.fetchQueries()
+    })
+    .catch((err: APIError) => {
+      if (!(err instanceof APIBadRequestError)) throw err
+      upnpError.value = err.message
+    })
+}
+
+function onTablePortToggling(port, protocol, connection, index, value) {
+  protocols.value[protocol][index][connection] = value
+  const action = value ? 'allow' : 'disallow'
+  togglePort({ action, port, protocol, connection }).then((toggled) => {
+    // Revert change on cancel
+    if (!toggled) {
+      protocols.value[protocol][index][connection] = !value
+    }
+  })
+}
+
+function onFormPortToggling() {
+  togglePort(form).then((toggled) => {
+    if (toggled) viewElem.value!.fetchQueries()
+  })
+}
+</script>
+
 <template>
   <ViewBase
     :queries="queries"
     @queries-response="onQueriesResponse"
-    ref="view"
+    ref="viewElem"
     skeleton="CardFormSkeleton"
   >
     <!-- PORTS -->
@@ -115,178 +275,6 @@
   </ViewBase>
 </template>
 
-<script>
-import { useVuelidate } from '@vuelidate/core'
-
-import api from '@/api'
-import { useAutoModal } from '@/composables/useAutoModal'
-import { required, integer, between } from '@/helpers/validators'
-
-export default {
-  name: 'ToolFirewall',
-
-  setup() {
-    return {
-      v$: useVuelidate(),
-      modalConfirm: useAutoModal(),
-    }
-  },
-
-  data() {
-    return {
-      queries: [['GET', '/firewall?raw']],
-      serverError: '',
-
-      // Ports tables data
-      fields: [
-        { key: 'port', label: this.$t('port') },
-        { key: 'ipv4', label: this.$t('ipv4') },
-        { key: 'ipv6', label: this.$t('ipv6') },
-        { key: 'uPnP', label: this.$t('upnp') },
-      ],
-      protocols: undefined,
-      portToToggle: undefined,
-
-      // Ports form data
-      actionChoices: [
-        { value: 'allow', text: this.$t('open') },
-        { value: 'disallow', text: this.$t('close') },
-      ],
-      connectionChoices: [
-        { value: 'ipv4', text: this.$t('ipv4') },
-        { value: 'ipv6', text: this.$t('ipv6') },
-      ],
-      protocolChoices: [
-        { value: 'TCP', text: this.$t('tcp') },
-        { value: 'UDP', text: this.$t('udp') },
-        { value: 'Both', text: this.$t('both') },
-      ],
-      form: {
-        action: 'allow',
-        port: undefined,
-        connection: 'ipv4',
-        protocol: 'TCP',
-      },
-
-      // uPnP
-      upnpEnabled: undefined,
-      upnpError: '',
-    }
-  },
-
-  validations: {
-    form: {
-      port: { number: required, integer, between: between(0, 65535) },
-    },
-  },
-
-  methods: {
-    onQueriesResponse(data) {
-      const ports = Object.values(data).reduce(
-        (ports, protocols) => {
-          for (const type of ['TCP', 'UDP']) {
-            for (const port of protocols[type]) {
-              ports[type].add(port)
-            }
-          }
-          return ports
-        },
-        { TCP: new Set(), UDP: new Set() },
-      )
-
-      const tables = {
-        TCP: [],
-        UDP: [],
-      }
-      for (const protocol of ['TCP', 'UDP']) {
-        for (const port of ports[protocol]) {
-          const row = { port }
-          for (const connection of ['ipv4', 'ipv6', 'uPnP']) {
-            row[connection] = data[connection][protocol].includes(port)
-          }
-          tables[protocol].push(row)
-        }
-        tables[protocol].sort((a, b) => (a.port < b.port ? -1 : 1))
-      }
-
-      this.protocols = tables
-      this.upnpEnabled = data.uPnP.enabled
-    },
-
-    async togglePort({ action, port, protocol, connection }) {
-      const confirmed = await this.modalConfirm(
-        this.$t('confirm_firewall_' + action, {
-          port,
-          protocol,
-          connection,
-        }),
-      )
-      if (!confirmed) {
-        return Promise.resolve(confirmed)
-      }
-
-      const actionTrad = this.$t({ allow: 'open', disallow: 'close' }[action])
-      return api
-        .put(
-          `firewall/${protocol}/${action}/${port}?${connection}_only`,
-          {},
-          {
-            key: 'firewall.ports',
-            protocol,
-            action: actionTrad,
-            port,
-            connection,
-          },
-          { wait: false },
-        )
-        .then(() => confirmed)
-    },
-
-    async toggleUpnp(value) {
-      const action = this.upnpEnabled ? 'disable' : 'enable'
-      const confirmed = await this.modalConfirm(
-        this.$t('confirm_upnp_' + action),
-      )
-      if (!confirmed) return
-
-      api
-        .put(
-          'firewall/upnp/' + action,
-          {},
-          { key: 'firewall.upnp', action: this.$t(action) },
-        )
-        .then(() => {
-          // FIXME Couldn't test when it works.
-          this.$refs.view.fetchQueries()
-        })
-        .catch((err) => {
-          if (err.name !== 'APIBadRequestError') throw err
-          this.upnpError = err.message
-        })
-    },
-
-    onTablePortToggling(port, protocol, connection, index, value) {
-      this.protocols[protocol][index][connection] = value
-      const action = value ? 'allow' : 'disallow'
-      this.togglePort({ action, port, protocol, connection }).then(
-        (toggled) => {
-          // Revert change on cancel
-          if (!toggled) {
-            this.protocols[protocol][index][connection] = !value
-          }
-        },
-      )
-    },
-
-    onFormPortToggling(e) {
-      this.togglePort(this.form).then((toggled) => {
-        if (toggled) this.$refs.view.fetchQueries()
-      })
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 :deep() {
   .form-switch {
diff --git a/app/src/views/tool/ToolList.vue b/app/src/views/tool/ToolList.vue
index 2424d6d8e..7f970d6e7 100644
--- a/app/src/views/tool/ToolList.vue
+++ b/app/src/views/tool/ToolList.vue
@@ -1,3 +1,31 @@
+<script setup lang="ts">
+const menu = [
+  { routeName: 'tool-logs', icon: 'book', translation: 'logs' },
+  {
+    routeName: 'tool-migrations',
+    icon: 'share',
+    translation: 'migrations',
+  },
+  { routeName: 'service-list', icon: 'gears', translation: 'services' },
+  { routeName: 'tool-firewall', icon: 'shield', translation: 'firewall' },
+  {
+    routeName: 'tool-settings',
+    icon: 'sliders',
+    translation: 'tools_yunohost_settings',
+  },
+  {
+    routeName: 'tool-webadmin',
+    icon: 'sliders',
+    translation: 'tools_webadmin_settings',
+  },
+  {
+    routeName: 'tool-power',
+    icon: 'power-off',
+    translation: 'tools_shutdown_reboot',
+  },
+]
+</script>
+
 <!-- FIXME make a component shared with HomeView.vue ? -->
 <template>
   <BListGroup class="menu-list">
@@ -12,39 +40,3 @@
     </BListGroupItem>
   </BListGroup>
 </template>
-
-<script>
-export default {
-  name: 'ToolList',
-
-  data() {
-    return {
-      menu: [
-        { routeName: 'tool-logs', icon: 'book', translation: 'logs' },
-        {
-          routeName: 'tool-migrations',
-          icon: 'share',
-          translation: 'migrations',
-        },
-        { routeName: 'service-list', icon: 'gears', translation: 'services' },
-        { routeName: 'tool-firewall', icon: 'shield', translation: 'firewall' },
-        {
-          routeName: 'tool-settings',
-          icon: 'sliders',
-          translation: 'tools_yunohost_settings',
-        },
-        {
-          routeName: 'tool-webadmin',
-          icon: 'sliders',
-          translation: 'tools_webadmin_settings',
-        },
-        {
-          routeName: 'tool-power',
-          icon: 'power-off',
-          translation: 'tools_shutdown_reboot',
-        },
-      ],
-    }
-  },
-}
-</script>
diff --git a/app/src/views/tool/ToolLog.vue b/app/src/views/tool/ToolLog.vue
index 2a4e0fd6c..26d9e063e 100644
--- a/app/src/views/tool/ToolLog.vue
+++ b/app/src/views/tool/ToolLog.vue
@@ -1,8 +1,86 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import api, { objectToParams } from '@/api'
+import type ViewBase from '@/components/globals/ViewBase.vue'
+import { escapeHtml } from '@/helpers/commons'
+import { readableDate } from '@/helpers/filters/date'
+
+const props = defineProps<{
+  name: string
+}>()
+
+const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
+
+const numberOfLines = ref(25)
+const queries = computed(() => {
+  const queryString = objectToParams({
+    filter_irrelevant: '',
+    with_suboperations: '',
+    number: numberOfLines.value,
+  })
+  return [['GET', `logs/${props.name}?${queryString}`]]
+})
+
+// Log data
+const description = ref()
+const info = ref({})
+const logs = ref()
+// Logs line display
+const moreLogsAvailable = ref(false)
+
+function onQueriesResponse(log) {
+  if (log.logs.length === numberOfLines.value) {
+    moreLogsAvailable.value = true
+    numberOfLines.value *= 10
+  } else {
+    moreLogsAvailable.value = false
+  }
+  description.value = log.description
+
+  const levels = ['ERROR', 'WARNING', 'SUCCESS', 'INFO']
+  logs.value = log.logs
+    .map((line) => {
+      const escaped = escapeHtml(line)
+      for (const level of levels) {
+        if (line.includes(level + ' -')) {
+          return `<span class="alert-${
+            level === 'ERROR' ? 'danger' : level.toLowerCase()
+          }">${escaped}</span>`
+        }
+      }
+      return escaped
+    })
+    .join('\n')
+  // eslint-disable-next-line
+  const { started_at, ended_at, error, success, suboperations } = log.metadata
+  const info_ = { path: log.log_path, started_at, ended_at }
+  if (!success) info_.error = error
+  if (suboperations && suboperations.length) info_.suboperations = suboperations
+  // eslint-disable-next-line
+  if (!ended_at) delete info_.ended_at
+  info.value = info
+}
+
+function shareLogs() {
+  api
+    .get(
+      `logs/${props.name}/share`,
+      null,
+      { key: 'share_logs', name: props.name },
+      { websocket: true },
+    )
+    .then(({ url }) => {
+      window.open(url, '_blank')
+    })
+}
+</script>
+
 <template>
   <ViewBase
     :queries="queries"
     @queries-response="onQueriesResponse"
-    ref="view"
+    ref="viewElem"
     skeleton="CardInfoSkeleton"
   >
     <!-- INFO CARD -->
@@ -57,7 +135,7 @@
         v-if="moreLogsAvailable"
         variant="white"
         class="w-100 rounded-0"
-        @click="$refs.view.fetchQueries()"
+        @click="viewElem!.fetchQueries()"
       >
         <YIcon iname="plus" /> {{ $t('logs_more') }}
       </BButton>
@@ -71,92 +149,3 @@
     <p class="w-100 px-5 py-2 mb-0" v-html="$t('text_selection_is_disabled')" />
   </ViewBase>
 </template>
-
-<script>
-import api, { objectToParams } from '@/api'
-import { escapeHtml } from '@/helpers/commons'
-import { readableDate } from '@/helpers/filters/date'
-
-export default {
-  name: 'ToolLog',
-
-  props: {
-    name: { type: String, required: true },
-  },
-
-  data() {
-    return {
-      // Log data
-      description: undefined,
-      info: {},
-      logs: undefined,
-      // Logs line display
-      numberOfLines: 25,
-      moreLogsAvailable: false,
-    }
-  },
-
-  computed: {
-    queries() {
-      const queryString = objectToParams({
-        filter_irrelevant: '',
-        with_suboperations: '',
-        number: this.numberOfLines,
-      })
-      return [['GET', `logs/${this.name}?${queryString}`]]
-    },
-  },
-
-  methods: {
-    onQueriesResponse(log) {
-      if (log.logs.length === this.numberOfLines) {
-        this.moreLogsAvailable = true
-        this.numberOfLines *= 10
-      } else {
-        this.moreLogsAvailable = false
-      }
-      this.description = log.description
-
-      const levels = ['ERROR', 'WARNING', 'SUCCESS', 'INFO']
-      this.logs = log.logs
-        .map((line) => {
-          const escaped = escapeHtml(line)
-          for (const level of levels) {
-            if (line.includes(level + ' -')) {
-              return `<span class="alert-${
-                level === 'ERROR' ? 'danger' : level.toLowerCase()
-              }">${escaped}</span>`
-            }
-          }
-          return escaped
-        })
-        .join('\n')
-      // eslint-disable-next-line
-      const { started_at, ended_at, error, success, suboperations } =
-        log.metadata
-      const info = { path: log.log_path, started_at, ended_at }
-      if (!success) info.error = error
-      if (suboperations && suboperations.length)
-        info.suboperations = suboperations
-      // eslint-disable-next-line
-      if (!ended_at) delete info.ended_at
-      this.info = info
-    },
-
-    shareLogs() {
-      api
-        .get(
-          `logs/${this.name}/share`,
-          null,
-          { key: 'share_logs', name: this.name },
-          { websocket: true },
-        )
-        .then(({ url }) => {
-          window.open(url, '_blank')
-        })
-    },
-
-    readableDate,
-  },
-}
-</script>
diff --git a/app/src/views/tool/ToolLogs.vue b/app/src/views/tool/ToolLogs.vue
index c263c133d..94d865453 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -1,3 +1,38 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { distanceToNow, readableDate } from '@/helpers/filters/date'
+
+const queries = [['GET', `logs?limit=${25}&with_details`]]
+const search = ref('')
+const operations = ref()
+
+const filteredOperations = computed(() => {
+  if (!operations.value) return
+  const search_ = search.value.toLowerCase()
+  const operations_ = operations.value.filter(({ description }) => {
+    return description.toLowerCase().includes(search_)
+  })
+  return operations_.length ? operations_ : null
+})
+
+function onQueriesResponse({ operation }) {
+  operation.forEach((log, index) => {
+    if (log.success === '?') {
+      operation[index].icon = 'question'
+      operation[index].class = 'warning'
+    } else if (log.success) {
+      operation[index].icon = 'check'
+      operation[index].class = 'success'
+    } else {
+      operation[index].icon = 'close'
+      operation[index].class = 'danger'
+    }
+  })
+  operations.value = operation
+}
+</script>
+
 <template>
   <ViewSearch
     v-model:search="search"
@@ -24,51 +59,3 @@
     </YCard>
   </ViewSearch>
 </template>
-
-<script>
-import { distanceToNow, readableDate } from '@/helpers/filters/date'
-
-export default {
-  name: 'ToolLogs',
-
-  data() {
-    return {
-      queries: [['GET', `logs?limit=${25}&with_details`]],
-      search: '',
-      operations: undefined,
-    }
-  },
-
-  computed: {
-    filteredOperations() {
-      if (!this.operations) return
-      const search = this.search.toLowerCase()
-      const operations = this.operations.filter(({ description }) => {
-        return description.toLowerCase().includes(search)
-      })
-      return operations.length ? operations : null
-    },
-  },
-
-  methods: {
-    onQueriesResponse({ operation }) {
-      operation.forEach((log, index) => {
-        if (log.success === '?') {
-          operation[index].icon = 'question'
-          operation[index].class = 'warning'
-        } else if (log.success) {
-          operation[index].icon = 'check'
-          operation[index].class = 'success'
-        } else {
-          operation[index].icon = 'close'
-          operation[index].class = 'danger'
-        }
-      })
-      this.operations = operation
-    },
-
-    distanceToNow,
-    readableDate,
-  },
-}
-</script>
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index 3d5086555..f138d6fbb 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -1,5 +1,67 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import api from '@/api'
+import type ViewBase from '@/components/globals/ViewBase.vue'
+import { useAutoModal } from '@/composables/useAutoModal'
+
+// FIXME not tested with pending migrations (disclaimer and stuff)
+const { t } = useI18n()
+const modalConfirm = useAutoModal()
+
+const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
+
+const queries = [
+  ['GET', 'migrations?pending'],
+  ['GET', 'migrations?done'],
+]
+const pending = ref()
+const done = ref()
+const checked = reactive({})
+
+function onQueriesResponse({ migrations: pending_ }, { migrations: done_ }) {
+  done.value = done_.length ? done_.reverse() : null
+  pending_.forEach((migration) => {
+    if (migration.disclaimer) {
+      migration.disclaimer = migration.disclaimer.replaceAll('\n', '<br>')
+      checked[migration.id] = null
+    }
+  })
+  // FIXME change to pending
+  pending.value = pending_.length ? pending_.reverse() : null
+}
+
+function runMigrations() {
+  // Display an error on migration's disclaimer that aren't checked.
+  for (const [id, value] of Object.entries(checked)) {
+    if (value !== true) {
+      checked[id] = false
+    }
+  }
+  // Check that every migration's disclaimer has been checked.
+  if (Object.values(checked).every((value) => value === true)) {
+    api
+      .put('migrations?accept_disclaimer', {}, 'migrations.run')
+      .then(() => viewElem.value!.fetchQueries())
+  }
+}
+
+async function skipMigration(id) {
+  const confirmed = await modalConfirm(t('confirm_migrations_skip'))
+  if (!confirmed) return
+  api
+    .put('/migrations/' + id, { skip: '', targets: id }, 'migration.skip')
+    .then(() => viewElem.value!.fetchQueries())
+}
+</script>
+
 <template>
-  <ViewBase :queries="queries" @queries-response="onQueriesResponse" ref="view">
+  <ViewBase
+    :queries="queries"
+    @queries-response="onQueriesResponse"
+    ref="viewElem"
+  >
     <!-- PENDING MIGRATIONS -->
     <YCard :title="$t('migrations_pending')" icon="cogs" no-body>
       <template #header-buttons v-if="pending">
@@ -85,74 +147,3 @@
     </template>
   </ViewBase>
 </template>
-
-<script>
-import api from '@/api'
-import { useAutoModal } from '@/composables/useAutoModal'
-
-// FIXME not tested with pending migrations (disclaimer and stuff)
-export default {
-  name: 'ToolMigrations',
-
-  setup() {
-    return {
-      modalConfirm: useAutoModal(),
-    }
-  },
-
-  data() {
-    return {
-      queries: [
-        ['GET', 'migrations?pending'],
-        ['GET', 'migrations?done'],
-      ],
-      pending: undefined,
-      done: undefined,
-      checked: {},
-    }
-  },
-
-  methods: {
-    onQueriesResponse({ migrations: pending }, { migrations: done }) {
-      this.done = done.length ? done.reverse() : null
-      pending.forEach((migration) => {
-        if (migration.disclaimer) {
-          migration.disclaimer = migration.disclaimer.replaceAll('\n', '<br>')
-          this.checked[migration.id] = null
-        }
-      })
-      // FIXME change to pending
-      this.pending = pending.length ? pending.reverse() : null
-    },
-
-    runMigrations() {
-      // Display an error on migration's disclaimer that aren't checked.
-      for (const [id, value] of Object.entries(this.checked)) {
-        if (value !== true) {
-          this.checked[id] = false
-        }
-      }
-      // Check that every migration's disclaimer has been checked.
-      if (Object.values(this.checked).every((value) => value === true)) {
-        api
-          .put('migrations?accept_disclaimer', {}, 'migrations.run')
-          .then(() => {
-            this.$refs.view.fetchQueries()
-          })
-      }
-    },
-
-    async skipMigration(id) {
-      const confirmed = await this.modalConfirm(
-        this.$t('confirm_migrations_skip'),
-      )
-      if (!confirmed) return
-      api
-        .put('/migrations/' + id, { skip: '', targets: id }, 'migration.skip')
-        .then(() => {
-          this.$refs.view.fetchQueries()
-        })
-    },
-  },
-}
-</script>
diff --git a/app/src/views/tool/ToolPower.vue b/app/src/views/tool/ToolPower.vue
index b6688881a..dc807b812 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -1,3 +1,29 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
+
+const { t } = useI18n()
+const store = useStore()
+const modalConfirm = useAutoModal()
+
+async function triggerAction(action) {
+  const confirmed = await modalConfirm(t('confirm_reboot_action_' + action))
+  if (!confirmed) return
+
+  api.put(action + '?force', {}, action).then(() => {
+    const delay = action === 'reboot' ? 4000 : 10000
+    store.dispatch('TRY_TO_RECONNECT', {
+      attemps: Infinity,
+      origin: action,
+      delay,
+    })
+  })
+}
+</script>
+
 <template>
   <YCard :title="$t('operations')" icon="wrench">
     <!-- REBOOT -->
@@ -32,37 +58,3 @@
     </BFormGroup>
   </YCard>
 </template>
-
-<script>
-import api from '@/api'
-import { useAutoModal } from '@/composables/useAutoModal'
-
-export default {
-  name: 'ToolPower',
-
-  setup() {
-    return {
-      modalConfirm: useAutoModal(),
-    }
-  },
-
-  methods: {
-    async triggerAction(action) {
-      const confirmed = await this.modalConfirm(
-        this.$t('confirm_reboot_action_' + action),
-      )
-      if (!confirmed) return
-
-      this.action = action
-      api.put(action + '?force', {}, action).then(() => {
-        const delay = action === 'reboot' ? 4000 : 10000
-        this.$store.dispatch('TRY_TO_RECONNECT', {
-          attemps: Infinity,
-          origin: action,
-          delay,
-        })
-      })
-    },
-  },
-}
-</script>
diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index a42993034..cc22d7b28 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -1,77 +1,66 @@
-<template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    ref="view"
-    skeleton="CardFormSkeleton"
-  >
-    <ConfigPanels
-      v-if="config.panels"
-      v-bind="config"
-      :external-results="externalResults"
-      @apply="onConfigSubmit"
-    />
-  </ViewBase>
-</template>
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
 
-<script>
 import api, { objectToParams } from '@/api'
+import { APIBadRequestError, type APIError } from '@/api/errors'
+import ConfigPanels from '@/components/ConfigPanels.vue'
+import type ViewBase from '@/components/globals/ViewBase.vue'
 import {
   formatFormData,
   formatYunoHostConfigPanels,
 } from '@/helpers/yunohostArguments'
-import ConfigPanels from '@/components/ConfigPanels.vue'
-
-export default {
-  name: 'ToolSettingsConfig',
-
-  components: {
-    ConfigPanels,
-  },
 
-  props: {},
+const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
 
-  data() {
-    return {
-      queries: [['GET', 'settings?full']],
-      config: {},
-      externalResults: {},
-    }
-  },
+const queries = [['GET', 'settings?full']]
+const config = ref({})
+// FIXME user proper useValidate stuff
+const externalResults = reactive({})
 
-  methods: {
-    onQueriesResponse(config) {
-      this.config = formatYunoHostConfigPanels(config)
-    },
+function onQueriesResponse(config_) {
+  config.value = formatYunoHostConfigPanels(config_)
+}
 
-    async onConfigSubmit({ id, form }) {
-      const args = await formatFormData(form, {
-        removeEmpty: false,
-        removeNull: true,
-      })
+async function onConfigSubmit({ id, form }) {
+  const args = await formatFormData(form, {
+    removeEmpty: false,
+    removeNull: true,
+  })
 
-      // FIXME no route for potential action
-      api
-        .put(
-          `settings/${id}`,
-          { args: objectToParams(args) },
-          { key: 'settings.update', panel: id },
-        )
-        .then(() => {
-          this.$refs.view.fetchQueries({ triggerLoading: true })
-        })
-        .catch((err) => {
-          if (err.name !== 'APIBadRequestError') throw err
-          const panel = this.config.panels.find((panel) => panel.id === id)
-          if (err.data.name) {
-            Object.assign(this.externalResults, {
-              forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
-            })
-          } else {
-            panel.serverError = err.message
-          }
+  // FIXME no route for potential action
+  api
+    .put(
+      `settings/${id}`,
+      { args: objectToParams(args) },
+      { key: 'settings.update', panel: id },
+    )
+    .then(() => viewElem.value!.fetchQueries({ triggerLoading: true }))
+    .catch((err: APIError) => {
+      if (!(err instanceof APIBadRequestError)) throw err
+      const panel = config.value.panels.find((panel) => panel.id === id)
+      if (err.data.name) {
+        Object.assign(externalResults, {
+          forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
         })
-    },
-  },
+      } else {
+        panel.serverError = err.message
+      }
+    })
 }
 </script>
+
+<template>
+  <ViewBase
+    :queries="queries"
+    @queries-response="onQueriesResponse"
+    ref="viewElem"
+    skeleton="CardFormSkeleton"
+  >
+    <ConfigPanels
+      v-if="config.panels"
+      v-bind="config"
+      :external-results="externalResults"
+      @apply="onConfigSubmit"
+    />
+  </ViewBase>
+</template>
diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index 1b172e0db..cd2fd0798 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/app/src/views/tool/ToolWebadmin.vue
@@ -1,99 +1,93 @@
-<template>
-  <CardForm :title="$t('tools_webadmin_settings')" icon="cog" no-footer>
-    <template v-for="(field, fname) in fields" :key="fname">
-      <FormField v-bind="field" v-model="self[fname]" />
-      <hr />
-    </template>
-  </CardForm>
-</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+const { t } = useI18n()
+const store = useStore()
+
+const fields = {
+  locale: {
+    label: t('tools_webadmin.language'),
+    component: 'SelectItem',
+    props: { id: 'locale', choices: [] },
+  },
+
+  fallbackLocale: {
+    label: t('tools_webadmin.fallback_language'),
+    description: t('tools_webadmin.fallback_language_description'),
+    component: 'SelectItem',
+    props: { id: 'fallback-locale', choices: [] },
+  },
+
+  cache: {
+    id: 'cache',
+    label: t('tools_webadmin.cache'),
+    description: t('tools_webadmin.cache_description'),
+    component: 'CheckboxItem',
+    props: { labels: { true: 'enabled', false: 'disabled' } },
+  },
+
+  transitions: {
+    id: 'transitions',
+    label: t('tools_webadmin.transitions'),
+    component: 'CheckboxItem',
+    props: { labels: { true: 'enabled', false: 'disabled' } },
+  },
+
+  dark: {
+    id: 'theme',
+    label: t('tools_webadmin.theme'),
+    component: 'CheckboxItem',
+    props: { labels: { true: '🌙', false: '☀️' } },
+  },
+
+  // experimental: added in `created()`
+}
+
+const form = {
+  ...mapStoreGetSet(['locale', 'fallbackLocale', 'dark'], 'dispatch'),
+  ...mapStoreGetSet(['cache', 'transitions', 'experimental']),
+}
+
+const availableLocales = store.getters.availableLocales
+fields.locale.props.choices = availableLocales
+fields.fallbackLocale.props.choices = availableLocales
+
+if (import.meta.env.DEV) {
+  fields.experimental = {
+    id: 'experimental',
+    label: t('tools_webadmin.experimental'),
+    description: t('tools_webadmin.experimental_description'),
+    component: 'CheckboxItem',
+    props: { labels: { true: 'enabled', false: 'disabled' } },
+  }
+}
 
-<script>
 // FIXME move into helpers ?
 // Dynamicly generate computed properties from store with get/set and automatic commit/dispatch
 function mapStoreGetSet(props = [], action = 'commit') {
   return props.reduce((obj, prop) => {
-    obj[prop] = {
+    obj[prop] = computed({
       get() {
-        return this.$store.getters[prop]
+        return store.getters[prop]
       },
       set(value) {
         const key =
           (action === 'commit' ? 'SET_' : 'UPDATE_') + prop.toUpperCase()
-        this.$store[action](key, value)
+        store[action](key, value)
       },
-    }
+    })
     return obj
   }, {})
 }
-
-export default {
-  name: 'ToolWebadmin',
-
-  data() {
-    return {
-      // Hacky way to be able to dynamicly point to a computed property `self['computedProp']`
-      self: this,
-
-      fields: {
-        locale: {
-          label: this.$t('tools_webadmin.language'),
-          component: 'SelectItem',
-          props: { id: 'locale', choices: [] },
-        },
-
-        fallbackLocale: {
-          label: this.$t('tools_webadmin.fallback_language'),
-          description: this.$t('tools_webadmin.fallback_language_description'),
-          component: 'SelectItem',
-          props: { id: 'fallback-locale', choices: [] },
-        },
-
-        cache: {
-          id: 'cache',
-          label: this.$t('tools_webadmin.cache'),
-          description: this.$t('tools_webadmin.cache_description'),
-          component: 'CheckboxItem',
-          props: { labels: { true: 'enabled', false: 'disabled' } },
-        },
-
-        transitions: {
-          id: 'transitions',
-          label: this.$t('tools_webadmin.transitions'),
-          component: 'CheckboxItem',
-          props: { labels: { true: 'enabled', false: 'disabled' } },
-        },
-
-        dark: {
-          id: 'theme',
-          label: this.$t('tools_webadmin.theme'),
-          component: 'CheckboxItem',
-          props: { labels: { true: '🌙', false: '☀️' } },
-        },
-
-        // experimental: added in `created()`
-      },
-    }
-  },
-
-  computed: {
-    // Those are set/get computed properties
-    ...mapStoreGetSet(['locale', 'fallbackLocale', 'dark'], 'dispatch'),
-    ...mapStoreGetSet(['cache', 'transitions', 'experimental']),
-  },
-
-  created() {
-    const availableLocales = this.$store.getters.availableLocales
-    this.fields.locale.props.choices = availableLocales
-    this.fields.fallbackLocale.props.choices = availableLocales
-    if (import.meta.env.DEV) {
-      this.fields.experimental = {
-        id: 'experimental',
-        label: this.$t('tools_webadmin.experimental'),
-        description: this.$t('tools_webadmin.experimental_description'),
-        component: 'CheckboxItem',
-        props: { labels: { true: 'enabled', false: 'disabled' } },
-      }
-    }
-  },
-}
 </script>
+
+<template>
+  <CardForm :title="$t('tools_webadmin_settings')" icon="cog" no-footer>
+    <template v-for="(field, fname) in fields" :key="fname">
+      <FormField v-bind="field" v-model="form[fname]" />
+      <hr />
+    </template>
+  </CardForm>
+</template>
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 390e44a01..cfdc88f6b 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -1,3 +1,117 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+import api from '@/api'
+import CardCollapse from '@/components/CardCollapse.vue'
+import { useAutoModal } from '@/composables/useAutoModal'
+import { useStoreGetters } from '@/store/utils'
+
+const { t } = useI18n()
+const store = useStore()
+const modalConfirm = useAutoModal()
+
+const queries = [['PUT', 'update/all', {}, 'update']]
+
+const { dark } = useStoreGetters()
+const system = ref()
+const apps = ref()
+const importantYunohostUpgrade = ref()
+const pendingMigrations = ref()
+const showPreUpgradeModal = ref(false)
+const preUpgrade = ref({
+  apps: [],
+  notifs: [],
+})
+
+function onQueriesResponse({
+  apps,
+  system,
+  important_yunohost_upgrade,
+  pending_migrations,
+}) {
+  apps.value = apps.length ? apps : null
+  system.value = system.length ? system : null
+  // eslint-disable-next-line camelcase
+  importantYunohostUpgrade.value = important_yunohost_upgrade
+  pendingMigrations.value = pending_migrations.length !== 0
+}
+
+function formatAppNotifs(notifs) {
+  return Object.keys(notifs).reduce((acc, key) => {
+    return acc + '\n\n' + notifs[key]
+  }, '')
+}
+
+async function confirmAppsUpgrade(id = null) {
+  const appList = id ? [apps.value.find((app) => app.id === id)] : apps.value
+  const apps_ = appList.map((app) => ({
+    id: app.id,
+    name: app.name,
+    notif: app.notifications.PRE_UPGRADE
+      ? formatAppNotifs(app.notifications.PRE_UPGRADE)
+      : '',
+  }))
+  preUpgrade.value = { apps: apps_, hasNotifs: apps_.some((app) => app.notif) }
+  showPreUpgradeModal.value = true
+}
+
+async function performAppsUpgrade(ids) {
+  const apps_ = ids.map((id) => apps.value.find((app) => app.id === id))
+  const lastAppId = apps_[apps_.length - 1].id
+
+  for (const app of apps_) {
+    const continue_ = await api
+      .put(`apps/${app.id}/upgrade`, {}, { key: 'upgrade.app', app: app.name })
+      .then((response) => {
+        const postMessage = formatAppNotifs(response.notifications.POST_UPGRADE)
+        const isLast = app.id === lastAppId
+        apps.value = apps.value.filter((a) => app.id !== a.id)
+
+        if (postMessage) {
+          const message =
+            t('app.upgrade.notifs.post.alert') + '\n\n' + postMessage
+          return modalConfirm(
+            message,
+            {
+              title: t('app.upgrade.notifs.post.title', {
+                name: app.name,
+              }),
+              okTitle: t(isLast ? 'ok' : 'app.upgrade.continue'),
+              cancelTitle: t('app.upgrade.stop'),
+            },
+            { markdown: true, cancelable: !isLast },
+          )
+        } else {
+          return Promise.resolve(true)
+        }
+      })
+    if (!continue_) break
+  }
+
+  if (!apps.value.length) {
+    apps.value = null
+  }
+}
+
+async function performSystemUpgrade() {
+  const confirmed = await modalConfirm(t('confirm_update_system'))
+  if (!confirmed) return
+
+  api.put('upgrade/system', {}, { key: 'upgrade.system' }).then(() => {
+    if (system.value.some(({ name }) => name.includes('yunohost'))) {
+      store.dispatch('TRY_TO_RECONNECT', {
+        attemps: 1,
+        origin: 'upgrade_system',
+        initialDelay: 2000,
+      })
+    }
+    system.value = null
+  })
+}
+</script>
+
 <template>
   <ViewBase
     :queries="queries"
@@ -138,145 +252,6 @@
   </ViewBase>
 </template>
 
-<script>
-import api from '@/api'
-import { useAutoModal } from '@/composables/useAutoModal'
-import { mapGetters } from 'vuex'
-
-import CardCollapse from '@/components/CardCollapse.vue'
-
-export default {
-  name: 'SystemUpdate',
-
-  components: {
-    CardCollapse,
-  },
-
-  setup() {
-    return {
-      modalConfirm: useAutoModal(),
-    }
-  },
-
-  data() {
-    return {
-      queries: [['PUT', 'update/all', {}, 'update']],
-      // API data
-      system: undefined,
-      apps: undefined,
-      importantYunohostUpgrade: undefined,
-      pendingMigrations: undefined,
-      showPreUpgradeModal: false,
-      preUpgrade: {
-        apps: [],
-        notifs: [],
-      },
-    }
-  },
-
-  computed: {
-    ...mapGetters(['dark']),
-  },
-
-  methods: {
-    // eslint-disable-next-line camelcase
-    onQueriesResponse({
-      apps,
-      system,
-      important_yunohost_upgrade,
-      pending_migrations,
-    }) {
-      this.apps = apps.length ? apps : null
-      this.system = system.length ? system : null
-      // eslint-disable-next-line camelcase
-      this.importantYunohostUpgrade = important_yunohost_upgrade
-      this.pendingMigrations = pending_migrations.length !== 0
-    },
-
-    formatAppNotifs(notifs) {
-      return Object.keys(notifs).reduce((acc, key) => {
-        return acc + '\n\n' + notifs[key]
-      }, '')
-    },
-
-    async confirmAppsUpgrade(id = null) {
-      const appList = id ? [this.apps.find((app) => app.id === id)] : this.apps
-      const apps = appList.map((app) => ({
-        id: app.id,
-        name: app.name,
-        notif: app.notifications.PRE_UPGRADE
-          ? this.formatAppNotifs(app.notifications.PRE_UPGRADE)
-          : '',
-      }))
-      this.preUpgrade = { apps, hasNotifs: apps.some((app) => app.notif) }
-      this.showPreUpgradeModal = true
-    },
-
-    async performAppsUpgrade(ids) {
-      const apps = ids.map((id) => this.apps.find((app) => app.id === id))
-      const lastAppId = apps[apps.length - 1].id
-
-      for (const app of apps) {
-        const continue_ = await api
-          .put(
-            `apps/${app.id}/upgrade`,
-            {},
-            { key: 'upgrade.app', app: app.name },
-          )
-          .then((response) => {
-            const postMessage = this.formatAppNotifs(
-              response.notifications.POST_UPGRADE,
-            )
-            const isLast = app.id === lastAppId
-            this.apps = this.apps.filter((a) => app.id !== a.id)
-
-            if (postMessage) {
-              const message =
-                this.$t('app.upgrade.notifs.post.alert') + '\n\n' + postMessage
-              return this.modalConfirm(
-                message,
-                {
-                  title: this.$t('app.upgrade.notifs.post.title', {
-                    name: app.name,
-                  }),
-                  okTitle: this.$t(isLast ? 'ok' : 'app.upgrade.continue'),
-                  cancelTitle: this.$t('app.upgrade.stop'),
-                },
-                { markdown: true, cancelable: !isLast },
-              )
-            } else {
-              return Promise.resolve(true)
-            }
-          })
-        if (!continue_) break
-      }
-
-      if (!this.apps.length) {
-        this.apps = null
-      }
-    },
-
-    async performSystemUpgrade() {
-      const confirmed = await this.modalConfirm(
-        this.$t('confirm_update_system'),
-      )
-      if (!confirmed) return
-
-      api.put('upgrade/system', {}, { key: 'upgrade.system' }).then(() => {
-        if (this.system.some(({ name }) => name.includes('yunohost'))) {
-          this.$store.dispatch('TRY_TO_RECONNECT', {
-            attemps: 1,
-            origin: 'upgrade_system',
-            initialDelay: 2000,
-          })
-        }
-        this.system = null
-      })
-    },
-  },
-}
-</script>
-
 <style scoped lang="scss">
 .card-collapse-wrapper {
   border: $card-border-width solid $card-border-color;
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index d2095e496..feb82e99d 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -1,3 +1,118 @@
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core'
+import { computed, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import api from '@/api'
+import { APIBadRequestError, type APIError } from '@/api/errors'
+import {
+  alphalownumdot_,
+  minLength,
+  name,
+  required,
+  sameAs,
+  unique,
+} from '@/helpers/validators'
+import { formatFormData } from '@/helpers/yunohostArguments'
+import { useStoreGetters } from '@/store/utils'
+
+const { t } = useI18n()
+const router = useRouter()
+
+const queries = [
+  ['GET', { uri: 'users' }],
+  ['GET', { uri: 'domains' }],
+]
+const { userNames, domainsAsChoices, mainDomain } = useStoreGetters()
+
+const fields = {
+  username: {
+    label: t('user_username'),
+    props: {
+      id: 'username',
+      placeholder: t('placeholder.username'),
+    },
+  },
+
+  fullname: {
+    label: t('user_fullname'),
+    props: {
+      id: 'fullname',
+      placeholder: t('placeholder.fullname'),
+    },
+  },
+
+  domain: {
+    id: 'mail',
+    label: t('user_email'),
+    description: t('tip_about_user_email'),
+    descriptionVariant: 'info',
+    props: { choices: domainsAsChoices },
+  },
+
+  password: {
+    label: t('password'),
+    description: t('good_practices_about_user_password'),
+    descriptionVariant: 'warning',
+    props: {
+      id: 'password',
+      placeholder: '••••••••',
+      type: 'password',
+    },
+  },
+
+  confirmation: {
+    label: t('password_confirmation'),
+    props: {
+      id: 'confirmation',
+      placeholder: '••••••••',
+      type: 'password',
+    },
+  },
+}
+const form = reactive({
+  username: '',
+  fullname: '',
+  domain: '',
+  password: '',
+  confirmation: '',
+})
+const rules = computed(() => ({
+  username: {
+    required,
+    alphalownumdot_,
+    notInUsers: unique(userNames.value),
+  },
+  fullname: { required, name },
+  domain: { required },
+  password: { required, passwordLenght: minLength(8) },
+  confirmation: { required, passwordMatch: sameAs(form.password) },
+}))
+const v$ = useVuelidate(rules, form)
+const serverError = ref('')
+
+function onQueriesResponse() {
+  form.domain = mainDomain.value
+}
+
+async function onSubmit() {
+  const data = await formatFormData(form, { flatten: true })
+  api
+    .post({ uri: 'users' }, data, {
+      key: 'users.create',
+      name: form.username,
+    })
+    .then(() => {
+      router.push({ name: 'user-list' })
+    })
+    .catch((err: APIError) => {
+      if (!(err instanceof APIBadRequestError)) throw err
+      serverError.value = err.message
+    })
+}
+</script>
+
 <template>
   <ViewBase
     :queries="queries"
@@ -61,135 +176,3 @@
     </CardForm>
   </ViewBase>
 </template>
-
-<script>
-import api from '@/api'
-import { mapGetters } from 'vuex'
-import { useVuelidate } from '@vuelidate/core'
-
-import { formatFormData } from '@/helpers/yunohostArguments'
-import {
-  alphalownumdot_,
-  unique,
-  required,
-  minLength,
-  name,
-  sameAs,
-} from '@/helpers/validators'
-
-export default {
-  name: 'UserCreate',
-
-  setup() {
-    return {
-      v$: useVuelidate(),
-    }
-  },
-
-  data() {
-    return {
-      queries: [
-        ['GET', { uri: 'users' }],
-        ['GET', { uri: 'domains' }],
-      ],
-
-      form: {
-        username: '',
-        fullname: '',
-        domain: '',
-        password: '',
-        confirmation: '',
-      },
-
-      serverError: '',
-
-      fields: {
-        username: {
-          label: this.$t('user_username'),
-          props: {
-            id: 'username',
-            placeholder: this.$t('placeholder.username'),
-          },
-        },
-
-        fullname: {
-          label: this.$t('user_fullname'),
-          props: {
-            id: 'fullname',
-            placeholder: this.$t('placeholder.fullname'),
-          },
-        },
-
-        domain: {
-          id: 'mail',
-          label: this.$t('user_email'),
-          description: this.$t('tip_about_user_email'),
-          descriptionVariant: 'info',
-          props: { choices: [] },
-        },
-
-        password: {
-          label: this.$t('password'),
-          description: this.$t('good_practices_about_user_password'),
-          descriptionVariant: 'warning',
-          props: {
-            id: 'password',
-            placeholder: '••••••••',
-            type: 'password',
-          },
-        },
-
-        confirmation: {
-          label: this.$t('password_confirmation'),
-          props: {
-            id: 'confirmation',
-            placeholder: '••••••••',
-            type: 'password',
-          },
-        },
-      },
-    }
-  },
-
-  computed: mapGetters(['userNames', 'domainsAsChoices', 'mainDomain']),
-
-  validations() {
-    return {
-      form: {
-        username: {
-          required,
-          alphalownumdot_,
-          notInUsers: unique(this.userNames),
-        },
-        fullname: { required, name },
-        domain: { required },
-        password: { required, passwordLenght: minLength(8) },
-        confirmation: { required, passwordMatch: sameAs(this.form.password) },
-      },
-    }
-  },
-
-  methods: {
-    onQueriesResponse() {
-      this.fields.domain.props.choices = this.domainsAsChoices
-      this.form.domain = this.mainDomain
-    },
-
-    async onSubmit() {
-      const data = await formatFormData(this.form, { flatten: true })
-      api
-        .post({ uri: 'users' }, data, {
-          key: 'users.create',
-          name: this.form.username,
-        })
-        .then(() => {
-          this.$router.push({ name: 'user-list' })
-        })
-        .catch((err) => {
-          if (err.name !== 'APIBadRequestError') throw err
-          this.serverError = err.message
-        })
-    },
-  },
-}
-</script>
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index bdb025451..f0dec51d0 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -1,8 +1,237 @@
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core'
+import { computed, nextTick, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import api from '@/api'
+import AdressInputSelect from '@/components/AdressInputSelect.vue'
+import type ViewBase from '@/components/globals/ViewBase.vue'
+import { arrayDiff } from '@/helpers/commons'
+import {
+  emailForward,
+  emailLocalPart,
+  helpers,
+  integer,
+  minLength,
+  minValue,
+  name as nameValidator,
+  required,
+  sameAs,
+} from '@/helpers/validators'
+import {
+  adressToFormValue,
+  formatFormData,
+  sizeToM,
+} from '@/helpers/yunohostArguments'
+import { useStoreGetters } from '@/store/utils'
+
+const props = defineProps<{
+  name: string
+}>()
+
+const { t } = useI18n()
+const router = useRouter()
+
+const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
+
+const queries = [
+  ['GET', { uri: 'users', param: props.name, storeKey: 'users_details' }],
+  ['GET', { uri: 'domains' }],
+]
+const { user, domainsAsChoices, mainDomain } = useStoreGetters()
+
+const fields = {
+  username: {
+    label: t('user_username'),
+    modelValue: props.name,
+    props: { id: 'username', disabled: true },
+  },
+
+  fullname: {
+    label: t('user_fullname'),
+    props: {
+      id: 'fullname',
+      placeholder: t('placeholder.fullname'),
+    },
+  },
+
+  mail: {
+    label: t('user_email'),
+    props: { id: 'mail', choices: domainsAsChoices },
+  },
+
+  mailbox_quota: {
+    label: t('user_mailbox_quota'),
+    description: t('mailbox_quota_description'),
+    example: t('mailbox_quota_example'),
+    props: {
+      id: 'mailbox-quota',
+      placeholder: t('mailbox_quota_placeholder'),
+    },
+  },
+
+  mail_aliases: {
+    props: {
+      placeholder: t('placeholder.username'),
+      choices: domainsAsChoices,
+    },
+  },
+
+  mail_forward: {
+    props: {
+      placeholder: t('user_new_forward'),
+      type: 'email',
+    },
+  },
+
+  change_password: {
+    label: t('password'),
+    description: t('good_practices_about_user_password'),
+    descriptionVariant: 'warning',
+    props: {
+      id: 'change_password',
+      type: 'password',
+      placeholder: '••••••••',
+      autocomplete: 'new-password',
+    },
+  },
+
+  confirmation: {
+    label: t('password_confirmation'),
+    props: {
+      id: 'confirmation',
+      type: 'password',
+      placeholder: '••••••••',
+      autocomplete: 'new-password',
+    },
+  },
+}
+const form = reactive({
+  fullname: '',
+  mail: { localPart: '', separator: '@', domain: '' },
+  mailbox_quota: '',
+  mail_aliases: [],
+  mail_forward: [],
+  change_password: '',
+  confirmation: '',
+})
+const rules = computed(() => ({
+  fullname: { required, nameValidator },
+  mail: {
+    localPart: { required, email: emailLocalPart },
+  },
+  mailbox_quota: { integer, minValue: minValue(0) },
+  mail_aliases: {
+    $each: helpers.forEach({
+      localPart: { required, email: emailLocalPart },
+    }),
+  },
+  mail_forward: {
+    $each: helpers.forEach({
+      mail: { required, emailForward },
+    }),
+  },
+  change_password: { passwordLenght: minLength(8) },
+  confirmation: { passwordMatch: sameAs(form.change_password) },
+}))
+const v$ = useVuelidate(rules, form)
+const serverError = ref('')
+
+function onQueriesResponse(user_) {
+  form.fullname = user_.fullname
+  form.mail = adressToFormValue(user_.mail)
+  if (user_['mail-aliases']) {
+    form.mail_aliases = user_['mail-aliases'].map((mail) =>
+      adressToFormValue(mail),
+    )
+  }
+  if (user_['mail-forward']) {
+    form.mail_forward = user_['mail-forward'].map((mail) => ({ mail })) // Copy value
+  }
+  // mailbox-quota could be 'No quota' or 'Pas de quota'...
+  if (parseInt(user_['mailbox-quota'].limit) > 0) {
+    form.mailbox_quota = sizeToM(user_['mailbox-quota'].limit)
+  } else {
+    form.mailbox_quota = ''
+  }
+}
+
+async function onSubmit() {
+  const formData = await formatFormData(form, { flatten: true })
+  // FIXME not sure computed can be executed?
+  const user_ = user.value(props.name)
+  const data = {}
+  if (!Object.prototype.hasOwnProperty.call(formData, 'mailbox_quota')) {
+    formData.mailbox_quota = ''
+  }
+
+  formData.mail_forward = formData.mail_forward?.map((v) => v.mail)
+
+  for (const key of ['mail_aliases', 'mail_forward']) {
+    const dashedKey = key.replace('_', '-')
+    const newKey = key.replace('_', '').replace('es', '')
+    const addDiff = arrayDiff(formData[key], user_[dashedKey])
+    const rmDiff = arrayDiff(user_[dashedKey], formData[key])
+    if (addDiff.length) data['add_' + newKey] = addDiff
+    if (rmDiff.length) data['remove_' + newKey] = rmDiff
+  }
+
+  for (const key in formData) {
+    if (key === 'mailbox_quota') {
+      const quota =
+        parseInt(formData[key]) > 0 ? formData[key] + 'M' : 'No quota'
+      if (parseInt(quota) !== parseInt(user_['mailbox-quota'].limit)) {
+        data[key] = quota === 'No quota' ? '0' : quota
+      }
+    } else if (!key.includes('mail_') && formData[key] !== user_[key]) {
+      data[key] = formData[key]
+    }
+  }
+
+  if (Object.keys(data).length === 0) {
+    serverError.value = t('error_modify_something')
+    return
+  }
+
+  api
+    .put({ uri: 'users', param: props.name, storeKey: 'users_details' }, data, {
+      key: 'users.update',
+      name: props.name,
+    })
+    .then(() => {
+      router.push({ name: 'user-info', param: { name: props.name } })
+    })
+    .catch((err) => {
+      if (err.name !== 'APIBadRequestError') throw err
+      serverError.value = err.message
+    })
+}
+
+function addEmailField(type: 'aliases' | 'forward') {
+  form['mail_' + type].push(
+    type === 'aliases'
+      ? { localPart: '', separator: '@', domain: mainDomain.value }
+      : { mail: '' },
+  )
+  // Focus last input after rendering update
+  nextTick(() => {
+    const inputs = viewElem.value!.$el.querySelectorAll(`#mail-${type} input`)
+    inputs[inputs.length - 1].focus()
+  })
+}
+
+function removeEmailField(type: 'aliases' | 'forward', index: number) {
+  form['mail_' + type].splice(index, 1)
+}
+</script>
+
 <template>
   <ViewBase
     :queries="queries"
     @queries-response="onQueriesResponse"
     skeleton="CardFormSkeleton"
+    ref="viewElem"
   >
     <CardForm
       :title="$t('user_username_edit', { name })"
@@ -108,254 +337,6 @@
   </ViewBase>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-import { useVuelidate } from '@vuelidate/core'
-
-import api from '@/api'
-import { arrayDiff } from '@/helpers/commons'
-import {
-  sizeToM,
-  adressToFormValue,
-  formatFormData,
-} from '@/helpers/yunohostArguments'
-import {
-  helpers,
-  name,
-  required,
-  minLength,
-  emailLocalPart,
-  sameAs,
-  integer,
-  minValue,
-  emailForward,
-} from '@/helpers/validators'
-
-import AdressInputSelect from '@/components/AdressInputSelect.vue'
-
-export default {
-  name: 'UserEdit',
-
-  props: {
-    name: { type: String, required: true },
-  },
-
-  setup() {
-    return {
-      v$: useVuelidate(),
-    }
-  },
-
-  data() {
-    return {
-      queries: [
-        ['GET', { uri: 'users', param: this.name, storeKey: 'users_details' }],
-        ['GET', { uri: 'domains' }],
-      ],
-
-      form: {
-        fullname: '',
-        mail: { localPart: '', separator: '@', domain: '' },
-        mailbox_quota: '',
-        mail_aliases: [],
-        mail_forward: [],
-        change_password: '',
-        confirmation: '',
-      },
-
-      serverError: '',
-
-      fields: {
-        username: {
-          label: this.$t('user_username'),
-          modelValue: this.name,
-          props: { id: 'username', disabled: true },
-        },
-
-        fullname: {
-          label: this.$t('user_fullname'),
-          props: {
-            id: 'fullname',
-            placeholder: this.$t('placeholder.fullname'),
-          },
-        },
-
-        mail: {
-          label: this.$t('user_email'),
-          props: { id: 'mail', choices: [] },
-        },
-
-        mailbox_quota: {
-          label: this.$t('user_mailbox_quota'),
-          description: this.$t('mailbox_quota_description'),
-          example: this.$t('mailbox_quota_example'),
-          props: {
-            id: 'mailbox-quota',
-            placeholder: this.$t('mailbox_quota_placeholder'),
-          },
-        },
-
-        mail_aliases: {
-          props: {
-            placeholder: this.$t('placeholder.username'),
-            choices: [],
-          },
-        },
-
-        mail_forward: {
-          props: {
-            placeholder: this.$t('user_new_forward'),
-            type: 'email',
-          },
-        },
-
-        change_password: {
-          label: this.$t('password'),
-          description: this.$t('good_practices_about_user_password'),
-          descriptionVariant: 'warning',
-          props: {
-            id: 'change_password',
-            type: 'password',
-            placeholder: '••••••••',
-            autocomplete: 'new-password',
-          },
-        },
-
-        confirmation: {
-          label: this.$t('password_confirmation'),
-          props: {
-            id: 'confirmation',
-            type: 'password',
-            placeholder: '••••••••',
-            autocomplete: 'new-password',
-          },
-        },
-      },
-    }
-  },
-
-  computed: mapGetters(['user', 'domainsAsChoices', 'mainDomain']),
-
-  validations() {
-    return {
-      form: {
-        fullname: { required, name },
-        mail: {
-          localPart: { required, email: emailLocalPart },
-        },
-        mailbox_quota: { integer, minValue: minValue(0) },
-        mail_aliases: {
-          $each: helpers.forEach({
-            localPart: { required, email: emailLocalPart },
-          }),
-        },
-        mail_forward: {
-          $each: helpers.forEach({
-            mail: { required, emailForward },
-          }),
-        },
-        change_password: { passwordLenght: minLength(8) },
-        confirmation: { passwordMatch: sameAs(this.form.change_password) },
-      },
-    }
-  },
-
-  methods: {
-    onQueriesResponse(user) {
-      this.fields.mail.props.choices = this.domainsAsChoices
-      this.fields.mail_aliases.props.choices = this.domainsAsChoices
-
-      this.form.fullname = user.fullname
-      this.form.mail = adressToFormValue(user.mail)
-      if (user['mail-aliases']) {
-        this.form.mail_aliases = user['mail-aliases'].map((mail) =>
-          adressToFormValue(mail),
-        )
-      }
-      if (user['mail-forward']) {
-        this.form.mail_forward = user['mail-forward'].map((mail) => ({ mail })) // Copy value
-      }
-      // mailbox-quota could be 'No quota' or 'Pas de quota'...
-      if (parseInt(user['mailbox-quota'].limit) > 0) {
-        this.form.mailbox_quota = sizeToM(user['mailbox-quota'].limit)
-      } else {
-        this.form.mailbox_quota = ''
-      }
-    },
-
-    async onSubmit() {
-      const formData = await formatFormData(this.form, { flatten: true })
-      const user = this.user(this.name)
-      const data = {}
-      if (!Object.prototype.hasOwnProperty.call(formData, 'mailbox_quota')) {
-        formData.mailbox_quota = ''
-      }
-
-      formData.mail_forward = formData.mail_forward?.map((v) => v.mail)
-
-      for (const key of ['mail_aliases', 'mail_forward']) {
-        const dashedKey = key.replace('_', '-')
-        const newKey = key.replace('_', '').replace('es', '')
-        const addDiff = arrayDiff(formData[key], user[dashedKey])
-        const rmDiff = arrayDiff(user[dashedKey], formData[key])
-        if (addDiff.length) data['add_' + newKey] = addDiff
-        if (rmDiff.length) data['remove_' + newKey] = rmDiff
-      }
-
-      for (const key in formData) {
-        if (key === 'mailbox_quota') {
-          const quota =
-            parseInt(formData[key]) > 0 ? formData[key] + 'M' : 'No quota'
-          if (parseInt(quota) !== parseInt(user['mailbox-quota'].limit)) {
-            data[key] = quota === 'No quota' ? '0' : quota
-          }
-        } else if (!key.includes('mail_') && formData[key] !== user[key]) {
-          data[key] = formData[key]
-        }
-      }
-
-      if (Object.keys(data).length === 0) {
-        this.serverError = this.$t('error_modify_something')
-        return
-      }
-
-      api
-        .put(
-          { uri: 'users', param: this.name, storeKey: 'users_details' },
-          data,
-          { key: 'users.update', name: this.name },
-        )
-        .then(() => {
-          this.$router.push({ name: 'user-info', param: { name: this.name } })
-        })
-        .catch((err) => {
-          if (err.name !== 'APIBadRequestError') throw err
-          this.serverError = err.message
-        })
-    },
-
-    addEmailField(type) {
-      this.form['mail_' + type].push(
-        type === 'aliases'
-          ? { localPart: '', separator: '@', domain: this.mainDomain }
-          : { mail: '' },
-      )
-      // Focus last input after rendering update
-      this.$nextTick(() => {
-        const inputs = this.$el.querySelectorAll(`#mail-${type} input`)
-        inputs[inputs.length - 1].focus()
-      })
-    },
-
-    removeEmailField(type, index) {
-      this.form['mail_' + type].splice(index, 1)
-    },
-  },
-
-  components: { AdressInputSelect },
-}
-</script>
-
 <style lang="scss" scoped>
 .mail-list {
   display: flex;
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index 57916f1ac..66b165306 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -1,3 +1,89 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+
+import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
+import { formatFormData } from '@/helpers/yunohostArguments'
+import { useVuelidate } from '@vuelidate/core'
+
+const { t } = useI18n()
+const router = useRouter()
+const store = useStore()
+const modalConfirm = useAutoModal()
+
+const fields = {
+  csvfile: {
+    label: t('users_import_csv_file'),
+    description: t('users_import_csv_file_desc'),
+    component: 'FileItem',
+    props: {
+      id: 'csvfile',
+      accept: 'text/csv',
+      placeholder: t('placeholder.file'),
+    },
+  },
+
+  update: {
+    label: t('users_import_update'),
+    description: t('users_import_update_desc'),
+    component: 'CheckboxItem',
+    props: {
+      id: 'update',
+    },
+  },
+
+  delete: {
+    label: t('users_import_delete'),
+    description: t('users_import_delete_desc'),
+    component: 'CheckboxItem',
+    props: {
+      id: 'delete',
+    },
+  },
+}
+const form = reactive({
+  csvfile: { file: null },
+  update: false,
+  delete: false,
+})
+const rules = computed(() => ({}))
+const v$ = useVuelidate(rules, form)
+const serverError = ref('')
+
+async function onSubmit() {
+  if (form.delete) {
+    const confirmed = await modalConfirm(
+      t('users_import_confirm_destructive'),
+      { okTitle: t('users_import_delete_others') },
+    )
+    if (!confirmed) return
+  }
+
+  const requestArgs = { ...form } as Partial<typeof form>
+  if (!requestArgs.delete) delete requestArgs.delete
+  if (!requestArgs.update) delete requestArgs.update
+  const data = await formatFormData(requestArgs)
+  api
+    .post('users/import', data, null, { asFormData: true })
+    .then(() => {
+      // Reset all cached data related to users.
+      store.dispatch('RESET_CACHE_DATA', [
+        'users',
+        'users_details',
+        'groups',
+        'permissions',
+      ])
+      router.push({ name: 'user-list' })
+    })
+    .catch((error) => {
+      serverError.value = error.message
+    })
+}
+</script>
+
 <template>
   <CardForm
     :title="$t('users_import')"
@@ -20,105 +106,3 @@
     <FormField v-bind="fields.delete" v-model="form.delete" />
   </CardForm>
 </template>
-
-<script>
-import api from '@/api'
-import { useAutoModal } from '@/composables/useAutoModal'
-import { useVuelidate } from '@vuelidate/core'
-
-import { formatFormData } from '@/helpers/yunohostArguments'
-import { required } from '@/helpers/validators'
-
-export default {
-  name: 'UserImport',
-
-  setup() {
-    return {
-      v$: useVuelidate(),
-      modalConfirm: useAutoModal(),
-    }
-  },
-
-  data() {
-    return {
-      form: {
-        csvfile: { file: null },
-        update: false,
-        delete: false,
-      },
-
-      serverError: '',
-
-      fields: {
-        csvfile: {
-          label: this.$t('users_import_csv_file'),
-          description: this.$t('users_import_csv_file_desc'),
-          component: 'FileItem',
-          props: {
-            id: 'csvfile',
-            accept: 'text/csv',
-            placeholder: this.$t('placeholder.file'),
-          },
-        },
-
-        update: {
-          label: this.$t('users_import_update'),
-          description: this.$t('users_import_update_desc'),
-          component: 'CheckboxItem',
-          props: {
-            id: 'update',
-          },
-        },
-
-        delete: {
-          label: this.$t('users_import_delete'),
-          description: this.$t('users_import_delete_desc'),
-          component: 'CheckboxItem',
-          props: {
-            id: 'delete',
-          },
-        },
-      },
-    }
-  },
-
-  validations: {
-    form: {
-      csvfile: { required },
-    },
-  },
-
-  methods: {
-    async onSubmit() {
-      if (this.form.delete) {
-        const confirmed = await this.modalConfirm(
-          this.$t('users_import_confirm_destructive'),
-          { okTitle: this.$t('users_import_delete_others') },
-        )
-        if (!confirmed) return
-      }
-
-      const requestArgs = {}
-      Object.assign(requestArgs, this.form)
-      if (!requestArgs.delete) delete requestArgs.delete
-      if (!requestArgs.update) delete requestArgs.update
-      const data = await formatFormData(requestArgs)
-      api
-        .post('users/import', data, { asFormData: true })
-        .then(() => {
-          // Reset all cached data related to users.
-          this.$store.dispatch('RESET_CACHE_DATA', [
-            'users',
-            'users_details',
-            'groups',
-            'permissions',
-          ])
-          this.$router.push({ name: 'user-list' })
-        })
-        .catch((error) => {
-          this.serverError = error.message
-        })
-    },
-  },
-}
-</script>
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index b10095858..8e9b3a9f8 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -1,3 +1,36 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import api from '@/api'
+import { useStoreGetters } from '@/store/utils'
+
+const props = defineProps<{ name: string }>()
+
+const router = useRouter()
+
+const queries = [
+  ['GET', { uri: 'users', param: props.name, storeKey: 'users_details' }],
+]
+
+const { user: userGetter } = useStoreGetters()
+const purge = ref(false)
+const user = computed(() => userGetter.value(props.name))
+
+function deleteUser() {
+  const data = purge.value ? { purge: '' } : {}
+  api
+    .delete(
+      { uri: 'users', param: props.name, storeKey: 'users_details' },
+      data,
+      { key: 'users.delete', name: props.name },
+    )
+    .then(() => {
+      router.push({ name: 'user-list' })
+    })
+}
+</script>
+
 <template>
   <ViewBase :queries="queries" skeleton="CardInfoSkeleton">
     <YCard v-if="user" :title="user.fullname" icon="user">
@@ -101,48 +134,6 @@
   </ViewBase>
 </template>
 
-<script>
-import api from '@/api'
-
-export default {
-  name: 'UserInfo',
-
-  props: {
-    name: { type: String, required: true },
-  },
-
-  data() {
-    return {
-      queries: [
-        ['GET', { uri: 'users', param: this.name, storeKey: 'users_details' }],
-      ],
-      purge: false,
-    }
-  },
-
-  computed: {
-    user() {
-      return this.$store.getters.user(this.name)
-    },
-  },
-
-  methods: {
-    deleteUser() {
-      const data = this.purge ? { purge: '' } : {}
-      api
-        .delete(
-          { uri: 'users', param: this.name, storeKey: 'users_details' },
-          data,
-          { key: 'users.delete', name: this.name },
-        )
-        .then(() => {
-          this.$router.push({ name: 'user-list' })
-        })
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .icon.fa-user {
   font-size: 10rem;
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 88a8319e8..ee9974983 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -1,3 +1,42 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
+
+import { useStoreGetters } from '@/store/utils'
+
+const store = useStore()
+
+const queries = [
+  [
+    'GET',
+    {
+      uri: 'users?fields=username&fields=fullname&fields=mail&fields=mailbox-quota&fields=groups',
+      storeKey: 'users',
+    },
+  ],
+]
+
+const { users } = useStoreGetters()
+
+const search = ref('')
+const filteredUsers = computed(() => {
+  if (!users.value) return
+  const search_ = search.value.toLowerCase()
+  const filtered = users.value.filter((user) => {
+    return (
+      user.username.toLowerCase().includes(search_) ||
+      user.groups.includes(search_)
+    )
+  })
+  return filtered.length === 0 ? null : filtered
+})
+
+function downloadExport() {
+  const host = store.getters.host
+  window.open(`https://${host}/yunohost/api/users/export`, '_blank')
+}
+</script>
+
 <template>
   <ViewSearch
     v-model:search="search"
@@ -51,47 +90,3 @@
     </BListGroup>
   </ViewSearch>
 </template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-export default {
-  name: 'UserList',
-
-  data() {
-    return {
-      queries: [
-        [
-          'GET',
-          {
-            uri: 'users?fields=username&fields=fullname&fields=mail&fields=mailbox-quota&fields=groups',
-            storeKey: 'users',
-          },
-        ],
-      ],
-      search: '',
-    }
-  },
-  methods: {
-    downloadExport() {
-      const host = this.$store.getters.host
-      window.open(`https://${host}/yunohost/api/users/export`, '_blank')
-    },
-  },
-  computed: {
-    ...mapGetters(['users']),
-
-    filteredUsers() {
-      if (!this.users) return
-      const search = this.search.toLowerCase()
-      const filtered = this.users.filter((user) => {
-        return (
-          user.username.toLowerCase().includes(search) ||
-          user.groups.includes(search)
-        )
-      })
-      return filtered.length === 0 ? null : filtered
-    },
-  },
-}
-</script>

From 7c6092e6dc63b2fc7a6b60217dd4849c4a00ff7c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 1 Jul 2024 18:07:51 +0200
Subject: [PATCH 073/275] refactor: mv ReadOnlyField -> FormFieldReadonly +
 AdressInputSelect -> AdressItem

---
 app/components.d.ts                                         | 4 ++--
 .../globals/{ReadOnlyField.vue => FormFieldReadonly.vue}    | 0
 .../formItems/AdressItem.vue}                               | 0
 app/src/helpers/yunohostArguments.ts                        | 6 +++---
 app/src/views/_partials/DomainForm.vue                      | 5 ++---
 app/src/views/user/UserEdit.vue                             | 5 ++---
 6 files changed, 9 insertions(+), 11 deletions(-)
 rename app/src/components/globals/{ReadOnlyField.vue => FormFieldReadonly.vue} (100%)
 rename app/src/components/{AdressInputSelect.vue => globals/formItems/AdressItem.vue} (100%)

diff --git a/app/components.d.ts b/app/components.d.ts
index d01e61fce..28bcb1d06 100644
--- a/app/components.d.ts
+++ b/app/components.d.ts
@@ -8,7 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AbstractForm: typeof import('./src/components/globals/AbstractForm.vue')['default']
-    AdressInputSelect: typeof import('./src/components/AdressInputSelect.vue')['default']
+    AdressItem: typeof import('./src/components/globals/formItems/AdressItem.vue')['default']
     BAlert: typeof import('bootstrap-vue-next')['BAlert']
     BBadge: typeof import('bootstrap-vue-next')['BBadge']
     BBreadcrumb: typeof import('bootstrap-vue-next')['BBreadcrumb']
@@ -80,6 +80,7 @@ declare module 'vue' {
     ExplainWhat: typeof import('./src/components/globals/ExplainWhat.vue')['default']
     FileItem: typeof import('./src/components/globals/formItems/FileItem.vue')['default']
     FormField: typeof import('./src/components/globals/FormField.vue')['default']
+    FormFieldReadonly: typeof import('./src/components/globals/FormFieldReadonly.vue')['default']
     InputItem: typeof import('./src/components/globals/formItems/InputItem.vue')['default']
     LazyRenderer: typeof import('./src/components/LazyRenderer.vue')['default']
     ListGroupSkeleton: typeof import('./src/components/globals/skeletons/ListGroupSkeleton.vue')['default']
@@ -87,7 +88,6 @@ declare module 'vue' {
     MessageListGroup: typeof import('./src/components/MessageListGroup.vue')['default']
     QueryHeader: typeof import('./src/components/QueryHeader.vue')['default']
     ReadOnlyAlertItem: typeof import('./src/components/globals/formItems/ReadOnlyAlertItem.vue')['default']
-    ReadOnlyField: typeof import('./src/components/globals/ReadOnlyField.vue')['default']
     RecursiveListGroup: typeof import('./src/components/RecursiveListGroup.vue')['default']
     RoutableTabs: typeof import('./src/components/RoutableTabs.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/app/src/components/globals/ReadOnlyField.vue b/app/src/components/globals/FormFieldReadonly.vue
similarity index 100%
rename from app/src/components/globals/ReadOnlyField.vue
rename to app/src/components/globals/FormFieldReadonly.vue
diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/globals/formItems/AdressItem.vue
similarity index 100%
rename from app/src/components/AdressInputSelect.vue
rename to app/src/components/globals/formItems/AdressItem.vue
diff --git a/app/src/helpers/yunohostArguments.ts b/app/src/helpers/yunohostArguments.ts
index c6630ebe1..1fa1e3048 100644
--- a/app/src/helpers/yunohostArguments.ts
+++ b/app/src/helpers/yunohostArguments.ts
@@ -10,7 +10,7 @@ import {
 } from '@/helpers/commons'
 
 const NO_VALUE_FIELDS = [
-  'ReadOnlyField',
+  'FormFieldReadonly',
   'ReadOnlyAlertItem',
   'MarkdownItem',
   'DisplayTextItem',
@@ -56,7 +56,7 @@ export function sizeToM(sizeStr) {
 }
 
 /**
- * Returns a formatted address element to be used by AdressInputSelect component.
+ * Returns a formatted address element to be used by AdressItem component.
  *
  * @param {String} address - A string representing an adress (subdomain or email)
  * @return {Object} - `{ localPart, separator, domain }`.
@@ -124,7 +124,7 @@ export function formatYunoHostArgument(arg) {
   let validation = {}
   arg.ask = formatI18nField(arg.ask)
   const field = {
-    is: arg.readonly ? 'ReadOnlyField' : 'FormField',
+    is: arg.readonly ? 'FormFieldReadonly' : 'FormField',
     visible: arg.visible,
     props: {
       label: arg.ask,
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 0cb9a7d15..a3a6033f7 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -3,7 +3,6 @@ import { useVuelidate } from '@vuelidate/core'
 import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import AdressInputSelect from '@/components/AdressInputSelect.vue'
 import {
   domain,
   dynDomain,
@@ -207,7 +206,7 @@ async function onSubmit() {
         class="mt-3"
       >
         <template #default="{ self }">
-          <AdressInputSelect v-bind="self" v-model="form.dynDomain" />
+          <AdressItem v-bind="self" v-model="form.dynDomain" />
         </template>
       </FormField>
 
@@ -252,7 +251,7 @@ async function onSubmit() {
         class="mt-3"
       >
         <template #default="{ self }">
-          <AdressInputSelect v-bind="self" v-model="form.localDomain" />
+          <AdressItem v-bind="self" v-model="form.localDomain" />
         </template>
       </FormField>
     </BCollapse>
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index f0dec51d0..1dcf3fcf4 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
-import AdressInputSelect from '@/components/AdressInputSelect.vue'
 import type ViewBase from '@/components/globals/ViewBase.vue'
 import { arrayDiff } from '@/helpers/commons'
 import {
@@ -255,7 +254,7 @@ function removeEmailField(type: 'aliases' | 'forward', index: number) {
       <!-- USER EMAIL -->
       <FormField v-bind="fields.mail" :validation="v$.form.mail">
         <template #default="{ self }">
-          <AdressInputSelect v-bind="self" v-model="form.mail" />
+          <AdressItem v-bind="self" v-model="form.mail" />
         </template>
       </FormField>
 
@@ -282,7 +281,7 @@ function removeEmailField(type: 'aliases' | 'forward', index: number) {
             :validation-index="i"
           >
             <template #default="{ self }">
-              <AdressInputSelect v-bind="self" v-model="form.mail_aliases[i]" />
+              <AdressItem v-bind="self" v-model="form.mail_aliases[i]" />
             </template>
           </FormField>
 

From cdaf8a7bcba2302353e92d41173c6869f0bce673 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 15:17:01 +0200
Subject: [PATCH 074/275] ts: add api modules typing

---
 app/src/api/api.ts      | 262 +++++++++++++++++++++++++++-------------
 app/src/api/errors.ts   | 103 +++++++++++-----
 app/src/api/handlers.ts |  40 +++---
 app/src/api/index.ts    |   2 +-
 4 files changed, 275 insertions(+), 132 deletions(-)

diff --git a/app/src/api/api.ts b/app/src/api/api.ts
index e7c8e0614..afba3d988 100644
--- a/app/src/api/api.ts
+++ b/app/src/api/api.ts
@@ -4,41 +4,82 @@
  */
 
 import store from '@/store'
-import { openWebSocket, getResponseData, handleError } from './handlers'
+import { openWebSocket, getResponseData, getError } from './handlers'
+import type { Obj } from '@/types/commons'
 
-/**
- * Options available for an API call.
- *
- * @typedef {Object} Options
- * @property {Boolean} wait - If `true`, will display the waiting modal.
- * @property {Boolean} websocket - if `true`, will open a websocket connection.
- * @property {Boolean} initial - if `true` and an error occurs, the dismiss button will trigger a go back in history.
- * @property {Boolean} asFormData - if `true`, will send the data with a body encoded as `"multipart/form-data"` instead of `"x-www-form-urlencoded"`).
- */
+export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'DELETE'
 
-/**
- * Representation of an API call for `api.fetchAll`
- *
- * @typedef {Array} Query
- * @property {String} 0 - "method"
- * @property {String|Object} 1 - "uri", uri to call as string or as an object for cached uris.
- * @property {Object|null} 2 - "data"
- * @property {Options} 3 - "options"
- */
+type StoreUri = {
+  uri: string
+  storeKey?: string
+  param?: string
+}
+type HumanKey = {
+  key: string
+  [propName: string]: any
+}
+
+type APIQueryOptions = {
+  // Display the waiting modal
+  wait?: boolean
+  // Open a websocket connection
+  websocket?: boolean
+  // If an error occurs, the dismiss button will trigger a go back in history
+  initial?: boolean
+  // Send the data with a body encoded as `"multipart/form-data"` instead of `"x-www-form-urlencoded"`)
+  asFormData?: boolean
+}
+
+export type APIQuery = [
+  method: RequestMethod,
+  uri: string | StoreUri,
+  data?: Obj | null,
+  humanKey?: string | HumanKey | null,
+  options?: APIQueryOptions,
+]
+
+export type APIErrorData = {
+  error: string
+  error_key?: string
+  log_ref?: string
+  traceback?: string
+  name?: string // FIXME name is field id right?
+}
+
+type RequestStatus = 'pending' | 'success' | 'warning' | 'error'
+
+export type APIRequest = {
+  method: RequestMethod
+  uri: string
+  humanRouteKey: HumanKey['key']
+  humanRoute: string
+  initial: APIQueryOptions['initial']
+  status: RequestStatus
+}
+
+type WebsocketMessage = {
+  text: string
+  status: 'info' | 'success' | 'warning' | 'error'
+}
+
+export type APIRequestAction = APIRequest & {
+  messages: WebsocketMessage[]
+  date: number
+  warning: number
+  errors: number
+}
 
 /**
  * Converts an object literal into an `URLSearchParams` that can be turned into a
  * query string or used as a body in a `fetch` call.
  *
- * @param {Object} obj - An object literal to convert.
- * @param {Object} options
- * @param {Boolean} [options.addLocale=false] - Option to append the locale to the query string.
- * @return {URLSearchParams}
+ * @param obj - An object literal to convert to `FormData` or `URLSearchParams`
+ * @param addLocale - Append the locale to the returned object
+ * @param formData - Returns a `FormData` instead of `URLSearchParams`
  */
 export function objectToParams(
-  obj,
-  { addLocale = false } = {},
-  formData = false,
+  obj: Obj,
+  { addLocale = false, formData = false } = {},
 ) {
   const urlParams = formData ? new FormData() : new URLSearchParams()
   for (const [key, value] of Object.entries(obj)) {
@@ -66,36 +107,46 @@ export default {
 
       'X-Requested-With': 'XMLHttpRequest',
     },
-  },
+  } as RequestInit,
 
   /**
-   * Generic method to fetch the api without automatic response handling.
+   * Generic method to fetch the api.
    *
-   * @param {String} method - a method between 'GET', 'POST', 'PUT' and 'DELETE'.
-   * @param {String} uri
-   * @param {Object} [data={}] - data to send as body.
-   * @param {Options} [options={ wait = true, websocket = true, initial = false, asFormData = false }]
-   * @return {Promise<Object|Error>} Promise that resolve the api response data or an error.
+   * @param method - a method in `'GET' | 'POST' | 'PUT' | 'DELETE'`
+   * @param uri - URI to fetch
+   * @param data - Data to send as body
+   * @param options - {@link APIQueryOptions}
+
+   * @returns Promise that resolve the api response data
+   * @throws Throw an `APIError` or subclass depending on server response
    */
   async fetch(
-    method,
-    uri,
-    data = {},
-    humanKey = null,
-    { wait = true, websocket = true, initial = false, asFormData = false } = {},
-  ) {
+    method: RequestMethod,
+    uri: string,
+    data: Obj | null | undefined = {},
+    humanKey: string | HumanKey | null = null,
+    {
+      wait = true,
+      websocket = true,
+      initial = false,
+      asFormData = true,
+    }: APIQueryOptions = {},
+  ): Promise<Obj | string> {
     // `await` because Vuex actions returns promises by default.
-    const request = await store.dispatch('INIT_REQUEST', {
-      method,
-      uri,
-      humanKey,
-      initial,
-      wait,
-      websocket,
-    })
+    const request: APIRequest | APIRequestAction = await store.dispatch(
+      'INIT_REQUEST',
+      {
+        method,
+        uri,
+        humanKey,
+        initial,
+        wait,
+        websocket,
+      },
+    )
 
     if (websocket) {
-      await openWebSocket(request)
+      await openWebSocket(request as APIRequestAction)
     }
 
     let options = this.options
@@ -105,7 +156,9 @@ export default {
       options = {
         ...options,
         method,
-        body: objectToParams(data, { addLocale: true }, true),
+        body: data
+          ? objectToParams(data, { addLocale: true, formData: asFormData })
+          : null,
       }
     }
 
@@ -113,9 +166,11 @@ export default {
     const responseData = await getResponseData(response)
     store.dispatch('END_REQUEST', { request, success: response.ok, wait })
 
-    return response.ok
-      ? responseData
-      : handleError(request, response, responseData)
+    if (!response.ok) {
+      throw getError(request, response, responseData as string | APIErrorData)
+    }
+
+    return responseData
   },
 
   /**
@@ -123,20 +178,26 @@ export default {
    * Those calls will act as one (declare optional waiting for one but still create history entries for each)
    * Calls are synchronous since the API can't handle multiple calls.
    *
-   * @param {Array<Query>} queries - An array of queries with special representation.
-   * @param {Object} [options={}]
-   * @param {Boolean}
-   * @return {Promise<Array|Error>} Promise that resolve the api responses data or an error.
+   * @param queries - Array of {@link APIQuery}
+   * @param wait - Show the waiting modal until every queries have been resolved
+   * @param initial - Inform that thoses queries are required for a view to be displayed
+   * @returns Promise that resolves an array of server responses
+   * @throws Throw an `APIError` or subclass depending on server response
    */
-  async fetchAll(queries, { wait, initial } = {}) {
-    const results = []
+  async fetchAll(queries: APIQuery[], { wait = false, initial = false } = {}) {
+    const results: Array<Obj | string> = []
     if (wait) store.commit('SET_WAITING', true)
     try {
       for (const [method, uri, data, humanKey, options = {}] of queries) {
         if (wait) options.wait = false
         if (initial) options.initial = true
         results.push(
-          await this[method.toLowerCase()](uri, data, humanKey, options),
+          await this[method.toLowerCase() as 'get' | 'post' | 'put' | 'delete'](
+            uri,
+            data,
+            humanKey,
+            options,
+          ),
         )
       }
     } finally {
@@ -150,27 +211,41 @@ export default {
   /**
    * Api get helper function.
    *
-   * @param {String|Object} uri
-   * @param {null} [data=null] - for convenience in muliple calls, just pass null.
-   * @param {Options} [options={}] - options to apply to the call (default is `{ websocket: false, wait: false }`)
-   * @return {Promise<Object|Error>} Promise that resolve the api response data or an error.
+   * @param uri - uri to fetch
+   * @param data - for convenience in muliple calls, just pass null
+   * @param humanKey - key and eventually some data to build the query's description
+   * @param options - {@link APIQueryOptions}
+   * @returns Promise that resolve the api response data or an error
+   * @throws Throw an `APIError` or subclass depending on server response
    */
-  get(uri, data = null, humanKey = null, options = {}) {
+  get(
+    uri: string | StoreUri,
+    data: Obj | null = null,
+    humanKey: string | HumanKey | null = null,
+    options: APIQueryOptions = {},
+  ): Promise<Obj | string> {
     options = { websocket: false, wait: false, ...options }
     if (typeof uri === 'string')
-      return this.fetch('GET', uri, null, humanKey, options)
+      return this.fetch('GET', uri, data, humanKey, options)
     return store.dispatch('GET', { ...uri, humanKey, options })
   },
 
   /**
    * Api post helper function.
    *
-   * @param {String|Object} uri
-   * @param {String} [data={}] - data to send as body.
-   * @param {Options} [options={}] - options to apply to the call
-   * @return {Promise<Object|Error>} Promise that resolve the api response data or an error.
+   * @param uri - uri to fetch
+   * @param data - data to send as body
+   * @param humanKey - key and eventually some data to build the query's description
+   * @param options - {@link APIQueryOptions}
+   * @returns Promise that resolve the api response data or an error
+   * @throws Throw an `APIError` or subclass depending on server response
    */
-  post(uri, data = {}, humanKey = null, options = {}) {
+  post(
+    uri: string | StoreUri,
+    data: Obj | null | undefined = {},
+    humanKey: string | HumanKey | null = null,
+    options: APIQueryOptions = {},
+  ): Promise<Obj | string> {
     if (typeof uri === 'string')
       return this.fetch('POST', uri, data, humanKey, options)
     return store.dispatch('POST', { ...uri, data, humanKey, options })
@@ -179,12 +254,19 @@ export default {
   /**
    * Api put helper function.
    *
-   * @param {String|Object} uri
-   * @param {String} [data={}] - data to send as body.
-   * @param {Options} [options={}] - options to apply to the call
-   * @return {Promise<Object|Error>} Promise that resolve the api response data or an error.
+   * @param uri - uri to fetch
+   * @param data - data to send as body
+   * @param humanKey - key and eventually some data to build the query's description
+   * @param options - {@link APIQueryOptions}
+   * @returns Promise that resolve the api response data or an error
+   * @throws Throw an `APIError` or subclass depending on server response
    */
-  put(uri, data = {}, humanKey = null, options = {}) {
+  put(
+    uri: string | StoreUri,
+    data: Obj | null | undefined = {},
+    humanKey: string | HumanKey | null = null,
+    options: APIQueryOptions = {},
+  ): Promise<Obj | string> {
     if (typeof uri === 'string')
       return this.fetch('PUT', uri, data, humanKey, options)
     return store.dispatch('PUT', { ...uri, data, humanKey, options })
@@ -193,12 +275,19 @@ export default {
   /**
    * Api delete helper function.
    *
-   * @param {String|Object} uri
-   * @param {String} [data={}] - data to send as body.
-   * @param {Options} [options={}] - options to apply to the call (default is `{ websocket: false, wait: false }`)
-   * @return {Promise<Object|Error>} Promise that resolve the api response data or an error.
+   * @param uri - uri to fetch
+   * @param data - data to send as body
+   * @param humanKey - key and eventually some data to build the query's description
+   * @param options - {@link APIQueryOptions}
+   * @returns Promise that resolve the api response data or an error
+   * @throws Throw an `APIError` or subclass depending on server response
    */
-  delete(uri, data = {}, humanKey = null, options = {}) {
+  delete(
+    uri: string | StoreUri,
+    data: Obj | null | undefined = {},
+    humanKey: string | HumanKey | null = null,
+    options: APIQueryOptions = {},
+  ): Promise<Obj | string> {
     if (typeof uri === 'string')
       return this.fetch('DELETE', uri, data, humanKey, options)
     return store.dispatch('DELETE', { ...uri, data, humanKey, options })
@@ -207,16 +296,15 @@ export default {
   /**
    * Api reconnection helper. Resolve when server is reachable or fail after n attemps
    *
-   * @param {Number} attemps - number of attemps before rejecting
-   * @param {Number} delay - delay between calls to the API in ms.
-   * @param {Number} initialDelay - delay before calling the API for the first time in ms.
-   * @return {Promise<undefined|Error>}
+   * @param attemps - Number of attemps before rejecting
+   * @param delay - Delay between calls to the API in ms
+   * @param initialDelay - Delay before calling the API for the first time in ms
+   * @returns Promise that resolve yunohost version infos
+   * @throws Throw an `APIError` or subclass depending on server response
    */
   tryToReconnect({ attemps = 5, delay = 2000, initialDelay = 0 } = {}) {
     return new Promise((resolve, reject) => {
-      const api = this
-
-      function reconnect(n) {
+      function reconnect(n: number) {
         store
           .dispatch('GET_YUNOHOST_INFOS')
           .then(resolve)
diff --git a/app/src/api/errors.ts b/app/src/api/errors.ts
index af2f53174..7c0056eca 100644
--- a/app/src/api/errors.ts
+++ b/app/src/api/errors.ts
@@ -4,16 +4,27 @@
  */
 
 import i18n from '@/i18n'
+import type { APIErrorData, RequestMethod, APIRequest } from './api'
 
 class APIError extends Error {
-  constructor(request, { url, status, statusText }, { error }) {
+  name = 'APIError'
+  code: number
+  status: string
+  method: RequestMethod
+  request: APIRequest
+  path: string
+
+  constructor(
+    request: APIRequest,
+    { url, status, statusText }: Response,
+    { error }: APIErrorData,
+  ) {
     super(
       error
         ? error.replaceAll('\n', '<br>')
         : i18n.global.t('error_server_unexpected'),
     )
     const urlObj = new URL(url)
-    this.name = 'APIError'
     this.code = status
     this.status = statusText
     this.method = request.method
@@ -23,76 +34,114 @@ class APIError extends Error {
 
   log() {
     /* eslint-disable-next-line */
-    console.error(`${this.name} (${this.code}): ${this.uri}\n${this.message}`)
+    console.error(`${this.name} (${this.code}): ${this.path}\n${this.message}`)
   }
 }
 
 // Log (Special error to trigger a redirect to a log page)
 class APIErrorLog extends APIError {
-  constructor(method, response, errorData) {
-    super(method, response, errorData)
-    this.logRef = errorData.log_ref
-    this.name = 'APIErrorLog'
+  name = 'APIErrorLog'
+  logRef: string
+
+  constructor(
+    request: APIRequest,
+    response: Response,
+    errorData: APIErrorData,
+  ) {
+    super(request, response, errorData)
+    this.logRef = errorData.log_ref as string
   }
 }
 
 // 0 — (means "the connexion has been closed" apparently)
 class APIConnexionError extends APIError {
-  constructor(method, response) {
-    super(method, response, {
+  name = 'APIConnexionError'
+  constructor(
+    request: APIRequest,
+    response: Response,
+    _errorData: APIErrorData,
+  ) {
+    super(request, response, {
       error: i18n.global.t('error_connection_interrupted'),
     })
-    this.name = 'APIConnexionError'
   }
 }
 
 // 400 — Bad Request
 class APIBadRequestError extends APIError {
-  constructor(method, response, errorData) {
-    super(method, response, errorData)
-    this.name = 'APIBadRequestError'
-    this.key = errorData.error_key
+  name = 'APIBadRequestError'
+  key: string
+  data: APIErrorData
+
+  constructor(
+    request: APIRequest,
+    response: Response,
+    errorData: APIErrorData,
+  ) {
+    super(request, response, errorData)
+    this.key = errorData.error_key as string
     this.data = errorData
   }
 }
 
 // 401 — Unauthorized
 class APIUnauthorizedError extends APIError {
-  constructor(method, response, errorData) {
-    super(method, response, { error: i18n.global.t('unauthorized') })
-    this.name = 'APIUnauthorizedError'
+  name = 'APIUnauthorizedError'
+
+  constructor(
+    request: APIRequest,
+    response: Response,
+    _errorData: APIErrorData,
+  ) {
+    super(request, response, { error: i18n.global.t('unauthorized') })
   }
 }
 
 // 404 — Not Found
 class APINotFoundError extends APIError {
-  constructor(method, response, errorData) {
+  name = 'APINotFoundError'
+
+  constructor(
+    request: APIRequest,
+    response: Response,
+    errorData: APIErrorData,
+  ) {
     errorData.error = i18n.global.t('api_not_found')
-    super(method, response, errorData)
-    this.name = 'APINotFoundError'
+    super(request, response, errorData)
   }
 }
 
 // 500 — Server Internal Error
 class APIInternalError extends APIError {
-  constructor(method, response, errorData) {
-    super(method, response, errorData)
+  name = 'APIInternalError'
+  traceback: string | null
+
+  constructor(
+    request: APIRequest,
+    response: Response,
+    errorData: APIErrorData,
+  ) {
+    super(request, response, errorData)
     this.traceback = errorData.traceback || null
-    this.name = 'APIInternalError'
   }
 }
 
 // 502 — Bad gateway (means API is down)
 class APINotRespondingError extends APIError {
-  constructor(method, response) {
-    super(method, response, { error: i18n.global.t('api_not_responding') })
-    this.name = 'APINotRespondingError'
+  name = 'APINotRespondingError'
+
+  constructor(
+    request: APIRequest,
+    response: Response,
+    _errorData: APIErrorData,
+  ) {
+    super(request, response, { error: i18n.global.t('api_not_responding') })
   }
 }
 
 // Temp factory
 const errors = {
-  [undefined]: APIError,
+  default: APIError,
   log: APIErrorLog,
   0: APIConnexionError,
   400: APIBadRequestError,
diff --git a/app/src/api/handlers.ts b/app/src/api/handlers.ts
index 2ec6d5d1c..8d8861dd4 100644
--- a/app/src/api/handlers.ts
+++ b/app/src/api/handlers.ts
@@ -5,18 +5,20 @@
 
 import store from '@/store'
 import errors, { APIError } from './errors'
+import type { Obj } from '@/types/commons'
+import type { APIErrorData, APIRequest, APIRequestAction } from './api'
 
 /**
  * Try to get response content as json and if it's not as text.
  *
- * @param {Response} response - A fetch `Response` object.
- * @return {(Object|String)} Parsed response's json or response's text.
+ * @param response - A fetch `Response` object.
+ * @returns Parsed response's json or response's text.
  */
-export async function getResponseData(response) {
+export async function getResponseData(response: Response) {
   // FIXME the api should always return json as response
   const responseText = await response.text()
   try {
-    return JSON.parse(responseText)
+    return JSON.parse(responseText) as Obj
   } catch {
     return responseText
   }
@@ -28,10 +30,10 @@ export async function getResponseData(response) {
  * we have to open it for every calls.
  * Messages are dispatch to the store so it can handle them.
  *
- * @param {Object} request - Request info data.
- * @return {Promise<Event>} Promise that resolve on websocket 'open' or 'error' event.
+ * @param request - Request info data.
+ * @returns Promise that resolve on websocket 'open' or 'error' event.
  */
-export function openWebSocket(request) {
+export function openWebSocket(request: APIRequestAction): Promise<Event> {
   return new Promise((resolve) => {
     const ws = new WebSocket(
       `wss://${store.getters.host}/yunohost/api/messages`,
@@ -52,13 +54,19 @@ export function openWebSocket(request) {
 /**
  * Handler for API errors.
  *
- * @param {Object} request - Request info data.
- * @param {Response} response - A consumed fetch `Response` object.
- * @param {Object|String} errorData - The response parsed json/text.
- * @throws Will throw a `APIError` with request and response data.
+ * @param request - Request info data.
+ * @param response - A consumed fetch `Response` object.
+ * @param errorData - The response parsed json/text.
+ * @returns an `APIError` or subclass with request and response data.
  */
-export async function handleError(request, response, errorData) {
-  let errorCode = response.status in errors ? response.status : undefined
+export function getError(
+  request: APIRequest,
+  response: Response,
+  errorData: string | APIErrorData,
+) {
+  let errorCode = (
+    response.status in errors ? response.status : 'default'
+  ) as keyof typeof errors
   if (typeof errorData === 'string') {
     // FIXME API: Patching errors that are plain text or html.
     errorData = { error: errorData }
@@ -69,16 +77,14 @@ export async function handleError(request, response, errorData) {
   }
 
   // This error can be catched by a view otherwise it will be catched by the `onUnhandledAPIError` handler.
-  throw new errors[errorCode](request, response, errorData)
+  return new errors[errorCode](request, response, errorData)
 }
 
 /**
  * If an APIError is not catched by a view it will be dispatched to the store so the
  * error can be displayed in the error modal.
- *
- * @param {APIError} error
  */
-export function onUnhandledAPIError(error) {
+export function onUnhandledAPIError(error: APIError) {
   error.log()
   store.dispatch('HANDLE_ERROR', error)
 }
diff --git a/app/src/api/index.ts b/app/src/api/index.ts
index c3f1ae7fe..b959b5a53 100644
--- a/app/src/api/index.ts
+++ b/app/src/api/index.ts
@@ -1,2 +1,2 @@
 export { default, objectToParams } from './api'
-export { handleError, registerGlobalErrorHandlers } from './handlers'
+export { getError, registerGlobalErrorHandlers } from './handlers'

From f9ddae3237632cc35fdad376b02f6ce2855cec9f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 15:44:57 +0200
Subject: [PATCH 075/275] refactor: simplify tree class + add typing

---
 app/src/components/RecursiveListGroup.vue |  12 +-
 app/src/helpers/data/tree.ts              | 188 ++++++++++------------
 app/src/views/domain/DomainList.vue       |  13 +-
 3 files changed, 103 insertions(+), 110 deletions(-)

diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index f418f294b..314ba52e0 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { Obj } from '@/types/commons'
+import type { TreeChildNode, AnyTreeNode } from '@/helpers/data/tree'
 
 const props = withDefaults(
   defineProps<{
-    tree: Obj
+    tree: AnyTreeNode
     flush?: boolean
     last?: boolean
     toggleText?: string
@@ -16,10 +16,14 @@ const props = withDefaults(
 )
 
 defineSlots<{
-  default: (props: any) => any
+  default: (props: {
+    [K in keyof TreeChildNode as TreeChildNode[K] extends Function
+      ? never
+      : K]: TreeChildNode[K]
+  }) => any
 }>()
 
-function getClasses(node: Obj, i: number) {
+function getClasses(node: AnyTreeNode, i: number) {
   const children = node.height > 0
   const opened = children && node.data?.opened
   const last =
diff --git a/app/src/helpers/data/tree.ts b/app/src/helpers/data/tree.ts
index d78f8d73f..52e5f4e2f 100644
--- a/app/src/helpers/data/tree.ts
+++ b/app/src/helpers/data/tree.ts
@@ -1,15 +1,23 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+type TreeNodeData = {
+  name: string
+  parent: string | null
+  to: RouteLocationRaw
+  opened: boolean
+}
+
 /**
  * A Node that can have a parent and children.
  */
-export class Node {
-  constructor(data) {
-    this.data = data
-    this.depth = 0
-    this.height = 0
-    this.parent = null
-    // this.id = null
-    // this.children = null
-  }
+class TreeNode {
+  data: TreeNodeData | null = null
+  depth: number = 0
+  height: number = 0
+  parent: AnyTreeNode | null = null
+  id: string = 'root'
+  children: TreeChildNode[] = []
+  _remove: boolean = false
 
   /**
    * Invokes the specified `callback` for this node and each descendant in pre-order
@@ -18,17 +26,17 @@ export class Node {
    * The specified function is passed the current descendant, the zero-based traversal
    * index, and this node.
    * Code taken and adapted from d3.js https://github.com/d3/d3-hierarchy/blob/main/src/hierarchy/eachBefore.js.
-   *
-   * @param {function} callback
-   * @return {Object}
    */
-  eachBefore(callback) {
-    const nodes = []
+  eachBefore(
+    callback: (node: AnyTreeNode, index: number, root: TreeRootNode) => void,
+  ) {
+    const root = this as TreeRootNode
+    const nodes: AnyTreeNode[] = []
     let index = -1
-    let node = this
+    let node: AnyTreeNode | undefined = root
 
     while (node) {
-      callback(node, ++index, this)
+      callback(node, ++index, root)
       if (node.children) {
         nodes.push(...node.children)
       }
@@ -45,14 +53,14 @@ export class Node {
    * The specified function is passed the current descendant, the zero-based traversal
    * index, and this node.
    * Code taken and adapted from d3.js https://github.com/d3/d3-hierarchy/blob/main/src/hierarchy/eachAfter.js.
-   *
-   * @param {function} callback
-   * @return {Object}
    */
-  eachAfter(callback) {
-    const nodes = []
-    const next = []
-    let node = this
+  eachAfter(
+    callback: (node: AnyTreeNode, index: number, root: TreeRootNode) => void,
+  ) {
+    const root = this as TreeRootNode
+    const nodes: AnyTreeNode[] = []
+    const next: AnyTreeNode[] = []
+    let node: AnyTreeNode | undefined = root
 
     while (node) {
       next.push(node)
@@ -64,132 +72,113 @@ export class Node {
 
     let index = 0
     for (let i = next.length - 1; i >= 0; i--) {
-      callback(next[i], index++, this)
+      callback(next[i], index++, root)
     }
 
-    return this
+    return root
   }
 
   /**
    * Returns a deep copied and filtered tree of itself.
    * Specified filter function is passed each nodes in post-order traversal and must
    * return `true` or `false` like a regular filter function.
-   *
-   * @param {Function} callback - filter callback function to invoke on each nodes
-   * @param {Object} args
-   * @param {String} [args.idKey='name'] - the key name where we can find the node identity.
-   * @param {String} [args.parentIdKey='name'] - the key name where we can find the parent identity.
-   * @return {Node}
    */
-  filter(callback) {
+  filter(
+    callback: (node: AnyTreeNode, index: number, root: TreeRootNode) => boolean,
+  ) {
+    const root = this as TreeRootNode
     // Duplicates this tree and iter on nodes from leaves to root (post-order traversal)
-    return hierarchy(this).eachAfter((node, i) => {
+    return hierarchy(root).eachAfter((node, i) => {
       // Since we create a new hierarchy from another, nodes's `data` contains the
       // whole dupplicated node. Overwrite node's `data` by node's original `data`.
-      node.data = node.data.data
 
       if (node.children) {
         // Removed flagged children
-        node.children = node.children.filter((child) => !child.remove)
-        if (!node.children.length) delete node.children
+        node.children = node.children.filter((child) => !child._remove)
       }
 
       // Perform filter callback on non-root nodes
-      const match = node.data ? callback(node, i, this) : true
+      const match =
+        node instanceof TreeChildNode ? callback(node, i, root) : true
       // Flag node if there's no match in node nor in its children
-      if (!match && !node.children) {
-        node.remove = true
+      if (!match && !node.children.length) {
+        node._remove = true
       }
     })
   }
 }
 
+export class TreeRootNode extends TreeNode {
+  data: null = null
+  parent: null = null
+  id: 'root' = 'root'
+}
+
+export class TreeChildNode extends TreeNode {
+  data: TreeNodeData
+  parent: AnyTreeNode
+  id: string
+
+  constructor(data: TreeNodeData, parent: AnyTreeNode) {
+    super()
+    this.data = data
+    this.parent = parent
+    this.id = data.name
+  }
+}
+
+export type AnyTreeNode = TreeRootNode | TreeChildNode
 /**
  * Generates a new hierarchy from the specified tabular `dataset`.
  * The specified `dataset` must be an array of objects that contains at least a
  * `name` property and an optional `parent` property referencing its parent `name`.
  * Code taken and adapted from d3.js https://github.com/d3/d3-hierarchy/blob/main/src/stratify.js#L16.
- *
- * @param {Array} dataset
- * @param {Object} args
- * @param {String} [args.idKey='name'] - the key name where we can find the node identity.
- * @param {String} [args.parentIdKey='name'] - the key name where we can find the parent identity.
- * @return {Node}
  */
-export function stratify(
-  dataset,
-  { idKey = 'name', parentIdKey = 'parent' } = {},
-) {
-  const root = new Node(null, true)
-  root.children = []
-  const nodesMap = new Map()
+export function stratify(dataset: TreeNodeData[]) {
+  const root = new TreeRootNode()
+  const nodesMap: Map<TreeChildNode['id'], TreeChildNode> = new Map()
 
   // Creates all nodes that will be arranged in a hierarchy
-  const nodes = dataset.map((d) => {
-    const node = new Node(d)
-    node.id = d[idKey]
+  dataset.map((d) => {
+    const parent = d.parent ? nodesMap.get(d.parent) || root : root
+    const node = new TreeChildNode(d, parent)
+    parent.children.push(node)
     nodesMap.set(node.id, node)
-    if (d[parentIdKey]) {
-      node.parent = d[parentIdKey]
-    }
     return node
   })
 
-  // Build a hierarchy from nodes
-  nodes.forEach((node, i) => {
-    const parentId = node.parent
-    if (parentId) {
-      const parent = nodesMap.get(parentId)
-      if (!parent) throw new Error('Missing parent node: ' + parentId)
-      if (parent.children) parent.children.push(node)
-      else parent.children = [node]
-      node.parent = parent
-    } else {
-      node.parent = root
-      root.children.push(node)
-    }
-  })
-
   root.eachBefore((node) => {
     // Compute node depth
     if (node.parent) {
       node.depth = node.parent.depth + 1
       // Remove parent key if parent is root (node with no data)
-      if (!node.parent.data) delete node.parent
     }
     computeNodeHeight(node)
   })
+
   return root
 }
 
 /**
  * Constructs a root node from the specified hierarchical `data`.
  * The specified `data` must be an object representing the root node and its children.
- * If given a `Node` object this will return a deep copy of it.
+ * If given a `TreeRootNode` object this will return a deep copy of it.
  * Code taken and adapted from d3.js https://github.com/d3/d3-hierarchy/blob/main/src/hierarchy/index.js#L15.
  *
- * @param {Node|Object} data - object representing a root node (a simple { id, children } object or a `Node`)
- * @return {Node}
+ * @param data - object representing a root node (a simple { id, children } object or a `TreeNode`)
  */
-export function hierarchy(data) {
-  const root = new Node(data)
-  const nodes = []
-  let node = root
-
-  while (node) {
-    if (node.data.children) {
-      node.children = node.data.children.map((child_) => {
-        const child = new Node(child_)
-        child.id = child_.id
-        child.parent = node === root ? null : node
-        child.depth = node.depth + 1
-        nodes.push(child)
-        return child
-      })
-    }
-    node = nodes.pop()
+export function hierarchy(data: TreeRootNode) {
+  function deepCopyNodes(nodes: TreeChildNode[], parent: AnyTreeNode) {
+    return nodes.map((node) => {
+      const copy = new TreeChildNode(node.data, parent)
+      copy.depth = parent.depth + 1
+      copy.children = deepCopyNodes(node.children, copy)
+      return copy
+    })
   }
 
+  const root = new TreeRootNode()
+  root.children = deepCopyNodes(data.children, root)
   root.eachBefore(computeNodeHeight)
   return root
 }
@@ -197,13 +186,12 @@ export function hierarchy(data) {
 /**
  * Compute the node height by iterating on parents
  * Code taken from d3.js https://github.com/d3/d3-hierarchy/blob/main/src/hierarchy/index.js#L62.
- *
- * @param {Node} node
  */
-function computeNodeHeight(node) {
+function computeNodeHeight(node: TreeNode) {
+  let node_: TreeNode | null = node
   let height = 0
   do {
-    node.height = height
-    node = node.parent
-  } while (node && node.height < ++height)
+    node_.height = height
+    node_ = node_.parent
+  } while (node_ && node_.height < ++height)
 }
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 82a289d07..8140a63e6 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -3,6 +3,7 @@ import { useStoreGetters } from '@/store/utils'
 import { computed, ref } from 'vue'
 
 import RecursiveListGroup from '@/components/RecursiveListGroup.vue'
+import type { TreeRootNode } from '@/helpers/data/tree'
 
 const { domains, mainDomain, domainsTree } = useStoreGetters()
 
@@ -11,12 +12,13 @@ const search = ref('')
 
 const tree = computed(() => {
   // FIXME rm ts type when moved to pinia or else
-  if (!domainsTree.value) return
+  const tree = domainsTree.value as TreeRootNode | undefined
+  if (!tree) return
   const search_ = search.value.toLowerCase()
   if (search_) {
-    return domainsTree.value.filter((node) => node.id.includes(search_))
+    return tree.filter((node) => node.id.includes(search_))
   }
-  return domainsTree.value
+  return tree
 })
 
 const hasFilteredItems = computed(() => {
@@ -42,6 +44,7 @@ const hasFilteredItems = computed(() => {
     </template>
 
     <RecursiveListGroup
+      v-if="tree"
       :tree="tree"
       :toggle-text="$t('domain.toggle_subdomains')"
       class="mb-5"
@@ -52,9 +55,7 @@ const hasFilteredItems = computed(() => {
           <h5 class="me-3">
             <BLink :to="data.to" class="text-body text-decoration-none">
               <span class="fw-bold">
-                {{
-                  data.name.replace(parent?.data ? parent.data.name : null, '')
-                }}
+                {{ data.name.replace(parent.data?.name ?? '', '') }}
               </span>
               <span v-if="parent?.data" class="text-secondary">
                 {{ parent.data.name }}

From 0414f82d53ec2b784c0652affa94492ce1d5519f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 17:02:53 +0200
Subject: [PATCH 076/275] refactor: AdressItem typing

---
 .../globals/formItems/AdressItem.vue          | 85 ++++++++++---------
 app/src/composables/form.ts                   |  5 ++
 app/src/types/form.ts                         | 28 ++++++
 3 files changed, 79 insertions(+), 39 deletions(-)
 create mode 100644 app/src/composables/form.ts
 create mode 100644 app/src/types/form.ts

diff --git a/app/src/components/globals/formItems/AdressItem.vue b/app/src/components/globals/formItems/AdressItem.vue
index 6d6a0a4d7..5e2caf727 100644
--- a/app/src/components/globals/formItems/AdressItem.vue
+++ b/app/src/components/globals/formItems/AdressItem.vue
@@ -1,35 +1,36 @@
 <script setup lang="ts">
-type CustomEmail = {
-  localPart: string | null
-  separator: string
-  domain: string | null
-}
+import type {
+  AdressItemProps,
+  AdressModelValue,
+  BaseItemComputedProps,
+} from '@/types/form'
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: CustomEmail
-    choices: string[]
-    placeholder?: string
-    id?: string
-    state?: false | null
-    type?: string
-  }>(),
+withDefaults(
+  defineProps<AdressItemProps & BaseItemComputedProps<AdressModelValue>>(),
   {
-    placeholder: undefined,
     id: undefined,
-    state: undefined,
+    name: undefined,
+    placeholder: undefined,
+    touchKey: undefined,
     type: 'email',
+
+    modelValue: undefined,
+    state: undefined,
+    validation: undefined,
+    ariaDescribedby: undefined,
   },
 )
 
 const emit = defineEmits<{
-  'update:modelValue': [value: CustomEmail]
+  'update:modelValue': [value: AdressModelValue]
 }>()
 
-function onInput(key: 'localPart' | 'domain', modelValue: string | null) {
+const model = defineModel<AdressModelValue>({ required: true })
+
+function onInput(key: 'localPart' | 'domain', value: string | null) {
   emit('update:modelValue', {
-    ...props.modelValue,
-    [key]: modelValue,
+    ...model.value,
+    [key]: value,
   })
 }
 </script>
@@ -37,32 +38,38 @@ function onInput(key: 'localPart' | 'domain', modelValue: string | null) {
 <template>
   <BInputGroup v-bind="$attrs">
     <InputItem
-      :id="id"
-      :modelValue="modelValue.localPart"
+      :id="`${id}-local-part`"
       :placeholder="placeholder"
-      :state="state"
-      :aria-describedby="id + 'local-part-desc'"
-      @update:modelValue="onInput('localPart', $event)"
+      touch-key="localPart"
+      :model-value="model.localPart"
+      :aria-describedby="`${id}-local-part-desc`"
+      :state="validation?.localPart?.$error ? false : null"
+      :validation="validation?.localPart"
+      @update:model-value="onInput('localPart', $event as string)"
     />
 
     <BInputGroupText>{{ modelValue.separator }}</BInputGroupText>
 
     <SelectItem
-      :modelValue="modelValue.domain"
+      :id="`${id}-domain`"
+      touch-key="domain"
+      :model-value="modelValue.domain"
       :choices="choices"
-      :aria-describedby="id + 'domain-desc'"
-      @update:modelValue="onInput('domain', $event)"
-    />
-
-    <span
-      class="visually-hidden"
-      :id="id + 'local-part-desc'"
-      v-t="'address.local_part_description.' + type"
-    />
-    <span
-      class="visually-hidden"
-      :id="id + 'domain-desc'"
-      v-t="'address.domain_description.' + type"
+      :aria-describedby="`${id}-domain-desc`"
+      :state="validation?.domain?.$error ? false : null"
+      :validation="validation?.domain"
+      @update:model-value="onInput('domain', $event)"
     />
   </BInputGroup>
+
+  <span
+    :id="`${id}-local-part-desc`"
+    v-t="'address.local_part_description.' + type"
+    class="visually-hidden"
+  />
+  <span
+    :id="`${id}-domain-desc`"
+    v-t="'address.domain_description.' + type"
+    class="visually-hidden"
+  />
 </template>
diff --git a/app/src/composables/form.ts b/app/src/composables/form.ts
new file mode 100644
index 000000000..ff2b68039
--- /dev/null
+++ b/app/src/composables/form.ts
@@ -0,0 +1,5 @@
+import type { InjectionKey } from 'vue'
+
+export const ValidationTouchSymbol = Symbol() as InjectionKey<
+  (key?: string) => void
+>
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
new file mode 100644
index 000000000..0ac585adc
--- /dev/null
+++ b/app/src/types/form.ts
@@ -0,0 +1,28 @@
+import type { BaseValidation } from '@vuelidate/core'
+type StateValidation = false | null
+
+// WRITABLE
+
+type BaseWritableItemProps = {
+  id?: string
+  name?: string
+  placeholder?: string
+  touchKey?: string
+}
+
+export type BaseItemComputedProps<MV extends any = any> = {
+  ariaDescribedby?: string | string[]
+  modelValue?: MV
+  state?: StateValidation
+  validation?: BaseValidation
+}
+
+export type AdressItemProps = BaseWritableItemProps & {
+  choices: string[]
+  type?: 'domain' | 'email'
+}
+export type AdressModelValue = {
+  localPart: string | null
+  separator: string
+  domain: string | null
+}

From 5cd0ed23a564e9adec7decaeca53b706f46c916a Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 17:03:55 +0200
Subject: [PATCH 077/275] refactor: CheckboxItem typing

---
 .../globals/formItems/CheckboxItem.vue        | 30 ++++++++++++-------
 app/src/types/form.ts                         |  7 +++++
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index 01a464c74..51d53d7ac 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -1,31 +1,39 @@
 <script setup lang="ts">
+import type { CheckboxItemProps, BaseItemComputedProps } from '@/types/form'
+
 withDefaults(
-  defineProps<{
-    modelValue: boolean
-    id?: string
-    label?: string
-    labels?: { true: string; false: string }
-  }>(),
+  defineProps<CheckboxItemProps & BaseItemComputedProps<boolean>>(),
   {
     id: undefined,
+    name: undefined,
+    placeholder: undefined,
+    touchKey: undefined,
     label: undefined,
     labels: () => ({ true: 'yes', false: 'no' }),
+
+    ariaDescribedby: undefined,
+    modelValue: undefined,
+    state: undefined,
+    validation: undefined,
   },
 )
 
-const emit = defineEmits<{
+defineEmits<{
   'update:modelValue': [value: boolean]
 }>()
+
+const model = defineModel<boolean>()
 </script>
 
 <template>
   <BFormCheckbox
-    :modelValue="modelValue"
-    @update:modelValue="emit('update:modelValue', $event)"
     :id="id"
-    :aria-describedby="$parent.id + '__BV_description_'"
+    v-model="model"
+    :name="name"
+    :aria-describedby="ariaDescribedby"
+    :state="state"
     switch
   >
-    {{ label || $t(labels[modelValue]) }}
+    {{ label || $t(labels[modelValue ? 'true' : 'false']) }}
   </BFormCheckbox>
 </template>
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 0ac585adc..9c06af0a3 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -26,3 +26,10 @@ export type AdressModelValue = {
   separator: string
   domain: string | null
 }
+
+export type CheckboxItemProps = BaseWritableItemProps & {
+  label?: string
+  labels?: { true: string; false: string }
+  // FIXME unused?
+  // choices: string[]
+}

From 15b512fa1ee68ba7d95a0e7cf3c04e3a0be01dec Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 17:14:43 +0200
Subject: [PATCH 078/275] refactor: FileItem typing

---
 .../components/globals/formItems/FileItem.vue | 67 +++++++++----------
 app/src/helpers/commons.ts                    | 13 ++--
 app/src/types/form.ts                         | 11 +++
 3 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index c4ce4c9be..61c96f71b 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -2,46 +2,39 @@
 import type { BFormFile } from 'bootstrap-vue-next'
 import { computed, inject, ref } from 'vue'
 
+import { ValidationTouchSymbol } from '@/composables/form'
 import { getFileContent } from '@/helpers/commons'
-
-type CustomFile = {
-  file: File | null
-  content?: string | null
-  current?: boolean
-  removed?: boolean
-}
+import type {
+  BaseItemComputedProps,
+  FileItemProps,
+  FileModelValue,
+} from '@/types/form'
 
 const props = withDefaults(
-  defineProps<{
-    id?: string
-    modelValue?: CustomFile
-    placeholder?: string
-    dropPlaceholder?: string
-    accept?: string
-    state?: string
-    required?: boolean
-    name?: string
-  }>(),
+  defineProps<FileItemProps & BaseItemComputedProps<FileModelValue>>(),
   {
     id: undefined,
-    modelValue: () => ({ file: null }),
+    name: undefined,
     placeholder: 'Choose a file or drop it here...',
-    dropPlaceholder: undefined,
+    touchKey: undefined,
     accept: '',
+    dropPlaceholder: undefined,
+
+    ariaDescribedby: undefined,
+    modelValue: () => ({ file: null }),
     state: undefined,
-    required: false,
-    name: undefined,
+    validation: undefined,
   },
 )
 
 const emit = defineEmits<{
-  'update:modelValue': [value: CustomFile]
+  'update:modelValue': [value: FileModelValue]
 }>()
 
-const touch = inject('touch')
+const touch = inject(ValidationTouchSymbol)
 const inputElem = ref<InstanceType<typeof BFormFile> | null>(null)
 
-const _placeholder = computed(() => {
+const placeholder = computed(() => {
   return props.modelValue.file === null
     ? props.placeholder
     : props.modelValue.file.name
@@ -72,34 +65,34 @@ function clearFiles() {
     removed: true,
   })
 }
+
+const required = computed(() => 'required' in (props.validation ?? {}))
 </script>
 
 <template>
   <BInputGroup class="w-100">
-    <template #append>
-      <BButton
-        v-if="!required && modelValue.file !== null"
-        @click="clearFiles"
-        variant="danger"
-      >
+    <template v-if="!required && modelValue.file !== null" #append>
+      <BButton variant="danger" @click="clearFiles">
         <span class="visually-hidden">{{ $t('delete') }}</span>
         <YIcon iname="trash" />
       </BButton>
     </template>
 
     <BFormFile
-      :modelValue="modelValue.file"
-      ref="inputElem"
       :id="id"
-      :required="required"
-      :placeholder="_placeholder"
+      ref="inputElem"
+      :name="name"
+      :placeholder="placeholder"
       :accept="accept"
       :drop-placeholder="dropPlaceholder"
+      :aria-describedby="ariaDescribedby"
+      :model-value="modelValue.file"
       :state="state"
       :browse-text="$t('words.browse')"
-      @update:modelValue="onInput"
-      @blur="touch(name)"
-      @focusout="touch(name)"
+      :required="required"
+      @blur="touch?.(touchKey)"
+      @focusout="touch?.(touchKey)"
+      @update:model-value="onInput"
     />
   </BInputGroup>
 </template>
diff --git a/app/src/helpers/commons.ts b/app/src/helpers/commons.ts
index a39d474ac..53e1db39c 100644
--- a/app/src/helpers/commons.ts
+++ b/app/src/helpers/commons.ts
@@ -117,16 +117,17 @@ export function randint(min, max) {
 /**
  * Returns a File content.
  *
- * @param {File} file
- * @param {Object} [extraParams] - Optionnal params
- * @param {Boolean} [extraParams.base64] - returns a base64 representation of the file.
- * @return {Promise<String>}
+ * @param file -
+ * @param base64 - returns a base64 representation of the file.
  */
-export function getFileContent(file, { base64 = false } = {}) {
+export function getFileContent(
+  file: File,
+  { base64 = false } = {},
+): Promise<string> {
   return new Promise((resolve, reject) => {
     const reader = new FileReader()
     reader.onerror = reject
-    reader.onload = () => resolve(reader.result)
+    reader.onload = () => resolve(reader.result as string)
 
     if (base64) {
       reader.readAsDataURL(file)
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 9c06af0a3..bcff86bef 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -33,3 +33,14 @@ export type CheckboxItemProps = BaseWritableItemProps & {
   // FIXME unused?
   // choices: string[]
 }
+
+export type FileItemProps = BaseWritableItemProps & {
+  accept?: string | string[]
+  dropPlaceholder?: string
+}
+export type FileModelValue = {
+  file: File | null
+  content?: string | null
+  current?: boolean
+  removed?: boolean
+}

From 9a48aa1a458572ad8b2558340128dac5bf19afd7 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 17:17:12 +0200
Subject: [PATCH 079/275] refactor: InputItem typing

---
 .../globals/formItems/InputItem.vue           | 85 ++++++++++---------
 app/src/helpers/commons.ts                    |  8 ++
 app/src/types/form.ts                         | 28 ++++++
 3 files changed, 82 insertions(+), 39 deletions(-)

diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index 44c3efb6e..64933e4f6 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -1,63 +1,70 @@
 <script setup lang="ts">
-import { inject } from 'vue'
+import type { BaseValidation } from '@vuelidate/core'
+import { computed, inject } from 'vue'
+
+import { ValidationTouchSymbol } from '@/composables/form'
+import type { BaseItemComputedProps, InputItemProps } from '@/types/form'
+import { objectGet } from '@/helpers/commons'
 
 const props = withDefaults(
-  defineProps<{
-    modelValue?: string | number | null
-    id?: string
-    placeholder?: string
-    type?: string
-    required?: boolean
-    state?: false | null
-    min?: number
-    max?: number
-    step?: number
-    trim?: boolean
-    autocomplete?: string
-    // FIXME pattern?
-    pattern?: object
-    name?: string
-  }>(),
+  defineProps<InputItemProps & BaseItemComputedProps<string | number | null>>(),
   {
-    modelValue: null,
     id: undefined,
+    name: undefined,
     placeholder: undefined,
-    type: 'text',
-    required: false,
-    state: undefined,
-    min: undefined,
-    max: undefined,
+    touchKey: undefined,
+    autocomplete: undefined,
+    // pattern: undefined,
     step: undefined,
     trim: true,
-    autocomplete: undefined,
-    pattern: undefined,
-    name: undefined,
+    type: 'text',
+
+    ariaDescribedby: undefined,
+    modelValue: undefined,
+    state: undefined,
+    validation: undefined,
   },
 )
-const emit = defineEmits<{
+defineEmits<{
   'update:modelValue': [value: string | number | null]
 }>()
 
-const touch = inject('touch')
+const touch = inject(ValidationTouchSymbol)
+
+const model = defineModel<string | number | null>()
+
+const autocomplete = computed(() => {
+  const typeToAutocomplete = {
+    password: 'new-password',
+    email: 'email',
+    url: 'url',
+  } as const
+  return props.autocomplete || objectGet(typeToAutocomplete, props.type)
+})
 
-const autocomplete =
-  props.autocomplete || props.type === 'password' ? 'new-password' : null
+const fromValidation = computed(() => {
+  const validation = props?.validation ?? ({} as BaseValidation)
+  return {
+    required: 'required' in validation,
+    min: 'min' in validation ? validation.min.$params.min : undefined,
+    max: 'max' in validation ? validation.max.$params.max : undefined,
+  }
+})
 </script>
 
 <template>
   <BFormInput
-    :modelValue="modelValue"
-    @update:modelValue="emit('update:modelValue', $event)"
     :id="id"
+    v-bind="fromValidation"
+    v-model="model"
+    :name="name"
     :placeholder="placeholder"
-    :type="type"
-    :state="state"
-    :required="required"
-    :min="min"
-    :max="max"
+    :autocomplete="autocomplete"
     :step="step"
     :trim="trim"
-    :autocomplete="autocomplete"
-    @blur="touch(name)"
+    :type="type"
+    :aria-describedby="ariaDescribedby"
+    :state="state"
+    @blur="touch?.(touchKey)"
   />
 </template>
diff --git a/app/src/helpers/commons.ts b/app/src/helpers/commons.ts
index 53e1db39c..c05f30631 100644
--- a/app/src/helpers/commons.ts
+++ b/app/src/helpers/commons.ts
@@ -29,6 +29,14 @@ export function isObjectLiteral(value) {
   )
 }
 
+export function objectGet<
+  T extends Obj,
+  K extends keyof T | string,
+  F extends any = undefined,
+>(obj: T, key: K, fallback?: F) {
+  return (key in obj ? obj[key] : fallback) as K extends keyof T ? T[K] : F
+}
+
 /**
  * Check if value is "empty" (`null`, `undefined`, `''`, `[]`, '{}').
  * Note: `0` is not considered "empty" in that helper.
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index bcff86bef..12ef8caf4 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -44,3 +44,31 @@ export type FileModelValue = {
   current?: boolean
   removed?: boolean
 }
+
+export type InputItemProps = BaseWritableItemProps & {
+  autocomplete?:
+    | 'off'
+    | 'on'
+    | 'name'
+    | 'email'
+    | 'username'
+    | 'new-password'
+    | 'current-password'
+    | 'url'
+  // pattern?: object
+  // choices?: string[] FIXME rm ?
+  step?: number
+  trim?: boolean
+  type?:
+    | 'color'
+    | 'date'
+    // | 'datetime-local'
+    | 'email'
+    | 'number'
+    | 'password'
+    | 'range'
+    // | 'search'
+    | 'text'
+    | 'time'
+    | 'url'
+}

From ea7f070b2ca22a9855a12d9458b4cb75c55bc742 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 17:17:47 +0200
Subject: [PATCH 080/275] refactor: SelectItem typing

---
 .../globals/formItems/SelectItem.vue          | 50 ++++++++++++-------
 app/src/types/form.ts                         |  4 ++
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index 8b1d9e6f2..aa3aab181 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -1,36 +1,50 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-
-withDefaults(
-  defineProps<{
-    modelValue?: string | null
-    id?: string
-    choices: string[]
-    required?: boolean
-    name?: string
-  }>(),
+import { computed, inject } from 'vue'
+
+import { ValidationTouchSymbol } from '@/composables/form'
+import type { BaseItemComputedProps, SelectItemProps } from '@/types/form'
+
+const props = withDefaults(
+  defineProps<SelectItemProps & BaseItemComputedProps<string | null>>(),
   {
-    modelValue: null,
     id: undefined,
-    required: false,
     name: undefined,
+    placeholder: undefined,
+    touchKey: undefined,
+
+    ariaDescribedby: undefined,
+    modelValue: undefined,
+    state: undefined,
+    validation: undefined,
   },
 )
 
-const emit = defineEmits<{
+defineEmits<{
   'update:modelValue': [value: string | null]
 }>()
 
-const touch = inject('touch')
+const model = defineModel<string | number | null>()
+
+const touch = inject(ValidationTouchSymbol)
+
+const required = computed(() => 'required' in (props?.validation ?? {}))
 </script>
 
 <template>
   <BFormSelect
-    :modelValue="modelValue"
-    @update:modelValue="emit('update:modelValue', $event)"
     :id="id"
+    v-model="model"
+    :name="name"
     :options="choices"
+    :aria-describedby="ariaDescribedby"
+    :state="state"
     :required="required"
-    @blur="touch(name)"
-  />
+    @blur="touch?.(touchKey)"
+  >
+    <template #first>
+      <BFormSelectOption value="null" :disabled="required">
+        -- {{ required ? $t('select_an_option') : $t('words.none') }} --
+      </BFormSelectOption>
+    </template>
+  </BFormSelect>
 </template>
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 12ef8caf4..821e7ed69 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -72,3 +72,7 @@ export type InputItemProps = BaseWritableItemProps & {
     | 'time'
     | 'url'
 }
+
+export type SelectItemProps = BaseWritableItemProps & {
+  choices: string[] | { text: string; value: string }[]
+}

From 2977ed4d7a96865964aef7b775c7f11dc1600a73 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 17:18:48 +0200
Subject: [PATCH 081/275] refactor: TagsItem typing

---
 .../components/globals/formItems/TagsItem.vue | 52 +++++++++----------
 app/src/types/form.ts                         |  6 +++
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index 62c477cfa..ad0d633be 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -1,31 +1,31 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-
-withDefaults(
-  defineProps<{
-    modelValue?: unknown[] | null
-    id?: string
-    placeholder?: string
-    limit?: number
-    required?: boolean
-    state?: boolean
-    name?: string
-    // FIXME no options on BFormTags
-    options?: unknown[]
-  }>(),
+import { computed, inject } from 'vue'
+
+import { ValidationTouchSymbol } from '@/composables/form'
+import type { BaseItemComputedProps, TagsItemProps } from '@/types/form'
+
+const props = withDefaults(
+  defineProps<TagsItemProps & BaseItemComputedProps<string[]>>(),
   {
-    modelValue: null,
     id: undefined,
+    name: undefined,
     placeholder: undefined,
+    touchKey: undefined,
     limit: undefined,
-    required: false,
+    // options: undefined,
+
+    ariaDescribedby: undefined,
+    modelValue: undefined,
     state: undefined,
-    name: undefined,
-    options: undefined,
+    validation: undefined,
   },
 )
 
-const touch = inject('touch')
+const touch = inject(ValidationTouchSymbol)
+
+const model = defineModel<string[]>()
+
+const required = computed(() => 'required' in (props?.validation ?? {}))
 
 // FIXME rework for options/choices
 // https://bootstrap-vue-next.github.io/bootstrap-vue-next/docs/components/form-tags.html#using-custom-form-components
@@ -33,16 +33,16 @@ const touch = inject('touch')
 
 <template>
   <BFormTags
-    :modelValue="modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
+    v-model="model"
+    :name="name"
     :placeholder="placeholder"
-    :required="required"
-    separator=" ,;"
     :limit="limit"
-    remove-on-delete
+    :aria-describedby="ariaDescribedby"
     :state="state"
-    :options="options"
-    @blur="touch(name)"
+    :required="required"
+    remove-on-delete
+    separator=" ,;"
+    @blur="touch?.(touchKey)"
   />
 </template>
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 821e7ed69..f47263635 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -76,3 +76,9 @@ export type InputItemProps = BaseWritableItemProps & {
 export type SelectItemProps = BaseWritableItemProps & {
   choices: string[] | { text: string; value: string }[]
 }
+
+export type TagsItemProps = BaseWritableItemProps & {
+  limit?: number
+  // FIXME no options on BFormTags?
+  // options?: string[]
+}

From 0f8fbd48302c9642f8b4d0a81d783625f35aab60 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 17:19:51 +0200
Subject: [PATCH 082/275] refactor: TagsSelectizeItem typing

---
 .../globals/formItems/TagsSelectizeItem.vue   | 102 +++++++++---------
 app/src/types/form.ts                         |  11 ++
 2 files changed, 60 insertions(+), 53 deletions(-)

diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index 77af271a4..ad2eb88b2 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
-// FIXME addTag removeTag types
 import type { BDropdown, BFormInput } from 'bootstrap-vue-next'
 import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type {
+  BaseItemComputedProps,
+  TagsSelectizeItemProps,
+} from '@/types/form'
 
 type TagUpdateArgs = {
   action: 'add' | 'remove'
@@ -14,30 +19,23 @@ defineOptions({
 })
 
 const props = withDefaults(
-  defineProps<{
-    modelValue: string[]
-    // FIXME typing
-    options: string[]
-    id: string
-    placeholder?: string
-    limit?: number
-    name?: string
-    itemsName: string
-    disabledItems?: string[]
-    auto?: boolean
-    noTags?: boolean
-    label?: string
-    tagIcon?: string
-  }>(),
+  defineProps<TagsSelectizeItemProps & BaseItemComputedProps<string[]>>(),
   {
-    placeholder: undefined,
-    limit: undefined,
+    id: undefined,
     name: undefined,
-    disabledItems: () => [],
+    placeholder: undefined,
+    touchKey: undefined,
     auto: false,
-    noTags: false,
+    disabledItems: undefined,
     label: undefined,
+    limit: undefined,
+    noTags: false,
     tagIcon: undefined,
+
+    ariaDescribedby: undefined,
+    modelValue: undefined,
+    state: undefined,
+    validation: undefined,
   },
 )
 
@@ -46,18 +44,21 @@ const emit = defineEmits<{
   'tag-update': [value: TagUpdateArgs]
 }>()
 
-const search = ref('')
+const model = defineModel<string[]>()
 const searchElem = ref<InstanceType<typeof BDropdown> | null>(null)
 const dropdownElem = ref<InstanceType<typeof BFormInput> | null>(null)
 
+const { t } = useI18n()
+
+const search = ref('')
 const criteria = computed(() => {
   return search.value.trim().toLowerCase()
 })
-
 const availableOptions = computed(() => {
   const options = props.options.filter((opt) => {
     return (
-      props.modelValue.indexOf(opt) === -1 && !props.disabledItems.includes(opt)
+      props.modelValue?.indexOf(opt) === -1 &&
+      props.disabledItems?.includes(opt)
     )
   })
   if (criteria.value) {
@@ -67,7 +68,14 @@ const availableOptions = computed(() => {
   }
   return options
 })
-
+const searchI18n = computed(() => {
+  const params = { items: t('items.' + props.itemsName, 0) }
+  return {
+    label: t('search.for', { items: props.itemsName }),
+    invalidFeedback: t('search.not_found', params, 0),
+    noItems: t('items_verbose_items_left', params, 0),
+  }
+})
 const searchState = computed(() => {
   return criteria.value && availableOptions.value.length === 0 ? false : null
 })
@@ -87,7 +95,7 @@ function onRemoveTag(option: string, applyFn: TagUpdateArgs['applyFn']) {
   }
 }
 
-function onDropdownKeydown(e) {
+function onDropdownKeydown(e: KeyboardEvent) {
   // Allow to start searching after dropdown opening
   // FIXME check if dropdownElem.value!.firstElementChild works (removed the $el)
   if (
@@ -97,18 +105,22 @@ function onDropdownKeydown(e) {
     searchElem.value!.$el.focus()
   }
 }
+
+// FIXME call touch somewhere?
 </script>
 
 <template>
   <div class="tags-selectize">
     <BFormTags
       v-bind="$attrs"
-      :modelValue="modelValue"
-      @update:modelValue="emit('update:modelValue', $event)"
       :id="id"
+      v-model="model"
+      :name="name"
+      :aria-describedby="ariaDescribedby"
+      :state="state"
+      no-outer-focus
       size="lg"
       class="p-0 border-0"
-      no-outer-focus
     >
       <template #default="{ tags, disabled, addTag, removeTag }">
         <ul
@@ -121,10 +133,10 @@ function onDropdownKeydown(e) {
             class="list-inline-item"
           >
             <BFormTag
-              @remove="onRemoveTag(tag, removeTag)"
               :title="tag"
-              :disabled="disabled || disabledItems.includes(tag)"
+              :disabled="disabled || disabledItems?.includes(tag)"
               class="border border-dark mb-2"
+              @remove="onRemoveTag(tag, removeTag)"
             >
               <YIcon v-if="tagIcon" :iname="tagIcon" /> {{ tag }}
             </BFormTag>
@@ -145,30 +157,22 @@ function onDropdownKeydown(e) {
           <BDropdownGroup class="search-group">
             <BDropdownForm @submit.stop.prevent="() => {}">
               <BFormGroup
-                :label="$t('search.for', { items: itemsName })"
+                :label="searchI18n.label"
+                :label-for="id + '-search-input'"
                 label-cols-md="auto"
                 label-size="sm"
-                :label-for="id + '-search-input'"
-                :invalid-feedback="
-                  $t(
-                    'search.not_found',
-                    {
-                      items: $t('items.' + itemsName, 0),
-                    },
-                    0,
-                  )
-                "
+                :invalid-feedback="searchI18n.invalidFeedback"
                 :state="searchState"
                 :disabled="disabled"
                 class="mb-0"
               >
                 <BFormInput
+                  :id="id + '-search-input'"
                   ref="searchElem"
                   v-model="search"
-                  :id="id + '-search-input'"
-                  type="search"
-                  size="sm"
                   autocomplete="off"
+                  size="sm"
+                  type="search"
                 />
               </BFormGroup>
             </BDropdownForm>
@@ -184,15 +188,7 @@ function onDropdownKeydown(e) {
           </BDropdownItemButton>
           <BDropdownText v-if="!criteria && availableOptions.length === 0">
             <YIcon iname="exclamation-triangle" />
-            {{
-              $t(
-                'items_verbose_items_left',
-                {
-                  items: $t('items.' + itemsName, 0),
-                },
-                0,
-              )
-            }}
+            {{ searchI18n.noItems }}
           </BDropdownText>
         </BDropdown>
       </template>
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index f47263635..362abb7aa 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -82,3 +82,14 @@ export type TagsItemProps = BaseWritableItemProps & {
   // FIXME no options on BFormTags?
   // options?: string[]
 }
+
+export type TagsSelectizeItemProps = BaseWritableItemProps & {
+  itemsName: string
+  options: string[]
+  auto?: boolean
+  disabledItems?: string[]
+  label: string
+  limit?: number
+  noTags?: boolean
+  tagIcon?: string
+}

From 32da3d9ee41ef222288ac2ee01b63f346ae43709 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 17:20:28 +0200
Subject: [PATCH 083/275] refactor: TextAreaItem typing

---
 .../globals/formItems/TextAreaItem.vue        | 49 ++++++++++---------
 app/src/types/form.ts                         |  4 ++
 2 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/app/src/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index 5aaac3536..12b49af34 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -1,43 +1,46 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-
-withDefaults(
-  defineProps<{
-    modelValue?: string | null
-    id?: string
-    placeholder?: string
-    type?: string // FIXME unused?
-    required?: boolean
-    state?: boolean | null
-    name?: string
-  }>(),
+import { computed, inject } from 'vue'
+
+import { ValidationTouchSymbol } from '@/composables/form'
+import type { BaseItemComputedProps, TextAreaItemProps } from '@/types/form'
+
+const props = withDefaults(
+  defineProps<TextAreaItemProps & BaseItemComputedProps<string | null>>(),
   {
-    modelValue: null,
     id: undefined,
+    name: undefined,
     placeholder: undefined,
-    type: 'text',
-    required: false,
+    touchKey: undefined,
+    // type: 'text',
+
+    ariaDescribedby: undefined,
+    modelValue: undefined,
     state: undefined,
-    name: undefined,
+    validation: undefined,
   },
 )
 
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
+defineEmits<{
+  'update:modelValue': [value: string | null]
 }>()
 
-const touch = inject('touch')
+const model = defineModel<string>()
+
+const touch = inject(ValidationTouchSymbol)
+
+const required = computed(() => 'required' in (props?.validation ?? {}))
 </script>
 
 <template>
   <BFormTextarea
-    :modelValue="modelValue"
-    @update:modelValue="emit('update:modelValue', $event)"
     :id="id"
+    v-model="model"
+    :name="name"
     :placeholder="placeholder"
-    :required="required"
+    :aria-describedby="ariaDescribedby"
     :state="state"
+    :required="required"
     rows="4"
-    @blur="touch(name)"
+    @blur="touch?.(touchKey)"
   />
 </template>
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 362abb7aa..b04dfad19 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -93,3 +93,7 @@ export type TagsSelectizeItemProps = BaseWritableItemProps & {
   noTags?: boolean
   tagIcon?: string
 }
+
+export type TextAreaItemProps = BaseWritableItemProps & {
+  // type?: string // FIXME unused?
+}

From 906d9ca95c75e4d7d3783adc8eeb75a426e7e223 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 20:50:57 +0200
Subject: [PATCH 084/275] refactor: ButtonItem typing

---
 .../globals/formItems/ButtonItem.vue          | 30 ++++++++-----------
 app/src/types/form.ts                         | 15 ++++++++++
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/app/src/components/globals/formItems/ButtonItem.vue b/app/src/components/globals/formItems/ButtonItem.vue
index 55a89c2c7..8fd424f62 100644
--- a/app/src/components/globals/formItems/ButtonItem.vue
+++ b/app/src/components/globals/formItems/ButtonItem.vue
@@ -1,24 +1,18 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    label?: string
-    id?: string
-    type?: 'success' | 'info' | 'warning' | 'danger'
-    icon?: string
-    enabled?: string | boolean
-  }>(),
-  {
-    label: undefined,
-    id: undefined,
-    type: 'success',
-    icon: undefined,
-    enabled: true,
-  },
-)
+import type { ButtonItemProps } from '@/types/form'
 
-const emit = defineEmits(['action'])
+const props = withDefaults(defineProps<ButtonItemProps>(), {
+  id: undefined,
+  enabled: true,
+  icon: undefined,
+  type: 'success',
+})
+
+const emit = defineEmits<{
+  action: [value: ButtonItemProps['id']]
+}>()
 
 const icon = computed(() => {
   const icons = {
@@ -36,9 +30,9 @@ const icon = computed(() => {
   <BButton
     :id="id"
     :variant="type"
-    @click="emit('action', $event)"
     :disabled="!enabled"
     class="d-block mb-3"
+    @click="emit('action', id)"
   >
     <YIcon :iname="icon" class="me-2" />
     <span v-html="label" />
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index b04dfad19..f36a6db30 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -1,6 +1,21 @@
 import type { BaseValidation } from '@vuelidate/core'
 type StateValidation = false | null
 
+// DISPLAY
+
+type BaseDisplayItemProps = {
+  label: string
+  id?: string
+}
+
+export type ButtonItemProps = BaseDisplayItemProps & {
+  // FIXME compute enabled JSExpression
+  enabled?: boolean
+  icon?: string
+  type?: StateVariant
+}
+
+
 // WRITABLE
 
 type BaseWritableItemProps = {

From 4242b55327af3e0f8d9e9495ee52f98a7c29bbb0 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 20:51:17 +0200
Subject: [PATCH 085/275] refactor: DisplayTextItem typing

---
 .../globals/formItems/DisplayTextItem.vue       | 17 ++++++-----------
 app/src/types/form.ts                           |  2 ++
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/app/src/components/globals/formItems/DisplayTextItem.vue b/app/src/components/globals/formItems/DisplayTextItem.vue
index a4c219341..ea3c14246 100644
--- a/app/src/components/globals/formItems/DisplayTextItem.vue
+++ b/app/src/components/globals/formItems/DisplayTextItem.vue
@@ -1,18 +1,13 @@
 <script setup lang="ts">
-withDefaults(
-  defineProps<{
-    id?: string
-    label?: string
-  }>(),
-  {
-    id: undefined,
-    label: undefined,
-  },
-)
+import type { DisplayTextItemProps } from '@/types/form'
+
+withDefaults(defineProps<DisplayTextItemProps>(), {
+  id: undefined,
+})
 </script>
 
 <template>
-  <div>
+  <div :id="id">
     <p v-text="label" />
   </div>
 </template>
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index f36a6db30..75a891595 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -15,6 +15,8 @@ export type ButtonItemProps = BaseDisplayItemProps & {
   type?: StateVariant
 }
 
+export type DisplayTextItemProps = BaseDisplayItemProps
+
 
 // WRITABLE
 

From cc90c50bafdde9b11fa27fdcbf22855886014836 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 20:51:40 +0200
Subject: [PATCH 086/275] refactor: MarkdownItem typing

---
 app/src/components/globals/formItems/MarkdownItem.vue | 11 ++++++-----
 app/src/types/form.ts                                 |  2 ++
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/src/components/globals/formItems/MarkdownItem.vue b/app/src/components/globals/formItems/MarkdownItem.vue
index 26a245e9b..252021e12 100644
--- a/app/src/components/globals/formItems/MarkdownItem.vue
+++ b/app/src/components/globals/formItems/MarkdownItem.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-defineProps<{
-  label: string
-  id?: string
-}>()
+import type { MarkdownItemProps } from '@/types/form'
+
+withDefaults(defineProps<MarkdownItemProps>(), {
+  id: undefined,
+})
 </script>
 
 <template>
-  <VueShowdown :markdown="label" />
+  <VueShowdown :id="id" :markdown="label" />
 </template>
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 75a891595..57b14a858 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -17,6 +17,8 @@ export type ButtonItemProps = BaseDisplayItemProps & {
 
 export type DisplayTextItemProps = BaseDisplayItemProps
 
+export type MarkdownItemProps = BaseDisplayItemProps
+
 
 // WRITABLE
 

From b9cf8b92fe082edd5c021f405b706d8d4c294d02 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 5 Jul 2024 20:52:03 +0200
Subject: [PATCH 087/275] refactor: ReadOnlyAlertItem typing

---
 .../globals/formItems/ReadOnlyAlertItem.vue   | 20 ++++++++++---------
 app/src/types/form.ts                         |  4 ++++
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index ff975508d..8f90149e5 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = defineProps<{
-  label: string
-  id?: string
-  type?: 'success' | 'info' | 'warning' | 'danger'
-  icon?: string
-}>()
+import type { ReadOnlyAlertItemProps } from '@/types/form'
+
+const props = withDefaults(defineProps<ReadOnlyAlertItemProps>(), {
+  id: undefined,
+  icon: undefined,
+  type: 'success',
+})
 
 const icon = computed(() => {
   const icons = {
@@ -22,11 +23,12 @@ const icon = computed(() => {
 
 <template>
   <BAlert
-    class="d-flex flex-column flex-md-row align-items-center"
+    :id="id"
+    :model-value="true"
     :variant="type"
-    :modelValue="true"
+    class="d-flex flex-column flex-md-row align-items-center"
   >
-    <YIcon :iname="icon" class="me-md-3 mb-md-0 mb-2" :variant="type" />
+    <YIcon :iname="icon" :variant="type" class="me-md-3 mb-md-0 mb-2" />
 
     <VueShowdown :markdown="label" tag="span" class="markdown" />
   </BAlert>
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 57b14a858..b82a34d14 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -19,6 +19,10 @@ export type DisplayTextItemProps = BaseDisplayItemProps
 
 export type MarkdownItemProps = BaseDisplayItemProps
 
+export type ReadOnlyAlertItemProps = BaseDisplayItemProps & {
+  icon?: string
+  type?: StateVariant
+}
 
 // WRITABLE
 

From 01ff371eedf3da5c9f671bad56f2d9b48fc493d8 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sat, 6 Jul 2024 12:23:30 +0200
Subject: [PATCH 088/275] refactor: FormField ts + composition

---
 app/src/components/globals/FormField.vue | 211 +++++++++++++----------
 app/src/composables/form.ts              |  29 +++-
 app/src/helpers/commons.ts               |  11 ++
 app/src/types/form.ts                    |  81 ++++++++-
 4 files changed, 243 insertions(+), 89 deletions(-)

diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 138277b88..cc2867a2f 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -1,102 +1,99 @@
-<script setup lang="ts">
-import type { BaseValidation } from '@vuelidate/core'
-import type { BaseColorVariant } from 'bootstrap-vue-next'
-import { computed, provide, useAttrs, type Component } from 'vue'
+<script
+  setup
+  lang="ts"
+  generic="C extends AnyWritableComponents, MV extends any"
+>
+import { createReusableTemplate } from '@vueuse/core'
+import { computed, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import type { Obj } from '@/types/commons'
+import { useTouch } from '@/composables/form'
+import { omit } from '@/helpers/commons'
+import type {
+  AnyWritableComponents,
+  BaseItemComputedProps,
+  FormField,
+  FormFieldProps,
+} from '@/types/form'
 
 defineOptions({
-  inheritAttrs: false,
   name: 'FormField',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<FormFieldProps<C, MV>>(), {
+  append: undefined,
+  asInputGroup: false,
+  description: undefined,
+  descriptionVariant: undefined,
+  id: undefined,
+  label: undefined,
+  labelFor: undefined,
+  link: undefined,
+  prepend: undefined,
+  rules: undefined,
+
+  modelValue: undefined,
+  validation: undefined,
 })
 
-const props = withDefaults(
-  defineProps<{
-    // Component props (other <form-group> related attrs are passed thanks to $attrs)
-    id?: string
-    description?: string
-    descriptionVariant?: BaseColorVariant
-    link?: { href: string; text: string }
-    component?: Component | string // FIXME limit to formItems?
-    modelValue?: unknown
-    props?: Obj
-    validation?: BaseValidation
-    validationIndex?: number
-  }>(),
-  {
-    id: undefined,
-    description: undefined,
-    descriptionVariant: undefined,
-    link: undefined,
-    component: 'InputItem',
-    modelValue: undefined,
-    props: () => ({}),
-    validation: undefined,
-    validationIndex: undefined,
-  },
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
+defineEmits<{
+  'update:modelValue': [value: MV]
 }>()
 
-const { t } = useI18n()
+const slots = defineSlots<{
+  default?: (
+    componentProps: FormField<C, MV>['props'] & BaseItemComputedProps<MV>,
+  ) => any
+  description?: any
+}>()
 
-function touch(name: string) {
-  if (props.validation) {
-    // For fields that have multiple elements
-    if (name) {
-      props.validation[name].$touch()
-    } else {
-      props.validation.$touch()
-    }
-  }
-}
+const model = defineModel<MV>()
 
-provide('touch', touch)
+const attrs = useAttrs()
+const { t } = useI18n()
+useTouch(() => props.validation)
 
-const attrs_ = useAttrs()
-const attrs = computed(() => {
-  const attrs = { ...attrs_ }
+const computedAttrs = computed(() => {
+  const attrs_ = { ...omit(attrs, ['hr', 'readonly', 'visible']) }
 
-  if ('label' in attrs) {
+  if (props.label) {
     const defaultAttrs = {
       'label-cols-md': 4,
       'label-cols-lg': 3,
       'label-class': ['fw-bold', 'py-0'],
     }
 
-    if (!('label-cols' in attrs)) {
+    if (!('label-cols' in attrs_)) {
       let attr: keyof typeof defaultAttrs
       for (attr in defaultAttrs) {
-        if (!(attr in attrs)) attrs[attr] = defaultAttrs[attr]
+        if (!(attr in attrs)) attrs_[attr] = defaultAttrs[attr]
       }
     } else if (!('label-class' in attrs)) {
-      attrs['label-class'] = defaultAttrs['label-class']
+      attrs_['label-class'] = defaultAttrs['label-class']
     }
   }
 
-  return attrs
+  if (props.asInputGroup) {
+    attrs_['label-class'] = [
+      ...((attrs_['label-class'] as []) || []),
+      'visually-hidden',
+    ]
+  }
+
+  return attrs_
 })
 
 const id = computed(() => {
   if (props.id) return props.id
-  const childId = props.props.id || attrs_['label-for']
-  return childId ? childId + '_group' : null
+  const childId = props.props?.id || props.labelFor
+  return childId ? `${childId}-field` : undefined
 })
 
 const error = computed(() => {
   const v = props.validation
-  if (v) {
-    if (props.validationIndex !== undefined) {
-      const errors = v.$each.$response.$errors[props.validationIndex]
-      const err = Object.values(errors).find((part) => {
-        return part.length
-      })
-      return err?.length ? err[0] : null
-    }
-    return v.$errors.length ? { ...v.$errors[0], $model: v.$model } : null
+  if (v && v.$anyDirty) {
+    return v.$errors.length ? { errors: v.$errors, $model: v.$model } : null
   }
   return null
 })
@@ -107,49 +104,89 @@ const state = computed(() => {
 })
 
 const errorMessage = computed(() => {
-  const err = error.value
-  if (err) {
-    if (err.$message) return err.$message
-    return t('form_errors.' + err.$validator, {
-      value: err.$model,
-      ...err.$params,
+  if (!error.value) return ''
+  const { errors, $model } = error.value
+  // FIXME maybe handle translation in validators directly
+  // https://vuelidate-next.netlify.app/advanced_usage.html#i18n-support
+
+  return errors
+    .map((err) => {
+      if (err) {
+        if (err.$validator === '$externalResults') return err.$message
+        return t('form_errors.' + err.$validator, {
+          value: $model,
+          ...err.$params,
+        })
+      }
     })
-  }
-  return ''
+    .join('<br>')
 })
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
+  ariaDescribedby: string[]
+}>()
 </script>
 
 <template>
-  <!-- v-bind="$attrs" allow to pass default attrs not specified in this component slots -->
-  <BFormGroup
-    v-bind="attrs"
-    :id="id"
-    :label-for="attrs['label-for'] || props.id"
-    :state="state"
-    @touch="touch"
-  >
+  <DefineTemplate v-slot="{ ariaDescribedby }">
     <!-- Make field props and state available as scoped slot data -->
-    <slot v-bind="{ self: { ...props, state }, touch }">
+    <slot
+      v-bind="{
+        ...props.props,
+        ariaDescribedby,
+        modelValue: props.modelValue,
+        state,
+        validation: validation,
+      }"
+    >
       <!-- if no component was passed as slot, render a component from the props -->
       <Component
         v-bind="props.props"
         :is="component"
-        :modelValue="modelValue"
-        @update:modelValue="emit('update:modelValue', $event)"
+        v-model="model"
+        :aria-describedby="ariaDescribedby"
         :state="state"
-        :required="validation ? 'required' in validation : false"
+        :validation="validation"
       />
     </slot>
+  </DefineTemplate>
+
+  <!-- FIXME better use `labelSrOnly` prop instead of class but it is currently bugged -->
+  <BFormGroup
+    v-bind="computedAttrs"
+    :id="id"
+    :label="label"
+    :label-for="labelFor || props.props?.id"
+    :state="state"
+  >
+    <template #default="{ ariaDescribedby }">
+      <BInputGroup v-if="asInputGroup || append || prepend" :append="append">
+        <BInputGroupText
+          v-if="asInputGroup || prepend"
+          :aria-hidden="asInputGroup"
+        >
+          {{ asInputGroup ? label : prepend }}
+        </BInputGroupText>
+        <ReuseTemplate v-bind="{ ariaDescribedby }" />
+        <BInputGroupText v-if="append">{{ append }}</BInputGroupText>
+      </BInputGroup>
+      <ReuseTemplate v-else v-bind="{ ariaDescribedby }" />
+    </template>
 
     <template #invalid-feedback>
       <span v-html="errorMessage" />
     </template>
 
-    <template #description>
+    <template v-if="description || link || 'description' in slots" #description>
       <!-- Render description -->
       <template v-if="description || link">
         <div class="d-flex">
-          <BLink v-if="link" :to="link" :href="link.href" class="ms-auto">
+          <BLink
+            v-if="link"
+            :to="'name' in link ? link.name : undefined"
+            :href="'href' in link ? link.href : undefined"
+            class="ms-auto"
+          >
             {{ link.text }}
           </BLink>
         </div>
diff --git a/app/src/composables/form.ts b/app/src/composables/form.ts
index ff2b68039..fcc25cc37 100644
--- a/app/src/composables/form.ts
+++ b/app/src/composables/form.ts
@@ -1,5 +1,32 @@
-import type { InjectionKey } from 'vue'
+import type { BaseValidation } from '@vuelidate/core'
+import type { InjectionKey, MaybeRefOrGetter } from 'vue'
+import { inject, provide, toValue } from 'vue'
 
+export const clearServerErrorsSymbol = Symbol() as InjectionKey<
+  (key?: string) => void
+>
 export const ValidationTouchSymbol = Symbol() as InjectionKey<
   (key?: string) => void
 >
+
+export function useTouch(
+  validation: MaybeRefOrGetter<BaseValidation | undefined>,
+) {
+  function touch(key?: string) {
+    const v = toValue(validation)
+    if (v) {
+      // For fields that have multiple elements
+      if (key) {
+        v[key].$touch()
+        clear?.(v[key].$path)
+      } else {
+        v.$touch()
+        clear?.(v.$path)
+      }
+    }
+  }
+  provide(ValidationTouchSymbol, touch)
+  const clear = inject(clearServerErrorsSymbol)
+
+  return touch
+}
diff --git a/app/src/helpers/commons.ts b/app/src/helpers/commons.ts
index c05f30631..53c50501a 100644
--- a/app/src/helpers/commons.ts
+++ b/app/src/helpers/commons.ts
@@ -144,3 +144,14 @@ export function getFileContent(
     }
   })
 }
+
+export function omit<T extends Obj, K extends (keyof T)[]>(
+  obj: T,
+  keys: K,
+): Omit<T, K[number]> {
+  return Object.fromEntries(
+    Object.keys(obj)
+      .filter((key) => !keys.includes(key))
+      .map((key) => [key, obj[key]]),
+  ) as Omit<T, K[number]>
+}
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index b82a34d14..8e840bc09 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -1,5 +1,12 @@
-import type { BaseValidation } from '@vuelidate/core'
+import type {
+  BaseValidation,
+  ValidationArgs,
+  ValidationRuleCollection,
+} from '@vuelidate/core'
+import type { RouteLocationRaw } from 'vue-router'
+
 type StateValidation = false | null
+type StateVariant = 'success' | 'info' | 'warning' | 'danger'
 
 // DISPLAY
 
@@ -120,3 +127,75 @@ export type TagsSelectizeItemProps = BaseWritableItemProps & {
 export type TextAreaItemProps = BaseWritableItemProps & {
   // type?: string // FIXME unused?
 }
+
+// FIELDS
+
+const ANY_WRITABLE_COMPONENTS = [
+  'AdressItem',
+  'CheckboxItem',
+  'FileItem',
+  'InputItem',
+  'SelectItem',
+  'TagsItem',
+  'TagsSelectizeItem',
+  'TextAreaItem',
+] as const
+
+export type AnyWritableComponents = (typeof ANY_WRITABLE_COMPONENTS)[number]
+type ItemComponentToItemProps = {
+  // WRITABLE
+  AdressItem: AdressItemProps
+  CheckboxItem: CheckboxItemProps
+  FileItem: FileItemProps
+  InputItem: InputItemProps
+  SelectItem: SelectItemProps
+  TagsItem: TagsItemProps
+  TagsSelectizeItem: TagsSelectizeItemProps
+  TextAreaItem: TextAreaItemProps
+}
+
+type FormFieldRules<MV extends any> = MV extends object
+  ? MV extends any[]
+    ? ValidationArgs<FormFieldRules<ArrInnerType<MV>>>
+    : ValidationArgs<MV | Partial<MV>>
+  : ValidationRuleCollection<MV>
+
+type BaseFormFieldComputedProps<MV extends any = any> = {
+  modelValue?: MV
+  validation?: BaseValidation
+}
+
+type BaseFormField<C extends AnyItemComponents> = {
+  component: C
+  hr?: boolean
+  id?: string
+  label?: string
+  props?: ItemComponentToItemProps[C]
+  readonly?: boolean
+  // FIXME compute visible JSExpression
+  visible?: boolean
+}
+
+export type FormField<
+  C extends AnyWritableComponents = AnyWritableComponents,
+  MV extends any = any,
+> = BaseFormField<C> & {
+  append?: string
+  asInputGroup?: boolean
+  description?: string
+  descriptionVariant?: StateVariant
+  labelFor?: string
+  link?:
+    | { text: string; name: RouteLocationRaw }
+    | { text: string; href: string }
+  props: ItemComponentToItemProps[C]
+  rules?: FormFieldRules<MV>
+  prepend?: string
+  readonly?: false
+}
+
+export type FormFieldProps<
+  C extends AnyWritableComponents,
+  MV extends any,
+> = Omit<FormField<C, MV>, 'hr' | 'visible' | 'readonly'> &
+  BaseFormFieldComputedProps<MV>

From 50fda7861dfbc5e824a039e68c0a7d9a1465fc71 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sat, 6 Jul 2024 12:26:06 +0200
Subject: [PATCH 089/275] refactor: FormFieldReadonly ts + composition

---
 .../components/globals/FormFieldReadonly.vue  | 34 +++++++++----------
 app/src/types/form.ts                         | 17 ++++++++++
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/app/src/components/globals/FormFieldReadonly.vue b/app/src/components/globals/FormFieldReadonly.vue
index 097034143..6214a32e5 100644
--- a/app/src/components/globals/FormFieldReadonly.vue
+++ b/app/src/components/globals/FormFieldReadonly.vue
@@ -1,27 +1,27 @@
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+  generic="C extends AnyWritableComponents, MV extends any"
+>
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type { Cols } from '@/types/commons'
+import type {
+  AnyWritableComponents,
+  FormFieldReadonlyProps,
+} from '@/types/form'
 
 defineOptions({
+  name: 'FormFieldReadonly',
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<{
-    label: string
-    component?: string
-    // FIXME modelValue? not a modelValue but idk
-    value?: any
-    cols?: Cols
-  }>(),
-  {
-    component: 'InputItem',
-    value: null,
-    cols: () => ({ md: 4, lg: 3 }),
-  },
-)
+const props = withDefaults(defineProps<FormFieldReadonlyProps<C, MV>>(), {
+  id: undefined,
+  modelValue: undefined,
+  cols: () => ({ md: 4, lg: 3 }),
+})
 
 const { t } = useI18n()
 
@@ -32,7 +32,7 @@ const cols = computed<Cols>(() => ({
 }))
 
 const text = computed(() => {
-  return parseValue(props.value)
+  return parseValue(props.modelValue)
 })
 
 function parseValue(value: any) {
@@ -43,7 +43,7 @@ function parseValue(value: any) {
   if (Array.isArray(value)) {
     value = value.length ? value.join(t('words.separator')) : null
   }
-  if ([null, undefined, ''].includes(props.value)) value = t('words.none')
+  if ([null, undefined, ''].includes(value)) value = t('words.none')
   return value
 }
 </script>
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 8e840bc09..b32fb6062 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -5,6 +5,8 @@ import type {
 } from '@vuelidate/core'
 import type { RouteLocationRaw } from 'vue-router'
 
+import type { Cols } from '@/types/commons'
+
 type StateValidation = false | null
 type StateVariant = 'success' | 'info' | 'warning' | 'danger'
 
@@ -194,8 +196,23 @@ export type FormField<
   readonly?: false
 }
 
+type FormFieldReadonly<
+  C extends AnyWritableComponents = AnyWritableComponents,
+> = BaseFormField<C> & {
+  label: string
+  cols?: Cols
+  readonly: true
+}
+
 export type FormFieldProps<
   C extends AnyWritableComponents,
   MV extends any,
 > = Omit<FormField<C, MV>, 'hr' | 'visible' | 'readonly'> &
   BaseFormFieldComputedProps<MV>
+
+export type FormFieldReadonlyProps<
+  C extends AnyWritableComponents,
+  MV extends any,
+> = Omit<FormFieldReadonly<C>, 'hr' | 'visible' | 'readonly'> & {
+  modelValue?: MV
+}

From 509f68e5d981a1d7470c985fea91d54ef8f85ef1 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sat, 6 Jul 2024 12:36:53 +0200
Subject: [PATCH 090/275] ts: add FormFieldDisplay types

---
 app/src/types/commons.ts |  6 +++++
 app/src/types/form.ts    | 50 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/app/src/types/commons.ts b/app/src/types/commons.ts
index f75f493c9..9a2accb7e 100644
--- a/app/src/types/commons.ts
+++ b/app/src/types/commons.ts
@@ -23,3 +23,9 @@ export type CustomRoute = {
   text: string
   icon?: string
 }
+
+// HELPERS
+
+export type ArrInnerType<T> = T extends (infer ElementType)[]
+  ? ElementType
+  : never
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index b32fb6062..bfe291e49 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -5,7 +5,7 @@ import type {
 } from '@vuelidate/core'
 import type { RouteLocationRaw } from 'vue-router'
 
-import type { Cols } from '@/types/commons'
+import type { ArrInnerType, Cols } from '@/types/commons'
 
 type StateValidation = false | null
 type StateVariant = 'success' | 'info' | 'warning' | 'danger'
@@ -142,9 +142,49 @@ const ANY_WRITABLE_COMPONENTS = [
   'TagsSelectizeItem',
   'TextAreaItem',
 ] as const
+const ANY_DISPLAY_COMPONENTS = [
+  'ButtonItem',
+  'DisplayTextItem',
+  'MarkdownItem',
+  'ReadOnlyAlertItem',
+] as const
 
+type AnyItemComponents = AnyDisplayComponents | AnyWritableComponents
+export type AnyDisplayComponents = (typeof ANY_DISPLAY_COMPONENTS)[number]
 export type AnyWritableComponents = (typeof ANY_WRITABLE_COMPONENTS)[number]
+
+export function isWritableComponent<MV extends any = any>(
+  field:
+    | FormField<AnyWritableComponents, MV>
+    | FormField
+    | FormFieldReadonly
+    | FormFieldDisplay,
+): field is
+  | FormField<AnyWritableComponents, MV>
+  | FormFieldReadonly<AnyWritableComponents> {
+  return ANY_WRITABLE_COMPONENTS.includes(
+    field.component as AnyWritableComponents,
+  )
+}
+
+export function isDisplayComponent(
+  field:
+    | FormField<AnyWritableComponents>
+    | FormField
+    | FormFieldReadonly
+    | FormFieldDisplay,
+): field is FormFieldDisplay {
+  return ANY_DISPLAY_COMPONENTS.includes(
+    field.component as AnyDisplayComponents,
+  )
+}
+
 type ItemComponentToItemProps = {
+  // DISPLAY
+  ButtonItem: ButtonItemProps
+  DisplayTextItem: DisplayTextItemProps
+  MarkdownItem: MarkdownItemProps
+  ReadOnlyAlertItem: ReadOnlyAlertItemProps
   // WRITABLE
   AdressItem: AdressItemProps
   CheckboxItem: CheckboxItemProps
@@ -204,6 +244,14 @@ type FormFieldReadonly<
   readonly: true
 }
 
+type FormFieldDisplay<C extends AnyDisplayComponents = AnyDisplayComponents> = {
+  component: C
+  props: ItemComponentToItemProps[C]
+  visible?: boolean
+  hr?: boolean
+  readonly?: true
+}
+
 export type FormFieldProps<
   C extends AnyWritableComponents,
   MV extends any,

From f8b7f89488d01dbfcdaec17fc75da8dc20f7aeb5 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 9 Jul 2024 18:24:08 +0200
Subject: [PATCH 091/275] feat: add FormFieldMultiple component to handle array
 form element

---
 .../components/globals/FormFieldMultiple.vue  | 232 ++++++++++++++++++
 1 file changed, 232 insertions(+)
 create mode 100644 app/src/components/globals/FormFieldMultiple.vue

diff --git a/app/src/components/globals/FormFieldMultiple.vue b/app/src/components/globals/FormFieldMultiple.vue
new file mode 100644
index 000000000..921d93ea7
--- /dev/null
+++ b/app/src/components/globals/FormFieldMultiple.vue
@@ -0,0 +1,232 @@
+<script
+  setup
+  lang="ts"
+  generic="C extends AnyWritableComponents, MV extends any[]"
+>
+import { computed, useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { omit } from '@/helpers/commons'
+import type { ArrInnerType } from '@/types/commons'
+import type {
+  AnyWritableComponents,
+  BaseItemComputedProps,
+  FormField,
+  FormFieldProps,
+} from '@/types/form'
+
+defineOptions({
+  name: 'FormField',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<
+    FormFieldProps<C, MV> & {
+      defaultValue: () => ArrInnerType<MV>
+      addBtnText: string
+    }
+  >(),
+  {
+    append: undefined,
+    asInputGroup: false,
+    description: undefined,
+    descriptionVariant: undefined,
+    id: undefined,
+    label: undefined,
+    labelFor: undefined,
+    link: undefined,
+    prepend: undefined,
+    rules: undefined,
+
+    modelValue: undefined,
+    validation: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: MV]
+}>()
+
+const slots = defineSlots<{
+  default?: (_: {
+    componentProps: FormField<C, ArrInnerType<MV>>['props'] &
+      BaseItemComputedProps<ArrInnerType<MV>>
+    index: number
+  }) => any
+  description?: () => any
+}>()
+
+const { t } = useI18n()
+
+const attrs = useAttrs()
+
+const computedAttrs = computed(() => {
+  const attrs_ = { ...omit(attrs, ['hr', 'readonly', 'visible']) }
+
+  if (props.label) {
+    const defaultAttrs = {
+      'label-cols-md': 4,
+      'label-cols-lg': 3,
+      'label-class': ['fw-bold', 'py-0'],
+    }
+
+    if (!('label-cols' in attrs_)) {
+      let attr: keyof typeof defaultAttrs
+      for (attr in defaultAttrs) {
+        if (!(attr in attrs_)) attrs_[attr] = defaultAttrs[attr]
+      }
+    } else if (!('label-class' in attrs_)) {
+      attrs_['label-class'] = defaultAttrs['label-class']
+    }
+  }
+
+  return attrs_
+})
+
+const id = computed(() => {
+  if (props.id) return props.id
+  return props.props?.id ? props.props?.id + '_group' : undefined
+})
+
+const error = computed(() => {
+  const v = props.validation
+  if (v && v.$dirty) {
+    return v.$errors.length ? { errors: v.$errors, $model: v.$model } : null
+  }
+  return null
+})
+
+const subProps = computed<FormFieldProps<C, ArrInnerType<MV>>[]>(() => {
+  return (
+    props.modelValue?.map((modelValue: ArrInnerType<MV>, i) => {
+      return {
+        props: {
+          ...props.props,
+          id: `${props.props.id}.${i}`,
+        },
+        validation: props.validation?.[i],
+        modelValue,
+        component: props.component,
+      }
+    }) || []
+  )
+})
+
+const state = computed(() => {
+  // Need to set state as null if no error, else component turn green
+  return error.value ? false : null
+})
+
+const errorMessage = computed(() => {
+  if (!error.value) return ''
+  const { errors, $model } = error.value
+  // FIXME maybe handle translation in validators directly
+  // https://vuelidate-next.netlify.app/advanced_usage.html#i18n-support
+
+  return errors
+    .map((err) => {
+      if (err) {
+        if (err.$validator === '$externalResults') return err.$message
+        return t('form_errors.' + err.$validator, {
+          value: $model,
+          ...err.$params,
+        })
+      }
+    })
+    .join('<br>')
+})
+
+function addElement() {
+  const value = [...(props?.modelValue || []), props.defaultValue()] as MV
+  emit('update:modelValue', value)
+
+  // FIXME: Focus newly inserted form item
+}
+
+function removeElement(index: number) {
+  if (!props.modelValue) return
+  const value = [...props.modelValue] as MV
+  value.splice(index, 1)
+  emit('update:modelValue', value)
+}
+
+function updateElement(index: number, newValue: ArrInnerType<MV>) {
+  if (!props.modelValue) return
+  const value = [...props.modelValue] as MV
+  value.splice(index, 1, newValue)
+  emit('update:modelValue', value)
+}
+</script>
+
+<template>
+  <BFormGroup v-bind="computedAttrs" :id="id" :label="label" :state="state">
+    <div v-for="(fieldProps, index) in subProps" :key="index" class="item">
+      <FormField
+        v-bind="fieldProps"
+        class="w-100 mb-3"
+        @update:model-value="updateElement(index, $event)"
+      >
+        <template v-if="slots.default" #default="componentProps">
+          <slot v-bind="{ componentProps, index }" />
+        </template>
+      </FormField>
+
+      <BButton variant="danger" @click="removeElement(index)">
+        <YIcon :title="$t('delete')" iname="trash-o" />
+        <span class="visually-hidden">{{ $t('delete') }}</span>
+      </BButton>
+    </div>
+
+    <BButton variant="success" @click="addElement()">
+      <YIcon iname="plus" /> {{ $t('user_emailaliases_add') }}
+    </BButton>
+
+    <template #invalid-feedback>
+      <span v-html="errorMessage" />
+    </template>
+
+    <template #description>
+      <slot name="description">
+        <!-- Render description -->
+        <template v-if="description || link">
+          <div class="d-flex">
+            <BLink
+              v-if="link"
+              :to="'name' in link ? link.name : undefined"
+              :href="'href' in link ? link.href : undefined"
+              class="ms-auto"
+            >
+              {{ link.text }}
+            </BLink>
+          </div>
+
+          <VueShowdown
+            v-if="description"
+            :markdown="description"
+            :class="{
+              ['alert p-1 px-2 alert-' + descriptionVariant]:
+                descriptionVariant,
+            }"
+          />
+        </template>
+      </slot>
+    </template>
+  </BFormGroup>
+</template>
+
+<style lang="scss" scoped>
+:deep(.invalid-feedback code) {
+  background-color: $gray-200;
+}
+
+.item {
+  display: flex;
+  justify-items: stretch;
+
+  .btn-danger {
+    align-self: flex-start;
+    margin-left: 0.5rem;
+  }
+}
+</style>

From 3c3f50ca6016cb8a77d4e25d96bc5dfc1526e175 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sat, 6 Jul 2024 12:48:15 +0200
Subject: [PATCH 092/275] refactor: CardForm ts + composition

---
 app/src/components/globals/CardForm.vue | 140 +++++++++++++++++++-----
 app/src/helpers/commons.ts              |   7 ++
 app/src/types/form.ts                   |  13 ++-
 3 files changed, 130 insertions(+), 30 deletions(-)

diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index 097d0d0f6..fe994787b 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -1,79 +1,161 @@
-<script setup lang="ts">
-import type { BaseValidation } from '@vuelidate/core'
-import { computed } from 'vue'
+<script
+  setup
+  lang="ts"
+  generic="
+    MV extends Obj,
+    FFD extends FormFieldDict<MV>,
+    V extends Validation<
+      ValidationArgs<unknown>,
+      { form: Ref<MV>; global: null }
+    >
+  "
+>
+import type { Validation, ValidationArgs } from '@vuelidate/core'
+import { computed, toValue } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import type { VueClass } from '@/types/commons'
+import { toEntries } from '@/helpers/commons'
+import type { Obj, VueClass } from '@/types/commons'
+import type {
+  AnyDisplayComponents,
+  AnyWritableComponents,
+  BaseItemComputedProps,
+  FormFieldDict,
+} from '@/types/form'
+import { isDisplayComponent, isWritableComponent } from '@/types/form'
 
 const props = withDefaults(
   defineProps<{
     id?: string
+    modelValue?: MV
+    fields?: FFD
+    validations?: V
     submitText?: string
-    validation?: BaseValidation
-    serverError?: string
     inline?: boolean
     formClasses?: VueClass
     noFooter?: boolean
+    hr?: boolean
   }>(),
   {
     id: 'ynh-form',
+    modelValue: undefined,
+    fields: undefined,
+    validations: undefined,
     submitText: undefined,
-    validation: undefined,
-    serverError: '',
     inline: false,
     formClasses: undefined,
     noFooter: false,
+    hr: false,
   },
 )
 
 const emit = defineEmits<{
   submit: [e: SubmitEvent]
+  'update:modelValue': [modelValue: MV]
 }>()
 
+const slots = defineSlots<
+  {
+    disclaimer?: any
+    default?: any
+    'server-error'?: any
+    buttons: any
+  } & {
+    [K in Extract<keyof MV, string> as `field:${K}`]?: (_: FFD[K]) => any
+  } & {
+    [K in Extract<keyof FFD, string> as `component:${K}`]?: (
+      _: FFD[K]['component'] extends AnyWritableComponents
+        ? FFD[K]['props'] & BaseItemComputedProps<MV[K]>
+        : FFD[K]['component'] extends AnyDisplayComponents
+          ? FFD[K]['props']
+          : never,
+    ) => any
+  }
+>()
+
 const { t } = useI18n()
 
-const errorFeedback = computed(() => {
-  const v = props.validation
-  return (
-    props.serverError ||
-    (v && v.$errors.length ? t('form_errors.invalid_form') : '')
-  )
+const globalErrorFeedback = computed(() => {
+  const v = props.validations
+  if (!v) return ''
+  const externalResults = toValue(v.global.$externalResults[0]?.$message)
+  return externalResults ?? (v.form.$error ? t('form_errors.invalid_form') : '')
 })
 
-function onSubmit(e: Event) {
-  const v = props.validation
-  if (v) {
-    v.$touch()
-    if (v.$pending || v.$errors.length) return
-  }
-  emit('submit', e as SubmitEvent)
+const fields = computed(() => (props.fields ? toEntries(props.fields) : []))
+
+function onModelUpdate(key: keyof MV, value: MV[keyof MV]) {
+  emit('update:modelValue', {
+    ...props.modelValue!,
+    [key]: value,
+  })
 }
 </script>
 
 <template>
-  <!-- FIXME inheritAttrs false? probably remove vbind instead -->
-  <YCard v-bind="$attrs" class="card-form">
+  <YCard class="card-form">
     <template #default>
       <slot name="disclaimer" />
 
-      {{ serverError }}
       <BForm
         :id="id"
         :inline="inline"
         :class="formClasses"
-        @submit.prevent.stop="onSubmit"
         novalidate
+        @submit.prevent.stop="emit('submit', $event as SubmitEvent)"
       >
-        <slot name="default" />
+        <slot name="default">
+          <template v-for="[key, fieldProps] in fields" :key="key">
+            <template v-if="fieldProps.visible ?? true">
+              <slot
+                v-if="isWritableComponent<MV[typeof key]>(fieldProps)"
+                :name="`field:${key}`"
+                v-bind="fieldProps"
+              >
+                <FormField
+                  v-if="!fieldProps.readonly"
+                  v-bind="fieldProps"
+                  :model-value="props.modelValue![key]"
+                  :validation="props.validations?.form[key]"
+                  @update:model-value="onModelUpdate(key, $event)"
+                >
+                  <template
+                    v-if="slots[`component:${key}`]"
+                    #default="childProps"
+                  >
+                    <slot :name="`component:${key}`" v-bind="childProps" />
+                  </template>
+                </FormField>
+                <FormFieldReadonly
+                  v-else
+                  v-bind="fieldProps"
+                  :model-value="props.modelValue![key]"
+                />
+              </slot>
+              <slot
+                v-else-if="isDisplayComponent(fieldProps)"
+                :name="`component:${key}`"
+                v-bind="fieldProps.props"
+              >
+                <Component
+                  :is="fieldProps.component"
+                  v-bind="fieldProps.props"
+                />
+              </slot>
+
+              <hr v-if="fieldProps.hr ?? hr" />
+            </template>
+          </template>
+        </slot>
 
         <slot name="server-error">
           <BAlert
             variant="danger"
             class="my-3"
             icon="ban"
-            :modelValue="errorFeedback !== ''"
+            :model-value="globalErrorFeedback !== ''"
           >
-            <div v-html="errorFeedback" />
+            <div v-html="globalErrorFeedback" />
           </BAlert>
         </slot>
       </BForm>
@@ -82,7 +164,7 @@ function onSubmit(e: Event) {
     <template v-if="!noFooter" #buttons>
       <slot name="buttons">
         <BButton type="submit" variant="success" :form="id">
-          {{ submitText ? submitText : $t('save') }}
+          {{ submitText ?? $t('save') }}
         </BButton>
       </slot>
     </template>
diff --git a/app/src/helpers/commons.ts b/app/src/helpers/commons.ts
index 53c50501a..669e3c638 100644
--- a/app/src/helpers/commons.ts
+++ b/app/src/helpers/commons.ts
@@ -145,6 +145,13 @@ export function getFileContent(
   })
 }
 
+export function toEntries<T extends Record<PropertyKey, unknown>>(
+  obj: T,
+): { [K in keyof T]: [K, T[K]] }[keyof T][] {
+  return Object.entries(obj) as { [K in keyof T]: [K, T[K]] }[keyof T][]
+}
+}
+
 export function omit<T extends Obj, K extends (keyof T)[]>(
   obj: T,
   keys: K,
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index bfe291e49..37c8802f6 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -5,7 +5,7 @@ import type {
 } from '@vuelidate/core'
 import type { RouteLocationRaw } from 'vue-router'
 
-import type { ArrInnerType, Cols } from '@/types/commons'
+import type { ArrInnerType, Cols, Obj } from '@/types/commons'
 
 type StateValidation = false | null
 type StateVariant = 'success' | 'info' | 'warning' | 'danger'
@@ -264,3 +264,14 @@ export type FormFieldReadonlyProps<
 > = Omit<FormFieldReadonly<C>, 'hr' | 'visible' | 'readonly'> & {
   modelValue?: MV
 }
+
+export type FormFieldDict<T extends Obj = Obj> = {
+  [k in keyof T | string]: k extends keyof T
+    ?
+        | FormField<AnyWritableComponents, T[k]>
+        | FormFieldReadonly<AnyWritableComponents>
+    :
+        | FormField<AnyWritableComponents>
+        | FormFieldReadonly<AnyWritableComponents>
+        | FormFieldDisplay<AnyDisplayComponents>
+}

From 25482b67caae86b3dbe76f686371eee897ded819 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sat, 6 Jul 2024 15:57:47 +0200
Subject: [PATCH 093/275] refactor: add useInitialQueries composable to replace
 ViewBase queries handling

---
 app/src/components/globals/ViewBase.vue  | 64 +++++-------------------
 app/src/composables/useInitialQueries.ts | 41 +++++++++++++++
 2 files changed, 53 insertions(+), 52 deletions(-)
 create mode 100644 app/src/composables/useInitialQueries.ts

diff --git a/app/src/components/globals/ViewBase.vue b/app/src/components/globals/ViewBase.vue
index e30138e5e..ca870c6bb 100644
--- a/app/src/components/globals/ViewBase.vue
+++ b/app/src/components/globals/ViewBase.vue
@@ -1,22 +1,15 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
-import { computed, ref } from 'vue'
 
-import api from '@/api'
-
-// FIXME type queries
-const props = withDefaults(
+defineOptions({ inheritAttrs: false })
+withDefaults(
   defineProps<{
-    queries?: any[]
-    queriesWait?: boolean
-    skeleton?: string | Component
     loading?: boolean
+    skeleton?: string | Component
   }>(),
   {
-    queries: undefined,
-    queriesWait: false,
-    skeleton: undefined,
-    loading: undefined,
+    loading: false,
+    skeleton: 'CardFormSkeleton',
   },
 )
 
@@ -24,44 +17,11 @@ const slots = defineSlots<{
   'top-bar-group-left': any
   'top-bar-group-right': any
   'top-bar': any
-  top(props: { loading: boolean }): any
-  default(props: { loading: boolean }): any
-  bot(props: { loading: boolean }): any
+  top: any
+  default: any
+  bot: any
   skeleton: any
 }>()
-
-const emit = defineEmits<{
-  'queries-response': any[]
-}>()
-
-defineExpose({ fetchQueries })
-
-const fallbackLoading = ref(
-  props.loading === undefined && props.queries !== undefined ? true : null,
-)
-
-const isLoading = computed(() => {
-  if (props.loading !== undefined) return props.loading
-  return fallbackLoading.value
-})
-
-function fetchQueries({ triggerLoading = false } = {}) {
-  if (triggerLoading) {
-    fallbackLoading.value = true
-  }
-
-  return api
-    .fetchAll(props.queries, { wait: props.queriesWait, initial: true })
-    .then((responses) => {
-      emit('queries-response', ...responses)
-      fallbackLoading.value = false
-      return responses
-    })
-}
-
-if (props.queries) {
-  fetchQueries()
-}
 </script>
 
 <template>
@@ -76,9 +36,9 @@ if (props.queries) {
     </TopBar>
     <slot v-else name="top-bar" />
 
-    <slot name="top" v-bind="{ loading: isLoading }" />
+    <slot name="top" />
 
-    <BSkeletonWrapper :loading="isLoading">
+    <BSkeletonWrapper :loading="loading">
       <template #loading>
         <slot name="skeleton">
           <Component :is="skeleton" />
@@ -87,10 +47,10 @@ if (props.queries) {
 
       <!-- Empty div to be able to receive multiple components -->
       <div>
-        <slot name="default" v-bind="{ loading: isLoading }" />
+        <slot name="default" />
       </div>
     </BSkeletonWrapper>
 
-    <slot name="bot" v-bind="{ loading: isLoading }" />
+    <slot name="bot" />
   </div>
 </template>
diff --git a/app/src/composables/useInitialQueries.ts b/app/src/composables/useInitialQueries.ts
new file mode 100644
index 000000000..b116a1bbd
--- /dev/null
+++ b/app/src/composables/useInitialQueries.ts
@@ -0,0 +1,41 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue'
+import { ref, toValue } from 'vue'
+
+import type { APIQuery } from '@/api/api'
+import api from '@/api/api'
+import type { Obj } from '@/types/commons'
+
+export function useInitialQueries<
+  ResponsesType extends (Obj | string)[] = Obj[],
+>(
+  queries: MaybeRefOrGetter<APIQuery[]> | ComputedRef<APIQuery[]>,
+  {
+    onQueriesResponse,
+    wait = false,
+  }: {
+    onQueriesResponse?: (...responses: ResponsesType) => Promise<void> | void
+    wait?: boolean
+  } = {},
+) {
+  const loading = ref(true)
+  const responses: Ref<ResponsesType | null> = ref(null)
+  // FIXME watch `queries` to call on change?
+
+  function call(triggerLoading = true) {
+    if (triggerLoading) loading.value = true
+    return api
+      .fetchAll(toValue(queries), { wait, initial: true })
+      .then(async (responses_) => {
+        responses.value = responses_ as ResponsesType
+        if (onQueriesResponse) {
+          await onQueriesResponse(...(responses_ as ResponsesType))
+        }
+        loading.value = false
+        return responses
+      })
+  }
+
+  call()
+
+  return { loading, responses, refetch: call }
+}

From 3054c3ec5ca0d74382068faf538f8033380ec5b5 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sat, 6 Jul 2024 16:03:47 +0200
Subject: [PATCH 094/275] refactor: use useInitialQueries in views

---
 app/src/views/app/AppCatalog.vue          | 28 +++++++++-------
 app/src/views/app/AppInfo.vue             | 41 +++++++++--------------
 app/src/views/app/AppInstall.vue          | 17 ++++++----
 app/src/views/app/AppList.vue             | 19 ++++++-----
 app/src/views/backup/BackupCreate.vue     | 22 ++++++------
 app/src/views/backup/BackupInfo.vue       | 11 ++++--
 app/src/views/backup/BackupList.vue       | 16 ++++-----
 app/src/views/diagnosis/DiagnosisView.vue | 26 ++++++--------
 app/src/views/domain/DomainAdd.vue        |  5 +--
 app/src/views/domain/DomainDns.vue        | 16 ++++-----
 app/src/views/domain/DomainInfo.vue       | 29 +++++++---------
 app/src/views/domain/DomainList.vue       |  9 +++--
 app/src/views/group/GroupList.vue         | 33 +++++++++---------
 app/src/views/service/ServiceInfo.vue     | 31 ++++++++---------
 app/src/views/service/ServiceList.vue     | 16 +++++----
 app/src/views/tool/ToolFirewall.vue       | 22 +++++-------
 app/src/views/tool/ToolLog.vue            | 21 +++++-------
 app/src/views/tool/ToolLogs.vue           | 14 +++++---
 app/src/views/tool/ToolMigrations.vue     | 30 ++++++++---------
 app/src/views/tool/ToolSettings.vue       | 19 ++++-------
 app/src/views/update/SystemUpdate.vue     | 24 ++++++-------
 app/src/views/user/UserCreate.vue         | 18 +++++-----
 app/src/views/user/UserEdit.vue           | 21 ++++++------
 app/src/views/user/UserInfo.vue           |  8 ++---
 app/src/views/user/UserList.vue           | 11 +++---
 25 files changed, 245 insertions(+), 262 deletions(-)

diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 406a6bb25..bff18bba9 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -8,6 +8,7 @@ import CardDeckFeed from '@/components/CardDeckFeed.vue'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { randint } from '@/helpers/commons'
 import { appRepoUrl, required } from '@/helpers/validators'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 
 const props = withDefaults(
   defineProps<{
@@ -28,8 +29,10 @@ const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
 const modalConfirm = useAutoModal()
-
-const queries = [['GET', 'apps/catalog?full&with_categories&with_antifeatures']]
+const { loading } = useInitialQueries(
+  [['GET', 'apps/catalog?full&with_categories&with_antifeatures']],
+  { onQueriesResponse },
+)
 
 const apps = ref()
 const selectedApp = ref()
@@ -96,10 +99,10 @@ const subtags = computed(() => {
   return null
 })
 
-function onQueriesResponse(data) {
-  const apps = []
-  for (const key in data.apps) {
-    const app = data.apps[key]
+function onQueriesResponse(catalog: any) {
+  const apps_ = []
+  for (const key in catalog.apps) {
+    const app = catalog.apps[key]
     app.isInstallable =
       !app.installed || app.manifest.integration.multi_instance
     app.working = app.state === 'working'
@@ -124,12 +127,12 @@ function onQueriesResponse(data) {
     ]
       .join(' ')
       .toLowerCase()
-    apps.push(app)
+    apps_.push(app)
   }
-  apps.value = apps.sort((a, b) => (a.id > b.id ? 1 : -1))
+  apps.value = apps_.sort((a, b) => (a.id > b.id ? 1 : -1))
 
   // CATEGORIES
-  data.categories.forEach(({ title, id, icon, subtags, description }) => {
+  catalog.categories.forEach(({ title, id, icon, subtags, description }) => {
     categories.push({
       text: title,
       value: id,
@@ -139,7 +142,7 @@ function onQueriesResponse(data) {
     })
   })
   antifeatures.value = Object.fromEntries(
-    data.antifeatures.map((af) => [af.id, af]),
+    catalog.antifeatures.map((af) => [af.id, af]),
   )
 }
 
@@ -180,11 +183,10 @@ async function onCustomInstallClick() {
 
 <template>
   <ViewSearch
-    :items="apps"
     :filtered-items="filteredApps"
+    :items="apps"
     items-name="apps"
-    :queries="queries"
-    @queries-response="onQueriesResponse"
+    :loading="loading"
   >
     <template #top-bar>
       <div id="view-top-bar">
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 7107cda53..255bbe111 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -7,8 +7,8 @@ import { useRoute, useRouter } from 'vue-router'
 import api, { objectToParams } from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
 import ConfigPanels from '@/components/ConfigPanels.vue'
-import type ViewBase from '@/components/globals/ViewBase.vue'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import { isEmptyValue } from '@/helpers/commons'
 import { humanPermissionName } from '@/helpers/filters/human'
 import { helpers, required } from '@/helpers/validators'
@@ -18,7 +18,6 @@ import {
   formatYunoHostConfigPanels,
 } from '@/helpers/yunohostArguments'
 import { useStoreGetters } from '@/store/utils'
-import type { Obj } from '@/types/commons'
 
 const props = defineProps<{
   id: string
@@ -30,7 +29,6 @@ const router = useRouter()
 const modalConfirm = useAutoModal()
 
 const { domains } = useStoreGetters()
-const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
 
 // FIXME
 type AppForm = {
@@ -51,13 +49,15 @@ const rules = computed(() => ({
 }))
 const externalResults = reactive({})
 const v$ = useVuelidate(rules, form, { $externalResults: externalResults })
+const { loading, refetch } = useInitialQueries(
+  [
+    ['GET', `apps/${props.id}?full`],
+    ['GET', { uri: 'users/permissions?full', storeKey: 'permissions' }],
+    ['GET', { uri: 'domains' }],
+  ],
+  { onQueriesResponse },
+)
 
-const queries = [
-  ['GET', `apps/${props.id}?full`],
-  ['GET', { uri: 'users/permissions?full', storeKey: 'permissions' }],
-  ['GET', { uri: 'domains' }],
-]
-const loading = ref(true)
 const app = ref()
 const purge = ref(false)
 const config_panel_err = ref(null)
@@ -97,7 +97,7 @@ function appLinksIcons(linkType) {
   return linksIcons[linkType]
 }
 
-async function onQueriesResponse(app_: Obj) {
+async function onQueriesResponse(app_: any) {
   // const form = { labels: [] }
 
   const mainPermission = app_.permissions[props.id + '.main']
@@ -224,7 +224,6 @@ async function onQueriesResponse(app_: Obj) {
         config_panel_err.value = err.message
       })
   }
-  loading.value = false
 }
 
 async function onConfigSubmit({ id, form, action, name }) {
@@ -245,10 +244,7 @@ async function onConfigSubmit({ id, form, action, name }) {
         name: props.id,
       },
     )
-    .then(() => {
-      loading.value = true
-      viewElem.value!.fetchQueries()
-    })
+    .then(() => refetch())
     .catch((err: APIError) => {
       if (!(err instanceof APIBadRequestError)) throw err
       const panel = config.value.panels.find((panel) => panel.id === id)!
@@ -270,7 +266,7 @@ function changeLabel(permName, data) {
       prevName: app.value.label,
       nextName: data.label,
     })
-    .then(() => viewElem.value!.fetchQueries())
+    .then(() => refetch(false))
 }
 
 async function changeUrl() {
@@ -284,7 +280,7 @@ async function changeUrl() {
       { domain, path: '/' + path },
       { key: 'apps.change_url', name: app.value.label },
     )
-    .then(() => viewElem.value!.fetchQueries())
+    .then(() => refetch(false))
 }
 
 async function setAsDefaultDomain(undo = false) {
@@ -301,7 +297,7 @@ async function setAsDefaultDomain(undo = false) {
         domain: app.value.domain,
       },
     )
-    .then(() => viewElem.value!.fetchQueries())
+    .then(() => refetch(false))
 }
 
 async function dismissNotification(name: string) {
@@ -311,7 +307,7 @@ async function dismissNotification(name: string) {
       {},
       { key: 'apps.dismiss_notification', name: app.value.label },
     )
-    .then(() => viewElem.value!.fetchQueries())
+    .then(() => refetch(false))
 }
 
 async function uninstall() {
@@ -328,12 +324,7 @@ async function uninstall() {
 </script>
 
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    :loading="loading"
-    ref="viewElem"
-  >
+  <ViewBase :loading="loading">
     <YAlert
       v-if="
         app &&
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index bd27bae23..b327d7c61 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -7,6 +7,7 @@ import { useRoute, useRouter } from 'vue-router'
 import api, { objectToParams } from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import {
   formatFormData,
   formatI18nField,
@@ -27,11 +28,13 @@ const validations = ref({})
 const rules = computed(() => validations)
 const externalResults = reactive({})
 const v$ = useVuelidate(rules, form, { $externalResults: externalResults })
-
-const queries = [
-  ['GET', 'apps/catalog?full&with_categories&with_antifeatures'],
-  ['GET', `apps/manifest?app=${props.id}&with_screenshot`],
-]
+const { loading } = useInitialQueries(
+  [
+    ['GET', 'apps/catalog?full&with_categories&with_antifeatures'],
+    ['GET', `apps/manifest?app=${props.id}&with_screenshot`],
+  ],
+  { onQueriesResponse },
+)
 
 // FIXME
 const app = ref(undefined)
@@ -54,7 +57,7 @@ function appLinksIcons(linkType) {
   return linksIcons[linkType]
 }
 
-function onQueriesResponse(catalog, _app) {
+function onQueriesResponse(catalog: any, _app: any) {
   const antifeaturesList = Object.fromEntries(
     catalog.antifeatures.map((af) => [af.id, af]),
   )
@@ -211,7 +214,7 @@ async function performInstall() {
 </script>
 
 <template>
-  <ViewBase :queries="queries" @queries-response="onQueriesResponse">
+  <ViewBase :loading="loading">
     <template v-if="app">
       <section class="border rounded p-3 mb-4">
         <div class="d-md-flex align-items-center mb-4">
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index b5bd93cea..718693514 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 
-const queries = [['GET', 'apps?full']]
+import { useInitialQueries } from '@/composables/useInitialQueries'
+
+const { loading } = useInitialQueries([['GET', 'apps?full']], {
+  onQueriesResponse,
+})
 const search = ref('')
 const apps = ref()
 
@@ -17,13 +21,13 @@ const filteredApps = computed(() => {
   return filtered.length ? filtered : null
 })
 
-function onQueriesResponse({ apps }) {
-  if (apps.length === 0) {
+function onQueriesResponse(data: any) {
+  if (data.apps.length === 0) {
     apps.value = null
     return
   }
 
-  apps.value = apps
+  apps.value = data.apps
     .map(({ id, name, description, manifest }) => {
       return { id, name: manifest.name, label: name, description }
     })
@@ -36,11 +40,10 @@ function onQueriesResponse({ apps }) {
 <template>
   <ViewSearch
     v-model:search="search"
+    :filtered-items="filteredApps"
     items-name="installed_apps"
     :items="apps"
-    :filtered-items="filteredApps"
-    :queries="queries"
-    @queries-response="onQueriesResponse"
+    :loading="loading"
   >
     <template #top-bar-buttons>
       <BButton variant="success" :to="{ name: 'app-catalog' }">
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index 0e0fac103..993601bd8 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 
 const props = defineProps<{
   id: string
@@ -11,11 +12,14 @@ const props = defineProps<{
 
 const { t } = useI18n()
 const router = useRouter()
+const { loading } = useInitialQueries(
+  [
+    ['GET', 'hooks/backup'],
+    ['GET', 'apps?with_backup'],
+  ],
+  { onQueriesResponse },
+)
 
-const queries = [
-  ['GET', 'hooks/backup'],
-  ['GET', 'apps?with_backup'],
-]
 const selected = ref<string[]>([])
 const system = ref()
 const apps = ref()
@@ -40,10 +44,10 @@ function formatHooks(hooks) {
   return data
 }
 
-function onQueriesResponse({ hooks }, { apps }) {
+function onQueriesResponse({ hooks }: any, { apps: apps_ }: any) {
   system.value = formatHooks(hooks)
   // transform app array into literal object to match hooks data structure
-  apps.value = apps.reduce((obj, app) => {
+  apps.value = apps_.reduce((obj, app) => {
     obj[app.id] = app
     return obj
   }, {})
@@ -79,11 +83,7 @@ function createBackup() {
 </script>
 
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    skeleton="CardListSkeleton"
-  >
+  <ViewBase :loading="loading" skeleton="CardListSkeleton">
     <!-- FIXME switch to <CardForm> ? -->
     <YCard :title="$t('backup_create')" icon="archive" no-body>
       <BFormCheckboxGroup
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index 7660e3ae1..209b20fe4 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -2,10 +2,12 @@
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
 
 import api from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import { isEmptyValue } from '@/helpers/commons'
 import { readableDate } from '@/helpers/filters/date'
 import { humanSize } from '@/helpers/filters/human'
@@ -19,8 +21,11 @@ const { t } = useI18n()
 const router = useRouter()
 const store = useStore()
 const modalConfirm = useAutoModal()
+const { loading } = useInitialQueries(
+  [['GET', `backups/${props.name}?with_details`]],
+  { onQueriesResponse },
+)
 
-const queries = [['GET', `backups/${props.name}?with_details`]]
 const selected = ref<string[]>([])
 const error = ref('')
 const isValid = ref<boolean | null>(null)
@@ -54,7 +59,7 @@ function formatHooks(hooks) {
   return data
 }
 
-function onQueriesResponse(data) {
+function onQueriesResponse(data: any) {
   infos.value = {
     name: props.name,
     created_at: data.created_at,
@@ -132,7 +137,7 @@ function downloadBackup() {
 </script>
 
 <template>
-  <ViewBase :queries="queries" @queries-response="onQueriesResponse">
+  <ViewBase :loading="loading">
     <!-- BACKUP INFO -->
     <YCard :title="$t('infos')" icon="info-circle" button-unbreak="sm">
       <template #header-buttons>
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index cd9da0ac8..4242249e9 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -1,18 +1,20 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import { distanceToNow, readableDate } from '@/helpers/filters/date'
 import { humanSize } from '@/helpers/filters/human'
-import type { Obj } from '@/types/commons'
 
 const props = defineProps<{
   id: string
 }>()
 
-const queries = [['GET', 'backups?with_info']]
-const archives = ref<Obj[] | null>(null)
+const { loading } = useInitialQueries([['GET', 'backups?with_info']], {
+  onQueriesResponse,
+})
+const archives = ref<any[] | null>(null)
 
-function onQueriesResponse(data) {
+function onQueriesResponse(data: any) {
   const archives_ = Object.entries(data.archives)
   if (archives_.length) {
     archives.value = archives_
@@ -28,11 +30,7 @@ function onQueriesResponse(data) {
 </script>
 
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    skeleton="ListGroupSkeleton"
-  >
+  <ViewBase :loading="loading" skeleton="ListGroupSkeleton">
     <template #top>
       <TopBar
         :button="{
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 7518d79cf..fc1b693d5 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -2,22 +2,23 @@
 import { ref } from 'vue'
 
 import api from '@/api'
-import type ViewBase from '@/components/globals/ViewBase.vue'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import { distanceToNow } from '@/helpers/filters/date'
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 import { useStoreGetters } from '@/store/utils'
 
-const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
-
-const queries = [
-  ['PUT', 'diagnosis/run?except_if_never_ran_yet', {}, 'diagnosis.run'],
-  ['GET', 'diagnosis?full'],
-]
+const { loading, refetch } = useInitialQueries(
+  [
+    ['PUT', 'diagnosis/run?except_if_never_ran_yet', {}, 'diagnosis.run'],
+    ['GET', 'diagnosis?full'],
+  ],
+  { wait: true, onQueriesResponse },
+)
 const { dark } = useStoreGetters()
 
 const reports = ref()
 
-function onQueriesResponse(_, reportsData) {
+function onQueriesResponse(_: any, reportsData: any) {
   if (reportsData === null) {
     reports.value = null
     return
@@ -65,7 +66,7 @@ function runDiagnosis({ id = null, description } = {}) {
       key: 'diagnosis.run' + (id !== null ? '_specific' : ''),
       description,
     })
-    .then(() => viewElem.value!.fetchQueries())
+    .then(() => refetch(false))
 }
 
 function toggleIgnoreIssue(action, report, item) {
@@ -99,12 +100,7 @@ function shareLogs() {
 </script>
 
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    queries-wait
-    ref="viewElem"
-  >
+  <ViewBase :loading="loading">
     <template #top-bar-group-right>
       <BButton @click="shareLogs" variant="success">
         <YIcon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/domain/DomainAdd.vue
index 512821077..64cdebc71 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -5,12 +5,13 @@ import { useStore } from 'vuex'
 
 import api from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import { DomainForm } from '@/views/_partials'
 
 const router = useRouter()
 const store = useStore()
 
-const queries = [['GET', { uri: 'domains' }]]
+const { loading } = useInitialQueries([['GET', { uri: 'domains' }]])
 const serverError = ref('')
 
 function onSubmit(data) {
@@ -28,7 +29,7 @@ function onSubmit(data) {
 </script>
 
 <template>
-  <ViewBase :queries="queries" skeleton="CardFormSkeleton">
+  <ViewBase :loading="loading" skeleton="CardFormSkeleton">
     <DomainForm
       :title="$t('domain_add')"
       :server-error="serverError"
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index 2fc711802..0e81744b2 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n'
 import api from '@/api'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { isEmptyValue } from '@/helpers/commons'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 
 const props = defineProps<{
   name: string
@@ -12,9 +13,11 @@ const props = defineProps<{
 
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
+const { loading } = useInitialQueries(
+  [['GET', `domains/${props.name}/dns/suggest`]],
+  { onQueriesResponse },
+)
 
-const queries = [['GET', `domains/${props.name}/dns/suggest`]]
-const loading = ref(true)
 const showAutoConfigCard = ref(true)
 const showManualConfigCard = ref(false)
 const dnsConfig = ref('')
@@ -25,7 +28,7 @@ const force = ref(null)
 
 getDnsChanges()
 
-function onQueriesResponse(suggestedConfig) {
+function onQueriesResponse(suggestedConfig: any) {
   dnsConfig.value = suggestedConfig
 }
 
@@ -129,12 +132,7 @@ async function pushDnsChanges() {
 </script>
 
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    :loading="loading"
-    skeleton="CardInfoSkeleton"
-  >
+  <ViewBase :loading="loading" skeleton="CardInfoSkeleton">
     <section v-if="showAutoConfigCard" class="panel-section">
       <BCardTitle title-tag="h3">
         {{ $t('domain.dns.auto_config') }}
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 8cc6dd220..724c6bc37 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -6,8 +6,8 @@ import { useStore } from 'vuex'
 
 import api, { objectToParams } from '@/api'
 import ConfigPanels from '@/components/ConfigPanels.vue'
-import type ViewBase from '@/components/globals/ViewBase.vue'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import {
   formatFormData,
   formatYunoHostConfigPanels,
@@ -24,16 +24,16 @@ const router = useRouter()
 const route = useRoute()
 const store = useStore()
 const modalConfirm = useAutoModal()
-
-const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
+const { loading, refetch } = useInitialQueries(
+  [
+    ['GET', { uri: 'domains', storeKey: 'domains' }],
+    ['GET', { uri: 'domains', storeKey: 'domains_details', param: props.name }],
+    ['GET', `domains/${props.name}/config?full`],
+  ],
+  { onQueriesResponse },
+)
 
 const { mainDomain } = useStoreGetters()
-
-const queries = [
-  ['GET', { uri: 'domains', storeKey: 'domains' }],
-  ['GET', { uri: 'domains', storeKey: 'domains_details', param: props.name }],
-  ['GET', `domains/${props.name}/config?full`],
-]
 const config = ref({})
 const externalResults = reactive({})
 const unsubscribeDomainFromDyndns = ref(false)
@@ -80,7 +80,7 @@ const isMainDynDomain = computed(() => {
   )
 })
 
-function onQueriesResponse(domains, domain, config_) {
+function onQueriesResponse(domains: any, domain: any, config_: any) {
   config.value = formatYunoHostConfigPanels(config_)
 }
 
@@ -102,7 +102,7 @@ async function onConfigSubmit({ id, form, action, name }) {
         name: props.name,
       },
     )
-    .then(() => viewElem.value!.fetchQueries({ triggerLoading: true }))
+    .then(() => refetch())
     .catch((err) => {
       if (err.name !== 'APIBadRequestError') throw err
       const panel = config.value.panels.find((panel) => panel.id === id)
@@ -150,12 +150,7 @@ async function setAsDefaultDomain() {
 </script>
 
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    ref="viewElem"
-    skeleton="CardListSkeleton"
-  >
+  <ViewBase :loading="loading" skeleton="CardListSkeleton">
     <!-- INFO CARD -->
     <YCard v-if="domain" :title="name" icon="globe">
       <template v-if="isMainDomain" #header-next>
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 8140a63e6..e4fa3aba0 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -3,11 +3,14 @@ import { useStoreGetters } from '@/store/utils'
 import { computed, ref } from 'vue'
 
 import RecursiveListGroup from '@/components/RecursiveListGroup.vue'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import type { TreeRootNode } from '@/helpers/data/tree'
 
 const { domains, mainDomain, domainsTree } = useStoreGetters()
+const { loading } = useInitialQueries([
+  ['GET', { uri: 'domains', storeKey: 'domains' }],
+])
 
-const queries = [['GET', { uri: 'domains', storeKey: 'domains' }]]
 const search = ref('')
 
 const tree = computed(() => {
@@ -31,10 +34,10 @@ const hasFilteredItems = computed(() => {
   <ViewSearch
     id="domain-list"
     v-model:search="search"
+    :filtered-items="hasFilteredItems"
     :items="domains"
     items-name="domains"
-    :queries="queries"
-    :filtered-items="hasFilteredItems"
+    :loading="loading"
   >
     <template #top-bar-buttons>
       <BButton variant="success" :to="{ name: 'domain-add' }">
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 350e1e0db..8e648e6a6 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n'
 import api from '@/api'
 import TagsSelectizeItem from '@/components/globals/formItems/TagsSelectizeItem.vue'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import { isEmptyValue } from '@/helpers/commons'
 
 // TODO add global search with type (search by: group, user, permission)
@@ -12,18 +13,21 @@ import { isEmptyValue } from '@/helpers/commons'
 
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
-
-const queries = [
-  ['GET', { uri: 'users' }],
+const { loading } = useInitialQueries(
   [
-    'GET',
-    {
-      uri: 'users/groups?full&include_primary_groups',
-      storeKey: 'groups',
-    },
+    ['GET', { uri: 'users' }],
+    [
+      'GET',
+      {
+        uri: 'users/groups?full&include_primary_groups',
+        storeKey: 'groups',
+      },
+    ],
+    ['GET', { uri: 'users/permissions?full', storeKey: 'permissions' }],
   ],
-  ['GET', { uri: 'users/permissions?full', storeKey: 'permissions' }],
-]
+  { onQueriesResponse },
+)
+
 const search = ref('')
 const permissions = ref()
 const permissionsOptions = ref()
@@ -45,7 +49,7 @@ const filteredGroups = computed(() => {
   return isEmptyValue(filtered) ? null : filtered
 })
 
-function onQueriesResponse(users, allGroups, permsDict) {
+function onQueriesResponse(users: any, allGroups: any, permsDict: any) {
   // Do not use computed properties to get values from the store here to avoid auto
   // updates while modifying values.
   const permissions_ = Object.entries(permsDict).map(([id, value]) => ({
@@ -182,12 +186,11 @@ async function deleteGroup(groupName) {
 
 <template>
   <ViewSearch
-    items-name="groups"
     v-model:search="search"
-    :items="primaryGroups"
     :filtered-items="filteredGroups"
-    :queries="queries"
-    @queries-response="onQueriesResponse"
+    :items="primaryGroups"
+    items-name="groups"
+    :loading="loading"
     skeleton="CardFormSkeleton"
   >
     <template #top-bar-buttons>
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index afc808c6e..317e08e90 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -3,8 +3,8 @@ import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import api from '@/api'
-import type ViewBase from '@/components/globals/ViewBase.vue'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import { distanceToNow } from '@/helpers/filters/date'
 
 const props = defineProps<{
@@ -13,12 +13,14 @@ const props = defineProps<{
 
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
-const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
+const { loading, refetch } = useInitialQueries(
+  [
+    ['GET', 'services/' + props.name],
+    ['GET', `services/${props.name}/log?number=50`],
+  ],
+  { onQueriesResponse },
+)
 
-const queries = [
-  ['GET', 'services/' + props.name],
-  ['GET', `services/${props.name}/log?number=50`],
-]
 const infos = ref()
 const uptime = ref()
 const isCritical = ref()
@@ -27,8 +29,8 @@ const action = ref()
 
 function onQueriesResponse(
   // eslint-disable-next-line
-  { status, description, start_on_boot, last_state_change, configuration },
-  logs,
+  { status, description, start_on_boot, last_state_change, configuration }: any,
+  logs_: any,
 ) {
   isCritical.value = ['nginx', 'ssh', 'slapd', 'yunohost-api'].includes(
     props.name,
@@ -37,14 +39,14 @@ function onQueriesResponse(
   uptime.value = last_state_change === 'unknown' ? 0 : last_state_change
   infos.value = { description, status, start_on_boot, configuration }
 
-  logs.value = Object.keys(logs)
+  logs.value = Object.keys(logs_)
     .sort((prev, curr) => {
       if (prev === 'journalctl') return -1
       else if (curr === 'journalctl') return 1
       else if (prev < curr) return -1
       else return 1
     })
-    .map((filename) => ({ content: logs[filename].join('\n'), filename }))
+    .map((filename) => ({ content: logs_[filename].join('\n'), filename }))
 }
 
 async function updateService(action) {
@@ -59,7 +61,7 @@ async function updateService(action) {
       {},
       { key: 'services.' + action, name: props.name },
     )
-    .then(() => viewElem.value!.fetchQueries())
+    .then(() => refetch(false))
 }
 
 function shareLogs() {
@@ -85,12 +87,7 @@ function shareLogs() {
 </script>
 
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    ref="viewElem"
-    skeleton="CardInfoSkeleton"
-  >
+  <ViewBase :loading="loading" skeleton="CardInfoSkeleton">
     <!-- INFO CARD -->
     <YCard :title="name" icon="info-circle" button-unbreak="sm">
       <template #header-buttons>
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 70b05ffad..6c421ce32 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import { distanceToNow } from '@/helpers/filters/date'
 
-const queries = [['GET', 'services']]
+const { loading } = useInitialQueries([['GET', 'services']], {
+  onQueriesResponse,
+})
 const search = ref('')
 const services = ref()
 
@@ -15,11 +18,11 @@ const filteredServices = computed(() => {
   return services_.length ? services_ : null
 })
 
-function onQueriesResponse(services) {
-  services.value = Object.keys(services)
+function onQueriesResponse(services_: any) {
+  services.value = Object.keys(services_)
     .sort()
     .map((name) => {
-      const service = services[name]
+      const service = services_[name]
       if (service.last_state_change === 'unknown') {
         service.last_state_change = 0
       }
@@ -32,11 +35,10 @@ function onQueriesResponse(services) {
   <ViewSearch
     id="service-list"
     v-model:search="search"
-    :items="services"
     :filtered-items="filteredServices"
+    :items="services"
     items-name="services"
-    :queries="queries"
-    @queries-response="onQueriesResponse"
+    :loading="loading"
   >
     <BListGroup>
       <BListGroupItem
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 10a56bf5c..59b377d3f 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -5,16 +5,15 @@ import { useI18n } from 'vue-i18n'
 
 import api from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
-import type ViewBase from '@/components/globals/ViewBase.vue'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { between, integer, required } from '@/helpers/validators'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
-
-const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
-
-const queries = [['GET', '/firewall?raw']]
+const { loading, refetch } = useInitialQueries([['GET', '/firewall?raw']], {
+  onQueriesResponse,
+})
 
 const fields = [
   { key: 'port', label: t('port') },
@@ -58,7 +57,7 @@ const protocolChoices = [
 const upnpEnabled = ref()
 const upnpError = ref('')
 
-function onQueriesResponse(data) {
+function onQueriesResponse(data: any) {
   const ports = Object.values(data).reduce(
     (ports_, protocols_) => {
       for (const type of ['TCP', 'UDP']) {
@@ -132,7 +131,7 @@ async function toggleUpnp(value) {
     )
     .then(() => {
       // FIXME Couldn't test when it works.
-      viewElem.value!.fetchQueries()
+      refetch(false)
     })
     .catch((err: APIError) => {
       if (!(err instanceof APIBadRequestError)) throw err
@@ -153,18 +152,13 @@ function onTablePortToggling(port, protocol, connection, index, value) {
 
 function onFormPortToggling() {
   togglePort(form).then((toggled) => {
-    if (toggled) viewElem.value!.fetchQueries()
+    if (toggled) refetch(false)
   })
 }
 </script>
 
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    ref="viewElem"
-    skeleton="CardFormSkeleton"
-  >
+  <ViewBase :loading="loading" skeleton="CardFormSkeleton">
     <!-- PORTS -->
     <YCard :title="$t('ports')" icon="shield">
       <div v-for="(items, protocol) in protocols" :key="protocol">
diff --git a/app/src/views/tool/ToolLog.vue b/app/src/views/tool/ToolLog.vue
index 26d9e063e..0231eea67 100644
--- a/app/src/views/tool/ToolLog.vue
+++ b/app/src/views/tool/ToolLog.vue
@@ -2,7 +2,8 @@
 import { computed, ref } from 'vue'
 
 import api, { objectToParams } from '@/api'
-import type ViewBase from '@/components/globals/ViewBase.vue'
+import type { APIQuery } from '@/api/api'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import { escapeHtml } from '@/helpers/commons'
 import { readableDate } from '@/helpers/filters/date'
 
@@ -10,10 +11,8 @@ const props = defineProps<{
   name: string
 }>()
 
-const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
-
 const numberOfLines = ref(25)
-const queries = computed(() => {
+const queries = computed<APIQuery[]>(() => {
   const queryString = objectToParams({
     filter_irrelevant: '',
     with_suboperations: '',
@@ -21,6 +20,9 @@ const queries = computed(() => {
   })
   return [['GET', `logs/${props.name}?${queryString}`]]
 })
+const { loading, refetch } = useInitialQueries(queries, {
+  onQueriesResponse,
+})
 
 // Log data
 const description = ref()
@@ -29,7 +31,7 @@ const logs = ref()
 // Logs line display
 const moreLogsAvailable = ref(false)
 
-function onQueriesResponse(log) {
+function onQueriesResponse(log: any) {
   if (log.logs.length === numberOfLines.value) {
     moreLogsAvailable.value = true
     numberOfLines.value *= 10
@@ -77,12 +79,7 @@ function shareLogs() {
 </script>
 
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    ref="viewElem"
-    skeleton="CardInfoSkeleton"
-  >
+  <ViewBase :loading="loading" skeleton="CardInfoSkeleton">
     <!-- INFO CARD -->
     <YCard :title="description" icon="info-circle">
       <BRow
@@ -135,7 +132,7 @@ function shareLogs() {
         v-if="moreLogsAvailable"
         variant="white"
         class="w-100 rounded-0"
-        @click="viewElem!.fetchQueries()"
+        @click="refetch(false)"
       >
         <YIcon iname="plus" /> {{ $t('logs_more') }}
       </BButton>
diff --git a/app/src/views/tool/ToolLogs.vue b/app/src/views/tool/ToolLogs.vue
index 94d865453..58884a347 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import { distanceToNow, readableDate } from '@/helpers/filters/date'
 
-const queries = [['GET', `logs?limit=${25}&with_details`]]
+const { loading } = useInitialQueries(
+  [['GET', `logs?limit=${25}&with_details`]],
+  { onQueriesResponse },
+)
+
 const search = ref('')
 const operations = ref()
 
@@ -16,7 +21,7 @@ const filteredOperations = computed(() => {
   return operations_.length ? operations_ : null
 })
 
-function onQueriesResponse({ operation }) {
+function onQueriesResponse({ operation }: any) {
   operation.forEach((log, index) => {
     if (log.success === '?') {
       operation[index].icon = 'question'
@@ -36,11 +41,10 @@ function onQueriesResponse({ operation }) {
 <template>
   <ViewSearch
     v-model:search="search"
-    :items="operations"
     :filtered-items="filteredOperations"
+    :items="operations"
     items-name="logs"
-    :queries="queries"
-    @queries-response="onQueriesResponse"
+    :loading="loading"
     skeleton="CardListSkeleton"
   >
     <YCard :title="$t('logs_operation')" icon="wrench" no-body>
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index f138d6fbb..3b3dfcb79 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -3,24 +3,28 @@ import { reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import api from '@/api'
-import type ViewBase from '@/components/globals/ViewBase.vue'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 
 // FIXME not tested with pending migrations (disclaimer and stuff)
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
+const { loading, refetch } = useInitialQueries(
+  [
+    ['GET', 'migrations?pending'],
+    ['GET', 'migrations?done'],
+  ],
+  { onQueriesResponse },
+)
 
-const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
-
-const queries = [
-  ['GET', 'migrations?pending'],
-  ['GET', 'migrations?done'],
-]
 const pending = ref()
 const done = ref()
 const checked = reactive({})
 
-function onQueriesResponse({ migrations: pending_ }, { migrations: done_ }) {
+function onQueriesResponse(
+  { migrations: pending_ }: any,
+  { migrations: done_ }: any,
+) {
   done.value = done_.length ? done_.reverse() : null
   pending_.forEach((migration) => {
     if (migration.disclaimer) {
@@ -43,7 +47,7 @@ function runMigrations() {
   if (Object.values(checked).every((value) => value === true)) {
     api
       .put('migrations?accept_disclaimer', {}, 'migrations.run')
-      .then(() => viewElem.value!.fetchQueries())
+      .then(() => refetch(false))
   }
 }
 
@@ -52,16 +56,12 @@ async function skipMigration(id) {
   if (!confirmed) return
   api
     .put('/migrations/' + id, { skip: '', targets: id }, 'migration.skip')
-    .then(() => viewElem.value!.fetchQueries())
+    .then(() => refetch(false))
 }
 </script>
 
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    ref="viewElem"
-  >
+  <ViewBase :loading="loading">
     <!-- PENDING MIGRATIONS -->
     <YCard :title="$t('migrations_pending')" icon="cogs" no-body>
       <template #header-buttons v-if="pending">
diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index cc22d7b28..188b1f653 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -4,20 +4,20 @@ import { reactive, ref } from 'vue'
 import api, { objectToParams } from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
 import ConfigPanels from '@/components/ConfigPanels.vue'
-import type ViewBase from '@/components/globals/ViewBase.vue'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import {
   formatFormData,
   formatYunoHostConfigPanels,
 } from '@/helpers/yunohostArguments'
 
-const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
-
-const queries = [['GET', 'settings?full']]
+const { loading, refetch } = useInitialQueries([['GET', 'settings?full']], {
+  onQueriesResponse,
+})
 const config = ref({})
 // FIXME user proper useValidate stuff
 const externalResults = reactive({})
 
-function onQueriesResponse(config_) {
+function onQueriesResponse(config_: any) {
   config.value = formatYunoHostConfigPanels(config_)
 }
 
@@ -34,7 +34,7 @@ async function onConfigSubmit({ id, form }) {
       { args: objectToParams(args) },
       { key: 'settings.update', panel: id },
     )
-    .then(() => viewElem.value!.fetchQueries({ triggerLoading: true }))
+    .then(() => refetch())
     .catch((err: APIError) => {
       if (!(err instanceof APIBadRequestError)) throw err
       const panel = config.value.panels.find((panel) => panel.id === id)
@@ -50,12 +50,7 @@ async function onConfigSubmit({ id, form }) {
 </script>
 
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    ref="viewElem"
-    skeleton="CardFormSkeleton"
-  >
+  <ViewBase :loading="loading" skeleton="CardFormSkeleton">
     <ConfigPanels
       v-if="config.panels"
       v-bind="config"
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index cfdc88f6b..df77b690d 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -6,13 +6,16 @@ import { useStore } from 'vuex'
 import api from '@/api'
 import CardCollapse from '@/components/CardCollapse.vue'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import { useStoreGetters } from '@/store/utils'
 
 const { t } = useI18n()
 const store = useStore()
 const modalConfirm = useAutoModal()
-
-const queries = [['PUT', 'update/all', {}, 'update']]
+const { loading } = useInitialQueries([['PUT', 'update/all', {}, 'update']], {
+  wait: true,
+  onQueriesResponse,
+})
 
 const { dark } = useStoreGetters()
 const system = ref()
@@ -26,13 +29,13 @@ const preUpgrade = ref({
 })
 
 function onQueriesResponse({
-  apps,
-  system,
+  apps_,
+  system_,
   important_yunohost_upgrade,
   pending_migrations,
-}) {
-  apps.value = apps.length ? apps : null
-  system.value = system.length ? system : null
+}: any) {
+  apps.value = apps_.length ? apps_ : null
+  system.value = system_.length ? system_ : null
   // eslint-disable-next-line camelcase
   importantYunohostUpgrade.value = important_yunohost_upgrade
   pendingMigrations.value = pending_migrations.length !== 0
@@ -113,12 +116,7 @@ async function performSystemUpgrade() {
 </script>
 
 <template>
-  <ViewBase
-    :queries="queries"
-    queries-wait
-    @queries-response="onQueriesResponse"
-    skeleton="CardListSkeleton"
-  >
+  <ViewBase :loading="loading" skeleton="CardListSkeleton">
     <!-- MIGRATIONS WARN -->
     <YAlert v-if="pendingMigrations" variant="warning" alert>
       <span v-html="$t('pending_migrations')" />
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index feb82e99d..7eebab3dc 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -6,6 +6,7 @@ import { useRouter } from 'vue-router'
 
 import api from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import {
   alphalownumdot_,
   minLength,
@@ -19,11 +20,14 @@ import { useStoreGetters } from '@/store/utils'
 
 const { t } = useI18n()
 const router = useRouter()
+const { loading } = useInitialQueries(
+  [
+    ['GET', { uri: 'users' }],
+    ['GET', { uri: 'domains' }],
+  ],
+  { onQueriesResponse },
+)
 
-const queries = [
-  ['GET', { uri: 'users' }],
-  ['GET', { uri: 'domains' }],
-]
 const { userNames, domainsAsChoices, mainDomain } = useStoreGetters()
 
 const fields = {
@@ -114,11 +118,7 @@ async function onSubmit() {
 </script>
 
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    skeleton="CardFormSkeleton"
-  >
+  <ViewBase :loading="loading" skeleton="CardFormSkeleton">
     <CardForm
       :title="$t('users_new')"
       icon="user-plus"
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 1dcf3fcf4..cb2981d9a 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -6,6 +6,7 @@ import { useRouter } from 'vue-router'
 
 import api from '@/api'
 import type ViewBase from '@/components/globals/ViewBase.vue'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import { arrayDiff } from '@/helpers/commons'
 import {
   emailForward,
@@ -31,13 +32,16 @@ const props = defineProps<{
 
 const { t } = useI18n()
 const router = useRouter()
+const { loading } = useInitialQueries(
+  [
+    ['GET', { uri: 'users', param: props.name, storeKey: 'users_details' }],
+    ['GET', { uri: 'domains' }],
+  ],
+  { onQueriesResponse },
+)
 
 const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
 
-const queries = [
-  ['GET', { uri: 'users', param: props.name, storeKey: 'users_details' }],
-  ['GET', { uri: 'domains' }],
-]
 const { user, domainsAsChoices, mainDomain } = useStoreGetters()
 
 const fields = {
@@ -137,7 +141,7 @@ const rules = computed(() => ({
 const v$ = useVuelidate(rules, form)
 const serverError = ref('')
 
-function onQueriesResponse(user_) {
+function onQueriesResponse(user_: any) {
   form.fullname = user_.fullname
   form.mail = adressToFormValue(user_.mail)
   if (user_['mail-aliases']) {
@@ -226,12 +230,7 @@ function removeEmailField(type: 'aliases' | 'forward', index: number) {
 </script>
 
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    skeleton="CardFormSkeleton"
-    ref="viewElem"
-  >
+  <ViewBase ref="viewElem" :loading="loading" skeleton="CardFormSkeleton">
     <CardForm
       :title="$t('user_username_edit', { name })"
       icon="user"
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index 8e9b3a9f8..a50e8c269 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -3,15 +3,15 @@ import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import { useStoreGetters } from '@/store/utils'
 
 const props = defineProps<{ name: string }>()
 
 const router = useRouter()
-
-const queries = [
+const { loading } = useInitialQueries([
   ['GET', { uri: 'users', param: props.name, storeKey: 'users_details' }],
-]
+])
 
 const { user: userGetter } = useStoreGetters()
 const purge = ref(false)
@@ -32,7 +32,7 @@ function deleteUser() {
 </script>
 
 <template>
-  <ViewBase :queries="queries" skeleton="CardInfoSkeleton">
+  <ViewBase :loading="loading" skeleton="CardInfoSkeleton">
     <YCard v-if="user" :title="user.fullname" icon="user">
       <div class="d-flex align-items-center flex-column flex-md-row">
         <YIcon iname="user" class="fa-fw" />
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index ee9974983..398296838 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -2,11 +2,11 @@
 import { computed, ref } from 'vue'
 import { useStore } from 'vuex'
 
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import { useStoreGetters } from '@/store/utils'
 
 const store = useStore()
-
-const queries = [
+const { loading } = useInitialQueries([
   [
     'GET',
     {
@@ -14,8 +14,7 @@ const queries = [
       storeKey: 'users',
     },
   ],
-]
-
+])
 const { users } = useStoreGetters()
 
 const search = ref('')
@@ -40,10 +39,10 @@ function downloadExport() {
 <template>
   <ViewSearch
     v-model:search="search"
-    :items="users"
     :filtered-items="filteredUsers"
+    :items="users"
     items-name="users"
-    :queries="queries"
+    :loading="loading"
   >
     <template #top-bar-buttons>
       <BButton variant="info" :to="{ name: 'group-list' }">

From 85b4980bee6ccb444e0c09514e3a7f382d467dbc Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sat, 6 Jul 2024 16:13:45 +0200
Subject: [PATCH 095/275] feat: add useForm composable

---
 app/src/composables/form.ts | 104 ++++++++++++++++++++++++++++++++++--
 app/src/helpers/commons.ts  |   4 ++
 app/src/types/form.ts       |   9 ++++
 3 files changed, 114 insertions(+), 3 deletions(-)

diff --git a/app/src/composables/form.ts b/app/src/composables/form.ts
index fcc25cc37..71150f0d0 100644
--- a/app/src/composables/form.ts
+++ b/app/src/composables/form.ts
@@ -1,6 +1,17 @@
-import type { BaseValidation } from '@vuelidate/core'
-import type { InjectionKey, MaybeRefOrGetter } from 'vue'
-import { inject, provide, toValue } from 'vue'
+import type {
+  BaseValidation,
+  ServerErrors,
+  ValidationArgs,
+  ValidationRuleCollection,
+} from '@vuelidate/core'
+import useVuelidate from '@vuelidate/core'
+import type { InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
+import { inject, provide, reactive, toValue } from 'vue'
+import { computedWithControl } from '@vueuse/core'
+
+import { APIBadRequestError, type APIError } from '@/api/errors'
+import type { Obj } from '@/types/commons'
+import type { FormField, FormFieldDict } from '@/types/form'
 
 export const clearServerErrorsSymbol = Symbol() as InjectionKey<
   (key?: string) => void
@@ -30,3 +41,90 @@ export function useTouch(
 
   return touch
 }
+
+export function useForm<
+  MV extends Obj,
+  FFD extends FormFieldDict<MV> = FormFieldDict<MV>,
+>(form: Ref<MV>, fields: MaybeRefOrGetter<FFD>) {
+  const serverErrors = reactive<ServerErrors>({})
+  const validByDefault: ValidationRuleCollection = { true: () => true }
+  const rules = computedWithControl(
+    () => toValue(fields),
+    () => {
+      const fs = toValue(fields)
+      const validations = Object.keys(form.value).map((key: keyof MV) => [
+        key,
+        (fs[key] as FormField).rules ?? validByDefault,
+      ])
+      const rules: ValidationArgs<MV> = Object.fromEntries(validations)
+      return {
+        // create a fake validation rule for global state to be able to add $externalResult errors to it
+        global: { true: () => true },
+        form: rules,
+      }
+    },
+  )
+
+  const v = useVuelidate(
+    rules,
+    { form, global: null },
+    { $externalResults: serverErrors },
+  )
+
+  function onErrorFn(err: APIError, errorMessage?: string) {
+    if (!(err instanceof APIBadRequestError)) throw err
+    if (errorMessage || !err.data.name) {
+      serverErrors.global = [errorMessage || err.message]
+    } else {
+      deepSetErrors(
+        serverErrors,
+        [err.message],
+        'form',
+        ...err.data.name.split('.'),
+      )
+    }
+  }
+
+  function onSubmit(
+    fn: (onError: typeof onErrorFn, serverErrors: ServerErrors) => void,
+  ) {
+    // FIXME add option to ask confirmation (with param text confirm)
+    return async (e: SubmitEvent) => {
+      e.preventDefault()
+      if (!(await v.value.$validate())) return
+      fn(onErrorFn, serverErrors)
+    }
+  }
+
+  provide(clearServerErrorsSymbol, (key?: string) => {
+    const keys = key?.split('.')
+    if (keys?.length) {
+      deepSetErrors(serverErrors, [], ...keys)
+    }
+  })
+
+  return {
+    v,
+    serverErrors,
+    onSubmit,
+  }
+}
+
+export function deepSetErrors(
+  serverErrors: ServerErrors,
+  value: string[],
+  ...keys: string[]
+) {
+  const [k, ...ks] = keys
+  if (ks.length) {
+    if (!(k in serverErrors) && !value.length) {
+      serverErrors[k] = {}
+      deepSetErrors(serverErrors[k] as ServerErrors, value, ...ks)
+    } else if (k in serverErrors) {
+      deepSetErrors(serverErrors[k] as ServerErrors, value, ...ks)
+    }
+  } else {
+    if (!(k in serverErrors) && !value.length) return
+    serverErrors[k] = value
+  }
+}
diff --git a/app/src/helpers/commons.ts b/app/src/helpers/commons.ts
index 669e3c638..421aee727 100644
--- a/app/src/helpers/commons.ts
+++ b/app/src/helpers/commons.ts
@@ -162,3 +162,7 @@ export function omit<T extends Obj, K extends (keyof T)[]>(
       .map((key) => [key, obj[key]]),
   ) as Omit<T, K[number]>
 }
+
+export function asUnreffed<T>(value: T): UnwrapRef<T> {
+  return value as UnwrapRef<T>
+}
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 37c8802f6..4bbb06f7b 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -275,3 +275,12 @@ export type FormFieldDict<T extends Obj = Obj> = {
         | FormFieldReadonly<AnyWritableComponents>
         | FormFieldDisplay<AnyDisplayComponents>
 }
+
+export type FieldProps<
+  C extends AnyItemComponents = 'InputItem',
+  MV extends any = never,
+> = C extends AnyWritableComponents
+  ? FormField<C, MV> | FormFieldReadonly<C>
+  : C extends AnyDisplayComponents
+    ? FormFieldDisplay<C>
+    : never

From a22ee09344d6edd7107280b283f0226e0dd0c94e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 11 Jul 2024 13:34:48 +0200
Subject: [PATCH 096/275] feat: add useArrayRule to generate rules for each
 array elem

---
 app/src/composables/form.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/src/composables/form.ts b/app/src/composables/form.ts
index 71150f0d0..27d38613c 100644
--- a/app/src/composables/form.ts
+++ b/app/src/composables/form.ts
@@ -5,8 +5,8 @@ import type {
   ValidationRuleCollection,
 } from '@vuelidate/core'
 import useVuelidate from '@vuelidate/core'
-import type { InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
-import { inject, provide, reactive, toValue } from 'vue'
+import type { ComputedRef, InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
+import { computed, inject, provide, reactive, toValue } from 'vue'
 import { computedWithControl } from '@vueuse/core'
 
 import { APIBadRequestError, type APIError } from '@/api/errors'
@@ -128,3 +128,15 @@ export function deepSetErrors(
     serverErrors[k] = value
   }
 }
+
+export function useArrayRule<V extends any[], T extends ValidationArgs>(
+  values: MaybeRefOrGetter<V>,
+  rules: T,
+): ComputedRef<ValidationArgs<T>> {
+  return computed(() => {
+    return toValue(values).reduce((total: Obj<T>, v: V[number], index) => {
+      total[index] = rules
+      return total
+    }, {})
+  })
+}

From 026ccb68ed2b422d658f54880d04e6a6139ff7c4 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 8 Jul 2024 16:16:02 +0200
Subject: [PATCH 097/275] refactor: use useForm in some views

---
 app/src/views/LoginView.vue            |  72 +++----
 app/src/views/PostInstall.vue          | 125 ++++++-----
 app/src/views/_partials/DomainForm.vue | 169 ++++++++-------
 app/src/views/app/AppCatalog.vue       |  44 ++--
 app/src/views/group/GroupCreate.vue    |  62 +++---
 app/src/views/user/UserCreate.vue      | 154 ++++++--------
 app/src/views/user/UserEdit.vue        | 283 +++++++++----------------
 app/src/views/user/UserImport.vue      |  73 +++----
 8 files changed, 439 insertions(+), 543 deletions(-)

diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index 32dd5ecd8..75babf7e0 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { useVuelidate } from '@vuelidate/core'
 import { reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter, type LocationQueryValue } from 'vue-router'
 import { useStore } from 'vuex'
 
+import { useForm } from '@/composables/form'
 import { alphalownumdot_, minLength, required } from '@/helpers/validators'
 import { useStoreGetters } from '@/store/utils'
+import type { FieldProps, FormFieldDict } from '@/types/form'
 
 const props = withDefaults(
   defineProps<{
@@ -22,41 +23,40 @@ const store = useStore()
 const router = useRouter()
 
 const { installed } = useStoreGetters()
-const serverError = ref('')
-const form = reactive({
+
+type Form = typeof form.value
+const form = ref({
   username: '',
   password: '',
 })
-const v$ = useVuelidate(
-  {
-    username: { required, alphalownumdot_ },
-    password: { required, passwordLenght: minLength(4) },
-  },
-  form,
-)
-
-console.log(v$.value)
-
-const fields = {
+const fields = reactive({
   username: {
+    component: 'InputItem',
     label: t('user_username'),
+    rules: { required, alphalownumdot_ },
     props: {
       id: 'username',
       autocomplete: 'username',
     },
-  },
+  } satisfies FieldProps<'InputItem', Form['username']>,
+
   password: {
+    component: 'InputItem',
     label: t('password'),
+    rules: { required, passwordLenght: minLength(4) },
     props: {
       id: 'password',
       type: 'password',
       autocomplete: 'current-password',
     },
-  },
-}
+  } satisfies FieldProps<'InputItem', Form['password']>,
+} satisfies FormFieldDict<Form>)
+
+const { v, onSubmit } = useForm(form, fields)
 
-function login() {
-  const credentials = [form.username, form.password].join(':')
+const onLogin = onSubmit((onError) => {
+  const { username, password } = form.value
+  const credentials = [username, password].join(':')
   store
     .dispatch('LOGIN', credentials)
     .then(() => {
@@ -70,41 +70,27 @@ function login() {
         )
       }
     })
-    .catch((err) => {
-      if (err.name !== 'APIUnauthorizedError') throw err
-      serverError.value = t('wrong_password_or_username')
-    })
-}
+    .catch((err) => onError(err, t('wrong_password_or_username')))
+})
 </script>
 
 <template>
   <CardForm
-    :title="t('login')"
+    id="login-form"
+    v-model="form"
+    :fields="fields"
     icon="lock"
-    :validation="v$"
-    :server-error="serverError"
-    @submit.prevent="login"
+    :title="t('login')"
+    :validations="v"
+    @submit="onLogin"
   >
-    <!-- ADMIN USERNAME -->
-    <FormField
-      v-bind="fields.username"
-      v-model="form.username"
-      :validation="v$.username"
-    />
-
-    <!-- ADMIN PASSWORD -->
-    <FormField
-      v-bind="fields.password"
-      v-model="form.password"
-      :validation="v$.password"
-    />
-
     <template #buttons>
+      <!-- FIXME should we remove the disabled state? -->
       <BButton
         type="submit"
         variant="success"
         :disabled="!installed"
-        form="ynh-form"
+        form="login-form"
       >
         {{ t('login') }}
       </BButton>
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 3aa944337..2d19ad652 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { useVuelidate } from '@vuelidate/core'
 import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import api from '@/api'
+import { APIBadRequestError } from '@/api/errors'
+import { useForm } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { asUnreffed } from '@/helpers/commons'
 import {
   alphalownumdot_,
   minLength,
@@ -13,92 +15,99 @@ import {
   sameAs,
 } from '@/helpers/validators'
 import { formatFormData } from '@/helpers/yunohostArguments'
+import type { FieldProps, FormFieldDict } from '@/types/form'
 import LoginView from '@/views/LoginView.vue'
 import { DomainForm } from '@/views/_partials'
 
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
 
-const step = ref('start')
+type Steps = 'start' | 'domain' | 'user' | 'rootfsspace-error' | 'login'
+const step = ref<Steps>('start')
 const serverError = ref('')
-const domain = ref(undefined)
+const domain = ref('')
 const dyndns_recovery_password = ref('')
 
-const form = reactive({
+type Form = typeof form.value
+const form = ref({
   username: '',
   fullname: '',
   password: '',
   confirmation: '',
 })
-const rules = computed(() => ({
-  username: { required, alphalownumdot_ },
-  fullname: { required, name },
-  password: { required, passwordLenght: minLength(8) },
-  confirmation: { required, passwordMatch: sameAs(form.password) },
-}))
-const v$ = useVuelidate(rules, form)
-
-const fields = {
+const fields = reactive({
+  // FIXME satisfies FormFieldDict but not for CardForm?
+  alert: {
+    component: 'ReadOnlyAlertItem',
+    props: { label: t('postinstall.user.first_user_help'), type: 'info' },
+  } satisfies FieldProps<'ReadOnlyAlertItem'>,
+
   username: {
+    component: 'InputItem',
     label: t('user_username'),
-    props: {
-      id: 'username',
-      placeholder: t('placeholder.username'),
-    },
-  },
+    rules: { required, alphalownumdot_ },
+    props: { id: 'username', placeholder: t('placeholder.username') },
+  } satisfies FieldProps<'InputItem', Form['username']>,
 
   fullname: {
+    component: 'InputItem',
     label: t('user_fullname'),
-    props: {
-      id: 'fullname',
-      placeholder: t('placeholder.fullname'),
-    },
-  },
+    rules: { required, name },
+    props: { id: 'fullname', placeholder: t('placeholder.fullname') },
+  } satisfies FieldProps<'InputItem', Form['fullname']>,
 
   password: {
+    component: 'InputItem',
     label: t('password'),
     description: t('good_practices_about_admin_password'),
     descriptionVariant: 'warning',
+    rules: { required, passwordLenght: minLength(8) },
     props: { id: 'password', placeholder: '••••••••', type: 'password' },
-  },
+  } satisfies FieldProps<'InputItem', Form['password']>,
 
   confirmation: {
+    component: 'InputItem',
     label: t('password_confirmation'),
-    props: {
-      id: 'confirmation',
-      placeholder: '••••••••',
-      type: 'password',
-    },
-  },
-}
-
-function goToStep(step_) {
+    rules: asUnreffed(
+      computed(() => ({
+        required,
+        passwordMatch: sameAs(form.value.password),
+      })),
+    ),
+    props: { id: 'confirmation', placeholder: '••••••••', type: 'password' },
+  } satisfies FieldProps<'InputItem', Form['confirmation']>,
+} satisfies FormFieldDict<Form>)
+
+const { v, onSubmit, serverErrors } = useForm(form, fields)
+
+function goToStep(step_: Steps) {
   serverError.value = ''
   step.value = step_
 }
 
-function setDomain(data) {
+function setDomain(data: { domain: string; dyndns_recovery_password: string }) {
   domain.value = data.domain
   dyndns_recovery_password.value = data.dyndns_recovery_password
   goToStep('user')
 }
 
-async function setUser() {
+const setUser = onSubmit(async () => {
   const confirmed = await modalConfirm(
     t('confirm_postinstall', { domain: domain.value }),
   )
   if (!confirmed) return
   performPostInstall()
-}
+})
 
 async function performPostInstall(force = false) {
   // FIXME update formatFormData to unwrap ref auto
+  const { username, fullname, password } = form.value
   const data = await formatFormData({
     domain: domain.value,
     dyndns_recovery_password: dyndns_recovery_password.value,
-    username: form.username,
-    fullname: form.fullname,
-    password: form.password,
+    username,
+    fullname,
+    password,
   })
 
   // FIXME does the api will throw an error for bad passwords ?
@@ -111,19 +120,21 @@ async function performPostInstall(force = false) {
       goToStep('login')
     })
     .catch((err) => {
-      const hasWordsInError = (words) =>
+      const hasWordsInError = (words: string[]) =>
         words.some((word) => (err.key || err.message).includes(word))
-      if (err.name !== 'APIBadRequestError') throw err
+      if (!(err instanceof APIBadRequestError)) throw err
       if (err.key === 'postinstall_low_rootfsspace') {
         step.value = 'rootfsspace-error'
+        serverError.value = err.message
       } else if (hasWordsInError(['domain', 'dyndns'])) {
         step.value = 'domain'
+        serverError.value = err.message
       } else if (hasWordsInError(['password', 'user'])) {
         step.value = 'user'
+        serverErrors.global = [err.message]
       } else {
         throw err
       }
-      serverError.value = err.message
     })
 }
 </script>
@@ -156,11 +167,11 @@ async function performPostInstall(force = false) {
         @submit="setDomain"
       >
         <template #disclaimer>
-          <p class="alert alert-info" v-t="'postinstall_domain'" />
+          <p v-t="'postinstall_domain'" class="alert alert-info" />
         </template>
       </DomainForm>
 
-      <BButton variant="primary" @click="goToStep('start')" class="mt-3">
+      <BButton variant="primary" class="mt-3" @click="goToStep('start')">
         <YIcon iname="chevron-left" /> {{ $t('previous') }}
       </BButton>
     </template>
@@ -168,28 +179,16 @@ async function performPostInstall(force = false) {
     <!-- FIRST USER SETUP STEP -->
     <template v-else-if="step === 'user'">
       <CardForm
-        :title="$t('postinstall.user.title')"
+        v-model="form"
+        :fields="fields"
         icon="user-plus"
-        :validation="v$"
-        :server-error="serverError"
         :submit-text="$t('next')"
+        :title="$t('postinstall.user.title')"
+        :validations="v"
         @submit.prevent="setUser"
-      >
-        <ReadOnlyAlertItem
-          :label="$t('postinstall.user.first_user_help')"
-          type="info"
-        />
-
-        <FormField
-          v-for="(field, key) in fields"
-          :key="key"
-          v-bind="field"
-          v-model="form[key]"
-          :validation="v$.form[key]"
-        />
-      </CardForm>
-
-      <BButton variant="primary" @click="goToStep('domain')" class="mt-3">
+      />
+
+      <BButton variant="primary" class="mt-3" @click="goToStep('domain')">
         <YIcon iname="chevron-left" /> {{ $t('previous') }}
       </BButton>
     </template>
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index a3a6033f7..e4abc0422 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { useVuelidate } from '@vuelidate/core'
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useForm } from '@/composables/form'
+import { asUnreffed } from '@/helpers/commons'
 import {
   domain,
   dynDomain,
@@ -12,23 +13,26 @@ import {
 } from '@/helpers/validators'
 import { formatFormData } from '@/helpers/yunohostArguments'
 import { useStoreGetters } from '@/store/utils'
+import type { AdressModelValue, FieldProps, FormFieldDict } from '@/types/form'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     title: string
-    submitText?: string | null
+    submitText?: string
     serverError?: string
   }>(),
   {
-    submitText: null,
-    serverError: '',
+    submitText: undefined,
+    serverError: undefined,
   },
 )
-const emit = defineEmits(['submit'])
+const emit = defineEmits<{
+  submit: [data: { domain: string; dyndns_recovery_password: string }]
+}>()
 
 const { t } = useI18n()
 
@@ -42,82 +46,112 @@ const dynDnsForbiden = computed(() => {
   })
 })
 
-const selected = ref(dynDnsForbiden.value ? 'domain' : '')
-const form = reactive({
+type Selected = 'domain' | 'dynDomain' | 'localDomain'
+const selected = ref<'' | Selected>(dynDnsForbiden.value ? 'domain' : '')
+
+type Form = {
+  domain: string
+  dynDomain: AdressModelValue
+  dynDomainPassword: string
+  dynDomainPasswordConfirmation: string
+  localDomain: AdressModelValue
+}
+const form = ref<Form>({
   domain: '',
   dynDomain: { localPart: '', separator: '.', domain: 'nohost.me' },
   dynDomainPassword: '',
   dynDomainPasswordConfirmation: '',
   localDomain: { localPart: '', separator: '.', domain: 'local' },
 })
-
-const rules = computed(() => ({
-  selected: { required },
-  form: ['domain', 'localDomain'].includes(selected.value)
-    ? {
-        [selected.value]:
-          selected.value === 'domain'
-            ? { required, domain }
-            : { localPart: { required, dynDomain } },
-      }
-    : {
-        dynDomain: { localPart: { required, dynDomain } },
-        dynDomainPassword: { passwordLenght: minLength(8) },
-        dynDomainPasswordConfirmation: {
-          passwordMatch: sameAs(form.dynDomainPassword),
-        },
-      },
-}))
-const v$ = useVuelidate(rules, { selected, form })
-
-const fields = {
+const fields = reactive({
   domain: {
+    component: 'InputItem',
     label: t('domain_name'),
+    rules: asUnreffed(
+      computed(() =>
+        selected.value === 'domain' ? { required, domain } : undefined,
+      ),
+    ),
     props: {
       id: 'domain',
       placeholder: t('placeholder.domain'),
     },
-  },
+  } satisfies FieldProps<'InputItem', Form['domain']>,
 
   dynDomain: {
+    component: 'AdressItem',
     label: t('domain_name'),
+    rules: { localPart: { required, dynDomain } },
     props: {
       id: 'dyn-domain',
       placeholder: t('placeholder.domain').split('.')[0],
       type: 'domain',
       choices: dynDomains,
     },
-  },
+  } satisfies FieldProps<'AdressItem', Form['dynDomain']>,
 
   dynDomainPassword: {
+    component: 'InputItem',
     label: t('domain.add.dyn_dns_password'),
     description: t('domain.add.dyn_dns_password_desc'),
+    rules: { passwordLenght: minLength(8) },
     props: {
       id: 'dyn-dns-password',
       placeholder: '••••••••',
       type: 'password',
     },
-  },
+  } satisfies FieldProps<'InputItem', Form['dynDomainPassword']>,
 
   dynDomainPasswordConfirmation: {
+    component: 'InputItem',
     label: t('password_confirmation'),
+    rules: asUnreffed(
+      computed(() => ({
+        passwordMatch: sameAs(form.value.dynDomainPassword),
+      })),
+    ),
     props: {
       id: 'dyn-dns-password-confirmation',
       placeholder: '••••••••',
       type: 'password',
     },
-  },
+  } satisfies FieldProps<'InputItem', Form['dynDomainPasswordConfirmation']>,
 
   localDomain: {
+    component: 'AdressItem',
     label: t('domain_name'),
+    rules: asUnreffed(
+      computed(() =>
+        selected.value === 'localDomain'
+          ? { localPart: { required, dynDomain } }
+          : undefined,
+      ),
+    ),
     props: {
       id: 'dyn-domain',
       placeholder: t('placeholder.domain').split('.')[0],
       type: 'domain',
       choices: ['local', 'test'],
     },
+  } satisfies FieldProps<'AdressItem', Form['localDomain']>,
+} satisfies FormFieldDict<Form>)
+
+const { v, onSubmit, serverErrors } = useForm(form, fields)
+
+watch(
+  () => props.serverError,
+  () => {
+    if (props.serverError) {
+      serverErrors.global = [props.serverError]
+    }
   },
-}
+)
+
+const dynKeys = [
+  'dynDomain',
+  'dynDomainPassword',
+  'dynDomainPasswordConfirmation',
+] as (keyof Form)[]
 
 const domainIsVisible = computed(() => {
   return selected.value === 'domain'
@@ -131,15 +165,17 @@ const localDomainIsVisible = computed(() => {
   return selected.value === 'localDomain'
 })
 
-async function onSubmit() {
+const onDomainAdd = onSubmit(async () => {
   const domainType = selected.value
+  if (!domainType) return
+
   const data = await formatFormData({
-    domain: form[domainType],
+    domain: form.value[domainType],
     dyndns_recovery_password:
-      domainType === 'dynDomain' ? form.dynDomainPassword : '',
+      domainType === 'dynDomain' ? form.value.dynDomainPassword : '',
   })
   emit('submit', data)
-}
+})
 </script>
 
 <template>
@@ -147,9 +183,8 @@ async function onSubmit() {
     :title="title"
     icon="globe"
     :submit-text="submitText"
-    :validation="v$"
-    :server-error="serverError"
-    @submit.prevent="onSubmit"
+    :validations="v"
+    @submit.prevent="onDomainAdd"
   >
     <template #disclaimer>
       <slot name="disclaimer" />
@@ -167,8 +202,8 @@ async function onSubmit() {
       {{ $t('domain.add.from_registrar') }}
     </BFormRadio>
 
-    <BCollapse id="collapse-domain" v-model:visible="domainIsVisible">
-      <p class="mt-2 alert alert-info">
+    <BCollapse id="collapse-domain" v-model="domainIsVisible">
+      <p class="mt-2 mb-3 alert alert-info">
         <YIcon iname="info-circle" />
         <span class="ps-1" v-html="$t('domain.add.from_registrar_desc')" />
       </p>
@@ -176,8 +211,7 @@ async function onSubmit() {
       <FormField
         v-bind="fields.domain"
         v-model="form.domain"
-        :validation="v$.domain"
-        class="mt-3"
+        :validation="v.domain"
       />
     </BCollapse>
 
@@ -194,34 +228,21 @@ async function onSubmit() {
       {{ $t('domain.add.from_yunohost') }}
     </BFormRadio>
 
-    <BCollapse id="collapse-dynDomain" v-model:visible="dynDomainIsVisible">
-      <p class="mt-2 alert alert-info">
+    <BCollapse id="collapse-dynDomain" v-model="dynDomainIsVisible">
+      <p class="mt-2 mb-3 alert alert-info">
         <YIcon iname="info-circle" />
         <span class="ps-1" v-html="$t('domain.add.from_yunohost_desc')" />
       </p>
 
       <FormField
-        v-bind="fields.dynDomain"
-        :validation="v$.dynDomain"
-        class="mt-3"
-      >
-        <template #default="{ self }">
-          <AdressItem v-bind="self" v-model="form.dynDomain" />
-        </template>
-      </FormField>
-
-      <FormField
-        v-bind="fields.dynDomainPassword"
-        :validation="v$.dynDomainPassword"
-        v-model="form.dynDomainPassword"
-      />
-
-      <FormField
-        v-bind="fields.dynDomainPasswordConfirmation"
-        :validation="v$.dynDomainPasswordConfirmation"
-        v-model="form.dynDomainPasswordConfirmation"
+        v-for="key in dynKeys"
+        :key="key"
+        v-bind="fields[key]"
+        v-model="form[key]"
+        :validation="v[key]"
       />
     </BCollapse>
+
     <div
       v-if="dynDnsForbiden"
       class="alert alert-warning mt-2"
@@ -239,21 +260,17 @@ async function onSubmit() {
       {{ $t('domain.add.from_local') }}
     </BFormRadio>
 
-    <BCollapse id="collapse-localDomain" v-model:visible="localDomainIsVisible">
-      <p class="mt-2 alert alert-info">
+    <BCollapse id="collapse-localDomain" v-model="localDomainIsVisible">
+      <p class="mt-2 mb-3 alert alert-info">
         <YIcon iname="info-circle" />
         <span class="ps-1" v-html="$t('domain.add.from_local_desc')" />
       </p>
 
       <FormField
         v-bind="fields.localDomain"
-        :validation="v$.localDomain"
-        class="mt-3"
-      >
-        <template #default="{ self }">
-          <AdressItem v-bind="self" v-model="form.localDomain" />
-        </template>
-      </FormField>
+        v-model="form.localDomain"
+        :validation="v.localDomain"
+      />
     </BCollapse>
   </CardForm>
 </template>
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index bff18bba9..8ece21b2d 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { useVuelidate } from '@vuelidate/core'
 import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
 import CardDeckFeed from '@/components/CardDeckFeed.vue'
+import { useForm } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { useInitialQueries } from '@/composables/useInitialQueries'
 import { randint } from '@/helpers/commons'
 import { appRepoUrl, required } from '@/helpers/validators'
-import { useInitialQueries } from '@/composables/useInitialQueries'
+import type { FieldProps, FormFieldDict } from '@/types/form'
 
 const props = withDefaults(
   defineProps<{
@@ -37,8 +38,20 @@ const { loading } = useInitialQueries(
 const apps = ref()
 const selectedApp = ref()
 const antifeatures = ref()
-const url = ref()
-const v$ = useVuelidate({ url: { required, appRepoUrl } }, { url })
+
+const form = ref({ url: '' })
+const fields = {
+  url: {
+    component: 'InputItem',
+    label: t('url'),
+    rules: { required, appRepoUrl },
+    props: {
+      id: 'custom-install',
+      placeholder: 'https://some.git.forge.tld/USER/REPOSITORY',
+    },
+  } satisfies FieldProps<'InputItem', string>,
+} satisfies FormFieldDict<typeof form.value>
+const { v, onSubmit } = useForm(form, fields)
 
 const qualityOptions = [
   { value: 'high_quality', text: t('only_highquality_apps') },
@@ -169,16 +182,16 @@ async function onInstallClick(appId: string) {
 }
 
 // INSTALL CUSTOM APP
-async function onCustomInstallClick() {
+const onCustomInstallClick = onSubmit(async () => {
   const confirmed = await modalConfirm(t('confirm_install_custom_app'))
   if (!confirmed) return
 
-  const url_ = url.value
+  const url = form.value.url
   router.push({
     name: 'app-install-custom',
-    params: { id: url_.endsWith('/') ? url_ : url_ + '/' },
+    params: { id: url.endsWith('/') ? url : url + '/' },
   })
-}
+})
 </script>
 
 <template>
@@ -354,12 +367,14 @@ async function onCustomInstallClick() {
     <template #bot>
       <!-- INSTALL CUSTOM APP -->
       <CardForm
-        :title="$t('custom_app_install')"
+        v-model="form"
         icon="download"
-        @submit.prevent="onCustomInstallClick"
+        :fields="fields"
         :submit-text="$t('install')"
-        :validation="v$"
+        :title="$t('custom_app_install')"
+        :validations="v"
         class="mt-5"
+        @submit.prevent="onCustomInstallClick"
       >
         <template #disclaimer>
           <div class="alert alert-warning">
@@ -367,13 +382,6 @@ async function onCustomInstallClick() {
             {{ $t('confirm_install_custom_app') }}
           </div>
         </template>
-
-        <!-- URL -->
-        <FormField
-          v-bind="customInstall.field"
-          v-model="customInstall.url"
-          :validation="v$.customInstall.url"
-        />
       </CardForm>
     </template>
 
diff --git a/app/src/views/group/GroupCreate.vue b/app/src/views/group/GroupCreate.vue
index f71379b92..8cbf7c4f5 100644
--- a/app/src/views/group/GroupCreate.vue
+++ b/app/src/views/group/GroupCreate.vue
@@ -1,56 +1,52 @@
 <script setup lang="ts">
-import { useVuelidate } from '@vuelidate/core'
-import { reactive, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
-import { APIBadRequestError, APIError } from '@/api/errors'
+import { useForm } from '@/composables/form'
 import { alphalownumdot_, required } from '@/helpers/validators'
+import type { FieldProps, FormFieldDict } from '@/types/form'
 
 const { t } = useI18n()
 const router = useRouter()
 
-const form = reactive({ groupname: '' })
-const v$ = useVuelidate({ groupname: { required, alphalownumdot_ } }, form)
-const serverError = ref('')
-const groupnameField = {
-  label: t('group_name'),
-  description: t('group_format_name_help'),
-  props: {
-    id: 'groupname',
-    placeholder: t('placeholder.groupname'),
-  },
-}
-function onSubmit() {
+const form = ref({ groupname: '' })
+const fields = {
+  groupname: {
+    component: 'InputItem',
+    label: t('group_name'),
+    description: t('group_format_name_help'),
+    rules: { required, alphalownumdot_ },
+    props: {
+      id: 'groupname',
+      placeholder: t('placeholder.groupname'),
+    },
+  } satisfies FieldProps<'InputItem', string>,
+} satisfies FormFieldDict<typeof form.value>
+
+const { v, onSubmit } = useForm(form, fields)
+
+const onAddGroup = onSubmit((onError) => {
   api
     .post({ uri: 'users/groups', storeKey: 'groups' }, form, {
       key: 'groups.create',
-      name: form.groupname,
+      name: form.value.groupname,
     })
     .then(() => {
       router.push({ name: 'group-list' })
     })
-    .catch((err: APIError) => {
-      if (!(err instanceof APIBadRequestError)) throw err
-      serverError.value = err.message
-    })
-}
+    .catch(onError)
+})
 </script>
 
 <template>
   <CardForm
-    :title="$t('group_new')"
+    v-model="form"
     icon="users"
-    :validation="v$"
-    :server-error="serverError"
-    @submit.prevent="onSubmit"
-  >
-    <!-- GROUP NAME -->
-    <FormField
-      v-bind="groupnameField"
-      v-model="form.groupname"
-      :validation="v$.form.groupname"
-    />
-  </CardForm>
+    :fields="fields"
+    :title="$t('group_new')"
+    :validations="v"
+    @submit.prevent="onAddGroup"
+  />
 </template>
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index 7eebab3dc..f3e2175f6 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useVuelidate } from '@vuelidate/core'
-import { computed, reactive, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
-import { APIBadRequestError, type APIError } from '@/api/errors'
+import { useForm } from '@/composables/form'
 import { useInitialQueries } from '@/composables/useInitialQueries'
+import { asUnreffed } from '@/helpers/commons'
 import {
   alphalownumdot_,
   minLength,
@@ -17,6 +17,7 @@ import {
 } from '@/helpers/validators'
 import { formatFormData } from '@/helpers/yunohostArguments'
 import { useStoreGetters } from '@/store/utils'
+import type { FieldProps, FormFieldDict } from '@/types/form'
 
 const { t } = useI18n()
 const router = useRouter()
@@ -30,149 +31,122 @@ const { loading } = useInitialQueries(
 
 const { userNames, domainsAsChoices, mainDomain } = useStoreGetters()
 
+type Form = typeof form.value
+const form = ref({
+  username: '',
+  fullname: '',
+  domain: '',
+  password: '',
+  confirmation: '',
+})
 const fields = {
   username: {
+    component: 'InputItem',
     label: t('user_username'),
+    rules: asUnreffed(
+      computed(() => ({
+        required,
+        alphalownumdot_,
+        notInUsers: unique(userNames),
+      })),
+    ),
     props: {
       id: 'username',
       placeholder: t('placeholder.username'),
     },
-  },
+  } satisfies FieldProps<'InputItem', Form['username']>,
 
   fullname: {
+    component: 'InputItem',
+    hr: true,
     label: t('user_fullname'),
+    rules: { required, name },
     props: {
       id: 'fullname',
       placeholder: t('placeholder.fullname'),
     },
-  },
+  } satisfies FieldProps<'InputItem', Form['fullname']>,
 
   domain: {
+    component: 'SelectItem',
+    hr: true,
     id: 'mail',
     label: t('user_email'),
     description: t('tip_about_user_email'),
     descriptionVariant: 'info',
-    props: { choices: domainsAsChoices },
-  },
+    rules: { required },
+    props: { choices: asUnreffed(domainsAsChoices) },
+  } satisfies FieldProps<'SelectItem', Form['domain']>,
 
   password: {
+    component: 'InputItem',
     label: t('password'),
     description: t('good_practices_about_user_password'),
     descriptionVariant: 'warning',
+    rules: { required, passwordLenght: minLength(8) },
     props: {
       id: 'password',
       placeholder: '••••••••',
       type: 'password',
     },
-  },
+  } satisfies FieldProps<'InputItem', Form['password']>,
 
   confirmation: {
+    component: 'InputItem',
     label: t('password_confirmation'),
+    rules: asUnreffed(
+      computed(() => ({
+        required,
+        passwordMatch: sameAs(form.value.password),
+      })),
+    ),
     props: {
       id: 'confirmation',
       placeholder: '••••••••',
       type: 'password',
     },
-  },
-}
-const form = reactive({
-  username: '',
-  fullname: '',
-  domain: '',
-  password: '',
-  confirmation: '',
-})
-const rules = computed(() => ({
-  username: {
-    required,
-    alphalownumdot_,
-    notInUsers: unique(userNames.value),
-  },
-  fullname: { required, name },
-  domain: { required },
-  password: { required, passwordLenght: minLength(8) },
-  confirmation: { required, passwordMatch: sameAs(form.password) },
-}))
-const v$ = useVuelidate(rules, form)
-const serverError = ref('')
+  } satisfies FieldProps<'InputItem', Form['confirmation']>,
+} satisfies FormFieldDict<Form>
+
+const { v, onSubmit } = useForm(form, fields)
 
 function onQueriesResponse() {
-  form.domain = mainDomain.value
+  form.value.domain = mainDomain.value
 }
 
-async function onSubmit() {
-  const data = await formatFormData(form, { flatten: true })
+const onUserCreate = onSubmit(async (onError) => {
+  const data = await formatFormData(form.value, { flatten: true })
   api
     .post({ uri: 'users' }, data, {
       key: 'users.create',
-      name: form.username,
+      name: form.value.username,
     })
     .then(() => {
       router.push({ name: 'user-list' })
     })
-    .catch((err: APIError) => {
-      if (!(err instanceof APIBadRequestError)) throw err
-      serverError.value = err.message
-    })
-}
+    .catch(onError)
+})
 </script>
 
 <template>
   <ViewBase :loading="loading" skeleton="CardFormSkeleton">
     <CardForm
-      :title="$t('users_new')"
+      v-model="form"
       icon="user-plus"
-      :validation="v$"
-      :server-error="serverError"
-      @submit.prevent="onSubmit"
+      :fields="fields"
+      :title="$t('users_new')"
+      :validations="v"
+      @submit.prevent="onUserCreate"
     >
-      <!-- USER NAME -->
-      <FormField
-        v-bind="fields.username"
-        v-model="form.username"
-        :validation="v$.form.username"
-      />
-
-      <!-- USER FULLNAME -->
-      <FormField
-        v-bind="fields.fullname"
-        :validation="v$.form.fullname"
-        v-model="form.fullname"
-      />
-      <hr />
-
-      <!-- USER MAIL DOMAIN -->
-      <FormField v-bind="fields.domain" :validation="v$.form.domain">
-        <template #default="{ self }">
-          <BInputGroup>
-            <BInputGroupText id="local-part" tag="label" class="border-right-0">
-              {{ form.username }}@
-            </BInputGroupText>
-
-            <SelectItem
-              aria-labelledby="local-part"
-              aria-describedby="mail__BV_description_"
-              v-model="form.domain"
-              v-bind="self"
-            />
-          </BInputGroup>
-        </template>
-      </FormField>
-      <hr />
-
-      <!-- USER PASSWORD -->
-      <FormField
-        v-bind="fields.password"
-        v-model="form.password"
-        :validation="v$.form.password"
-      />
-
-      <!-- USER PASSWORD CONFIRMATION -->
-      <FormField
-        v-bind="fields.confirmation"
-        v-model="form.confirmation"
-        :validation="v$.form.confirmation"
-      />
+      <template #component:domain="componentProps">
+        <BInputGroup>
+          <BInputGroupText id="local-part" tag="label" class="border-right-0">
+            {{ form.username }}@
+          </BInputGroupText>
+
+          <SelectItem v-bind="componentProps" v-model="form.domain" />
+        </BInputGroup>
+      </template>
     </CardForm>
   </ViewBase>
 </template>
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index cb2981d9a..914bc9a4c 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { useVuelidate } from '@vuelidate/core'
-import { computed, nextTick, reactive, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
 import type ViewBase from '@/components/globals/ViewBase.vue'
+import { useArrayRule, useForm } from '@/composables/form'
 import { useInitialQueries } from '@/composables/useInitialQueries'
-import { arrayDiff } from '@/helpers/commons'
+import { arrayDiff, asUnreffed } from '@/helpers/commons'
 import {
   emailForward,
   emailLocalPart,
-  helpers,
   integer,
   minLength,
   minValue,
@@ -25,6 +24,7 @@ import {
   sizeToM,
 } from '@/helpers/yunohostArguments'
 import { useStoreGetters } from '@/store/utils'
+import type { AdressModelValue, FieldProps, FormFieldDict } from '@/types/form'
 
 const props = defineProps<{
   name: string
@@ -44,124 +44,138 @@ const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
 
 const { user, domainsAsChoices, mainDomain } = useStoreGetters()
 
-const fields = {
+type Form = typeof form.value
+const form = ref({
+  username: props.name,
+  fullname: '',
+  mail: { localPart: '', separator: '@', domain: '' } as AdressModelValue,
+  mailbox_quota: '' as string | number,
+  mail_aliases: [] as AdressModelValue[],
+  mail_forward: [] as string[],
+  change_password: '',
+  confirmation: '',
+})
+const fields = reactive({
   username: {
+    component: 'InputItem',
     label: t('user_username'),
-    modelValue: props.name,
-    props: { id: 'username', disabled: true },
-  },
+    props: {
+      id: 'username',
+      disabled: true,
+    },
+  } satisfies FieldProps<'InputItem', Form['username']>,
 
   fullname: {
+    component: 'InputItem',
     label: t('user_fullname'),
+    rules: { required, nameValidator },
     props: {
       id: 'fullname',
       placeholder: t('placeholder.fullname'),
     },
-  },
+  } satisfies FieldProps<'InputItem', Form['fullname']>,
 
   mail: {
+    component: 'AdressItem',
     label: t('user_email'),
-    props: { id: 'mail', choices: domainsAsChoices },
-  },
+    rules: {
+      localPart: { required, email: emailLocalPart },
+    },
+    props: { id: 'mail', choices: asUnreffed(domainsAsChoices) },
+  } satisfies FieldProps<'AdressItem', Form['mail']>,
 
   mailbox_quota: {
+    append: 'M',
+    component: 'InputItem',
     label: t('user_mailbox_quota'),
     description: t('mailbox_quota_description'),
-    example: t('mailbox_quota_example'),
+    // example: t('mailbox_quota_example'),
+    rules: { integer, minValue: minValue(0) },
     props: {
       id: 'mailbox-quota',
       placeholder: t('mailbox_quota_placeholder'),
     },
-  },
+  } satisfies FieldProps<'InputItem', Form['mailbox_quota']>,
 
   mail_aliases: {
+    component: 'AdressItem',
+    rules: asUnreffed(
+      useArrayRule(() => form.value.mail_aliases, {
+        localPart: { required, email: emailLocalPart },
+      }),
+    ),
     props: {
       placeholder: t('placeholder.username'),
-      choices: domainsAsChoices,
+      choices: asUnreffed(domainsAsChoices),
     },
-  },
+  } satisfies FieldProps<'AdressItem', Form['mail_aliases']>,
 
   mail_forward: {
+    component: 'InputItem',
+    rules: asUnreffed(
+      useArrayRule(() => form.value.mail_forward, { required, emailForward }),
+    ),
     props: {
       placeholder: t('user_new_forward'),
       type: 'email',
     },
-  },
+  } satisfies FieldProps<'InputItem', Form['mail_forward']>,
 
   change_password: {
+    component: 'InputItem',
     label: t('password'),
     description: t('good_practices_about_user_password'),
     descriptionVariant: 'warning',
+    rules: { passwordLenght: minLength(8) },
     props: {
       id: 'change_password',
       type: 'password',
       placeholder: '••••••••',
       autocomplete: 'new-password',
     },
-  },
+  } satisfies FieldProps<'InputItem', Form['change_password']>,
 
   confirmation: {
+    component: 'InputItem',
     label: t('password_confirmation'),
+    rules: asUnreffed(
+      computed(() => ({ passwordMatch: sameAs(form.value.change_password) })),
+    ),
     props: {
       id: 'confirmation',
       type: 'password',
       placeholder: '••••••••',
       autocomplete: 'new-password',
     },
-  },
-}
-const form = reactive({
-  fullname: '',
-  mail: { localPart: '', separator: '@', domain: '' },
-  mailbox_quota: '',
-  mail_aliases: [],
-  mail_forward: [],
-  change_password: '',
-  confirmation: '',
-})
-const rules = computed(() => ({
-  fullname: { required, nameValidator },
-  mail: {
-    localPart: { required, email: emailLocalPart },
-  },
-  mailbox_quota: { integer, minValue: minValue(0) },
-  mail_aliases: {
-    $each: helpers.forEach({
-      localPart: { required, email: emailLocalPart },
-    }),
-  },
-  mail_forward: {
-    $each: helpers.forEach({
-      mail: { required, emailForward },
-    }),
-  },
-  change_password: { passwordLenght: minLength(8) },
-  confirmation: { passwordMatch: sameAs(form.change_password) },
-}))
-const v$ = useVuelidate(rules, form)
-const serverError = ref('')
+  } satisfies FieldProps<'InputItem', Form['confirmation']>,
+} satisfies FormFieldDict<Form>)
+
+const { v, onSubmit } = useForm(form, fields)
 
 function onQueriesResponse(user_: any) {
-  form.fullname = user_.fullname
-  form.mail = adressToFormValue(user_.mail)
+  form.value.fullname = user_.fullname
+  form.value.mail = adressToFormValue(user_.mail)
   if (user_['mail-aliases']) {
-    form.mail_aliases = user_['mail-aliases'].map((mail) =>
+    form.value.mail_aliases = user_['mail-aliases'].map((mail) =>
       adressToFormValue(mail),
     )
   }
   if (user_['mail-forward']) {
-    form.mail_forward = user_['mail-forward'].map((mail) => ({ mail })) // Copy value
+    form.value.mail_forward = user_['mail-forward'].map((mail) => ({ mail })) // Copy value
   }
   // mailbox-quota could be 'No quota' or 'Pas de quota'...
   if (parseInt(user_['mailbox-quota'].limit) > 0) {
-    form.mailbox_quota = sizeToM(user_['mailbox-quota'].limit)
+    form.value.mailbox_quota = sizeToM(user_['mailbox-quota'].limit)
   } else {
-    form.mailbox_quota = ''
+    form.value.mailbox_quota = ''
   }
 }
 
-async function onSubmit() {
-  const formData = await formatFormData(form, { flatten: true })
+const onUserEdit = onSubmit(async (onError, serverErrors) => {
+  const { data: formData } = await formatFormData(form.value, {
+    flatten: true,
+    extract: ['username'],
+  })
   // FIXME not sure computed can be executed?
   const user_ = user.value(props.name)
   const data = {}
@@ -169,7 +183,7 @@ async function onSubmit() {
     formData.mailbox_quota = ''
   }
 
-  formData.mail_forward = formData.mail_forward?.map((v) => v.mail)
+  // formData.mail_forward = formData.mail_forward?.map((v) => v.mail)
 
   for (const key of ['mail_aliases', 'mail_forward']) {
     const dashedKey = key.replace('_', '-')
@@ -193,7 +207,7 @@ async function onSubmit() {
   }
 
   if (Object.keys(data).length === 0) {
-    serverError.value = t('error_modify_something')
+    serverErrors.global = [t('error_modify_something')]
     return
   }
 
@@ -205,132 +219,45 @@ async function onSubmit() {
     .then(() => {
       router.push({ name: 'user-info', param: { name: props.name } })
     })
-    .catch((err) => {
-      if (err.name !== 'APIBadRequestError') throw err
-      serverError.value = err.message
-    })
-}
-
-function addEmailField(type: 'aliases' | 'forward') {
-  form['mail_' + type].push(
-    type === 'aliases'
-      ? { localPart: '', separator: '@', domain: mainDomain.value }
-      : { mail: '' },
-  )
-  // Focus last input after rendering update
-  nextTick(() => {
-    const inputs = viewElem.value!.$el.querySelectorAll(`#mail-${type} input`)
-    inputs[inputs.length - 1].focus()
-  })
-}
-
-function removeEmailField(type: 'aliases' | 'forward', index: number) {
-  form['mail_' + type].splice(index, 1)
-}
+    .catch(onError)
+})
 </script>
 
 <template>
   <ViewBase ref="viewElem" :loading="loading" skeleton="CardFormSkeleton">
     <CardForm
-      :title="$t('user_username_edit', { name })"
+      v-model="form"
       icon="user"
-      :validation="v$"
-      :server-error="serverError"
-      @submit.prevent="onSubmit"
+      :fields="fields"
+      :title="$t('user_username_edit', { name })"
+      :validations="v"
+      @submit.prevent="onUserEdit"
     >
-      <!-- USERNAME (disabled) -->
-      <FormField v-bind="fields.username" />
-
-      <!-- USER FULLNAME -->
-      <FormField
-        v-bind="fields.fullname"
-        v-model="form.fullname"
-        :validation="v$.form.fullname"
-      />
-
-      <hr />
-
-      <!-- USER EMAIL -->
-      <FormField v-bind="fields.mail" :validation="v$.form.mail">
-        <template #default="{ self }">
-          <AdressItem v-bind="self" v-model="form.mail" />
-        </template>
-      </FormField>
-
-      <!-- MAILBOX QUOTA -->
-      <FormField
-        v-bind="fields.mailbox_quota"
-        :validation="v$.form.mailbox_quota"
-      >
-        <template #default="{ self }">
-          <BInputGroup append="M">
-            <InputItem v-bind="self" v-model="form.mailbox_quota" />
-          </BInputGroup>
-        </template>
-      </FormField>
-      <hr />
-
-      <!-- MAIL ALIASES -->
-      <FormField :label="$t('user_emailaliases')" id="mail-aliases">
-        <div v-for="(mail, i) in form.mail_aliases" :key="i" class="mail-list">
-          <FormField
-            v-bind="fields.mail_aliases"
-            :id="'mail_aliases' + i"
-            :validation="v$.form.mail_aliases"
-            :validation-index="i"
-          >
-            <template #default="{ self }">
-              <AdressItem v-bind="self" v-model="form.mail_aliases[i]" />
-            </template>
-          </FormField>
-
-          <BButton variant="danger" @click="removeEmailField('aliases', i)">
-            <YIcon :title="$t('delete')" iname="trash-o" />
-            <span class="visually-hidden">{{ $t('delete') }}</span>
-          </BButton>
-        </div>
-
-        <BButton variant="success" @click="addEmailField('aliases')">
-          <YIcon iname="plus" /> {{ $t('user_emailaliases_add') }}
-        </BButton>
-      </FormField>
-
-      <!-- MAIL FORWARD -->
-      <FormField :label="$t('user_emailforward')" id="mail-forward">
-        <div v-for="(mail, i) in form.mail_forward" :key="i" class="mail-list">
-          <FormField
-            v-bind="fields.mail_forward"
-            v-model="form.mail_forward[i].mail"
-            :id="'mail-forward' + i"
-            :validation="v$.form.mail_forward"
-            :validation-index="i"
-          />
-
-          <BButton variant="danger" @click="removeEmailField('forward', i)">
-            <YIcon :title="$t('delete')" iname="trash-o" />
-            <span class="visually-hidden">{{ $t('delete') }}</span>
-          </BButton>
-        </div>
-
-        <BButton variant="success" @click="addEmailField('forward')">
-          <YIcon iname="plus" /> {{ $t('user_emailforward_add') }}
-        </BButton>
-      </FormField>
-      <hr />
-
-      <!-- USER PASSWORD -->
-      <FormField
-        v-bind="fields.change_password"
-        v-model="form.change_password"
-        :validation="v$.form.change_password"
-      />
-
-      <!-- USER PASSWORD CONFIRMATION -->
-      <FormField
-        v-bind="fields.confirmation"
-        v-model="form.confirmation"
-        :validation="v$.form.confirmation"
-      />
+      <template #field:mail_aliases="fieldProps">
+        <FormFieldMultiple
+          v-bind="fieldProps"
+          v-model="form.mail_aliases"
+          :add-btn-text="t('user_emailaliases_add')"
+          :default-value="
+            () => ({
+              localPart: '',
+              separator: '@',
+              domain: mainDomain,
+            })
+          "
+          :validation="v.form.mail_aliases"
+        />
+      </template>
+
+      <template #field:mail_forward="fieldProps">
+        <FormFieldMultiple
+          v-bind="fieldProps"
+          v-model="form.mail_forward"
+          :add-btn-text="t('user_emailforward_add')"
+          :default-value="() => ''"
+          :validation="v.form.mail_forward"
+        />
+      </template>
     </CardForm>
   </ViewBase>
 </template>
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index 66b165306..43889990e 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -1,30 +1,39 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 
 import api from '@/api'
+import { useForm } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { required } from '@/helpers/validators'
 import { formatFormData } from '@/helpers/yunohostArguments'
-import { useVuelidate } from '@vuelidate/core'
+import type { FieldProps, FileModelValue, FormFieldDict } from '@/types/form'
 
 const { t } = useI18n()
 const router = useRouter()
 const store = useStore()
 const modalConfirm = useAutoModal()
 
-const fields = {
+type Form = typeof form.value
+const form = ref({
+  csvfile: { file: null } as FileModelValue,
+  update: false,
+  delete: false,
+})
+const fields = reactive({
   csvfile: {
+    component: 'FileItem',
     label: t('users_import_csv_file'),
     description: t('users_import_csv_file_desc'),
-    component: 'FileItem',
+    rules: { file: required },
     props: {
       id: 'csvfile',
       accept: 'text/csv',
       placeholder: t('placeholder.file'),
     },
-  },
+  } satisfies FieldProps<'FileItem', Form['csvfile']>,
 
   update: {
     label: t('users_import_update'),
@@ -33,28 +42,22 @@ const fields = {
     props: {
       id: 'update',
     },
-  },
+  } satisfies FieldProps<'CheckboxItem', Form['update']>,
 
   delete: {
+    component: 'CheckboxItem',
     label: t('users_import_delete'),
     description: t('users_import_delete_desc'),
-    component: 'CheckboxItem',
     props: {
       id: 'delete',
     },
-  },
-}
-const form = reactive({
-  csvfile: { file: null },
-  update: false,
-  delete: false,
-})
-const rules = computed(() => ({}))
-const v$ = useVuelidate(rules, form)
-const serverError = ref('')
+  } satisfies FieldProps<'CheckboxItem', Form['delete']>,
+} satisfies FormFieldDict<Form>)
+
+const { v, onSubmit } = useForm(form, fields)
 
-async function onSubmit() {
-  if (form.delete) {
+const onUserImport = onSubmit(async (onError) => {
+  if (form.value.delete) {
     const confirmed = await modalConfirm(
       t('users_import_confirm_destructive'),
       { okTitle: t('users_import_delete_others') },
@@ -62,7 +65,7 @@ async function onSubmit() {
     if (!confirmed) return
   }
 
-  const requestArgs = { ...form } as Partial<typeof form>
+  const requestArgs = { ...form.value } as Partial<Form>
   if (!requestArgs.delete) delete requestArgs.delete
   if (!requestArgs.update) delete requestArgs.update
   const data = await formatFormData(requestArgs)
@@ -78,31 +81,17 @@ async function onSubmit() {
       ])
       router.push({ name: 'user-list' })
     })
-    .catch((error) => {
-      serverError.value = error.message
-    })
-}
+    .catch(onError)
+})
 </script>
 
 <template>
   <CardForm
-    :title="$t('users_import')"
+    v-model="form"
     icon="user-plus"
-    :validation="v$"
-    :server-error="serverError"
-    @submit.prevent="onSubmit"
-  >
-    <!-- CSV FILE -->
-    <FormField
-      v-bind="fields.csvfile"
-      v-model="form.csvfile"
-      :validation="v$.form.csvfile"
-    />
-
-    <!-- UPDATE -->
-    <FormField v-bind="fields.update" v-model="form.update" />
-
-    <!-- DELETE -->
-    <FormField v-bind="fields.delete" v-model="form.delete" />
-  </CardForm>
+    :fields="fields"
+    :title="$t('users_import')"
+    :validations="v"
+    @submit.prevent="onUserImport"
+  />
 </template>

From 3e60b96ee07eb6f541357a2b16e988d93d895e2e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 8 Jul 2024 16:20:19 +0200
Subject: [PATCH 098/275] ts: add useAutoModal typing

---
 app/src/composables/useAutoModal.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/src/composables/useAutoModal.ts b/app/src/composables/useAutoModal.ts
index b0ba93ec9..ecb981f26 100644
--- a/app/src/composables/useAutoModal.ts
+++ b/app/src/composables/useAutoModal.ts
@@ -1,18 +1,21 @@
+import type { OrchestratedModal } from 'bootstrap-vue-next'
+import { BModal, useModalController } from 'bootstrap-vue-next'
 import { h } from 'vue'
-import { useModalController, BModal } from 'bootstrap-vue-next'
+import { useI18n } from 'vue-i18n'
 import { VueShowdown } from 'vue-showdown'
 
 export function useAutoModal() {
+  const { t } = useI18n()
   const { confirm, show } = useModalController()
 
   return function (
-    message,
-    props_,
+    message: string,
+    props_: OrchestratedModal = {},
     { markdown = false, cancelable = true } = {},
   ) {
-    const props = {
-      okTitle: this.$t('ok'),
-      cancelTitle: this.$t('cancel'),
+    const props: OrchestratedModal = {
+      okTitle: t('ok'),
+      cancelTitle: t('cancel'),
       centered: true,
       okOnly: !cancelable,
       ...(markdown

From 501bce484ac24fb11ea65faa70c3ca42f22a3df7 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 9 Jul 2024 17:05:32 +0200
Subject: [PATCH 099/275] feat: add useSearch composable to search in Array or
 AnyTreeNode

---
 app/src/components/globals/ViewSearch.vue | 53 +++++++++++------------
 app/src/composables/useSearch.ts          | 46 ++++++++++++++++++++
 app/src/helpers/data/tree.ts              |  4 ++
 3 files changed, 76 insertions(+), 27 deletions(-)
 create mode 100644 app/src/composables/useSearch.ts

diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index a52aa1ad4..1cebd5a3a 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -1,18 +1,20 @@
-<script setup lang="ts" generic="T extends Obj">
-import type { Component } from 'vue'
+<script setup lang="ts" generic="T extends Obj | AnyTreeNode">
+import { computed, type Component } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import type { AnyTreeNode } from '@/helpers/data/tree'
 import type { Obj } from '@/types/commons'
 
 const props = withDefaults(
   defineProps<{
-    items: T[] | null
+    items?: T[] | null
     itemsName: string | null
-    filteredItems: T[] | null
-    search?: string
+    modelValue?: string
     skeleton?: string | Component
   }>(),
   {
-    search: undefined,
+    items: undefined,
+    modelValue: undefined,
     skeleton: 'ListGroupSkeleton',
   },
 )
@@ -27,9 +29,21 @@ const slots = defineSlots<{
   skeleton: any
 }>()
 
-const emit = defineEmits<{
-  'update:search': [value: string]
+defineEmits<{
+  'update:modelValue': [value: string]
 }>()
+
+const model = defineModel<string>()
+
+const { t } = useI18n()
+const noItemsMessage = computed(() => {
+  if (props.items) return
+  return t(
+    props.items === undefined ? 'items_verbose_count' : 'search.not_found',
+    { items: t('items.' + props.itemsName, 0) },
+    0,
+  )
+})
 </script>
 
 <template>
@@ -45,11 +59,8 @@ const emit = defineEmits<{
 
         <BFormInput
           id="top-bar-search"
-          :modelValue="search"
-          @update:modelValue="emit('update:search', $event)"
-          :placeholder="
-            $t('search.for', { items: $t('items.' + itemsName, 2) })
-          "
+          v-model="model"
+          :placeholder="t('search.for', { items: t('items.' + itemsName, 2) })"
           :disabled="!items"
         />
       </BInputGroup>
@@ -63,22 +74,10 @@ const emit = defineEmits<{
     </template>
 
     <template #default>
-      <BAlert
-        v-if="items === null || filteredItems === null"
-        :modelValue="true"
-        variant="warning"
-      >
+      <BAlert v-if="noItemsMessage" :model-value="true" variant="warning">
         <slot name="alert-message">
           <YIcon iname="exclamation-triangle" />
-          {{
-            $t(
-              items === null ? 'items_verbose_count' : 'search.not_found',
-              {
-                items: $t('items.' + itemsName, 0),
-              },
-              0,
-            )
-          }}
+          {{ noItemsMessage }}
         </slot>
       </BAlert>
 
diff --git a/app/src/composables/useSearch.ts b/app/src/composables/useSearch.ts
new file mode 100644
index 000000000..c701bb365
--- /dev/null
+++ b/app/src/composables/useSearch.ts
@@ -0,0 +1,46 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue'
+import { computed, ref, toValue, watch } from 'vue'
+
+import type { AnyTreeNode, TreeRootNode } from '@/helpers/data/tree'
+
+export function useSearch<
+  T extends any[] | TreeRootNode,
+  V extends T extends (infer V)[] ? V : AnyTreeNode,
+>(
+  items: MaybeRefOrGetter<T | undefined> | ComputedRef<T | undefined>,
+  filterFn: (search: string, item: V, index: number, arr: T) => boolean,
+  {
+    externalSearch,
+    filterIfNoSearch = false,
+    filterAllFn,
+  }: {
+    filterAllFn?: (search: string, items: T) => boolean | undefined
+    filterIfNoSearch?: boolean
+    externalSearch?: MaybeRefOrGetter<string>
+  } = {},
+): [search: Ref<string>, filteredItems: ComputedRef<T | undefined | null>] {
+  const search = ref(toValue(externalSearch) ?? '')
+  watch(
+    () => toValue(externalSearch),
+    (s) => (search.value = s ?? ''),
+  )
+
+  const filteredItems = computed(() => {
+    const items_ = toValue(items)
+    const s = toValue(search.value).toLowerCase()
+    if (!items_) return undefined
+    if (filterAllFn) {
+      const returnAll = filterAllFn(s, items_)
+      if (returnAll !== undefined) {
+        return returnAll ? items_ : undefined
+      }
+    }
+    if (!s && !filterIfNoSearch) return items_
+    const filteredItems_ = items_.filter((...args) =>
+      filterFn(s, ...(args as [V, number, T])),
+    ) as T
+    return filteredItems_.length ? filteredItems_ : null
+  })
+
+  return [search, filteredItems]
+}
diff --git a/app/src/helpers/data/tree.ts b/app/src/helpers/data/tree.ts
index 52e5f4e2f..8c503fc0a 100644
--- a/app/src/helpers/data/tree.ts
+++ b/app/src/helpers/data/tree.ts
@@ -106,6 +106,10 @@ class TreeNode {
       }
     })
   }
+
+  get length(): number {
+    return this.children.length
+  }
 }
 
 export class TreeRootNode extends TreeNode {

From 8bb2451e9c0a91604ec51acb743605caa8821757 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 9 Jul 2024 17:07:39 +0200
Subject: [PATCH 100/275] refactor: use useSearch in views

---
 app/src/views/app/AppCatalog.vue      | 84 ++++++++++++++-------------
 app/src/views/app/AppList.vue         | 26 ++++-----
 app/src/views/domain/DomainList.vue   | 36 ++++--------
 app/src/views/group/GroupList.vue     | 61 +++++++++----------
 app/src/views/service/ServiceList.vue | 20 +++----
 app/src/views/tool/ToolLogs.vue       | 22 +++----
 app/src/views/user/UserList.vue       | 28 ++++-----
 7 files changed, 122 insertions(+), 155 deletions(-)

diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 8ece21b2d..3f709f1c3 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -7,8 +7,10 @@ import CardDeckFeed from '@/components/CardDeckFeed.vue'
 import { useForm } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { useInitialQueries } from '@/composables/useInitialQueries'
+import { useSearch } from '@/composables/useSearch'
 import { randint } from '@/helpers/commons'
 import { appRepoUrl, required } from '@/helpers/validators'
+import type { Obj } from '@/types/commons'
 import type { FieldProps, FormFieldDict } from '@/types/form'
 
 const props = withDefaults(
@@ -35,10 +37,42 @@ const { loading } = useInitialQueries(
   { onQueriesResponse },
 )
 
-const apps = ref()
 const selectedApp = ref()
 const antifeatures = ref()
 
+const apps = ref<Obj[] | undefined>()
+const [search, filteredApps] = useSearch(
+  apps,
+  (s, app) => {
+    // app doesn't match quality filter
+    if (props.quality !== 'all' && !app[props.quality]) return false
+    // app doesn't match category filter
+    if (props.category !== 'all' && app.category !== props.category)
+      return false
+    if (props.subtag !== 'all') {
+      const appMatchSubtag =
+        props.subtag === 'others'
+          ? app.subtags.length === 0
+          : app.subtags.includes(props.subtag)
+      // app doesn't match subtag filter
+      if (!appMatchSubtag) return false
+    }
+    if (s === '') return true
+    if (app.searchValues.includes(search)) return true
+    return false
+  },
+  {
+    externalSearch: () => props.search,
+    filterIfNoSearch: true,
+    filterAllFn(s) {
+      if (props.category === null) return false
+      if (props.quality === 'all' && props.category === 'all' && s === '') {
+        return true
+      }
+    },
+  },
+)
+
 const form = ref({ url: '' })
 const fields = {
   url: {
@@ -68,34 +102,6 @@ const categories = reactive([
   // The rest is filled from api data
 ])
 
-const filteredApps = computed(() => {
-  if (!apps.value || props.category === null) return
-  const search = props.search.toLowerCase()
-
-  if (props.quality === 'all' && props.category === 'all' && search === '') {
-    return apps.value
-  }
-  const filtered = apps.value.filter((app) => {
-    // app doesn't match quality filter
-    if (props.quality !== 'all' && !app[props.quality]) return false
-    // app doesn't match category filter
-    if (props.category !== 'all' && app.category !== props.category)
-      return false
-    if (props.subtag !== 'all') {
-      const appMatchSubtag =
-        props.subtag === 'others'
-          ? app.subtags.length === 0
-          : app.subtags.includes(props.subtag)
-      // app doesn't match subtag filter
-      if (!appMatchSubtag) return false
-    }
-    if (search === '') return true
-    if (app.searchValues.includes(search)) return true
-    return false
-  })
-  return filtered.length ? filtered : null
-})
-
 const subtags = computed(() => {
   // build an options array for subtags v-model/options
   if (props.category && categories.length > 2) {
@@ -196,8 +202,8 @@ const onCustomInstallClick = onSubmit(async () => {
 
 <template>
   <ViewSearch
-    :filtered-items="filteredApps"
-    :items="apps"
+    v-model="search"
+    :items="filteredApps"
     items-name="apps"
     :loading="loading"
   >
@@ -211,15 +217,15 @@ const onCustomInstallClick = onSubmit(async () => {
 
           <BFormInput
             id="search-input"
+            :model-value="search"
             :placeholder="$t('search.for', { items: $t('items.apps', 2) })"
-            :modelValue="search"
-            @update:modelValue="updateQuery('search', $event)"
+            @update:model-value="updateQuery('search', $event)"
           />
 
           <BFormSelect
-            :modelValue="quality"
+            :model-value="quality"
             :options="qualityOptions"
-            @update:modelValue="updateQuery('quality', $event)"
+            @update:model-value="updateQuery('quality', $event)"
           />
         </BInputGroup>
 
@@ -230,9 +236,9 @@ const onCustomInstallClick = onSubmit(async () => {
           </BInputGroupText>
 
           <BFormSelect
-            :modelValue="category"
+            :model-value="category"
             :options="categories"
-            @update:modelValue="updateQuery('category', $event)"
+            @update:model-value="updateQuery('category', $event)"
           />
 
           <BButton
@@ -260,9 +266,9 @@ const onCustomInstallClick = onSubmit(async () => {
 
           <BFormSelect
             id="subtags-select"
-            :modelValue="subtag"
+            :model-value="subtag"
             :options="subtags"
-            @update:modelValue="updateQuery('subtag', $event)"
+            @update:model-value="updateQuery('subtag', $event)"
           />
         </BInputGroup>
       </div>
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index 718693514..02987fe8e 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -1,29 +1,24 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
 import { useInitialQueries } from '@/composables/useInitialQueries'
+import { useSearch } from '@/composables/useSearch'
+import type { Obj } from '@/types/commons'
 
 const { loading } = useInitialQueries([['GET', 'apps?full']], {
   onQueriesResponse,
 })
-const search = ref('')
-const apps = ref()
 
-const filteredApps = computed(() => {
-  if (!apps.value) return
-  const search_ = search.value.toLowerCase()
-  // Check if any value in apps (label, id, name, description) match the search query.
-  const filtered = apps.value.filter((app) =>
-    Object.values(app).some(
-      (item) => item && item.toLowerCase().includes(search_),
-    ),
+const apps = ref<Obj[] | undefined>()
+const [search, filteredApps] = useSearch(apps, (s, app) => {
+  return Object.values(app).some(
+    (value) => value && value.toLowerCase().includes(s),
   )
-  return filtered.length ? filtered : null
 })
 
 function onQueriesResponse(data: any) {
   if (data.apps.length === 0) {
-    apps.value = null
+    apps.value = undefined
     return
   }
 
@@ -39,10 +34,9 @@ function onQueriesResponse(data: any) {
 
 <template>
   <ViewSearch
-    v-model:search="search"
-    :filtered-items="filteredApps"
+    v-model="search"
     items-name="installed_apps"
-    :items="apps"
+    :items="filteredApps"
     :loading="loading"
   >
     <template #top-bar-buttons>
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index e4fa3aba0..41f793dd3 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -1,41 +1,29 @@
 <script setup lang="ts">
 import { useStoreGetters } from '@/store/utils'
-import { computed, ref } from 'vue'
 
 import RecursiveListGroup from '@/components/RecursiveListGroup.vue'
 import { useInitialQueries } from '@/composables/useInitialQueries'
+import { useSearch } from '@/composables/useSearch'
 import type { TreeRootNode } from '@/helpers/data/tree'
+import type { ComputedRef } from 'vue'
 
-const { domains, mainDomain, domainsTree } = useStoreGetters()
+const { mainDomain, domainsTree } = useStoreGetters()
 const { loading } = useInitialQueries([
   ['GET', { uri: 'domains', storeKey: 'domains' }],
 ])
 
-const search = ref('')
-
-const tree = computed(() => {
+const [search, filteredTree] = useSearch(
   // FIXME rm ts type when moved to pinia or else
-  const tree = domainsTree.value as TreeRootNode | undefined
-  if (!tree) return
-  const search_ = search.value.toLowerCase()
-  if (search_) {
-    return tree.filter((node) => node.id.includes(search_))
-  }
-  return tree
-})
-
-const hasFilteredItems = computed(() => {
-  if (!tree.value) return null
-  return tree.value.children.length ? tree.value.children : null
-})
+  domainsTree as ComputedRef<TreeRootNode | undefined>,
+  (s, node) => node.id.includes(s),
+)
 </script>
 
 <template>
   <ViewSearch
     id="domain-list"
-    v-model:search="search"
-    :filtered-items="hasFilteredItems"
-    :items="domains"
+    v-model="search"
+    :items="filteredTree ? filteredTree.children : filteredTree"
     items-name="domains"
     :loading="loading"
   >
@@ -47,8 +35,8 @@ const hasFilteredItems = computed(() => {
     </template>
 
     <RecursiveListGroup
-      v-if="tree"
-      :tree="tree"
+      v-if="filteredTree"
+      :tree="filteredTree"
       :toggle-text="$t('domain.toggle_subdomains')"
       class="mb-5"
     >
@@ -67,9 +55,9 @@ const hasFilteredItems = computed(() => {
 
             <small
               v-if="data.name === mainDomain"
+              v-b-tooltip.hover
               :title="$t('domain.types.main_domain')"
               class="ms-1"
-              v-b-tooltip.hover
             >
               <YIcon iname="star" />
             </small>
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 8e648e6a6..9ed2c7c33 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import api from '@/api'
 import TagsSelectizeItem from '@/components/globals/formItems/TagsSelectizeItem.vue'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { useInitialQueries } from '@/composables/useInitialQueries'
+import { useSearch } from '@/composables/useSearch'
 import { isEmptyValue } from '@/helpers/commons'
+import type { Obj } from '@/types/commons'
 
 // TODO add global search with type (search by: group, user, permission)
 // TODO add vuex store update on inputs ?
@@ -28,25 +30,15 @@ const { loading } = useInitialQueries(
   { onQueriesResponse },
 )
 
-const search = ref('')
 const permissions = ref()
 const permissionsOptions = ref()
-const primaryGroups = ref()
+const primaryGroups = ref<Obj[] | undefined>()
 const userGroups = ref()
 const usersOptions = ref()
 const activeUserGroups = ref()
 
-const filteredGroups = computed(() => {
-  const groups = primaryGroups.value
-  if (!groups) return
-  const search_ = search.value.toLowerCase()
-  const filtered = {}
-  for (const groupName in groups) {
-    if (groupName.toLowerCase().includes(search_)) {
-      filtered[groupName] = groups[groupName]
-    }
-  }
-  return isEmptyValue(filtered) ? null : filtered
+const [search, filteredGroups] = useSearch(primaryGroups, (s, group) => {
+  return group.name.toLowerCase().includes(s)
 })
 
 function onQueriesResponse(users: any, allGroups: any, permsDict: any) {
@@ -57,12 +49,12 @@ function onQueriesResponse(users: any, allGroups: any, permsDict: any) {
     ...value,
   }))
   const userNames = users ? Object.keys(users) : []
-  const primaryGroups_ = {}
+  const primaryGroups_ = []
   const userGroups_ = {}
 
   for (const groupName in allGroups) {
     // copy the group to unlink it from the store
-    const group_ = { ...allGroups[groupName] }
+    const group_ = { ...allGroups[groupName], name: groupName }
     group_.permissions = group_.permissions.map((perm) => {
       return permsDict[perm].label
     })
@@ -103,7 +95,7 @@ function onQueriesResponse(users: any, allGroups: any, permsDict: any) {
         .map(({ id }) => permsDict[id].label)
     }
 
-    primaryGroups_[groupName] = group_
+    primaryGroups_.push(group_)
   }
 
   const activeUserGroups_ = Object.entries(userGroups_)
@@ -179,16 +171,17 @@ async function deleteGroup(groupName) {
       { key: 'groups.delete', name: groupName },
     )
     .then(() => {
-      delete primaryGroups.value[groupName]
+      primaryGroups.value = primaryGroups.value?.filter(
+        (group) => group.name !== groupName,
+      )
     })
 }
 </script>
 
 <template>
   <ViewSearch
-    v-model:search="search"
-    :filtered-items="filteredGroups"
-    :items="primaryGroups"
+    v-model="search"
+    :items="filteredGroups"
     items-name="groups"
     :loading="loading"
     skeleton="CardFormSkeleton"
@@ -201,13 +194,13 @@ async function deleteGroup(groupName) {
 
     <!-- PRIMARY GROUPS CARDS -->
     <YCard
-      v-for="(group, groupName) in filteredGroups"
-      :key="groupName"
+      v-for="group in filteredGroups"
+      :key="group.name"
       collapsable
       :title="
         group.isSpecial
-          ? $t('group_' + groupName)
-          : `${$t('group')} '${groupName}'`
+          ? $t('group_' + group.name)
+          : `${$t('group')} '${group.name}'`
       "
       icon="group"
     >
@@ -215,7 +208,7 @@ async function deleteGroup(groupName) {
         <!-- DELETE GROUP -->
         <BButton
           v-if="!group.isSpecial"
-          @click="deleteGroup(groupName)"
+          @click="deleteGroup(group.name)"
           size="sm"
           variant="danger"
         >
@@ -231,23 +224,23 @@ async function deleteGroup(groupName) {
           <template v-if="group.isSpecial">
             <p class="text-primary-emphasis">
               <YIcon iname="info-circle" />
-              {{ $t('group_explain_' + groupName) }}
+              {{ $t('group_explain_' + group.name) }}
             </p>
-            <p class="text-primary-emphasis" v-if="groupName === 'visitors'">
+            <p class="text-primary-emphasis" v-if="group.name === 'visitors'">
               <em>{{
                 $t('group_explain_visitors_needed_for_external_client')
               }}</em>
             </p>
           </template>
-          <template v-if="groupName == 'admins' || !group.isSpecial">
+          <template v-if="group.name == 'admins' || !group.isSpecial">
             <TagsSelectizeItem
               v-model="group.members"
               :options="usersOptions"
-              :id="groupName + '-users'"
+              :id="group.name + '-users'"
               :label="$t('group_add_member')"
               tag-icon="user"
               items-name="users"
-              @tag-update="onUserChanged({ ...$event, groupName })"
+              @tag-update="onUserChanged({ ...$event, groupName: group.name })"
             />
           </template>
         </BCol>
@@ -262,11 +255,13 @@ async function deleteGroup(groupName) {
           <TagsSelectizeItem
             v-model="group.permissions"
             :options="permissionsOptions"
-            :id="groupName + '-perms'"
+            :id="group.name + '-perms'"
             :label="$t('group_add_permission')"
             tag-icon="key-modern"
             items-name="permissions"
-            @tag-update="onPermissionChanged({ ...$event, groupName })"
+            @tag-update="
+              onPermissionChanged({ ...$event, groupName: group.name })
+            "
             :disabled-items="group.disabledItems"
           />
         </BCol>
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 6c421ce32..0d09925f2 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
 import { useInitialQueries } from '@/composables/useInitialQueries'
+import { useSearch } from '@/composables/useSearch'
 import { distanceToNow } from '@/helpers/filters/date'
+import type { Obj } from '@/types/commons'
 
 const { loading } = useInitialQueries([['GET', 'services']], {
   onQueriesResponse,
 })
-const search = ref('')
-const services = ref()
 
-const filteredServices = computed(() => {
-  if (!services.value) return
-  const services_ = services.value.filter(({ name }) => {
-    return name.toLowerCase().includes(search.value.toLowerCase())
-  })
-  return services_.length ? services_ : null
+const services = ref<Obj[] | undefined>()
+const [search, filteredServices] = useSearch(services, (s, service) => {
+  return service.name.toLowerCase().includes(s)
 })
 
 function onQueriesResponse(services_: any) {
@@ -34,9 +31,8 @@ function onQueriesResponse(services_: any) {
 <template>
   <ViewSearch
     id="service-list"
-    v-model:search="search"
-    :filtered-items="filteredServices"
-    :items="services"
+    v-model="search"
+    :items="filteredServices"
     items-name="services"
     :loading="loading"
   >
diff --git a/app/src/views/tool/ToolLogs.vue b/app/src/views/tool/ToolLogs.vue
index 58884a347..858380ab2 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -1,24 +1,19 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
 import { useInitialQueries } from '@/composables/useInitialQueries'
+import { useSearch } from '@/composables/useSearch'
 import { distanceToNow, readableDate } from '@/helpers/filters/date'
+import type { Obj } from '@/types/commons'
 
 const { loading } = useInitialQueries(
   [['GET', `logs?limit=${25}&with_details`]],
   { onQueriesResponse },
 )
 
-const search = ref('')
-const operations = ref()
-
-const filteredOperations = computed(() => {
-  if (!operations.value) return
-  const search_ = search.value.toLowerCase()
-  const operations_ = operations.value.filter(({ description }) => {
-    return description.toLowerCase().includes(search_)
-  })
-  return operations_.length ? operations_ : null
+const operations = ref<Obj[] | undefined>()
+const [search, filteredOperations] = useSearch(operations, (s, op) => {
+  return op.description.toLowerCase().includes(s)
 })
 
 function onQueriesResponse({ operation }: any) {
@@ -40,9 +35,8 @@ function onQueriesResponse({ operation }: any) {
 
 <template>
   <ViewSearch
-    v-model:search="search"
-    :filtered-items="filteredOperations"
-    :items="operations"
+    v-model="search"
+    :items="filteredOperations"
     items-name="logs"
     :loading="loading"
     skeleton="CardListSkeleton"
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 398296838..122e1e01d 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { type ComputedRef } from 'vue'
 import { useStore } from 'vuex'
 
 import { useInitialQueries } from '@/composables/useInitialQueries'
+import { useSearch } from '@/composables/useSearch'
 import { useStoreGetters } from '@/store/utils'
+import type { Obj } from '@/types/commons'
 
 const store = useStore()
 const { loading } = useInitialQueries([
@@ -15,20 +17,13 @@ const { loading } = useInitialQueries([
     },
   ],
 ])
-const { users } = useStoreGetters()
 
-const search = ref('')
-const filteredUsers = computed(() => {
-  if (!users.value) return
-  const search_ = search.value.toLowerCase()
-  const filtered = users.value.filter((user) => {
-    return (
-      user.username.toLowerCase().includes(search_) ||
-      user.groups.includes(search_)
-    )
-  })
-  return filtered.length === 0 ? null : filtered
-})
+const { users } = useStoreGetters()
+const [search, filteredUsers] = useSearch(
+  users as ComputedRef<Obj[] | undefined>,
+  (s, user) =>
+    user.username.toLowerCase().includes(s) || user.groups.includes(s),
+)
 
 function downloadExport() {
   const host = store.getters.host
@@ -38,9 +33,8 @@ function downloadExport() {
 
 <template>
   <ViewSearch
-    v-model:search="search"
-    :filtered-items="filteredUsers"
-    :items="users"
+    v-model="search"
+    :items="filteredUsers"
     items-name="users"
     :loading="loading"
   >

From 00fe9f42bc8e6e6c36048ae3b89259a1ca52c115 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 11 Jul 2024 15:10:18 +0200
Subject: [PATCH 101/275] ts: add i18n typing

---
 app/src/i18n/helpers.ts          | 42 +++++++++++++++++---------------
 app/src/i18n/supportedLocales.ts | 19 ++++++++++++++-
 app/src/store/settings.ts        | 11 +++------
 3 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/app/src/i18n/helpers.ts b/app/src/i18n/helpers.ts
index bc25555f7..f23730c4f 100644
--- a/app/src/i18n/helpers.ts
+++ b/app/src/i18n/helpers.ts
@@ -1,40 +1,42 @@
-import { nextTick } from 'vue'
-import store from '@/store'
 import i18n from '@/i18n'
-import supportedLocales from './supportedLocales'
+import store from '@/store'
+import { nextTick } from 'vue'
 
-export let dateFnsLocale
+import supportedLocales, {
+  isSupportedLocale,
+  type SupportedLocales,
+} from '@/i18n/supportedLocales'
+
+export let dateFnsLocale: any
 
 /**
  * Returns the first two supported locales that can be found in the `localStorage` or
  * in the user browser settings.
- *
- * @return {string[]}
  */
 function getDefaultLocales() {
-  const locale = store.getters.locale
-  const fallbackLocale = store.getters.fallbackLocale
+  const locale: SupportedLocales | null = store.getters.locale
+  const fallbackLocale: SupportedLocales | null = store.getters.fallbackLocale
   if (locale && fallbackLocale) return [locale, fallbackLocale]
 
   const navigatorLocales = navigator.languages || [navigator.language]
-  const defaultLocales = []
-  const supported = Object.keys(supportedLocales)
+  const defaultLocales: SupportedLocales[] = []
+
   for (const locale of navigatorLocales) {
-    if (supported.includes(locale) && !defaultLocales.includes(locale)) {
+    if (isSupportedLocale(locale) && !defaultLocales.includes(locale)) {
       defaultLocales.push(locale)
     } else {
       const lang = locale.split('-')[0]
-      if (supported.includes(lang) && !defaultLocales.includes(lang)) {
+      if (isSupportedLocale(lang) && !defaultLocales.includes(lang)) {
         defaultLocales.push(lang)
       }
     }
     if (defaultLocales.length === 2) break
   }
 
-  return defaultLocales
+  return defaultLocales as [SupportedLocales, SupportedLocales]
 }
 
-export async function setI18nLocale(locale) {
+export async function setI18nLocale(locale: SupportedLocales) {
   if (!i18n.global.availableLocales.includes(locale)) {
     await loadLocaleMessages(locale)
     // also query/set the date-fns locale object for time translation
@@ -47,22 +49,24 @@ export async function setI18nLocale(locale) {
   }
 
   if (i18n.mode === 'legacy') {
+    // @ts-ignore
     i18n.global.locale = locale
   } else {
     i18n.global.locale.value = locale
   }
 
-  document.querySelector('html').setAttribute('lang', locale)
+  document.querySelector('html')!.setAttribute('lang', locale)
   // FIXME can't currently change document direction easily since bootstrap still doesn't handle rtl.
   // document.dir = locale === 'ar' ? 'rtl' : 'ltr'
 }
 
-export async function setI18nFallbackLocale(locale) {
+export async function setI18nFallbackLocale(locale: SupportedLocales) {
   if (!i18n.global.availableLocales.includes(locale)) {
     await loadLocaleMessages(locale)
   }
 
   if (i18n.mode === 'legacy') {
+    // @ts-ignore
     i18n.global.fallbackLocale = [locale, 'en']
   } else {
     i18n.global.fallbackLocale.value = [locale, 'en']
@@ -74,7 +78,7 @@ export async function setI18nFallbackLocale(locale) {
  *
  * @return {Promise<string>} Promise that resolve the given locale string
  */
-export async function loadLocaleMessages(locale) {
+export async function loadLocaleMessages(locale: SupportedLocales) {
   // load locale messages with dynamic import
   const messages = await import(`./locales/${locale}.json`)
 
@@ -87,8 +91,8 @@ export async function loadLocaleMessages(locale) {
 /**
  * Loads a date-fns locale object
  */
-async function loadDateFnsLocale(locale) {
-  const dateFnsLocaleName = supportedLocales[locale].dateFnsLocale || locale
+async function loadDateFnsLocale(locale: SupportedLocales) {
+  const dateFnsLocaleName = supportedLocales[locale].dateFnsLocale ?? locale
   dateFnsLocale = (
     await import(`../../node_modules/date-fns/locale/${dateFnsLocaleName}.mjs`)
   ).default
diff --git a/app/src/i18n/supportedLocales.ts b/app/src/i18n/supportedLocales.ts
index 5574fc7b5..2da0bf11e 100644
--- a/app/src/i18n/supportedLocales.ts
+++ b/app/src/i18n/supportedLocales.ts
@@ -4,7 +4,7 @@
 // If a new locale or a new date-fns locale is added, add it to the supported
 // locales list in `app/vue.config.js`
 
-export default {
+const supportedLocales = {
   ar: {
     name: 'عربي',
   },
@@ -137,4 +137,21 @@ export default {
     name: '简化字',
     dateFnsLocale: 'zh-CN',
   },
+} as const
+
+type SL = typeof supportedLocales
+export type SupportedLocales = keyof SL
+export type SupportedDateFnsLocales = keyof {
+  [k in SupportedLocales as SL[k] extends { dateFnsLocale: string }
+    ? SL[k]['dateFnsLocale']
+    : k]: never
+}
+
+export function isSupportedLocale(locale: string): locale is SupportedLocales {
+  return Object.keys(supportedLocales).includes(locale)
 }
+
+export default supportedLocales as Record<
+  SupportedLocales,
+  { name: string; dateFnsLocale?: SupportedDateFnsLocales }
+>
diff --git a/app/src/store/settings.ts b/app/src/store/settings.ts
index 67a5d1a91..8407b2588 100644
--- a/app/src/store/settings.ts
+++ b/app/src/store/settings.ts
@@ -15,7 +15,6 @@ export default {
     dark: localStorage.getItem('dark') === 'true',
     experimental: localStorage.getItem('experimental') === 'true',
     spinner: 'pacman',
-    supportedLocales,
   },
 
   mutations: {
@@ -85,12 +84,10 @@ export default {
     experimental: (state) => state.experimental,
     spinner: (state) => state.spinner,
 
-    availableLocales: (state) => {
-      return Object.entries(state.supportedLocales).map(
-        ([locale, { name }]) => {
-          return { value: locale, text: name }
-        },
-      )
+    availableLocales: () => {
+      return Object.entries(supportedLocales).map(([locale, { name }]) => {
+        return { value: locale, text: name }
+      })
     },
   },
 }

From 1634aa30662dfb72e26b26eab24cf1a784820b0c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 11 Jul 2024 15:14:08 +0200
Subject: [PATCH 102/275] chore: update eslint rules

---
 app/.eslintrc.js | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/app/.eslintrc.js b/app/.eslintrc.js
index 737ca969a..e703f8219 100644
--- a/app/.eslintrc.js
+++ b/app/.eslintrc.js
@@ -5,24 +5,22 @@ module.exports = {
     node: true,
   },
   extends: [
-    'plugin:vue/vue3-strongly-recommended',
+    'plugin:vue/vue3-recommended',
     'eslint:recommended',
     '@vue/eslint-config-typescript',
     'plugin:prettier/recommended',
   ],
   rules: {
-    // 'no-unused-vars': [
-    //   'warn',
-    //   { varsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
-    // ],
-    // temp vue3 compat3
-    // 'vue/no-v-for-template-key-on-child': 'error',
-    // 'vue/no-v-for-template-key': 'off',
-    // 'vue/attribute-hyphenation': 'off',
-    // 'vue/v-on-event-hyphenation': 'off',
-    // temp flemme
-    // 'vue/require-explicit-emits': 'off',
-    // 'vue/require-default-prop': 'off',
-    // 'no-unused-vars': 'off',
+    'vue/no-v-html': 'off',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        varsIgnorePattern: '^_',
+        argsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+      },
+    ],
+    'no-console': ['error', { allow: ['warn', 'error'] }],
   },
 }

From fbf861a8bf45f674d511218cef2291ba862ad4e3 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 11 Jul 2024 15:14:38 +0200
Subject: [PATCH 103/275] chore: add vueuse dep

---
 app/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/package.json b/app/package.json
index 30c89a3dd..5bb7d660c 100644
--- a/app/package.json
+++ b/app/package.json
@@ -17,6 +17,7 @@
     "@fontsource/firago": "^5.0.7",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
+    "@vueuse/core": "^10.11.0",
     "bootstrap": "^5.3.3",
     "bootstrap-vue-next": "^0.16.6",
     "date-fns": "^3.3.1",

From 0262aaaefb28ebc91cdc4120e968ac9299c7f865 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 11 Jul 2024 15:14:53 +0200
Subject: [PATCH 104/275] chore: update bootstrap-vue-next dep

---
 app/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/package.json b/app/package.json
index 5bb7d660c..120706c61 100644
--- a/app/package.json
+++ b/app/package.json
@@ -19,7 +19,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^10.11.0",
     "bootstrap": "^5.3.3",
-    "bootstrap-vue-next": "^0.16.6",
+    "bootstrap-vue-next": "^0.23.2",
     "date-fns": "^3.3.1",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",

From 317bf7fbb67c828223615c60856572100ba3f645 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 11 Jul 2024 15:23:39 +0200
Subject: [PATCH 105/275] refactor: use useForm + rework mapStoreGetSet of
 ToolWebadmin

---
 app/src/store/utils.ts              | 45 ++++++++++++++
 app/src/views/tool/ToolWebadmin.vue | 93 +++++++++++++----------------
 2 files changed, 87 insertions(+), 51 deletions(-)

diff --git a/app/src/store/utils.ts b/app/src/store/utils.ts
index 41e30447a..448f9c654 100644
--- a/app/src/store/utils.ts
+++ b/app/src/store/utils.ts
@@ -1,6 +1,13 @@
+import type { WritableComputedRef } from 'vue'
 import { computed } from 'vue'
 import { useStore } from 'vuex'
 
+import type {
+  AnyWritableComponents,
+  FormField,
+  FormFieldDict,
+} from '@/types/form'
+
 export function useStoreGetters() {
   const store = useStore()
   return Object.fromEntries(
@@ -10,3 +17,41 @@ export function useStoreGetters() {
     ]),
   )
 }
+
+/**
+ * Dynamicly generate computed properties from store with get/set and automatic commit/dispatch
+ */
+export function useMapStoreGetSet<FFD extends FormFieldDict>({
+  commit = [],
+  dispatch = [],
+}: {
+  commit: Extract<keyof FFD, string>[]
+  dispatch: Extract<keyof FFD, string>[]
+}) {
+  const store = useStore()
+  type Types = {
+    [k in keyof FFD]: FFD[k] extends
+      | FormField<AnyWritableComponents, infer MV>
+      | undefined
+      ? MV
+      : any
+  }
+  return [...commit, ...dispatch].reduce(
+    (obj, prop) => {
+      obj[prop] = computed<Types[typeof prop]>({
+        get() {
+          return store.getters[prop]
+        },
+        set(value) {
+          const isCommit = commit.includes(prop)
+          const key = (isCommit ? 'SET_' : 'UPDATE_') + prop.toUpperCase()
+          store[isCommit ? 'commit' : 'dispatch'](key, value)
+        },
+      })
+      return obj
+    },
+    {} as { [k in keyof FFD]: WritableComputedRef<any> },
+  ) as {
+    [k in keyof FFD]: WritableComputedRef<Types[k]>
+  }
+}
diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index cd2fd0798..9223cee40 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/app/src/views/tool/ToolWebadmin.vue
@@ -1,93 +1,84 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useStore } from 'vuex'
+
+import { asUnreffed } from '@/helpers/commons'
+import { useMapStoreGetSet, useStoreGetters } from '@/store/utils'
+import type { FormField } from '@/types/form'
 
 const { t } = useI18n()
-const store = useStore()
+const { availableLocales } = useStoreGetters()
+
+const form = ref({
+  ...useMapStoreGetSet<Fields>({
+    commit: ['cache', 'transitions', 'experimental'],
+    dispatch: ['locale', 'fallbackLocale', 'dark'],
+  }),
+})
 
-const fields = {
+type Fields = {
+  locale: FormField<'SelectItem', string>
+  fallbackLocale: FormField<'SelectItem', string>
+  cache: FormField<'CheckboxItem', boolean>
+  transitions: FormField<'CheckboxItem', boolean>
+  dark: FormField<'CheckboxItem', boolean>
+  experimental: FormField<'CheckboxItem', boolean>
+}
+const fields: Fields = {
   locale: {
-    label: t('tools_webadmin.language'),
     component: 'SelectItem',
-    props: { id: 'locale', choices: [] },
+    label: t('tools_webadmin.language'),
+    props: { id: 'locale', choices: asUnreffed(availableLocales) },
   },
 
   fallbackLocale: {
+    component: 'SelectItem',
     label: t('tools_webadmin.fallback_language'),
     description: t('tools_webadmin.fallback_language_description'),
-    component: 'SelectItem',
-    props: { id: 'fallback-locale', choices: [] },
+    props: { id: 'fallback-locale', choices: asUnreffed(availableLocales) },
   },
 
   cache: {
+    component: 'CheckboxItem',
     id: 'cache',
     label: t('tools_webadmin.cache'),
     description: t('tools_webadmin.cache_description'),
-    component: 'CheckboxItem',
     props: { labels: { true: 'enabled', false: 'disabled' } },
   },
 
   transitions: {
+    component: 'CheckboxItem',
     id: 'transitions',
     label: t('tools_webadmin.transitions'),
-    component: 'CheckboxItem',
     props: { labels: { true: 'enabled', false: 'disabled' } },
   },
 
   dark: {
+    component: 'CheckboxItem',
     id: 'theme',
     label: t('tools_webadmin.theme'),
-    component: 'CheckboxItem',
     props: { labels: { true: '🌙', false: '☀️' } },
   },
 
-  // experimental: added in `created()`
-}
-
-const form = {
-  ...mapStoreGetSet(['locale', 'fallbackLocale', 'dark'], 'dispatch'),
-  ...mapStoreGetSet(['cache', 'transitions', 'experimental']),
-}
-
-const availableLocales = store.getters.availableLocales
-fields.locale.props.choices = availableLocales
-fields.fallbackLocale.props.choices = availableLocales
-
-if (import.meta.env.DEV) {
-  fields.experimental = {
+  experimental: {
+    component: 'CheckboxItem',
     id: 'experimental',
     label: t('tools_webadmin.experimental'),
     description: t('tools_webadmin.experimental_description'),
-    component: 'CheckboxItem',
+    // Available in dev mode only
+    visible: import.meta.env.DEV,
     props: { labels: { true: 'enabled', false: 'disabled' } },
-  }
-}
-
-// FIXME move into helpers ?
-// Dynamicly generate computed properties from store with get/set and automatic commit/dispatch
-function mapStoreGetSet(props = [], action = 'commit') {
-  return props.reduce((obj, prop) => {
-    obj[prop] = computed({
-      get() {
-        return store.getters[prop]
-      },
-      set(value) {
-        const key =
-          (action === 'commit' ? 'SET_' : 'UPDATE_') + prop.toUpperCase()
-        store[action](key, value)
-      },
-    })
-    return obj
-  }, {})
+  },
 }
 </script>
 
 <template>
-  <CardForm :title="$t('tools_webadmin_settings')" icon="cog" no-footer>
-    <template v-for="(field, fname) in fields" :key="fname">
-      <FormField v-bind="field" v-model="form[fname]" />
-      <hr />
-    </template>
-  </CardForm>
+  <CardForm
+    v-model="form"
+    :fields="fields"
+    :title="$t('tools_webadmin_settings')"
+    icon="cog"
+    no-footer
+    hr
+  />
 </template>

From f7c534979862b735324c4c7ba632ea1c3f392928 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 22 Jul 2024 13:32:48 +0200
Subject: [PATCH 106/275] feat: add `asTab` prop to YCard to render the card
 without header and border

---
 app/src/components/globals/YCard.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index 327a7440c..b6b0a3838 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -5,6 +5,8 @@ import { ref } from 'vue'
 const props = withDefaults(
   defineProps<{
     id?: string
+    asTab?: boolean
+    noBody?: boolean
     title?: string
     titleTag?: string
     icon?: string
@@ -14,6 +16,8 @@ const props = withDefaults(
   }>(),
   {
     id: 'ynh-form',
+    asTab: false,
+    noBody: false,
     title: undefined,
     titleTag: 'h2',
     icon: undefined,
@@ -35,8 +39,8 @@ const visible = ref(!props.collapsed)
 </script>
 
 <template>
-  <BCard :no-body="collapsable ? true : $attrs['no-body']">
-    <template #header>
+  <BCard :no-body="collapsable ? true : noBody" :class="{ 'border-0': asTab }">
+    <template v-if="!asTab" #header>
       <div class="w-100 d-flex align-items-center flex-wrap custom-header">
         <slot name="header">
           <Component :is="titleTag" class="custom-header-title">
@@ -75,7 +79,7 @@ const visible = ref(!props.collapsed)
     </template>
 
     <BCollapse v-if="collapsable" :visible="visible">
-      <slot v-if="'no-body' in $attrs" name="default" />
+      <slot v-if="noBody" name="default" />
       <BCardBody v-else>
         <slot name="default" />
       </BCardBody>

From dbd753c8e97129636fcb1e92ced5c6f8d9b3b697 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 22 Jul 2024 14:12:09 +0200
Subject: [PATCH 107/275] ts: add core config panels types

---
 app/src/types/commons.ts      |   3 +
 app/src/types/core/options.ts | 292 ++++++++++++++++++++++++++++++++++
 app/src/types/form.ts         |   3 +-
 3 files changed, 296 insertions(+), 2 deletions(-)
 create mode 100644 app/src/types/core/options.ts

diff --git a/app/src/types/commons.ts b/app/src/types/commons.ts
index 9a2accb7e..18145a1be 100644
--- a/app/src/types/commons.ts
+++ b/app/src/types/commons.ts
@@ -23,9 +23,12 @@ export type CustomRoute = {
   text: string
   icon?: string
 }
+export type Translation = string | Record<string, string>
+export type StateVariant = 'success' | 'info' | 'warning' | 'danger'
 
 // HELPERS
 
 export type ArrInnerType<T> = T extends (infer ElementType)[]
   ? ElementType
   : never
+export type KeyOfStr<T extends Obj> = Extract<keyof T, string>
diff --git a/app/src/types/core/options.ts b/app/src/types/core/options.ts
new file mode 100644
index 000000000..78008b60b
--- /dev/null
+++ b/app/src/types/core/options.ts
@@ -0,0 +1,292 @@
+import type { Obj, KeyOfStr, Translation, StateVariant } from '@/types/commons'
+
+export type JSExpression = string | boolean
+type Pattern = {
+  regexp: string
+  error: Translation
+}
+
+// CONFIG PANELS
+
+export type CoreConfigPanels<MV extends Obj<Obj>> = {
+  panels: CoreConfigPanel<MV>[]
+}
+
+export type CoreConfigPanel<MV extends Obj> = {
+  help?: Translation
+  icon?: string
+  id: KeyOfStr<MV>
+  name?: Translation
+  sections: CoreConfigSection[]
+}
+
+export type CoreConfigSection = {
+  help?: Translation
+  id: string
+  is_action_section: boolean
+  name?: Translation
+  options: AnyOption[]
+  visible?: JSExpression
+}
+
+// OPTIONS
+
+type BaseOption = {
+  type: AnyOptionType
+  ask: Translation
+  id: string
+  name?: string
+  readonly?: boolean
+  visible?: JSExpression
+}
+
+// DISPLAY OPTIONS
+
+type DisplayTextOption = BaseOption & {
+  type: 'display_text'
+  readonly: true
+}
+
+type MarkdownOption = BaseOption & {
+  type: 'markdown'
+  readonly: true
+}
+
+type AlertOption = BaseOption & {
+  type: 'alert'
+  readonly: true
+  icon?: string
+  style: StateVariant
+}
+
+type ButtonOption = BaseOption & {
+  type: 'button'
+  readonly: true
+  enabled: JSExpression
+  help?: Translation
+  icon?: string
+  style: StateVariant
+}
+
+// WRITABLE OPTION
+
+type BaseInputOption = BaseOption & {
+  readonly?: boolean
+  default?: any
+  example?: string
+  help?: Translation
+  optional: boolean
+  placeholder?: string
+  // redact: boolean
+  value?: any
+}
+
+type BaseStringOption = BaseInputOption & {
+  default?: string
+  pattern?: Pattern | null
+}
+
+type BaseNumberOption = BaseInputOption & {
+  type: 'number' | 'range'
+  default?: number
+  min?: number
+  max?: number
+  step?: number
+}
+
+type BaseChoicesOption = BaseInputOption & {
+  filter?: JSExpression
+}
+
+type StringOption = BaseStringOption & {
+  type: 'string'
+}
+
+type TextOption = BaseStringOption & {
+  type: 'text'
+}
+
+type PasswordOption = BaseInputOption & {
+  type: 'password'
+  default: undefined
+  example: '••••••••••••'
+  // redact: true
+}
+
+type ColorOption = BaseInputOption & {
+  type: 'color'
+  default?: string
+}
+
+type NumberOption = BaseNumberOption & {
+  type: 'number'
+}
+
+type RangeOption = BaseNumberOption & {
+  type: 'range'
+}
+
+type BooleanOption = BaseInputOption & {
+  type: 'boolean'
+  default?: boolean | 1 | 0
+}
+
+type DateOption = BaseInputOption & {
+  type: 'date'
+  default?: string
+}
+
+type TimeOption = BaseInputOption & {
+  type: 'time'
+  default?: string | number
+}
+
+type EmailOption = BaseInputOption & {
+  type: 'email'
+  default?: string
+}
+
+type WebPathOption = BaseStringOption & {
+  type: 'path'
+}
+
+type URLOption = BaseStringOption & {
+  type: 'url'
+}
+
+type FileOption = BaseInputOption & {
+  type: 'file'
+  accept?: string[]
+  default?: string
+}
+
+type SelectOption = BaseChoicesOption & {
+  type: 'select'
+  choices: any[] | Obj<any>
+  default?: string
+  filter?: undefined
+}
+
+type TagsOption = BaseChoicesOption & {
+  type: 'tags' | 'tags-select'
+  choices: string[]
+  default?: string | string[]
+  filter?: undefined
+  icon?: string
+  pattern?: Pattern
+}
+
+type DomainOption = BaseChoicesOption & {
+  type: 'domain'
+  choices: Obj<string>
+  filter?: undefined
+}
+
+type AppOption = BaseChoicesOption & {
+  type: 'app'
+  choices: Obj<string>
+}
+
+type UserOption = BaseChoicesOption & {
+  type: 'user'
+  choices: Obj<string>
+  filter?: undefined
+}
+
+type GroupOption = BaseChoicesOption & {
+  type: 'group'
+  choices: Obj<string>
+  default: 'visitors' | 'all_users' | 'admins'
+  filter?: undefined
+}
+
+type AnyDisplayOption =
+  | DisplayTextOption
+  | MarkdownOption
+  | AlertOption
+  | ButtonOption
+export type AnyWritableOption =
+  | StringOption
+  | TextOption
+  | PasswordOption
+  | ColorOption
+  | NumberOption
+  | RangeOption
+  | BooleanOption
+  | DateOption
+  | TimeOption
+  | EmailOption
+  | WebPathOption
+  | URLOption
+  | FileOption
+  | SelectOption
+  | TagsOption
+  | DomainOption
+  | AppOption
+  | UserOption
+  | GroupOption
+export type AnyOption = AnyDisplayOption | AnyWritableOption
+
+export const ANY_DISPLAY_OPTION_TYPE = [
+  'display_text',
+  'markdown',
+  'alert',
+  'button',
+] as const
+export const ANY_INPUT_OPTION_TYPE = [
+  'string',
+  'path',
+  'email',
+  'url',
+  'date',
+  'time',
+  'color',
+  'password',
+  'number',
+  'range',
+] as const
+export const ANY_WRITABLE_OPTION_TYPE = [
+  ...ANY_INPUT_OPTION_TYPE,
+  'text',
+  'boolean',
+  'file',
+  'select',
+  'tags',
+  'tags-select',
+  'domain',
+  'app',
+  'user',
+  'group',
+] as const
+const ANY_OPTION_TYPE = [
+  ...ANY_DISPLAY_OPTION_TYPE,
+  ...ANY_WRITABLE_OPTION_TYPE,
+] as const
+export type AnyOptionType = (typeof ANY_OPTION_TYPE)[number]
+
+export type OptionTypeToOptionResolver = {
+  display_text: DisplayTextOption
+  markdown: MarkdownOption
+  alert: AlertOption
+  button: ButtonOption
+  string: StringOption
+  text: TextOption
+  password: PasswordOption
+  color: ColorOption
+  number: NumberOption
+  range: RangeOption
+  boolean: BooleanOption
+  date: DateOption
+  time: TimeOption
+  email: EmailOption
+  path: WebPathOption
+  url: URLOption
+  file: FileOption
+  select: SelectOption
+  tags: TagsOption
+  'tags-select': TagsOption
+  domain: DomainOption
+  app: AppOption
+  user: UserOption
+  group: GroupOption
+}
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 4bbb06f7b..28d94a5ef 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -5,10 +5,9 @@ import type {
 } from '@vuelidate/core'
 import type { RouteLocationRaw } from 'vue-router'
 
-import type { ArrInnerType, Cols, Obj } from '@/types/commons'
+import type { ArrInnerType, Cols, Obj, StateVariant } from '@/types/commons'
 
 type StateValidation = false | null
-type StateVariant = 'success' | 'info' | 'warning' | 'danger'
 
 // DISPLAY
 

From 83e09d6ae9e1b498287cac22f4154c18ba6857c1 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 22 Jul 2024 17:44:50 +0200
Subject: [PATCH 108/275] refactor: rework config panels and options formating

---
 app/src/composables/configPanels.ts  | 372 +++++++++++++++++++++++++
 app/src/helpers/yunohostArguments.ts | 388 ---------------------------
 app/src/types/commons.ts             |   7 +
 app/src/types/configPanels.ts        |  80 ++++++
 app/src/types/core/options.ts        |   4 +-
 app/src/types/form.ts                |  41 ++-
 6 files changed, 500 insertions(+), 392 deletions(-)
 create mode 100644 app/src/composables/configPanels.ts
 create mode 100644 app/src/types/configPanels.ts

diff --git a/app/src/composables/configPanels.ts b/app/src/composables/configPanels.ts
new file mode 100644
index 000000000..f303f82bf
--- /dev/null
+++ b/app/src/composables/configPanels.ts
@@ -0,0 +1,372 @@
+import evaluate from 'simple-evaluate'
+import { computed, ref, toValue, type MaybeRefOrGetter, type Ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { asUnreffed, isObjectLiteral } from '@/helpers/commons'
+import * as validators from '@/helpers/validators'
+import { formatI18nField } from '@/helpers/yunohostArguments'
+import type { MergeUnion, Obj } from '@/types/commons'
+import type {
+  AnyFormField,
+  ConfigPanel,
+  ConfigPanels,
+} from '@/types/configPanels'
+import { OPTION_COMPONENT_RESOLVER, isIn } from '@/types/configPanels'
+import type {
+  AnyOption,
+  AnyWritableOption,
+  CoreConfigPanel,
+  CoreConfigPanels,
+  JSExpression,
+} from '@/types/core/options'
+import {
+  ANY_DISPLAY_OPTION_TYPE,
+  ANY_INPUT_OPTION_TYPE,
+  ANY_WRITABLE_OPTION_TYPE,
+} from '@/types/core/options'
+import type {
+  AnyDisplayItemProps,
+  AnyWritableItemProps,
+  FormField,
+  FormFieldDict,
+  FormFieldDisplay,
+  FormFieldReadonly,
+} from '@/types/form'
+import {
+  isAdressModelValue,
+  isFileModelValue,
+  isNonWritableComponent,
+} from '@/types/form'
+
+function formatOptionValue(option: AnyWritableOption) {
+  let value = option.value ?? null
+
+  if ('tags' === option.type) {
+    // FIXME format in core?
+    if (typeof value === 'string') {
+      value = value.split(',')
+    } else if (!value) {
+      value = []
+    }
+  } else if ('boolean' === option.type) {
+    // FIXME format in core?
+    if (value !== null) {
+      value = ['1', 'yes', 'y', 'true'].includes(String(value).toLowerCase())
+    } else if (option.default !== null && option.default !== undefined) {
+      value = ['1', 'yes', 'y', 'true'].includes(
+        String(option.default).toLowerCase(),
+      )
+    }
+  } else if ('file' === option.type) {
+    value = {
+      // in case of already defined file, we receive only the file path (not the actual file)
+      file: value ? new File([''], value) : null,
+      content: '',
+      current: !!value,
+      removed: false,
+    }
+  }
+
+  if (value === null && option.default !== undefined) {
+    value = option.default
+  }
+
+  return value
+}
+
+/**
+ * Format app install and config panel Option into a Field that can be consumed
+ * by form field components.
+ *
+ * @param option - a core Option written by a packager
+ * @param form - a ref containing all related form values for expressions's evaluations
+ * @return Formated `FormField | FormFieldReadonly | FormFieldDisplay` props with form items props.
+ */
+function formatOption(option: AnyOption, form: Ref<Obj>): AnyFormField {
+  const visible = useExpression(option.visible, form)
+
+  if (isIn(ANY_DISPLAY_OPTION_TYPE, option)) {
+    const component = OPTION_COMPONENT_RESOLVER[option.type]
+    // TODO: could be improved, for simplicity props can be be any display item props
+    // but this is not type safe.
+    const props = {
+      label: formatI18nField(option.ask),
+      id: option.id,
+    } as MergeUnion<AnyDisplayItemProps>
+    const field: FormFieldDisplay<typeof component> = {
+      component,
+      visible,
+      props,
+    }
+
+    if (isIn(['button', 'alert'], option)) {
+      props.type = option.style
+      props.icon = option.icon
+      if (option.type === 'button') {
+        props.enabled = useExpression(option.enabled, form)
+      }
+    }
+
+    return field
+  } else if (isIn(ANY_WRITABLE_OPTION_TYPE, option)) {
+    if ('tags' === option.type && option.choices) {
+      // TODO: update in core directly?
+      option.type = 'tags-select'
+    }
+
+    const component = OPTION_COMPONENT_RESOLVER[option.type]
+    // TODO: could be improved, for simplicity props can be be any writable item props
+    // but this is not type safe.
+    const props = {
+      id: option.id,
+      placeholder: option.example,
+    } as MergeUnion<AnyWritableItemProps>
+    const rules: FormField['rules'] = {}
+    const field:
+      | FormField<typeof component>
+      | FormFieldReadonly<typeof component> = {
+      component,
+      label: formatI18nField(option.ask),
+      props,
+      readonly: option.readonly,
+      rules,
+      visible,
+      description: formatI18nField(option.help),
+    }
+
+    // We don't care about component props in case of readonly
+    if (field.readonly) return field
+
+    const { t } = useI18n()
+
+    if (isIn(ANY_INPUT_OPTION_TYPE, option)) {
+      props.type = isIn(['string', 'path'], option) ? 'text' : option.type
+      // trim
+      // autocomplete
+
+      if (option.type === 'password') {
+        field.description ??= t('good_practices_about_admin_password')
+        rules.passwordLenght = validators.minLength(8)
+        props.placeholder = '••••••••••••'
+      } else if (isIn(['number', 'range'], option)) {
+        rules.numValue = validators.integer
+        props.step = option.step
+
+        if (option.min !== undefined) {
+          rules.minValue = validators.minValue(option.min)
+        }
+        if (option.max !== undefined) {
+          rules.maxValue = validators.maxValue(option.max)
+        }
+      }
+    } else if (isIn(['select', 'user', 'domain', 'app', 'group'], option)) {
+      props.choices = isObjectLiteral(option.choices)
+        ? Object.entries(option.choices).map(([k, v]) => ({
+            text: v,
+            value: k,
+          }))
+        : option.choices // FIXME rename choices to options?
+      if (option.type !== 'select') {
+        field.link = {
+          name: option.type + '-list',
+          text: t(`manage_${option.type}s`),
+        }
+      }
+    } else if (isIn(['tags', 'tags-select'], option)) {
+      // props.limit = option.limit  // FIXME limit is not defined in core?
+      props.placeholder = option.placeholder
+      props.tagIcon = option.icon
+
+      if ('tags-select' === option.type) {
+        props.options = option.choices
+        props.auto = true
+        props.itemsName = ''
+        props.label = option.placeholder
+      }
+    } else if ('boolean' === option.type) {
+      // FIXME
+      // props.choices = option.choices
+    }
+
+    if ('file' === option.type) {
+      props.accept = option.accept
+    }
+
+    if ('boolean' !== option.type && option.optional === false) {
+      rules.required = validators.required
+    }
+
+    if (isIn(['string', 'text', 'path', 'url'], option) && option.pattern) {
+      rules.pattern = validators.helpers.withMessage(
+        formatI18nField(option.pattern.error),
+        validators.helpers.regex(new RegExp(option.pattern.regexp)),
+      )
+    }
+
+    return field
+  } else {
+    throw new TypeError(
+      'Unknown Option type: ' + (option as { type: unknown }).type,
+    )
+  }
+}
+
+/**
+ * Format app install and config panel's options into a form and fields that
+ * can be used to populate `useForm` composable and CardForm component.
+ *
+ * @param options - a core Option array written by a packager
+ * @return An object with form and fields
+ */
+function formatOptions<MV extends Obj>(
+  options: AnyOption[],
+): {
+  fields: FormFieldDict<MV>
+  form: Ref<MV>
+} {
+  const form = ref(
+    Object.fromEntries(
+      options
+        .filter((option) => isIn(ANY_WRITABLE_OPTION_TYPE, option))
+        .map((option) => {
+          return [option.id, formatOptionValue(option as AnyWritableOption)]
+        }),
+    ),
+  ) as Ref<MV>
+
+  return {
+    form,
+    fields: Object.fromEntries(
+      options.map((option) => [option.id, formatOption(option, form)]),
+    ) as FormFieldDict<MV>,
+  }
+}
+
+function formatConfigPanel<NestedMV extends Obj, MV extends Obj<NestedMV>>(
+  panel: CoreConfigPanel<MV>,
+): {
+  form: Ref<NestedMV>
+  panel: ConfigPanel<NestedMV, MV>
+} {
+  const options = panel.sections.flatMap((section) => section.options)
+  const { form, fields } = formatOptions<NestedMV>(options)
+  let hasApplyButton = false
+
+  const sections = panel.sections.map((section) => {
+    const sectionFieldsIds = section.options.map(
+      (option) => option.id,
+    ) as ConfigPanel<NestedMV, MV>['sections'][number]['fields']
+
+    if (
+      !section.is_action_section &&
+      sectionFieldsIds.some((id) => !isNonWritableComponent(fields[id]))
+    ) {
+      hasApplyButton = true
+    }
+
+    return {
+      help: formatI18nField(section.help),
+      fields: sectionFieldsIds,
+      id: section.id,
+      isActionSection: section.is_action_section,
+      name: formatI18nField(section.name),
+      visible: useExpression(section.visible, form),
+    }
+  })
+
+  return {
+    form,
+    panel: {
+      fields,
+      help: formatI18nField(panel.help),
+      hasApplyButton,
+      id: panel.id,
+      name: formatI18nField(panel.name),
+      sections,
+    },
+  }
+}
+
+export function formatConfigPanels<
+  NestedMV extends Obj,
+  MV extends Obj<NestedMV>,
+>(config: CoreConfigPanels<MV>): ConfigPanels<NestedMV, MV> {
+  return config.panels.reduce(
+    (cps, panel_) => {
+      const { form, panel } = formatConfigPanel<NestedMV, MV>(panel_)
+      cps.forms[panel.id] = form
+      cps.panels.push(panel)
+      return cps
+    },
+    {
+      forms: {} as Record<keyof MV, Ref<NestedMV>>,
+      panels: [],
+      routes: config.panels.map((panel) => ({
+        to: { params: { tabId: panel.id } },
+        text: formatI18nField(panel.name),
+        icon: panel.icon || 'wrench',
+      })),
+    } as ConfigPanels<NestedMV, MV>,
+  )
+}
+
+function useExpression(
+  expression: JSExpression | undefined,
+  form: Ref<Obj>,
+): boolean {
+  if (typeof expression === 'boolean') return expression
+  if (typeof expression === 'string') {
+    // FIXME normalize expression in core? ('', 'false', 'true') and rm next 2 lines
+    if (!expression || expression === 'true') return true
+    if (expression === 'false') return false
+    // FIXME remove asUnreffed and manage ref type?
+    return asUnreffed(useEvaluation(expression, form))
+  }
+  return true
+}
+
+/**
+ * Evaluate config panel string expression that can contain regular expressions.
+ * Expressions are evaluated with the config panel's form as context.
+ *
+ * @param expression - A string expression to evaluate as a boolean
+ * @param form - An object to serve as evaluation context
+ * @return A computed boolean
+ */
+function useEvaluation(expression: string, form: MaybeRefOrGetter<Obj>) {
+  function buildContext(f: Obj) {
+    // FIXME deepClone?
+    const ctx: Obj = { ...f }
+    let exp = expression
+
+    for (const key in ctx) {
+      if (isFileModelValue(ctx[key])) {
+        ctx[key] = ctx[key].content
+      }
+      if (isAdressModelValue(ctx[key])) {
+        ctx[key] = ctx[key].value().join('')
+      }
+    }
+
+    // Allow to use match(var,regexp) function
+    const matchRe = /match(\s*(\w+)\s*,\s*"([^"]+)"\s*)/g
+    for (const matched of expression.matchAll(matchRe)) {
+      const [fullMatch, varMatch, regExpMatch] = matched
+      const varName = varMatch + '__re' + matched.index
+      ctx[varName] = new RegExp(regExpMatch, 'm').test(ctx[varMatch])
+      exp = expression.replace(fullMatch, varName)
+    }
+
+    return { exp, ctx }
+  }
+
+  return computed(() => {
+    const { exp, ctx } = buildContext(toValue(form))
+
+    try {
+      return !!evaluate(ctx, exp)
+    } catch {
+      return false
+    }
+  })
+}
diff --git a/app/src/helpers/yunohostArguments.ts b/app/src/helpers/yunohostArguments.ts
index 1fa1e3048..276738093 100644
--- a/app/src/helpers/yunohostArguments.ts
+++ b/app/src/helpers/yunohostArguments.ts
@@ -67,394 +67,6 @@ export function adressToFormValue(address) {
   return { localPart, separator, domain }
 }
 
-/**
- * Evaluate config panel string expression that can contain regular expressions.
- * Expression are evaluated with the config panel form as context.
- *
- * @param {String} expression - A String to evaluate.
- * @param {Object} forms - A nested form used in config panels.
- * @return {Boolean} - expression evaluation result.
- */
-export function evaluateExpression(expression, form, nested = true) {
-  if (!expression) return true
-  if (expression === '"false"') return false
-
-  const context = nested
-    ? Object.values(form).reduce((merged, next) => ({ ...merged, ...next }))
-    : form
-
-  for (const key in context) {
-    if (isObjectLiteral(context[key]) && 'file' in context[key]) {
-      context[key] = context[key].content
-    }
-  }
-
-  // Allow to use match(var,regexp) function
-  const matchRe = /match(\s*(\w+)\s*,\s*"([^"]+)"\s*)/g
-  for (const matched of expression.matchAll(matchRe)) {
-    const [fullMatch, varMatch, regExpMatch] = matched
-    const varName = varMatch + '__re' + matched.index
-    context[varName] = new RegExp(regExpMatch, 'm').test(context[varMatch])
-    expression = expression.replace(fullMatch, varName)
-  }
-
-  try {
-    return !!evaluate(context, expression)
-  } catch {
-    return false
-  }
-}
-
-// Adds a property to an Object that will dynamically returns a expression evaluation result.
-function addEvaluationGetter(prop, obj, expr, ctx, nested) {
-  Object.defineProperty(obj, prop, {
-    get: () => evaluateExpression(expr, ctx, nested),
-  })
-}
-
-/**
- * Format app install, actions and config panel argument into a data structure that
- * will be automaticly transformed into a component on screen.
- *
- * @param {Object} arg - a yunohost arg options written by a packager.
- * @return {Object} an formated argument containing formItem props, validation and base value.
- */
-export function formatYunoHostArgument(arg) {
-  let value = arg.value !== undefined ? arg.value : null
-  let validation = {}
-  arg.ask = formatI18nField(arg.ask)
-  const field = {
-    is: arg.readonly ? 'FormFieldReadonly' : 'FormField',
-    visible: arg.visible,
-    props: {
-      label: arg.ask,
-      component: undefined,
-      props: {},
-    },
-  }
-
-  const defaultProps = ['id', 'placeholder:example']
-  const components = [
-    {
-      types: ['string', 'path'],
-      name: 'InputItem',
-      props: defaultProps.concat(['autocomplete', 'trim', 'choices']),
-    },
-    {
-      types: ['email', 'url', 'date', 'time', 'color'],
-      name: 'InputItem',
-      props: defaultProps.concat(['type', 'trim']),
-    },
-    {
-      types: ['password'],
-      name: 'InputItem',
-      props: defaultProps.concat(['type', 'autocomplete', 'trim']),
-      callback: function () {
-        if (!arg.help) {
-          arg.help = i18n.global.t('good_practices_about_admin_password')
-        }
-        arg.example = '••••••••••••'
-        validation.passwordLenght = validators.minLength(8)
-      },
-    },
-    {
-      types: ['number', 'range'],
-      name: 'InputItem',
-      props: defaultProps.concat(['type', 'min', 'max', 'step']),
-      callback: function () {
-        if (arg.min !== undefined) {
-          validation.minValue = validators.minValue(arg.min)
-        }
-        if (arg.max !== undefined) {
-          validation.maxValue = validators.maxValue(arg.max)
-        }
-        validation.numValue = validators.integer
-      },
-    },
-    {
-      types: ['select', 'user', 'domain', 'app', 'group'],
-      name: 'SelectItem',
-      props: ['id', 'choices'],
-      callback: function () {
-        if (arg.type !== 'select') {
-          field.props.link = {
-            name: arg.type + '-list',
-            text: i18n.global.t(`manage_${arg.type}s`),
-          }
-        }
-      },
-    },
-    {
-      types: ['file'],
-      name: 'FileItem',
-      props: defaultProps.concat(['accept']),
-      callback: function () {
-        value = {
-          // in case of already defined file, we receive only the file path (not the actual file)
-          file: value ? new File([''], value) : null,
-          content: '',
-          current: !!value,
-          removed: false,
-        }
-      },
-    },
-    {
-      types: ['text'],
-      name: 'TextAreaItem',
-      props: defaultProps,
-    },
-    {
-      types: ['tags'],
-      name: 'TagsItem',
-      props: defaultProps.concat([
-        'limit',
-        'placeholder',
-        'options:choices',
-        'tagIcon:icon',
-      ]),
-      callback: function () {
-        if (arg.choices && arg.choices.length) {
-          this.name = 'TagsSelectizeItem'
-          Object.assign(field.props.props, {
-            auto: true,
-            itemsName: '',
-            label: arg.placeholder,
-          })
-        }
-        if (typeof value === 'string' && value) {
-          value = value.split(',')
-        } else if (!value) {
-          value = []
-        }
-      },
-    },
-    {
-      types: ['boolean'],
-      name: 'CheckboxItem',
-      props: ['id', 'choices'],
-      callback: function () {
-        if (value !== null && value !== undefined) {
-          value = ['1', 'yes', 'y', 'true'].includes(
-            String(value).toLowerCase(),
-          )
-        } else if (arg.default !== null && arg.default !== undefined) {
-          value = ['1', 'yes', 'y', 'true'].includes(
-            String(arg.default).toLowerCase(),
-          )
-        }
-      },
-    },
-    {
-      types: ['alert'],
-      name: 'ReadOnlyAlertItem',
-      props: ['type:style', 'label:ask', 'icon'],
-      renderSelf: true,
-    },
-    {
-      types: ['markdown'],
-      name: 'MarkdownItem',
-      props: ['label:ask'],
-      renderSelf: true,
-    },
-    {
-      types: ['display_text'],
-      name: 'DisplayTextItem',
-      props: ['label:ask'],
-      renderSelf: true,
-    },
-    {
-      types: ['button'],
-      name: 'ButtonItem',
-      props: ['type:style', 'label:ask', 'icon', 'enabled'],
-      renderSelf: true,
-    },
-  ]
-
-  // Default type management if no one is filled
-  if (arg.type !== 'tags' && arg.choices && arg.choices.length) {
-    arg.type = 'select'
-  }
-  if (arg.type === undefined) {
-    if (arg.choices && arg.choices.length) {
-      arg.type = 'select'
-    } else {
-      arg.type = 'string'
-    }
-  }
-
-  // Search the component bind to the type
-  const component = components.find((element) =>
-    element.types.includes(arg.type),
-  )
-  if (component === undefined) throw new TypeError('Unknown type: ' + arg.type)
-
-  // Callback use for specific behaviour
-  if (component.callback) component.callback()
-  field.props.component = component.name
-  // Affect properties to the field Item
-  for (let prop of component.props) {
-    prop = prop.split(':')
-    const propName = prop[0]
-    const argName = prop.slice(-1)[0]
-
-    if (argName in arg) {
-      if (propName === 'choices') {
-        field.props.props[propName] = Object.entries(arg[argName]).map(
-          ([value, text]) => ({ value, text }),
-        )
-      } else {
-        field.props.props[propName] = arg[argName]
-      }
-    }
-  }
-
-  // Required (no need for checkbox its value can't be null)
-  if (
-    !component.renderSelf &&
-    arg.type !== 'boolean' &&
-    arg.optional !== true
-  ) {
-    validation.required = validators.required
-  }
-  if (arg.pattern && arg.type !== 'tags') {
-    validation.pattern = validators.helpers.withMessage(
-      formatI18nField(arg.pattern.error),
-      validators.helpers.regex(new RegExp(arg.pattern.regexp)),
-    )
-  }
-
-  // Default value if still `null`
-  if (value === null && arg.default) {
-    value = arg.default
-  }
-
-  // Help message
-  if (arg.help) {
-    field.props.description = formatI18nField(arg.help)
-  }
-
-  // Help message
-  if (arg.helpLink) {
-    field.props.link = {
-      href: arg.helpLink.href,
-      text: i18n.global.t(arg.helpLink.text),
-    }
-  }
-
-  if (component.renderSelf) {
-    field.is = field.props.component
-    field.props = field.props.props
-  }
-
-  return {
-    value,
-    field,
-    // Return null instead of empty object if there's no validation
-    validation: Object.keys(validation).length === 0 ? null : validation,
-  }
-}
-
-/**
- * Format app install, actions and config panel manifest args into a form that can be used
- * as v-model values, fields that can be passed to a FormField component and validations.
- *
- * @param {Array} args - a yunohost arg array written by a packager.
- * @param {Object|null} forms - nested form used as the expression evualuations context.
- * @return {Object} an object containing all parsed values to be used in vue views.
- */
-export function formatYunoHostArguments(args, forms) {
-  const form = {}
-  const fields = {}
-  const validations = {}
-
-  for (const arg of args) {
-    const { value, field, validation } = formatYunoHostArgument(arg)
-    fields[arg.id] = field
-    form[arg.id] = value
-    if (validation) validations[arg.id] = validation
-
-    if ('visible' in arg && typeof arg.visible === 'string') {
-      addEvaluationGetter(
-        'visible',
-        field,
-        arg.visible,
-        forms || form,
-        forms !== undefined,
-      )
-    }
-
-    if ('enabled' in arg && typeof arg.enabled === 'string') {
-      addEvaluationGetter(
-        'enabled',
-        field.props,
-        arg.enabled,
-        forms || form,
-        forms !== undefined,
-      )
-    }
-  }
-
-  return { form, fields, validations }
-}
-
-export function formatYunoHostConfigPanels(data) {
-  const result = {
-    panels: [],
-    forms: {},
-    validations: {},
-  }
-
-  for (const { id: panelId, name, help, sections } of data.panels) {
-    const panel = {
-      id: panelId,
-      sections: [],
-      serverError: '',
-      hasApplyButton: false,
-    }
-    result.forms[panelId] = {}
-    result.validations[panelId] = {}
-
-    if (name) panel.name = formatI18nField(name)
-    if (help) panel.help = formatI18nField(help)
-
-    for (const _section of sections) {
-      const section = {
-        id: _section.id,
-        isActionSection: _section.is_action_section,
-        visible: _section.visible,
-      }
-      if (_section.help) section.help = formatI18nField(_section.help)
-      if (_section.name) section.name = formatI18nField(_section.name)
-      if (typeof _section.visible === 'string') {
-        addEvaluationGetter('visible', section, section.visible, result.forms)
-      }
-
-      const { form, fields, validations } = formatYunoHostArguments(
-        _section.options,
-        result.forms,
-      )
-      // Merge all sections forms to the panel to get a unique form
-      Object.assign(result.forms[panelId], form)
-      Object.assign(result.validations[panelId], validations)
-      section.fields = fields
-      panel.sections.push(section)
-
-      if (
-        !section.isActionSection &&
-        Object.values(fields).some(
-          (field) => !NO_VALUE_FIELDS.includes(field.is),
-        )
-      ) {
-        panel.hasApplyButton = true
-      }
-    }
-
-    result.panels.push(panel)
-  }
-
-  return result
-}
-
 /**
  * Parse a front-end value to its API equivalent. This function returns a Promise or an
  * Object `{ key: Promise }` if `key` is supplied. When parsing a form, all those
diff --git a/app/src/types/commons.ts b/app/src/types/commons.ts
index 18145a1be..e464d3b69 100644
--- a/app/src/types/commons.ts
+++ b/app/src/types/commons.ts
@@ -32,3 +32,10 @@ export type ArrInnerType<T> = T extends (infer ElementType)[]
   ? ElementType
   : never
 export type KeyOfStr<T extends Obj> = Extract<keyof T, string>
+export type MergeUnion<U extends Record<string, unknown>> = {
+  [K in U extends unknown ? keyof U : never]: U extends unknown
+    ? K extends keyof U
+      ? U[K]
+      : never
+    : never
+}
diff --git a/app/src/types/configPanels.ts b/app/src/types/configPanels.ts
new file mode 100644
index 000000000..aa9e6902a
--- /dev/null
+++ b/app/src/types/configPanels.ts
@@ -0,0 +1,80 @@
+import type { Ref } from 'vue'
+
+import type { Obj, KeyOfStr, CustomRoute } from '@/types/commons'
+import type {
+  FormField,
+  FormFieldReadonly,
+  FormFieldDisplay,
+  FormFieldDict,
+} from '@/types/form'
+import type {
+  AnyOptionType,
+  AnyOption,
+  OptionTypeToOptionResolver,
+} from '@/types/core/options'
+
+export const OPTION_COMPONENT_RESOLVER = {
+  display_text: 'DisplayTextItem',
+  markdown: 'MarkdownItem',
+  alert: 'ReadOnlyAlertItem',
+  button: 'ButtonItem',
+  string: 'InputItem',
+  text: 'TextAreaItem',
+  password: 'InputItem',
+  color: 'InputItem',
+  number: 'InputItem',
+  range: 'InputItem',
+  boolean: 'CheckboxItem',
+  date: 'InputItem',
+  time: 'InputItem',
+  email: 'InputItem',
+  path: 'InputItem',
+  url: 'InputItem',
+  file: 'FileItem',
+  select: 'SelectItem',
+  tags: 'TagsItem',
+  'tags-select': 'TagsSelectizeItem',
+  domain: 'SelectItem',
+  app: 'SelectItem',
+  user: 'SelectItem',
+  group: 'SelectItem',
+} as const
+
+export function isIn<T extends AnyOptionType, U extends AnyOption>(
+  coll: ReadonlyArray<T>,
+  el: U,
+): el is U & OptionTypeToOptionResolver[T] {
+  return coll.includes(el.type as T)
+}
+
+// FIXME move to types/form.ts?
+export type AnyFormField = FormField | FormFieldReadonly | FormFieldDisplay
+
+export type ConfigSection<MV extends Obj, FFD extends FormFieldDict<MV>> = {
+  help: string
+  fields: KeyOfStr<FFD>[]
+  id: string
+  isActionSection: boolean
+  name?: string
+  visible: boolean
+}
+
+export type ConfigPanel<
+  NestedMV extends Obj,
+  MV extends Obj<NestedMV>,
+  FFD extends FormFieldDict<NestedMV> = FormFieldDict<NestedMV>,
+> = {
+  fields: FFD
+  help: string
+  hasApplyButton: boolean
+  id: KeyOfStr<MV>
+  icon?: string
+  name: string
+  sections?: ConfigSection<NestedMV, FFD>[]
+}
+
+export type ConfigPanels<NestedMV extends Obj, MV extends Obj<NestedMV>> = {
+  forms: Record<keyof MV, Ref<NestedMV>>
+  panels: ConfigPanel<NestedMV, MV>[]
+  routes: CustomRoute[]
+}
diff --git a/app/src/types/core/options.ts b/app/src/types/core/options.ts
index 78008b60b..fc5ab4f64 100644
--- a/app/src/types/core/options.ts
+++ b/app/src/types/core/options.ts
@@ -8,7 +8,7 @@ type Pattern = {
 
 // CONFIG PANELS
 
-export type CoreConfigPanels<MV extends Obj<Obj>> = {
+export type CoreConfigPanels<MV extends Obj<Obj> = Obj<Obj>> = {
   panels: CoreConfigPanel<MV>[]
 }
 
@@ -17,7 +17,7 @@ export type CoreConfigPanel<MV extends Obj> = {
   icon?: string
   id: KeyOfStr<MV>
   name?: Translation
-  sections: CoreConfigSection[]
+  sections?: CoreConfigSection[]
 }
 
 export type CoreConfigSection = {
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 28d94a5ef..50dba32b5 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -5,6 +5,7 @@ import type {
 } from '@vuelidate/core'
 import type { RouteLocationRaw } from 'vue-router'
 
+import { isObjectLiteral } from '@/helpers/commons'
 import type { ArrInnerType, Cols, Obj, StateVariant } from '@/types/commons'
 
 type StateValidation = false | null
@@ -129,6 +130,21 @@ export type TextAreaItemProps = BaseWritableItemProps & {
   // type?: string // FIXME unused?
 }
 
+export type AnyDisplayItemProps =
+  | ButtonItemProps
+  | DisplayTextItemProps
+  | MarkdownItemProps
+  | ReadOnlyAlertItemProps
+export type AnyWritableItemProps =
+  | AdressItemProps
+  | CheckboxItemProps
+  | FileItemProps
+  | InputItemProps
+  | SelectItemProps
+  | TagsItemProps
+  | TagsSelectizeItemProps
+  | TextAreaItemProps
+
 // FIELDS
 
 const ANY_WRITABLE_COMPONENTS = [
@@ -178,6 +194,16 @@ export function isDisplayComponent(
   )
 }
 
+export function isNonWritableComponent(
+  field:
+    | FormField<AnyWritableComponents>
+    | FormField
+    | FormFieldReadonly
+    | FormFieldDisplay,
+): field is FormFieldDisplay | FormFieldReadonly {
+  return isDisplayComponent(field) || !!field.readonly
+}
+
 type ItemComponentToItemProps = {
   // DISPLAY
   ButtonItem: ButtonItemProps
@@ -235,7 +261,7 @@ export type FormField<
   readonly?: false
 }
 
-type FormFieldReadonly<
+export type FormFieldReadonly<
   C extends AnyWritableComponents = AnyWritableComponents,
 > = BaseFormField<C> & {
   label: string
@@ -243,7 +269,9 @@ type FormFieldReadonly<
   readonly: true
 }
 
-type FormFieldDisplay<C extends AnyDisplayComponents = AnyDisplayComponents> = {
+export type FormFieldDisplay<
+  C extends AnyDisplayComponents = AnyDisplayComponents,
+> = {
   component: C
   props: ItemComponentToItemProps[C]
   visible?: boolean
@@ -275,6 +303,7 @@ export type FormFieldDict<T extends Obj = Obj> = {
         | FormFieldDisplay<AnyDisplayComponents>
 }
 
+// Type to check if object satisfies specified Field and Item
 export type FieldProps<
   C extends AnyItemComponents = 'InputItem',
   MV extends any = never,
@@ -283,3 +312,11 @@ export type FieldProps<
   : C extends AnyDisplayComponents
     ? FormFieldDisplay<C>
     : never
+
+export function isFileModelValue(value: any): value is FileModelValue {
+  return isObjectLiteral(value) && 'file' in value
+}
+
+export function isAdressModelValue(value: any): value is AdressModelValue {
+  return isObjectLiteral(value) && 'separator' in value
+}

From 016acc7b50e50ada12af8de2e1c39dac06faa87a Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 22 Jul 2024 17:51:53 +0200
Subject: [PATCH 109/275] ts: add types to common helpers

---
 app/src/helpers/commons.ts | 105 +++++++++++++++++++++++++------------
 1 file changed, 71 insertions(+), 34 deletions(-)

diff --git a/app/src/helpers/commons.ts b/app/src/helpers/commons.ts
index 421aee727..abe4cc55a 100644
--- a/app/src/helpers/commons.ts
+++ b/app/src/helpers/commons.ts
@@ -1,13 +1,19 @@
+import type { UnwrapRef } from 'vue'
+
+import type { Obj } from '@/types/commons'
+
 /**
  * Allow to set a timeout on a `Promise` expected response.
  * The returned Promise will be rejected if the original Promise is not resolved or
  * rejected before the delay.
  *
- * @param {Promise} promise - A promise (like a fetch call).
- * @param {Number} delay - delay after which the promise is rejected
- * @return {Promise}
+ * @param promise - A promise (like a fetch call).
+ * @param delay - delay after which the promise is rejected
  */
-export function timeout(promise, delay) {
+export function timeout<T extends unknown>(
+  promise: Promise<T>,
+  delay: number,
+): Promise<T> {
   return new Promise((resolve, reject) => {
     // FIXME reject(new Error('api_not_responding')) for post-install
     setTimeout(() => reject, delay)
@@ -18,10 +24,9 @@ export function timeout(promise, delay) {
 /**
  * Check if passed value is an object literal.
  *
- * @param {*} value - Anything.
- * @return {Boolean}
+ * @param value - Anything.
  */
-export function isObjectLiteral(value) {
+export function isObjectLiteral(value: any): value is object {
   return (
     value !== null &&
     value !== undefined &&
@@ -41,23 +46,52 @@ export function objectGet<
  * Check if value is "empty" (`null`, `undefined`, `''`, `[]`, '{}').
  * Note: `0` is not considered "empty" in that helper.
  *
- * @param {*} value - Anything.
- * @return {Boolean}
+ * @param value - Anything.
  */
-export function isEmptyValue(value) {
-  if (typeof value === 'number') return false
-  return !value || value.length === 0 || Object.keys(value).length === 0
+export function isEmptyValue(
+  value: any,
+): value is null | undefined | '' | [] | {} {
+  if (typeof value === 'number' || typeof value === 'boolean') return false
+  return (
+    !value ||
+    (Array.isArray(value) && value.length === 0) ||
+    Object.keys(value).length === 0
+  )
 }
 
+type Flatten<T extends object> = object extends T
+  ? object
+  : {
+        [K in keyof T]-?: (
+          x: NonNullable<T[K]> extends infer V
+            ? V extends object
+              ? V extends readonly any[]
+                ? Pick<T, K>
+                : Flatten<V> extends infer FV
+                  ? {
+                      [P in keyof FV as `${Extract<P, string | number>}`]: FV[P]
+                    }
+                  : never
+              : Pick<T, K>
+            : never,
+        ) => void
+      } extends Record<keyof T, (y: infer O) => void>
+    ? O extends infer U
+      ? { [K in keyof O]: O[K] }
+      : never
+    : never
+
 /**
  * Returns an flattened object literal, with all keys at first level and removing nested ones.
  *
- * @param {Object} obj - An object literal to flatten.
- * @param {Object} [flattened={}] - An object literal to add passed obj keys/values.
- * @return {Object}
+ * @param obj - An object literal to flatten.
+ * @param flattened - An object literal to add passed obj keys/values.
  */
-export function flattenObjectLiteral(obj, flattened = {}) {
-  function flatten(objLit) {
+export function flattenObjectLiteral<T extends object>(
+  obj: T,
+  flattened: Partial<Flatten<T>> = {},
+) {
+  function flatten(objLit: Partial<Flatten<T>>) {
     for (const key in objLit) {
       const value = objLit[key]
       if (isObjectLiteral(value)) {
@@ -68,18 +102,24 @@ export function flattenObjectLiteral(obj, flattened = {}) {
     }
   }
   flatten(obj)
-  return flattened
+  return flattened as Flatten<T>
 }
 
 /**
  * Returns an new Object filtered with passed filter function.
  * Each entry `[key, value]` will be forwarded to the `filter` function.
  *
- * @param {Object} obj - object to filter.
- * @param {Function} filter - the filter function to call for each entry.
- * @return {Object}
+ * @param obj - object to filter.
+ * @param filter - the filter function to call for each entry.
  */
-export function filterObject(obj, filter) {
+export function filterObject<T extends Obj>(
+  obj: T,
+  filter: (
+    entries: [string, any],
+    index: number,
+    array: [string, any][],
+  ) => boolean,
+) {
   return Object.fromEntries(
     Object.entries(obj).filter((...args) => filter(...args)),
   )
@@ -87,22 +127,20 @@ export function filterObject(obj, filter) {
 
 /**
  * Returns an new array containing items that are in first array but not in the other.
- *
- * @param {Array} [arr1=[]]
- * @param {Array} [arr2=[]]
- * @return {Array}
  */
-export function arrayDiff(arr1 = [], arr2 = []) {
+export function arrayDiff<T extends string>(
+  arr1: T[] = [],
+  arr2: T[] = [],
+): T[] {
   return arr1.filter((item) => !arr2.includes(item))
 }
 
 /**
  * Returns a new string with escaped HTML (`&<>"'` replaced by entities).
  *
- * @param {String} unsafe
- * @return {String}
+ * @param unsafe - string to escape
  */
-export function escapeHtml(unsafe) {
+export function escapeHtml(unsafe: string) {
   return unsafe
     .replace(/&/g, '&amp;')
     .replace(/</g, '&lt;')
@@ -114,11 +152,10 @@ export function escapeHtml(unsafe) {
 /**
  * Returns a random integer between `min` and `max`.
  *
- * @param {Number} min
- * @param {Number} max
- * @return {Number}
+ * @param min - min possible value
+ * @param max - max possible value
  */
-export function randint(min, max) {
+export function randint(min: number, max: number) {
   return Math.floor(Math.random() * (max - min + 1)) + min
 }
 

From ab30cb8c0445b5c9c6bafa9bd67466fb41697d65 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 24 Jul 2024 16:40:41 +0200
Subject: [PATCH 110/275] ts: type core data formating functions

---
 app/src/helpers/yunohostArguments.ts | 57 ++++++++++++++--------------
 app/src/views/user/UserEdit.vue      |  6 +--
 2 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/app/src/helpers/yunohostArguments.ts b/app/src/helpers/yunohostArguments.ts
index 276738093..24c455bf9 100644
--- a/app/src/helpers/yunohostArguments.ts
+++ b/app/src/helpers/yunohostArguments.ts
@@ -1,21 +1,12 @@
-import i18n from '@/i18n'
-import store from '@/store'
-import evaluate from 'simple-evaluate'
-import * as validators from '@/helpers/validators'
 import {
-  isObjectLiteral,
-  isEmptyValue,
   flattenObjectLiteral,
   getFileContent,
+  isEmptyValue,
+  isObjectLiteral,
 } from '@/helpers/commons'
-
-const NO_VALUE_FIELDS = [
-  'FormFieldReadonly',
-  'ReadOnlyAlertItem',
-  'MarkdownItem',
-  'DisplayTextItem',
-  'ButtonItem',
-]
+import store from '@/store'
+import type { Translation } from '@/types/commons'
+import type { AdressModelValue } from '@/types/form'
 
 export const DEFAULT_STATUS_ICON = {
   [null]: null,
@@ -26,29 +17,35 @@ export const DEFAULT_STATUS_ICON = {
   warning: 'warning',
 }
 
+// FORMAT FROM CORE
+
 /**
  * Tries to find a translation corresponding to the user's locale/fallback locale in a
  * Yunohost argument or simply return the string if it's not an object literal.
  *
- * @param {(Object|String|undefined)} field - A field value containing a translation object or string
- * @return {String}
+ * @param field - A field value containing a translation object or string
+ * @return translated field or empty string
  */
-export function formatI18nField(field) {
+export function formatI18nField(field?: Translation): string {
+  if (!field) return ''
   if (typeof field === 'string') return field
-  const { locale, fallbackLocale } = store.state
-  return field ? field[locale] || field[fallbackLocale] || field.en : ''
+  const { locale, fallbackLocale } = store.state as {
+    locale: string
+    fallbackLocale: string
+  }
+  return field[locale] || field[fallbackLocale] || field.en || ''
 }
 
 /**
  * Returns a string size declaration to a M value.
  *
- * @param {String} sizeStr - A size declared like '500M' or '56k'
- * @return {Number}
+ * @param size - A size declared like '500M' or '56k'
+ * @return a number in M
  */
-export function sizeToM(sizeStr) {
-  const unit = sizeStr.slice(-1)
-  const value = sizeStr.slice(0, -1)
-  if (unit === 'M') return parseInt(value)
+export function sizeToM(size: string) {
+  const unit = size.slice(-1)
+  const value = parseInt(size.slice(0, -1))
+  if (unit === 'M') return value
   if (unit === 'b') return Math.ceil(value / (1024 * 1024))
   if (unit === 'k') return Math.ceil(value / 1024)
   if (unit === 'G') return Math.ceil(value * 1024)
@@ -56,17 +53,19 @@ export function sizeToM(sizeStr) {
 }
 
 /**
- * Returns a formatted address element to be used by AdressItem component.
+ * Returns an address as AdressModelValue to be used by AdressItem component.
  *
- * @param {String} address - A string representing an adress (subdomain or email)
- * @return {Object} - `{ localPart, separator, domain }`.
+ * @param address - A string representing an adress (subdomain or email)
+ * @return Parsed address as `AdressModelValue`
  */
-export function adressToFormValue(address) {
+export function formatAdress(address: string): AdressModelValue {
   const separator = address.includes('@') ? '@' : '.'
   const [localPart, domain] = address.split(separator)
   return { localPart, separator, domain }
 }
 
+// FORMAT TO CORE
+
 /**
  * Parse a front-end value to its API equivalent. This function returns a Promise or an
  * Object `{ key: Promise }` if `key` is supplied. When parsing a form, all those
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 914bc9a4c..afa324cc2 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -19,7 +19,7 @@ import {
   sameAs,
 } from '@/helpers/validators'
 import {
-  adressToFormValue,
+  formatAdress,
   formatFormData,
   sizeToM,
 } from '@/helpers/yunohostArguments'
@@ -154,10 +154,10 @@ const { v, onSubmit } = useForm(form, fields)
 
 function onQueriesResponse(user_: any) {
   form.value.fullname = user_.fullname
-  form.value.mail = adressToFormValue(user_.mail)
+  form.value.mail = formatAdress(user_.mail)
   if (user_['mail-aliases']) {
     form.value.mail_aliases = user_['mail-aliases'].map((mail) =>
-      adressToFormValue(mail),
+      formatAdress(mail),
     )
   }
   if (user_['mail-forward']) {

From 7a1b4ba453835019aa7a67136d1a93374e1e9dc3 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 24 Jul 2024 16:53:21 +0200
Subject: [PATCH 111/275] feat: add useConfigPanels composable

---
 app/src/composables/configPanels.ts | 131 +++++++++++++++++++++++++---
 app/src/composables/form.ts         |  20 ++++-
 2 files changed, 137 insertions(+), 14 deletions(-)

diff --git a/app/src/composables/configPanels.ts b/app/src/composables/configPanels.ts
index f303f82bf..5da8ba78e 100644
--- a/app/src/composables/configPanels.ts
+++ b/app/src/composables/configPanels.ts
@@ -1,11 +1,20 @@
 import evaluate from 'simple-evaluate'
-import { computed, ref, toValue, type MaybeRefOrGetter, type Ref } from 'vue'
+import type {
+  ComputedRef,
+  MaybeRefOrGetter,
+  Ref,
+  WritableComputedRef,
+} from 'vue'
+import { computed, ref, toValue, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 
+import { APIBadRequestError, APIError } from '@/api/errors'
+import { deepSetErrors, useForm, type FormValidation } from '@/composables/form'
 import { asUnreffed, isObjectLiteral } from '@/helpers/commons'
 import * as validators from '@/helpers/validators'
-import { formatI18nField } from '@/helpers/yunohostArguments'
-import type { MergeUnion, Obj } from '@/types/commons'
+import { formatForm, formatI18nField } from '@/helpers/yunohostArguments'
+import type { CustomRoute, KeyOfStr, MergeUnion, Obj } from '@/types/commons'
 import type {
   AnyFormField,
   ConfigPanel,
@@ -218,7 +227,7 @@ function formatOption(option: AnyOption, form: Ref<Obj>): AnyFormField {
  * @param options - a core Option array written by a packager
  * @return An object with form and fields
  */
-function formatOptions<MV extends Obj>(
+export function formatOptions<MV extends Obj>(
   options: AnyOption[],
 ): {
   fields: FormFieldDict<MV>
@@ -248,14 +257,16 @@ function formatConfigPanel<NestedMV extends Obj, MV extends Obj<NestedMV>>(
   form: Ref<NestedMV>
   panel: ConfigPanel<NestedMV, MV>
 } {
-  const options = panel.sections.flatMap((section) => section.options)
-  const { form, fields } = formatOptions<NestedMV>(options)
+  const options = panel.sections?.flatMap((section) => section.options)
+  const { form, fields } = options
+    ? formatOptions<NestedMV>(options)
+    : { form: ref({}) as Ref<NestedMV>, fields: {} as FormFieldDict<NestedMV> }
   let hasApplyButton = false
 
-  const sections = panel.sections.map((section) => {
-    const sectionFieldsIds = section.options.map(
-      (option) => option.id,
-    ) as ConfigPanel<NestedMV, MV>['sections'][number]['fields']
+  const sections = panel.sections?.map((section) => {
+    const sectionFieldsIds = section.options.map<
+      KeyOfStr<FormFieldDict<NestedMV>>
+    >((option) => option.id)
 
     if (
       !section.is_action_section &&
@@ -370,3 +381,103 @@ function useEvaluation(expression: string, form: MaybeRefOrGetter<Obj>) {
     }
   })
 }
+
+export type OnPanelApply<MV extends Obj = Obj> = (
+  data: { panelId: keyof MV; data: Obj; action?: string },
+  onError: (err: APIError, errorMessage?: string) => void,
+) => void
+
+export type ConfigPanelsProps<
+  NestedMV extends Obj = Obj,
+  MV extends Obj<NestedMV> = Obj<NestedMV>,
+> = {
+  form: WritableComputedRef<NestedMV>
+  panel: ComputedRef<ConfigPanel<NestedMV, MV, FormFieldDict<NestedMV>>>
+  routes: CustomRoute[]
+  v: Ref<FormValidation<NestedMV>>
+  onPanelApply: (actionId?: KeyOfStr<FormFieldDict<NestedMV>>) => void
+}
+
+export function useConfigPanels<NestedMV extends Obj, MV extends Obj<NestedMV>>(
+  config: ConfigPanels<NestedMV, MV>,
+  tabId: MaybeRefOrGetter<keyof MV | undefined>,
+  onPanelApply: OnPanelApply<MV>,
+): ConfigPanelsProps<NestedMV, MV> {
+  const router = useRouter()
+  watch(
+    () => toValue(tabId),
+    (id) => {
+      if (!id) {
+        router.replace({ params: { tabId: config.panels[0].id } })
+      }
+    },
+    { immediate: true },
+  )
+
+  const panelId = computed(() => toValue(tabId) || config.panels[0].id)
+  const panel = computed(() => {
+    return config.panels.find((panel) => panel.id === panelId.value)!
+  })
+
+  const form = computed({
+    get: () => config.forms[panelId.value].value,
+    set: (form) => (config.forms[panelId.value].value = form),
+  })
+
+  const { v, serverErrors } = useForm<NestedMV>(form, () => panel.value.fields)
+
+  function onErrorFn(err: APIError) {
+    if (!(err instanceof APIBadRequestError)) throw err
+    if (err.data.name) {
+      deepSetErrors(
+        serverErrors,
+        [err.message],
+        'form',
+        // FIXME probably need to remove panel + section id
+        ...err.data.name.split('.'),
+      )
+    } else {
+      serverErrors.global = [err.message]
+    }
+  }
+
+  const onBeforePanelApply = async (
+    actionId?: KeyOfStr<FormFieldDict<NestedMV>>,
+  ) => {
+    const panelId = panel.value.id
+    let form: NestedMV | Partial<NestedMV> = config.forms[panelId].value
+    let action: undefined | string = undefined
+
+    if (actionId) {
+      const section = panel.value.sections!.find((section) =>
+        section.fields.includes(actionId),
+      )!
+      action = `${panelId}.${section.id}.${actionId}`
+      const actionForm: Partial<NestedMV> = {}
+      for (const id of section.fields) {
+        if (id in form) {
+          // FIXME check visible? skip validate and value if not visible?
+          if (!(await v.value.form[id].$validate())) return
+          actionForm[id] = form[id]
+        }
+      }
+      form = actionForm
+    } else {
+      if (!(await v.value.form.$validate())) return
+    }
+    const data = await formatFormData(form, {
+      removeEmpty: false,
+      removeNull: true,
+    })
+
+    onPanelApply({ panelId, data, action }, onErrorFn)
+  }
+
+  return {
+    form,
+    panel,
+    routes: config.routes,
+    v,
+    onPanelApply: onBeforePanelApply,
+  }
+}
diff --git a/app/src/composables/form.ts b/app/src/composables/form.ts
index 27d38613c..8f9bca4bd 100644
--- a/app/src/composables/form.ts
+++ b/app/src/composables/form.ts
@@ -1,13 +1,20 @@
 import type {
   BaseValidation,
   ServerErrors,
+  Validation,
   ValidationArgs,
   ValidationRuleCollection,
 } from '@vuelidate/core'
 import useVuelidate from '@vuelidate/core'
-import type { ComputedRef, InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
-import { computed, inject, provide, reactive, toValue } from 'vue'
 import { computedWithControl } from '@vueuse/core'
+import type {
+  ComputedRef,
+  InjectionKey,
+  MaybeRefOrGetter,
+  Ref,
+  WritableComputedRef,
+} from 'vue'
+import { computed, inject, provide, reactive, toValue } from 'vue'
 
 import { APIBadRequestError, type APIError } from '@/api/errors'
 import type { Obj } from '@/types/commons'
@@ -42,10 +49,15 @@ export function useTouch(
   return touch
 }
 
+export type FormValidation<MV extends Obj> = Validation<
+  { global: { true: () => true }; form: ValidationArgs<MV> },
+  { form: Ref<MV> | WritableComputedRef<MV>; global: null }
+>
+
 export function useForm<
   MV extends Obj,
   FFD extends FormFieldDict<MV> = FormFieldDict<MV>,
->(form: Ref<MV>, fields: MaybeRefOrGetter<FFD>) {
+>(form: Ref<MV> | WritableComputedRef<MV>, fields: MaybeRefOrGetter<FFD>) {
   const serverErrors = reactive<ServerErrors>({})
   const validByDefault: ValidationRuleCollection = { true: () => true }
   const rules = computedWithControl(
@@ -65,7 +77,7 @@ export function useForm<
     },
   )
 
-  const v = useVuelidate(
+  const v: Ref<FormValidation<MV>> = useVuelidate(
     rules,
     { form, global: null },
     { $externalResults: serverErrors },

From d3f843b1b144728314f2bbe8329651e0e9150f85 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 24 Jul 2024 16:55:10 +0200
Subject: [PATCH 112/275] feat: add config panels sections display in CardForm

---
 app/src/components/globals/CardForm.vue | 167 ++++++++++++++++--------
 1 file changed, 111 insertions(+), 56 deletions(-)

diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index fe994787b..c78ec353a 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -1,21 +1,12 @@
-<script
-  setup
-  lang="ts"
-  generic="
-    MV extends Obj,
-    FFD extends FormFieldDict<MV>,
-    V extends Validation<
-      ValidationArgs<unknown>,
-      { form: Ref<MV>; global: null }
-    >
-  "
->
-import type { Validation, ValidationArgs } from '@vuelidate/core'
-import { computed, toValue } from 'vue'
+<script setup lang="ts" generic="MV extends Obj, FFD extends FormFieldDict<MV>">
+import { createReusableTemplate } from '@vueuse/core'
+import { computed, reactive, toValue } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import type { FormValidation } from '@/composables/form'
 import { toEntries } from '@/helpers/commons'
-import type { Obj, VueClass } from '@/types/commons'
+import type { KeyOfStr, Obj, VueClass } from '@/types/commons'
+import type { ConfigSection } from '@/types/configPanels'
 import type {
   AnyDisplayComponents,
   AnyWritableComponents,
@@ -29,12 +20,13 @@ const props = withDefaults(
     id?: string
     modelValue?: MV
     fields?: FFD
-    validations?: V
+    validations?: FormValidation<MV>
     submitText?: string
     inline?: boolean
     formClasses?: VueClass
     noFooter?: boolean
     hr?: boolean
+    sections?: ConfigSection<MV, FFD>[]
   }>(),
   {
     id: 'ynh-form',
@@ -46,24 +38,29 @@ const props = withDefaults(
     formClasses: undefined,
     noFooter: false,
     hr: false,
+    sections: undefined,
   },
 )
 
 const emit = defineEmits<{
   submit: [e: SubmitEvent]
+  action: [actionId: KeyOfStr<FFD>] //, sectionId?: ConfigSection<MV, FFD>['id']]
   'update:modelValue': [modelValue: MV]
 }>()
 
 const slots = defineSlots<
   {
+    top?: any
     disclaimer?: any
+    'before-form'?: any
     default?: any
     'server-error'?: any
+    'after-form'?: any
     buttons: any
   } & {
-    [K in Extract<keyof MV, string> as `field:${K}`]?: (_: FFD[K]) => any
+    [K in KeyOfStr<FFD> as `field:${K}`]?: (_: FFD[K]) => any
   } & {
-    [K in Extract<keyof FFD, string> as `component:${K}`]?: (
+    [K in KeyOfStr<FFD> as `component:${K}`]?: (
       _: FFD[K]['component'] extends AnyWritableComponents
         ? FFD[K]['props'] & BaseItemComputedProps<MV[K]>
         : FFD[K]['component'] extends AnyDisplayComponents
@@ -83,6 +80,16 @@ const globalErrorFeedback = computed(() => {
 })
 
 const fields = computed(() => (props.fields ? toEntries(props.fields) : []))
+const sections = computed(() => {
+  const { sections, fields } = props
+  if (!sections || !fields) return
+  return sections.map((section) => ({
+    ...section,
+    fields: reactive(section.fields.map((id) => [id, fields[id]])) as {
+      [k in Extract<keyof FFD, string>]: [k, FFD[k]]
+    }[Extract<keyof FFD, string>][],
+  }))
+})
 
 function onModelUpdate(key: keyof MV, value: MV[keyof MV]) {
   emit('update:modelValue', {
@@ -90,13 +97,71 @@ function onModelUpdate(key: keyof MV, value: MV[keyof MV]) {
     [key]: value,
   })
 }
+
+const Fields = createReusableTemplate<{
+  fieldsProps: { [k in Extract<keyof FFD, string>]: [k, FFD[k]] }[Extract<
+    keyof FFD,
+    string
+  >][]
+}>()
 </script>
 
 <template>
-  <YCard class="card-form">
+  <Fields.define v-slot="{ fieldsProps }">
+    <template v-for="[k, field] in fieldsProps" :key="k">
+      <template v-if="field.visible ?? true">
+        <slot
+          v-if="isWritableComponent<MV[typeof k]>(field)"
+          :name="`field:${k}`"
+          v-bind="field"
+        >
+          <FormField
+            v-if="!field.readonly"
+            v-bind="field"
+            :model-value="props.modelValue![k]"
+            :validation="props.validations?.form[k]"
+            @update:model-value="onModelUpdate(k, $event)"
+          >
+            <template v-if="slots[`component:${k}`]" #default="childProps">
+              <slot :name="`component:${k}`" v-bind="childProps" />
+            </template>
+          </FormField>
+          <FormFieldReadonly
+            v-else
+            v-bind="field"
+            :model-value="props.modelValue![k]"
+          />
+        </slot>
+        <slot
+          v-else-if="isDisplayComponent(field)"
+          :name="`component:${k}`"
+          v-bind="field.props"
+        >
+          <Component
+            :is="field.component"
+            v-if="field.component !== 'ButtonItem'"
+            v-bind="field.props"
+          />
+          <ButtonItem
+            v-else
+            v-bind="field.props"
+            @action="emit('action', $event as typeof field.props.id)"
+          />
+        </slot>
+
+        <hr v-if="field.hr ?? hr" />
+      </template>
+    </template>
+  </Fields.define>
+
+  <YCard class="card-form" v-bind="$attrs">
     <template #default>
+      <slot name="top" />
+
       <slot name="disclaimer" />
 
+      <slot name="before-form" />
+
       <BForm
         :id="id"
         :inline="inline"
@@ -105,47 +170,25 @@ function onModelUpdate(key: keyof MV, value: MV[keyof MV]) {
         @submit.prevent.stop="emit('submit', $event as SubmitEvent)"
       >
         <slot name="default">
-          <template v-for="[key, fieldProps] in fields" :key="key">
-            <template v-if="fieldProps.visible ?? true">
-              <slot
-                v-if="isWritableComponent<MV[typeof key]>(fieldProps)"
-                :name="`field:${key}`"
-                v-bind="fieldProps"
+          <template v-if="sections">
+            <template v-for="section in sections" :key="section.id">
+              <Component
+                :is="section.name ? 'section' : 'div'"
+                v-if="section.visible"
+                class="form-section"
               >
-                <FormField
-                  v-if="!fieldProps.readonly"
-                  v-bind="fieldProps"
-                  :model-value="props.modelValue![key]"
-                  :validation="props.validations?.form[key]"
-                  @update:model-value="onModelUpdate(key, $event)"
-                >
-                  <template
-                    v-if="slots[`component:${key}`]"
-                    #default="childProps"
-                  >
-                    <slot :name="`component:${key}`" v-bind="childProps" />
-                  </template>
-                </FormField>
-                <FormFieldReadonly
-                  v-else
-                  v-bind="fieldProps"
-                  :model-value="props.modelValue![key]"
-                />
-              </slot>
-              <slot
-                v-else-if="isDisplayComponent(fieldProps)"
-                :name="`component:${key}`"
-                v-bind="fieldProps.props"
-              >
-                <Component
-                  :is="fieldProps.component"
-                  v-bind="fieldProps.props"
-                />
-              </slot>
+                <BCardTitle v-if="section.name" title-tag="h3">
+                  {{ section.name }}
+                  <small v-if="section.help">{{ section.help }}</small>
+                </BCardTitle>
 
-              <hr v-if="fieldProps.hr ?? hr" />
+                <Fields.reuse :fields-props="section.fields" />
+              </Component>
             </template>
           </template>
+          <template v-else-if="fields">
+            <Fields.reuse :fields-props="fields" />
+          </template>
         </slot>
 
         <slot name="server-error">
@@ -159,6 +202,8 @@ function onModelUpdate(key: keyof MV, value: MV[keyof MV]) {
           </BAlert>
         </slot>
       </BForm>
+
+      <slot name="after-form" />
     </template>
 
     <template v-if="!noFooter" #buttons>
@@ -170,3 +215,13 @@ function onModelUpdate(key: keyof MV, value: MV[keyof MV]) {
     </template>
   </YCard>
 </template>
+
+<style lang="scss" scoped>
+.card-title {
+  margin-bottom: 1em;
+  border-bottom: solid $border-width $gray-500;
+}
+.form-section:not(:last-child) {
+  margin-bottom: 3rem;
+}
+</style>

From 8af40dd04a91d384077cbd45de46fe3e38597dc0 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 24 Jul 2024 17:01:39 +0200
Subject: [PATCH 113/275] refactor: update ConfigPanels component to receive
 useConfigPanels data

---
 app/src/components/ConfigPanels.vue | 133 ++++++++++++++--------------
 1 file changed, 66 insertions(+), 67 deletions(-)

diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index d7c05a6d5..5699e63de 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -1,88 +1,87 @@
-<script setup lang="ts">
-import { useVuelidate, type BaseValidation } from '@vuelidate/core'
-import { computed, defineAsyncComponent, toRef } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-
-import type { CustomRoute, Obj } from '@/types/commons'
+<script
+  setup
+  lang="ts"
+  generic="NestedMV extends Obj, MV extends Obj<NestedMV>"
+>
+import type { FormValidation } from '@/composables/form'
+import type { KeyOfStr, Obj } from '@/types/commons'
+import type { ConfigPanel, ConfigPanels } from '@/types/configPanels'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const RoutableTabs = defineAsyncComponent(
-  () => import('@/components/RoutableTabs.vue'),
-)
+const props = defineProps<{
+  // modelValue: MV[keyof MV]
+  panel: ConfigPanel<NestedMV, MV>
+  routes: ConfigPanels<NestedMV, MV>['routes']
+  validations: FormValidation<NestedMV>
+}>()
 
-const props = withDefaults(
-  defineProps<{
-    panels: Obj[]
-    forms: Obj<Obj>
-    validations: BaseValidation
-    externalResults: Obj
-    errors?: Obj // never used
-    noRedirect?: boolean
-    routes?: CustomRoute[]
-  }>(),
-  {
-    errors: undefined,
-    routes: undefined,
-    noRedirect: false,
-  },
-)
+const emit = defineEmits<{
+  apply: [action?: KeyOfStr<typeof props.panel.fields>]
+  'update:modelValue': [modelValue: MV[keyof MV]]
+}>()
 
 const slots = defineSlots<{
-  'tab-top': any
-  'tab-before': any
-  'tab-after': any
+  'tab-top'?: any
+  'tab-before'?: any
+  default?: any
+  'tab-after'?: any
 }>()
 
-const externalResults = toRef(props, 'externalResults')
-const rules = computed(() => ({ forms: props.validations }))
-const v$ = useVuelidate(rules, props.forms, {
-  $externalResults: externalResults,
-})
-
-const router = useRouter()
-const route = useRoute()
-const routes = computed(() => {
-  return (
-    props.routes ||
-    props.panels.map((panel) => ({
-      to: { params: { tabId: panel.id } },
-      text: panel.name,
-      icon: panel.icon || 'wrench',
-    }))
-  )
-})
-
-if (!props.noRedirect && !route.params.tabId) {
-  router.replace({ params: { tabId: props.panels[0].id } })
-}
+const modelValue = defineModel<NestedMV>({ required: true })
 </script>
 
 <template>
-  <div class="config-panel">
-    <!-- FIXME vue3 - weird stuff with event binding, need to propagate by hand for now -->
-    <RoutableTabs
-      v-if="routes.length > 1"
-      v-bind="{ panels, forms, v: v$, ...$attrs }"
-      :routes="routes"
+  <BCard v-if="routes.length > 1" no-body class="config-panel">
+    <BCardHeader header-tag="nav">
+      <BNav card-header fill pills>
+        <BNavItem
+          v-for="route in routes"
+          :key="route.text"
+          :to="route.to"
+          :active="$route.params.tabId === route.to.params?.tabId"
+        >
+          <!-- FIXME added :active="" because `exact-active-class` not working https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/1754 -->
+          <!-- exact-active-class="active" -->
+          <YIcon v-if="route.icon" :iname="route.icon" />
+          {{ route.text }}
+        </BNavItem>
+      </BNav>
+    </BCardHeader>
+
+    <CardForm
+      v-model="modelValue"
+      :fields="panel.fields"
+      :no-footer="!panel.hasApplyButton"
+      :sections="panel.sections"
+      :validations="validations"
+      as-tab
+      @submit="emit('apply')"
+      @action="emit('apply', $event)"
     >
-      <template #tab-top>
+      <template #top>
         <slot name="tab-top" />
       </template>
-      <template #tab-before>
+      <template v-if="panel.help" #disclaimer>
+        <div class="alert alert-info" v-html="panel.help" />
+      </template>
+      <template #before-form>
         <slot name="tab-before" />
       </template>
-      <template #tab-after>
+      <template v-if="slots.default" #default>
+        <slot name="default" />
+      </template>
+      <template #after-form>
         <slot name="tab-after" />
       </template>
-    </RoutableTabs>
-
-    <YCard v-else :title="routes[0].text" :icon="routes[0].icon">
-      <slot name="tab-top" />
-      <slot name="tab-before" />
-      <slot name="tab-after" />
-    </YCard>
-  </div>
+    </CardForm>
+  </BCard>
+  <YCard v-else :title="routes[0].text" :icon="routes[0].icon">
+    <slot name="tab-top" />
+    <slot name="tab-before" />
+    <slot name="default" />
+    <slot name="tab-after" />
+  </YCard>
 </template>

From 678638534bbed2bf2d75f4f867accaed462ce62c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 25 Jul 2024 10:08:11 +0200
Subject: [PATCH 114/275] refactor: update config panels views using
 useConfigPanels

---
 app/src/router/routes.ts            | 64 +++++++-------------
 app/src/views/app/AppInfo.vue       | 94 +++++++++++++----------------
 app/src/views/domain/DomainInfo.vue | 75 +++++++++++------------
 app/src/views/tool/ToolSettings.vue | 66 +++++++++-----------
 4 files changed, 126 insertions(+), 173 deletions(-)

diff --git a/app/src/router/routes.ts b/app/src/router/routes.ts
index dadfb4239..8422ca4ab 100644
--- a/app/src/router/routes.ts
+++ b/app/src/router/routes.ts
@@ -141,22 +141,15 @@ const routes = [
     },
   },
   {
-    path: '/domains/:name',
+    name: 'domain-info',
+    path: '/domains/:name/:tabId?',
     component: () => import('@/views/domain/DomainInfo.vue'),
     props: true,
-    children: [
-      {
-        name: 'domain-info',
-        path: ':tabId?',
-        component: () => import('@/components/ConfigPanel.vue'),
-        props: true,
-        meta: {
-          routerParams: ['name'], // Override router key params to avoid view recreation at tab change.
-          args: { param: 'name' },
-          breadcrumb: ['domain-list', 'domain-info'],
-        },
-      },
-    ],
+    meta: {
+      routerParams: ['name'], // Override router key params to avoid view recreation at tab change.
+      args: { param: 'name' },
+      breadcrumb: ['domain-list', 'domain-info'],
+    },
   },
 
   /* ───────╮
@@ -202,22 +195,15 @@ const routes = [
     },
   },
   {
-    path: '/apps/:id',
+    name: 'app-info',
+    path: '/apps/:id/:tabId?',
     component: () => import('@/views/app/AppInfo.vue'),
     props: true,
-    children: [
-      {
-        name: 'app-info',
-        path: ':tabId?',
-        component: () => import('@/components/ConfigPanel.vue'),
-        props: true,
-        meta: {
-          routerParams: ['id'], // Override router key params to avoid view recreation at tab change.
-          args: { param: 'id' },
-          breadcrumb: ['app-list', 'app-info'],
-        },
-      },
-    ],
+    meta: {
+      routerParams: ['id'], // Override router key params to avoid view recreation at tab change.
+      args: { param: 'id' },
+      breadcrumb: ['app-list', 'app-info'],
+    },
   },
 
   /* ────────────────╮
@@ -315,21 +301,15 @@ const routes = [
     },
   },
   {
-    path: '/tools/settings',
+    name: 'tool-settings',
+    path: '/tools/settings/:tabId?',
     component: () => import('@/views/tool/ToolSettings.vue'),
-    children: [
-      {
-        name: 'tool-settings',
-        path: ':tabId?',
-        component: () => import('@/components/ConfigPanel.vue'),
-        props: true,
-        meta: {
-          routerParams: [],
-          args: { trad: 'tools_yunohost_settings' },
-          breadcrumb: ['tool-list', 'tool-settings'],
-        },
-      },
-    ],
+    props: true,
+    meta: {
+      routerParams: [],
+      args: { trad: 'tools_yunohost_settings' },
+      breadcrumb: ['tool-list', 'tool-settings'],
+    },
   },
   {
     name: 'tool-power',
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 255bbe111..a71ede7b7 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -1,26 +1,29 @@
 <script setup lang="ts">
 import { useVuelidate } from '@vuelidate/core'
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, shallowRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
 import api, { objectToParams } from '@/api'
-import { APIBadRequestError, type APIError } from '@/api/errors'
-import ConfigPanels from '@/components/ConfigPanels.vue'
+import { type APIError } from '@/api/errors'
+import ConfigPanelsComponent from '@/components/ConfigPanels.vue'
+import type {
+  ConfigPanelsProps,
+  OnPanelApply,
+} from '@/composables/configPanels'
+import { formatConfigPanels, useConfigPanels } from '@/composables/configPanels'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import { isEmptyValue } from '@/helpers/commons'
 import { humanPermissionName } from '@/helpers/filters/human'
 import { helpers, required } from '@/helpers/validators'
-import {
-  formatFormData,
-  formatI18nField,
-  formatYunoHostConfigPanels,
-} from '@/helpers/yunohostArguments'
+import { formatI18nField } from '@/helpers/yunohostArguments'
 import { useStoreGetters } from '@/store/utils'
+import type { CoreConfigPanels } from '@/types/core/options'
 
 const props = defineProps<{
   id: string
+  tabId?: string
 }>()
 
 const { t } = useI18n()
@@ -60,18 +63,8 @@ const { loading, refetch } = useInitialQueries(
 
 const app = ref()
 const purge = ref(false)
-const config_panel_err = ref(null)
-const config = ref({
-  panels: [
-    // Fake integration of operations in config panels
-    {
-      hasApplyButton: false,
-      id: 'operations',
-      name: t('operations'),
-    },
-  ],
-  validations: {},
-})
+const configPanelErr = ref('')
+const config = shallowRef<ConfigPanelsProps | undefined>()
 const doc = ref()
 
 const currentTab = computed(() => {
@@ -215,47 +208,39 @@ async function onQueriesResponse(app_: any) {
     await api
       .get(`apps/${props.id}/config?full`)
       .then((cp) => {
-        const config_ = formatYunoHostConfigPanels(cp)
-        // reinject 'operations' fake config tab
-        config_.panels.unshift(config.panels[0])
-        config.value = config_
+        const config_ = cp as CoreConfigPanels
+        // Fake integration of operations in config panels
+        config_.panels.unshift({
+          id: 'operations',
+          name: t('operations'),
+        })
+        config.value = useConfigPanels(
+          formatConfigPanels(config_),
+          () => props.tabId,
+          onPanelApply,
+        )
       })
       .catch((err: APIError) => {
-        config_panel_err.value = err.message
+        configPanelErr.value = err.message
       })
   }
 }
 
-async function onConfigSubmit({ id, form, action, name }) {
-  const args = await formatFormData(form, {
-    removeEmpty: false,
-    removeNull: true,
-  })
-
+const onPanelApply: OnPanelApply = ({ panelId, data, action }, onError) => {
   api
     .put(
       action
         ? `apps/${props.id}/actions/${action}`
-        : `apps/${props.id}/config/${id}`,
-      isEmptyValue(args) ? {} : { args: objectToParams(args) },
+        : `apps/${props.id}/config/${panelId}`,
+      isEmptyValue(data) ? {} : { args: objectToParams(data) },
       {
         key: `apps.${action ? 'action' : 'update'}_config`,
-        id,
+        id: panelId,
         name: props.id,
       },
     )
     .then(() => refetch())
-    .catch((err: APIError) => {
-      if (!(err instanceof APIBadRequestError)) throw err
-      const panel = config.value.panels.find((panel) => panel.id === id)!
-      if (err.data.name) {
-        Object.assign(externalResults, {
-          forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
-        })
-      } else {
-        panel.serverError = err.message
-      }
-    })
+    .catch(onError)
 }
 
 function changeLabel(permName, data) {
@@ -439,20 +424,23 @@ async function uninstall() {
       <VueShowdown :markdown="app.description" />
     </section>
 
-    <YAlert v-if="config_panel_err" class="mb-4" variant="danger" icon="bug">
+    <YAlert v-if="configPanelErr" class="mb-4" variant="danger" icon="bug">
       <p>{{ $t('app.info.config_panel_error') }}</p>
-      <p>{{ config_panel_err }}</p>
+      <p>{{ configPanelErr }}</p>
       <p>{{ $t('app.info.config_panel_error_please_report') }}</p>
     </YAlert>
 
     <!-- BASIC INFOS -->
-    <ConfigPanels
-      v-bind="config"
-      :external-results="externalResults"
-      @apply="onConfigSubmit"
+    <ConfigPanelsComponent
+      v-if="config"
+      v-model="config.form"
+      :panel="config.panel.value"
+      :validations="config.v.value"
+      :routes="config.routes"
+      @apply="config.onPanelApply"
     >
       <!-- OPERATIONS TAB -->
-      <template v-if="currentTab === 'operations'" #tab-top>
+      <template v-if="currentTab === 'operations'" #default>
         <!-- CHANGE PERMISSIONS LABEL -->
         <BFormGroup
           :label="$t('app_manage_label_and_tiles')"
@@ -584,7 +572,7 @@ async function uninstall() {
           </template>
         </BFormGroup>
       </template>
-    </ConfigPanels>
+    </ConfigPanelsComponent>
 
     <BCard v-if="app && app.doc.admin.length" no-body>
       <BTabs card fill pills>
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 724c6bc37..cee755529 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -1,22 +1,25 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 
 import api, { objectToParams } from '@/api'
-import ConfigPanels from '@/components/ConfigPanels.vue'
+import ConfigPanelsComponent from '@/components/ConfigPanels.vue'
+import type {
+  ConfigPanelsProps,
+  OnPanelApply,
+} from '@/composables/configPanels'
+import { formatConfigPanels, useConfigPanels } from '@/composables/configPanels'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { useInitialQueries } from '@/composables/useInitialQueries'
-import {
-  formatFormData,
-  formatYunoHostConfigPanels,
-} from '@/helpers/yunohostArguments'
 import { useStoreGetters } from '@/store/utils'
+import type { CoreConfigPanels } from '@/types/core/options'
 import DomainDns from '@/views/domain/DomainDns.vue'
 
 const props = defineProps<{
   name: string
+  tabId?: string
 }>()
 
 const { t } = useI18n()
@@ -34,14 +37,9 @@ const { loading, refetch } = useInitialQueries(
 )
 
 const { mainDomain } = useStoreGetters()
-const config = ref({})
-const externalResults = reactive({})
+const config = shallowRef<ConfigPanelsProps | undefined>()
 const unsubscribeDomainFromDyndns = ref(false)
 
-const currentTab = computed(() => {
-  return route.params.tabId
-})
-
 const domain = computed(() => {
   return store.getters.domain(props.name)
 })
@@ -80,40 +78,33 @@ const isMainDynDomain = computed(() => {
   )
 })
 
-function onQueriesResponse(domains: any, domain: any, config_: any) {
-  config.value = formatYunoHostConfigPanels(config_)
+function onQueriesResponse(
+  domains: any,
+  domain: any,
+  config_: CoreConfigPanels,
+) {
+  config.value = useConfigPanels(
+    formatConfigPanels(config_),
+    () => props.tabId,
+    onPanelApply,
+  )
 }
 
-async function onConfigSubmit({ id, form, action, name }) {
-  const args = await formatFormData(form, {
-    removeEmpty: false,
-    removeNull: true,
-  })
-
+const onPanelApply: OnPanelApply = ({ panelId, data, action }, onError) => {
   api
     .put(
       action
         ? `domain/${props.name}/actions/${action}`
-        : `domains/${props.name}/config/${id}`,
-      { args: objectToParams(args) },
+        : `domains/${props.name}/config/${panelId}`,
+      { args: objectToParams(data) },
       {
         key: `domains.${action ? 'action' : 'update'}_config`,
-        id,
+        id: panelId,
         name: props.name,
       },
     )
     .then(() => refetch())
-    .catch((err) => {
-      if (err.name !== 'APIBadRequestError') throw err
-      const panel = config.value.panels.find((panel) => panel.id === id)
-      if (err.data.name) {
-        Object.assign(externalResults, {
-          forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
-        })
-      } else {
-        panel.serverError = err.message
-      }
-    })
+    .catch(onError)
 }
 
 async function deleteDomain() {
@@ -254,16 +245,18 @@ async function setAsDefaultDomain() {
       </DescriptionRow>
     </YCard>
 
-    <ConfigPanels
-      v-if="config.panels"
-      v-bind="config"
-      :external-results="externalResults"
-      @apply="onConfigSubmit"
+    <ConfigPanelsComponent
+      v-if="config"
+      v-model="config.form"
+      :panel="config.panel.value"
+      :validations="config.v.value"
+      :routes="config.routes"
+      @apply="config.onPanelApply"
     >
-      <template v-if="currentTab === 'dns'" #tab-after>
+      <template v-if="tabId === 'dns'" #tab-after>
         <DomainDns :name="name" />
       </template>
-    </ConfigPanels>
+    </ConfigPanelsComponent>
 
     <BModal
       v-if="domain"
diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index 188b1f653..4055a3521 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -1,61 +1,53 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { shallowRef } from 'vue'
 
 import api, { objectToParams } from '@/api'
-import { APIBadRequestError, type APIError } from '@/api/errors'
-import ConfigPanels from '@/components/ConfigPanels.vue'
+import ConfigPanelsComponent from '@/components/ConfigPanels.vue'
+import type {
+  ConfigPanelsProps,
+  OnPanelApply,
+} from '@/composables/configPanels'
+import { formatConfigPanels, useConfigPanels } from '@/composables/configPanels'
 import { useInitialQueries } from '@/composables/useInitialQueries'
-import {
-  formatFormData,
-  formatYunoHostConfigPanels,
-} from '@/helpers/yunohostArguments'
+import type { CoreConfigPanels } from '@/types/core/options'
+
+const props = defineProps<{ tabId?: string }>()
 
 const { loading, refetch } = useInitialQueries([['GET', 'settings?full']], {
   onQueriesResponse,
 })
-const config = ref({})
-// FIXME user proper useValidate stuff
-const externalResults = reactive({})
+const config = shallowRef<ConfigPanelsProps | undefined>()
 
-function onQueriesResponse(config_: any) {
-  config.value = formatYunoHostConfigPanels(config_)
+function onQueriesResponse(config_: CoreConfigPanels) {
+  config.value = useConfigPanels(
+    formatConfigPanels(config_),
+    () => props.tabId,
+    onPanelApply,
+  )
 }
 
-async function onConfigSubmit({ id, form }) {
-  const args = await formatFormData(form, {
-    removeEmpty: false,
-    removeNull: true,
-  })
-
+const onPanelApply: OnPanelApply = ({ panelId, data }, onError) => {
   // FIXME no route for potential action
   api
     .put(
-      `settings/${id}`,
-      { args: objectToParams(args) },
-      { key: 'settings.update', panel: id },
+      `settings/${panelId}`,
+      { args: objectToParams(data) },
+      { key: 'settings.update', panel: panelId },
     )
     .then(() => refetch())
-    .catch((err: APIError) => {
-      if (!(err instanceof APIBadRequestError)) throw err
-      const panel = config.value.panels.find((panel) => panel.id === id)
-      if (err.data.name) {
-        Object.assign(externalResults, {
-          forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
-        })
-      } else {
-        panel.serverError = err.message
-      }
-    })
+    .catch(onError)
 }
 </script>
 
 <template>
   <ViewBase :loading="loading" skeleton="CardFormSkeleton">
-    <ConfigPanels
-      v-if="config.panels"
-      v-bind="config"
-      :external-results="externalResults"
-      @apply="onConfigSubmit"
+    <ConfigPanelsComponent
+      v-if="config"
+      v-model="config.form"
+      :panel="config.panel.value"
+      :validations="config.v.value"
+      :routes="config.routes"
+      @apply="config.onPanelApply"
     />
   </ViewBase>
 </template>

From 4f59343614f6d937caa188f257986df1bf4c2043 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 25 Jul 2024 10:12:34 +0200
Subject: [PATCH 115/275] refactor: rework form api formating

---
 app/src/helpers/yunohostArguments.ts | 231 +++++++++++++++++----------
 1 file changed, 150 insertions(+), 81 deletions(-)

diff --git a/app/src/helpers/yunohostArguments.ts b/app/src/helpers/yunohostArguments.ts
index 24c455bf9..733f6376e 100644
--- a/app/src/helpers/yunohostArguments.ts
+++ b/app/src/helpers/yunohostArguments.ts
@@ -1,12 +1,15 @@
+import { toValue, type MaybeRef } from 'vue'
+
 import {
-  flattenObjectLiteral,
   getFileContent,
   isEmptyValue,
   isObjectLiteral,
+  toEntries,
 } from '@/helpers/commons'
 import store from '@/store'
-import type { Translation } from '@/types/commons'
-import type { AdressModelValue } from '@/types/form'
+import type { ArrInnerType, Obj, Translation } from '@/types/commons'
+import type { AdressModelValue, FileModelValue } from '@/types/form'
+import { isAdressModelValue, isFileModelValue } from '@/types/form'
 
 export const DEFAULT_STATUS_ICON = {
   [null]: null,
@@ -66,105 +69,171 @@ export function formatAdress(address: string): AdressModelValue {
 
 // FORMAT TO CORE
 
+type BasePossibleFormValues =
+  | FileModelValue
+  | AdressModelValue
+  | boolean
+  | string
+  | number
+  | null
+  | undefined
+type PossibleFormValues = BasePossibleFormValues | BasePossibleFormValues[]
+
 /**
- * Parse a front-end value to its API equivalent. This function returns a Promise or an
- * Object `{ key: Promise }` if `key` is supplied. When parsing a form, all those
- * objects must be merged to define the final sent form.
+ * Parse a front-end value to its API equivalent.
+ * This function is async because we may need to read a file content.
  *
  * Convert Boolean to '1' (true) or '0' (false),
  * Concatenate two parts adresses (subdomain or email for example) into a single string,
  * Convert File to its Base64 representation or set its value to '' to ask for a removal.
  *
- * @param {*} value
- * @return {*}
+ * @param value - Any {@link PossibleFormValues}
+ * @return Promise that resolves the formated value
  */
-export function formatFormDataValue(value, key = null) {
-  if (Array.isArray(value)) {
-    return Promise.all(value.map((value_) => formatFormDataValue(value_))).then(
-      (resolvedValues) => ({ [key]: resolvedValues }),
-    )
-  }
+export async function formatFormValue<T extends PossibleFormValues>(
+  value: T,
+): Promise<FormValueReturnType<T>> {
+  // TODO: couldn't manage proper type checking for this function
+  // Returned type is ok but it is not type safe since we return `any`
+  let formated: any = value
 
-  let result = value
-  if (typeof value === 'boolean') result = value ? 1 : 0
-  if (isObjectLiteral(value) && 'file' in value) {
+  if (typeof value === 'boolean') {
+    formated = value ? 1 : 0
+  } else if (Array.isArray(value)) {
+    formated = await Promise.all(value.map((v) => formatFormValue(v)))
+  } else if (isFileModelValue(value)) {
     // File has to be deleted
-    if (value.removed) result = ''
+    if (value.removed) formated = ''
     // File has not changed (will not be sent)
-    else if (value.current || value.file === null) result = null
+    else if (value.current || value.file === null) formated = null
     else {
-      return getFileContent(value.file, { base64: true }).then((content) => {
-        return {
-          [key]: content.replace(/data:[^;]*;base64,/, ''),
-          [key + '[name]']: value.file.name,
-        }
-      })
+      const filename = value.file.name
+      formated = await getFileContent(value.file, { base64: true }).then(
+        (content) => {
+          return {
+            content: content.replace(/data:[^;]*;base64,/, ''),
+            filename,
+          }
+        },
+      )
     }
-  } else if (isObjectLiteral(value) && 'separator' in value) {
-    result = Object.values(value).join('')
+  } else if (isAdressModelValue(value)) {
+    formated = Object.values(value).join('')
   }
 
-  // Returns a resolved Promise for non async values
-  return Promise.resolve(key ? { [key]: result } : result)
+  return formated
 }
 
-/**
- * Convinient helper to properly parse a front-end form to its API equivalent.
- * This parse each values asynchronously, allow to inject keys into the final form and
- * make sure every async values resolves before resolving itself.
- *
- * @param {Object} formData
- * @return {Object}
- */
-function formatFormDataValues(formData) {
-  const promisedValues = Object.entries(formData).map(([key, value]) => {
-    return formatFormDataValue(value, key)
-  })
-
-  return Promise.all(promisedValues).then((resolvedValues) => {
-    return resolvedValues.reduce((form, obj) => ({ ...form, ...obj }), {})
-  })
+type FileReturnType<T extends FileModelValue> = T extends {
+  removed: true
 }
+  ? ''
+  : T extends {
+        file: File
+      }
+    ? { content: string; filename: string }
+    : null
+export type FormValueReturnType<T extends PossibleFormValues> =
+  T extends boolean
+    ? 0 | 1
+    : T extends FileModelValue
+      ? FileReturnType<T>
+      : T extends AdressModelValue
+        ? string
+        : T extends BasePossibleFormValues[]
+          ? FormValueReturnType<ArrInnerType<T>>[]
+          : T extends string | number | null | undefined
+            ? T
+            : never
 
 /**
- * Format a form produced by a vue view to be sent to the server.
+ * Format a frontend form to its API equivalent to be sent to the server.
+ * This function is async because we need to read files content.
+ *
+ * /!\ FIXME
+ * Files type are wrong, they resolves as `{ filename: string; content: string }`
+ * but in reality they resolves as 2 keys in the returned form. See implementation.
+ * /!\
  *
- * @param {Object} formData - An object literal containing form values.
- * @param {Object} [extraParams] - Optionnal params
- * @param {Array} [extraParams.extract] - An array of keys that should be extracted from the form.
- * @param {Boolean} [extraParams.flatten=false] - Flattens or not the passed formData.
- * @param {Boolean} [extraParams.removeEmpty=true] - Removes "empty" values from the object.
- * @return {Object} the parsed data to be sent to the server, with extracted values if specified.
+ * @param form - An `Obj` containing form values
+ * @param removeEmpty - Removes "empty" values (`null | undefined | '' | [] | {}`) from the object
+ * @param removeNull - Removes `null | undefined` values from the object
+ * @return API data ready to be sent to the server.
  */
-export async function formatFormData(
-  formData,
-  {
-    extract = null,
-    flatten = false,
-    removeEmpty = true,
-    removeNull = false,
-  } = {},
-) {
-  const output = {
-    data: {},
-    extracted: {},
-  }
+export function formatForm<
+  T extends Obj<PossibleFormValues>,
+  R extends { [k in keyof T]: Awaited<FormValueReturnType<T[k]>> },
+>(
+  form: MaybeRef<T>,
+  { removeEmpty = false },
+): Promise<
+  Partial<{
+    // TODO: using `Partial` for now since i'm not sure we can infer empty `'' | [] | {}`
+    [k in keyof R as R[k] extends undefined | null ? never : k]: R[k]
+  }>
+>
+export function formatForm<
+  T extends Obj<PossibleFormValues>,
+  R extends { [k in keyof T]: Awaited<FormValueReturnType<T[k]>> },
+>(
+  form: MaybeRef<T>,
+  { removeNullish = false },
+): Promise<{
+  [k in keyof R as R[k] extends undefined | null ? never : k]: R[k]
+}>
+export function formatForm<
+  T extends Obj<PossibleFormValues>,
+  R extends { [k in keyof T]: Awaited<FormValueReturnType<T[k]>> },
+>(form: MaybeRef<T>): Promise<R>
+export function formatForm<
+  T extends Obj<PossibleFormValues>,
+  R extends { [k in keyof T]: Awaited<FormValueReturnType<T[k]>> },
+>(
+  form: MaybeRef<T>,
+  { removeEmpty = false, removeNullish = false } = {},
+): Promise<FormatFormReturnType<R>> {
+  const [keys, promises] = toEntries(toValue(form)).reduce(
+    (acc, [key, v]) => {
+      acc[0].push(key)
+      acc[1].push(formatFormValue(v))
+      return acc
+    },
+    [[] as (keyof T)[], [] as Promise<FormValueReturnType<T[keyof T]>>[]],
+  )
 
-  const values = await formatFormDataValues(formData)
-  for (const key in values) {
-    const type = extract && extract.includes(key) ? 'extracted' : 'data'
-    const value = values[key]
-    if (removeEmpty && isEmptyValue(value)) {
-      continue
-    } else if (removeNull && [null, undefined].includes(value)) {
-      continue
-    } else if (flatten && isObjectLiteral(value)) {
-      flattenObjectLiteral(value, output[type])
-    } else {
-      output[type][key] = value
+  return Promise.all(promises).then((resolvedValues) => {
+    let entries = resolvedValues.map((v, i) => [keys[i], v] as const)
+    if (removeEmpty || removeNullish) {
+      entries = entries.filter((entry) => {
+        return !(
+          (removeEmpty && isEmptyValue(entry[1])) ||
+          (removeNullish && [null, undefined].includes(entry[1] as any))
+        )
+      })
     }
-  }
-
-  const { data, extracted } = output
-  return extract ? { data, ...extracted } : data
+    // Special handling of files which are a bit weird, we inject 2 keys
+    // in the form, one for the filename and one with its content.
+    // TODO: could be improved, with a single key for example as to current
+    // type `{ filename: string; content: string }` and remove the next `reduce`
+    return entries.reduce(
+      (form, [k, v]) => {
+        if (isObjectLiteral(v) && 'filename' in v && 'content' in v) {
+          // @ts-ignore (mess to type)
+          form[k] = v.content
+          // @ts-ignore (mess to type)
+          form[`${String(k)}[name]`] = v.filename
+        }
+        form[k] = v
+        return form
+      },
+      {} as { [k in keyof T]: Awaited<FormValueReturnType<T[k]>> },
+    )
+  }) as Promise<FormatFormReturnType<R>>
 }
+
+export type FormatFormReturnType<R> =
+  | Partial<{
+      [k in keyof R as R[k] extends undefined | null ? never : k]: R[k]
+    }>
+  | { [k in keyof R as R[k] extends undefined | null ? never : k]: R[k] }
+  | R

From 67ab4a26376ff12d52f7a9168fe7c7f43aebd705 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 25 Jul 2024 11:16:38 +0200
Subject: [PATCH 116/275] refactor: reflect formatForm changes to views

---
 app/src/composables/configPanels.ts    |  5 +----
 app/src/views/PostInstall.vue          | 20 +++++++++++---------
 app/src/views/_partials/DomainForm.vue | 17 ++++++++++-------
 app/src/views/app/AppInstall.vue       |  8 ++------
 app/src/views/user/UserCreate.vue      |  4 ++--
 app/src/views/user/UserEdit.vue        | 11 +++--------
 app/src/views/user/UserImport.vue      |  4 ++--
 7 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/app/src/composables/configPanels.ts b/app/src/composables/configPanels.ts
index 5da8ba78e..937b84bbc 100644
--- a/app/src/composables/configPanels.ts
+++ b/app/src/composables/configPanels.ts
@@ -465,10 +465,7 @@ export function useConfigPanels<NestedMV extends Obj, MV extends Obj<NestedMV>>(
     } else {
       if (!(await v.value.form.$validate())) return
     }
-    const data = await formatFormData(form, {
-      removeEmpty: false,
-      removeNull: true,
-    })
+    const data = await formatForm(form, { removeNullish: true })
 
     onPanelApply({ panelId, data, action }, onErrorFn)
   }
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 2d19ad652..203723afa 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -14,7 +14,7 @@ import {
   required,
   sameAs,
 } from '@/helpers/validators'
-import { formatFormData } from '@/helpers/yunohostArguments'
+import { formatForm } from '@/helpers/yunohostArguments'
 import type { FieldProps, FormFieldDict } from '@/types/form'
 import LoginView from '@/views/LoginView.vue'
 import { DomainForm } from '@/views/_partials'
@@ -100,15 +100,17 @@ const setUser = onSubmit(async () => {
 })
 
 async function performPostInstall(force = false) {
-  // FIXME update formatFormData to unwrap ref auto
   const { username, fullname, password } = form.value
-  const data = await formatFormData({
-    domain: domain.value,
-    dyndns_recovery_password: dyndns_recovery_password.value,
-    username,
-    fullname,
-    password,
-  })
+  const data = await formatForm(
+    {
+      domain: domain.value,
+      dyndns_recovery_password: dyndns_recovery_password.value,
+      username,
+      fullname,
+      password,
+    },
+    { removeEmpty: true },
+  )
 
   // FIXME does the api will throw an error for bad passwords ?
   api
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index e4abc0422..e1a89c68f 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -11,7 +11,7 @@ import {
   required,
   sameAs,
 } from '@/helpers/validators'
-import { formatFormData } from '@/helpers/yunohostArguments'
+import { formatForm } from '@/helpers/yunohostArguments'
 import { useStoreGetters } from '@/store/utils'
 import type { AdressModelValue, FieldProps, FormFieldDict } from '@/types/form'
 
@@ -31,7 +31,7 @@ const props = withDefaults(
   },
 )
 const emit = defineEmits<{
-  submit: [data: { domain: string; dyndns_recovery_password: string }]
+  submit: [data: Partial<{ domain: string; dyndns_recovery_password: string }>]
 }>()
 
 const { t } = useI18n()
@@ -169,11 +169,14 @@ const onDomainAdd = onSubmit(async () => {
   const domainType = selected.value
   if (!domainType) return
 
-  const data = await formatFormData({
-    domain: form.value[domainType],
-    dyndns_recovery_password:
-      domainType === 'dynDomain' ? form.value.dynDomainPassword : '',
-  })
+  const data = await formatForm(
+    {
+      domain: form.value[domainType],
+      dyndns_recovery_password:
+        domainType === 'dynDomain' ? form.value.dynDomainPassword : '',
+    },
+    { removeEmpty: true },
+  )
   emit('submit', data)
 })
 </script>
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index b327d7c61..8fba54b50 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -9,7 +9,7 @@ import { APIBadRequestError, type APIError } from '@/api/errors'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import {
-  formatFormData,
+  formatForm,
   formatI18nField,
   formatYunoHostArguments,
 } from '@/helpers/yunohostArguments'
@@ -174,11 +174,7 @@ async function performInstall() {
     if (!confirmed) return
   }
 
-  const { data: args, label } = await formatFormData(form, {
-    extract: ['label'],
-    removeEmpty: false,
-    removeNull: true,
-  })
+  const { label, ...args } = await formatForm(form, { removeNullish: true })
   const data = {
     app: props.id,
     label,
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index f3e2175f6..3ff1dc681 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -15,7 +15,7 @@ import {
   sameAs,
   unique,
 } from '@/helpers/validators'
-import { formatFormData } from '@/helpers/yunohostArguments'
+import { formatForm } from '@/helpers/yunohostArguments'
 import { useStoreGetters } from '@/store/utils'
 import type { FieldProps, FormFieldDict } from '@/types/form'
 
@@ -115,7 +115,7 @@ function onQueriesResponse() {
 }
 
 const onUserCreate = onSubmit(async (onError) => {
-  const data = await formatFormData(form.value, { flatten: true })
+  const data = await formatForm(form)
   api
     .post({ uri: 'users' }, data, {
       key: 'users.create',
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index afa324cc2..0669a2e3f 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -18,11 +18,7 @@ import {
   required,
   sameAs,
 } from '@/helpers/validators'
-import {
-  formatAdress,
-  formatFormData,
-  sizeToM,
-} from '@/helpers/yunohostArguments'
+import { formatAdress, formatForm, sizeToM } from '@/helpers/yunohostArguments'
 import { useStoreGetters } from '@/store/utils'
 import type { AdressModelValue, FieldProps, FormFieldDict } from '@/types/form'
 
@@ -172,9 +168,8 @@ function onQueriesResponse(user_: any) {
 }
 
 const onUserEdit = onSubmit(async (onError, serverErrors) => {
-  const { data: formData } = await formatFormData(form.value, {
-    flatten: true,
-    extract: ['username'],
+  const { username: _, ...formData } = await formatForm(form, {
+    removeEmpty: true,
   })
   // FIXME not sure computed can be executed?
   const user_ = user.value(props.name)
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index 43889990e..f2b19ffe6 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -8,7 +8,7 @@ import api from '@/api'
 import { useForm } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { required } from '@/helpers/validators'
-import { formatFormData } from '@/helpers/yunohostArguments'
+import { formatForm } from '@/helpers/yunohostArguments'
 import type { FieldProps, FileModelValue, FormFieldDict } from '@/types/form'
 
 const { t } = useI18n()
@@ -68,7 +68,7 @@ const onUserImport = onSubmit(async (onError) => {
   const requestArgs = { ...form.value } as Partial<Form>
   if (!requestArgs.delete) delete requestArgs.delete
   if (!requestArgs.update) delete requestArgs.update
-  const data = await formatFormData(requestArgs)
+  const data = await formatForm(requestArgs)
   api
     .post('users/import', data, null, { asFormData: true })
     .then(() => {

From 5408b0553cc9498b92dfb55a9678e53f4e97cfb1 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 25 Jul 2024 13:33:58 +0200
Subject: [PATCH 117/275] fix: `visible` + `enabled` reactivity

---
 app/src/components/globals/CardForm.vue             | 8 ++++----
 app/src/components/globals/formItems/ButtonItem.vue | 4 ++--
 app/src/composables/configPanels.ts                 | 6 +++---
 app/src/types/configPanels.ts                       | 4 ++--
 app/src/types/form.ts                               | 8 ++++----
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index c78ec353a..057feff61 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="MV extends Obj, FFD extends FormFieldDict<MV>">
 import { createReusableTemplate } from '@vueuse/core'
-import { computed, reactive, toValue } from 'vue'
+import { computed, toValue } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type { FormValidation } from '@/composables/form'
@@ -85,7 +85,7 @@ const sections = computed(() => {
   if (!sections || !fields) return
   return sections.map((section) => ({
     ...section,
-    fields: reactive(section.fields.map((id) => [id, fields[id]])) as {
+    fields: section.fields.map((id) => [id, fields[id]]) as {
       [k in Extract<keyof FFD, string>]: [k, FFD[k]]
     }[Extract<keyof FFD, string>][],
   }))
@@ -109,7 +109,7 @@ const Fields = createReusableTemplate<{
 <template>
   <Fields.define v-slot="{ fieldsProps }">
     <template v-for="[k, field] in fieldsProps" :key="k">
-      <template v-if="field.visible ?? true">
+      <template v-if="toValue(field.visible) ?? true">
         <slot
           v-if="isWritableComponent<MV[typeof k]>(field)"
           :name="`field:${k}`"
@@ -174,7 +174,7 @@ const Fields = createReusableTemplate<{
             <template v-for="section in sections" :key="section.id">
               <Component
                 :is="section.name ? 'section' : 'div'"
-                v-if="section.visible"
+                v-if="toValue(section.visible)"
                 class="form-section"
               >
                 <BCardTitle v-if="section.name" title-tag="h3">
diff --git a/app/src/components/globals/formItems/ButtonItem.vue b/app/src/components/globals/formItems/ButtonItem.vue
index 8fd424f62..29efd32d6 100644
--- a/app/src/components/globals/formItems/ButtonItem.vue
+++ b/app/src/components/globals/formItems/ButtonItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, toValue } from 'vue'
 
 import type { ButtonItemProps } from '@/types/form'
 
@@ -30,7 +30,7 @@ const icon = computed(() => {
   <BButton
     :id="id"
     :variant="type"
-    :disabled="!enabled"
+    :disabled="!toValue(enabled)"
     class="d-block mb-3"
     @click="emit('action', id)"
   >
diff --git a/app/src/composables/configPanels.ts b/app/src/composables/configPanels.ts
index 937b84bbc..67ce47c5b 100644
--- a/app/src/composables/configPanels.ts
+++ b/app/src/composables/configPanels.ts
@@ -11,7 +11,7 @@ import { useRouter } from 'vue-router'
 
 import { APIBadRequestError, APIError } from '@/api/errors'
 import { deepSetErrors, useForm, type FormValidation } from '@/composables/form'
-import { asUnreffed, isObjectLiteral } from '@/helpers/commons'
+import { isObjectLiteral } from '@/helpers/commons'
 import * as validators from '@/helpers/validators'
 import { formatForm, formatI18nField } from '@/helpers/yunohostArguments'
 import type { CustomRoute, KeyOfStr, MergeUnion, Obj } from '@/types/commons'
@@ -324,14 +324,14 @@ export function formatConfigPanels<
 function useExpression(
   expression: JSExpression | undefined,
   form: Ref<Obj>,
-): boolean {
+): boolean | ComputedRef<boolean> {
   if (typeof expression === 'boolean') return expression
   if (typeof expression === 'string') {
     // FIXME normalize expression in core? ('', 'false', 'true') and rm next 2 lines
     if (!expression || expression === 'true') return true
     if (expression === 'false') return false
     // FIXME remove asUnreffed and manage ref type?
-    return asUnreffed(useEvaluation(expression, form))
+    return useEvaluation(expression, form)
   }
   return true
 }
diff --git a/app/src/types/configPanels.ts b/app/src/types/configPanels.ts
index aa9e6902a..1ef788b03 100644
--- a/app/src/types/configPanels.ts
+++ b/app/src/types/configPanels.ts
@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 
 import type { Obj, KeyOfStr, CustomRoute } from '@/types/commons'
 import type {
@@ -56,7 +56,7 @@ export type ConfigSection<MV extends Obj, FFD extends FormFieldDict<MV>> = {
   id: string
   isActionSection: boolean
   name?: string
-  visible: boolean
+  visible: boolean | ComputedRef<boolean>
 }
 
 export type ConfigPanel<
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 50dba32b5..82c633415 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -3,6 +3,7 @@ import type {
   ValidationArgs,
   ValidationRuleCollection,
 } from '@vuelidate/core'
+import type { ComputedRef } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
 import { isObjectLiteral } from '@/helpers/commons'
@@ -19,7 +20,7 @@ type BaseDisplayItemProps = {
 
 export type ButtonItemProps = BaseDisplayItemProps & {
   // FIXME compute enabled JSExpression
-  enabled?: boolean
+  enabled?: boolean | ComputedRef<boolean>
   icon?: string
   type?: StateVariant
 }
@@ -239,8 +240,7 @@ type BaseFormField<C extends AnyItemComponents> = {
   label?: string
   props?: ItemComponentToItemProps[C]
   readonly?: boolean
-  // FIXME compute visible JSExpression
-  visible?: boolean
+  visible?: boolean | ComputedRef<boolean>
 }
 
 export type FormField<
@@ -274,7 +274,7 @@ export type FormFieldDisplay<
 > = {
   component: C
   props: ItemComponentToItemProps[C]
-  visible?: boolean
+  visible?: boolean | ComputedRef<boolean>
   hr?: boolean
   readonly?: true
 }

From ea6cf5e3cf68cf8cd7a560d16a84b7f729ccf82d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 25 Jul 2024 14:22:16 +0200
Subject: [PATCH 118/275] refactor: update AppInstall with async useForm

---
 app/src/views/app/AppInstall.vue | 89 ++++++++++++++------------------
 1 file changed, 39 insertions(+), 50 deletions(-)

diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 8fba54b50..5824037ff 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { useVuelidate } from '@vuelidate/core'
-import { computed, reactive, ref } from 'vue'
+import { ref, shallowRef, type Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
 import api, { objectToParams } from '@/api'
-import { APIBadRequestError, type APIError } from '@/api/errors'
+import { type APIError } from '@/api/errors'
+import { formatOptions } from '@/composables/configPanels'
+import { useForm, type FormValidation } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { useInitialQueries } from '@/composables/useInitialQueries'
-import {
-  formatForm,
-  formatI18nField,
-  formatYunoHostArguments,
-} from '@/helpers/yunohostArguments'
+import { formatForm, formatI18nField } from '@/helpers/yunohostArguments'
+import type { Obj } from '@/types/commons'
+import type { FormFieldDict } from '@/types/form'
 
 const props = defineProps<{
   id: string
@@ -23,11 +22,19 @@ const route = useRoute()
 const router = useRouter()
 const modalConfirm = useAutoModal()
 
-const form = reactive({})
-const validations = ref({})
-const rules = computed(() => validations)
-const externalResults = reactive({})
-const v$ = useVuelidate(rules, form, { $externalResults: externalResults })
+// TODO: handling async form is a mess, make a composable or something?
+const formData = shallowRef<
+  | {
+      form: Ref<Obj>
+      fields: FormFieldDict<Obj>
+      v: Ref<FormValidation<Obj>>
+      onSubmit: (
+        fn: (onError: (err: APIError) => void) => void,
+      ) => (e: SubmitEvent) => void
+    }
+  | undefined
+>()
+
 const { loading } = useInitialQueries(
   [
     ['GET', 'apps/catalog?full&with_categories&with_antifeatures'],
@@ -39,8 +46,6 @@ const { loading } = useInitialQueries(
 // FIXME
 const app = ref(undefined)
 const name = ref(undefined)
-const fields = ref(undefined)
-const serverError = ref('')
 const force = ref(false)
 
 function appLinksIcons(linkType) {
@@ -140,22 +145,19 @@ function onQueriesResponse(catalog: any, _app: any) {
 
   // FIXME yunohost should add the label field by default
   _app.install.unshift({
+    type: 'string',
+    id: 'label',
     ask: t('label_for_manifestname', { name }),
     default: name,
-    name: 'label',
     help: t('label_for_manifestname_help'),
+    optional: false,
   })
 
-  const {
-    form: form_,
-    fields,
-    validations,
-  } = formatYunoHostArguments(_app.install)
+  const { form, fields } = formatOptions(_app.install)
+  const { v, onSubmit } = useForm(form, fields)
+  formData.value = { form, fields, v, onSubmit }
 
   app.value = app_
-  fieds.value = fields
-  Object.assign(form, form_)
-  validations.value = validations
 }
 
 function formatAppNotifs(notifs) {
@@ -164,11 +166,13 @@ function formatAppNotifs(notifs) {
   }, '')
 }
 
-async function performInstall() {
-  if ('path' in form && form.path === '/') {
-    const confirmed = await this.modalConfirm(
+async function performInstall(onError: (err: APIError) => void) {
+  const { form } = formData.value!
+
+  if ('path' in form.value && form.value.path === '/') {
+    const confirmed = await modalConfirm(
       t('confirm_install_domain_root', {
-        domain: form.domain,
+        domain: form.value.domain,
       }),
     )
     if (!confirmed) return
@@ -200,12 +204,7 @@ async function performInstall() {
       }
       router.push({ name: 'app-list' })
     })
-    .catch((err: APIError) => {
-      if (!(err instanceof APIBadRequestError)) throw err
-      if (err.data.name) {
-        externalResults[err.data.name] = err.message
-      } else serverError.value = err.message
-    })
+    .catch(onError)
 }
 </script>
 
@@ -382,25 +381,15 @@ async function performInstall() {
 
       <!-- INSTALL FORM -->
       <CardForm
-        v-if="app.canInstall || force"
+        v-if="formData && (app.canInstall || force)"
+        v-model="formData.form.value"
+        :fields="formData.fields"
         :title="$t('app_install_parameters')"
         icon="cog"
         :submit-text="$t('install')"
-        :validation="v$"
-        :server-error="serverError"
-        @submit.prevent="performInstall"
-      >
-        <template v-for="(field, fname) in fields">
-          <Component
-            v-if="field.visible"
-            v-bind="field.props"
-            :is="field.is"
-            v-model="form[fname]"
-            :validation="v$.form[fname]"
-            :key="fname"
-          />
-        </template>
-      </CardForm>
+        :validations="formData.v.value"
+        @submit="formData.onSubmit(performInstall)($event)"
+      />
     </template>
 
     <!-- In case of a custom url with no manifest found -->

From be782c7bc99d2ca57aa2c3559e83a05c5534d930 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 25 Jul 2024 16:38:53 +0200
Subject: [PATCH 119/275] refactor: update validators with ref and typing

---
 .../helpers/validators/customValidators.ts    | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/app/src/helpers/validators/customValidators.ts b/app/src/helpers/validators/customValidators.ts
index 181a532a0..209773e66 100644
--- a/app/src/helpers/validators/customValidators.ts
+++ b/app/src/helpers/validators/customValidators.ts
@@ -1,4 +1,8 @@
 import { helpers } from '@vuelidate/validators'
+import { toValue, type MaybeRef } from 'vue'
+
+// FIXME no typing, but the lib is currently not actively maintained
+// so it's propably better not to spend time on it.
 
 // Unicode ranges are taken from https://stackoverflow.com/a/37668315
 const nonAsciiWordCharacters =
@@ -20,7 +24,7 @@ const emailLocalPart = helpers.regex(/^[\w.-]+$/)
 
 const emailForwardLocalPart = helpers.regex(/^[\w+.-]+$/)
 
-const email = (value) => {
+const email = (value: string) => {
   const [localPart, domainPart] = value.split('@')
   if (!domainPart) return !helpers.req(value) || false
   return (
@@ -29,7 +33,7 @@ const email = (value) => {
 }
 
 // Same as email but with `+` allowed.
-const emailForward = (value) => {
+const emailForward = (value: string) => {
   const [localPart, domainPart] = value.split('@')
   if (!domainPart) return !helpers.req(value) || false
   return (
@@ -42,20 +46,15 @@ const appRepoUrl = helpers.regex(
   /^https:\/\/[a-zA-Z0-9-_.]+\/[a-zA-Z0-9-_./~]+\/[a-zA-Z0-9-_.]+_ynh(\/?(-\/)?tree\/[a-zA-Z0-9-_.]+)?(\.git)?\/?$/,
 )
 
-const includes = (items) =>
-  helpers.withParams(
-    { type: 'includes' },
-    (item) => !helpers.req(item) || (items ? items.includes(item) : false),
-  )
-
 const name = helpers.regex(
   new RegExp(`^(?:[A-Za-z${nonAsciiWordCharacters}]{1,30}[ ,.'-]{0,3})+$`),
 )
 
-const unique = (items) =>
-  helpers.withParams({ type: 'unique', arg: items }, (item) =>
-    items ? !helpers.req(item) || !items.includes(item) : true,
-  )
+const unique = (items: MaybeRef<any[]>) =>
+  helpers.withParams({ type: 'unique', arg: toValue(items) }, (item) => {
+    const items_ = toValue(items)
+    return items_ ? !helpers.req(item) || !items_.includes(item) : true
+  })
 
 export {
   alphalownumdot_,
@@ -66,7 +65,6 @@ export {
   emailForwardLocalPart,
   emailLocalPart,
   appRepoUrl,
-  includes,
   name,
   unique,
 }

From 3c6f4f3e3c664f1ec960a0bae599e340ff165cd6 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 25 Jul 2024 17:03:27 +0200
Subject: [PATCH 120/275] refactor: rm no longer used configpanel related
 components

---
 app/src/components/ConfigPanel.vue          | 122 --------------------
 app/src/components/RoutableTabs.vue         |  52 ---------
 app/src/components/globals/AbstractForm.vue | 100 ----------------
 3 files changed, 274 deletions(-)
 delete mode 100644 app/src/components/ConfigPanel.vue
 delete mode 100644 app/src/components/RoutableTabs.vue
 delete mode 100644 app/src/components/globals/AbstractForm.vue

diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
deleted file mode 100644
index 71d5788e7..000000000
--- a/app/src/components/ConfigPanel.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<script setup lang="ts">
-import type { BaseValidation } from '@vuelidate/core'
-import { computed } from 'vue'
-
-import { filterObject } from '@/helpers/commons'
-import type { Obj } from '@/types/commons'
-
-const props = defineProps<{
-  tabId: string
-  panels: Obj[]
-  forms: Obj<Obj>
-  v: BaseValidation
-}>()
-
-const slots = defineSlots<{
-  'tab-top': any
-  'tab-before': any
-  'tab-after': any
-}>()
-
-const emit = defineEmits<{
-  apply: [
-    value:
-      | { id: string; form: Obj }
-      | { id: string; form: Obj; action: string; name: string },
-  ]
-}>()
-
-const panel = computed(() => {
-  // FIXME throw error if no panel?
-  return props.panels.find((panel) => panel.id === props.tabId)
-})
-
-const validation = computed(() => {
-  return props.v.forms[panel.value?.id]
-})
-
-function onApply() {
-  const panelId = panel.value?.id
-
-  emit('apply', {
-    id: panelId,
-    form: props.forms[panelId],
-  })
-}
-
-function onAction(sectionId: string, actionId: string, actionFields) {
-  const panelId = panel.value?.id
-  const actionFieldsKeys = Object.keys(actionFields)
-
-  emit('apply', {
-    id: panelId,
-    form: filterObject(props.forms[panelId], ([key]) =>
-      actionFieldsKeys.includes(key),
-    ),
-    action: [panelId, sectionId, actionId].join('.'),
-    name: actionId,
-  })
-}
-</script>
-
-<template>
-  <AbstractForm
-    v-if="panel"
-    v-bind="{
-      id: panel.id + '-form',
-      validation,
-      serverError: panel.serverError,
-    }"
-    @submit="onApply"
-    :no-footer="!panel.hasApplyButton"
-  >
-    <slot name="tab-top" />
-
-    <template v-if="panel.help" #disclaimer>
-      <div class="alert alert-info" v-html="panel.help" />
-    </template>
-
-    <slot name="tab-before" />
-
-    <template v-for="section in panel.sections">
-      <Component
-        v-if="section.visible"
-        :is="section.name ? 'section' : 'div'"
-        :key="section.id"
-        class="panel-section"
-      >
-        <BCardTitle v-if="section.name" title-tag="h3">
-          {{ section.name }}
-          <small v-if="section.help">{{ section.help }}</small>
-        </BCardTitle>
-
-        <template v-for="(field, fname) in section.fields">
-          <!-- FIXME rework the whole component chain to avoid direct mutation of the `forms` props -->
-          <!-- eslint-disable -->
-          <Component
-            v-if="field.visible"
-            :is="field.is"
-            v-bind="field.props"
-            v-model="forms[panel.id][fname]"
-            :validation="validation[fname]"
-            :key="fname"
-            @action.stop="onAction(section.id, fname, section.fields)"
-          />
-          <!-- eslint-enable -->
-        </template>
-      </Component>
-    </template>
-
-    <slot name="tab-after" />
-  </AbstractForm>
-</template>
-
-<style lang="scss" scoped>
-.card-title {
-  margin-bottom: 1em;
-  border-bottom: solid $border-width $gray-500;
-}
-:deep(.panel-section:not(:last-child)) {
-  margin-bottom: 3rem;
-}
-</style>
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
deleted file mode 100644
index 30a4dceeb..000000000
--- a/app/src/components/RoutableTabs.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import type { CustomRoute } from '@/types/commons'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-defineProps<{
-  routes: CustomRoute[]
-}>()
-
-defineSlots<{
-  'tab-top': any
-  'tab-before': any
-  'tab-after': any
-}>()
-</script>
-
-<template>
-  <BCard no-body>
-    <BCardHeader header-tag="nav">
-      <BNav card-header fill pills>
-        <BNavItem
-          v-for="route in routes"
-          :key="route.text"
-          :to="route.to"
-          :active="$route.params.tabId === route.to.params.tabId"
-        >
-          <!-- FIXME added :active="" because `exact-active-class` not working https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/1754 -->
-          <!-- exact-active-class="active" -->
-          <YIcon v-if="route.icon" :iname="route.icon" />
-          {{ route.text }}
-        </BNavItem>
-      </BNav>
-    </BCardHeader>
-
-    <!-- Bind extra props to the child view and forward child events to parent -->
-    <RouterView v-slot="{ Component }">
-      <Component v-bind="$attrs" :is="Component">
-        <template #tab-top>
-          <slot name="tab-top" />
-        </template>
-        <template #tab-before>
-          <slot name="tab-before" />
-        </template>
-        <template #tab-after>
-          <slot name="tab-after" />
-        </template>
-      </Component>
-    </RouterView>
-  </BCard>
-</template>
diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
deleted file mode 100644
index 8ccfffed9..000000000
--- a/app/src/components/globals/AbstractForm.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import type { BaseValidation } from '@vuelidate/core'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    submitText?: string
-    validation?: BaseValidation
-    serverError?: string
-    inline?: boolean
-    noFooter?: boolean
-  }>(),
-  {
-    id: 'ynh-form',
-    submitText: undefined,
-    validation: undefined,
-    serverError: '',
-    inline: false,
-    noFooter: false,
-  },
-)
-
-const emit = defineEmits<{
-  submit: [e: SubmitEvent]
-}>()
-
-const { t } = useI18n()
-
-const errorFeedback = computed(() => {
-  const v = props.validation
-  return (
-    props.serverError ||
-    (v && v.$errors.length ? t('form_errors.invalid_form') : '')
-  )
-})
-
-function onSubmit(e: Event) {
-  const v = props.validation
-  if (v) {
-    v.$touch()
-    if (v.$pending || v.$errors.length) return
-  }
-  emit('submit', e as SubmitEvent)
-}
-</script>
-
-<template>
-  <div>
-    <BCardBody>
-      <slot name="disclaimer" />
-
-      <BForm
-        v-bind="$attrs"
-        :id="id"
-        :inline="inline"
-        novalidate
-        @submit.prevent.stop="onSubmit"
-      >
-        <slot name="default" />
-
-        <slot name="server-error" v-bind="{ errorFeedback }">
-          <BAlert
-            :modelValue="!!errorFeedback"
-            variant="danger"
-            class="my-3"
-            icon="ban"
-          >
-            <div v-html="errorFeedback" />
-          </BAlert>
-        </slot>
-      </BForm>
-    </BCardBody>
-
-    <BCardFooter v-if="!noFooter">
-      <slot name="footer">
-        <BButton type="submit" variant="success" :form="id">
-          {{ submitText || $t('save') }}
-        </BButton>
-      </slot>
-    </BCardFooter>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.card-footer {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-
-  & > *:not(:first-child) {
-    margin-left: 0.5rem;
-  }
-}
-</style>

From a875d6f74e11d1380b8a6db5bf37ebe53233a04e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 25 Jul 2024 17:39:17 +0200
Subject: [PATCH 121/275] fix: update ColorVariant => DEFAULT_STATUS_ICON

---
 app/src/components/globals/YAlert.vue     |  5 +++--
 app/src/helpers/yunohostArguments.ts      | 10 ++++++----
 app/src/views/diagnosis/DiagnosisView.vue |  4 +++-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/src/components/globals/YAlert.vue b/app/src/components/globals/YAlert.vue
index d91a3c99b..113203d54 100644
--- a/app/src/components/globals/YAlert.vue
+++ b/app/src/components/globals/YAlert.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ColorVariant } from 'bootstrap-vue-next'
 import { computed } from 'vue'
 
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
@@ -6,7 +7,7 @@ import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 const props = withDefaults(
   defineProps<{
     alert?: boolean
-    variant?: keyof typeof DEFAULT_STATUS_ICON
+    variant?: ColorVariant
     icon?: string
   }>(),
   {
@@ -30,7 +31,7 @@ const icon = computed(() => {
     :class="{ ['alert alert-' + variant]: !alert }"
     class="yuno-alert d-flex flex-column flex-md-row align-items-center"
   >
-    <YIcon :iname="icon" class="me-md-3 mb-md-0 mb-2 md" />
+    <YIcon v-if="icon" :iname="icon" class="me-md-3 mb-md-0 mb-2 md" />
 
     <div class="w-100">
       <slot name="default" />
diff --git a/app/src/helpers/yunohostArguments.ts b/app/src/helpers/yunohostArguments.ts
index 733f6376e..d35f3c723 100644
--- a/app/src/helpers/yunohostArguments.ts
+++ b/app/src/helpers/yunohostArguments.ts
@@ -12,12 +12,14 @@ import type { AdressModelValue, FileModelValue } from '@/types/form'
 import { isAdressModelValue, isFileModelValue } from '@/types/form'
 
 export const DEFAULT_STATUS_ICON = {
-  [null]: null,
-  danger: 'times',
-  error: 'times',
-  info: 'info',
+  primary: null,
+  secondary: null,
   success: 'check',
+  danger: 'times',
   warning: 'warning',
+  info: 'info',
+  light: null,
+  dark: null,
 }
 
 // FORMAT FROM CORE
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index fc1b693d5..15cfcaf52 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -32,7 +32,6 @@ function onQueriesResponse(_: any, reportsData: any) {
 
     for (const item of report.items) {
       const status = (item.variant = item.status.toLowerCase())
-      item.icon = DEFAULT_STATUS_ICON[status]
       item.issue = false
 
       if (item.ignored) {
@@ -50,6 +49,9 @@ function onQueriesResponse(_: any, reportsData: any) {
           report.errors++
         }
       }
+
+      item.icon =
+        DEFAULT_STATUS_ICON[item.variant as 'success' | 'warning' | 'danger']
     }
 
     report.noIssues = report.warnings + report.errors === 0

From 9fac9f31de93b71df2b50bdc023f566cbc722f2e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 25 Jul 2024 18:04:35 +0200
Subject: [PATCH 122/275] ts: add typing to filters

---
 app/src/helpers/filters/date.ts  | 24 +++++++++++++++---------
 app/src/helpers/filters/human.ts |  9 +++++----
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/app/src/helpers/filters/date.ts b/app/src/helpers/filters/date.ts
index 69907ee5e..32d829c12 100644
--- a/app/src/helpers/filters/date.ts
+++ b/app/src/helpers/filters/date.ts
@@ -1,15 +1,21 @@
-import formatDistanceToNow from 'date-fns/formatDistanceToNow'
-import format from 'date-fns/format'
+import { formatDistanceToNow } from 'date-fns/formatDistanceToNow'
+import { format } from 'date-fns/format'
 
 import { dateFnsLocale as locale } from '@/i18n/helpers'
 
-export function distanceToNow(date, addSuffix = true, isTimestamp = false) {
-  return formatDistanceToNow(new Date(isTimestamp ? date * 1000 : date), {
-    addSuffix,
-    locale,
-  })
+export function distanceToNow(
+  date: string | number,
+  addSuffix = true,
+  isTimestamp = false,
+) {
+  const tsOrDate = isTimestamp && typeof date === 'number' ? date * 1000 : date
+  return formatDistanceToNow(new Date(tsOrDate), { addSuffix, locale })
 }
 
-export function readableDate(date, isTimestamp = false) {
-  return format(new Date(isTimestamp ? date * 1000 : date), 'PPPpp', { locale })
+export function readableDate(
+  date: string | number,
+  isTimestamp = false,
+): string {
+  const tsOrDate = isTimestamp && typeof date === 'number' ? date * 1000 : date
+  return format(new Date(tsOrDate), 'PPPpp', { locale })
 }
diff --git a/app/src/helpers/filters/human.ts b/app/src/helpers/filters/human.ts
index eb95dbc19..913445970 100644
--- a/app/src/helpers/filters/human.ts
+++ b/app/src/helpers/filters/human.ts
@@ -1,11 +1,12 @@
-export function humanSize(bytes) {
+export function humanSize(bytes: string | number) {
+  const b = typeof bytes === 'string' ? parseFloat(bytes) : bytes
   const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
   if (bytes === 0) return 'n/a'
-  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)))
-  return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i]
+  const i = Math.floor(Math.log(b) / Math.log(1024))
+  return (b / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i]
 }
 
-export function humanPermissionName(text) {
+export function humanPermissionName(text: string) {
   return text
     .split('.')[1]
     .replace('_', ' ')

From 6e6ce88379149d1be35374064470422b51728f84 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 25 Jul 2024 18:06:45 +0200
Subject: [PATCH 123/275] refactor: use useForm in ToolFirewall port form

---
 app/src/views/tool/ToolFirewall.vue | 154 +++++++++++++++-------------
 1 file changed, 84 insertions(+), 70 deletions(-)

diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 59b377d3f..cb2e2b348 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { useVuelidate } from '@vuelidate/core'
-import { reactive, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import api from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
+import { useForm } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
-import { between, integer, required } from '@/helpers/validators'
 import { useInitialQueries } from '@/composables/useInitialQueries'
+import { toEntries } from '@/helpers/commons'
+import { between, integer, required } from '@/helpers/validators'
+import type { FieldProps, FormFieldDict } from '@/types/form'
 
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
@@ -15,43 +17,79 @@ const { loading, refetch } = useInitialQueries([['GET', '/firewall?raw']], {
   onQueriesResponse,
 })
 
-const fields = [
-  { key: 'port', label: t('port') },
-  { key: 'ipv4', label: t('ipv4') },
-  { key: 'ipv6', label: t('ipv6') },
-  { key: 'uPnP', label: t('upnp') },
-]
-const form = reactive({
+type Form = {
+  action: 'allow' | 'disallow'
+  port: string | number
+  connection: 'ipv4' | 'ipv6'
+  protocol: 'TCP' | 'UDP' | 'Both'
+}
+const form = ref<Form>({
   action: 'allow',
-  port: undefined,
+  port: '',
   connection: 'ipv4',
   protocol: 'TCP',
 })
-const v$ = useVuelidate(
-  {
-    port: { number: required, integer, between: between(0, 65535) },
-  },
-  form,
-)
-const serverError = ref('')
+const fields = {
+  action: {
+    asInputGroup: true,
+    component: 'SelectItem',
+    label: t('action'),
+    rules: { required },
+    props: {
+      id: 'input-action',
+      choices: [
+        { value: 'allow', text: t('open') },
+        { value: 'disallow', text: t('close') },
+      ],
+    },
+  } satisfies FieldProps<'SelectItem', Form['port']>,
+
+  port: {
+    asInputGroup: true,
+    component: 'InputItem',
+    label: t('port'),
+    rules: { number: required, integer, between: between(0, 65535) },
+    props: { id: 'input-port', placeholder: '0', type: 'number' },
+  } satisfies FieldProps<'InputItem', Form['action']>,
+
+  connection: {
+    asInputGroup: true,
+    component: 'SelectItem',
+    label: t('connection'),
+    rules: { required },
+    props: {
+      id: 'input-connection',
+      choices: [
+        { value: 'ipv4', text: t('ipv4') },
+        { value: 'ipv6', text: t('ipv6') },
+      ],
+    },
+  } satisfies FieldProps<'SelectItem', Form['connection']>,
+
+  protocol: {
+    asInputGroup: true,
+    component: 'SelectItem',
+    label: t('protocol'),
+    rules: { required },
+    props: {
+      id: 'input-protocol',
+      choices: [
+        { value: 'TCP', text: t('tcp') },
+        { value: 'UDP', text: t('udp') },
+        { value: 'Both', text: t('both') },
+      ],
+    },
+  } satisfies FieldProps<'SelectItem', Form['protocol']>,
+} satisfies FormFieldDict<Form>
+
+const { v } = useForm(form, fields)
 
 // Ports tables data
 const protocols = ref()
-
-// Ports form data
-const actionChoices = [
-  { value: 'allow', text: t('open') },
-  { value: 'disallow', text: t('close') },
-]
-const connectionChoices = [
-  { value: 'ipv4', text: t('ipv4') },
-  { value: 'ipv6', text: t('ipv6') },
-]
-const protocolChoices = [
-  { value: 'TCP', text: t('tcp') },
-  { value: 'UDP', text: t('udp') },
-  { value: 'Both', text: t('both') },
-]
+const protocolsFields = toEntries(fields).map(([key, { label }]) => ({
+  key,
+  label,
+}))
 
 // uPnP
 const upnpEnabled = ref()
@@ -164,7 +202,13 @@ function onFormPortToggling() {
       <div v-for="(items, protocol) in protocols" :key="protocol">
         <h5>{{ $t(protocol) }}</h5>
 
-        <BTable :fields="fields" :items="items" small striped responsive>
+        <BTable
+          :fields="protocolsFields"
+          :items="items"
+          small
+          striped
+          responsive
+        >
           <!-- PORT CELL -->
           <template #cell(port)="data">
             {{ data.value }}
@@ -205,45 +249,15 @@ function onFormPortToggling() {
 
     <!-- OPERATIONS -->
     <CardForm
-      :title="$t('operations')"
+      v-model="form"
+      :fields="fields"
       icon="cogs"
-      :validation="v$"
-      :server-error="serverError"
-      @submit.prevent="onFormPortToggling"
       inline
+      :title="$t('operations')"
+      :validations="v"
       form-classes="d-flex flex-column flex-lg-row gap-3 justify-content-between align-items-start"
-    >
-      <BInputGroup :prepend="$t('action')">
-        <BFormSelect v-model="form.action" :options="actionChoices" />
-      </BInputGroup>
-
-      <FormField :validation="v$.form.port" class="mb-0">
-        <BInputGroup :prepend="$t('port')">
-          <InputItem
-            id="input-port"
-            placeholder="0"
-            type="number"
-            v-model="form.port"
-          />
-        </BInputGroup>
-      </FormField>
-
-      <BInputGroup :prepend="$t('connection')">
-        <BFormSelect
-          v-model="form.connection"
-          :options="connectionChoices"
-          id="input-connection"
-        />
-      </BInputGroup>
-
-      <BInputGroup :prepend="$t('protocol')">
-        <BFormSelect
-          v-model="form.protocol"
-          :options="protocolChoices"
-          id="input-protocol"
-        />
-      </BInputGroup>
-    </CardForm>
+      @submit.prevent="onFormPortToggling"
+    />
 
     <!-- UPnP -->
     <YCard

From 49cfe93a67661b91c28bca149211c073268de942 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 29 Jul 2024 13:55:31 +0200
Subject: [PATCH 124/275] chore: rename vuex types overrides to generic
 'overrides'

---
 app/{vuex.d.ts => overrides.d.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename app/{vuex.d.ts => overrides.d.ts} (100%)

diff --git a/app/vuex.d.ts b/app/overrides.d.ts
similarity index 100%
rename from app/vuex.d.ts
rename to app/overrides.d.ts

From 144b276ff63581457338af2b664da2eaa8e0c057 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 29 Jul 2024 14:01:01 +0200
Subject: [PATCH 125/275] ts: add vue-router custom RouteMeta types

---
 app/overrides.d.ts       | 11 +++++++++++
 app/src/router/routes.ts | 12 ++++--------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/overrides.d.ts b/app/overrides.d.ts
index f10bd1206..4287f72eb 100644
--- a/app/overrides.d.ts
+++ b/app/overrides.d.ts
@@ -1,6 +1,17 @@
+import 'vue-router'
+
 declare module 'vuex' {
   export * from 'vuex/types/index.d.ts'
   export * from 'vuex/types/helpers.d.ts'
   export * from 'vuex/types/logger.d.ts'
   export * from 'vuex/types/vue.d.ts'
 }
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    noAuth?: boolean
+    routerParams?: string[]
+    args: { trad?: string; param?: string }
+    breadcrumb?: string[]
+  }
+}
diff --git a/app/src/router/routes.ts b/app/src/router/routes.ts
index 8422ca4ab..a65487b52 100644
--- a/app/src/router/routes.ts
+++ b/app/src/router/routes.ts
@@ -1,18 +1,14 @@
-/**
- * routes module.
- * @module router/routes
- */
-
 // Simple views are normally imported and will be included into the main webpack entry.
-// Others will be chunked by webpack so they can be lazy loaded.
-// Webpack chunk syntax is:
+// Others will be chunked so they can be lazy loaded:
 // `() => import('@/views/:ViewComponent.vue')`
 
+import type { RouteRecordRaw } from 'vue-router'
+
 import HomeView from '@/views/HomeView.vue'
 import LoginView from '@/views/LoginView.vue'
 import ToolList from '@/views/tool/ToolList.vue'
 
-const routes = [
+const routes: RouteRecordRaw[] = [
   {
     name: 'home',
     path: '/',

From f3c1931ad0e9fa49d5a9bd50072685d8a3d8e0a9 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 29 Jul 2024 14:35:22 +0200
Subject: [PATCH 126/275] refactor: update locales handling

---
 app/src/api/api.ts                   |  9 ++--
 app/src/composables/useSettings.ts   | 75 ++++++++++++++++++++++++++++
 app/src/helpers/yunohostArguments.ts |  9 ++--
 app/src/i18n/helpers.ts              | 36 ++-----------
 app/src/main.ts                      |  9 ++--
 5 files changed, 92 insertions(+), 46 deletions(-)
 create mode 100644 app/src/composables/useSettings.ts

diff --git a/app/src/api/api.ts b/app/src/api/api.ts
index afba3d988..5fd50f09c 100644
--- a/app/src/api/api.ts
+++ b/app/src/api/api.ts
@@ -3,9 +3,10 @@
  * @module api
  */
 
+import { useSettings } from '@/composables/useSettings'
 import store from '@/store'
-import { openWebSocket, getResponseData, getError } from './handlers'
 import type { Obj } from '@/types/commons'
+import { getError, getResponseData, openWebSocket } from './handlers'
 
 export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'DELETE'
 
@@ -90,7 +91,8 @@ export function objectToParams(
     }
   }
   if (addLocale) {
-    urlParams.append('locale', store.getters.locale)
+    const { locale } = useSettings()
+    urlParams.append('locale', locale.value)
   }
   return urlParams
 }
@@ -132,6 +134,7 @@ export default {
       asFormData = true,
     }: APIQueryOptions = {},
   ): Promise<Obj | string> {
+    const { locale } = useSettings()
     // `await` because Vuex actions returns promises by default.
     const request: APIRequest | APIRequestAction = await store.dispatch(
       'INIT_REQUEST',
@@ -151,7 +154,7 @@ export default {
 
     let options = this.options
     if (method === 'GET') {
-      uri += `${uri.includes('?') ? '&' : '?'}locale=${store.getters.locale}`
+      uri += `${uri.includes('?') ? '&' : '?'}locale=${locale.value}`
     } else {
       options = {
         ...options,
diff --git a/app/src/composables/useSettings.ts b/app/src/composables/useSettings.ts
new file mode 100644
index 000000000..93798919b
--- /dev/null
+++ b/app/src/composables/useSettings.ts
@@ -0,0 +1,75 @@
+import {
+  createGlobalState,
+  useLocalStorage,
+  watchImmediate,
+} from '@vueuse/core'
+import { ref } from 'vue'
+
+import {
+  getDefaultLocales,
+  setI18nFallbackLocale,
+  setI18nLocale,
+} from '@/i18n/helpers'
+import type { SupportedLocales } from '@/i18n/supportedLocales'
+import supportedLocales from '@/i18n/supportedLocales'
+import type { RouteFromTo } from '@/types/commons'
+
+export const useSettings = createGlobalState(() => {
+  const navigatorLocales = getDefaultLocales()
+  const localesLoaded = ref(false)
+
+  const locale = useLocalStorage<SupportedLocales>(
+    'locale',
+    navigatorLocales[0],
+  )
+  const fallbackLocale = useLocalStorage<SupportedLocales>(
+    'fallbackLocale',
+    navigatorLocales[1],
+  )
+  const cache = useLocalStorage('cache', true)
+  const transitions = useLocalStorage('transitions', true)
+  const dark = useLocalStorage('dark', false)
+  const experimental = useLocalStorage('experimental', false)
+  const spinner = ref('pacman')
+  const transitionName = ref<'slide-right' | 'slide-left' | undefined>()
+
+  watchImmediate([locale, fallbackLocale], async (next, prev) => {
+    if (next[0] !== prev[0]) await setI18nLocale(next[0])
+    if (next[1] !== prev[1]) await setI18nFallbackLocale(next[1])
+    localesLoaded.value = true
+  })
+  watchImmediate(dark, (dark) => {
+    document.documentElement.setAttribute(
+      'data-bs-theme',
+      dark ? 'dark' : 'light',
+    )
+  })
+
+  function updateTransitionName({ to, from }: RouteFromTo) {
+    // Use the breadcrumb array length as a direction indicator
+    const toDepth = (to.meta.breadcrumb || []).length
+    const fromDepth = (from.meta.breadcrumb || []).length
+    transitionName.value = toDepth < fromDepth ? 'slide-right' : 'slide-left'
+  }
+
+  return {
+    localesLoaded,
+
+    locale,
+    fallbackLocale,
+    cache,
+    transitions,
+    dark,
+    experimental,
+    spinner,
+    transitionName,
+
+    availableLocales: Object.entries(supportedLocales).map(
+      ([locale, { name }]) => {
+        return { value: locale, text: name }
+      },
+    ),
+
+    updateTransitionName,
+  }
+})
diff --git a/app/src/helpers/yunohostArguments.ts b/app/src/helpers/yunohostArguments.ts
index d35f3c723..0dad0202f 100644
--- a/app/src/helpers/yunohostArguments.ts
+++ b/app/src/helpers/yunohostArguments.ts
@@ -6,10 +6,10 @@ import {
   isObjectLiteral,
   toEntries,
 } from '@/helpers/commons'
-import store from '@/store'
 import type { ArrInnerType, Obj, Translation } from '@/types/commons'
 import type { AdressModelValue, FileModelValue } from '@/types/form'
 import { isAdressModelValue, isFileModelValue } from '@/types/form'
+import { useSettings } from '@/composables/useSettings'
 
 export const DEFAULT_STATUS_ICON = {
   primary: null,
@@ -34,11 +34,8 @@ export const DEFAULT_STATUS_ICON = {
 export function formatI18nField(field?: Translation): string {
   if (!field) return ''
   if (typeof field === 'string') return field
-  const { locale, fallbackLocale } = store.state as {
-    locale: string
-    fallbackLocale: string
-  }
-  return field[locale] || field[fallbackLocale] || field.en || ''
+  const { locale, fallbackLocale } = useSettings()
+  return field[locale.value] || field[fallbackLocale.value] || field.en || ''
 }
 
 /**
diff --git a/app/src/i18n/helpers.ts b/app/src/i18n/helpers.ts
index f23730c4f..da6331783 100644
--- a/app/src/i18n/helpers.ts
+++ b/app/src/i18n/helpers.ts
@@ -1,5 +1,4 @@
 import i18n from '@/i18n'
-import store from '@/store'
 import { nextTick } from 'vue'
 
 import supportedLocales, {
@@ -13,11 +12,7 @@ export let dateFnsLocale: any
  * Returns the first two supported locales that can be found in the `localStorage` or
  * in the user browser settings.
  */
-function getDefaultLocales() {
-  const locale: SupportedLocales | null = store.getters.locale
-  const fallbackLocale: SupportedLocales | null = store.getters.fallbackLocale
-  if (locale && fallbackLocale) return [locale, fallbackLocale]
-
+export function getDefaultLocales() {
   const navigatorLocales = navigator.languages || [navigator.language]
   const defaultLocales: SupportedLocales[] = []
 
@@ -48,13 +43,7 @@ export async function setI18nLocale(locale: SupportedLocales) {
     loadLocaleMessages('en')
   }
 
-  if (i18n.mode === 'legacy') {
-    // @ts-ignore
-    i18n.global.locale = locale
-  } else {
-    i18n.global.locale.value = locale
-  }
-
+  i18n.global.locale.value = locale
   document.querySelector('html')!.setAttribute('lang', locale)
   // FIXME can't currently change document direction easily since bootstrap still doesn't handle rtl.
   // document.dir = locale === 'ar' ? 'rtl' : 'ltr'
@@ -64,19 +53,13 @@ export async function setI18nFallbackLocale(locale: SupportedLocales) {
   if (!i18n.global.availableLocales.includes(locale)) {
     await loadLocaleMessages(locale)
   }
-
-  if (i18n.mode === 'legacy') {
-    // @ts-ignore
-    i18n.global.fallbackLocale = [locale, 'en']
-  } else {
-    i18n.global.fallbackLocale.value = [locale, 'en']
-  }
+  i18n.global.fallbackLocale.value = [locale, 'en']
 }
 
 /**
  * Loads a translation file and adds its content to the i18n plugin `messages`.
  *
- * @return {Promise<string>} Promise that resolve the given locale string
+ * @return Promise that resolve the given locale string
  */
 export async function loadLocaleMessages(locale: SupportedLocales) {
   // load locale messages with dynamic import
@@ -97,14 +80,3 @@ async function loadDateFnsLocale(locale: SupportedLocales) {
     await import(`../../node_modules/date-fns/locale/${dateFnsLocaleName}.mjs`)
   ).default
 }
-
-/**
- * Initialize all locales
- */
-export async function initDefaultLocales() {
-  // Get defined locales from `localStorage` or `navigator`
-  const [locale, fallbackLocale] = getDefaultLocales()
-
-  await store.dispatch('UPDATE_LOCALE', locale)
-  await store.dispatch('UPDATE_FALLBACKLOCALE', fallbackLocale || 'en')
-}
diff --git a/app/src/main.ts b/app/src/main.ts
index 6f3569599..42ea1428e 100644
--- a/app/src/main.ts
+++ b/app/src/main.ts
@@ -2,13 +2,14 @@ import { createApp, type Component } from 'vue'
 import App from './App.vue'
 import { createBootstrap } from 'bootstrap-vue-next'
 import { VueShowdownPlugin } from 'vue-showdown'
+import { watchOnce } from '@vueuse/core'
 
+import { useSettings } from './composables/useSettings'
 import store from './store'
 import router from './router'
 import i18n from './i18n'
 
 import { registerGlobalErrorHandlers } from './api'
-import { initDefaultLocales } from './i18n/helpers'
 
 import '@/scss/main.scss'
 
@@ -47,7 +48,5 @@ Object.values(globalComponentsModules).forEach(
 
 registerGlobalErrorHandlers()
 
-// Load default locales translations files and setup store data
-initDefaultLocales().then(() => {
-  app.mount('#app')
-})
+// Load default locales translations files then mount the app
+watchOnce(useSettings().localesLoaded, () => app.mount('#app'))

From 2edfe943cc7822302501d3121c6b355be951dfb1 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 29 Jul 2024 14:47:39 +0200
Subject: [PATCH 127/275] refactor: reflect other settings changes

---
 app/src/App.vue                             | 25 ++++++---------------
 app/src/router/index.ts                     | 10 ++++++---
 app/src/views/_partials/ViewLockOverlay.vue |  4 +++-
 app/src/views/diagnosis/DiagnosisView.vue   |  2 --
 app/src/views/update/SystemUpdate.vue       |  2 --
 5 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index 32ac2b4d1..aaa572b7a 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -4,18 +4,12 @@ import { useStore } from 'vuex'
 
 import { useStoreGetters } from '@/store/utils'
 import { HistoryConsole, ViewLockOverlay } from '@/views/_partials'
+import { useSettings } from '@/composables/useSettings'
 
 const store = useStore()
-const {
-  connected,
-  yunohost,
-  routerKey,
-  transitions,
-  transitionName,
-  waiting,
-  dark,
-  ssoLink,
-} = useStoreGetters()
+
+const { connected, yunohost, routerKey, waiting, ssoLink } = useStoreGetters()
+const { spinner, dark, transitions, transitionName } = useSettings()
 
 async function logout() {
   store.dispatch('LOGOUT')
@@ -56,7 +50,7 @@ onMounted(() => {
   document.addEventListener('keydown', ({ key }) => {
     if (key === konamiCode[konamistep++]) {
       if (konamistep === konamiCode.length) {
-        store.commit('SET_SPINNER', 'nyancat')
+        spinner.value = 'nyancat'
         konamistep = 0
       }
     } else {
@@ -67,18 +61,13 @@ onMounted(() => {
   // April fools easter egg ;)
   const today = new Date()
   if (today.getDate() === 1 && today.getMonth() + 1 === 4) {
-    store.commit('SET_SPINNER', 'magikarp')
+    spinner.value = 'magikarp'
   }
 
   // Halloween easter egg ;)
   if (today.getDate() === 31 && today.getMonth() + 1 === 10) {
-    store.commit('SET_SPINNER', 'spookycat')
+    spinner.value = 'spookycat'
   }
-  // updates the data-bs-theme attribute
-  document.documentElement.setAttribute(
-    'data-bs-theme',
-    dark.value ? 'dark' : 'light',
-  )
 })
 </script>
 
diff --git a/app/src/router/index.ts b/app/src/router/index.ts
index 8af04f874..a824634b0 100644
--- a/app/src/router/index.ts
+++ b/app/src/router/index.ts
@@ -1,4 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
+
+import { useSettings } from '@/composables/useSettings'
 import routes from './routes'
 import store from '@/store'
 
@@ -13,7 +15,8 @@ const router = createRouter({
     // if animations are enabled, we need to delay a bit the returned value of the saved
     // scroll state because the component probably hasn't updated the window height yet.
     // Note: this will only work with routes that use stored data or that has static content
-    if (store.getters.transitions && savedPosition) {
+    const { transitions } = useSettings()
+    if (transitions.value && savedPosition) {
       return new Promise((resolve) => {
         setTimeout(() => resolve(savedPosition), 0)
       })
@@ -24,8 +27,9 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  if (store.getters.transitions && from.name !== null) {
-    store.dispatch('UPDATE_TRANSITION_NAME', { to, from })
+  const { transitions, updateTransitionName } = useSettings()
+  if (transitions.value && from.name !== null) {
+    updateTransitionName({ to, from })
   }
 
   if (store.getters.error) {
diff --git a/app/src/views/_partials/ViewLockOverlay.vue b/app/src/views/_partials/ViewLockOverlay.vue
index 76e0f883c..8c3fbb4fc 100644
--- a/app/src/views/_partials/ViewLockOverlay.vue
+++ b/app/src/views/_partials/ViewLockOverlay.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 
 import QueryHeader from '@/components/QueryHeader.vue'
 import { useStoreGetters } from '@/store/utils'
+import { useSettings } from '@/composables/useSettings'
 import {
   ErrorDisplay,
   ReconnectingDisplay,
@@ -10,7 +11,8 @@ import {
   WarningDisplay,
 } from '@/views/_partials'
 
-const { waiting, reconnecting, error, currentRequest, dark } = useStoreGetters()
+const { dark } = useSettings()
+const { waiting, reconnecting, error, currentRequest } = useStoreGetters()
 const component = computed(() => {
   const request = currentRequest.value
   // FIXME should we pass refs or unwrap refs as props?
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 15cfcaf52..be8343439 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -5,7 +5,6 @@ import api from '@/api'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import { distanceToNow } from '@/helpers/filters/date'
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
-import { useStoreGetters } from '@/store/utils'
 
 const { loading, refetch } = useInitialQueries(
   [
@@ -14,7 +13,6 @@ const { loading, refetch } = useInitialQueries(
   ],
   { wait: true, onQueriesResponse },
 )
-const { dark } = useStoreGetters()
 
 const reports = ref()
 
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index df77b690d..bee3501ad 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -7,7 +7,6 @@ import api from '@/api'
 import CardCollapse from '@/components/CardCollapse.vue'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { useInitialQueries } from '@/composables/useInitialQueries'
-import { useStoreGetters } from '@/store/utils'
 
 const { t } = useI18n()
 const store = useStore()
@@ -17,7 +16,6 @@ const { loading } = useInitialQueries([['PUT', 'update/all', {}, 'update']], {
   onQueriesResponse,
 })
 
-const { dark } = useStoreGetters()
 const system = ref()
 const apps = ref()
 const importantYunohostUpgrade = ref()

From c34e05d5ebadaacb173f02af5afceed342b5777d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 29 Jul 2024 14:49:36 +0200
Subject: [PATCH 128/275] refactor: rework ToolWebadmin form view

---
 app/src/views/tool/ToolWebadmin.vue | 84 ++++++++++++++---------------
 1 file changed, 41 insertions(+), 43 deletions(-)

diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index 9223cee40..055c251cc 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/app/src/views/tool/ToolWebadmin.vue
@@ -1,82 +1,80 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { asUnreffed } from '@/helpers/commons'
-import { useMapStoreGetSet, useStoreGetters } from '@/store/utils'
+import { useSettings } from '@/composables/useSettings'
+import { getKeys, pick } from '@/helpers/commons'
 import type { FormField } from '@/types/form'
 
 const { t } = useI18n()
-const { availableLocales } = useStoreGetters()
+// Computed `t` to get on the fly lang change in this view
+const ct = (key: string) => computed(() => t(key))
 
-const form = ref({
-  ...useMapStoreGetSet<Fields>({
-    commit: ['cache', 'transitions', 'experimental'],
-    dispatch: ['locale', 'fallbackLocale', 'dark'],
-  }),
-})
+const settings = useSettings()
 
-type Fields = {
-  locale: FormField<'SelectItem', string>
-  fallbackLocale: FormField<'SelectItem', string>
-  cache: FormField<'CheckboxItem', boolean>
-  transitions: FormField<'CheckboxItem', boolean>
-  dark: FormField<'CheckboxItem', boolean>
-  experimental: FormField<'CheckboxItem', boolean>
-}
-const fields: Fields = {
-  locale: {
+const fields = {
+  locale: reactive({
     component: 'SelectItem',
-    label: t('tools_webadmin.language'),
-    props: { id: 'locale', choices: asUnreffed(availableLocales) },
-  },
+    label: ct('tools_webadmin.language'),
+    props: { id: 'locale', choices: settings.availableLocales },
+  }) as FormField<'SelectItem', string>,
 
-  fallbackLocale: {
+  fallbackLocale: reactive({
     component: 'SelectItem',
-    label: t('tools_webadmin.fallback_language'),
-    description: t('tools_webadmin.fallback_language_description'),
-    props: { id: 'fallback-locale', choices: asUnreffed(availableLocales) },
-  },
+    label: ct('tools_webadmin.fallback_language'),
+    description: ct('tools_webadmin.fallback_language_description'),
+    props: {
+      id: 'fallback-locale',
+      choices: settings.availableLocales,
+    },
+  }) as FormField<'SelectItem', string>,
 
-  cache: {
+  cache: reactive({
     component: 'CheckboxItem',
     id: 'cache',
-    label: t('tools_webadmin.cache'),
-    description: t('tools_webadmin.cache_description'),
+    label: ct('tools_webadmin.cache'),
+    description: ct('tools_webadmin.cache_description'),
     props: { labels: { true: 'enabled', false: 'disabled' } },
-  },
+  }) as FormField<'CheckboxItem', boolean>,
 
-  transitions: {
+  transitions: reactive({
     component: 'CheckboxItem',
     id: 'transitions',
-    label: t('tools_webadmin.transitions'),
+    label: ct('tools_webadmin.transitions'),
     props: { labels: { true: 'enabled', false: 'disabled' } },
-  },
+  }) as FormField<'CheckboxItem', boolean>,
 
-  dark: {
+  dark: reactive({
     component: 'CheckboxItem',
     id: 'theme',
-    label: t('tools_webadmin.theme'),
+    label: ct('tools_webadmin.theme'),
     props: { labels: { true: '🌙', false: '☀️' } },
-  },
+  }) as FormField<'CheckboxItem', boolean>,
 
-  experimental: {
+  experimental: reactive({
     component: 'CheckboxItem',
     id: 'experimental',
-    label: t('tools_webadmin.experimental'),
-    description: t('tools_webadmin.experimental_description'),
+    label: ct('tools_webadmin.experimental'),
+    description: ct('tools_webadmin.experimental_description'),
     // Available in dev mode only
     visible: import.meta.env.DEV,
     props: { labels: { true: 'enabled', false: 'disabled' } },
-  },
+  }) as FormField<'CheckboxItem', boolean>,
 }
+const form = ref(pick(settings, getKeys(fields)))
+
+watch(form, (form) => {
+  getKeys(form).forEach((k) => {
+    settings[k].value = form[k]
+  })
+})
 </script>
 
 <template>
   <CardForm
     v-model="form"
     :fields="fields"
-    :title="$t('tools_webadmin_settings')"
+    :title="t('tools_webadmin_settings')"
     icon="cog"
     no-footer
     hr

From cb344f28fc974946241cbb27de6e91ee3091f62b Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 15:36:53 +0200
Subject: [PATCH 129/275] refactor: merge all api calls args in one object

---
 app/src/api/api.ts                        | 201 +++++++++-------------
 app/src/composables/useInitialQueries.ts  |   6 +-
 app/src/views/PostInstall.vue             |   6 +-
 app/src/views/app/AppCatalog.vue          |   2 +-
 app/src/views/app/AppInfo.vue             |  63 +++----
 app/src/views/app/AppInstall.vue          |  10 +-
 app/src/views/app/AppList.vue             |   2 +-
 app/src/views/backup/BackupCreate.vue     |   7 +-
 app/src/views/backup/BackupInfo.vue       |  18 +-
 app/src/views/backup/BackupList.vue       |   2 +-
 app/src/views/diagnosis/DiagnosisView.vue |  30 ++--
 app/src/views/domain/DomainAdd.vue        |  12 +-
 app/src/views/domain/DomainDns.vue        |  16 +-
 app/src/views/domain/DomainInfo.vue       |  43 +++--
 app/src/views/domain/DomainList.vue       |   2 +-
 app/src/views/group/GroupCreate.vue       |   8 +-
 app/src/views/group/GroupList.vue         |  60 +++----
 app/src/views/service/ServiceInfo.vue     |  13 +-
 app/src/views/service/ServiceList.vue     |   2 +-
 app/src/views/tool/ToolFirewall.vue       |  22 ++-
 app/src/views/tool/ToolLog.vue            |  13 +-
 app/src/views/tool/ToolLogs.vue           |   2 +-
 app/src/views/tool/ToolMigrations.vue     |  13 +-
 app/src/views/tool/ToolPower.vue          |   2 +-
 app/src/views/tool/ToolSettings.vue       |  12 +-
 app/src/views/update/SystemUpdate.vue     |  15 +-
 app/src/views/user/UserCreate.vue         |  12 +-
 app/src/views/user/UserEdit.vue           |  19 +-
 app/src/views/user/UserImport.vue         |   2 +-
 app/src/views/user/UserInfo.vue           |  16 +-
 app/src/views/user/UserList.vue           |  11 +-
 31 files changed, 316 insertions(+), 326 deletions(-)

diff --git a/app/src/api/api.ts b/app/src/api/api.ts
index 5fd50f09c..ba6806fcc 100644
--- a/app/src/api/api.ts
+++ b/app/src/api/api.ts
@@ -6,39 +6,29 @@
 import { useSettings } from '@/composables/useSettings'
 import store from '@/store'
 import type { Obj } from '@/types/commons'
+import { APIUnauthorizedError, type APIError } from './errors'
 import { getError, getResponseData, openWebSocket } from './handlers'
 
 export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'DELETE'
 
-type StoreUri = {
-  uri: string
-  storeKey?: string
-  param?: string
-}
-type HumanKey = {
+export type HumanKey = {
   key: string
   [propName: string]: any
 }
 
-type APIQueryOptions = {
-  // Display the waiting modal
-  wait?: boolean
-  // Open a websocket connection
+export type APIQuery = {
+  method?: RequestMethod
+  uri: string
+  cachePath?: string
+  cacheParams?: Obj
+  data?: Obj
+  humanKey?: string | HumanKey
+  showModal?: boolean
   websocket?: boolean
-  // If an error occurs, the dismiss button will trigger a go back in history
   initial?: boolean
-  // Send the data with a body encoded as `"multipart/form-data"` instead of `"x-www-form-urlencoded"`)
   asFormData?: boolean
 }
 
-export type APIQuery = [
-  method: RequestMethod,
-  uri: string | StoreUri,
-  data?: Obj | null,
-  humanKey?: string | HumanKey | null,
-  options?: APIQueryOptions,
-]
-
 export type APIErrorData = {
   error: string
   error_key?: string
@@ -54,7 +44,7 @@ export type APIRequest = {
   uri: string
   humanRouteKey: HumanKey['key']
   humanRoute: string
-  initial: APIQueryOptions['initial']
+  initial: boolean
   status: RequestStatus
 }
 
@@ -114,39 +104,42 @@ export default {
   /**
    * Generic method to fetch the api.
    *
-   * @param method - a method in `'GET' | 'POST' | 'PUT' | 'DELETE'`
    * @param uri - URI to fetch
+   * @param cachePath - Cache path to get or store data
+   * @param cacheParams - Cache params to get or update data
+   * @param method - An HTTP method in `'GET' | 'POST' | 'PUT' | 'DELETE'`
    * @param data - Data to send as body
-   * @param options - {@link APIQueryOptions}
-
+   * @param humanKey - Key and eventually some data to build the query's description
+   * @param showModal - Lock view and display the waiting modal
+   * @param websocket - Open a websocket connection to receive server messages
+   * @param initial - If an error occurs, the dismiss button will trigger a go back in history
+   * @param asFormData - Send the data with a body encoded as `"multipart/form-data"` instead of `"x-www-form-urlencoded"`)
+   *
    * @returns Promise that resolve the api response data
    * @throws Throw an `APIError` or subclass depending on server response
    */
-  async fetch(
-    method: RequestMethod,
-    uri: string,
-    data: Obj | null | undefined = {},
-    humanKey: string | HumanKey | null = null,
-    {
-      wait = true,
-      websocket = true,
-      initial = false,
-      asFormData = true,
-    }: APIQueryOptions = {},
-  ): Promise<Obj | string> {
+  async fetch<T extends any = Obj | string>({
+    uri,
+    method = 'GET',
+    cachePath = undefined,
+    cacheParams = undefined,
+    data = undefined,
+    humanKey = undefined,
+    showModal = method !== 'GET',
+    websocket = method !== 'GET',
+    initial = false,
+    asFormData = true,
+  }: APIQuery): Promise<T> {
     const { locale } = useSettings()
     // `await` because Vuex actions returns promises by default.
-    const request: APIRequest | APIRequestAction = await store.dispatch(
-      'INIT_REQUEST',
-      {
-        method,
-        uri,
-        humanKey,
-        initial,
-        wait,
-        websocket,
-      },
-    )
+    const request: APIRequest = await store.dispatch('INIT_REQUEST', {
+      method,
+      uri,
+      humanKey,
+      initial,
+      wait: showModal,
+      websocket,
+    })
 
     if (websocket) {
       await openWebSocket(request as APIRequestAction)
@@ -173,7 +166,7 @@ export default {
       throw getError(request, response, responseData as string | APIErrorData)
     }
 
-    return responseData
+    return responseData as T
   },
 
   /**
@@ -182,30 +175,21 @@ export default {
    * Calls are synchronous since the API can't handle multiple calls.
    *
    * @param queries - Array of {@link APIQuery}
-   * @param wait - Show the waiting modal until every queries have been resolved
+   * @param showModal - Show the waiting modal until every queries have been resolved
    * @param initial - Inform that thoses queries are required for a view to be displayed
+   *
    * @returns Promise that resolves an array of server responses
    * @throws Throw an `APIError` or subclass depending on server response
    */
-  async fetchAll(queries: APIQuery[], { wait = false, initial = false } = {}) {
+  async fetchAll(
+    queries: APIQuery[],
+    { showModal = false, initial = false } = {},
+  ) {
     const results: Array<Obj | string> = []
-    if (wait) store.commit('SET_WAITING', true)
-    try {
-      for (const [method, uri, data, humanKey, options = {}] of queries) {
-        if (wait) options.wait = false
-        if (initial) options.initial = true
-        results.push(
-          await this[method.toLowerCase() as 'get' | 'post' | 'put' | 'delete'](
-            uri,
-            data,
-            humanKey,
-            options,
-          ),
-        )
-      }
-    } finally {
-      // Stop waiting even if there is an error.
-      if (wait) store.commit('SET_WAITING', false)
+    for (const query of queries) {
+      if (showModal) query.showModal = true
+      if (initial) query.initial = true
+      results.push(await this.fetch(query))
     }
 
     return results
@@ -214,86 +198,57 @@ export default {
   /**
    * Api get helper function.
    *
-   * @param uri - uri to fetch
-   * @param data - for convenience in muliple calls, just pass null
-   * @param humanKey - key and eventually some data to build the query's description
-   * @param options - {@link APIQueryOptions}
+   * @param query - a simple string for uri or complete APIQuery object {@link APIQuery}
+   *
    * @returns Promise that resolve the api response data or an error
    * @throws Throw an `APIError` or subclass depending on server response
    */
-  get(
-    uri: string | StoreUri,
-    data: Obj | null = null,
-    humanKey: string | HumanKey | null = null,
-    options: APIQueryOptions = {},
-  ): Promise<Obj | string> {
-    options = { websocket: false, wait: false, ...options }
-    if (typeof uri === 'string')
-      return this.fetch('GET', uri, data, humanKey, options)
-    return store.dispatch('GET', { ...uri, humanKey, options })
+  get<T extends any = Obj | string>(
+    query: string | Omit<APIQuery, 'method' | 'data'>,
+  ): Promise<T> {
+    return this.fetch(typeof query === 'string' ? { uri: query } : query)
   },
 
   /**
    * Api post helper function.
    *
-   * @param uri - uri to fetch
-   * @param data - data to send as body
-   * @param humanKey - key and eventually some data to build the query's description
-   * @param options - {@link APIQueryOptions}
+   * @param query - {@link APIQuery}
+   *
    * @returns Promise that resolve the api response data or an error
    * @throws Throw an `APIError` or subclass depending on server response
    */
-  post(
-    uri: string | StoreUri,
-    data: Obj | null | undefined = {},
-    humanKey: string | HumanKey | null = null,
-    options: APIQueryOptions = {},
-  ): Promise<Obj | string> {
-    if (typeof uri === 'string')
-      return this.fetch('POST', uri, data, humanKey, options)
-    return store.dispatch('POST', { ...uri, data, humanKey, options })
+  post<T extends any = Obj | string>(
+    query: Omit<APIQuery, 'method'>,
+  ): Promise<T> {
+    return this.fetch({ ...query, method: 'POST' })
   },
 
   /**
    * Api put helper function.
    *
-   * @param uri - uri to fetch
-   * @param data - data to send as body
-   * @param humanKey - key and eventually some data to build the query's description
-   * @param options - {@link APIQueryOptions}
+   * @param query - {@link APIQuery}
+   *
    * @returns Promise that resolve the api response data or an error
    * @throws Throw an `APIError` or subclass depending on server response
    */
-  put(
-    uri: string | StoreUri,
-    data: Obj | null | undefined = {},
-    humanKey: string | HumanKey | null = null,
-    options: APIQueryOptions = {},
-  ): Promise<Obj | string> {
-    if (typeof uri === 'string')
-      return this.fetch('PUT', uri, data, humanKey, options)
-    return store.dispatch('PUT', { ...uri, data, humanKey, options })
+  put<T extends any = Obj | string>(
+    query: Omit<APIQuery, 'method'>,
+  ): Promise<T> {
+    return this.fetch({ ...query, method: 'PUT' })
   },
 
   /**
    * Api delete helper function.
    *
-   * @param uri - uri to fetch
-   * @param data - data to send as body
-   * @param humanKey - key and eventually some data to build the query's description
-   * @param options - {@link APIQueryOptions}
+   * @param query - {@link APIQuery}
+   *
    * @returns Promise that resolve the api response data or an error
    * @throws Throw an `APIError` or subclass depending on server response
    */
-  delete(
-    uri: string | StoreUri,
-    data: Obj | null | undefined = {},
-    humanKey: string | HumanKey | null = null,
-    options: APIQueryOptions = {},
-  ): Promise<Obj | string> {
-    if (typeof uri === 'string')
-      return this.fetch('DELETE', uri, data, humanKey, options)
-    return store.dispatch('DELETE', { ...uri, data, humanKey, options })
+  delete<T extends any = Obj | string>(
+    query: Omit<APIQuery, 'method'>,
+  ): Promise<T> {
+    return this.fetch({ ...query, method: 'DELETE' })
   },
 
   /**
@@ -302,6 +257,7 @@ export default {
    * @param attemps - Number of attemps before rejecting
    * @param delay - Delay between calls to the API in ms
    * @param initialDelay - Delay before calling the API for the first time in ms
+   *
    * @returns Promise that resolve yunohost version infos
    * @throws Throw an `APIError` or subclass depending on server response
    */
@@ -311,8 +267,8 @@ export default {
         store
           .dispatch('GET_YUNOHOST_INFOS')
           .then(resolve)
-          .catch((err) => {
-            if (err.name === 'APIUnauthorizedError') {
+          .catch((err: APIError) => {
+            if (err instanceof APIUnauthorizedError) {
               reject(err)
             } else if (n < 1) {
               reject(err)
@@ -321,7 +277,6 @@ export default {
             }
           })
       }
-
       if (initialDelay > 0) setTimeout(() => reconnect(attemps), initialDelay)
       else reconnect(attemps)
     })
diff --git a/app/src/composables/useInitialQueries.ts b/app/src/composables/useInitialQueries.ts
index b116a1bbd..d3c21067e 100644
--- a/app/src/composables/useInitialQueries.ts
+++ b/app/src/composables/useInitialQueries.ts
@@ -11,10 +11,10 @@ export function useInitialQueries<
   queries: MaybeRefOrGetter<APIQuery[]> | ComputedRef<APIQuery[]>,
   {
     onQueriesResponse,
-    wait = false,
+    showModal = false,
   }: {
     onQueriesResponse?: (...responses: ResponsesType) => Promise<void> | void
-    wait?: boolean
+    showModal?: boolean
   } = {},
 ) {
   const loading = ref(true)
@@ -24,7 +24,7 @@ export function useInitialQueries<
   function call(triggerLoading = true) {
     if (triggerLoading) loading.value = true
     return api
-      .fetchAll(toValue(queries), { wait, initial: true })
+      .fetchAll(toValue(queries), { showModal, initial: true })
       .then(async (responses_) => {
         responses.value = responses_ as ResponsesType
         if (onQueriesResponse) {
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 203723afa..391ed66c5 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -114,8 +114,10 @@ async function performPostInstall(force = false) {
 
   // FIXME does the api will throw an error for bad passwords ?
   api
-    .post('postinstall' + (force ? '?force_diskspace' : ''), data, {
-      key: 'postinstall',
+    .post({
+      uri: 'postinstall' + (force ? '?force_diskspace' : ''),
+      data,
+      humanKey: { key: 'postinstall' },
     })
     .then(() => {
       // Display success message and allow the user to login
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 3f709f1c3..e8b48fe66 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -33,7 +33,7 @@ const router = useRouter()
 const route = useRoute()
 const modalConfirm = useAutoModal()
 const { loading } = useInitialQueries(
-  [['GET', 'apps/catalog?full&with_categories&with_antifeatures']],
+  [{ uri: 'apps/catalog?full&with_categories&with_antifeatures' }],
   { onQueriesResponse },
 )
 
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index a71ede7b7..92e9ba85e 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -54,9 +54,9 @@ const externalResults = reactive({})
 const v$ = useVuelidate(rules, form, { $externalResults: externalResults })
 const { loading, refetch } = useInitialQueries(
   [
-    ['GET', `apps/${props.id}?full`],
-    ['GET', { uri: 'users/permissions?full', storeKey: 'permissions' }],
-    ['GET', { uri: 'domains' }],
+    { uri: `apps/${props.id}?full` },
+    { uri: 'users/permissions?full', cachePath: 'permissions' },
+    { uri: 'domains', cachePath: 'domains' },
   ],
   { onQueriesResponse },
 )
@@ -228,17 +228,17 @@ async function onQueriesResponse(app_: any) {
 
 const onPanelApply: OnPanelApply = ({ panelId, data, action }, onError) => {
   api
-    .put(
-      action
+    .put({
+      uri: action
         ? `apps/${props.id}/actions/${action}`
         : `apps/${props.id}/config/${panelId}`,
-      isEmptyValue(data) ? {} : { args: objectToParams(data) },
-      {
+      data: isEmptyValue(data) ? {} : { args: objectToParams(data) },
+      humanKey: {
         key: `apps.${action ? 'action' : 'update'}_config`,
         id: panelId,
         name: props.id,
       },
-    )
+    })
     .then(() => refetch())
     .catch(onError)
 }
@@ -246,10 +246,14 @@ const onPanelApply: OnPanelApply = ({ panelId, data, action }, onError) => {
 function changeLabel(permName, data) {
   data.show_tile = data.show_tile ? 'True' : 'False'
   api
-    .put('users/permissions/' + permName, data, {
-      key: 'apps.change_label',
-      prevName: app.value.label,
-      nextName: data.label,
+    .put({
+      uri: 'users/permissions/' + permName,
+      data,
+      humanKey: {
+        key: 'apps.change_label',
+        prevName: app.value.label,
+        nextName: data.label,
+      },
     })
     .then(() => refetch(false))
 }
@@ -260,11 +264,11 @@ async function changeUrl() {
 
   const { domain, path } = form.url
   api
-    .put(
-      `apps/${props.id}/changeurl`,
-      { domain, path: '/' + path },
-      { key: 'apps.change_url', name: app.value.label },
-    )
+    .put({
+      uri: `apps/${props.id}/changeurl`,
+      data: { domain, path: '/' + path },
+      humanKey: { key: 'apps.change_url', name: app.value.label },
+    })
     .then(() => refetch(false))
 }
 
@@ -273,34 +277,33 @@ async function setAsDefaultDomain(undo = false) {
   if (!confirmed) return
 
   api
-    .put(
-      `apps/${props.id}/default${undo ? '?undo' : ''}`,
-      {},
-      {
+    .put({
+      uri: `apps/${props.id}/default${undo ? '?undo' : ''}`,
+      humanKey: {
         key: 'apps.set_default',
         name: app.value.label,
         domain: app.value.domain,
       },
-    )
+    })
     .then(() => refetch(false))
 }
 
 async function dismissNotification(name: string) {
   api
-    .put(
-      `apps/${props.id}/dismiss_notification/${name}`,
-      {},
-      { key: 'apps.dismiss_notification', name: app.value.label },
-    )
+    .put({
+      uri: `apps/${props.id}/dismiss_notification/${name}`,
+      humanKey: { key: 'apps.dismiss_notification', name: app.value.label },
+    })
     .then(() => refetch(false))
 }
 
 async function uninstall() {
   const data = purge.value === true ? { purge: 1 } : {}
   api
-    .delete('apps/' + props.id, data, {
-      key: 'apps.uninstall',
-      name: app.value.label,
+    .delete({
+      uri: 'apps/' + props.id,
+      data,
+      humanKey: { key: 'apps.uninstall', name: app.value.label },
     })
     .then(() => {
       router.push({ name: 'app-list' })
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 5824037ff..0a6974e57 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -37,8 +37,8 @@ const formData = shallowRef<
 
 const { loading } = useInitialQueries(
   [
-    ['GET', 'apps/catalog?full&with_categories&with_antifeatures'],
-    ['GET', `apps/manifest?app=${props.id}&with_screenshot`],
+    { uri: 'apps/catalog?full&with_categories&with_antifeatures' },
+    { uri: `apps/manifest?app=${props.id}&with_screenshot` },
   ],
   { onQueriesResponse },
 )
@@ -186,7 +186,11 @@ async function performInstall(onError: (err: APIError) => void) {
   }
 
   api
-    .post('apps', data, { key: 'apps.install', name: app.value.name })
+    .post({
+      uri: 'apps',
+      data,
+      humanKey: { key: 'apps.install', name: app.value.name },
+    })
     .then(async ({ notifications }) => {
       const postInstall = formatAppNotifs(notifications)
       if (postInstall) {
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index 02987fe8e..36792d3fd 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -5,7 +5,7 @@ import { useInitialQueries } from '@/composables/useInitialQueries'
 import { useSearch } from '@/composables/useSearch'
 import type { Obj } from '@/types/commons'
 
-const { loading } = useInitialQueries([['GET', 'apps?full']], {
+const { loading } = useInitialQueries([{ uri: 'apps?full' }], {
   onQueriesResponse,
 })
 
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index 993601bd8..df8e8b76e 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -13,10 +13,7 @@ const props = defineProps<{
 const { t } = useI18n()
 const router = useRouter()
 const { loading } = useInitialQueries(
-  [
-    ['GET', 'hooks/backup'],
-    ['GET', 'apps?with_backup'],
-  ],
+  [{ uri: 'hooks/backup' }, { uri: 'apps?with_backup' }],
   { onQueriesResponse },
 )
 
@@ -76,7 +73,7 @@ function createBackup() {
     }
   }
 
-  api.post('backups', data, 'backups.create').then(() => {
+  api.post({ uri: 'backups', data, humanKey: 'backups.create' }).then(() => {
     router.push({ name: 'backup-list', params: { id: props.id } })
   })
 }
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index 209b20fe4..ece48c959 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -22,7 +22,7 @@ const router = useRouter()
 const store = useStore()
 const modalConfirm = useAutoModal()
 const { loading } = useInitialQueries(
-  [['GET', `backups/${props.name}?with_details`]],
+  [{ uri: `backups/${props.name}?with_details` }],
   { onQueriesResponse },
 )
 
@@ -96,9 +96,10 @@ async function restoreBackup() {
   }
 
   api
-    .put(`backups/${props.name}/restore`, data, {
-      key: 'backups.restore',
-      name: props.name,
+    .put({
+      uri: `backups/${props.name}/restore`,
+      data,
+      humanKey: { key: 'backups.restore', name: props.name },
     })
     .then(() => {
       isValid.value = null
@@ -117,11 +118,10 @@ async function deleteBackup() {
   if (!confirmed) return
 
   api
-    .delete(
-      'backups/' + props.name,
-      {},
-      { key: 'backups.delete', name: props.name },
-    )
+    .delete({
+      uri: 'backups/' + props.name,
+      humanKey: { key: 'backups.delete', name: props.name },
+    })
     .then(() => {
       router.push({ name: 'backup-list', params: { id: props.id } })
     })
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index 4242249e9..fac7204b6 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
   id: string
 }>()
 
-const { loading } = useInitialQueries([['GET', 'backups?with_info']], {
+const { loading } = useInitialQueries([{ uri: 'backups?with_info' }], {
   onQueriesResponse,
 })
 const archives = ref<any[] | null>(null)
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index be8343439..8d45541b3 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -8,10 +8,14 @@ import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 const { loading, refetch } = useInitialQueries(
   [
-    ['PUT', 'diagnosis/run?except_if_never_ran_yet', {}, 'diagnosis.run'],
-    ['GET', 'diagnosis?full'],
+    {
+      method: 'PUT',
+      uri: 'diagnosis/run?except_if_never_ran_yet',
+      humanKey: 'diagnosis.run',
+    },
+    { uri: 'diagnosis?full' },
   ],
-  { wait: true, onQueriesResponse },
+  { showModal: true, onQueriesResponse },
 )
 
 const reports = ref()
@@ -62,9 +66,13 @@ function runDiagnosis({ id = null, description } = {}) {
   const data = id !== null ? { categories: [id] } : {}
 
   api
-    .put('diagnosis/run' + param, data, {
-      key: 'diagnosis.run' + (id !== null ? '_specific' : ''),
-      description,
+    .put({
+      uri: 'diagnosis/run' + param,
+      data,
+      humanKey: {
+        key: 'diagnosis.run' + (id !== null ? '_specific' : ''),
+        description,
+      },
     })
     .then(() => refetch(false))
 }
@@ -75,11 +83,11 @@ function toggleIgnoreIssue(action, report, item) {
   )
 
   api
-    .put(
-      'diagnosis/' + action,
-      { filter: filterArgs },
-      `diagnosis.${action}.${item.status.toLowerCase()}`,
-    )
+    .put({
+      uri: 'diagnosis/' + action,
+      data: { filter: filterArgs },
+      humanKey: `diagnosis.${action}.${item.status.toLowerCase()}`,
+    })
     .then(() => {
       item.ignored = action === 'ignore'
       if (item.ignored) {
diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/domain/DomainAdd.vue
index 64cdebc71..284c806af 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -9,14 +9,20 @@ import { useInitialQueries } from '@/composables/useInitialQueries'
 import { DomainForm } from '@/views/_partials'
 
 const router = useRouter()
-const store = useStore()
 
-const { loading } = useInitialQueries([['GET', { uri: 'domains' }]])
+const { loading } = useInitialQueries([
+  { uri: 'domains', cachePath: 'domains' },
+])
 const serverError = ref('')
 
 function onSubmit(data) {
   api
-    .post('domains', data, { key: 'domains.add', name: data.domain })
+    .post({
+      uri: 'domains',
+      cachePath: 'domains',
+      data,
+      humanKey: { key: 'domains.add', name: data.domain },
+    })
     .then(() => {
       store.dispatch('RESET_CACHE_DATA', ['domains'])
       router.push({ name: 'domain-list' })
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index 0e81744b2..aaac5f30f 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -14,7 +14,7 @@ const props = defineProps<{
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
 const { loading } = useInitialQueries(
-  [['GET', `domains/${props.name}/dns/suggest`]],
+  [{ uri: `domains/${props.name}/dns/suggest` }],
   { onQueriesResponse },
 )
 
@@ -36,8 +36,9 @@ function getDnsChanges() {
   loading.value = true
 
   return api
-    .post(`domains/${props.name}/dns/push?dry_run`, {}, null, {
-      wait: false,
+    .post({
+      uri: `domains/${props.name}/dns/push?dry_run`,
+      showModal: false,
       websocket: false,
     })
     .then((dnsChanges) => {
@@ -110,11 +111,10 @@ async function pushDnsChanges() {
   }
 
   api
-    .post(
-      `domains/${props.name}/dns/push${force.value ? '?force' : ''}`,
-      {},
-      { key: 'domains.push_dns_changes', name: props.name },
-    )
+    .post({
+      uri: `domains/${props.name}/dns/push${force.value ? '?force' : ''}`,
+      humanKey: { key: 'domains.push_dns_changes', name: props.name },
+    })
     .then(async (responseData) => {
       await getDnsChanges()
       if (!isEmptyValue(responseData)) {
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index cee755529..a569678a0 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -29,9 +29,13 @@ const store = useStore()
 const modalConfirm = useAutoModal()
 const { loading, refetch } = useInitialQueries(
   [
-    ['GET', { uri: 'domains', storeKey: 'domains' }],
-    ['GET', { uri: 'domains', storeKey: 'domains_details', param: props.name }],
-    ['GET', `domains/${props.name}/config?full`],
+    { uri: 'domains', cachePath: 'domains' },
+    {
+      uri: `domains/${props.name}`,
+      cachePath: 'domains_details',
+      cacheParams: { domain: props.name },
+    },
+    { uri: `domains/${props.name}/config?full` },
   ],
   { onQueriesResponse },
 )
@@ -92,17 +96,17 @@ function onQueriesResponse(
 
 const onPanelApply: OnPanelApply = ({ panelId, data, action }, onError) => {
   api
-    .put(
-      action
+    .put({
+      uri: action
         ? `domain/${props.name}/actions/${action}`
         : `domains/${props.name}/config/${panelId}`,
-      { args: objectToParams(data) },
-      {
+      data: { args: objectToParams(data) },
+      humanKey: {
         key: `domains.${action ? 'action' : 'update'}_config`,
         id: panelId,
         name: props.name,
       },
-    )
+    })
     .then(() => refetch())
     .catch(onError)
 }
@@ -114,9 +118,15 @@ async function deleteDomain() {
       : {}
 
   api
-    .delete({ uri: 'domains', param: props.name }, data, {
-      key: 'domains.delete',
-      name: props.name,
+    .delete({
+      uri: 'domains',
+      cachePath: 'domains',
+      cacheParams: { domain: props.name },
+      data,
+      humanKey: {
+        key: 'domains.delete',
+        name: props.name,
+      },
     })
     .then(() => {
       router.push({ name: 'domain-list' })
@@ -128,11 +138,12 @@ async function setAsDefaultDomain() {
   if (!confirmed) return
 
   api
-    .put(
-      { uri: `domains/${props.name}/main`, storeKey: 'main_domain' },
-      {},
-      { key: 'domains.set_default', name: props.name },
-    )
+    .put({
+      uri: `domains/${props.name}/main`,
+      cachePath: 'main_domain',
+      data: {},
+      humanKey: { key: 'domains.set_default', name: props.name },
+    })
     .then(() => {
       // FIXME Have to commit by hand here since the response is empty (should return the given name)
       store.commit('UPDATE_MAIN_DOMAIN', props.name)
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 41f793dd3..e183dd9a1 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -9,7 +9,7 @@ import type { ComputedRef } from 'vue'
 
 const { mainDomain, domainsTree } = useStoreGetters()
 const { loading } = useInitialQueries([
-  ['GET', { uri: 'domains', storeKey: 'domains' }],
+  { uri: 'domains', cachePath: 'domains' },
 ])
 
 const [search, filteredTree] = useSearch(
diff --git a/app/src/views/group/GroupCreate.vue b/app/src/views/group/GroupCreate.vue
index 8cbf7c4f5..86d9b8b2c 100644
--- a/app/src/views/group/GroupCreate.vue
+++ b/app/src/views/group/GroupCreate.vue
@@ -29,9 +29,11 @@ const { v, onSubmit } = useForm(form, fields)
 
 const onAddGroup = onSubmit((onError) => {
   api
-    .post({ uri: 'users/groups', storeKey: 'groups' }, form, {
-      key: 'groups.create',
-      name: form.value.groupname,
+    .post({
+      uri: 'users/groups',
+      cachePath: 'groups',
+      data: form,
+      humanKey: { key: 'groups.create', name: form.value.groupname },
     })
     .then(() => {
       router.push({ name: 'group-list' })
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 9ed2c7c33..e26687858 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -17,15 +17,12 @@ const { t } = useI18n()
 const modalConfirm = useAutoModal()
 const { loading } = useInitialQueries(
   [
-    ['GET', { uri: 'users' }],
-    [
-      'GET',
-      {
-        uri: 'users/groups?full&include_primary_groups',
-        storeKey: 'groups',
-      },
-    ],
-    ['GET', { uri: 'users/permissions?full', storeKey: 'permissions' }],
+    { uri: 'users', cachePath: 'users' },
+    {
+      uri: 'users/groups?full&include_primary_groups',
+      cachePath: 'groups',
+    },
+    { uri: 'users/permissions?full', cachePath: 'permissions' },
   ],
   { onQueriesResponse },
 )
@@ -123,33 +120,25 @@ async function onPermissionChanged({ option, groupName, action, applyMethod }) {
     )
     if (!confirmed) return
   }
+  // FIXME hacky way to update the store
   api
-    .put(
-      // FIXME hacky way to update the store
-      {
-        uri: `users/permissions/${permId}/${action}/${groupName}`,
-        storeKey: 'permissions',
-        groupName,
-        action,
-        permId,
-      },
-      {},
-      { key: 'permissions.' + action, perm: option, name: groupName },
-    )
+    .put({
+      uri: `users/permissions/${permId}/${action}/${groupName}`,
+      cachePath: 'permissions',
+      cacheParams: { groupName, action, permId },
+      humanKey: { key: 'permissions.' + action, perm: option, name: groupName },
+    })
     .then(() => applyMethod(option))
 }
 
 function onUserChanged({ option, groupName, action, applyMethod }) {
   api
-    .put(
-      {
-        uri: `users/groups/${groupName}/${action}/${option}`,
-        storeKey: 'groups',
-        groupName,
-      },
-      {},
-      { key: 'groups.' + action, user: option, name: groupName },
-    )
+    .put({
+      uri: `users/groups/${groupName}/${action}/${option}`,
+      cachePath: 'groups',
+      cacheParams: { groupName },
+      humanKey: { key: 'groups.' + action, user: option, name: groupName },
+    })
     .then(() => applyMethod(option))
 }
 
@@ -165,11 +154,12 @@ async function deleteGroup(groupName) {
   if (!confirmed) return
 
   api
-    .delete(
-      { uri: 'users/groups', param: groupName, storeKey: 'groups' },
-      {},
-      { key: 'groups.delete', name: groupName },
-    )
+    .delete({
+      uri: `users/groups/${groupName}`,
+      cachePath: 'groups',
+      cacheParams: { groupName },
+      humanKey: { key: 'groups.delete', name: groupName },
+    })
     .then(() => {
       primaryGroups.value = primaryGroups.value?.filter(
         (group) => group.name !== groupName,
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index 317e08e90..a4c1da951 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -15,8 +15,8 @@ const { t } = useI18n()
 const modalConfirm = useAutoModal()
 const { loading, refetch } = useInitialQueries(
   [
-    ['GET', 'services/' + props.name],
-    ['GET', `services/${props.name}/log?number=50`],
+    { uri: 'services/' + props.name },
+    { uri: `services/${props.name}/log?number=50` },
   ],
   { onQueriesResponse },
 )
@@ -56,11 +56,10 @@ async function updateService(action) {
   if (!confirmed) return
 
   api
-    .put(
-      `services/${props.name}/${action}`,
-      {},
-      { key: 'services.' + action, name: props.name },
-    )
+    .put({
+      uri: `services/${props.name}/${action}`,
+      humanKey: { key: 'services.' + action, name: props.name },
+    })
     .then(() => refetch(false))
 }
 
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 0d09925f2..3f1c2f326 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -6,7 +6,7 @@ import { useSearch } from '@/composables/useSearch'
 import { distanceToNow } from '@/helpers/filters/date'
 import type { Obj } from '@/types/commons'
 
-const { loading } = useInitialQueries([['GET', 'services']], {
+const { loading } = useInitialQueries([{ uri: 'services' }], {
   onQueriesResponse,
 })
 
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index cb2e2b348..ddbdf69cb 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -13,7 +13,7 @@ import type { FieldProps, FormFieldDict } from '@/types/form'
 
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
-const { loading, refetch } = useInitialQueries([['GET', '/firewall?raw']], {
+const { loading, refetch } = useInitialQueries([{ uri: '/firewall?raw' }], {
   onQueriesResponse,
 })
 
@@ -141,18 +141,17 @@ async function togglePort({ action, port, protocol, connection }) {
 
   const actionTrad = t({ allow: 'open', disallow: 'close' }[action])
   return api
-    .put(
-      `firewall/${protocol}/${action}/${port}?${connection}_only`,
-      {},
-      {
+    .put({
+      uri: `firewall/${protocol}/${action}/${port}?${connection}_only`,
+      humanKey: {
         key: 'firewall.ports',
         protocol,
         action: actionTrad,
         port,
         connection,
       },
-      { wait: false },
-    )
+      showModal: false,
+    })
     .then(() => confirmed)
 }
 
@@ -162,11 +161,10 @@ async function toggleUpnp(value) {
   if (!confirmed) return
 
   api
-    .put(
-      'firewall/upnp/' + action,
-      {},
-      { key: 'firewall.upnp', action: t(action) },
-    )
+    .put({
+      uri: 'firewall/upnp/' + action,
+      humanKey: { key: 'firewall.upnp', action: t(action) },
+    })
     .then(() => {
       // FIXME Couldn't test when it works.
       refetch(false)
diff --git a/app/src/views/tool/ToolLog.vue b/app/src/views/tool/ToolLog.vue
index 0231eea67..c286cb6dc 100644
--- a/app/src/views/tool/ToolLog.vue
+++ b/app/src/views/tool/ToolLog.vue
@@ -18,7 +18,7 @@ const queries = computed<APIQuery[]>(() => {
     with_suboperations: '',
     number: numberOfLines.value,
   })
-  return [['GET', `logs/${props.name}?${queryString}`]]
+  return [{ uri: `logs/${props.name}?${queryString}` }]
 })
 const { loading, refetch } = useInitialQueries(queries, {
   onQueriesResponse,
@@ -66,12 +66,11 @@ function onQueriesResponse(log: any) {
 
 function shareLogs() {
   api
-    .get(
-      `logs/${props.name}/share`,
-      null,
-      { key: 'share_logs', name: props.name },
-      { websocket: true },
-    )
+    .get({
+      uri: `logs/${props.name}/share`,
+      humanKey: { key: 'share_logs', name: props.name },
+      websocket: true,
+    })
     .then(({ url }) => {
       window.open(url, '_blank')
     })
diff --git a/app/src/views/tool/ToolLogs.vue b/app/src/views/tool/ToolLogs.vue
index 858380ab2..6fc34eb34 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -7,7 +7,7 @@ import { distanceToNow, readableDate } from '@/helpers/filters/date'
 import type { Obj } from '@/types/commons'
 
 const { loading } = useInitialQueries(
-  [['GET', `logs?limit=${25}&with_details`]],
+  [{ uri: `logs?limit=${25}&with_details` }],
   { onQueriesResponse },
 )
 
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index 3b3dfcb79..6394a0a58 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -10,10 +10,7 @@ import { useInitialQueries } from '@/composables/useInitialQueries'
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
 const { loading, refetch } = useInitialQueries(
-  [
-    ['GET', 'migrations?pending'],
-    ['GET', 'migrations?done'],
-  ],
+  [{ uri: 'migrations?pending' }, { uri: 'migrations?done' }],
   { onQueriesResponse },
 )
 
@@ -46,7 +43,7 @@ function runMigrations() {
   // Check that every migration's disclaimer has been checked.
   if (Object.values(checked).every((value) => value === true)) {
     api
-      .put('migrations?accept_disclaimer', {}, 'migrations.run')
+      .put({ uri: 'migrations?accept_disclaimer', humanKey: 'migrations.run' })
       .then(() => refetch(false))
   }
 }
@@ -55,7 +52,11 @@ async function skipMigration(id) {
   const confirmed = await modalConfirm(t('confirm_migrations_skip'))
   if (!confirmed) return
   api
-    .put('/migrations/' + id, { skip: '', targets: id }, 'migration.skip')
+    .put({
+      uri: '/migrations/' + id,
+      data: { skip: '', targets: id },
+      humanKey: 'migration.skip',
+    })
     .then(() => refetch(false))
 }
 </script>
diff --git a/app/src/views/tool/ToolPower.vue b/app/src/views/tool/ToolPower.vue
index dc807b812..f89250a0b 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -13,7 +13,7 @@ async function triggerAction(action) {
   const confirmed = await modalConfirm(t('confirm_reboot_action_' + action))
   if (!confirmed) return
 
-  api.put(action + '?force', {}, action).then(() => {
+  api.put({ uri: action + '?force', humanKey: action }).then(() => {
     const delay = action === 'reboot' ? 4000 : 10000
     store.dispatch('TRY_TO_RECONNECT', {
       attemps: Infinity,
diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index 4055a3521..2514cdd8f 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -13,7 +13,7 @@ import type { CoreConfigPanels } from '@/types/core/options'
 
 const props = defineProps<{ tabId?: string }>()
 
-const { loading, refetch } = useInitialQueries([['GET', 'settings?full']], {
+const { loading, refetch } = useInitialQueries([{ uri: 'settings?full' }], {
   onQueriesResponse,
 })
 const config = shallowRef<ConfigPanelsProps | undefined>()
@@ -29,11 +29,11 @@ function onQueriesResponse(config_: CoreConfigPanels) {
 const onPanelApply: OnPanelApply = ({ panelId, data }, onError) => {
   // FIXME no route for potential action
   api
-    .put(
-      `settings/${panelId}`,
-      { args: objectToParams(data) },
-      { key: 'settings.update', panel: panelId },
-    )
+    .put({
+      uri: `settings/${panelId}`,
+      data: { args: objectToParams(data) },
+      humanKey: { key: 'settings.update', panel: panelId },
+    })
     .then(() => refetch())
     .catch(onError)
 }
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index bee3501ad..3c50d6c15 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -11,10 +11,10 @@ import { useInitialQueries } from '@/composables/useInitialQueries'
 const { t } = useI18n()
 const store = useStore()
 const modalConfirm = useAutoModal()
-const { loading } = useInitialQueries([['PUT', 'update/all', {}, 'update']], {
-  wait: true,
-  onQueriesResponse,
-})
+const { loading } = useInitialQueries(
+  [{ method: 'PUT', uri: 'update/all', humanKey: 'update' }],
+  { showModal: true, onQueriesResponse },
+)
 
 const system = ref()
 const apps = ref()
@@ -64,7 +64,10 @@ async function performAppsUpgrade(ids) {
 
   for (const app of apps_) {
     const continue_ = await api
-      .put(`apps/${app.id}/upgrade`, {}, { key: 'upgrade.app', app: app.name })
+      .put({
+        uri: `apps/${app.id}/upgrade`,
+        humanKey: { key: 'upgrade.app', app: app.name },
+      })
       .then((response) => {
         const postMessage = formatAppNotifs(response.notifications.POST_UPGRADE)
         const isLast = app.id === lastAppId
@@ -100,7 +103,7 @@ async function performSystemUpgrade() {
   const confirmed = await modalConfirm(t('confirm_update_system'))
   if (!confirmed) return
 
-  api.put('upgrade/system', {}, { key: 'upgrade.system' }).then(() => {
+  api.put({ uri: 'upgrade/system', humanKey: 'upgrade.system' }).then(() => {
     if (system.value.some(({ name }) => name.includes('yunohost'))) {
       store.dispatch('TRY_TO_RECONNECT', {
         attemps: 1,
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index 3ff1dc681..98eba9ac3 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -23,8 +23,8 @@ const { t } = useI18n()
 const router = useRouter()
 const { loading } = useInitialQueries(
   [
-    ['GET', { uri: 'users' }],
-    ['GET', { uri: 'domains' }],
+    { uri: 'users', cachePath: 'users' },
+    { uri: 'domains', cachePath: 'domains' },
   ],
   { onQueriesResponse },
 )
@@ -117,9 +117,11 @@ function onQueriesResponse() {
 const onUserCreate = onSubmit(async (onError) => {
   const data = await formatForm(form)
   api
-    .post({ uri: 'users' }, data, {
-      key: 'users.create',
-      name: form.value.username,
+    .post({
+      uri: 'users',
+      cachePath: 'users',
+      data,
+      humanKey: { key: 'users.create', name: form.value.username },
     })
     .then(() => {
       router.push({ name: 'user-list' })
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 0669a2e3f..38156a0fa 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -30,8 +30,12 @@ const { t } = useI18n()
 const router = useRouter()
 const { loading } = useInitialQueries(
   [
-    ['GET', { uri: 'users', param: props.name, storeKey: 'users_details' }],
-    ['GET', { uri: 'domains' }],
+    {
+      uri: `users/${props.name}`,
+      cachePath: 'users_details',
+      cacheParams: { username: props.name },
+    },
+    { uri: 'domains', cachePath: 'domains' },
   ],
   { onQueriesResponse },
 )
@@ -207,12 +211,15 @@ const onUserEdit = onSubmit(async (onError, serverErrors) => {
   }
 
   api
-    .put({ uri: 'users', param: props.name, storeKey: 'users_details' }, data, {
-      key: 'users.update',
-      name: props.name,
+    .put({
+      uri: `users/${props.name}`,
+      cachePath: 'users_details',
+      cacheParams: { username: props.name },
+      data,
+      humanKey: { key: 'users.update', name: props.name },
     })
     .then(() => {
-      router.push({ name: 'user-info', param: { name: props.name } })
+      router.push({ name: 'user-info', params: { name: props.name } })
     })
     .catch(onError)
 })
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index f2b19ffe6..391f28c80 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -70,7 +70,7 @@ const onUserImport = onSubmit(async (onError) => {
   if (!requestArgs.update) delete requestArgs.update
   const data = await formatForm(requestArgs)
   api
-    .post('users/import', data, null, { asFormData: true })
+    .post({ uri: 'users/import', data })
     .then(() => {
       // Reset all cached data related to users.
       store.dispatch('RESET_CACHE_DATA', [
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index a50e8c269..fc8a596f8 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -10,7 +10,11 @@ const props = defineProps<{ name: string }>()
 
 const router = useRouter()
 const { loading } = useInitialQueries([
-  ['GET', { uri: 'users', param: props.name, storeKey: 'users_details' }],
+  {
+    uri: `users/${props.name}`,
+    cachePath: 'users_details',
+    cacheParams: { username: props.name },
+  },
 ])
 
 const { user: userGetter } = useStoreGetters()
@@ -20,11 +24,13 @@ const user = computed(() => userGetter.value(props.name))
 function deleteUser() {
   const data = purge.value ? { purge: '' } : {}
   api
-    .delete(
-      { uri: 'users', param: props.name, storeKey: 'users_details' },
+    .delete({
+      uri: `users/${props.name}`,
+      cachePath: 'user_details',
+      cacheParams: { username: props.name },
       data,
-      { key: 'users.delete', name: props.name },
-    )
+      humanKey: { key: 'users.delete', name: props.name },
+    })
     .then(() => {
       router.push({ name: 'user-list' })
     })
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 122e1e01d..c1ee6c49e 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -9,13 +9,10 @@ import type { Obj } from '@/types/commons'
 
 const store = useStore()
 const { loading } = useInitialQueries([
-  [
-    'GET',
-    {
-      uri: 'users?fields=username&fields=fullname&fields=mail&fields=mailbox-quota&fields=groups',
-      storeKey: 'users',
-    },
-  ],
+  {
+    uri: 'users?fields=username&fields=fullname&fields=mail&fields=mailbox-quota&fields=groups',
+    cachePath: 'users',
+  },
 ])
 
 const { users } = useStoreGetters()

From 254e1aca5692ddb0f2dc2f11bb13c8332729170f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 16:21:40 +0200
Subject: [PATCH 130/275] refactor: requests handling

---
 app/src/App.vue                    |   8 +-
 app/src/api/api.ts                 |  44 ++------
 app/src/api/handlers.ts            |  34 ++++--
 app/src/composables/useRequests.ts | 157 +++++++++++++++++++++++++++
 app/src/store/info.ts              | 168 +----------------------------
 5 files changed, 199 insertions(+), 212 deletions(-)
 create mode 100644 app/src/composables/useRequests.ts

diff --git a/app/src/App.vue b/app/src/App.vue
index aaa572b7a..00f4d3a74 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -2,13 +2,15 @@
 import { onMounted } from 'vue'
 import { useStore } from 'vuex'
 
+import { useRequests } from '@/composables/useRequests'
+import { useSettings } from '@/composables/useSettings'
 import { useStoreGetters } from '@/store/utils'
 import { HistoryConsole, ViewLockOverlay } from '@/views/_partials'
-import { useSettings } from '@/composables/useSettings'
 
 const store = useStore()
 
-const { connected, yunohost, routerKey, waiting, ssoLink } = useStoreGetters()
+const { connected, yunohost, routerKey, ssoLink } = useStoreGetters()
+const { locked } = useRequests()
 const { spinner, dark, transitions, transitionName } = useSettings()
 
 async function logout() {
@@ -78,7 +80,7 @@ onMounted(() => {
       <BNavbar>
         <BNavbarBrand
           :to="{ name: 'home' }"
-          :disabled="waiting"
+          :disabled="locked"
           exact-active-class="active"
         >
           <span v-if="dark">
diff --git a/app/src/api/api.ts b/app/src/api/api.ts
index ba6806fcc..ded3f3e21 100644
--- a/app/src/api/api.ts
+++ b/app/src/api/api.ts
@@ -1,10 +1,5 @@
-/**
- * API module.
- * @module api
- */
-
+import { useRequests, type APIRequestAction } from '@/composables/useRequests'
 import { useSettings } from '@/composables/useSettings'
-import store from '@/store'
 import type { Obj } from '@/types/commons'
 import { APIUnauthorizedError, type APIError } from './errors'
 import { getError, getResponseData, openWebSocket } from './handlers'
@@ -34,30 +29,7 @@ export type APIErrorData = {
   error_key?: string
   log_ref?: string
   traceback?: string
-  name?: string // FIXME name is field id right?
-}
-
-type RequestStatus = 'pending' | 'success' | 'warning' | 'error'
-
-export type APIRequest = {
-  method: RequestMethod
-  uri: string
-  humanRouteKey: HumanKey['key']
-  humanRoute: string
-  initial: boolean
-  status: RequestStatus
-}
-
-type WebsocketMessage = {
-  text: string
-  status: 'info' | 'success' | 'warning' | 'error'
-}
-
-export type APIRequestAction = APIRequest & {
-  messages: WebsocketMessage[]
-  date: number
-  warning: number
-  errors: number
+  name?: string
 }
 
 /**
@@ -131,21 +103,21 @@ export default {
     asFormData = true,
   }: APIQuery): Promise<T> {
     const { locale } = useSettings()
-    // `await` because Vuex actions returns promises by default.
-    const request: APIRequest = await store.dispatch('INIT_REQUEST', {
+    const { startRequest, endRequest } = useRequests()
+
+    const request = startRequest({
       method,
       uri,
       humanKey,
       initial,
-      wait: showModal,
+      showModal,
       websocket,
     })
-
     if (websocket) {
       await openWebSocket(request as APIRequestAction)
     }
 
-    let options = this.options
+    let options = { ...this.options }
     if (method === 'GET') {
       uri += `${uri.includes('?') ? '&' : '?'}locale=${locale.value}`
     } else {
@@ -160,7 +132,7 @@ export default {
 
     const response = await fetch('/yunohost/api/' + uri, options)
     const responseData = await getResponseData(response)
-    store.dispatch('END_REQUEST', { request, success: response.ok, wait })
+    endRequest({ request, success: response.ok })
 
     if (!response.ok) {
       throw getError(request, response, responseData as string | APIErrorData)
diff --git a/app/src/api/handlers.ts b/app/src/api/handlers.ts
index 8d8861dd4..48fa79702 100644
--- a/app/src/api/handlers.ts
+++ b/app/src/api/handlers.ts
@@ -3,10 +3,15 @@
  * @module api/handlers
  */
 
-import store from '@/store'
-import errors, { APIError } from './errors'
+import errors, { APIError } from '@/api/errors'
+import {
+  STATUS_VARIANT,
+  type APIRequest,
+  type APIRequestAction,
+} from '@/composables/useRequests'
+import { toEntries } from '@/helpers/commons'
 import type { Obj } from '@/types/commons'
-import type { APIErrorData, APIRequest, APIRequestAction } from './api'
+import type { APIErrorData } from './api'
 
 /**
  * Try to get response content as json and if it's not as text.
@@ -39,9 +44,26 @@ export function openWebSocket(request: APIRequestAction): Promise<Event> {
       `wss://${store.getters.host}/yunohost/api/messages`,
     )
     ws.onmessage = ({ data }) => {
-      store.dispatch('DISPATCH_MESSAGE', {
-        request,
-        messages: JSON.parse(data),
+      const messages: Record<'info' | 'success' | 'warning' | 'error', string> =
+        JSON.parse(data)
+      toEntries(messages).forEach(([status, text]) => {
+        text = text.replaceAll('\n', '<br>')
+        const progressBar = text.match(/^\[#*\+*\.*\] > /)?.[0]
+        if (progressBar) {
+          text = text.replace(progressBar, '')
+          const progress: Obj<number> = { '#': 0, '+': 0, '.': 0 }
+          for (const char of progressBar) {
+            if (char in progress) progress[char] += 1
+          }
+          request.action.progress = Object.values(progress)
+        }
+        request.action.messages.push({
+          text,
+          variant: STATUS_VARIANT[status],
+        })
+        if (['error', 'warning'].includes(status)) {
+          request.action[`${status as 'error' | 'warning'}s`]++
+        }
       })
     }
     // ws.onclose = (e) => {}
diff --git a/app/src/composables/useRequests.ts b/app/src/composables/useRequests.ts
new file mode 100644
index 000000000..e1cd9e8c1
--- /dev/null
+++ b/app/src/composables/useRequests.ts
@@ -0,0 +1,157 @@
+import { createGlobalState } from '@vueuse/core'
+import { v4 as uuid } from 'uuid'
+import { computed, reactive, shallowRef } from 'vue'
+
+import type { APIQuery, RequestMethod } from '@/api/api'
+import { type APIError } from '@/api/errors'
+import { isObjectLiteral } from '@/helpers/commons'
+import i18n from '@/i18n'
+import type { StateVariant } from '@/types/commons'
+
+export type RequestStatus = 'pending' | 'success' | 'warning' | 'error'
+
+export type APIRequest = {
+  status: RequestStatus
+  method: RequestMethod
+  uri: string
+  id: string
+  humanRoute: string
+  initial: boolean
+  date: number
+  err?: APIError
+  action?: APIActionProps
+  showModal?: boolean
+}
+type APIActionProps = {
+  messages: RequestMessage[]
+  errors: number
+  warnings: number
+  progress?: number[]
+}
+
+export type APIRequestAction = APIRequest & {
+  action: APIActionProps
+}
+
+export type RequestMessage = {
+  text: string
+  variant: StateVariant
+}
+
+export const STATUS_VARIANT = {
+  pending: 'primary',
+  success: 'success',
+  warning: 'warning',
+  error: 'danger',
+  info: 'info',
+} as const
+
+export const useRequests = createGlobalState(() => {
+  const requests = shallowRef<APIRequest[]>([])
+  const currentRequest = computed(() => {
+    return requests.value.find((r) => r.showModal)
+  })
+  const locked = computed(() => currentRequest.value?.showModal)
+  const historyList = computed<APIRequestAction[]>(() => {
+    return requests.value
+      .filter((r) => !!r.action || !!r.err)
+      .reverse() as APIRequestAction[]
+  })
+
+  function startRequest({
+    uri,
+    method,
+    humanKey,
+    initial,
+    websocket,
+    showModal,
+  }: {
+    uri: string
+    method: RequestMethod
+    humanKey?: APIQuery['humanKey']
+    showModal: boolean
+    websocket: boolean
+    initial: boolean
+  }): APIRequest {
+    // Try to find a description for an API route to display in history and modals
+    const { key, ...args } = isObjectLiteral(humanKey)
+      ? humanKey
+      : { key: humanKey }
+    const humanRoute = key
+      ? i18n.global.t(`human_routes.${key}`, args)
+      : `[${method}] /${uri.split('?')[0]}`
+
+    const request: APIRequest = reactive({
+      method,
+      uri,
+      status: 'pending',
+      humanRoute,
+      initial,
+      showModal: false,
+      id: uuid(),
+      date: Date.now(),
+      err: undefined,
+      action: websocket
+        ? {
+            messages: [],
+            warnings: 0,
+            errors: 0,
+          }
+        : undefined,
+    })
+    requests.value = [...requests.value, request]
+    const r = requests.value[requests.value.length - 1]!
+
+    if (showModal) {
+      setTimeout(() => {
+        // Display the waiting modal only if the request takes some time.
+        if (r.status === 'pending') {
+          r.showModal = true
+        }
+      }, 300)
+    }
+
+    return r
+  }
+
+  function endRequest({
+    request,
+    success,
+  }: {
+    request: APIRequest
+    success: boolean
+  }) {
+    let status: RequestStatus = success ? 'success' : 'error'
+    let hideModal = success
+
+    if (success && request.action) {
+      const { warnings, errors, messages } = request.action
+      const msgCount = messages.length
+      if (msgCount && messages[msgCount - 1].variant === 'warning') {
+        hideModal = false
+      }
+      if (errors || warnings) status = 'warning'
+    }
+
+    setTimeout(() => {
+      request.status = status
+
+      if (request.showModal && hideModal) {
+        request.showModal = false
+        // We can remove requests that are not actions or has no errors
+        requests.value = requests.value.filter(
+          (r) => r.showModal || !!r.action || !!r.err,
+        )
+      }
+    }, 350)
+  }
+
+  return {
+    requests,
+    historyList,
+    currentRequest,
+    locked,
+    startRequest,
+    endRequest,
+  }
+})
diff --git a/app/src/store/info.ts b/app/src/store/info.ts
index 88aa1f388..3bc2d81e8 100644
--- a/app/src/store/info.ts
+++ b/app/src/store/info.ts
@@ -1,7 +1,7 @@
 import router from '@/router'
 import i18n from '@/i18n'
 import api from '@/api'
-import { timeout, isEmptyValue, isObjectLiteral } from '@/helpers/commons'
+import { timeout, isEmptyValue } from '@/helpers/commons'
 
 export default {
   state: {
@@ -9,14 +9,8 @@ export default {
     installed: null,
     connected: localStorage.getItem('connected') === 'true', // Boolean
     yunohost: null, // Object { version, repo }
-    waiting: false, // Boolean
     reconnecting: null, // null|Object { attemps, delay, initialDelay }
-    history: [], // Array of `request`
-    requests: [], // Array of `request`
-    currentRequest: null,
     error: null, // null || request
-    historyTimer: null, // null || setTimeout id
-    tempMessages: [], // Array of messages
     routerKey: undefined, // String if current route has params
     breadcrumb: [], // Array of routes
     transitionName: null, // String of CSS class if transitions are enabled
@@ -36,67 +30,10 @@ export default {
       state.yunohost = yunohost
     },
 
-    SET_WAITING(state, boolean) {
-      state.waiting = boolean
-    },
-
     SET_RECONNECTING(state, args) {
       state.reconnecting = args
     },
 
-    SET_CURRENT_REQUEST(state, request) {
-      state.currentRequest = request
-    },
-
-    ADD_REQUEST(state, request) {
-      if (state.requests.length > 10) {
-        // We do not remove requests right after it resolves since an error might bring
-        // one back to life but we can safely remove some here.
-        state.requests.shift()
-      }
-      state.requests.push(request)
-    },
-
-    UPDATE_REQUEST(state, { key, value }) {
-      // This rely on data persistance and reactivity.
-      state.currentRequest[key] = value
-    },
-
-    REMOVE_REQUEST(state, request) {
-      const index = state.requests.lastIndexOf(request)
-      state.requests.splice(index, 1)
-    },
-
-    ADD_HISTORY_ACTION(state, request) {
-      state.history.push(request)
-    },
-
-    ADD_TEMP_MESSAGE(state, { request, message, type }) {
-      state.tempMessages.push([message, type])
-    },
-
-    UPDATE_DISPLAYED_MESSAGES(state) {
-      if (!state.tempMessages.length) {
-        state.historyTimer = null
-        return
-      }
-
-      const { messages, warnings, errors } = state.tempMessages.reduce(
-        (acc, [message, type]) => {
-          acc.messages.push(message)
-          if (['error', 'warning'].includes(type)) acc[type + 's']++
-          return acc
-        },
-        { messages: [], warnings: 0, errors: 0 },
-      )
-      state.tempMessages = []
-      state.historyTimer = null
-      state.currentRequest.messages =
-        state.currentRequest.messages.concat(messages)
-      state.currentRequest.warnings += warnings
-      state.currentRequest.errors += errors
-    },
-
     SET_ERROR(state, request) {
       if (request) {
         state.error = request
@@ -197,108 +134,6 @@ export default {
       })
     },
 
-    INIT_REQUEST(
-      { commit },
-      { method, uri, humanKey, initial, wait, websocket },
-    ) {
-      // Try to find a description for an API route to display in history and modals
-      const { key, ...args } = isObjectLiteral(humanKey)
-        ? humanKey
-        : { key: humanKey }
-      const humanRoute = key
-        ? i18n.global.t('human_routes.' + key, args)
-        : `[${method}] /${uri}`
-
-      let request = {
-        method,
-        uri,
-        humanRouteKey: key,
-        humanRoute,
-        initial,
-        status: 'pending',
-      }
-      if (websocket) {
-        request = {
-          ...request,
-          messages: [],
-          date: Date.now(),
-          warnings: 0,
-          errors: 0,
-        }
-        commit('ADD_HISTORY_ACTION', request)
-      }
-      commit('ADD_REQUEST', request)
-      commit('SET_CURRENT_REQUEST', request)
-      if (wait) {
-        setTimeout(() => {
-          // Display the waiting modal only if the request takes some time.
-          if (request.status === 'pending') {
-            commit('SET_WAITING', true)
-          }
-        }, 400)
-      }
-
-      return request
-    },
-
-    END_REQUEST({ state, commit }, { request, success, wait }) {
-      // Update last messages before finishing this request
-      clearTimeout(state.historyTimer)
-      commit('UPDATE_DISPLAYED_MESSAGES', { request })
-
-      let status = success ? 'success' : 'error'
-      if (success && (request.warnings || request.errors)) {
-        const messages = request.messages
-        if (
-          messages.length &&
-          messages[messages.length - 1].color === 'warning'
-        ) {
-          state.currentRequest.showWarningMessage = true
-        }
-        status = 'warning'
-      }
-
-      commit('UPDATE_REQUEST', { request, key: 'status', value: status })
-      if (wait && !state.currentRequest.showWarningMessage) {
-        // Remove the overlay after a short delay to allow an error to display withtout flickering.
-        setTimeout(() => {
-          commit('SET_WAITING', false)
-        }, 100)
-      }
-    },
-
-    DISPATCH_MESSAGE({ state, commit, dispatch }, { request, messages }) {
-      for (const type in messages) {
-        const message = {
-          text: messages[type].replaceAll('\n', '<br>'),
-          color: type === 'error' ? 'danger' : type,
-        }
-        let progressBar = message.text.match(/^\[#*\+*\.*\] > /)
-        if (progressBar) {
-          progressBar = progressBar[0]
-          message.text = message.text.replace(progressBar, '')
-          const progress = { '#': 0, '+': 0, '.': 0 }
-          for (const char of progressBar) {
-            if (char in progress) progress[char] += 1
-          }
-          commit('UPDATE_REQUEST', {
-            request,
-            key: 'progress',
-            value: Object.values(progress),
-          })
-        }
-        if (message.text) {
-          // To avoid rendering lag issues, limit the flow of websocket messages to batches of 50ms.
-          if (state.historyTimer === null) {
-            state.historyTimer = setTimeout(() => {
-              commit('UPDATE_DISPLAYED_MESSAGES', { request })
-            }, 50)
-          }
-          commit('ADD_TEMP_MESSAGE', { request, message, type })
-        }
-      }
-    },
-
     HANDLE_ERROR({ commit, dispatch }, error) {
       if (error.code === 401) {
         // Unauthorized
@@ -423,7 +258,6 @@ export default {
     connected: (state) => state.connected,
     yunohost: (state) => state.yunohost,
     error: (state) => state.error,
-    waiting: (state) => state.waiting,
     reconnecting: (state) => state.reconnecting,
     history: (state) => state.history,
     lastAction: (state) => state.history[state.history.length - 1],

From 9f8ee2f2508935fe6387727040d9f128b6b7f89a Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 16:38:55 +0200
Subject: [PATCH 131/275] refactor: APIError handling

---
 app/src/api/errors.ts              | 13 +++----
 app/src/api/handlers.ts            | 37 ++------------------
 app/src/api/index.ts               |  2 +-
 app/src/composables/useRequests.ts | 44 +++++++++++++++++++++++-
 app/src/main.ts                    | 34 ++++++++++++++-----
 app/src/router/index.ts            |  9 +++--
 app/src/store/info.ts              | 54 ------------------------------
 7 files changed, 84 insertions(+), 109 deletions(-)

diff --git a/app/src/api/errors.ts b/app/src/api/errors.ts
index 7c0056eca..9b8c7d092 100644
--- a/app/src/api/errors.ts
+++ b/app/src/api/errors.ts
@@ -3,15 +3,16 @@
  * @module api/errors
  */
 
+import type { APIRequest } from '@/composables/useRequests'
 import i18n from '@/i18n'
-import type { APIErrorData, RequestMethod, APIRequest } from './api'
+import type { APIErrorData, RequestMethod } from './api'
 
 class APIError extends Error {
   name = 'APIError'
   code: number
   status: string
   method: RequestMethod
-  request: APIRequest
+  requestId: string
   path: string
 
   constructor(
@@ -28,7 +29,7 @@ class APIError extends Error {
     this.code = status
     this.status = statusText
     this.method = request.method
-    this.request = request
+    this.requestId = request.id
     this.path = urlObj.pathname + urlObj.search
   }
 
@@ -152,13 +153,13 @@ const errors = {
 }
 
 export {
-  errors as default,
-  APIError,
-  APIErrorLog,
   APIBadRequestError,
   APIConnexionError,
+  APIError,
+  APIErrorLog,
   APIInternalError,
   APINotFoundError,
   APINotRespondingError,
   APIUnauthorizedError,
+  errors as default,
 }
diff --git a/app/src/api/handlers.ts b/app/src/api/handlers.ts
index 48fa79702..68e3a2356 100644
--- a/app/src/api/handlers.ts
+++ b/app/src/api/handlers.ts
@@ -3,7 +3,7 @@
  * @module api/handlers
  */
 
-import errors, { APIError } from '@/api/errors'
+import errors from '@/api/errors'
 import {
   STATUS_VARIANT,
   type APIRequest,
@@ -98,39 +98,6 @@ export function getError(
     errorCode = 'log'
   }
 
-  // This error can be catched by a view otherwise it will be catched by the `onUnhandledAPIError` handler.
+  // This error can be catched by a view otherwise it will be catched by the global error handler.
   return new errors[errorCode](request, response, errorData)
 }
-
-/**
- * If an APIError is not catched by a view it will be dispatched to the store so the
- * error can be displayed in the error modal.
- */
-export function onUnhandledAPIError(error: APIError) {
-  error.log()
-  store.dispatch('HANDLE_ERROR', error)
-}
-
-/**
- * Global catching of unhandled promise's rejections.
- * Those errors (thrown or rejected from inside a promise) can't be catched by
- * `window.onerror`.
- */
-export function registerGlobalErrorHandlers() {
-  window.addEventListener('unhandledrejection', (e) => {
-    const error = e.reason
-    if (error instanceof APIError) {
-      onUnhandledAPIError(error)
-      // Seems like there's a bug in Firefox and the error logging in not prevented.
-      e.preventDefault()
-    }
-  })
-
-  // Keeping this in case it is needed.
-
-  // Global catching of errors occuring inside vue components.
-  // Vue.config.errorHandler = (err, vm, info) => {}
-
-  // Global catching of regular js errors.
-  // window.onerror = (message, source, lineno, colno, error) => {}
-}
diff --git a/app/src/api/index.ts b/app/src/api/index.ts
index b959b5a53..3659bfe2e 100644
--- a/app/src/api/index.ts
+++ b/app/src/api/index.ts
@@ -1,2 +1,2 @@
 export { default, objectToParams } from './api'
-export { getError, registerGlobalErrorHandlers } from './handlers'
+export { getError } from './handlers'
diff --git a/app/src/composables/useRequests.ts b/app/src/composables/useRequests.ts
index e1cd9e8c1..7848e2be4 100644
--- a/app/src/composables/useRequests.ts
+++ b/app/src/composables/useRequests.ts
@@ -1,11 +1,13 @@
 import { createGlobalState } from '@vueuse/core'
 import { v4 as uuid } from 'uuid'
 import { computed, reactive, shallowRef } from 'vue'
+import { useRouter } from 'vue-router'
 
 import type { APIQuery, RequestMethod } from '@/api/api'
-import { type APIError } from '@/api/errors'
+import { APIErrorLog, type APIError } from '@/api/errors'
 import { isObjectLiteral } from '@/helpers/commons'
 import i18n from '@/i18n'
+import store from '@/store'
 import type { StateVariant } from '@/types/commons'
 
 export type RequestStatus = 'pending' | 'success' | 'warning' | 'error'
@@ -47,6 +49,8 @@ export const STATUS_VARIANT = {
 } as const
 
 export const useRequests = createGlobalState(() => {
+  const router = useRouter()
+
   const requests = shallowRef<APIRequest[]>([])
   const currentRequest = computed(() => {
     return requests.value.find((r) => r.showModal)
@@ -146,6 +150,41 @@ export const useRequests = createGlobalState(() => {
     }, 350)
   }
 
+  function handleAPIError(err: APIError) {
+    err.log()
+    if (err.code === 401) {
+      // Unauthorized
+      store.dispatch('DISCONNECT')
+    } else if (err instanceof APIErrorLog) {
+      // Errors that have produced logs
+      router.push({ name: 'tool-log', params: { name: err.logRef } })
+    } else {
+      const request = requests.value.find((r) => r.id === err.requestId)!
+      request.err = err
+    }
+  }
+
+  function showModal(requestId: APIRequest['id']) {
+    const request = requests.value.find((r) => r.id === requestId)!
+    request.showModal = true
+  }
+
+  function dismissModal(requestId: APIRequest['id']) {
+    const request = requests.value.find((r) => r.id === requestId)!
+
+    if (request.err && request.initial) {
+      // In case of an initial request (data that is needed by a view to render itself),
+      // try to go back so the user doesn't get stuck at a never ending skeleton view.
+      if (history.length > 2) {
+        history.back()
+      } else {
+        // if the url was opened in a new tab, return to home
+        router.push({ name: 'home' })
+      }
+    }
+    request.showModal = false
+  }
+
   return {
     requests,
     historyList,
@@ -153,5 +192,8 @@ export const useRequests = createGlobalState(() => {
     locked,
     startRequest,
     endRequest,
+    handleAPIError,
+    dismissModal,
+    showModal,
   }
 })
diff --git a/app/src/main.ts b/app/src/main.ts
index 42ea1428e..92e1252d0 100644
--- a/app/src/main.ts
+++ b/app/src/main.ts
@@ -1,15 +1,15 @@
-import { createApp, type Component } from 'vue'
-import App from './App.vue'
+import { watchOnce } from '@vueuse/core'
 import { createBootstrap } from 'bootstrap-vue-next'
+import { createApp, type Component } from 'vue'
 import { VueShowdownPlugin } from 'vue-showdown'
-import { watchOnce } from '@vueuse/core'
 
+import App from './App.vue'
+import { APIError } from './api/errors'
+import { useRequests } from './composables/useRequests'
 import { useSettings } from './composables/useSettings'
-import store from './store'
-import router from './router'
 import i18n from './i18n'
-
-import { registerGlobalErrorHandlers } from './api'
+import router from './router'
+import store from './store'
 
 import '@/scss/main.scss'
 
@@ -17,6 +17,24 @@ type Module = { default: Component }
 
 const app = createApp(App)
 
+// Error catching
+function onError(err: unknown) {
+  if (err instanceof APIError) {
+    useRequests().handleAPIError(err)
+  } else {
+    // FIXME Error modal for internal code error?
+    throw err
+  }
+}
+app.config.errorHandler = (err) => onError(err)
+window.addEventListener('unhandledrejection', (e) => {
+  // Global catching of unhandled promise's rejections.
+  // Those errors (thrown or rejected from inside a promise) can't be catched by
+  // `window.onerror` or vue.
+  e.preventDefault()
+  onError(e.reason)
+})
+
 app.use(store)
 app.use(router)
 app.use(i18n)
@@ -46,7 +64,5 @@ Object.values(globalComponentsModules).forEach(
   },
 )
 
-registerGlobalErrorHandlers()
-
 // Load default locales translations files then mount the app
 watchOnce(useSettings().localesLoaded, () => app.mount('#app'))
diff --git a/app/src/router/index.ts b/app/src/router/index.ts
index a824634b0..95b7e1e95 100644
--- a/app/src/router/index.ts
+++ b/app/src/router/index.ts
@@ -1,8 +1,9 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 
+import { useRequests } from '@/composables/useRequests'
 import { useSettings } from '@/composables/useSettings'
-import routes from './routes'
 import store from '@/store'
+import routes from './routes'
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -32,8 +33,10 @@ router.beforeEach((to, from, next) => {
     updateTransitionName({ to, from })
   }
 
-  if (store.getters.error) {
-    store.dispatch('DISMISS_ERROR', true)
+  const { currentRequest, dismissModal } = useRequests()
+  if (currentRequest.value?.err) {
+    // In case an error is still present after code route change
+    dismissModal(currentRequest.value.id)
   }
 
   if (to.name === 'post-install' && store.getters.installed) {
diff --git a/app/src/store/info.ts b/app/src/store/info.ts
index 3bc2d81e8..97dc15c0c 100644
--- a/app/src/store/info.ts
+++ b/app/src/store/info.ts
@@ -10,7 +10,6 @@ export default {
     connected: localStorage.getItem('connected') === 'true', // Boolean
     yunohost: null, // Object { version, repo }
     reconnecting: null, // null|Object { attemps, delay, initialDelay }
-    error: null, // null || request
     routerKey: undefined, // String if current route has params
     breadcrumb: [], // Array of routes
     transitionName: null, // String of CSS class if transitions are enabled
@@ -34,14 +33,6 @@ export default {
       state.reconnecting = args
     },
 
-    SET_ERROR(state, request) {
-      if (request) {
-        state.error = request
-      } else {
-        state.error = null
-      }
-    },
-
     SET_ROUTER_KEY(state, key) {
       state.routerKey = key
     },
@@ -134,48 +125,6 @@ export default {
       })
     },
 
-    HANDLE_ERROR({ commit, dispatch }, error) {
-      if (error.code === 401) {
-        // Unauthorized
-        dispatch('DISCONNECT')
-      } else if (error.logRef) {
-        // Errors that have produced logs
-        router.push({ name: 'tool-log', params: { name: error.logRef } })
-      } else {
-        // The request is temporarely stored in the error for reference, but we reverse
-        // the ownership to stay generic.
-        const request = error.request
-        delete error.request
-        request.error = error
-        // Display the error in a modal on the current view.
-        commit('SET_ERROR', request)
-      }
-    },
-
-    REVIEW_ERROR({ commit }, request) {
-      request.review = true
-      commit('SET_ERROR', request)
-    },
-
-    DISMISS_ERROR({ commit, state }, { initial, review = false }) {
-      if (initial && !review) {
-        // In case of an initial request (data that is needed by a view to render itself),
-        // try to go back so the user doesn't get stuck at a never ending skeleton view.
-        if (history.length > 2) {
-          history.back()
-        } else {
-          // if the url was opened in a new tab, return to home
-          router.push({ name: 'home' })
-        }
-      }
-      commit('SET_ERROR', null)
-    },
-
-    DISMISS_WARNING({ commit, state }, request) {
-      commit('SET_WAITING', false)
-      delete request.showWarningMessage
-    },
-
     UPDATE_ROUTER_KEY({ commit }, { to, from }) {
       if (isEmptyValue(to.params)) {
         commit('SET_ROUTER_KEY', undefined)
@@ -257,11 +206,8 @@ export default {
     installed: (state) => state.installed,
     connected: (state) => state.connected,
     yunohost: (state) => state.yunohost,
-    error: (state) => state.error,
     reconnecting: (state) => state.reconnecting,
     history: (state) => state.history,
-    lastAction: (state) => state.history[state.history.length - 1],
-    currentRequest: (state) => state.currentRequest,
     routerKey: (state) => state.routerKey,
     breadcrumb: (state) => state.breadcrumb,
     transitionName: (state) => state.transitionName,

From aabd7d083186b39dd07b06ac0e7bf062a6a4fa77 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 16:51:22 +0200
Subject: [PATCH 132/275] refactor: reconnection handling

---
 app/src/api/api.ts                 | 12 ++++++++++--
 app/src/composables/useRequests.ts | 11 ++++++++++-
 app/src/store/info.ts              | 18 ++++++------------
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/app/src/api/api.ts b/app/src/api/api.ts
index ded3f3e21..2655c126e 100644
--- a/app/src/api/api.ts
+++ b/app/src/api/api.ts
@@ -1,4 +1,8 @@
-import { useRequests, type APIRequestAction } from '@/composables/useRequests'
+import {
+  useRequests,
+  type APIRequestAction,
+  type ReconnectingArgs,
+} from '@/composables/useRequests'
 import { useSettings } from '@/composables/useSettings'
 import type { Obj } from '@/types/commons'
 import { APIUnauthorizedError, type APIError } from './errors'
@@ -233,7 +237,11 @@ export default {
    * @returns Promise that resolve yunohost version infos
    * @throws Throw an `APIError` or subclass depending on server response
    */
-  tryToReconnect({ attemps = 5, delay = 2000, initialDelay = 0 } = {}) {
+  tryToReconnect({
+    attemps = 5,
+    delay = 2000,
+    initialDelay = 0,
+  }: ReconnectingArgs = {}) {
     return new Promise((resolve, reject) => {
       function reconnect(n: number) {
         store
diff --git a/app/src/composables/useRequests.ts b/app/src/composables/useRequests.ts
index 7848e2be4..7d6a08f75 100644
--- a/app/src/composables/useRequests.ts
+++ b/app/src/composables/useRequests.ts
@@ -1,6 +1,6 @@
 import { createGlobalState } from '@vueuse/core'
 import { v4 as uuid } from 'uuid'
-import { computed, reactive, shallowRef } from 'vue'
+import { computed, reactive, ref, shallowRef } from 'vue'
 import { useRouter } from 'vue-router'
 
 import type { APIQuery, RequestMethod } from '@/api/api'
@@ -40,6 +40,13 @@ export type RequestMessage = {
   variant: StateVariant
 }
 
+export type ReconnectingArgs = {
+  attemps?: number
+  origin?: string
+  initialDelay?: number
+  delay?: number
+}
+
 export const STATUS_VARIANT = {
   pending: 'primary',
   success: 'success',
@@ -52,6 +59,7 @@ export const useRequests = createGlobalState(() => {
   const router = useRouter()
 
   const requests = shallowRef<APIRequest[]>([])
+  const reconnecting = ref<ReconnectingArgs | undefined>()
   const currentRequest = computed(() => {
     return requests.value.find((r) => r.showModal)
   })
@@ -189,6 +197,7 @@ export const useRequests = createGlobalState(() => {
     requests,
     historyList,
     currentRequest,
+    reconnecting,
     locked,
     startRequest,
     endRequest,
diff --git a/app/src/store/info.ts b/app/src/store/info.ts
index 97dc15c0c..17b95b944 100644
--- a/app/src/store/info.ts
+++ b/app/src/store/info.ts
@@ -1,7 +1,8 @@
-import router from '@/router'
-import i18n from '@/i18n'
 import api from '@/api'
-import { timeout, isEmptyValue } from '@/helpers/commons'
+import { useRequests, type ReconnectingArgs } from '@/composables/useRequests'
+import { isEmptyValue, timeout } from '@/helpers/commons'
+import i18n from '@/i18n'
+import router from '@/router'
 
 export default {
   state: {
@@ -9,7 +10,6 @@ export default {
     installed: null,
     connected: localStorage.getItem('connected') === 'true', // Boolean
     yunohost: null, // Object { version, repo }
-    reconnecting: null, // null|Object { attemps, delay, initialDelay }
     routerKey: undefined, // String if current route has params
     breadcrumb: [], // Array of routes
     transitionName: null, // String of CSS class if transitions are enabled
@@ -29,10 +29,6 @@ export default {
       state.yunohost = yunohost
     },
 
-    SET_RECONNECTING(state, args) {
-      state.reconnecting = args
-    },
-
     SET_ROUTER_KEY(state, key) {
       state.routerKey = key
     },
@@ -114,9 +110,9 @@ export default {
       return api.get('logout')
     },
 
-    TRY_TO_RECONNECT({ commit }, args = {}) {
+    TRY_TO_RECONNECT({ commit }, args?: ReconnectingArgs) {
       // FIXME This is very ugly arguments forwarding, will use proper component way of doing this when switching to Vue 3 (teleport)
-      commit('SET_RECONNECTING', args)
+      useRequests().reconnecting.value = args
     },
 
     GET_YUNOHOST_INFOS({ commit }) {
@@ -206,8 +202,6 @@ export default {
     installed: (state) => state.installed,
     connected: (state) => state.connected,
     yunohost: (state) => state.yunohost,
-    reconnecting: (state) => state.reconnecting,
-    history: (state) => state.history,
     routerKey: (state) => state.routerKey,
     breadcrumb: (state) => state.breadcrumb,
     transitionName: (state) => state.transitionName,

From ab2c8a96918af9b2a06c3ab2f174365eb0474ab5 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 16:57:51 +0200
Subject: [PATCH 133/275] chore: move requests modals to /components

---
 .../modals/ModalError.vue}                          |  0
 .../modals/ModalOverlay.vue}                        |  0
 .../modals/ModalReconnecting.vue}                   |  0
 .../modals/ModalWaiting.vue}                        |  0
 .../modals/ModalWarning.vue}                        |  0
 app/src/components/modals/index.ts                  | 13 +++++++++++++
 app/src/views/_partials/index.ts                    |  7 -------
 7 files changed, 13 insertions(+), 7 deletions(-)
 rename app/src/{views/_partials/ErrorDisplay.vue => components/modals/ModalError.vue} (100%)
 rename app/src/{views/_partials/ViewLockOverlay.vue => components/modals/ModalOverlay.vue} (100%)
 rename app/src/{views/_partials/ReconnectingDisplay.vue => components/modals/ModalReconnecting.vue} (100%)
 rename app/src/{views/_partials/WaitingDisplay.vue => components/modals/ModalWaiting.vue} (100%)
 rename app/src/{views/_partials/WarningDisplay.vue => components/modals/ModalWarning.vue} (100%)
 create mode 100644 app/src/components/modals/index.ts

diff --git a/app/src/views/_partials/ErrorDisplay.vue b/app/src/components/modals/ModalError.vue
similarity index 100%
rename from app/src/views/_partials/ErrorDisplay.vue
rename to app/src/components/modals/ModalError.vue
diff --git a/app/src/views/_partials/ViewLockOverlay.vue b/app/src/components/modals/ModalOverlay.vue
similarity index 100%
rename from app/src/views/_partials/ViewLockOverlay.vue
rename to app/src/components/modals/ModalOverlay.vue
diff --git a/app/src/views/_partials/ReconnectingDisplay.vue b/app/src/components/modals/ModalReconnecting.vue
similarity index 100%
rename from app/src/views/_partials/ReconnectingDisplay.vue
rename to app/src/components/modals/ModalReconnecting.vue
diff --git a/app/src/views/_partials/WaitingDisplay.vue b/app/src/components/modals/ModalWaiting.vue
similarity index 100%
rename from app/src/views/_partials/WaitingDisplay.vue
rename to app/src/components/modals/ModalWaiting.vue
diff --git a/app/src/views/_partials/WarningDisplay.vue b/app/src/components/modals/ModalWarning.vue
similarity index 100%
rename from app/src/views/_partials/WarningDisplay.vue
rename to app/src/components/modals/ModalWarning.vue
diff --git a/app/src/components/modals/index.ts b/app/src/components/modals/index.ts
new file mode 100644
index 000000000..0da6d6d34
--- /dev/null
+++ b/app/src/components/modals/index.ts
@@ -0,0 +1,13 @@
+import ModalOverlay from './ModalOverlay.vue'
+import ModalError from './ModalError.vue'
+import ModalWaiting from './ModalWaiting.vue'
+import ModalReconnecting from './ModalReconnecting.vue'
+import ModalWarning from './ModalWarning.vue'
+
+export {
+  ModalOverlay,
+  ModalError,
+  ModalWaiting,
+  ModalReconnecting,
+  ModalWarning,
+}
diff --git a/app/src/views/_partials/index.ts b/app/src/views/_partials/index.ts
index 53764915c..bcb3181ab 100644
--- a/app/src/views/_partials/index.ts
+++ b/app/src/views/_partials/index.ts
@@ -1,9 +1,2 @@
-export { default as ErrorDisplay } from './ErrorDisplay.vue'
-export { default as WarningDisplay } from './WarningDisplay.vue'
-export { default as WaitingDisplay } from './WaitingDisplay.vue'
-export { default as ReconnectingDisplay } from './ReconnectingDisplay.vue'
-
 export { default as HistoryConsole } from './HistoryConsole.vue'
-export { default as ViewLockOverlay } from './ViewLockOverlay.vue'
-
 export { default as DomainForm } from './DomainForm.vue'

From e553925e9a62e171ed8a121946433c37eeb7384c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 17:05:33 +0200
Subject: [PATCH 134/275] refactor: update QueryHeader component to new
 requests

---
 app/src/components/QueryHeader.vue | 157 ++++++++++-------------------
 1 file changed, 55 insertions(+), 102 deletions(-)

diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index 5d79f45a4..d76cd571f 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -1,145 +1,98 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useStore } from 'vuex'
+import { computed, toRefs } from 'vue'
 
-import type { Obj } from '@/types/commons'
+import type { APIRequest } from '@/composables/useRequests'
+import { STATUS_VARIANT } from '@/composables/useRequests'
 
-const props = withDefaults(
-  defineProps<{
-    request: Obj
-    statusSize?: string
-    showTime?: boolean
-    showError?: boolean
-  }>(),
-  {
-    statusSize: '',
-    showTime: false,
-    showError: false,
-  },
-)
+const props = defineProps<{
+  request: APIRequest
+  type: 'overlay' | 'history'
+}>()
 
-const store = useStore()
+const emit = defineEmits<{ showError: [id: string] }>()
 
-const color = computed(() => {
-  const statuses = {
-    pending: 'primary',
-    success: 'success',
-    warning: 'warning',
-    error: 'danger',
-  }
-  return statuses[props.request.status]
-})
-
-const errorsCount = computed(() => {
-  return props.request.messages.filter(({ type }) => type === 'danger').length
-})
-
-const warningsCount = computed(() => {
-  return props.request.messages.filter(({ type }) => type === 'warning').length
+const statusVariant = computed(() => STATUS_VARIANT[props.request.status])
+const { errors, warnings } = toRefs(
+  props.request.action || { errors: 0, warnings: 0 },
+)
+const hour = computed(() => {
+  return new Date(props.request.date).toLocaleTimeString()
 })
-
-function reviewError() {
-  store.dispatch('REVIEW_ERROR', props.request)
-}
-
-function hour(date: Date) {
-  return new Date(date).toLocaleTimeString()
-}
 </script>
 
 <template>
-  <div class="query-header w-100">
-    <!-- STATUS -->
+  <div class="query-header d-flex align-items-center w-100">
     <span
       class="status"
-      :class="['bg-' + color, statusSize]"
-      :aria-label="$t('api.query_status.' + request.status)"
+      :class="[`bg-${statusVariant}`, type]"
+      :aria-label="$t(`api.query_status.${request.status}`)"
     />
 
-    <!-- REQUEST DESCRIPTION -->
-    <strong class="request-desc">
+    <!-- tabindex 0 on title for focus-trap when no tabable elements -->
+    <strong :tabindex="type === 'overlay' ? 0 : undefined">
       {{ request.humanRoute }}
     </strong>
 
-    <div v-if="request.errors || request.warnings">
-      <!-- WEBSOCKET ERRORS COUNT -->
-      <span class="count" v-if="request.errors">
-        {{ request.errors }}<YIcon iname="bug" class="text-danger ms-1" />
+    <div v-if="errors || warnings">
+      <span v-if="errors" class="ms-2">
+        {{ errors }}<YIcon iname="bug" class="text-danger ms-1" />
       </span>
-      <!-- WEBSOCKET WARNINGS COUNT -->
-      <span class="count" v-if="request.warnings">
-        {{ request.warnings
-        }}<YIcon iname="warning" class="text-warning ms-1" />
+      <span v-if="warnings" class="ms-2">
+        {{ warnings }}<YIcon iname="warning" class="text-warning ms-1" />
       </span>
     </div>
 
-    <!-- VIEW ERROR BUTTON -->
-    <BButton
-      v-if="showError && request.error"
-      size="sm"
-      pill
-      class="error-btn ms-auto py-0"
-      variant="danger"
-      @click="reviewError"
-    >
-      <small v-t="'api_error.view_error'" />
-    </BButton>
-
-    <!-- TIME DISPLAY -->
-    <time
-      v-if="showTime"
-      :datetime="hour(request.date)"
-      :class="request.error ? 'ms-2' : 'ms-auto'"
-    >
-      {{ hour(request.date) }}
-    </time>
+    <template v-if="type === 'history'">
+      <BButton
+        v-if="request.err"
+        size="sm"
+        pill
+        class="error-btn ms-auto py-0"
+        variant="danger"
+        @click.stop="emit('showError', request.id)"
+      >
+        <small v-t="'api_error.view_error'" />
+      </BButton>
+
+      <time :datetime="hour" :class="request.err ? 'ms-2' : 'ms-auto'">
+        {{ hour }}
+      </time>
+    </template>
   </div>
 </template>
 
 <style lang="scss" scoped>
-div {
-  display: flex;
-  align-items: center;
+.query-header {
   font-size: $font-size-sm;
 }
 
-.error-btn {
-  height: 1.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 70px;
-}
-
 .status {
   display: inline-block;
   border-radius: 50%;
-  width: 0.75rem;
-  min-width: 0.75rem;
-  height: 0.75rem;
-  margin-right: 0.25rem;
 
-  &.lg {
+  &.history {
+    width: 0.75rem;
+    height: 0.75rem;
+    margin-right: 0.5rem;
+  }
+
+  &.overlay {
     width: 1rem;
     height: 1rem;
     margin-right: 0.5rem;
   }
 }
 
-time {
-  min-width: 3.5rem;
-  text-align: right;
-}
-
-.count {
+.error-btn {
+  height: 1.25rem;
   display: flex;
   align-items: center;
-  margin-left: 0.5rem;
+  justify-content: center;
+  min-width: 70px;
 }
 
-@include media-breakpoint-down(sm) {
-  .xs-hide .request-desc {
-    display: none;
-  }
+time {
+  min-width: 3rem;
+  text-align: right;
 }
 </style>

From 6ad9728ef464ab646a1b789f180cd5e74bc9e91d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 17:06:32 +0200
Subject: [PATCH 135/275] refactor: update YSpinner to use useSettings

---
 app/src/components/globals/YSpinner.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/components/globals/YSpinner.vue b/app/src/components/globals/YSpinner.vue
index 9c55c5eb1..611aea498 100644
--- a/app/src/components/globals/YSpinner.vue
+++ b/app/src/components/globals/YSpinner.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useStoreGetters } from '@/store/utils'
+import { useSettings } from '@/composables/useSettings'
 
-const { spinner } = useStoreGetters()
+const { spinner } = useSettings()
 </script>
 
 <template>

From fa22d11beeb316f4f4c07fbf0b685a74ad6b98c3 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 17:10:08 +0200
Subject: [PATCH 136/275] refactor: update MessageListGroup to new requests
 messages

---
 app/overrides.d.ts                            |  6 ++
 app/src/components/MessageListGroup.vue       | 59 ++++++++++---------
 app/src/components/globals/YListGroupItem.vue |  5 +-
 app/src/helpers/yunohostArguments.ts          |  1 +
 4 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/app/overrides.d.ts b/app/overrides.d.ts
index 4287f72eb..a730147d2 100644
--- a/app/overrides.d.ts
+++ b/app/overrides.d.ts
@@ -15,3 +15,9 @@ declare module 'vue-router' {
     breadcrumb?: string[]
   }
 }
+
+declare module 'bootstrap-vue-next' {
+  interface BaseColorVariant {
+    best: unknown
+  }
+}
diff --git a/app/src/components/MessageListGroup.vue b/app/src/components/MessageListGroup.vue
index 98355c97e..6e49d278a 100644
--- a/app/src/components/MessageListGroup.vue
+++ b/app/src/components/MessageListGroup.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { BListGroup, ColorVariant } from 'bootstrap-vue-next'
-import { computed, nextTick, watch, ref } from 'vue'
+import { watchThrottled } from '@vueuse/core'
+import type { BListGroup } from 'bootstrap-vue-next'
+import { nextTick, ref } from 'vue'
 
-type ActionMessage = { color: ColorVariant; text: string }
+import type { RequestMessage } from '@/composables/useRequests'
 
 const props = withDefaults(
   defineProps<{
-    messages: ActionMessage[]
+    messages: RequestMessage[]
     fixedHeight?: boolean
     bordered?: boolean
     autoScroll?: boolean
@@ -20,34 +21,35 @@ const props = withDefaults(
   },
 )
 
-const auto = ref(true)
 const rootElem = ref<InstanceType<typeof BListGroup> | null>(null)
 
-if (props.autoScroll) {
-  watch(() => props.messages, scrollToEnd, { deep: true })
-}
+const auto = ref(props.autoScroll)
+const reducedMessages = ref<RequestMessage[]>([...props.messages])
 
-const reducedMessages = computed(() => {
-  const len = props.messages.length
-  if (!props.limit || len <= props.limit) {
-    return props.messages
-  }
-  return props.messages.slice(len - props.limit)
-})
+watchThrottled(
+  () => props.messages,
+  (messages) => {
+    const len = messages.length
+    if (!props.limit || len <= props.limit) {
+      reducedMessages.value = [...messages]
+    } else {
+      reducedMessages.value = messages.slice(len - props.limit)
+    }
+    if (auto.value) nextTick(scrollToEnd)
+  },
+  { throttle: 300, deep: true },
+)
 
 function scrollToEnd() {
-  if (!auto.value) return
-  nextTick(() => {
-    rootElem.value!.$el.scrollTo(
-      0,
-      rootElem.value!.$el.lastElementChild.offsetTop,
-    )
-  })
+  const elem = rootElem.value?.$el
+  elem?.scrollTo(0, elem.lastElementChild.offsetTop)
 }
 
-function onScroll(e: Event) {
-  const target = e.target as HTMLElement
-  auto.value = target.scrollHeight === target.scrollTop + target.clientHeight
+function onScroll() {
+  if (!props.autoScroll) return
+  const elem = rootElem.value!.$el
+  const { scrollHeight, scrollTop, clientHeight } = elem
+  auto.value = scrollHeight === scrollTop + clientHeight
 }
 </script>
 <template>
@@ -59,14 +61,13 @@ function onScroll(e: Event) {
   >
     <YListGroupItem
       v-if="limit && messages.length > limit"
-      variant="info"
       v-t="'api.partial_logs'"
+      variant="info"
     />
-
     <YListGroupItem
-      v-for="({ color, text }, i) in reducedMessages"
+      v-for="({ variant, text }, i) in reducedMessages"
       :key="i"
-      :variant="color"
+      :variant="variant"
       size="xs"
     >
       <span v-html="text" />
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index 73f8c080e..b0d5e8092 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -10,7 +10,7 @@ const props = withDefaults(
     icon?: string
     noIcon?: boolean
     noStatus?: boolean
-    size?: Breakpoint
+    size?: Breakpoint | 'xs'
     faded?: boolean
   }>(),
   {
@@ -56,7 +56,6 @@ const class_ = computed(() => {
 
   &-status {
     width: 2rem;
-    min-width: 2rem;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -105,7 +104,7 @@ const class_ = computed(() => {
     }
 
     .yuno-list-group-item-content {
-      color: $black;
+      // color: $black;
     }
   }
 
diff --git a/app/src/helpers/yunohostArguments.ts b/app/src/helpers/yunohostArguments.ts
index 0dad0202f..dae9ad90a 100644
--- a/app/src/helpers/yunohostArguments.ts
+++ b/app/src/helpers/yunohostArguments.ts
@@ -20,6 +20,7 @@ export const DEFAULT_STATUS_ICON = {
   info: 'info',
   light: null,
   dark: null,
+  best: null,
 }
 
 // FORMAT FROM CORE

From 4979058f546b389b7c040590ad6f7807ad6198ae Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 17:13:26 +0200
Subject: [PATCH 137/275] refactor: update HistoryConsole to new request
 messages + use accordion

---
 app/src/scss/main.scss                     |   3 +-
 app/src/views/_partials/HistoryConsole.vue | 125 ++++++++-------------
 2 files changed, 49 insertions(+), 79 deletions(-)

diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index dbea35074..9c0e05708 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -22,7 +22,7 @@
 @import '~bootstrap/scss/nav';
 @import '~bootstrap/scss/navbar';
 @import '~bootstrap/scss/card';
-// @import "~bootstrap/scss/accordion";
+@import "~bootstrap/scss/accordion";
 @import '~bootstrap/scss/breadcrumb';
 // @import "~bootstrap/scss/pagination";
 @import '~bootstrap/scss/badge';
@@ -273,6 +273,7 @@ code {
 
   [data-bs-theme='dark'] & {
     background-color: $gray-800;
+    color: $gray-400;
   }
 }
 
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index 087dd80d9..dff2aae87 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -1,35 +1,28 @@
 <script setup lang="ts">
-import type { BCard } from 'bootstrap-vue-next'
-import { getCurrentInstance, nextTick, ref } from 'vue'
+import type { BAccordion, BCard } from 'bootstrap-vue-next'
+import { computed, nextTick, ref } from 'vue'
 
 import MessageListGroup from '@/components/MessageListGroup.vue'
 import QueryHeader from '@/components/QueryHeader.vue'
-import { useStoreGetters } from '@/store/utils'
+import { useRequests } from '@/composables/useRequests'
 
-// FIXME prop `value` not used?
-const props = withDefaults(
-  defineProps<{
-    value?: boolean
-    height?: number | string
-  }>(),
-  {
-    value: false,
-    height: 30,
-  },
-)
-
-const { history, lastAction, waiting, error } = useStoreGetters()
+const { historyList, showModal } = useRequests()
 const rootElem = ref<InstanceType<typeof BCard> | null>(null)
-const historyElem = ref<HTMLElement | null>(null)
+const historyElem = ref<InstanceType<typeof BAccordion> | null>(null)
 const open = ref(false)
 
-function scrollToAction(actionIndex: number) {
+const lastAction = computed(() => {
+  return historyList.value[historyList.value.length - 1]
+})
+
+async function scrollToAction(actionIndex: number) {
+  await nextTick()
   const actionCard = rootElem.value!.$el.querySelector(
     '#messages-collapse-' + actionIndex,
   ).parentElement
-  const headerOffset = actionCard.firstElementChild.offsetHeight
+  const headerOffset = actionCard.firstElementChild.offsetHeight - 7
   // Can't use `scrollIntoView()` here since it will also scroll in the main content.
-  historyElem.value!.scrollTop = actionCard.offsetTop - headerOffset
+  historyElem.value!.$el.scrollTop = actionCard.offsetTop - headerOffset
 }
 
 async function onLastActionClick() {
@@ -37,14 +30,13 @@ async function onLastActionClick() {
     open.value = true
     await nextTick()
   }
-  const hElem = historyElem.value!
+  const hElem = historyElem.value!.$el
   const lastActionCard = hElem.lastElementChild as HTMLElement
   const lastCollapsable = lastActionCard.querySelector('.collapse')
 
   if (lastCollapsable && !lastCollapsable.classList.contains('show')) {
-    // FIXME not sure root emits still work with bvn
-    const { emit: rootEmit } = getCurrentInstance()!
-    rootEmit('bv::toggle::collapse', lastCollapsable.id)
+    const btn = lastActionCard.querySelector('.accordion-button') as HTMLElement
+    btn.click()
     // `scrollToAction` will be triggered and will handle the scrolling.
   } else {
     const headerElem = lastActionCard.firstElementChild as HTMLElement
@@ -64,7 +56,7 @@ function onHistoryBarClick(e: MouseEvent) {
   const { nodeName, parentElement } = e.target as HTMLElement
   if (nodeName === 'BUTTON' || parentElement?.nodeName === 'BUTTON') return
 
-  const hElem = historyElem.value!
+  const hElem = historyElem.value!.$el
   let mousePos = e.clientY
 
   const onMouseMove = ({ clientY }: MouseEvent) => {
@@ -142,7 +134,7 @@ function onHistoryBarClick(e: MouseEvent) {
         v-if="lastAction"
         size="sm"
         pill
-        class="ms-auto py-0"
+        class="ms-auto me-2 py-0"
         :variant="open ? 'light' : 'best'"
         @click.prevent="onLastActionClick"
         @keyup.enter.space.prevent="onLastActionClick"
@@ -152,64 +144,43 @@ function onHistoryBarClick(e: MouseEvent) {
       <QueryHeader
         v-if="lastAction"
         :request="lastAction"
-        class="w-auto ms-2 xs-hide"
+        type="overlay"
+        class="w-auto d-none d-sm-flex"
       />
     </BCardHeader>
 
+    <!-- ACTION LIST -->
     <BCollapse id="console-collapse" v-model="open">
-      <div class="accordion" role="tablist" id="history" ref="historyElem">
-        <p v-if="history.length === 0" class="alert m-0 px-2 py-1">
+      <BAccordion id="history" ref="historyElem" flush free>
+        <p v-if="historyList.length === 0" class="alert m-0 px-2 py-1">
           {{ $t('history.is_empty') }}
         </p>
-
-        <!-- ACTION LIST -->
-        <BCard
-          v-for="(action, i) in history"
+        <BAccordionItem
+          v-for="(request, i) in historyList"
+          v-else
+          :id="`messages-collapse-${i}`"
           :key="i"
-          no-body
-          class="rounded-0 rounded-top border-start-0 border-right-0"
+          header-class="sticky-top"
+          button-class="d-flex p-2"
+          header-tag="div"
+          @show="scrollToAction(i)"
         >
-          <!-- ACTION -->
-          <BCardHeader
-            header-tag="header"
-            header-bg-variant="white"
-            class="sticky-top d-flex"
-          >
-            <!-- ACTION DESC -->
+          <template #title>
             <QueryHeader
-              role="tab"
-              v-b-toggle="
-                action.messages.length ? 'messages-collapse-' + i : undefined
-              "
-              :request="action"
-              show-time
-              show-error
+              :request="request"
+              type="history"
+              class="me-2"
+              @show-error="showModal"
             />
-          </BCardHeader>
-
-          <!-- ACTION MESSAGES -->
-          <BCollapse
-            v-if="action.messages.length"
-            :id="'messages-collapse-' + i"
-            accordion="my-accordion"
-            role="tabpanel"
-            @shown="scrollToAction(i)"
-            @hide="scrollToAction(i)"
-          >
-            <MessageListGroup :messages="action.messages" />
-          </BCollapse>
-        </BCard>
-      </div>
+          </template>
+          <MessageListGroup :messages="request.action.messages" />
+        </BAccordionItem>
+      </BAccordion>
     </BCollapse>
   </BCard>
 </template>
 
 <style lang="scss" scoped>
-// reset default style
-.card + .card {
-  margin-top: 0;
-}
-
 .card-header {
   padding: $tooltip-padding-y $tooltip-padding-x;
 }
@@ -247,7 +218,7 @@ function onHistoryBarClick(e: MouseEvent) {
 }
 
 // Hacky disable of collapse animation
-.collapsing {
+:deep(.collapsing) {
   transition: none !important;
   height: auto !important;
   display: block !important;
@@ -262,14 +233,12 @@ function onHistoryBarClick(e: MouseEvent) {
     max-height: none;
   }
 
-  > .card {
-    // reset bootstrap's `overflow: hidden` that prevent sticky headers to work properly.
-    overflow: visible;
-
-    &:first-of-type {
-      // hide first top border that conflicts with the console header's bottom border.
-      margin-top: -1px;
-    }
+  > :deep(.accordion) {
+    // overlap borders
+    margin-top: -1px;
+  }
+  :deep(.accordion-body) {
+    padding: 0;
   }
 
   [aria-controls] {

From 13ce366d9c29e709a07f90b23eabfff1d745634f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 17:14:21 +0200
Subject: [PATCH 138/275] refactor: rework ModalOverlay to new requests

---
 app/src/components/modals/ModalOverlay.vue | 119 +++++++++------------
 1 file changed, 49 insertions(+), 70 deletions(-)

diff --git a/app/src/components/modals/ModalOverlay.vue b/app/src/components/modals/ModalOverlay.vue
index 8c3fbb4fc..6beeed491 100644
--- a/app/src/components/modals/ModalOverlay.vue
+++ b/app/src/components/modals/ModalOverlay.vue
@@ -1,87 +1,66 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import type { APIRequest } from '@/composables/useRequests'
 
-import QueryHeader from '@/components/QueryHeader.vue'
-import { useStoreGetters } from '@/store/utils'
-import { useSettings } from '@/composables/useSettings'
-import {
-  ErrorDisplay,
-  ReconnectingDisplay,
-  WaitingDisplay,
-  WarningDisplay,
-} from '@/views/_partials'
+withDefaults(
+  defineProps<{
+    request: APIRequest
+    hideFooter?: boolean
+  }>(),
+  {
+    hideFooter: true,
+  },
+)
 
-const { dark } = useSettings()
-const { waiting, reconnecting, error, currentRequest } = useStoreGetters()
-const component = computed(() => {
-  const request = currentRequest.value
-  // FIXME should we pass refs or unwrap refs as props?
-  if (error.value) {
-    return { is: ErrorDisplay, request: error.value }
-  } else if (request.showWarningMessage) {
-    return { is: WarningDisplay, request: currentRequest.value }
-  } else if (reconnecting.value) {
-    return { is: ReconnectingDisplay }
-  } else {
-    return { is: WaitingDisplay, request: currentRequest.value }
-  }
-})
+const emit = defineEmits<{
+  dismiss: [value: boolean]
+}>()
+
+defineSlots<{
+  default(props: Record<string, any>): any
+  footer(props: Record<string, any>): any
+}>()
 </script>
 
 <template>
-  <BOverlay
-    :variant="dark ? 'dark' : 'light'"
-    opacity="0.75"
-    no-center
-    :show="waiting || reconnecting || error !== null"
+  <BModal
+    :model-value="true"
+    class="modal-overlay"
+    centered
+    hide-backdrop
+    no-close-on-backdrop
+    no-close-on-esc
+    :hide-footer="hideFooter"
   >
-    <slot name="default" />
+    <template #header>
+      <QueryHeader type="overlay" :request="request" tabindex="0" />
+    </template>
 
-    <template #overlay>
-      <BCard no-body class="card-overlay">
-        <BCardHeader header-bg-variant="white">
-          <QueryHeader :request="error || currentRequest" status-size="lg" />
-        </BCardHeader>
+    <slot name="default" />
 
-        <Component :is="component.is" :request="component.request" />
-      </BCard>
+    <template #footer>
+      <slot name="footer">
+        <BButton
+          v-t="'ok'"
+          variant="light"
+          size="sm"
+          @click="emit('dismiss', true)"
+        />
+      </slot>
     </template>
-  </BOverlay>
+  </BModal>
 </template>
 
-<style lang="scss" scoped>
-// Style for `*Display`'s cards
-.card-overlay {
-  position: sticky;
-  top: 10vh;
-  margin: 0 5%;
-
-  @include media-breakpoint-up(md) {
-    margin: 0 10%;
-  }
-  @include media-breakpoint-up(lg) {
-    margin: 0 15%;
-  }
-
-  :deep(.card-body) {
-    padding: 1.5rem;
-    padding-bottom: 0;
-    max-height: 60vh;
-    overflow-y: auto;
-
-    & > :last-child {
-      margin-bottom: 1.5rem;
-    }
-  }
-
-  :deep(.card-footer) {
+<style lang="scss">
+.modal-overlay {
+  .modal-header {
     padding: 0.5rem 0.75rem;
-    display: flex;
-    justify-content: flex-end;
   }
-
-  .card-header {
-    padding: 0.5rem 0.75rem;
+  &-status {
+    display: inline-block;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
   }
 }
 </style>

From f0bd35e2b1ef927f1baa69cbbde1c55cd3d9d5a2 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 17:14:34 +0200
Subject: [PATCH 139/275] refactor: rework ModalWaiting to new requests

---
 app/src/components/modals/ModalWaiting.vue | 32 ++++++++++------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/app/src/components/modals/ModalWaiting.vue b/app/src/components/modals/ModalWaiting.vue
index 7d142555d..f2592b3ec 100644
--- a/app/src/components/modals/ModalWaiting.vue
+++ b/app/src/components/modals/ModalWaiting.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import MessageListGroup from '@/components/MessageListGroup.vue'
-import type { Obj } from '@/types/commons'
+import ModalOverlay from '@/components/modals/ModalOverlay.vue'
+import type { APIRequest } from '@/composables/useRequests'
 
 const props = defineProps<{
-  request: Obj
+  request: APIRequest
 }>()
 
-const hasMessages = computed(() => {
-  return props.request.messages && props.request.messages.length > 0
+const messages = computed(() => {
+  const messages = props.request.action?.messages
+  return messages?.length ? messages : null
 })
 
 const progress = computed(() => {
-  const progress = props.request.progress
+  const progress = props.request.action?.progress
   if (!progress) return null
   return {
     values: progress,
@@ -23,29 +24,26 @@ const progress = computed(() => {
 </script>
 
 <template>
-  <!-- This card receives style from `ViewLockOverlay` if used inside it -->
-  <BCardBody>
-    <BCardTitle
+  <ModalOverlay :request="request">
+    <h5
+      v-t="messages || progress ? 'api.processing' : 'api.waiting'"
       class="text-center mt-4"
-      v-t="hasMessages ? 'api.processing' : 'api_waiting'"
     />
 
-    <!-- PROGRESS BAR -->
-    <BProgress v-if="progress" class="my-4" :max="progress.max" height=".5rem">
+    <BProgress v-if="progress" :max="progress.max" height=".5rem" class="my-4">
       <BProgressBar variant="success" :value="progress.values[0]" />
       <BProgressBar variant="warning" :value="progress.values[1]" animated />
       <BProgressBar variant="secondary" :value="progress.values[2]" striped />
     </BProgress>
-    <!-- OR SPINNER -->
     <YSpinner v-else class="my-4" />
 
     <MessageListGroup
-      v-if="hasMessages"
-      :messages="request.messages"
+      v-if="messages"
+      auto-scroll
       bordered
       fixed-height
-      auto-scroll
       :limit="100"
+      :messages="messages"
     />
-  </BCardBody>
+  </ModalOverlay>
 </template>

From 519de69d299ca15434185f5fc99d23a9671c8d03 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 17:14:51 +0200
Subject: [PATCH 140/275] refactor: rework ModalWarning to new requests

---
 app/src/components/modals/ModalWarning.vue | 43 ++++++++--------------
 1 file changed, 15 insertions(+), 28 deletions(-)

diff --git a/app/src/components/modals/ModalWarning.vue b/app/src/components/modals/ModalWarning.vue
index 8ec7e721a..bb6af0ae4 100644
--- a/app/src/components/modals/ModalWarning.vue
+++ b/app/src/components/modals/ModalWarning.vue
@@ -1,40 +1,27 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useStore } from 'vuex'
 
-import type { Obj } from '@/types/commons'
+import ModalOverlay from '@/components/modals/ModalOverlay.vue'
+import type { APIRequest } from '@/composables/useRequests'
 
 const props = defineProps<{
-  request: Obj
+  request: APIRequest
 }>()
 
-const store = useStore()
-
-const warning = computed(() => {
-  const messages = props.request.messages
+// FIXME probably doesn't need a computed here
+const warningMessage = computed(() => {
+  const messages = props.request.action!.messages
   return messages[messages.length - 1]
 })
-
-function dismiss() {
-  store.dispatch('DISMISS_WARNING', props.request)
-}
 </script>
-<template>
-  <!-- This card receives style from `ViewLockOverlay` if used inside it -->
-  <div>
-    <BCardBody body-class="alert alert-warning">
-      <div v-html="warning.text" />
-    </BCardBody>
 
-    <BCardFooter footer-bg-variant="warning">
-      <BButton variant="light" size="sm" v-t="'ok'" @click="dismiss" />
-    </BCardFooter>
-  </div>
+<template>
+  <ModalOverlay
+    :request="request"
+    footer-variant="warning"
+    body-variant="warning"
+    :hide-footer="false"
+  >
+    <div v-html="warningMessage.text" />
+  </ModalOverlay>
 </template>
-
-<style lang="scss" scoped>
-.card-body {
-  padding-bottom: 1.5rem !important;
-  margin-bottom: 0;
-}
-</style>

From 24b28b397fdc3f8a44b86a7a6a156b0d712d54f8 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 17:15:04 +0200
Subject: [PATCH 141/275] refactor: rework ModalError to new requests

---
 app/src/components/modals/ModalError.vue | 137 +++++++++--------------
 1 file changed, 53 insertions(+), 84 deletions(-)

diff --git a/app/src/components/modals/ModalError.vue b/app/src/components/modals/ModalError.vue
index 48a4bd038..7a7dd531c 100644
--- a/app/src/components/modals/ModalError.vue
+++ b/app/src/components/modals/ModalError.vue
@@ -1,89 +1,58 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useStore } from 'vuex'
-
-import MessageListGroup from '@/components/MessageListGroup.vue'
-import type { Obj } from '@/types/commons'
-
-const props = withDefaults(
-  defineProps<{
-    request: Obj
-  }>(),
-  {},
-)
-
-const store = useStore()
-
-const error = computed(() => {
-  return props.request.error
-})
-
-const messages = computed(() => {
-  const messages = props.request.messages
-  if (messages && messages.length > 0) return messages
-  return null
-})
-
-function dismiss() {
-  store.dispatch('DISMISS_ERROR', props.request)
-}
+import { APIError, APIInternalError } from '@/api/errors'
+import ModalOverlay from '@/components/modals/ModalOverlay.vue'
+import type { APIRequest } from '@/composables/useRequests'
+
+const props = defineProps<{
+  request: APIRequest & { err: APIError }
+}>()
+
+const { err, messages, traceback } = (() => {
+  const { err, action } = props.request
+  return {
+    err: err,
+    messages: action?.messages,
+    traceback: err instanceof APIInternalError ? err.traceback : null,
+  }
+})()
 </script>
 
 <template>
-  <!-- This card receives style from `ViewLockOverlay` if used inside it -->
-  <div>
-    <BCardBody>
-      <BCardTitle v-t="'api_errors_titles.' + error.name" />
-
-      <em v-t="'api_error.sorry'" />
-
-      <div class="alert alert-info my-3">
-        <span v-html="$t('api_error.help')" />
-        <br />{{ $t('api_error.info') }}
-      </div>
-
-      <!-- FIXME USE DD DL DT -->
-      <p class="m-0">
-        <strong v-t="'error'" />:
-        <code>"{{ error.code }}" {{ error.status }}</code>
-      </p>
-      <p>
-        <strong v-t="'action'" />:
-        <code>"{{ error.method }}" {{ error.path }}</code>
-      </p>
-
-      <p>
-        <strong v-t="'api_error.error_message'" />
-        <BAlert :model-value="true" class="mt-2" variant="danger">
-          <div v-html="error.message" />
-        </BAlert>
-      </p>
-
-      <template v-if="error.traceback">
-        <p>
-          <strong v-t="'traceback'" />
-        </p>
-        <pre><code>{{ error.traceback }}</code></pre>
-      </template>
-
-      <template v-if="messages">
-        <p class="my-2">
-          <strong v-t="'api_error.server_said'" />
-        </p>
-        <MessageListGroup :messages="messages" bordered />
-      </template>
-    </BCardBody>
-
-    <BCardFooter footer-bg-variant="danger">
-      <!-- TODO add copy error ? -->
-      <BButton variant="light" size="sm" v-t="'ok'" @click="dismiss" />
-    </BCardFooter>
-  </div>
+  <ModalOverlay :request="request" footer-variant="danger" :hide-footer="false">
+    <h5 v-t="`api_errors_titles.${err.name}`" />
+
+    <em v-t="'api_error.sorry'" />
+
+    <div class="alert alert-info my-3">
+      <span v-html="$t('api_error.help')" />
+      <br />{{ $t('api_error.info') }}
+    </div>
+
+    <!-- FIXME USE DD DL DT -->
+    <p class="m-0">
+      <strong v-t="'error'" />:
+      <code>"{{ err.code }}" {{ err.status }}</code>
+    </p>
+    <p>
+      <strong v-t="'action'" />:
+      <code>"{{ err.method }}" {{ err.path }}</code>
+    </p>
+
+    <p>
+      <strong v-t="'api_error.error_message'" />
+      <YAlert variant="danger" class="mt-2">
+        <div v-html="err.message" />
+      </YAlert>
+    </p>
+
+    <div v-if="traceback">
+      <p><strong v-t="'traceback'" /></p>
+      <pre><code>{{ traceback }}</code></pre>
+    </div>
+
+    <div v-if="messages">
+      <p class="my-2"><strong v-t="'api_error.server_said'" /></p>
+      <MessageListGroup :messages="messages" bordered fixed-height />
+    </div>
+  </ModalOverlay>
 </template>
-
-<style lang="scss" scoped>
-code,
-pre code {
-  color: $black;
-}
-</style>

From 0cf60eab988fef8573c08d5cfa961eec61b77a65 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 17:15:19 +0200
Subject: [PATCH 142/275] refactor: rework ModalReconnecting to new requests

---
 .../components/modals/ModalReconnecting.vue   | 92 ++++++++++---------
 1 file changed, 51 insertions(+), 41 deletions(-)

diff --git a/app/src/components/modals/ModalReconnecting.vue b/app/src/components/modals/ModalReconnecting.vue
index f4faea4df..0ee3a37ba 100644
--- a/app/src/components/modals/ModalReconnecting.vue
+++ b/app/src/components/modals/ModalReconnecting.vue
@@ -1,74 +1,84 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useStore } from 'vuex'
+import { onMounted, reactive } from 'vue'
 
 import api from '@/api'
-import { useStoreGetters } from '@/store/utils'
+import ModalOverlay from '@/components/modals/ModalOverlay.vue'
+import type { APIRequest, ReconnectingArgs } from '@/composables/useRequests'
 import LoginView from '@/views/LoginView.vue'
 
-const store = useStore()
+const props = defineProps<{
+  reconnecting: ReconnectingArgs
+}>()
 
-const { reconnecting } = useStoreGetters()
-const status = ref('reconnecting')
-const origin = ref(reconnecting.value.origin || 'unknown')
+const emit = defineEmits<{
+  dismiss: [value: boolean]
+}>()
 
-function tryToReconnect(initialDelay = 0) {
-  status.value = 'reconnecting'
+const request = reactive<{
+  humanRoute: APIRequest['humanRoute']
+  status: APIRequest['status']
+  subStatus?: 'expired' | 'failed'
+}>({
+  status: 'pending',
+  // FIXME translate
+  humanRoute: 'reconnecting',
+})
+
+function tryToReconnect() {
+  request.status = 'pending'
+  request.subStatus = undefined
   api
-    .tryToReconnect({ ...reconnecting.value, initialDelay })
+    .tryToReconnect(props.reconnecting)
     .then(() => {
-      store.commit('SET_RECONNECTING', null)
+      emit('dismiss', true)
     })
     .catch((err) => {
       if (err.name === 'APIUnauthorizedError') {
-        status.value = 'expired'
+        request.status = 'success'
+        request.subStatus = 'expired'
       } else {
-        status.value = 'failed'
+        request.status = 'error'
+        request.subStatus = 'failed'
       }
     })
 }
 
-tryToReconnect(reconnecting.value.initialDelay)
+onMounted(() => {
+  tryToReconnect()
+})
 </script>
 
 <template>
-  <!-- This card receives style from `ViewLockOverlay` if used inside it -->
-  <BCardBody>
-    <BCardTitle class="text-center my-4" v-t="'api.reconnecting.title'" />
+  <ModalOverlay
+    :request="request as APIRequest"
+    footer-variant="danger"
+    :hide-footer="request.subStatus !== 'failed'"
+  >
+    <h5 v-t="'api.reconnecting.title'" class="text-center my-4" />
 
-    <template v-if="status === 'reconnecting'">
+    <template v-if="request.status === 'pending'">
       <YSpinner class="mb-4" />
 
-      <BAlert
-        :modelValue="!!origin"
-        v-t="'api.reconnecting.reason.' + origin"
-        :variant="origin === 'unknow' ? 'warning' : 'info'"
+      <YAlert
+        v-if="!!reconnecting.origin"
+        v-t="'api.reconnecting.reason.' + reconnecting.origin"
+        :variant="reconnecting.origin === 'unknown' ? 'warning' : 'info'"
       />
     </template>
 
-    <template v-if="status === 'failed'">
-      <BAlert :modelValue="true" variant="danger">
+    <template v-if="request.subStatus === 'failed'">
+      <YAlert variant="danger">
         <MarkdownItem :label="$t('api.reconnecting.failed')" />
-      </BAlert>
-
-      <div class="d-flex justify-content-end">
-        <BButton
-          variant="success"
-          v-t="'retry'"
-          class="ms-auto"
-          @click="tryToReconnect()"
-        />
-      </div>
+      </YAlert>
+    </template>
+    <template v-if="request.subStatus === 'failed'" #footer>
+      <BButton v-t="'retry'" variant="light" @click="tryToReconnect()" />
     </template>
 
-    <template v-if="status === 'expired'">
-      <BAlert
-        :modelValue="true"
-        variant="success"
-        v-t="'api.reconnecting.session_expired'"
-      />
+    <template v-if="request.subStatus === 'expired'">
+      <YAlert v-t="'api.reconnecting.success'" variant="success" />
 
       <LoginView force-reload />
     </template>
-  </BCardBody>
+  </ModalOverlay>
 </template>

From f05d5769ffecce8534b2402af5c763df5d3b2a2b Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 17:17:06 +0200
Subject: [PATCH 143/275] feat: add new MainLayout to handle lock and modals
 with Suspense (async views)

---
 app/src/App.vue                           |  49 +-------
 app/src/components/layouts/MainLayout.vue | 133 ++++++++++++++++++++++
 app/src/scss/_variables.scss              |   1 +
 3 files changed, 138 insertions(+), 45 deletions(-)
 create mode 100644 app/src/components/layouts/MainLayout.vue

diff --git a/app/src/App.vue b/app/src/App.vue
index 00f4d3a74..eaf8eee33 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -5,13 +5,13 @@ import { useStore } from 'vuex'
 import { useRequests } from '@/composables/useRequests'
 import { useSettings } from '@/composables/useSettings'
 import { useStoreGetters } from '@/store/utils'
-import { HistoryConsole, ViewLockOverlay } from '@/views/_partials'
+import { HistoryConsole } from '@/views/_partials'
 
 const store = useStore()
 
-const { connected, yunohost, routerKey, ssoLink } = useStoreGetters()
+const { connected, yunohost, ssoLink } = useStoreGetters()
 const { locked } = useRequests()
-const { spinner, dark, transitions, transitionName } = useSettings()
+const { spinner, dark } = useSettings()
 
 async function logout() {
   store.dispatch('LOGOUT')
@@ -113,20 +113,7 @@ onMounted(() => {
     </header>
 
     <!-- MAIN -->
-    <ViewLockOverlay>
-      <YBreadcrumb />
-
-      <main id="main">
-        <!-- The `key` on RouterView make sure that if a link points to a page that
-        use the same component as the previous one, it will be refreshed -->
-        <RouterView v-slot="{ Component }" :key="routerKey">
-          <Transition v-if="transitions" :name="transitionName">
-            <Component :is="Component" class="animated" />
-          </Transition>
-          <Component v-else :is="Component" class="static" />
-        </RouterView>
-      </main>
-    </ViewLockOverlay>
+    <MainLayout />
 
     <BModalOrchestrator />
 
@@ -196,34 +183,6 @@ header {
   }
 }
 
-main {
-  position: relative;
-
-  // Routes transition
-  .animated {
-    transition: all 0.15s ease-in-out;
-  }
-  .slide-left-enter-from,
-  .slide-right-leave-active {
-    position: absolute;
-    width: 100%;
-    top: 0;
-    transform: translate(100vw, 0);
-  }
-  .slide-left-leave-active,
-  .slide-right-enter-from {
-    position: absolute;
-    width: 100%;
-    top: 0;
-    transform: translate(-100vw, 0);
-  }
-  // hack to hide last transition provoqued by the <RouterView> element change
-  // while disabling the transitions in ToolWebAdmin
-  .static ~ .animated {
-    display: none;
-  }
-}
-
 #console {
   // Allows the console to be tabbed before the footer links while remaining visually
   // the last element of the page
diff --git a/app/src/components/layouts/MainLayout.vue b/app/src/components/layouts/MainLayout.vue
new file mode 100644
index 000000000..9f55d2e10
--- /dev/null
+++ b/app/src/components/layouts/MainLayout.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
+import type { VNode } from 'vue'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+import {
+  ModalError,
+  ModalReconnecting,
+  ModalWaiting,
+  ModalWarning,
+} from '@/components/modals'
+import { useRequests } from '@/composables/useRequests'
+import { useSettings } from '@/composables/useSettings'
+import { useStoreGetters } from '@/store/utils'
+import type { VueClass } from '@/types/commons'
+
+const router = useRouter()
+const { routerKey } = useStoreGetters()
+const { reconnecting, currentRequest, dismissModal } = useRequests()
+const { transitions, transitionName, dark } = useSettings()
+
+const RootView = createReusableTemplate<{
+  Component: VNode
+  classes: VueClass
+}>()
+
+const skeleton = computed(
+  () => router.currentRoute.value.meta.skeleton || 'CardInfoSkeleton',
+)
+
+const modalComponent = computed(() => {
+  if (reconnecting.value) {
+    return {
+      is: ModalReconnecting,
+      props: {
+        reconnecting: reconnecting.value,
+        onDismiss: () => (reconnecting.value = undefined),
+      },
+    }
+  }
+
+  const request = currentRequest.value
+  if (!request) return null
+  const { status, err } = request
+
+  if (status === 'error' && err) {
+    return {
+      is: ModalError,
+      props: { request, onDismiss: () => dismissModal(request.id) },
+    }
+  } else if (status === 'warning') {
+    return {
+      is: ModalWarning,
+      props: { request, onDismiss: () => dismissModal(request.id) },
+    }
+  } else {
+    return { is: ModalWaiting, props: { request } }
+  }
+})
+</script>
+
+<template>
+  <RootView.define v-slot="{ Component, classes }">
+    <BOverlay
+      opacity="0.75"
+      rounded
+      :show="!!modalComponent"
+      :variant="dark ? 'dark' : 'light'"
+      class="main-overlay"
+    >
+      <Suspense>
+        <Component :is="Component" :class="classes" />
+        <template #fallback>
+          <Component :is="skeleton" />
+        </template>
+      </Suspense>
+
+      <template v-if="modalComponent" #overlay>
+        <Component :is="modalComponent.is" v-bind="modalComponent.props" />
+      </template>
+    </BOverlay>
+  </RootView.define>
+
+  <YBreadcrumb />
+
+  <main id="main">
+    <!-- The `key` on RouterView make sure that if a link points to a page that
+        use the same component as the previous one, it will be refreshed -->
+    <RouterView v-slot="{ Component }" :key="routerKey">
+      <Transition v-if="transitions" :name="transitionName">
+        <RootView.reuse v-bind="{ Component, classes: 'animated' }" />
+      </Transition>
+      <RootView.reuse v-else v-bind="{ Component, classes: 'static' }" />
+    </RouterView>
+  </main>
+</template>
+
+<style lang="scss" scoped>
+main {
+  position: relative;
+
+  // Routes transition
+  .animated {
+    transition: all 0.15s ease-in-out;
+  }
+  .slide-left-enter-from,
+  .slide-right-leave-active {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    transform: translate(100vw, 0);
+  }
+  .slide-left-leave-active,
+  .slide-right-enter-from {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    transform: translate(-100vw, 0);
+  }
+  // hack to hide last transition provoqued by the <RouterView> element change
+  // while disabling the transitions in ToolWebAdmin
+  .static ~ .animated {
+    display: none;
+  }
+
+  .main-overlay :deep(.b-overlay :first-child) {
+    width: calc(100% + 20px);
+    height: calc(100% + 20px);
+    transform: translate(-10px, -10px);
+  }
+}
+</style>
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index b484a8969..bf6ab798d 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -124,6 +124,7 @@ $h4-font-size: $font-size-base * 1.25;
 $h5-font-size: $font-size-base * 1.1;
 
 $list-group-item-padding-y: $spacer * 0.75;
+$modal-md: 600px;
 
 // Import default variables after the above setup to compute all other variables.
 @import '~bootstrap/scss/variables';

From deae1324e1158b8db73e96faab0fcbe212ee0b2d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 17:55:09 +0200
Subject: [PATCH 144/275] chore: mv store/infos.ts -> composables/useInfos.ts

---
 app/src/{store/info.ts => composables/useInfos.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename app/src/{store/info.ts => composables/useInfos.ts} (100%)

diff --git a/app/src/store/info.ts b/app/src/composables/useInfos.ts
similarity index 100%
rename from app/src/store/info.ts
rename to app/src/composables/useInfos.ts

From 60b5134dcf5400d6cdba2bbf14b72b081474f06a Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 21:39:00 +0200
Subject: [PATCH 145/275] refactor: turn infos store to global state

---
 app/src/App.vue                            |  13 +-
 app/src/api/api.ts                         |   5 +-
 app/src/api/handlers.ts                    |   6 +-
 app/src/components/globals/YBreadcrumb.vue |  24 +-
 app/src/components/layouts/MainLayout.vue  |   4 +-
 app/src/composables/useInfos.ts            | 391 ++++++++++-----------
 app/src/composables/useRequests.ts         |   4 +-
 app/src/router/index.ts                    |  14 +-
 app/src/views/LoginView.vue                |  10 +-
 app/src/views/backup/BackupInfo.vue        |   7 +-
 app/src/views/tool/ToolPower.vue           |  10 +-
 app/src/views/update/SystemUpdate.vue      |   6 +-
 app/src/views/user/UserList.vue            |   7 +-
 13 files changed, 232 insertions(+), 269 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index eaf8eee33..d310d4d31 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,23 +1,16 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import { useStore } from 'vuex'
 
+import { useInfos } from '@/composables/useInfos'
 import { useRequests } from '@/composables/useRequests'
 import { useSettings } from '@/composables/useSettings'
-import { useStoreGetters } from '@/store/utils'
 import { HistoryConsole } from '@/views/_partials'
 
-const store = useStore()
-
-const { connected, yunohost, ssoLink } = useStoreGetters()
+const { ssoLink, connected, yunohost, logout, onAppCreated } = useInfos()
 const { locked } = useRequests()
 const { spinner, dark } = useSettings()
 
-async function logout() {
-  store.dispatch('LOGOUT')
-}
-
-store.dispatch('ON_APP_CREATED')
+onAppCreated()
 
 onMounted(() => {
   const copypastaCode = ['ArrowDown', 'ArrowDown', 'ArrowUp', 'ArrowUp']
diff --git a/app/src/api/api.ts b/app/src/api/api.ts
index 2655c126e..38878d5ec 100644
--- a/app/src/api/api.ts
+++ b/app/src/api/api.ts
@@ -1,3 +1,4 @@
+import { useInfos } from '@/composables/useInfos'
 import {
   useRequests,
   type APIRequestAction,
@@ -242,10 +243,10 @@ export default {
     delay = 2000,
     initialDelay = 0,
   }: ReconnectingArgs = {}) {
+    const { getYunoHostVersion } = useInfos()
     return new Promise((resolve, reject) => {
       function reconnect(n: number) {
-        store
-          .dispatch('GET_YUNOHOST_INFOS')
+        getYunoHostVersion()
           .then(resolve)
           .catch((err: APIError) => {
             if (err instanceof APIUnauthorizedError) {
diff --git a/app/src/api/handlers.ts b/app/src/api/handlers.ts
index 68e3a2356..e4e5c1cd1 100644
--- a/app/src/api/handlers.ts
+++ b/app/src/api/handlers.ts
@@ -4,6 +4,7 @@
  */
 
 import errors from '@/api/errors'
+import { useInfos } from '@/composables/useInfos'
 import {
   STATUS_VARIANT,
   type APIRequest,
@@ -39,10 +40,9 @@ export async function getResponseData(response: Response) {
  * @returns Promise that resolve on websocket 'open' or 'error' event.
  */
 export function openWebSocket(request: APIRequestAction): Promise<Event> {
+  const { host } = useInfos()
   return new Promise((resolve) => {
-    const ws = new WebSocket(
-      `wss://${store.getters.host}/yunohost/api/messages`,
-    )
+    const ws = new WebSocket(`wss://${host.value}/yunohost/api/messages`)
     ws.onmessage = ({ data }) => {
       const messages: Record<'info' | 'success' | 'warning' | 'error', string> =
         JSON.parse(data)
diff --git a/app/src/components/globals/YBreadcrumb.vue b/app/src/components/globals/YBreadcrumb.vue
index c8033ec27..9f5bf432c 100644
--- a/app/src/components/globals/YBreadcrumb.vue
+++ b/app/src/components/globals/YBreadcrumb.vue
@@ -1,16 +1,9 @@
 <script setup lang="ts">
-import { useStoreGetters } from '@/store/utils'
+import { useInfos } from '@/composables/useInfos'
 
-const { breadcrumb } = useStoreGetters()
+const { breadcrumb } = useInfos()
 </script>
 
-<style lang="scss" scoped>
-.breadcrumb {
-  border: none;
-  background-color: transparent;
-}
-</style>
-
 <template>
   <BBreadcrumb v-if="breadcrumb.length">
     <BBreadcrumbItem to="/">
@@ -19,12 +12,19 @@ const { breadcrumb } = useStoreGetters()
     </BBreadcrumbItem>
 
     <BBreadcrumbItem
-      v-for="({ name, text }, i) in breadcrumb"
-      :key="name"
-      :to="{ name }"
+      v-for="({ to, text }, i) in breadcrumb"
+      :key="i"
+      :to="to"
       :active="i === breadcrumb.length - 1"
     >
       {{ text }}
     </BBreadcrumbItem>
   </BBreadcrumb>
 </template>
+
+<style lang="scss" scoped>
+.breadcrumb {
+  border: none;
+  background-color: transparent;
+}
+</style>
diff --git a/app/src/components/layouts/MainLayout.vue b/app/src/components/layouts/MainLayout.vue
index 9f55d2e10..c3fb19bdc 100644
--- a/app/src/components/layouts/MainLayout.vue
+++ b/app/src/components/layouts/MainLayout.vue
@@ -10,13 +10,13 @@ import {
   ModalWaiting,
   ModalWarning,
 } from '@/components/modals'
+import { useInfos } from '@/composables/useInfos'
 import { useRequests } from '@/composables/useRequests'
 import { useSettings } from '@/composables/useSettings'
-import { useStoreGetters } from '@/store/utils'
 import type { VueClass } from '@/types/commons'
 
 const router = useRouter()
-const { routerKey } = useStoreGetters()
+const { routerKey } = useInfos()
 const { reconnecting, currentRequest, dismissModal } = useRequests()
 const { transitions, transitionName, dark } = useSettings()
 
diff --git a/app/src/composables/useInfos.ts b/app/src/composables/useInfos.ts
index 17b95b944..46891d9e1 100644
--- a/app/src/composables/useInfos.ts
+++ b/app/src/composables/useInfos.ts
@@ -1,212 +1,189 @@
+import { createGlobalState, useLocalStorage } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import type {
+  RouteLocationNormalized,
+  RouteLocationNormalizedLoaded,
+  RouteRecordNormalized,
+} from 'vue-router'
+import { useRouter } from 'vue-router'
+
 import api from '@/api'
-import { useRequests, type ReconnectingArgs } from '@/composables/useRequests'
 import { isEmptyValue, timeout } from '@/helpers/commons'
 import i18n from '@/i18n'
-import router from '@/router'
-
-export default {
-  state: {
-    host: window.location.host, // String
-    installed: null,
-    connected: localStorage.getItem('connected') === 'true', // Boolean
-    yunohost: null, // Object { version, repo }
-    routerKey: undefined, // String if current route has params
-    breadcrumb: [], // Array of routes
-    transitionName: null, // String of CSS class if transitions are enabled
-  },
-
-  mutations: {
-    SET_INSTALLED(state, boolean) {
-      state.installed = boolean
-    },
-
-    SET_CONNECTED(state, boolean) {
-      localStorage.setItem('connected', boolean)
-      state.connected = boolean
-    },
-
-    SET_YUNOHOST_INFOS(state, yunohost) {
-      state.yunohost = yunohost
-    },
-
-    SET_ROUTER_KEY(state, key) {
-      state.routerKey = key
-    },
-
-    SET_BREADCRUMB(state, breadcrumb) {
-      state.breadcrumb = breadcrumb
-    },
-
-    SET_TRANSITION_NAME(state, transitionName) {
-      state.transitionName = transitionName
-    },
-  },
-
-  actions: {
-    async ON_APP_CREATED({ dispatch, state }) {
-      await dispatch('CHECK_INSTALL')
-
-      if (!state.installed) {
-        router.push({ name: 'post-install' })
-      } else {
-        dispatch('CONNECT')
-      }
-    },
-
-    async CHECK_INSTALL({ dispatch, commit }, retry = 2) {
-      // this action will try to query the `/installed` route 3 times every 5 s with
-      // a timeout of the same delay.
-      // FIXME need testing with api not responding
-      try {
-        const { installed } = await timeout(api.get('installed'), 5000)
-        commit('SET_INSTALLED', installed)
-        return installed
-      } catch (err) {
-        if (retry > 0) {
-          return dispatch('CHECK_INSTALL', --retry)
-        }
-        throw err
-      }
-    },
-
-    async CONNECT({ commit, dispatch }) {
-      // If the user is not connected, the first action will throw
-      // and login prompt will be shown automaticly
-      await dispatch('GET_YUNOHOST_INFOS')
-      commit('SET_CONNECTED', true)
-      await api.get({ uri: 'domains', storeKey: 'domains' })
-    },
-
-    RESET_CONNECTED({ commit }) {
-      commit('SET_CONNECTED', false)
-      commit('SET_YUNOHOST_INFOS', null)
-    },
-
-    DISCONNECT({ dispatch }, route) {
-      // FIXME vue3 currentRoute is now a ref (currentRoute.value)
-      dispatch('RESET_CONNECTED')
-      if (router.currentRoute.value.name === 'login') return
-      const previousRoute = route ?? router.currentRoute.value
-      router.push({
-        name: 'login',
-        // Add a redirect query if next route is not unknown (like `logout`) or `login`
-        query:
-          previousRoute && !['login', null].includes(previousRoute.name)
-            ? { redirect: previousRoute.path }
-            : {},
-      })
-    },
-
-    LOGIN({ dispatch }, credentials) {
-      return api
-        .post('login', { credentials }, null, { websocket: false })
-        .then(() => {
-          return dispatch('CONNECT')
-        })
-    },
-
-    LOGOUT({ dispatch }) {
-      dispatch('DISCONNECT')
-      return api.get('logout')
-    },
-
-    TRY_TO_RECONNECT({ commit }, args?: ReconnectingArgs) {
-      // FIXME This is very ugly arguments forwarding, will use proper component way of doing this when switching to Vue 3 (teleport)
-      useRequests().reconnecting.value = args
-    },
-
-    GET_YUNOHOST_INFOS({ commit }) {
-      return api.get('versions').then((versions) => {
-        commit('SET_YUNOHOST_INFOS', versions.yunohost)
-      })
-    },
-
-    UPDATE_ROUTER_KEY({ commit }, { to, from }) {
-      if (isEmptyValue(to.params)) {
-        commit('SET_ROUTER_KEY', undefined)
-        return
-      }
-      // If the next route uses the same component as the previous one, Vue will not
-      // recreate an instance of that component, so hooks like `created()` will not be
-      // triggered and data will not be fetched.
-      // For routes with params, we create a unique key to force the recreation of a view.
-      // Params can be declared in route `meta` to stricly define which params should be
-      // taken into account.
-      const params = to.meta.routerParams
-        ? to.meta.routerParams.map((key) => to.params[key])
-        : Object.values(to.params)
-
-      commit('SET_ROUTER_KEY', `${to.name}-${params.join('-')}`)
-    },
-
-    UPDATE_BREADCRUMB({ commit }, { to, from }) {
-      function getRouteNames(route) {
-        if (route.meta.breadcrumb) return route.meta.breadcrumb
-        const parentRoute = route.matched
-          .slice()
-          .reverse()
-          .find((route) => route.meta.breadcrumb)
-        if (parentRoute) return parentRoute.meta.breadcrumb
-        return []
-      }
-
-      function formatRoute(route) {
-        const { trad, param } = route.meta.args || {}
-        let text = ''
-        // if a traduction key string has been given and we also need to pass
-        // the route param as a variable.
-        if (trad && param) {
-          text = i18n.global.t(trad, { [param]: to.params[param] })
-        } else if (trad) {
-          text = i18n.global.t(trad)
-        } else {
-          text = to.params[param]
-        }
-        return { name: route.name, text }
+import { useStoreGetters } from '@/store/utils'
+import type { CustomRoute, RouteFromTo } from '@/types/commons'
+import { useRequests, type ReconnectingArgs } from './useRequests'
+
+export const useInfos = createGlobalState(() => {
+  const router = useRouter()
+
+  const host = ref(window.location.host)
+  const installed = ref<boolean | undefined>()
+  const connected = useLocalStorage('connected', false)
+  const yunohost = ref<{ version: string; repo: string } | undefined>()
+  const routerKey = ref<string | undefined>()
+  const breadcrumb = ref<CustomRoute[]>([])
+
+  const { mainDomain } = useStoreGetters()
+  const ssoLink = computed(() => {
+    return `//${mainDomain.value ?? host.value}/yunohost/sso`
+  })
+
+  // INIT
+
+  async function _checkInstall(retry = 2) {
+    // this action will try to query the `/installed` route 3 times every 5 s with
+    // a timeout of the same delay.
+    // FIXME need testing with api not responding
+    try {
+      const data = await timeout(
+        api.get<{ installed: boolean }>('installed'),
+        5000,
+      )
+      installed.value = data.installed
+    } catch (err) {
+      if (retry > 0) {
+        return _checkInstall(--retry)
       }
-
-      const routeNames = getRouteNames(to)
-      const allRoutes = router.getRoutes()
-      const breadcrumb = routeNames.map((name) => {
-        const route = allRoutes.find((route) => route.name === name)
-        return formatRoute(route)
-      })
-
-      commit('SET_BREADCRUMB', breadcrumb)
-
-      function getTitle(breadcrumb) {
-        if (breadcrumb.length === 0) return formatRoute(to).text
-        return (breadcrumb.length > 2 ? breadcrumb.slice(-2) : breadcrumb)
-          .map((route) => route.text)
-          .reverse()
-          .join(' / ')
+      throw err
+    }
+  }
+
+  async function onAppCreated() {
+    await _checkInstall()
+
+    if (!installed.value) {
+      router.push({ name: 'post-install' })
+    } else {
+      _onLogin()
+    }
+  }
+
+  function getYunoHostVersion() {
+    return api.get('versions').then((versions) => {
+      yunohost.value = versions.yunohost
+    })
+  }
+
+  // CONNECTION
+
+  async function _onLogin() {
+    // If the user is not connected, the first action will throw
+    // and login prompt will be shown automaticly
+    await getYunoHostVersion()
+    connected.value = true
+    await api.get({ uri: 'domains', cachePath: 'domainList' })
+  }
+
+  function onLogout(route?: RouteLocationNormalizedLoaded) {
+    connected.value = false
+    yunohost.value = undefined
+    const previousRoute = route ?? router.currentRoute.value
+    if (previousRoute.name === 'login') return
+    router.push({
+      name: 'login',
+      // Add a redirect query if next route is not unknown (like `logout`) or `login`
+      query:
+        previousRoute && !['login', null].includes(previousRoute.name as any)
+          ? { redirect: previousRoute.path }
+          : {},
+    })
+  }
+
+  function login(credentials: string) {
+    return api
+      .post({ uri: 'login', data: { credentials }, websocket: false })
+      .then(() => _onLogin())
+  }
+
+  function logout() {
+    onLogout()
+    return api.get('logout')
+  }
+
+  function tryToReconnect(args?: ReconnectingArgs) {
+    useRequests().reconnecting.value = args
+  }
+
+  function updateRouterKey({ to }: RouteFromTo) {
+    if (isEmptyValue(to.params)) {
+      routerKey.value = undefined
+      return
+    }
+    // If the next route uses the same component as the previous one, Vue will not
+    // recreate an instance of that component, so hooks like `created()` will not be
+    // triggered and data will not be fetched.
+    // For routes with params, we create a unique key to force the recreation of a view.
+    // Params can be declared in route `meta` to stricly define which params should be
+    // taken into account.
+    const params = to.meta.routerParams
+      ? to.meta.routerParams.map((key) => to.params[key])
+      : Object.values(to.params)
+
+    routerKey.value = `${to.name?.toString()}-${params.join('-')}`
+  }
+
+  function updateBreadcrumb({ to }: RouteFromTo) {
+    function getRouteNames(route: RouteLocationNormalized): string[] {
+      if (route.meta.breadcrumb) return route.meta.breadcrumb
+      const parentRoute = route.matched
+        .slice()
+        .reverse()
+        .find((route) => route.meta.breadcrumb)
+      return parentRoute?.meta.breadcrumb || []
+    }
+
+    function formatRoute(
+      route: RouteRecordNormalized | RouteLocationNormalized,
+    ) {
+      const { trad, param } = route.meta.args || {}
+      let text = ''
+      // if a traduction key string has been given and we also need to pass
+      // the route param as a variable.
+      if (trad && param) {
+        text = i18n.global.t(trad, { [param]: to.params[param] })
+      } else if (trad) {
+        text = i18n.global.t(trad)
+      } else if (param) {
+        text = to.params[param] as string
       }
-
-      // Display a simplified breadcrumb as the document title.
-      document.title = `${getTitle(breadcrumb)} | ${i18n.global.t('yunohost_admin')}`
-    },
-
-    UPDATE_TRANSITION_NAME({ state, commit }, { to, from }) {
-      // Use the breadcrumb array length as a direction indicator
-      const toDepth = (to.meta.breadcrumb || []).length
-      const fromDepth = (from.meta.breadcrumb || []).length
-      commit(
-        'SET_TRANSITION_NAME',
-        toDepth < fromDepth ? 'slide-right' : 'slide-left',
-      )
-    },
-  },
-
-  getters: {
-    host: (state) => state.host,
-    installed: (state) => state.installed,
-    connected: (state) => state.connected,
-    yunohost: (state) => state.yunohost,
-    routerKey: (state) => state.routerKey,
-    breadcrumb: (state) => state.breadcrumb,
-    transitionName: (state) => state.transitionName,
-    ssoLink: (state, getters) => {
-      return `//${getters.mainDomain ?? state.host}/yunohost/sso`
-    },
-  },
-}
+      return { to: { name: route.name! }, text }
+    }
+
+    const routeNames = getRouteNames(to)
+    const allRoutes = router.getRoutes()
+    breadcrumb.value = routeNames.map((name) => {
+      const route = allRoutes.find((route) => route.name === name)!
+      return formatRoute(route)
+    })
+
+    function getTitle(breadcrumb: CustomRoute[]) {
+      if (breadcrumb.length === 0) return formatRoute(to).text
+      return (breadcrumb.length > 2 ? breadcrumb.slice(-2) : breadcrumb)
+        .map((route) => route.text)
+        .reverse()
+        .join(' / ')
+    }
+
+    // Display a simplified breadcrumb as the document title.
+    document.title = `${getTitle(breadcrumb.value)} | ${i18n.global.t('yunohost_admin')}`
+  }
+
+  return {
+    host,
+    installed,
+    connected,
+    yunohost,
+    routerKey,
+    breadcrumb,
+    ssoLink,
+    onAppCreated,
+    getYunoHostVersion,
+    onLogout,
+    login,
+    logout,
+    tryToReconnect,
+    updateRouterKey,
+    updateBreadcrumb,
+  }
+})
diff --git a/app/src/composables/useRequests.ts b/app/src/composables/useRequests.ts
index 7d6a08f75..52cafd378 100644
--- a/app/src/composables/useRequests.ts
+++ b/app/src/composables/useRequests.ts
@@ -7,8 +7,8 @@ import type { APIQuery, RequestMethod } from '@/api/api'
 import { APIErrorLog, type APIError } from '@/api/errors'
 import { isObjectLiteral } from '@/helpers/commons'
 import i18n from '@/i18n'
-import store from '@/store'
 import type { StateVariant } from '@/types/commons'
+import { useInfos } from './useInfos'
 
 export type RequestStatus = 'pending' | 'success' | 'warning' | 'error'
 
@@ -162,7 +162,7 @@ export const useRequests = createGlobalState(() => {
     err.log()
     if (err.code === 401) {
       // Unauthorized
-      store.dispatch('DISCONNECT')
+      useInfos().onLogout()
     } else if (err instanceof APIErrorLog) {
       // Errors that have produced logs
       router.push({ name: 'tool-log', params: { name: err.logRef } })
diff --git a/app/src/router/index.ts b/app/src/router/index.ts
index 95b7e1e95..898c2e070 100644
--- a/app/src/router/index.ts
+++ b/app/src/router/index.ts
@@ -1,8 +1,8 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 
+import { useInfos } from '@/composables/useInfos'
 import { useRequests } from '@/composables/useRequests'
 import { useSettings } from '@/composables/useSettings'
-import store from '@/store'
 import routes from './routes'
 
 const router = createRouter({
@@ -39,20 +39,22 @@ router.beforeEach((to, from, next) => {
     dismissModal(currentRequest.value.id)
   }
 
-  if (to.name === 'post-install' && store.getters.installed) {
+  const { installed, connected, onLogout } = useInfos()
+  if (to.name === 'post-install' && installed.value) {
     return next('/')
   }
   // Allow if connected or route is not protected
-  if (store.getters.connected || to.meta.noAuth) {
+  if (connected.value || to.meta.noAuth) {
     next()
   } else {
-    store.dispatch('DISCONNECT', to)
+    onLogout(to)
   }
 })
 
 router.afterEach((to, from) => {
-  store.dispatch('UPDATE_ROUTER_KEY', { to, from })
-  store.dispatch('UPDATE_BREADCRUMB', { to, from })
+  const { updateRouterKey, updateBreadcrumb } = useInfos()
+  updateRouterKey({ to, from })
+  updateBreadcrumb({ to, from })
 })
 
 export default router
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index 75babf7e0..bd2126796 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -2,11 +2,10 @@
 import { reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter, type LocationQueryValue } from 'vue-router'
-import { useStore } from 'vuex'
 
 import { useForm } from '@/composables/form'
+import { useInfos } from '@/composables/useInfos'
 import { alphalownumdot_, minLength, required } from '@/helpers/validators'
-import { useStoreGetters } from '@/store/utils'
 import type { FieldProps, FormFieldDict } from '@/types/form'
 
 const props = withDefaults(
@@ -19,10 +18,8 @@ const props = withDefaults(
 )
 
 const { t } = useI18n()
-const store = useStore()
 const router = useRouter()
-
-const { installed } = useStoreGetters()
+const { login, installed } = useInfos()
 
 type Form = typeof form.value
 const form = ref({
@@ -57,8 +54,7 @@ const { v, onSubmit } = useForm(form, fields)
 const onLogin = onSubmit((onError) => {
   const { username, password } = form.value
   const credentials = [username, password].join(':')
-  store
-    .dispatch('LOGIN', credentials)
+  login(credentials)
     .then(() => {
       if (props.forceReload) {
         window.location.href = '/yunohost/admin/'
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index ece48c959..47ee2b197 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -2,11 +2,11 @@
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import { useStore } from 'vuex'
 
 import api from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { useInfos } from '@/composables/useInfos'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import { isEmptyValue } from '@/helpers/commons'
 import { readableDate } from '@/helpers/filters/date'
@@ -19,7 +19,6 @@ const props = defineProps<{
 
 const { t } = useI18n()
 const router = useRouter()
-const store = useStore()
 const modalConfirm = useAutoModal()
 const { loading } = useInitialQueries(
   [{ uri: `backups/${props.name}?with_details` }],
@@ -128,9 +127,9 @@ async function deleteBackup() {
 }
 
 function downloadBackup() {
-  const host = store.getters.host
+  const { host } = useInfos()
   window.open(
-    `https://${host}/yunohost/api/backups/${props.name}/download`,
+    `https://${host.value}/yunohost/api/backups/${props.name}/download`,
     '_blank',
   )
 }
diff --git a/app/src/views/tool/ToolPower.vue b/app/src/views/tool/ToolPower.vue
index f89250a0b..31b0e348d 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { useStore } from 'vuex'
 
 import api from '@/api'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { useInfos } from '@/composables/useInfos'
 
 const { t } = useI18n()
-const store = useStore()
 const modalConfirm = useAutoModal()
+const { tryToReconnect } = useInfos()
 
 async function triggerAction(action) {
   const confirmed = await modalConfirm(t('confirm_reboot_action_' + action))
@@ -15,11 +15,7 @@ async function triggerAction(action) {
 
   api.put({ uri: action + '?force', humanKey: action }).then(() => {
     const delay = action === 'reboot' ? 4000 : 10000
-    store.dispatch('TRY_TO_RECONNECT', {
-      attemps: Infinity,
-      origin: action,
-      delay,
-    })
+    tryToReconnect({ attemps: Infinity, origin: action, delay })
   })
 }
 </script>
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 3c50d6c15..7e300a199 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useStore } from 'vuex'
 
 import api from '@/api'
 import CardCollapse from '@/components/CardCollapse.vue'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { useInfos } from '@/composables/useInfos'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 
 const { t } = useI18n()
-const store = useStore()
+const { tryToReconnect } = useInfos()
 const modalConfirm = useAutoModal()
 const { loading } = useInitialQueries(
   [{ method: 'PUT', uri: 'update/all', humanKey: 'update' }],
@@ -105,7 +105,7 @@ async function performSystemUpgrade() {
 
   api.put({ uri: 'upgrade/system', humanKey: 'upgrade.system' }).then(() => {
     if (system.value.some(({ name }) => name.includes('yunohost'))) {
-      store.dispatch('TRY_TO_RECONNECT', {
+      tryToReconnect({
         attemps: 1,
         origin: 'upgrade_system',
         initialDelay: 2000,
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index c1ee6c49e..7ab5445f0 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { type ComputedRef } from 'vue'
-import { useStore } from 'vuex'
 
+import { useInfos } from '@/composables/useInfos'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import { useSearch } from '@/composables/useSearch'
 import { useStoreGetters } from '@/store/utils'
 import type { Obj } from '@/types/commons'
 
-const store = useStore()
 const { loading } = useInitialQueries([
   {
     uri: 'users?fields=username&fields=fullname&fields=mail&fields=mailbox-quota&fields=groups',
@@ -23,8 +22,8 @@ const [search, filteredUsers] = useSearch(
 )
 
 function downloadExport() {
-  const host = store.getters.host
-  window.open(`https://${host}/yunohost/api/users/export`, '_blank')
+  const { host } = useInfos()
+  window.open(`https://${host.value}/yunohost/api/users/export`, '_blank')
 }
 </script>
 

From 66f48649d2f4a6b74164c9979ddd3435e6be5be3 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 21:51:17 +0200
Subject: [PATCH 146/275] chore: mv store/data.ts to composables/data.ts

---
 app/src/{store => composables}/data.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename app/src/{store => composables}/data.ts (100%)

diff --git a/app/src/store/data.ts b/app/src/composables/data.ts
similarity index 100%
rename from app/src/store/data.ts
rename to app/src/composables/data.ts

From 13dc8de18255579f033a536544f018eb4af07514 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 23:09:35 +0200
Subject: [PATCH 147/275] refactor: turn data store to global state with cache
 handing

---
 app/src/api/api.ts          |  44 ++--
 app/src/api/handlers.ts     |   8 +-
 app/src/composables/data.ts | 486 +++++++++++++++---------------------
 app/src/types/core/data.ts  |  44 ++++
 4 files changed, 270 insertions(+), 312 deletions(-)
 create mode 100644 app/src/types/core/data.ts

diff --git a/app/src/api/api.ts b/app/src/api/api.ts
index 38878d5ec..ef739fa5d 100644
--- a/app/src/api/api.ts
+++ b/app/src/api/api.ts
@@ -1,3 +1,4 @@
+import { useCache, type StorePath } from '@/composables/data'
 import { useInfos } from '@/composables/useInfos'
 import {
   useRequests,
@@ -19,8 +20,7 @@ export type HumanKey = {
 export type APIQuery = {
   method?: RequestMethod
   uri: string
-  cachePath?: string
-  cacheParams?: Obj
+  cachePath?: StorePath
   data?: Obj
   humanKey?: string | HumanKey
   showModal?: boolean
@@ -95,11 +95,10 @@ export default {
    * @returns Promise that resolve the api response data
    * @throws Throw an `APIError` or subclass depending on server response
    */
-  async fetch<T extends any = Obj | string>({
+  async fetch<T extends any = any>({
     uri,
     method = 'GET',
     cachePath = undefined,
-    cacheParams = undefined,
     data = undefined,
     humanKey = undefined,
     showModal = method !== 'GET',
@@ -107,6 +106,9 @@ export default {
     initial = false,
     asFormData = true,
   }: APIQuery): Promise<T> {
+    const cache = cachePath ? useCache<T>(method, cachePath) : undefined
+    if (method === 'GET' && cache?.content) return cache.content
+
     const { locale } = useSettings()
     const { startRequest, endRequest } = useRequests()
 
@@ -136,14 +138,18 @@ export default {
     }
 
     const response = await fetch('/yunohost/api/' + uri, options)
-    const responseData = await getResponseData(response)
-    endRequest({ request, success: response.ok })
 
     if (!response.ok) {
-      throw getError(request, response, responseData as string | APIErrorData)
+      const errorData = await getResponseData<string | APIErrorData>(response)
+      endRequest({ request, success: false })
+      throw getError(request, response, errorData)
     }
 
-    return responseData as T
+    const responseData = await getResponseData<T>(response)
+    cache?.update(responseData)
+    endRequest({ request, success: true })
+
+    return responseData
   },
 
   /**
@@ -158,18 +164,18 @@ export default {
    * @returns Promise that resolves an array of server responses
    * @throws Throw an `APIError` or subclass depending on server response
    */
-  async fetchAll(
+  async fetchAll<T extends any[] = any[]>(
     queries: APIQuery[],
     { showModal = false, initial = false } = {},
-  ) {
-    const results: Array<Obj | string> = []
+  ): Promise<T> {
+    const results = []
     for (const query of queries) {
       if (showModal) query.showModal = true
       if (initial) query.initial = true
       results.push(await this.fetch(query))
     }
 
-    return results
+    return results as T
   },
 
   /**
@@ -180,7 +186,7 @@ export default {
    * @returns Promise that resolve the api response data or an error
    * @throws Throw an `APIError` or subclass depending on server response
    */
-  get<T extends any = Obj | string>(
+  get<T extends any = any>(
     query: string | Omit<APIQuery, 'method' | 'data'>,
   ): Promise<T> {
     return this.fetch(typeof query === 'string' ? { uri: query } : query)
@@ -194,9 +200,7 @@ export default {
    * @returns Promise that resolve the api response data or an error
    * @throws Throw an `APIError` or subclass depending on server response
    */
-  post<T extends any = Obj | string>(
-    query: Omit<APIQuery, 'method'>,
-  ): Promise<T> {
+  post<T extends any = any>(query: Omit<APIQuery, 'method'>): Promise<T> {
     return this.fetch({ ...query, method: 'POST' })
   },
 
@@ -208,9 +212,7 @@ export default {
    * @returns Promise that resolve the api response data or an error
    * @throws Throw an `APIError` or subclass depending on server response
    */
-  put<T extends any = Obj | string>(
-    query: Omit<APIQuery, 'method'>,
-  ): Promise<T> {
+  put<T extends any = any>(query: Omit<APIQuery, 'method'>): Promise<T> {
     return this.fetch({ ...query, method: 'PUT' })
   },
 
@@ -222,9 +224,7 @@ export default {
    * @returns Promise that resolve the api response data or an error
    * @throws Throw an `APIError` or subclass depending on server response
    */
-  delete<T extends any = Obj | string>(
-    query: Omit<APIQuery, 'method'>,
-  ): Promise<T> {
+  delete<T extends any = any>(query: Omit<APIQuery, 'method'>): Promise<T> {
     return this.fetch({ ...query, method: 'DELETE' })
   },
 
diff --git a/app/src/api/handlers.ts b/app/src/api/handlers.ts
index e4e5c1cd1..dfed54195 100644
--- a/app/src/api/handlers.ts
+++ b/app/src/api/handlers.ts
@@ -20,13 +20,15 @@ import type { APIErrorData } from './api'
  * @param response - A fetch `Response` object.
  * @returns Parsed response's json or response's text.
  */
-export async function getResponseData(response: Response) {
+export async function getResponseData<T extends any = any>(
+  response: Response,
+): Promise<T> {
   // FIXME the api should always return json as response
   const responseText = await response.text()
   try {
-    return JSON.parse(responseText) as Obj
+    return JSON.parse(responseText)
   } catch {
-    return responseText
+    return responseText as T
   }
 }
 
diff --git a/app/src/composables/data.ts b/app/src/composables/data.ts
index e778f72ee..2e9e3b29e 100644
--- a/app/src/composables/data.ts
+++ b/app/src/composables/data.ts
@@ -1,312 +1,224 @@
-import api from '@/api'
-import { isEmptyValue } from '@/helpers/commons'
-import { stratify } from '@/helpers/data/tree'
-import { reactive } from 'vue'
-
-export function getParentDomain(domain, domains, highest = false) {
-  const method = highest ? 'lastIndexOf' : 'indexOf'
-  let i = domain[method]('.')
-  while (i !== -1) {
-    const dn = domain.slice(i + 1)
-    if (domains.includes(dn)) return dn
-    i = domain[method]('.', i + (highest ? -1 : 1))
-  }
+import { createGlobalState } from '@vueuse/core'
+import { computed, reactive, ref, toValue, type MaybeRefOrGetter } from 'vue'
 
-  return null
+import type { RequestMethod } from '@/api/api'
+import { isObjectLiteral } from '@/helpers/commons'
+import { stratify } from '@/helpers/data/tree'
+import type { Obj } from '@/types/commons'
+import type {
+  DomainDetail,
+  Group,
+  Permission,
+  UserDetails,
+  UserItem,
+} from '@/types/core/data'
+
+function arrayOrNull<T extends any[]>(items: T): T | null {
+  return items.length ? items : null
 }
 
-export default {
-  state: () => ({
-    main_domain: undefined,
-    domains: undefined, // Array
-    domains_details: {},
-    users: undefined, // basic user data: Object {username: {data}}
-    users_details: {}, // precise user data: Object {username: {data}}
-    groups: undefined,
-    permissions: undefined,
-  }),
-
-  mutations: {
-    SET_DOMAINS(state, [{ domains, main }]) {
-      state.domains = domains
-      state.main_domain = main
-    },
-
-    SET_DOMAINS_DETAILS(state, [name, details]) {
-      state.domains_details[name] = details
-    },
-
-    UPDATE_DOMAINS_DETAILS(state, payload) {
-      // FIXME use a common function to execute the same code ?
-      this.commit('SET_DOMAINS_DETAILS', payload)
-    },
-
-    DEL_DOMAINS_DETAILS(state, [name]) {
-      delete state.domains_details[name]
-      if (state.domains) {
-        delete state.domains[name]
-      }
-    },
-
-    ADD_DOMAINS(state, [{ domain }]) {
-      state.domains.push(domain)
-    },
-
-    DEL_DOMAINS(state, [domain]) {
-      state.domains.splice(state.domains.indexOf(domain), 1)
-    },
-
-    // Now applied thru 'SET_DOMAINS'
-    // 'SET_MAIN_DOMAIN' (state, [response]) {
-    //   state.main_domain = response.current_main_domain
-    // },
-
-    UPDATE_MAIN_DOMAIN(state, [domain]) {
-      state.main_domain = domain
-    },
-
-    SET_USERS(state, [users]) {
-      state.users = users || null
-    },
-
-    ADD_USERS(state, [user]) {
-      if (!state.users) state.users = {}
-      state.users[user.username] = user
-    },
-
-    SET_USERS_DETAILS(state, [username, userData]) {
-      state.users_details[username] = userData
-      if (!state.users) return
-      const user = state.users[username]
-      for (const key of ['fullname', 'mail']) {
-        if (user[key] !== userData[key]) {
-          user[key] = userData[key]
-        }
-      }
-    },
-
-    UPDATE_USERS_DETAILS(state, payload) {
-      // FIXME use a common function to execute the same code ?
-      this.commit('SET_USERS_DETAILS', payload)
-    },
-
-    DEL_USERS_DETAILS(state, [username]) {
-      delete state.users_details[username]
-      if (state.users) {
-        delete state.users[username]
-        if (Object.keys(state.users).length === 0) {
-          state.users = null
+const useData = createGlobalState(() => {
+  const users = ref<Obj<UserItem>>({})
+  const userDetails = ref<Obj<UserDetails>>({})
+  const groups = ref<Obj<Group>>({})
+  const permissions = ref<Obj<Permission>>({})
+  const mainDomain = ref<string | undefined>()
+  const domains = ref<string[] | undefined>()
+  const domainDetails = ref<Obj<DomainDetail>>({})
+
+  function update(
+    method: RequestMethod,
+    payload: any,
+    key: DataKeys,
+    param?: string,
+  ) {
+    if (key === 'users') {
+      if (method === 'GET') users.value = payload.users
+      else if (method === 'POST')
+        users.value[payload.username] = {
+          ...payload,
+          'mailbox-quota': 'Pas de quota',
+          groups: [],
         }
+    } else if (key === 'userDetails' && param) {
+      if (method === 'GET' || method === 'PUT') {
+        userDetails.value[param] = payload[param]
+      } else if (method === 'DELETE') {
+        delete userDetails.value[param]
+        delete users.value[param]
       }
-    },
-
-    SET_GROUPS(state, [groups]) {
-      state.groups = groups
-    },
-
-    ADD_GROUPS(state, [{ name }]) {
-      if (state.groups !== undefined) {
-        state.groups[name] = { members: [], permissions: [] }
+    } else if (key === 'permissions') {
+      if (method === 'GET') {
+        permissions.value = payload.permissions
+      } else if (method === 'PUT' && param) {
+        permissions.value[param] = payload
       }
-    },
-
-    UPDATE_GROUPS(state, [data, { groupName }]) {
-      state.groups[groupName] = data
-    },
-
-    DEL_GROUPS(state, [groupname]) {
-      delete state.groups[groupname]
-    },
-
-    SET_PERMISSIONS(state, [permissions]) {
-      state.permissions = permissions
-    },
-
-    UPDATE_PERMISSIONS(state, [_, { groupName, action, permId }]) {
-      // FIXME hacky way to update the store
-      const permissions = state.groups[groupName].permissions
-      if (action === 'add') {
-        permissions.push(permId)
-      } else if (action === 'remove') {
-        const index = permissions.indexOf(permId)
-        if (index > -1) permissions.splice(index, 1)
+    } else if (key === 'groups') {
+      if (method === 'GET') {
+        groups.value = payload.groups
+      } else if (method === 'POST') {
+        groups.value[payload.name] = { members: [], permissions: [] }
+      } else if (method === 'PUT' && param) {
+        groups.value[param] = payload
+      } else if (method === 'DELETE' && param) {
+        delete groups.value[param]
       }
-    },
-  },
-
-  actions: {
-    GET(
-      { state, commit, rootState },
-      {
-        uri,
-        param,
-        storeKey = uri,
-        humanKey,
-        noCache,
-        options,
-        ...extraParams
-      },
-    ) {
-      const currentState = param ? state[storeKey][param] : state[storeKey]
-      // if data has already been queried, simply return
-      const ignoreCache = !rootState.cache || noCache || false
-      if (currentState !== undefined && !ignoreCache) return currentState
-      return api
-        .fetch('GET', param ? `${uri}/${param}` : uri, null, humanKey, options)
-        .then((responseData) => {
-          // FIXME here's an ugly fix to be able to also cache the main domain when querying domains
-          const data =
-            storeKey === 'domains'
-              ? responseData
-              : responseData[storeKey]
-                ? responseData[storeKey]
-                : responseData
-          commit(
-            'SET_' + storeKey.toUpperCase(),
-            [param, data, extraParams].filter((item) => !isEmptyValue(item)),
-          )
-          return param ? state[storeKey][param] : state[storeKey]
-        })
-    },
-
-    POST(
-      { state, commit },
-      { uri, storeKey = uri, data, humanKey, options, ...extraParams },
-    ) {
-      return api
-        .fetch('POST', uri, data, humanKey, options)
-        .then((responseData) => {
-          // FIXME api/domains returns null
-          if (responseData === null) responseData = data
-          responseData = responseData[storeKey]
-            ? responseData[storeKey]
-            : responseData
-          commit(
-            'ADD_' + storeKey.toUpperCase(),
-            [responseData, extraParams].filter((item) => !isEmptyValue(item)),
-          )
-          return state[storeKey]
-        })
-    },
-
-    PUT(
-      { state, commit },
-      { uri, param, storeKey = uri, data, humanKey, options, ...extraParams },
-    ) {
-      return api
-        .fetch('PUT', param ? `${uri}/${param}` : uri, data, humanKey, options)
-        .then((responseData) => {
-          const data = responseData[storeKey]
-            ? responseData[storeKey]
-            : responseData
-          commit(
-            'UPDATE_' + storeKey.toUpperCase(),
-            [param, data, extraParams].filter((item) => !isEmptyValue(item)),
-          )
-          return param ? state[storeKey][param] : state[storeKey]
-        })
-    },
-
-    DELETE(
-      { commit },
-      { uri, param, storeKey = uri, data, humanKey, options, ...extraParams },
-    ) {
-      return api
-        .fetch(
-          'DELETE',
-          param ? `${uri}/${param}` : uri,
-          data,
-          humanKey,
-          options,
-        )
-        .then(() => {
-          commit(
-            'DEL_' + storeKey.toUpperCase(),
-            [param, extraParams].filter((item) => !isEmptyValue(item)),
-          )
-        })
-    },
-
-    RESET_CACHE_DATA({ state }, keys = Object.keys(state)) {
-      for (const key of keys) {
-        if (key === 'users_details') {
-          state[key] = {}
-        } else {
-          state[key] = undefined
+    } else if (key === 'domains') {
+      if (method === 'GET') {
+        domains.value = payload.domains
+        mainDomain.value = payload.main
+      } else if (param) {
+        if (method === 'POST') {
+          // FIXME api should at least return the domain name on
+          domains.value?.push(param)
+        } else if (method === 'PUT') {
+          mainDomain.value = param
+        } else if (method === 'DELETE') {
+          domains.value?.splice(domains.value.indexOf(param), 1)
+          delete domainDetails.value[param]
         }
       }
-    },
-  },
-
-  getters: {
-    users: (state) => {
-      if (state.users) return Object.values(state.users)
-      return state.users
-    },
-
-    userNames: (state) => {
-      if (state.users) return Object.keys(state.users)
-      return []
-    },
-
-    user: (state) => (name) => state.users_details[name], // not cached
-
-    domains: (state) => state.domains,
+    } else if (key === 'domainDetails' && param && method === 'GET') {
+      domainDetails.value[param] = payload
+    }
+
+    // FIXME rm?
+    throw new Error(
+      `couldnt update the cache, key: ${key}, method: ${method}, param: ${param}`,
+    )
+  }
 
-    orderedDomains: (state) => {
-      if (!state.domains) return
+  return {
+    users,
+    userDetails,
+    groups,
+    permissions,
 
-      const splittedDomains = Object.fromEntries(
-        state.domains.map((domain) => {
-          // Keep the main part of the domain and the extension together
-          // eg: this.is.an.example.com -> ['example.com', 'an', 'is', 'this']
-          domain = domain.split('.')
-          domain.push(domain.pop() + domain.pop())
-          return [domain, domain.reverse()]
-        }),
-      )
+    mainDomain,
+    domains,
+    domainDetails,
 
-      return state.domains.sort(
-        (a, b) => splittedDomains[a] > splittedDomains[b],
-      )
-    },
+    update,
+  }
+})
+
+export function useUsersAndGroups(username?: MaybeRefOrGetter<string>) {
+  const { users, userDetails } = useData()
+  return {
+    users: computed(() => {
+      return arrayOrNull(Object.values(users.value))
+    }),
+    usernames: computed(() => {
+      return arrayOrNull(Object.keys(users.value))
+    }),
+    user: computed(() => {
+      if (!username) return
+      return userDetails.value[toValue(username)]
+    }),
+  }
+}
 
-    domainsTree: (state, getters) => {
-      // This getter will not return any reactive data, make sure to assign its output
-      // to a component's `data`.
-      // FIXME manage to store the result in the store to allow reactive data (trigger an
-      // action when state.domain change)
-      const domains = getters.orderedDomains
+export function useDomains(domain_?: MaybeRefOrGetter<string>) {
+  const { mainDomain, domains, domainDetails } = useData()
+
+  const orderedDomains = computed(() => {
+    if (!domains.value) return
+
+    const splittedDomains = Object.fromEntries(
+      domains.value.map((domain) => {
+        // Keep the main part of the domain and the extension together
+        // eg: this.is.an.example.com -> ['example.com', 'an', 'is', 'this']
+        const domainParts = domain.split('.')
+        domainParts.push(domainParts.pop()! + domainParts.pop()!)
+        return [domain, domainParts.reverse()]
+      }),
+    )
+
+    return domains.value.sort((a, b) =>
+      splittedDomains[a] > splittedDomains[b] ? 1 : -1,
+    )
+  })
+
+  return {
+    mainDomain,
+    domain: computed(() => {
+      if (!domain_) return
+      return domainDetails.value[toValue(domain_)]
+    }),
+    domains,
+    domainsAsChoices: computed(() => {
+      return domains.value?.map((domain) => ({
+        value: domain,
+        text: domain === mainDomain.value ? domain + ' ★' : domain,
+      }))
+    }),
+    orderedDomains,
+    domainsTree: computed(() => {
+      const domains = orderedDomains.value
       if (!domains) return
       const dataset = reactive(
-        domains.map((name) => ({
+        domains.map((domain) => ({
           // data to build a hierarchy
-          name,
-          parent: getParentDomain(name, domains),
+          name: domain,
+          parent: domainDetails.value[domain].topest_parent,
           // utility data that will be used by `RecursiveListGroup` component
-          to: { name: 'domain-info', params: { name } },
+          to: { name: 'domain-info', params: { name: domain } },
           opened: true,
         })),
       )
       return stratify(dataset)
-    },
-
-    domain: (state) => (name) => state.domains_details[name],
+    }),
+  }
+}
 
-    highestDomainParentName: (state, getters) => (name) => {
-      return getParentDomain(name, getters.orderedDomains, true)
-    },
+type StoreKeys = 'users' | 'permissions' | 'groups' | 'mainDomain' | 'domains'
+type StoreKeysParam =
+  | 'userDetails'
+  | 'groups'
+  | 'permissions'
+  | 'mainDomain'
+  | 'domainDetails'
+  | 'domains'
+type DataKeys = StoreKeys | StoreKeysParam
+export type StorePath = `${StoreKeys}` | `${StoreKeysParam}.${string}`
+
+export function useCache<T extends any = any>(
+  method: RequestMethod,
+  cachePath: StorePath,
+) {
+  const [key, param] = cachePath.split('.') as
+    | [StoreKeys, undefined]
+    | [StoreKeysParam, string]
+  const data = useData()
+  // FIXME get global cache policy setting
+  // Add noCache arg? not used
+
+  if (!(key in data)) {
+    throw new Error('Trying to get cache of inexistant data')
+  }
+  const d = data[key].value
+  let content = d as T
+  if (param) {
+    if (isObjectLiteral(d) && !Array.isArray(d)) {
+      content = d[param] as T
+    } else {
+      throw new Error('Trying to get param on non object data')
+    }
+  }
 
-    mainDomain: (state) => state.main_domain,
+  return {
+    content,
+    update: (payload: T) => data.update(method, payload, key, param),
+  }
+}
 
-    domainsAsChoices: (state) => {
-      const mainDomain = state.main_domain
-      return state.domains.map((domain) => {
-        return {
-          value: domain,
-          text: domain === mainDomain ? domain + ' ★' : domain,
-        }
-      })
-    },
-  },
+export function resetCache(keys: DataKeys[]) {
+  const data = useData()
+  for (const key of keys) {
+    if (['domains', 'mainDomain'].includes(key)) {
+      data[key].value = undefined
+    } else {
+      data[key].value = {}
+    }
+  }
 }
diff --git a/app/src/types/core/data.ts b/app/src/types/core/data.ts
new file mode 100644
index 000000000..4c92c16e5
--- /dev/null
+++ b/app/src/types/core/data.ts
@@ -0,0 +1,44 @@
+export type UserItem = {
+  username: string
+  fullname: string
+  mail: string
+  'mailbox-quota': string
+  groups: string[]
+}
+export type UserDetails = {
+  username: string
+  fullname: string
+  mail: string
+  'mail-aliases': string[]
+  'mail-forward': string[]
+  'mailbox-quota': { limit: string; use: string }
+}
+export type Permission = {
+  allowed: string[]
+  corresponding_users: string[]
+  auth_header: boolean
+  label: string
+  show_tile: boolean
+  protected: boolean
+  url: string | null
+  additional_urls: string[]
+}
+export type Group = {
+  members: string[]
+  permissions: string[]
+}
+export type DomainDetail = {
+  certificate: {
+    subject: string
+    CA_name: string
+    CA_type: string // enumlike
+    validity: number
+    style: string // enumlike
+    summary: string // enum
+    ACME_eligible: boolean
+  }
+  registrar: string // or null ?
+  apps: { name: string; id: string; path: string }[]
+  main: boolean
+  topest_parent: string | null
+}

From b3df5040cca54337fb09f9c6b74be4214451accc Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 5 Aug 2024 23:18:34 +0200
Subject: [PATCH 148/275] refactor: update api calls 'cachePath' +
 useInitialQueries

---
 app/src/composables/useInfos.ts          |  2 +-
 app/src/composables/useInitialQueries.ts | 15 ++++++---------
 app/src/views/domain/DomainAdd.vue       |  2 +-
 app/src/views/domain/DomainInfo.vue      |  8 +++-----
 app/src/views/group/GroupList.vue        | 11 ++++-------
 app/src/views/user/UserEdit.vue          |  6 ++----
 app/src/views/user/UserInfo.vue          |  6 ++----
 7 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/app/src/composables/useInfos.ts b/app/src/composables/useInfos.ts
index 46891d9e1..eab033244 100644
--- a/app/src/composables/useInfos.ts
+++ b/app/src/composables/useInfos.ts
@@ -72,7 +72,7 @@ export const useInfos = createGlobalState(() => {
     // and login prompt will be shown automaticly
     await getYunoHostVersion()
     connected.value = true
-    await api.get({ uri: 'domains', cachePath: 'domainList' })
+    await api.get({ uri: 'domains', cachePath: 'domains' })
   }
 
   function onLogout(route?: RouteLocationNormalizedLoaded) {
diff --git a/app/src/composables/useInitialQueries.ts b/app/src/composables/useInitialQueries.ts
index d3c21067e..1ccea7ba3 100644
--- a/app/src/composables/useInitialQueries.ts
+++ b/app/src/composables/useInitialQueries.ts
@@ -3,32 +3,29 @@ import { ref, toValue } from 'vue'
 
 import type { APIQuery } from '@/api/api'
 import api from '@/api/api'
-import type { Obj } from '@/types/commons'
 
-export function useInitialQueries<
-  ResponsesType extends (Obj | string)[] = Obj[],
->(
+export function useInitialQueries<T extends any[] = any[]>(
   queries: MaybeRefOrGetter<APIQuery[]> | ComputedRef<APIQuery[]>,
   {
     onQueriesResponse,
     showModal = false,
   }: {
-    onQueriesResponse?: (...responses: ResponsesType) => Promise<void> | void
+    onQueriesResponse?: (...responses: T) => Promise<void> | void
     showModal?: boolean
   } = {},
 ) {
   const loading = ref(true)
-  const responses: Ref<ResponsesType | null> = ref(null)
+  const responses: Ref<T | null> = ref(null)
   // FIXME watch `queries` to call on change?
 
   function call(triggerLoading = true) {
     if (triggerLoading) loading.value = true
     return api
-      .fetchAll(toValue(queries), { showModal, initial: true })
+      .fetchAll<T>(toValue(queries), { showModal, initial: true })
       .then(async (responses_) => {
-        responses.value = responses_ as ResponsesType
+        responses.value = responses_
         if (onQueriesResponse) {
-          await onQueriesResponse(...(responses_ as ResponsesType))
+          await onQueriesResponse(...responses_)
         }
         loading.value = false
         return responses
diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/domain/DomainAdd.vue
index 284c806af..4f8ccb22c 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -19,7 +19,7 @@ function onSubmit(data) {
   api
     .post({
       uri: 'domains',
-      cachePath: 'domains',
+      cachePath: `domains.${data.domain}`,
       data,
       humanKey: { key: 'domains.add', name: data.domain },
     })
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index a569678a0..4d63fa40a 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -32,8 +32,7 @@ const { loading, refetch } = useInitialQueries(
     { uri: 'domains', cachePath: 'domains' },
     {
       uri: `domains/${props.name}`,
-      cachePath: 'domains_details',
-      cacheParams: { domain: props.name },
+      cachePath: `domainDetails.${props.name}`,
     },
     { uri: `domains/${props.name}/config?full` },
   ],
@@ -120,8 +119,7 @@ async function deleteDomain() {
   api
     .delete({
       uri: 'domains',
-      cachePath: 'domains',
-      cacheParams: { domain: props.name },
+      cachePath: `domains.${props.name}`,
       data,
       humanKey: {
         key: 'domains.delete',
@@ -140,7 +138,7 @@ async function setAsDefaultDomain() {
   api
     .put({
       uri: `domains/${props.name}/main`,
-      cachePath: 'main_domain',
+      cachePath: `mainDomain.${props.name}`,
       data: {},
       humanKey: { key: 'domains.set_default', name: props.name },
     })
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index e26687858..01726e2a9 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -120,12 +120,11 @@ async function onPermissionChanged({ option, groupName, action, applyMethod }) {
     )
     if (!confirmed) return
   }
-  // FIXME hacky way to update the store
+
   api
     .put({
       uri: `users/permissions/${permId}/${action}/${groupName}`,
-      cachePath: 'permissions',
-      cacheParams: { groupName, action, permId },
+      cachePath: `permissions.${permId}`,
       humanKey: { key: 'permissions.' + action, perm: option, name: groupName },
     })
     .then(() => applyMethod(option))
@@ -135,8 +134,7 @@ function onUserChanged({ option, groupName, action, applyMethod }) {
   api
     .put({
       uri: `users/groups/${groupName}/${action}/${option}`,
-      cachePath: 'groups',
-      cacheParams: { groupName },
+      cachePath: `groups.${groupName}`,
       humanKey: { key: 'groups.' + action, user: option, name: groupName },
     })
     .then(() => applyMethod(option))
@@ -156,8 +154,7 @@ async function deleteGroup(groupName) {
   api
     .delete({
       uri: `users/groups/${groupName}`,
-      cachePath: 'groups',
-      cacheParams: { groupName },
+      cachePath: `groups.${groupName}`,
       humanKey: { key: 'groups.delete', name: groupName },
     })
     .then(() => {
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 38156a0fa..b1de97be8 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -32,8 +32,7 @@ const { loading } = useInitialQueries(
   [
     {
       uri: `users/${props.name}`,
-      cachePath: 'users_details',
-      cacheParams: { username: props.name },
+      cachePath: `userDetails.${props.name}`,
     },
     { uri: 'domains', cachePath: 'domains' },
   ],
@@ -213,8 +212,7 @@ const onUserEdit = onSubmit(async (onError, serverErrors) => {
   api
     .put({
       uri: `users/${props.name}`,
-      cachePath: 'users_details',
-      cacheParams: { username: props.name },
+      cachePath: `userDetails.${props.name}`,
       data,
       humanKey: { key: 'users.update', name: props.name },
     })
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index fc8a596f8..d0731963d 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -12,8 +12,7 @@ const router = useRouter()
 const { loading } = useInitialQueries([
   {
     uri: `users/${props.name}`,
-    cachePath: 'users_details',
-    cacheParams: { username: props.name },
+    cachePath: `userDetails.${props.name}`,
   },
 ])
 
@@ -26,8 +25,7 @@ function deleteUser() {
   api
     .delete({
       uri: `users/${props.name}`,
-      cachePath: 'user_details',
-      cacheParams: { username: props.name },
+      cachePath: `userDetails.${props.name}`,
       data,
       humanKey: { key: 'users.delete', name: props.name },
     })

From de3c680d75bf59c6047c486ecb76a189f63a3bb2 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 6 Aug 2024 00:00:05 +0200
Subject: [PATCH 149/275] refactor: use data global state in views

---
 app/src/composables/useInfos.ts        |  4 +--
 app/src/composables/useSearch.ts       |  4 ++-
 app/src/views/_partials/DomainForm.vue |  4 +--
 app/src/views/app/AppInfo.vue          |  9 ++++--
 app/src/views/domain/DomainAdd.vue     |  2 --
 app/src/views/domain/DomainInfo.vue    | 38 ++++++--------------------
 app/src/views/domain/DomainList.vue    | 13 +++------
 app/src/views/user/UserCreate.vue      |  8 +++---
 app/src/views/user/UserEdit.vue        |  7 ++---
 app/src/views/user/UserImport.vue      | 11 ++------
 app/src/views/user/UserInfo.vue        |  7 ++---
 app/src/views/user/UserList.vue        |  9 ++----
 12 files changed, 42 insertions(+), 74 deletions(-)

diff --git a/app/src/composables/useInfos.ts b/app/src/composables/useInfos.ts
index eab033244..25d51bc0a 100644
--- a/app/src/composables/useInfos.ts
+++ b/app/src/composables/useInfos.ts
@@ -10,8 +10,8 @@ import { useRouter } from 'vue-router'
 import api from '@/api'
 import { isEmptyValue, timeout } from '@/helpers/commons'
 import i18n from '@/i18n'
-import { useStoreGetters } from '@/store/utils'
 import type { CustomRoute, RouteFromTo } from '@/types/commons'
+import { useDomains } from './data'
 import { useRequests, type ReconnectingArgs } from './useRequests'
 
 export const useInfos = createGlobalState(() => {
@@ -24,7 +24,7 @@ export const useInfos = createGlobalState(() => {
   const routerKey = ref<string | undefined>()
   const breadcrumb = ref<CustomRoute[]>([])
 
-  const { mainDomain } = useStoreGetters()
+  const { mainDomain } = useDomains()
   const ssoLink = computed(() => {
     return `//${mainDomain.value ?? host.value}/yunohost/sso`
   })
diff --git a/app/src/composables/useSearch.ts b/app/src/composables/useSearch.ts
index c701bb365..a0a3a27db 100644
--- a/app/src/composables/useSearch.ts
+++ b/app/src/composables/useSearch.ts
@@ -7,7 +7,9 @@ export function useSearch<
   T extends any[] | TreeRootNode,
   V extends T extends (infer V)[] ? V : AnyTreeNode,
 >(
-  items: MaybeRefOrGetter<T | undefined> | ComputedRef<T | undefined>,
+  items:
+    | MaybeRefOrGetter<T | null | undefined>
+    | ComputedRef<T | null | undefined>,
   filterFn: (search: string, item: V, index: number, arr: T) => boolean,
   {
     externalSearch,
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index e1a89c68f..86e54b381 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -2,6 +2,7 @@
 import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useDomains } from '@/composables/data'
 import { useForm } from '@/composables/form'
 import { asUnreffed } from '@/helpers/commons'
 import {
@@ -12,7 +13,6 @@ import {
   sameAs,
 } from '@/helpers/validators'
 import { formatForm } from '@/helpers/yunohostArguments'
-import { useStoreGetters } from '@/store/utils'
 import type { AdressModelValue, FieldProps, FormFieldDict } from '@/types/form'
 
 defineOptions({
@@ -36,7 +36,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
-const { domains } = useStoreGetters()
+const { domains } = useDomains()
 const dynDomains = ['nohost.me', 'noho.st', 'ynh.fr']
 
 const dynDnsForbiden = computed(() => {
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 92e9ba85e..f43976286 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -12,13 +12,13 @@ import type {
   OnPanelApply,
 } from '@/composables/configPanels'
 import { formatConfigPanels, useConfigPanels } from '@/composables/configPanels'
+import { useDomains } from '@/composables/data'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import { isEmptyValue } from '@/helpers/commons'
 import { humanPermissionName } from '@/helpers/filters/human'
 import { helpers, required } from '@/helpers/validators'
 import { formatI18nField } from '@/helpers/yunohostArguments'
-import { useStoreGetters } from '@/store/utils'
 import type { CoreConfigPanels } from '@/types/core/options'
 
 const props = defineProps<{
@@ -31,7 +31,7 @@ const route = useRoute()
 const router = useRouter()
 const modalConfirm = useAutoModal()
 
-const { domains } = useStoreGetters()
+const { domainsAsChoices } = useDomains()
 
 // FIXME
 type AppForm = {
@@ -526,7 +526,10 @@ async function uninstall() {
           <BInputGroup v-if="app.supports_change_url">
             <BInputGroupText>https://</BInputGroupText>
 
-            <BFormSelect v-model="form.url.domain" :options="domains" />
+            <BFormSelect
+              v-model="form.url.domain"
+              :options="domainsAsChoices"
+            />
 
             <BInputGroupText>/</BInputGroupText>
 
diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/domain/DomainAdd.vue
index 4f8ccb22c..23f41d942 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { useStore } from 'vuex'
 
 import api from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
@@ -24,7 +23,6 @@ function onSubmit(data) {
       humanKey: { key: 'domains.add', name: data.domain },
     })
     .then(() => {
-      store.dispatch('RESET_CACHE_DATA', ['domains'])
       router.push({ name: 'domain-list' })
     })
     .catch((err: APIError) => {
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 4d63fa40a..bd1f93893 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
-import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
 
 import api, { objectToParams } from '@/api'
 import ConfigPanelsComponent from '@/components/ConfigPanels.vue'
@@ -11,9 +10,9 @@ import type {
   OnPanelApply,
 } from '@/composables/configPanels'
 import { formatConfigPanels, useConfigPanels } from '@/composables/configPanels'
+import { useDomains } from '@/composables/data'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { useInitialQueries } from '@/composables/useInitialQueries'
-import { useStoreGetters } from '@/store/utils'
 import type { CoreConfigPanels } from '@/types/core/options'
 import DomainDns from '@/views/domain/DomainDns.vue'
 
@@ -24,8 +23,6 @@ const props = defineProps<{
 
 const { t } = useI18n()
 const router = useRouter()
-const route = useRoute()
-const store = useStore()
 const modalConfirm = useAutoModal()
 const { loading, refetch } = useInitialQueries(
   [
@@ -39,18 +36,10 @@ const { loading, refetch } = useInitialQueries(
   { onQueriesResponse },
 )
 
-const { mainDomain } = useStoreGetters()
+const { mainDomain, domain } = useDomains(() => props.name)
 const config = shallowRef<ConfigPanelsProps | undefined>()
 const unsubscribeDomainFromDyndns = ref(false)
 
-const domain = computed(() => {
-  return store.getters.domain(props.name)
-})
-
-const parentName = computed(() => {
-  return store.getters.highestDomainParentName(props.name)
-})
-
 const cert = computed(() => {
   const { CA_type: authority, validity } = domain.value.certificate
   const baseInfos = { authority, validity }
@@ -66,10 +55,6 @@ const cert = computed(() => {
   return { icon: 'exclamation', variant: 'warning', ...baseInfos }
 })
 
-const dns = computed(() => {
-  return domain.value.dns
-})
-
 const isMainDomain = computed(() => {
   if (!mainDomain.value) return
   return props.name === mainDomain.value
@@ -135,17 +120,12 @@ async function setAsDefaultDomain() {
   const confirmed = await modalConfirm(t('confirm_change_maindomain'))
   if (!confirmed) return
 
-  api
-    .put({
-      uri: `domains/${props.name}/main`,
-      cachePath: `mainDomain.${props.name}`,
-      data: {},
-      humanKey: { key: 'domains.set_default', name: props.name },
-    })
-    .then(() => {
-      // FIXME Have to commit by hand here since the response is empty (should return the given name)
-      store.commit('UPDATE_MAIN_DOMAIN', props.name)
-    })
+  api.put({
+    uri: `domains/${props.name}/main`,
+    cachePath: `mainDomain.${props.name}`,
+    data: {},
+    humanKey: { key: 'domains.set_default', name: props.name },
+  })
 }
 </script>
 
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index e183dd9a1..0572a2520 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -1,21 +1,16 @@
 <script setup lang="ts">
-import { useStoreGetters } from '@/store/utils'
-
 import RecursiveListGroup from '@/components/RecursiveListGroup.vue'
+import { useDomains } from '@/composables/data'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import { useSearch } from '@/composables/useSearch'
-import type { TreeRootNode } from '@/helpers/data/tree'
-import type { ComputedRef } from 'vue'
 
-const { mainDomain, domainsTree } = useStoreGetters()
 const { loading } = useInitialQueries([
   { uri: 'domains', cachePath: 'domains' },
 ])
+const { mainDomain, domainsTree } = useDomains()
 
-const [search, filteredTree] = useSearch(
-  // FIXME rm ts type when moved to pinia or else
-  domainsTree as ComputedRef<TreeRootNode | undefined>,
-  (s, node) => node.id.includes(s),
+const [search, filteredTree] = useSearch(domainsTree, (s, node) =>
+  node.id.includes(s),
 )
 </script>
 
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index 98eba9ac3..706323e76 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
+import { useDomains, useUsersAndGroups } from '@/composables/data'
 import { useForm } from '@/composables/form'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import { asUnreffed } from '@/helpers/commons'
@@ -16,7 +17,6 @@ import {
   unique,
 } from '@/helpers/validators'
 import { formatForm } from '@/helpers/yunohostArguments'
-import { useStoreGetters } from '@/store/utils'
 import type { FieldProps, FormFieldDict } from '@/types/form'
 
 const { t } = useI18n()
@@ -28,8 +28,8 @@ const { loading } = useInitialQueries(
   ],
   { onQueriesResponse },
 )
-
-const { userNames, domainsAsChoices, mainDomain } = useStoreGetters()
+const { usernames } = useUsersAndGroups()
+const { domainsAsChoices, mainDomain } = useDomains()
 
 type Form = typeof form.value
 const form = ref({
@@ -47,7 +47,7 @@ const fields = {
       computed(() => ({
         required,
         alphalownumdot_,
-        notInUsers: unique(userNames),
+        notInUsers: unique(usernames),
       })),
     ),
     props: {
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index b1de97be8..f9b86e43c 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router'
 
 import api from '@/api'
 import type ViewBase from '@/components/globals/ViewBase.vue'
+import { useDomains, useUsersAndGroups } from '@/composables/data'
 import { useArrayRule, useForm } from '@/composables/form'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import { arrayDiff, asUnreffed } from '@/helpers/commons'
@@ -19,7 +20,6 @@ import {
   sameAs,
 } from '@/helpers/validators'
 import { formatAdress, formatForm, sizeToM } from '@/helpers/yunohostArguments'
-import { useStoreGetters } from '@/store/utils'
 import type { AdressModelValue, FieldProps, FormFieldDict } from '@/types/form'
 
 const props = defineProps<{
@@ -41,7 +41,7 @@ const { loading } = useInitialQueries(
 
 const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
 
-const { user, domainsAsChoices, mainDomain } = useStoreGetters()
+const { domainsAsChoices, mainDomain } = useDomains()
 
 type Form = typeof form.value
 const form = ref({
@@ -174,8 +174,7 @@ const onUserEdit = onSubmit(async (onError, serverErrors) => {
   const { username: _, ...formData } = await formatForm(form, {
     removeEmpty: true,
   })
-  // FIXME not sure computed can be executed?
-  const user_ = user.value(props.name)
+  const user_ = useUsersAndGroups(props.name).user.value!
   const data = {}
   if (!Object.prototype.hasOwnProperty.call(formData, 'mailbox_quota')) {
     formData.mailbox_quota = ''
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index 391f28c80..8bd393d63 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -2,9 +2,9 @@
 import { reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import { useStore } from 'vuex'
 
 import api from '@/api'
+import { resetCache } from '@/composables/data'
 import { useForm } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { required } from '@/helpers/validators'
@@ -13,7 +13,6 @@ import type { FieldProps, FileModelValue, FormFieldDict } from '@/types/form'
 
 const { t } = useI18n()
 const router = useRouter()
-const store = useStore()
 const modalConfirm = useAutoModal()
 
 type Form = typeof form.value
@@ -69,16 +68,12 @@ const onUserImport = onSubmit(async (onError) => {
   if (!requestArgs.delete) delete requestArgs.delete
   if (!requestArgs.update) delete requestArgs.update
   const data = await formatForm(requestArgs)
+
   api
     .post({ uri: 'users/import', data })
     .then(() => {
       // Reset all cached data related to users.
-      store.dispatch('RESET_CACHE_DATA', [
-        'users',
-        'users_details',
-        'groups',
-        'permissions',
-      ])
+      resetCache(['users', 'userDetails', 'groups', 'permissions'])
       router.push({ name: 'user-list' })
     })
     .catch(onError)
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index d0731963d..40ab77cd9 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
+import { useUsersAndGroups } from '@/composables/data'
 import { useInitialQueries } from '@/composables/useInitialQueries'
-import { useStoreGetters } from '@/store/utils'
 
 const props = defineProps<{ name: string }>()
 
@@ -16,9 +16,8 @@ const { loading } = useInitialQueries([
   },
 ])
 
-const { user: userGetter } = useStoreGetters()
+const { user } = useUsersAndGroups(() => props.name)
 const purge = ref(false)
-const user = computed(() => userGetter.value(props.name))
 
 function deleteUser() {
   const data = purge.value ? { purge: '' } : {}
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 7ab5445f0..25f94ffdd 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { type ComputedRef } from 'vue'
-
+import { useUsersAndGroups } from '@/composables/data'
 import { useInfos } from '@/composables/useInfos'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import { useSearch } from '@/composables/useSearch'
-import { useStoreGetters } from '@/store/utils'
-import type { Obj } from '@/types/commons'
 
 const { loading } = useInitialQueries([
   {
@@ -14,9 +11,9 @@ const { loading } = useInitialQueries([
   },
 ])
 
-const { users } = useStoreGetters()
+const { users } = useUsersAndGroups()
 const [search, filteredUsers] = useSearch(
-  users as ComputedRef<Obj[] | undefined>,
+  users,
   (s, user) =>
     user.username.toLowerCase().includes(s) || user.groups.includes(s),
 )

From 1b14c78195e746df08ff546ff3aa3bc108eecffa Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 6 Aug 2024 00:15:25 +0200
Subject: [PATCH 150/275] chore: rm remaning stores and vuex

---
 app/overrides.d.ts        |  7 ---
 app/package.json          |  3 +-
 app/src/main.ts           |  2 -
 app/src/store/index.ts    | 16 -------
 app/src/store/settings.ts | 93 ---------------------------------------
 app/src/store/utils.ts    | 57 ------------------------
 app/vite.config.ts        |  2 +-
 7 files changed, 2 insertions(+), 178 deletions(-)
 delete mode 100644 app/src/store/index.ts
 delete mode 100644 app/src/store/settings.ts
 delete mode 100644 app/src/store/utils.ts

diff --git a/app/overrides.d.ts b/app/overrides.d.ts
index a730147d2..1dd222c23 100644
--- a/app/overrides.d.ts
+++ b/app/overrides.d.ts
@@ -1,12 +1,5 @@
 import 'vue-router'
 
-declare module 'vuex' {
-  export * from 'vuex/types/index.d.ts'
-  export * from 'vuex/types/helpers.d.ts'
-  export * from 'vuex/types/logger.d.ts'
-  export * from 'vuex/types/vue.d.ts'
-}
-
 declare module 'vue-router' {
   interface RouteMeta {
     noAuth?: boolean
diff --git a/app/package.json b/app/package.json
index 120706c61..24dfcbf4f 100644
--- a/app/package.json
+++ b/app/package.json
@@ -26,8 +26,7 @@
     "vue": "^3.4.21",
     "vue-i18n": "^9.10.1",
     "vue-router": "^4.3.0",
-    "vue-showdown": "^4.2.0",
-    "vuex": "^4.1.0"
+    "vue-showdown": "^4.2.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
diff --git a/app/src/main.ts b/app/src/main.ts
index 92e1252d0..ece197e65 100644
--- a/app/src/main.ts
+++ b/app/src/main.ts
@@ -9,7 +9,6 @@ import { useRequests } from './composables/useRequests'
 import { useSettings } from './composables/useSettings'
 import i18n from './i18n'
 import router from './router'
-import store from './store'
 
 import '@/scss/main.scss'
 
@@ -35,7 +34,6 @@ window.addEventListener('unhandledrejection', (e) => {
   onError(e.reason)
 })
 
-app.use(store)
 app.use(router)
 app.use(i18n)
 
diff --git a/app/src/store/index.ts b/app/src/store/index.ts
deleted file mode 100644
index 1aff80779..000000000
--- a/app/src/store/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createStore } from 'vuex'
-
-import info from './info'
-import settings from './settings'
-import data from './data'
-
-export default createStore({
-  state: settings.state,
-  mutations: settings.mutations,
-  actions: settings.actions,
-  getters: settings.getters,
-  modules: {
-    info,
-    data,
-  },
-})
diff --git a/app/src/store/settings.ts b/app/src/store/settings.ts
deleted file mode 100644
index 8407b2588..000000000
--- a/app/src/store/settings.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * Settings module store.
- * @module store/settings
- */
-
-import { setI18nLocale, setI18nFallbackLocale } from '@/i18n/helpers'
-import supportedLocales from '@/i18n/supportedLocales'
-
-export default {
-  state: {
-    locale: localStorage.getItem('locale'),
-    fallbackLocale: localStorage.getItem('fallbackLocale'),
-    cache: localStorage.getItem('cache') !== 'false',
-    transitions: localStorage.getItem('transitions') !== 'false',
-    dark: localStorage.getItem('dark') === 'true',
-    experimental: localStorage.getItem('experimental') === 'true',
-    spinner: 'pacman',
-  },
-
-  mutations: {
-    SET_LOCALE(state, locale) {
-      localStorage.setItem('locale', locale)
-      state.locale = locale
-    },
-
-    SET_FALLBACKLOCALE(state, locale) {
-      localStorage.setItem('fallbackLocale', locale)
-      state.fallbackLocale = locale
-    },
-
-    SET_CACHE(state, boolean) {
-      localStorage.setItem('cache', boolean)
-      state.cache = boolean
-    },
-
-    SET_TRANSITIONS(state, boolean) {
-      localStorage.setItem('transitions', boolean)
-      state.transitions = boolean
-    },
-
-    SET_EXPERIMENTAL(state, boolean) {
-      localStorage.setItem('experimental', boolean)
-      state.experimental = boolean
-    },
-
-    SET_SPINNER(state, spinner) {
-      state.spinner = spinner
-    },
-
-    SET_DARK(state, boolean) {
-      localStorage.setItem('dark', boolean)
-      state.dark = boolean
-      document.documentElement.setAttribute(
-        'data-bs-theme',
-        boolean ? 'dark' : 'light',
-      )
-    },
-  },
-
-  actions: {
-    UPDATE_LOCALE({ commit }, locale) {
-      return setI18nLocale(locale).then(() => {
-        commit('SET_LOCALE', locale)
-      })
-    },
-
-    UPDATE_FALLBACKLOCALE({ commit }, locale) {
-      return setI18nFallbackLocale(locale).then(() => {
-        commit('SET_FALLBACKLOCALE', locale)
-      })
-    },
-
-    UPDATE_DARK({ commit }, boolean) {
-      commit('SET_DARK', boolean)
-    },
-  },
-
-  getters: {
-    locale: (state) => state.locale,
-    fallbackLocale: (state) => state.fallbackLocale,
-    cache: (state) => state.cache,
-    transitions: (state) => state.transitions,
-    dark: (state) => state.dark,
-    experimental: (state) => state.experimental,
-    spinner: (state) => state.spinner,
-
-    availableLocales: () => {
-      return Object.entries(supportedLocales).map(([locale, { name }]) => {
-        return { value: locale, text: name }
-      })
-    },
-  },
-}
diff --git a/app/src/store/utils.ts b/app/src/store/utils.ts
deleted file mode 100644
index 448f9c654..000000000
--- a/app/src/store/utils.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { WritableComputedRef } from 'vue'
-import { computed } from 'vue'
-import { useStore } from 'vuex'
-
-import type {
-  AnyWritableComponents,
-  FormField,
-  FormFieldDict,
-} from '@/types/form'
-
-export function useStoreGetters() {
-  const store = useStore()
-  return Object.fromEntries(
-    Object.keys(store.getters).map((getter) => [
-      getter,
-      computed(() => store.getters[getter]),
-    ]),
-  )
-}
-
-/**
- * Dynamicly generate computed properties from store with get/set and automatic commit/dispatch
- */
-export function useMapStoreGetSet<FFD extends FormFieldDict>({
-  commit = [],
-  dispatch = [],
-}: {
-  commit: Extract<keyof FFD, string>[]
-  dispatch: Extract<keyof FFD, string>[]
-}) {
-  const store = useStore()
-  type Types = {
-    [k in keyof FFD]: FFD[k] extends
-      | FormField<AnyWritableComponents, infer MV>
-      | undefined
-      ? MV
-      : any
-  }
-  return [...commit, ...dispatch].reduce(
-    (obj, prop) => {
-      obj[prop] = computed<Types[typeof prop]>({
-        get() {
-          return store.getters[prop]
-        },
-        set(value) {
-          const isCommit = commit.includes(prop)
-          const key = (isCommit ? 'SET_' : 'UPDATE_') + prop.toUpperCase()
-          store[isCommit ? 'commit' : 'dispatch'](key, value)
-        },
-      })
-      return obj
-    },
-    {} as { [k in keyof FFD]: WritableComputedRef<any> },
-  ) as {
-    [k in keyof FFD]: WritableComputedRef<Types[k]>
-  }
-}
diff --git a/app/vite.config.ts b/app/vite.config.ts
index 6a5d6bacb..41844e4ab 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -58,7 +58,7 @@ export default defineConfig(({ command, mode }) => {
       rollupOptions: {
         output: {
           manualChunks: (id) => {
-            // Circular import problems, this will merge vue/vuex/etc. and api together
+            // Circular import problems, this will merge core deps and api together
             if (!id.includes('node_modules') && id.includes('api/')) {
               return 'core'
             }

From 931e74ff29945c97a9bf2d1aad0b66ffdc39fed1 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 11 Aug 2024 17:04:33 +0200
Subject: [PATCH 151/275] fix: form types & useForm fields rules reactivity

---
 app/src/components/globals/CardForm.vue       | 16 ++---
 app/src/components/globals/FormField.vue      | 13 ++--
 .../components/globals/FormFieldMultiple.vue  | 36 +++++++----
 .../globals/formItems/ButtonItem.vue          |  3 +-
 app/src/composables/configPanels.ts           | 63 ++++++++++---------
 app/src/composables/form.ts                   | 52 ++++++++-------
 app/src/types/form.ts                         | 35 ++++++-----
 7 files changed, 126 insertions(+), 92 deletions(-)

diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index 057feff61..2f91906d9 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -11,6 +11,7 @@ import type {
   AnyDisplayComponents,
   AnyWritableComponents,
   BaseItemComputedProps,
+  ButtonItemProps,
   FormFieldDict,
 } from '@/types/form'
 import { isDisplayComponent, isWritableComponent } from '@/types/form'
@@ -62,9 +63,9 @@ const slots = defineSlots<
   } & {
     [K in KeyOfStr<FFD> as `component:${K}`]?: (
       _: FFD[K]['component'] extends AnyWritableComponents
-        ? FFD[K]['props'] & BaseItemComputedProps<MV[K]>
+        ? FFD[K]['cProps'] & BaseItemComputedProps<MV[K]>
         : FFD[K]['component'] extends AnyDisplayComponents
-          ? FFD[K]['props']
+          ? FFD[K]['cProps']
           : never,
     ) => any
   }
@@ -135,17 +136,17 @@ const Fields = createReusableTemplate<{
         <slot
           v-else-if="isDisplayComponent(field)"
           :name="`component:${k}`"
-          v-bind="field.props"
+          v-bind="field.cProps"
         >
           <Component
             :is="field.component"
             v-if="field.component !== 'ButtonItem'"
-            v-bind="field.props"
+            v-bind="field.cProps"
           />
           <ButtonItem
             v-else
-            v-bind="field.props"
-            @action="emit('action', $event as typeof field.props.id)"
+            v-bind="field.cProps as ButtonItemProps"
+            @action="emit('action', $event as KeyOfStr<FFD>)"
           />
         </slot>
 
@@ -181,12 +182,13 @@ const Fields = createReusableTemplate<{
                   {{ section.name }}
                   <small v-if="section.help">{{ section.help }}</small>
                 </BCardTitle>
-
+                <!-- @vue-ignore-next-line -->
                 <Fields.reuse :fields-props="section.fields" />
               </Component>
             </template>
           </template>
           <template v-else-if="fields">
+            <!-- @vue-ignore-next-line -->
             <Fields.reuse :fields-props="fields" />
           </template>
         </slot>
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index cc2867a2f..25ea0bc30 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -14,6 +14,7 @@ import type {
   BaseItemComputedProps,
   FormField,
   FormFieldProps,
+  ItemComponentToItemProps,
 } from '@/types/form'
 
 defineOptions({
@@ -24,6 +25,8 @@ defineOptions({
 const props = withDefaults(defineProps<FormFieldProps<C, MV>>(), {
   append: undefined,
   asInputGroup: false,
+  component: undefined,
+  cProps: undefined,
   description: undefined,
   descriptionVariant: undefined,
   id: undefined,
@@ -43,7 +46,7 @@ defineEmits<{
 
 const slots = defineSlots<{
   default?: (
-    componentProps: FormField<C, MV>['props'] & BaseItemComputedProps<MV>,
+    componentProps: FormField<C, MV>['cProps'] & BaseItemComputedProps<MV>,
   ) => any
   description?: any
 }>()
@@ -86,7 +89,7 @@ const computedAttrs = computed(() => {
 
 const id = computed(() => {
   if (props.id) return props.id
-  const childId = props.props?.id || props.labelFor
+  const childId = props.cProps?.id || props.labelFor
   return childId ? `${childId}-field` : undefined
 })
 
@@ -132,7 +135,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
     <!-- Make field props and state available as scoped slot data -->
     <slot
       v-bind="{
-        ...props.props,
+        ...(props.cProps ?? ({} as ItemComponentToItemProps[C])),
         ariaDescribedby,
         modelValue: props.modelValue,
         state,
@@ -141,7 +144,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
     >
       <!-- if no component was passed as slot, render a component from the props -->
       <Component
-        v-bind="props.props"
+        v-bind="props.cProps"
         :is="component"
         v-model="model"
         :aria-describedby="ariaDescribedby"
@@ -156,7 +159,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
     v-bind="computedAttrs"
     :id="id"
     :label="label"
-    :label-for="labelFor || props.props?.id"
+    :label-for="labelFor || props.cProps?.id"
     :state="state"
   >
     <template #default="{ ariaDescribedby }">
diff --git a/app/src/components/globals/FormFieldMultiple.vue b/app/src/components/globals/FormFieldMultiple.vue
index 921d93ea7..bd1b3a2fc 100644
--- a/app/src/components/globals/FormFieldMultiple.vue
+++ b/app/src/components/globals/FormFieldMultiple.vue
@@ -13,6 +13,7 @@ import type {
   BaseItemComputedProps,
   FormField,
   FormFieldProps,
+  ItemComponentToItemProps,
 } from '@/types/form'
 
 defineOptions({
@@ -23,13 +24,15 @@ defineOptions({
 const props = withDefaults(
   defineProps<
     FormFieldProps<C, MV> & {
-      defaultValue: () => ArrInnerType<MV>
-      addBtnText: string
+      defaultValue?: () => ArrInnerType<MV>
+      addBtnText?: string
     }
   >(),
   {
     append: undefined,
     asInputGroup: false,
+    component: undefined,
+    cProps: undefined,
     description: undefined,
     descriptionVariant: undefined,
     id: undefined,
@@ -38,6 +41,8 @@ const props = withDefaults(
     link: undefined,
     prepend: undefined,
     rules: undefined,
+    defaultValue: undefined,
+    addBtnText: undefined,
 
     modelValue: undefined,
     validation: undefined,
@@ -50,7 +55,7 @@ const emit = defineEmits<{
 
 const slots = defineSlots<{
   default?: (_: {
-    componentProps: FormField<C, ArrInnerType<MV>>['props'] &
+    componentProps: FormField<C, ArrInnerType<MV>>['cProps'] &
       BaseItemComputedProps<ArrInnerType<MV>>
     index: number
   }) => any
@@ -86,7 +91,7 @@ const computedAttrs = computed(() => {
 
 const id = computed(() => {
   if (props.id) return props.id
-  return props.props?.id ? props.props?.id + '_group' : undefined
+  return props.cProps?.id ? props.cProps?.id + '_group' : undefined
 })
 
 const error = computed(() => {
@@ -101,9 +106,9 @@ const subProps = computed<FormFieldProps<C, ArrInnerType<MV>>[]>(() => {
   return (
     props.modelValue?.map((modelValue: ArrInnerType<MV>, i) => {
       return {
-        props: {
-          ...props.props,
-          id: `${props.props.id}.${i}`,
+        cProps: {
+          ...(props.cProps ?? ({} as ItemComponentToItemProps[C])),
+          id: `${props.cProps?.id}.${i}`,
         },
         validation: props.validation?.[i],
         modelValue,
@@ -138,7 +143,7 @@ const errorMessage = computed(() => {
 })
 
 function addElement() {
-  const value = [...(props?.modelValue || []), props.defaultValue()] as MV
+  const value = [...(props?.modelValue || []), props.defaultValue!()] as MV
   emit('update:modelValue', value)
 
   // FIXME: Focus newly inserted form item
@@ -172,16 +177,25 @@ function updateElement(index: number, newValue: ArrInnerType<MV>) {
         </template>
       </FormField>
 
-      <BButton variant="danger" @click="removeElement(index)">
+      <BButton
+        v-if="defaultValue !== undefined"
+        variant="danger"
+        @click="removeElement(index)"
+      >
         <YIcon :title="$t('delete')" iname="trash-o" />
         <span class="visually-hidden">{{ $t('delete') }}</span>
       </BButton>
     </div>
 
-    <BButton variant="success" @click="addElement()">
-      <YIcon iname="plus" /> {{ $t('user_emailaliases_add') }}
+    <BButton
+      v-if="defaultValue !== undefined"
+      variant="success"
+      @click="addElement()"
+    >
+      <YIcon iname="plus" /> {{ addBtnText ?? $t('add') }}
     </BButton>
 
+    <!-- FIXME is it needed? or more generic error like "errors in this multiple fields" -->
     <template #invalid-feedback>
       <span v-html="errorMessage" />
     </template>
diff --git a/app/src/components/globals/formItems/ButtonItem.vue b/app/src/components/globals/formItems/ButtonItem.vue
index 29efd32d6..f104384ae 100644
--- a/app/src/components/globals/formItems/ButtonItem.vue
+++ b/app/src/components/globals/formItems/ButtonItem.vue
@@ -4,14 +4,13 @@ import { computed, toValue } from 'vue'
 import type { ButtonItemProps } from '@/types/form'
 
 const props = withDefaults(defineProps<ButtonItemProps>(), {
-  id: undefined,
   enabled: true,
   icon: undefined,
   type: 'success',
 })
 
 const emit = defineEmits<{
-  action: [value: ButtonItemProps['id']]
+  action: [value: string]
 }>()
 
 const icon = computed(() => {
diff --git a/app/src/composables/configPanels.ts b/app/src/composables/configPanels.ts
index 67ce47c5b..5b2f18542 100644
--- a/app/src/composables/configPanels.ts
+++ b/app/src/composables/configPanels.ts
@@ -6,7 +6,6 @@ import type {
   WritableComputedRef,
 } from 'vue'
 import { computed, ref, toValue, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import { APIBadRequestError, APIError } from '@/api/errors'
@@ -14,6 +13,7 @@ import { deepSetErrors, useForm, type FormValidation } from '@/composables/form'
 import { isObjectLiteral } from '@/helpers/commons'
 import * as validators from '@/helpers/validators'
 import { formatForm, formatI18nField } from '@/helpers/yunohostArguments'
+import i18n from '@/i18n'
 import type { CustomRoute, KeyOfStr, MergeUnion, Obj } from '@/types/commons'
 import type {
   AnyFormField,
@@ -96,23 +96,24 @@ function formatOption(option: AnyOption, form: Ref<Obj>): AnyFormField {
 
   if (isIn(ANY_DISPLAY_OPTION_TYPE, option)) {
     const component = OPTION_COMPONENT_RESOLVER[option.type]
-    // TODO: could be improved, for simplicity props can be be any display item props
+    // TODO: could be improved, for simplicity cProps can be be any display item props
     // but this is not type safe.
-    const props = {
+    const cProps = {
       label: formatI18nField(option.ask),
       id: option.id,
     } as MergeUnion<AnyDisplayItemProps>
     const field: FormFieldDisplay<typeof component> = {
       component,
       visible,
-      props,
+      cProps,
+      rules: undefined,
     }
 
     if (isIn(['button', 'alert'], option)) {
-      props.type = option.style
-      props.icon = option.icon
+      cProps.type = option.style
+      cProps.icon = option.icon
       if (option.type === 'button') {
-        props.enabled = useExpression(option.enabled, form)
+        cProps.enabled = useExpression(option.enabled, form)
       }
     }
 
@@ -124,42 +125,42 @@ function formatOption(option: AnyOption, form: Ref<Obj>): AnyFormField {
     }
 
     const component = OPTION_COMPONENT_RESOLVER[option.type]
-    // TODO: could be improved, for simplicity props can be be any writable item props
+    // TODO: could be improved, for simplicity cProps can be be any writable item props
     // but this is not type safe.
-    const props = {
+    const cProps = {
       id: option.id,
       placeholder: option.example,
     } as MergeUnion<AnyWritableItemProps>
     const rules: FormField['rules'] = {}
-    const field:
-      | FormField<typeof component>
-      | FormFieldReadonly<typeof component> = {
+    const field: FormField<typeof component> = {
       component,
       label: formatI18nField(option.ask),
-      props,
-      readonly: option.readonly,
-      rules,
+      rules: option.readonly ? undefined : rules,
       visible,
       description: formatI18nField(option.help),
     }
 
     // We don't care about component props in case of readonly
-    if (field.readonly) return field
+    if (option.readonly) {
+      return { ...field, readonly: true } as FormFieldReadonly<typeof component>
+    } else {
+      field.cProps = cProps
+    }
 
-    const { t } = useI18n()
+    const t = i18n.global.t
 
     if (isIn(ANY_INPUT_OPTION_TYPE, option)) {
-      props.type = isIn(['string', 'path'], option) ? 'text' : option.type
+      cProps.type = isIn(['string', 'path'], option) ? 'text' : option.type
       // trim
       // autocomplete
 
       if (option.type === 'password') {
         field.description ??= t('good_practices_about_admin_password')
         rules.passwordLenght = validators.minLength(8)
-        props.placeholder = '••••••••••••'
+        cProps.placeholder = '••••••••••••'
       } else if (isIn(['number', 'range'], option)) {
         rules.numValue = validators.integer
-        props.step = option.step
+        cProps.step = option.step
 
         if (option.min !== undefined) {
           rules.minValue = validators.minValue(option.min)
@@ -169,7 +170,7 @@ function formatOption(option: AnyOption, form: Ref<Obj>): AnyFormField {
         }
       }
     } else if (isIn(['select', 'user', 'domain', 'app', 'group'], option)) {
-      props.choices = isObjectLiteral(option.choices)
+      cProps.choices = isObjectLiteral(option.choices)
         ? Object.entries(option.choices).map(([k, v]) => ({
             text: v,
             value: k,
@@ -182,23 +183,23 @@ function formatOption(option: AnyOption, form: Ref<Obj>): AnyFormField {
         }
       }
     } else if (isIn(['tags', 'tags-select'], option)) {
-      // props.limit = option.limit  // FIXME limit is not defined in core?
-      props.placeholder = option.placeholder
-      props.tagIcon = option.icon
+      // cProps.limit = option.limit  // FIXME limit is not defined in core?
+      cProps.placeholder = option.placeholder
+      cProps.tagIcon = option.icon
 
       if ('tags-select' === option.type) {
-        props.options = option.choices
-        props.auto = true
-        props.itemsName = ''
-        props.label = option.placeholder
+        cProps.options = option.choices
+        cProps.auto = true
+        cProps.itemsName = ''
+        cProps.label = option.placeholder
       }
     } else if ('boolean' === option.type) {
       // FIXME
-      // props.choices = option.choices
+      // cProps.choices = option.choices
     }
 
     if ('file' === option.type) {
-      props.accept = option.accept
+      cProps.accept = option.accept
     }
 
     if ('boolean' !== option.type && option.optional === false) {
@@ -233,6 +234,7 @@ export function formatOptions<MV extends Obj>(
   fields: FormFieldDict<MV>
   form: Ref<MV>
 } {
+  // FIXME handle optional for app install ? or is already handled in core bookworm?
   const form = ref(
     Object.fromEntries(
       options
@@ -373,7 +375,6 @@ function useEvaluation(expression: string, form: MaybeRefOrGetter<Obj>) {
 
   return computed(() => {
     const { exp, ctx } = buildContext(toValue(form))
-
     try {
       return !!evaluate(ctx, exp)
     } catch {
diff --git a/app/src/composables/form.ts b/app/src/composables/form.ts
index 8f9bca4bd..d5ee06d61 100644
--- a/app/src/composables/form.ts
+++ b/app/src/composables/form.ts
@@ -1,12 +1,13 @@
+// eslint-disable-next-line vue/prefer-import-from-vue
+import { isFunction } from '@vue/shared'
 import type {
   BaseValidation,
   ServerErrors,
   Validation,
   ValidationArgs,
-  ValidationRuleCollection,
 } from '@vuelidate/core'
 import useVuelidate from '@vuelidate/core'
-import { computedWithControl } from '@vueuse/core'
+import { watchImmediate } from '@vueuse/core'
 import type {
   ComputedRef,
   InjectionKey,
@@ -14,11 +15,11 @@ import type {
   Ref,
   WritableComputedRef,
 } from 'vue'
-import { computed, inject, provide, reactive, toValue } from 'vue'
+import { computed, inject, provide, reactive, ref, toValue } from 'vue'
 
 import { APIBadRequestError, type APIError } from '@/api/errors'
 import type { Obj } from '@/types/commons'
-import type { FormField, FormFieldDict } from '@/types/form'
+import type { FormFieldDict } from '@/types/form'
 
 export const clearServerErrorsSymbol = Symbol() as InjectionKey<
   (key?: string) => void
@@ -57,25 +58,32 @@ export type FormValidation<MV extends Obj> = Validation<
 export function useForm<
   MV extends Obj,
   FFD extends FormFieldDict<MV> = FormFieldDict<MV>,
->(form: Ref<MV> | WritableComputedRef<MV>, fields: MaybeRefOrGetter<FFD>) {
+>(form: Ref<MV> | WritableComputedRef<MV>, fields: FFD | (() => FFD)) {
   const serverErrors = reactive<ServerErrors>({})
-  const validByDefault: ValidationRuleCollection = { true: () => true }
-  const rules = computedWithControl(
-    () => toValue(fields),
-    () => {
-      const fs = toValue(fields)
-      const validations = Object.keys(form.value).map((key: keyof MV) => [
-        key,
-        (fs[key] as FormField).rules ?? validByDefault,
-      ])
-      const rules: ValidationArgs<MV> = Object.fromEntries(validations)
-      return {
-        // create a fake validation rule for global state to be able to add $externalResult errors to it
-        global: { true: () => true },
-        form: rules,
-      }
-    },
-  )
+  const validByDefault = { true: () => true as const }
+  // create a fake validation rule for global state to be able to add $externalResult errors to it
+  const rules = ref({ global: validByDefault, form: {} }) as Ref<{
+    global: { true: () => true }
+    form: ValidationArgs<MV>
+  }>
+  function updateRules(ffd: FFD) {
+    const validations = Object.keys(form.value).map((key: keyof MV) => [
+      key,
+      ffd[key].rules ?? validByDefault,
+    ])
+    const formRules: ValidationArgs<MV> = Object.fromEntries(validations)
+    rules.value = { global: { true: () => true }, form: formRules }
+  }
+  if (isFunction(fields)) {
+    watchImmediate(fields, () => {
+      updateRules(toValue(fields))
+    })
+  } else {
+    watchImmediate(
+      Object.keys(form.value).map((key: keyof MV) => () => fields[key].rules),
+      () => updateRules(fields),
+    )
+  }
 
   const v: Ref<FormValidation<MV>> = useVuelidate(
     rules,
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 82c633415..f28ad2d80 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -10,6 +10,7 @@ import { isObjectLiteral } from '@/helpers/commons'
 import type { ArrInnerType, Cols, Obj, StateVariant } from '@/types/commons'
 
 type StateValidation = false | null
+type Choices = string[] | { text: string; value: string }[]
 
 // DISPLAY
 
@@ -20,6 +21,7 @@ type BaseDisplayItemProps = {
 
 export type ButtonItemProps = BaseDisplayItemProps & {
   // FIXME compute enabled JSExpression
+  id: string
   enabled?: boolean | ComputedRef<boolean>
   icon?: string
   type?: StateVariant
@@ -41,6 +43,7 @@ type BaseWritableItemProps = {
   name?: string
   placeholder?: string
   touchKey?: string
+  disabled?: boolean
 }
 
 export type BaseItemComputedProps<MV extends any = any> = {
@@ -51,7 +54,7 @@ export type BaseItemComputedProps<MV extends any = any> = {
 }
 
 export type AdressItemProps = BaseWritableItemProps & {
-  choices: string[]
+  choices: Choices
   type?: 'domain' | 'email'
 }
 export type AdressModelValue = {
@@ -64,7 +67,7 @@ export type CheckboxItemProps = BaseWritableItemProps & {
   label?: string
   labels?: { true: string; false: string }
   // FIXME unused?
-  // choices: string[]
+  // choices: Choices
 }
 
 export type FileItemProps = BaseWritableItemProps & {
@@ -89,7 +92,7 @@ export type InputItemProps = BaseWritableItemProps & {
     | 'current-password'
     | 'url'
   // pattern?: object
-  // choices?: string[] FIXME rm ?
+  // choices?: Choices FIXME rm ?
   step?: number
   trim?: boolean
   type?:
@@ -107,7 +110,7 @@ export type InputItemProps = BaseWritableItemProps & {
 }
 
 export type SelectItemProps = BaseWritableItemProps & {
-  choices: string[] | { text: string; value: string }[]
+  choices: Choices
 }
 
 export type TagsItemProps = BaseWritableItemProps & {
@@ -205,7 +208,7 @@ export function isNonWritableComponent(
   return isDisplayComponent(field) || !!field.readonly
 }
 
-type ItemComponentToItemProps = {
+export type ItemComponentToItemProps = {
   // DISPLAY
   ButtonItem: ButtonItemProps
   DisplayTextItem: DisplayTextItemProps
@@ -234,11 +237,11 @@ type BaseFormFieldComputedProps<MV extends any = any> = {
 }
 
 type BaseFormField<C extends AnyItemComponents> = {
-  component: C
+  component?: C
+  cProps?: ItemComponentToItemProps[C]
   hr?: boolean
   id?: string
   label?: string
-  props?: ItemComponentToItemProps[C]
   readonly?: boolean
   visible?: boolean | ComputedRef<boolean>
 }
@@ -249,14 +252,14 @@ export type FormField<
 > = BaseFormField<C> & {
   append?: string
   asInputGroup?: boolean
+  cProps?: ItemComponentToItemProps[C]
   description?: string
   descriptionVariant?: StateVariant
   labelFor?: string
   link?:
     | { text: string; name: RouteLocationRaw }
     | { text: string; href: string }
-  props: ItemComponentToItemProps[C]
-  rules?: FormFieldRules<MV>
+  rules?: FormFieldRules<MV> | ComputedRef<FormFieldRules<MV>>
   prepend?: string
   readonly?: false
 }
@@ -267,16 +270,18 @@ export type FormFieldReadonly<
   label: string
   cols?: Cols
   readonly: true
+  rules: undefined
 }
 
 export type FormFieldDisplay<
   C extends AnyDisplayComponents = AnyDisplayComponents,
 > = {
-  component: C
-  props: ItemComponentToItemProps[C]
+  component?: C
+  cProps?: ItemComponentToItemProps[C]
   visible?: boolean | ComputedRef<boolean>
   hr?: boolean
   readonly?: true
+  rules: undefined
 }
 
 export type FormFieldProps<
@@ -305,12 +310,14 @@ export type FormFieldDict<T extends Obj = Obj> = {
 
 // Type to check if object satisfies specified Field and Item
 export type FieldProps<
-  C extends AnyItemComponents = 'InputItem',
+  C extends AnyItemComponents = AnyItemComponents,
   MV extends any = never,
 > = C extends AnyWritableComponents
-  ? FormField<C, MV> | FormFieldReadonly<C>
+  ?
+      | (FormField<C, MV> & { component: C })
+      | (FormFieldReadonly<C> & { component: C })
   : C extends AnyDisplayComponents
-    ? FormFieldDisplay<C>
+    ? FormFieldDisplay<C> & { component: C }
     : never
 
 export function isFileModelValue(value: any): value is FileModelValue {

From 59f7b594083c1e9b663addcb62ee5ebf75487b05 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 11 Aug 2024 17:43:22 +0200
Subject: [PATCH 152/275] refactor: add errors when data is not present in
 cache

---
 app/src/composables/data.ts | 69 ++++++++++++++++++++++++++-----------
 1 file changed, 49 insertions(+), 20 deletions(-)

diff --git a/app/src/composables/data.ts b/app/src/composables/data.ts
index 2e9e3b29e..8a1afa769 100644
--- a/app/src/composables/data.ts
+++ b/app/src/composables/data.ts
@@ -13,8 +13,8 @@ import type {
   UserItem,
 } from '@/types/core/data'
 
-function arrayOrNull<T extends any[]>(items: T): T | null {
-  return items.length ? items : null
+function getNoDataMessage(key: DataKeys) {
+  return `No data in cache: you should query '${key}' before.`
 }
 
 const useData = createGlobalState(() => {
@@ -80,12 +80,11 @@ const useData = createGlobalState(() => {
       }
     } else if (key === 'domainDetails' && param && method === 'GET') {
       domainDetails.value[param] = payload
+    } else {
+      console.warn(
+        `couldn't update the cache, key: ${key}, method: ${method}, param: ${param}`,
+      )
     }
-
-    // FIXME rm?
-    throw new Error(
-      `couldnt update the cache, key: ${key}, method: ${method}, param: ${param}`,
-    )
   }
 
   return {
@@ -106,24 +105,34 @@ export function useUsersAndGroups(username?: MaybeRefOrGetter<string>) {
   const { users, userDetails } = useData()
   return {
     users: computed(() => {
-      return arrayOrNull(Object.values(users.value))
+      const users_ = Object.values(users.value)
+      if (!users_.length) throw new Error(getNoDataMessage('users'))
+      return users_
     }),
     usernames: computed(() => {
-      return arrayOrNull(Object.keys(users.value))
+      const usersnames = Object.keys(users.value)
+      if (!usersnames.length) throw new Error(getNoDataMessage('users'))
+      return usersnames
     }),
     user: computed(() => {
-      if (!username) return
+      if (!username)
+        throw new Error(
+          'You should pass a username to `useUsersAndGroups` to get its details',
+        )
       return userDetails.value[toValue(username)]
     }),
   }
 }
 
 export function useDomains(domain_?: MaybeRefOrGetter<string>) {
-  const { mainDomain, domains, domainDetails } = useData()
+  const { mainDomain, domains: domains_, domainDetails } = useData()
 
-  const orderedDomains = computed(() => {
-    if (!domains.value) return
+  const domains = computed(() => {
+    if (!domains_.value) throw new Error(getNoDataMessage('domains'))
+    return domains_.value
+  })
 
+  const orderedDomains = computed(() => {
     const splittedDomains = Object.fromEntries(
       domains.value.map((domain) => {
         // Keep the main part of the domain and the extension together
@@ -139,15 +148,35 @@ export function useDomains(domain_?: MaybeRefOrGetter<string>) {
     )
   })
 
+  function getParentDomain(domain: string, domains: string[], highest = false) {
+    const method = highest ? 'lastIndexOf' : 'indexOf'
+    let i = domain[method]('.')
+    while (i !== -1) {
+      const dn = domain.slice(i + 1)
+      if (domains.includes(dn)) return dn
+      i = domain[method]('.', i + (highest ? -1 : 1))
+    }
+
+    return null
+  }
+
   return {
-    mainDomain,
+    mainDomain: computed(() => {
+      if (!mainDomain.value) throw new Error(getNoDataMessage('mainDomain'))
+      return mainDomain.value
+    }),
     domain: computed(() => {
-      if (!domain_) return
-      return domainDetails.value[toValue(domain_)]
+      if (!domain_)
+        throw new Error(
+          'You should pass a domain name to `useDomains` to get its details',
+        )
+      const domain = domainDetails.value[toValue(domain_)]
+      if (!domain) throw new Error(getNoDataMessage('domainDetails'))
+      return domain
     }),
     domains,
     domainsAsChoices: computed(() => {
-      return domains.value?.map((domain) => ({
+      return domains.value.map((domain) => ({
         value: domain,
         text: domain === mainDomain.value ? domain + ' ★' : domain,
       }))
@@ -155,12 +184,11 @@ export function useDomains(domain_?: MaybeRefOrGetter<string>) {
     orderedDomains,
     domainsTree: computed(() => {
       const domains = orderedDomains.value
-      if (!domains) return
       const dataset = reactive(
         domains.map((domain) => ({
           // data to build a hierarchy
           name: domain,
-          parent: domainDetails.value[domain].topest_parent,
+          parent: getParentDomain(domain, domains),
           // utility data that will be used by `RecursiveListGroup` component
           to: { name: 'domain-info', params: { name: domain } },
           opened: true,
@@ -202,7 +230,8 @@ export function useCache<T extends any = any>(
     if (isObjectLiteral(d) && !Array.isArray(d)) {
       content = d[param] as T
     } else {
-      throw new Error('Trying to get param on non object data')
+      content = undefined as T
+      console.warn('Trying to get param on non object data')
     }
   }
 

From e0816d14e165fe25eb4a828d4d2fcb804d2d55df Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 11 Aug 2024 17:44:30 +0200
Subject: [PATCH 153/275] feat: add more complex skeleton definitions

---
 app/overrides.d.ts                        |  2 ++
 app/src/components/layouts/MainLayout.vue | 16 +++++++++++-----
 app/src/types/commons.ts                  |  1 +
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/overrides.d.ts b/app/overrides.d.ts
index 1dd222c23..f03512084 100644
--- a/app/overrides.d.ts
+++ b/app/overrides.d.ts
@@ -1,3 +1,4 @@
+import type { Skeleton } from '@/types/commons'
 import 'vue-router'
 
 declare module 'vue-router' {
@@ -6,6 +7,7 @@ declare module 'vue-router' {
     routerParams?: string[]
     args: { trad?: string; param?: string }
     breadcrumb?: string[]
+    skeleton?: (Skeleton | string)[] | Skeleton | string
   }
 }
 
diff --git a/app/src/components/layouts/MainLayout.vue b/app/src/components/layouts/MainLayout.vue
index c3fb19bdc..0afe3eb23 100644
--- a/app/src/components/layouts/MainLayout.vue
+++ b/app/src/components/layouts/MainLayout.vue
@@ -13,7 +13,7 @@ import {
 import { useInfos } from '@/composables/useInfos'
 import { useRequests } from '@/composables/useRequests'
 import { useSettings } from '@/composables/useSettings'
-import type { VueClass } from '@/types/commons'
+import type { Skeleton, VueClass } from '@/types/commons'
 
 const router = useRouter()
 const { routerKey } = useInfos()
@@ -25,9 +25,13 @@ const RootView = createReusableTemplate<{
   classes: VueClass
 }>()
 
-const skeleton = computed(
-  () => router.currentRoute.value.meta.skeleton || 'CardInfoSkeleton',
-)
+const skeletons = computed<Skeleton[]>(() => {
+  const skeleton = router.currentRoute.value.meta.skeleton ?? 'CardInfoSkeleton'
+  const skeletons = Array.isArray(skeleton) ? skeleton : [skeleton]
+  return skeletons.map((skeleton) =>
+    typeof skeleton === 'string' ? { is: skeleton } : skeleton,
+  )
+})
 
 const modalComponent = computed(() => {
   if (reconnecting.value) {
@@ -72,7 +76,9 @@ const modalComponent = computed(() => {
       <Suspense>
         <Component :is="Component" :class="classes" />
         <template #fallback>
-          <Component :is="skeleton" />
+          <template v-for="({ is, ...props }, i) in skeletons" :key="i">
+            <Component :is="is" v-bind="props" />
+          </template>
         </template>
       </Suspense>
 
diff --git a/app/src/types/commons.ts b/app/src/types/commons.ts
index e464d3b69..e47d8e694 100644
--- a/app/src/types/commons.ts
+++ b/app/src/types/commons.ts
@@ -18,6 +18,7 @@ export type Cols = Partial<Record<Breakpoint, boolean | ColsNumbers | 'auto'>>
 
 // CUSTOM
 
+export type Skeleton = { is: string } & Obj
 export type CustomRoute = {
   to: RouteLocationNamedRaw
   text: string

From 5b5cac5478c0cc6744f14179db9a71cac8f323d0 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 11 Aug 2024 17:48:05 +0200
Subject: [PATCH 154/275] feat: add api.refetch method that force reload a view
 and its data queries

---
 app/src/api/api.ts              |  9 ++++++++-
 app/src/composables/useInfos.ts | 14 +++++++-------
 app/src/types/commons.ts        |  3 ++-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/app/src/api/api.ts b/app/src/api/api.ts
index ef739fa5d..b6866ebb8 100644
--- a/app/src/api/api.ts
+++ b/app/src/api/api.ts
@@ -166,7 +166,7 @@ export default {
    */
   async fetchAll<T extends any[] = any[]>(
     queries: APIQuery[],
-    { showModal = false, initial = false } = {},
+    { showModal = false, initial = true } = {},
   ): Promise<T> {
     const results = []
     for (const query of queries) {
@@ -228,6 +228,13 @@ export default {
     return this.fetch({ ...query, method: 'DELETE' })
   },
 
+  refetch() {
+    // To force a view to reload and refetch initial data, we simply fake update
+    // the router key
+    const { updateRouterKey } = useInfos()
+    updateRouterKey()
+  },
+
   /**
    * Api reconnection helper. Resolve when server is reachable or fail after n attemps
    *
diff --git a/app/src/composables/useInfos.ts b/app/src/composables/useInfos.ts
index 25d51bc0a..5ade12922 100644
--- a/app/src/composables/useInfos.ts
+++ b/app/src/composables/useInfos.ts
@@ -8,9 +8,9 @@ import type {
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
-import { isEmptyValue, timeout } from '@/helpers/commons'
+import { timeout } from '@/helpers/commons'
 import i18n from '@/i18n'
-import type { CustomRoute, RouteFromTo } from '@/types/commons'
+import type { CustomRoute } from '@/types/commons'
 import { useDomains } from './data'
 import { useRequests, type ReconnectingArgs } from './useRequests'
 
@@ -105,9 +105,10 @@ export const useInfos = createGlobalState(() => {
     useRequests().reconnecting.value = args
   }
 
-  function updateRouterKey({ to }: RouteFromTo) {
-    if (isEmptyValue(to.params)) {
-      routerKey.value = undefined
+  function updateRouterKey(to?: RouteLocationNormalized) {
+    if (!to) {
+      // Trick to force a view reload
+      routerKey.value += '0'
       return
     }
     // If the next route uses the same component as the previous one, Vue will not
@@ -119,11 +120,10 @@ export const useInfos = createGlobalState(() => {
     const params = to.meta.routerParams
       ? to.meta.routerParams.map((key) => to.params[key])
       : Object.values(to.params)
-
     routerKey.value = `${to.name?.toString()}-${params.join('-')}`
   }
 
-  function updateBreadcrumb({ to }: RouteFromTo) {
+  function updateBreadcrumb(to: RouteLocationNormalized) {
     function getRouteNames(route: RouteLocationNormalized): string[] {
       if (route.meta.breadcrumb) return route.meta.breadcrumb
       const parentRoute = route.matched
diff --git a/app/src/types/commons.ts b/app/src/types/commons.ts
index e47d8e694..2d7f3762f 100644
--- a/app/src/types/commons.ts
+++ b/app/src/types/commons.ts
@@ -1,5 +1,5 @@
 import type { Breakpoint } from 'bootstrap-vue-next'
-import type { RouteLocationNamedRaw } from 'vue-router'
+import type { RouteLocationNamedRaw, RouteLocationNormalized } from 'vue-router'
 
 export type Obj<T = any> = Record<string, T>
 
@@ -24,6 +24,7 @@ export type CustomRoute = {
   text: string
   icon?: string
 }
+export type RouteFromTo = Record<'to' | 'from', RouteLocationNormalized>
 export type Translation = string | Record<string, string>
 export type StateVariant = 'success' | 'info' | 'warning' | 'danger'
 

From da02692d9311bfbb1f35eb9364b2bfa976b0bd9a Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 11 Aug 2024 17:53:03 +0200
Subject: [PATCH 155/275] refactor: normalize status to variants + icons

---
 app/src/api/handlers.ts                       | 16 ++++---------
 app/src/components/QueryHeader.vue            |  2 +-
 app/src/components/globals/YAlert.vue         |  4 ++--
 app/src/components/globals/YListGroupItem.vue |  4 ++--
 app/src/composables/useRequests.ts            |  8 -------
 app/src/helpers/yunohostArguments.ts          | 23 ++++++++++++++++---
 app/src/types/commons.ts                      |  1 +
 7 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/app/src/api/handlers.ts b/app/src/api/handlers.ts
index dfed54195..efb82103f 100644
--- a/app/src/api/handlers.ts
+++ b/app/src/api/handlers.ts
@@ -5,13 +5,10 @@
 
 import errors from '@/api/errors'
 import { useInfos } from '@/composables/useInfos'
-import {
-  STATUS_VARIANT,
-  type APIRequest,
-  type APIRequestAction,
-} from '@/composables/useRequests'
+import type { APIRequest, APIRequestAction } from '@/composables/useRequests'
 import { toEntries } from '@/helpers/commons'
-import type { Obj } from '@/types/commons'
+import { STATUS_VARIANT, isOkStatus } from '@/helpers/yunohostArguments'
+import type { StateStatus, Obj } from '@/types/commons'
 import type { APIErrorData } from './api'
 
 /**
@@ -46,8 +43,7 @@ export function openWebSocket(request: APIRequestAction): Promise<Event> {
   return new Promise((resolve) => {
     const ws = new WebSocket(`wss://${host.value}/yunohost/api/messages`)
     ws.onmessage = ({ data }) => {
-      const messages: Record<'info' | 'success' | 'warning' | 'error', string> =
-        JSON.parse(data)
+      const messages: Record<StateStatus, string> = JSON.parse(data)
       toEntries(messages).forEach(([status, text]) => {
         text = text.replaceAll('\n', '<br>')
         const progressBar = text.match(/^\[#*\+*\.*\] > /)?.[0]
@@ -63,9 +59,7 @@ export function openWebSocket(request: APIRequestAction): Promise<Event> {
           text,
           variant: STATUS_VARIANT[status],
         })
-        if (['error', 'warning'].includes(status)) {
-          request.action[`${status as 'error' | 'warning'}s`]++
-        }
+        if (!isOkStatus(status)) request.action[`${status}s`]++
       })
     }
     // ws.onclose = (e) => {}
diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index d76cd571f..e94c04c07 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -2,7 +2,7 @@
 import { computed, toRefs } from 'vue'
 
 import type { APIRequest } from '@/composables/useRequests'
-import { STATUS_VARIANT } from '@/composables/useRequests'
+import { STATUS_VARIANT } from '@/helpers/yunohostArguments'
 
 const props = defineProps<{
   request: APIRequest
diff --git a/app/src/components/globals/YAlert.vue b/app/src/components/globals/YAlert.vue
index 113203d54..885c7f446 100644
--- a/app/src/components/globals/YAlert.vue
+++ b/app/src/components/globals/YAlert.vue
@@ -2,7 +2,7 @@
 import type { ColorVariant } from 'bootstrap-vue-next'
 import { computed } from 'vue'
 
-import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
+import { DEFAULT_VARIANT_ICON } from '@/helpers/yunohostArguments'
 
 const props = withDefaults(
   defineProps<{
@@ -18,7 +18,7 @@ const props = withDefaults(
 )
 
 const icon = computed(() => {
-  return props.icon || DEFAULT_STATUS_ICON[props.variant]
+  return props.icon || DEFAULT_VARIANT_ICON[props.variant]
 })
 </script>
 
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index b0d5e8092..96fcae18e 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -2,7 +2,7 @@
 import type { Breakpoint, ColorVariant } from 'bootstrap-vue-next'
 import { computed } from 'vue'
 
-import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
+import { DEFAULT_VARIANT_ICON } from '@/helpers/yunohostArguments'
 
 const props = withDefaults(
   defineProps<{
@@ -25,7 +25,7 @@ const props = withDefaults(
 
 const icon = computed(() => {
   if (props.noIcon) return
-  return props.icon || DEFAULT_STATUS_ICON[props.variant]
+  return props.icon || DEFAULT_VARIANT_ICON[props.variant]
 })
 const class_ = computed(() => {
   const baseClass = 'yuno-list-group-item-'
diff --git a/app/src/composables/useRequests.ts b/app/src/composables/useRequests.ts
index 52cafd378..e01e3014c 100644
--- a/app/src/composables/useRequests.ts
+++ b/app/src/composables/useRequests.ts
@@ -47,14 +47,6 @@ export type ReconnectingArgs = {
   delay?: number
 }
 
-export const STATUS_VARIANT = {
-  pending: 'primary',
-  success: 'success',
-  warning: 'warning',
-  error: 'danger',
-  info: 'info',
-} as const
-
 export const useRequests = createGlobalState(() => {
   const router = useRouter()
 
diff --git a/app/src/helpers/yunohostArguments.ts b/app/src/helpers/yunohostArguments.ts
index dae9ad90a..07d0a7906 100644
--- a/app/src/helpers/yunohostArguments.ts
+++ b/app/src/helpers/yunohostArguments.ts
@@ -1,17 +1,30 @@
 import { toValue, type MaybeRef } from 'vue'
 
+import { useSettings } from '@/composables/useSettings'
 import {
   getFileContent,
   isEmptyValue,
   isObjectLiteral,
   toEntries,
 } from '@/helpers/commons'
-import type { ArrInnerType, Obj, Translation } from '@/types/commons'
+import type {
+  ArrInnerType,
+  Obj,
+  StateStatus,
+  Translation,
+} from '@/types/commons'
 import type { AdressModelValue, FileModelValue } from '@/types/form'
 import { isAdressModelValue, isFileModelValue } from '@/types/form'
-import { useSettings } from '@/composables/useSettings'
 
-export const DEFAULT_STATUS_ICON = {
+export const STATUS_VARIANT = {
+  pending: 'primary',
+  success: 'success',
+  warning: 'warning',
+  error: 'danger',
+  info: 'info',
+} as const
+
+export const DEFAULT_VARIANT_ICON = {
   primary: null,
   secondary: null,
   success: 'check',
@@ -21,6 +34,10 @@ export const DEFAULT_STATUS_ICON = {
   light: null,
   dark: null,
   best: null,
+} as const
+
+export function isOkStatus(status: StateStatus): status is 'info' | 'success' {
+  return ['info', 'success'].includes(status)
 }
 
 // FORMAT FROM CORE
diff --git a/app/src/types/commons.ts b/app/src/types/commons.ts
index 2d7f3762f..fe1af5d6c 100644
--- a/app/src/types/commons.ts
+++ b/app/src/types/commons.ts
@@ -27,6 +27,7 @@ export type CustomRoute = {
 export type RouteFromTo = Record<'to' | 'from', RouteLocationNormalized>
 export type Translation = string | Record<string, string>
 export type StateVariant = 'success' | 'info' | 'warning' | 'danger'
+export type StateStatus = 'success' | 'info' | 'warning' | 'error'
 
 // HELPERS
 

From 1f1dac1792402d6b7b461e2cff8f94705acae1a1 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 11 Aug 2024 17:55:23 +0200
Subject: [PATCH 156/275] refactor: rework useSearch and ViewSearch to no
 longer use ViewBase and expect defined data

---
 app/src/components/globals/ViewSearch.vue | 66 ++++++++++-------------
 app/src/composables/useSearch.ts          | 26 ++++-----
 2 files changed, 43 insertions(+), 49 deletions(-)

diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index 1cebd5a3a..c3d2023ad 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends Obj | AnyTreeNode">
-import { computed, type Component } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type { AnyTreeNode } from '@/helpers/data/tree'
@@ -10,12 +10,10 @@ const props = withDefaults(
     items?: T[] | null
     itemsName: string | null
     modelValue?: string
-    skeleton?: string | Component
   }>(),
   {
     items: undefined,
     modelValue: undefined,
-    skeleton: 'ListGroupSkeleton',
   },
 )
 
@@ -24,6 +22,7 @@ const slots = defineSlots<{
   'top-bar-buttons': any
   top: any
   'alert-message': any
+  'forced-default'?: any
   default: any
   bot: any
   skeleton: any
@@ -47,49 +46,42 @@ const noItemsMessage = computed(() => {
 </script>
 
 <template>
-  <ViewBase :skeleton="skeleton">
-    <template v-if="slots['top-bar']" #top-bar>
-      <slot name="top-bar" />
-    </template>
-    <template v-if="!slots['top-bar']" #top-bar-group-left>
-      <BInputGroup class="w-100">
-        <BInputGroupText>
-          <YIcon iname="search" />
-        </BInputGroupText>
+  <div>
+    <slot v-if="slots['top-bar']" name="top-bar" />
+    <TopBar v-else>
+      <template #group-left>
+        <BInputGroup class="w-100">
+          <BInputGroupText>
+            <YIcon iname="search" />
+          </BInputGroupText>
 
-        <BFormInput
-          id="top-bar-search"
-          v-model="model"
-          :placeholder="t('search.for', { items: t('items.' + itemsName, 2) })"
-          :disabled="!items"
-        />
-      </BInputGroup>
-    </template>
-    <template v-if="!slots['top-bar']" #top-bar-group-right>
-      <slot name="top-bar-buttons" />
-    </template>
+          <BFormInput
+            id="top-bar-search"
+            v-model="model"
+            :placeholder="
+              t('search.for', { items: t('items.' + itemsName, 2) })
+            "
+            :disabled="items === undefined"
+          />
+        </BInputGroup>
+      </template>
+      <template #group-right>
+        <slot name="top-bar-buttons" />
+      </template>
+    </TopBar>
 
-    <template #top>
-      <slot name="top" />
-    </template>
+    <slot name="top" />
 
-    <template #default>
+    <slot name="forced-default">
       <BAlert v-if="noItemsMessage" :model-value="true" variant="warning">
         <slot name="alert-message">
           <YIcon iname="exclamation-triangle" />
           {{ noItemsMessage }}
         </slot>
       </BAlert>
-
       <slot v-else name="default" />
-    </template>
-
-    <template #bot>
-      <slot name="bot" />
-    </template>
+    </slot>
 
-    <template #skeleton>
-      <slot name="skeleton" />
-    </template>
-  </ViewBase>
+    <slot name="bot" />
+  </div>
 </template>
diff --git a/app/src/composables/useSearch.ts b/app/src/composables/useSearch.ts
index a0a3a27db..dbe8f47bd 100644
--- a/app/src/composables/useSearch.ts
+++ b/app/src/composables/useSearch.ts
@@ -1,15 +1,19 @@
-import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue'
-import { computed, ref, toValue, watch } from 'vue'
+import type {
+  ComputedRef,
+  MaybeRefOrGetter,
+  Ref,
+  WritableComputedRef,
+} from 'vue'
+import { computed, isRef, ref, toValue } from 'vue'
 
 import type { AnyTreeNode, TreeRootNode } from '@/helpers/data/tree'
 
+// Returns `undefined` when there's no items and `null` when there's no match
 export function useSearch<
   T extends any[] | TreeRootNode,
   V extends T extends (infer V)[] ? V : AnyTreeNode,
 >(
-  items:
-    | MaybeRefOrGetter<T | null | undefined>
-    | ComputedRef<T | null | undefined>,
+  items: MaybeRefOrGetter<T> | ComputedRef<T>,
   filterFn: (search: string, item: V, index: number, arr: T) => boolean,
   {
     externalSearch,
@@ -18,19 +22,17 @@ export function useSearch<
   }: {
     filterAllFn?: (search: string, items: T) => boolean | undefined
     filterIfNoSearch?: boolean
-    externalSearch?: MaybeRefOrGetter<string>
+    externalSearch?: Ref<string> | WritableComputedRef<string>
   } = {},
 ): [search: Ref<string>, filteredItems: ComputedRef<T | undefined | null>] {
-  const search = ref(toValue(externalSearch) ?? '')
-  watch(
-    () => toValue(externalSearch),
-    (s) => (search.value = s ?? ''),
-  )
+  const search = isRef(externalSearch)
+    ? externalSearch
+    : ref(toValue(externalSearch) ?? '')
 
   const filteredItems = computed(() => {
     const items_ = toValue(items)
     const s = toValue(search.value).toLowerCase()
-    if (!items_) return undefined
+    if (!items_.length) return undefined
     if (filterAllFn) {
       const returnAll = filterAllFn(s, items_)
       if (returnAll !== undefined) {

From c17da2c93eab9735123b5b091242ad431c169ca9 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 11 Aug 2024 18:16:39 +0200
Subject: [PATCH 157/275] fix: add maybeMainDomain getter which do not error
 out

---
 app/src/composables/data.ts     | 1 +
 app/src/composables/useInfos.ts | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/src/composables/data.ts b/app/src/composables/data.ts
index 8a1afa769..3db1b7adb 100644
--- a/app/src/composables/data.ts
+++ b/app/src/composables/data.ts
@@ -161,6 +161,7 @@ export function useDomains(domain_?: MaybeRefOrGetter<string>) {
   }
 
   return {
+    maybeMainDomain: mainDomain,
     mainDomain: computed(() => {
       if (!mainDomain.value) throw new Error(getNoDataMessage('mainDomain'))
       return mainDomain.value
diff --git a/app/src/composables/useInfos.ts b/app/src/composables/useInfos.ts
index 5ade12922..c82185402 100644
--- a/app/src/composables/useInfos.ts
+++ b/app/src/composables/useInfos.ts
@@ -24,9 +24,9 @@ export const useInfos = createGlobalState(() => {
   const routerKey = ref<string | undefined>()
   const breadcrumb = ref<CustomRoute[]>([])
 
-  const { mainDomain } = useDomains()
+  const { maybeMainDomain } = useDomains()
   const ssoLink = computed(() => {
-    return `//${mainDomain.value ?? host.value}/yunohost/sso`
+    return `//${maybeMainDomain.value ?? host.value}/yunohost/sso`
   })
 
   // INIT

From b2a233f1f1b7d4db9f8e97a5f40f51cbcfd33f1c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 11 Aug 2024 18:44:27 +0200
Subject: [PATCH 158/275] refactor: update form fields definition in views

---
 app/src/types/form.ts                  |  8 +--
 app/src/views/LoginView.vue            | 10 +--
 app/src/views/PostInstall.vue          | 36 +++++------
 app/src/views/_partials/DomainForm.vue | 88 ++++++++++++--------------
 app/src/views/group/GroupCreate.vue    |  2 +-
 app/src/views/tool/ToolFirewall.vue    |  8 +--
 app/src/views/user/UserCreate.vue      | 49 +++++++-------
 app/src/views/user/UserEdit.vue        | 64 +++++++++----------
 app/src/views/user/UserImport.vue      | 16 ++---
 9 files changed, 130 insertions(+), 151 deletions(-)

diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index f28ad2d80..bf5f39f53 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -259,7 +259,7 @@ export type FormField<
   link?:
     | { text: string; name: RouteLocationRaw }
     | { text: string; href: string }
-  rules?: FormFieldRules<MV> | ComputedRef<FormFieldRules<MV>>
+  rules?: FormFieldRules<MV>
   prepend?: string
   readonly?: false
 }
@@ -270,7 +270,7 @@ export type FormFieldReadonly<
   label: string
   cols?: Cols
   readonly: true
-  rules: undefined
+  rules?: undefined
 }
 
 export type FormFieldDisplay<
@@ -281,7 +281,7 @@ export type FormFieldDisplay<
   visible?: boolean | ComputedRef<boolean>
   hr?: boolean
   readonly?: true
-  rules: undefined
+  rules?: undefined
 }
 
 export type FormFieldProps<
@@ -293,7 +293,7 @@ export type FormFieldProps<
 export type FormFieldReadonlyProps<
   C extends AnyWritableComponents,
   MV extends any,
-> = Omit<FormFieldReadonly<C>, 'hr' | 'visible' | 'readonly'> & {
+> = Omit<FormFieldReadonly<C>, 'hr' | 'visible' | 'readonly' | 'rules'> & {
   modelValue?: MV
 }
 
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index bd2126796..280788415 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter, type LocationQueryValue } from 'vue-router'
 
@@ -26,12 +26,12 @@ const form = ref({
   username: '',
   password: '',
 })
-const fields = reactive({
+const fields = {
   username: {
     component: 'InputItem',
     label: t('user_username'),
     rules: { required, alphalownumdot_ },
-    props: {
+    cProps: {
       id: 'username',
       autocomplete: 'username',
     },
@@ -41,13 +41,13 @@ const fields = reactive({
     component: 'InputItem',
     label: t('password'),
     rules: { required, passwordLenght: minLength(4) },
-    props: {
+    cProps: {
       id: 'password',
       type: 'password',
       autocomplete: 'current-password',
     },
   } satisfies FieldProps<'InputItem', Form['password']>,
-} satisfies FormFieldDict<Form>)
+} satisfies FormFieldDict<Form>
 
 const { v, onSubmit } = useForm(form, fields)
 
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 391ed66c5..893074472 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -6,7 +6,6 @@ import api from '@/api'
 import { APIBadRequestError } from '@/api/errors'
 import { useForm } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
-import { asUnreffed } from '@/helpers/commons'
 import {
   alphalownumdot_,
   minLength,
@@ -26,7 +25,7 @@ type Steps = 'start' | 'domain' | 'user' | 'rootfsspace-error' | 'login'
 const step = ref<Steps>('start')
 const serverError = ref('')
 const domain = ref('')
-const dyndns_recovery_password = ref('')
+const dyndns_recovery_password = ref<string | undefined>()
 
 type Form = typeof form.value
 const form = ref({
@@ -35,25 +34,25 @@ const form = ref({
   password: '',
   confirmation: '',
 })
-const fields = reactive({
+const fields = {
   // FIXME satisfies FormFieldDict but not for CardForm?
   alert: {
     component: 'ReadOnlyAlertItem',
-    props: { label: t('postinstall.user.first_user_help'), type: 'info' },
+    cProps: { label: t('postinstall.user.first_user_help'), type: 'info' },
   } satisfies FieldProps<'ReadOnlyAlertItem'>,
 
   username: {
     component: 'InputItem',
     label: t('user_username'),
     rules: { required, alphalownumdot_ },
-    props: { id: 'username', placeholder: t('placeholder.username') },
+    cProps: { id: 'username', placeholder: t('placeholder.username') },
   } satisfies FieldProps<'InputItem', Form['username']>,
 
   fullname: {
     component: 'InputItem',
     label: t('user_fullname'),
     rules: { required, name },
-    props: { id: 'fullname', placeholder: t('placeholder.fullname') },
+    cProps: { id: 'fullname', placeholder: t('placeholder.fullname') },
   } satisfies FieldProps<'InputItem', Form['fullname']>,
 
   password: {
@@ -62,21 +61,19 @@ const fields = reactive({
     description: t('good_practices_about_admin_password'),
     descriptionVariant: 'warning',
     rules: { required, passwordLenght: minLength(8) },
-    props: { id: 'password', placeholder: '••••••••', type: 'password' },
+    cProps: { id: 'password', placeholder: '••••••••', type: 'password' },
   } satisfies FieldProps<'InputItem', Form['password']>,
 
-  confirmation: {
+  confirmation: reactive({
     component: 'InputItem',
     label: t('password_confirmation'),
-    rules: asUnreffed(
-      computed(() => ({
-        required,
-        passwordMatch: sameAs(form.value.password),
-      })),
-    ),
-    props: { id: 'confirmation', placeholder: '••••••••', type: 'password' },
-  } satisfies FieldProps<'InputItem', Form['confirmation']>,
-} satisfies FormFieldDict<Form>)
+    rules: computed(() => ({
+      required,
+      passwordMatch: sameAs(form.value.password),
+    })),
+    cProps: { id: 'confirmation', placeholder: '••••••••', type: 'password' },
+  }) satisfies FieldProps<'InputItem', Form['confirmation']>,
+} satisfies FormFieldDict<Form>
 
 const { v, onSubmit, serverErrors } = useForm(form, fields)
 
@@ -85,7 +82,10 @@ function goToStep(step_: Steps) {
   step.value = step_
 }
 
-function setDomain(data: { domain: string; dyndns_recovery_password: string }) {
+function setDomain(data: {
+  domain: string
+  dyndns_recovery_password?: string
+}) {
   domain.value = data.domain
   dyndns_recovery_password.value = data.dyndns_recovery_password
   goToStep('user')
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 86e54b381..965b39f7c 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n'
 
 import { useDomains } from '@/composables/data'
 import { useForm } from '@/composables/form'
-import { asUnreffed } from '@/helpers/commons'
 import {
   domain,
   dynDomain,
@@ -12,7 +11,7 @@ import {
   required,
   sameAs,
 } from '@/helpers/validators'
-import { formatForm } from '@/helpers/yunohostArguments'
+import { formatFormValue } from '@/helpers/yunohostArguments'
 import type { AdressModelValue, FieldProps, FormFieldDict } from '@/types/form'
 
 defineOptions({
@@ -31,7 +30,7 @@ const props = withDefaults(
   },
 )
 const emit = defineEmits<{
-  submit: [data: Partial<{ domain: string; dyndns_recovery_password: string }>]
+  submit: [data: { domain: string; dyndns_recovery_password?: string }]
 }>()
 
 const { t } = useI18n()
@@ -63,26 +62,24 @@ const form = ref<Form>({
   dynDomainPasswordConfirmation: '',
   localDomain: { localPart: '', separator: '.', domain: 'local' },
 })
-const fields = reactive({
-  domain: {
+const fields = {
+  domain: reactive({
     component: 'InputItem',
     label: t('domain_name'),
-    rules: asUnreffed(
-      computed(() =>
-        selected.value === 'domain' ? { required, domain } : undefined,
-      ),
-    ),
-    props: {
+    rules: computed(() => {
+      return selected.value === 'domain' ? { required, domain } : undefined
+    }),
+    cProps: {
       id: 'domain',
       placeholder: t('placeholder.domain'),
     },
-  } satisfies FieldProps<'InputItem', Form['domain']>,
+  }) satisfies FieldProps<'InputItem', Form['domain']>,
 
   dynDomain: {
     component: 'AdressItem',
     label: t('domain_name'),
     rules: { localPart: { required, dynDomain } },
-    props: {
+    cProps: {
       id: 'dyn-domain',
       placeholder: t('placeholder.domain').split('.')[0],
       type: 'domain',
@@ -90,51 +87,51 @@ const fields = reactive({
     },
   } satisfies FieldProps<'AdressItem', Form['dynDomain']>,
 
-  dynDomainPassword: {
+  dynDomainPassword: reactive({
     component: 'InputItem',
     label: t('domain.add.dyn_dns_password'),
     description: t('domain.add.dyn_dns_password_desc'),
-    rules: { passwordLenght: minLength(8) },
-    props: {
+    rules: computed(() => {
+      return selected.value === 'dynDomain'
+        ? { required, passwordLenght: minLength(8) }
+        : undefined
+    }),
+    cProps: {
       id: 'dyn-dns-password',
       placeholder: '••••••••',
       type: 'password',
     },
-  } satisfies FieldProps<'InputItem', Form['dynDomainPassword']>,
+  }) satisfies FieldProps<'InputItem', Form['dynDomainPassword']>,
 
-  dynDomainPasswordConfirmation: {
+  dynDomainPasswordConfirmation: reactive({
     component: 'InputItem',
     label: t('password_confirmation'),
-    rules: asUnreffed(
-      computed(() => ({
-        passwordMatch: sameAs(form.value.dynDomainPassword),
-      })),
-    ),
-    props: {
+    rules: computed(() => ({
+      passwordMatch: sameAs(form.value.dynDomainPassword),
+    })),
+    cProps: {
       id: 'dyn-dns-password-confirmation',
       placeholder: '••••••••',
       type: 'password',
     },
-  } satisfies FieldProps<'InputItem', Form['dynDomainPasswordConfirmation']>,
+  }) satisfies FieldProps<'InputItem', Form['dynDomainPasswordConfirmation']>,
 
-  localDomain: {
+  localDomain: reactive({
     component: 'AdressItem',
     label: t('domain_name'),
-    rules: asUnreffed(
-      computed(() =>
-        selected.value === 'localDomain'
-          ? { localPart: { required, dynDomain } }
-          : undefined,
-      ),
+    rules: computed(() =>
+      selected.value === 'localDomain'
+        ? { localPart: { required, dynDomain } }
+        : undefined,
     ),
-    props: {
+    cProps: {
       id: 'dyn-domain',
       placeholder: t('placeholder.domain').split('.')[0],
       type: 'domain',
       choices: ['local', 'test'],
     },
-  } satisfies FieldProps<'AdressItem', Form['localDomain']>,
-} satisfies FormFieldDict<Form>)
+  }) satisfies FieldProps<'AdressItem', Form['localDomain']>,
+} satisfies FormFieldDict<Form>
 
 const { v, onSubmit, serverErrors } = useForm(form, fields)
 
@@ -168,16 +165,13 @@ const localDomainIsVisible = computed(() => {
 const onDomainAdd = onSubmit(async () => {
   const domainType = selected.value
   if (!domainType) return
+  const domain = await formatFormValue(form.value[domainType])
 
-  const data = await formatForm(
-    {
-      domain: form.value[domainType],
-      dyndns_recovery_password:
-        domainType === 'dynDomain' ? form.value.dynDomainPassword : '',
-    },
-    { removeEmpty: true },
-  )
-  emit('submit', data)
+  emit('submit', {
+    domain,
+    dyndns_recovery_password:
+      domainType === 'dynDomain' ? form.value.dynDomainPassword : undefined,
+  })
 })
 </script>
 
@@ -214,7 +208,7 @@ const onDomainAdd = onSubmit(async () => {
       <FormField
         v-bind="fields.domain"
         v-model="form.domain"
-        :validation="v.domain"
+        :validation="v.form.domain"
       />
     </BCollapse>
 
@@ -242,7 +236,7 @@ const onDomainAdd = onSubmit(async () => {
         :key="key"
         v-bind="fields[key]"
         v-model="form[key]"
-        :validation="v[key]"
+        :validation="v.form[key]"
       />
     </BCollapse>
 
@@ -272,7 +266,7 @@ const onDomainAdd = onSubmit(async () => {
       <FormField
         v-bind="fields.localDomain"
         v-model="form.localDomain"
-        :validation="v.localDomain"
+        :validation="v.form.localDomain"
       />
     </BCollapse>
   </CardForm>
diff --git a/app/src/views/group/GroupCreate.vue b/app/src/views/group/GroupCreate.vue
index 86d9b8b2c..60e0ea43d 100644
--- a/app/src/views/group/GroupCreate.vue
+++ b/app/src/views/group/GroupCreate.vue
@@ -18,7 +18,7 @@ const fields = {
     label: t('group_name'),
     description: t('group_format_name_help'),
     rules: { required, alphalownumdot_ },
-    props: {
+    cProps: {
       id: 'groupname',
       placeholder: t('placeholder.groupname'),
     },
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index ddbdf69cb..c435ff31a 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -35,7 +35,7 @@ const fields = {
     component: 'SelectItem',
     label: t('action'),
     rules: { required },
-    props: {
+    cProps: {
       id: 'input-action',
       choices: [
         { value: 'allow', text: t('open') },
@@ -49,7 +49,7 @@ const fields = {
     component: 'InputItem',
     label: t('port'),
     rules: { number: required, integer, between: between(0, 65535) },
-    props: { id: 'input-port', placeholder: '0', type: 'number' },
+    cProps: { id: 'input-port', placeholder: '0', type: 'number' },
   } satisfies FieldProps<'InputItem', Form['action']>,
 
   connection: {
@@ -57,7 +57,7 @@ const fields = {
     component: 'SelectItem',
     label: t('connection'),
     rules: { required },
-    props: {
+    cProps: {
       id: 'input-connection',
       choices: [
         { value: 'ipv4', text: t('ipv4') },
@@ -71,7 +71,7 @@ const fields = {
     component: 'SelectItem',
     label: t('protocol'),
     rules: { required },
-    props: {
+    cProps: {
       id: 'input-protocol',
       choices: [
         { value: 'TCP', text: t('tcp') },
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index 706323e76..74e76fabc 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
@@ -7,7 +7,6 @@ import api from '@/api'
 import { useDomains, useUsersAndGroups } from '@/composables/data'
 import { useForm } from '@/composables/form'
 import { useInitialQueries } from '@/composables/useInitialQueries'
-import { asUnreffed } from '@/helpers/commons'
 import {
   alphalownumdot_,
   minLength,
@@ -35,39 +34,37 @@ type Form = typeof form.value
 const form = ref({
   username: '',
   fullname: '',
-  domain: '',
+  domain: mainDomain.value,
   password: '',
   confirmation: '',
 })
 const fields = {
-  username: {
+  username: reactive({
     component: 'InputItem',
     label: t('user_username'),
-    rules: asUnreffed(
-      computed(() => ({
-        required,
-        alphalownumdot_,
-        notInUsers: unique(usernames),
-      })),
-    ),
-    props: {
+    rules: computed(() => ({
+      required,
+      alphalownumdot_,
+      notInUsers: unique(usernames),
+    })),
+    cProps: {
       id: 'username',
       placeholder: t('placeholder.username'),
     },
-  } satisfies FieldProps<'InputItem', Form['username']>,
+  }) satisfies FieldProps<'InputItem', Form['username']>,
 
   fullname: {
     component: 'InputItem',
     hr: true,
     label: t('user_fullname'),
     rules: { required, name },
-    props: {
+    cProps: {
       id: 'fullname',
       placeholder: t('placeholder.fullname'),
     },
   } satisfies FieldProps<'InputItem', Form['fullname']>,
 
-  domain: {
+  domain: reactive({
     component: 'SelectItem',
     hr: true,
     id: 'mail',
@@ -75,8 +72,8 @@ const fields = {
     description: t('tip_about_user_email'),
     descriptionVariant: 'info',
     rules: { required },
-    props: { choices: asUnreffed(domainsAsChoices) },
-  } satisfies FieldProps<'SelectItem', Form['domain']>,
+    cProps: { choices: domainsAsChoices },
+  }) satisfies FieldProps<'SelectItem', Form['domain']>,
 
   password: {
     component: 'InputItem',
@@ -84,28 +81,26 @@ const fields = {
     description: t('good_practices_about_user_password'),
     descriptionVariant: 'warning',
     rules: { required, passwordLenght: minLength(8) },
-    props: {
+    cProps: {
       id: 'password',
       placeholder: '••••••••',
       type: 'password',
     },
   } satisfies FieldProps<'InputItem', Form['password']>,
 
-  confirmation: {
+  confirmation: reactive({
     component: 'InputItem',
     label: t('password_confirmation'),
-    rules: asUnreffed(
-      computed(() => ({
-        required,
-        passwordMatch: sameAs(form.value.password),
-      })),
-    ),
-    props: {
+    rules: computed(() => ({
+      required,
+      passwordMatch: sameAs(form.value.password),
+    })),
+    cProps: {
       id: 'confirmation',
       placeholder: '••••••••',
       type: 'password',
     },
-  } satisfies FieldProps<'InputItem', Form['confirmation']>,
+  }) satisfies FieldProps<'InputItem', Form['confirmation']>,
 } satisfies FormFieldDict<Form>
 
 const { v, onSubmit } = useForm(form, fields)
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index f9b86e43c..9fdc23590 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -8,7 +8,7 @@ import type ViewBase from '@/components/globals/ViewBase.vue'
 import { useDomains, useUsersAndGroups } from '@/composables/data'
 import { useArrayRule, useForm } from '@/composables/form'
 import { useInitialQueries } from '@/composables/useInitialQueries'
-import { arrayDiff, asUnreffed } from '@/helpers/commons'
+import { arrayDiff } from '@/helpers/commons'
 import {
   emailForward,
   emailLocalPart,
@@ -58,30 +58,25 @@ const fields = reactive({
   username: {
     component: 'InputItem',
     label: t('user_username'),
-    props: {
-      id: 'username',
-      disabled: true,
-    },
+    cProps: { id: 'username', disabled: true },
   } satisfies FieldProps<'InputItem', Form['username']>,
 
   fullname: {
     component: 'InputItem',
     label: t('user_fullname'),
     rules: { required, nameValidator },
-    props: {
+    cProps: {
       id: 'fullname',
       placeholder: t('placeholder.fullname'),
     },
   } satisfies FieldProps<'InputItem', Form['fullname']>,
 
-  mail: {
+  mail: reactive({
     component: 'AdressItem',
     label: t('user_email'),
-    rules: {
-      localPart: { required, email: emailLocalPart },
-    },
-    props: { id: 'mail', choices: asUnreffed(domainsAsChoices) },
-  } satisfies FieldProps<'AdressItem', Form['mail']>,
+    rules: { localPart: { required, email: emailLocalPart } },
+    cProps: { id: 'mail', choices: domainsAsChoices },
+  }) satisfies FieldProps<'AdressItem', Form['mail']>,
 
   mailbox_quota: {
     append: 'M',
@@ -90,35 +85,34 @@ const fields = reactive({
     description: t('mailbox_quota_description'),
     // example: t('mailbox_quota_example'),
     rules: { integer, minValue: minValue(0) },
-    props: {
+    cProps: {
       id: 'mailbox-quota',
       placeholder: t('mailbox_quota_placeholder'),
     },
   } satisfies FieldProps<'InputItem', Form['mailbox_quota']>,
 
-  mail_aliases: {
+  mail_aliases: reactive({
     component: 'AdressItem',
-    rules: asUnreffed(
-      useArrayRule(() => form.value.mail_aliases, {
-        localPart: { required, email: emailLocalPart },
-      }),
-    ),
-    props: {
+    rules: useArrayRule(() => form.value.mail_aliases, {
+      localPart: { required, email: emailLocalPart },
+    }),
+    cProps: {
       placeholder: t('placeholder.username'),
-      choices: asUnreffed(domainsAsChoices),
+      choices: domainsAsChoices,
     },
-  } satisfies FieldProps<'AdressItem', Form['mail_aliases']>,
+  }) satisfies FieldProps<'AdressItem', Form['mail_aliases']>,
 
-  mail_forward: {
+  mail_forward: reactive({
     component: 'InputItem',
-    rules: asUnreffed(
-      useArrayRule(() => form.value.mail_forward, { required, emailForward }),
-    ),
-    props: {
+    rules: useArrayRule(() => form.value.mail_forward, {
+      required,
+      emailForward,
+    }),
+    cProps: {
       placeholder: t('user_new_forward'),
       type: 'email',
     },
-  } satisfies FieldProps<'InputItem', Form['mail_forward']>,
+  }) satisfies FieldProps<'InputItem', Form['mail_forward']>,
 
   change_password: {
     component: 'InputItem',
@@ -126,7 +120,7 @@ const fields = reactive({
     description: t('good_practices_about_user_password'),
     descriptionVariant: 'warning',
     rules: { passwordLenght: minLength(8) },
-    props: {
+    cProps: {
       id: 'change_password',
       type: 'password',
       placeholder: '••••••••',
@@ -134,19 +128,19 @@ const fields = reactive({
     },
   } satisfies FieldProps<'InputItem', Form['change_password']>,
 
-  confirmation: {
+  confirmation: reactive({
     component: 'InputItem',
     label: t('password_confirmation'),
-    rules: asUnreffed(
-      computed(() => ({ passwordMatch: sameAs(form.value.change_password) })),
-    ),
-    props: {
+    rules: computed(() => ({
+      passwordMatch: sameAs(form.value.change_password),
+    })),
+    cProps: {
       id: 'confirmation',
       type: 'password',
       placeholder: '••••••••',
       autocomplete: 'new-password',
     },
-  } satisfies FieldProps<'InputItem', Form['confirmation']>,
+  }) satisfies FieldProps<'InputItem', Form['confirmation']>,
 } satisfies FormFieldDict<Form>)
 
 const { v, onSubmit } = useForm(form, fields)
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index 8bd393d63..c3c410ee7 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
@@ -21,13 +21,13 @@ const form = ref({
   update: false,
   delete: false,
 })
-const fields = reactive({
+const fields = {
   csvfile: {
     component: 'FileItem',
     label: t('users_import_csv_file'),
     description: t('users_import_csv_file_desc'),
     rules: { file: required },
-    props: {
+    cProps: {
       id: 'csvfile',
       accept: 'text/csv',
       placeholder: t('placeholder.file'),
@@ -38,20 +38,16 @@ const fields = reactive({
     label: t('users_import_update'),
     description: t('users_import_update_desc'),
     component: 'CheckboxItem',
-    props: {
-      id: 'update',
-    },
+    cProps: { id: 'update' },
   } satisfies FieldProps<'CheckboxItem', Form['update']>,
 
   delete: {
     component: 'CheckboxItem',
     label: t('users_import_delete'),
     description: t('users_import_delete_desc'),
-    props: {
-      id: 'delete',
-    },
+    cProps: { id: 'delete' },
   } satisfies FieldProps<'CheckboxItem', Form['delete']>,
-} satisfies FormFieldDict<Form>)
+} satisfies FormFieldDict<Form>
 
 const { v, onSubmit } = useForm(form, fields)
 

From 354a06af6d9811105ff780d272fbc40f905ddb4f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 12 Aug 2024 23:43:15 +0200
Subject: [PATCH 159/275] refactor: return the same content when cache is not
 present

---
 app/src/api/api.ts          |  5 ++++-
 app/src/composables/data.ts | 34 +++++++++++++++++-----------------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/app/src/api/api.ts b/app/src/api/api.ts
index b6866ebb8..fa706388c 100644
--- a/app/src/api/api.ts
+++ b/app/src/api/api.ts
@@ -107,7 +107,9 @@ export default {
     asFormData = true,
   }: APIQuery): Promise<T> {
     const cache = cachePath ? useCache<T>(method, cachePath) : undefined
-    if (method === 'GET' && cache?.content) return cache.content
+    if (method === 'GET' && cache?.content.value !== undefined) {
+      return cache.content.value
+    }
 
     const { locale } = useSettings()
     const { startRequest, endRequest } = useRequests()
@@ -149,6 +151,7 @@ export default {
     cache?.update(responseData)
     endRequest({ request, success: true })
 
+    if (cache) return cache.content.value as T
     return responseData
   },
 
diff --git a/app/src/composables/data.ts b/app/src/composables/data.ts
index 3db1b7adb..35d62753b 100644
--- a/app/src/composables/data.ts
+++ b/app/src/composables/data.ts
@@ -2,7 +2,7 @@ import { createGlobalState } from '@vueuse/core'
 import { computed, reactive, ref, toValue, type MaybeRefOrGetter } from 'vue'
 
 import type { RequestMethod } from '@/api/api'
-import { isObjectLiteral } from '@/helpers/commons'
+import { isEmptyValue, isObjectLiteral } from '@/helpers/commons'
 import { stratify } from '@/helpers/data/tree'
 import type { Obj } from '@/types/commons'
 import type {
@@ -215,29 +215,29 @@ export function useCache<T extends any = any>(
   method: RequestMethod,
   cachePath: StorePath,
 ) {
-  const [key, param] = cachePath.split('.') as
+  const [key, param] = cachePath.split(/\.(.*)/s) as
     | [StoreKeys, undefined]
     | [StoreKeysParam, string]
   const data = useData()
   // FIXME get global cache policy setting
   // Add noCache arg? not used
 
-  if (!(key in data)) {
-    throw new Error('Trying to get cache of inexistant data')
-  }
-  const d = data[key].value
-  let content = d as T
-  if (param) {
-    if (isObjectLiteral(d) && !Array.isArray(d)) {
-      content = d[param] as T
-    } else {
-      content = undefined as T
-      console.warn('Trying to get param on non object data')
-    }
-  }
-
   return {
-    content,
+    content: computed(() => {
+      if (!(key in data)) {
+        throw new Error('Trying to get cache of inexistant data')
+      }
+      const d = data[key].value
+      if (param) {
+        if (isObjectLiteral(d) && !Array.isArray(d)) {
+          return d[param] as T
+        } else {
+          return undefined as T
+          console.warn('Trying to get param on non object data')
+        }
+      }
+      return (isEmptyValue(d) ? undefined : d) as T
+    }),
     update: (payload: T) => data.update(method, payload, key, param),
   }
 }

From 311d5fdc27702680ead9c098a79d9f75d9e2b4b6 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 12 Aug 2024 23:45:06 +0200
Subject: [PATCH 160/275] feat: add cache policy from settings

---
 app/src/composables/data.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/src/composables/data.ts b/app/src/composables/data.ts
index 35d62753b..d47fc93cc 100644
--- a/app/src/composables/data.ts
+++ b/app/src/composables/data.ts
@@ -12,6 +12,7 @@ import type {
   UserDetails,
   UserItem,
 } from '@/types/core/data'
+import { useSettings } from './useSettings'
 
 function getNoDataMessage(key: DataKeys) {
   return `No data in cache: you should query '${key}' before.`
@@ -219,11 +220,11 @@ export function useCache<T extends any = any>(
     | [StoreKeys, undefined]
     | [StoreKeysParam, string]
   const data = useData()
-  // FIXME get global cache policy setting
-  // Add noCache arg? not used
+  const { cache } = useSettings()
 
   return {
     content: computed(() => {
+      if (!cache.value) return undefined
       if (!(key in data)) {
         throw new Error('Trying to get cache of inexistant data')
       }

From cba781d8099e39d0c54a9189e4a2a1bf13fbd0ce Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 12 Aug 2024 23:49:16 +0200
Subject: [PATCH 161/275] feat: add useFormQuery to pair url params and a form

---
 app/src/composables/form.ts | 23 +++++++++++++++++++++++
 app/src/helpers/commons.ts  | 19 +++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/app/src/composables/form.ts b/app/src/composables/form.ts
index d5ee06d61..68a7ae79a 100644
--- a/app/src/composables/form.ts
+++ b/app/src/composables/form.ts
@@ -16,8 +16,10 @@ import type {
   WritableComputedRef,
 } from 'vue'
 import { computed, inject, provide, reactive, ref, toValue } from 'vue'
+import { useRouter } from 'vue-router'
 
 import { APIBadRequestError, type APIError } from '@/api/errors'
+import { fromEntries, getKeys } from '@/helpers/commons'
 import type { Obj } from '@/types/commons'
 import type { FormFieldDict } from '@/types/form'
 
@@ -160,3 +162,24 @@ export function useArrayRule<V extends any[], T extends ValidationArgs>(
     }, {})
   })
 }
+
+export function useFormQuery<T extends Obj>(
+  props: T,
+  onUpdate?: () => T | undefined,
+) {
+  const router = useRouter()
+  const formQuery = fromEntries(
+    getKeys(props).map((key) => [
+      key,
+      computed({
+        get: () => props[key],
+        set: (n) => {
+          const nextProps = onUpdate?.() ?? props
+          router.replace({ query: { ...nextProps, [key]: n } })
+        },
+      }),
+    ]) as { [K in keyof T]: [K, WritableComputedRef<T[K]>] }[keyof T][],
+  )
+
+  return formQuery
+}
diff --git a/app/src/helpers/commons.ts b/app/src/helpers/commons.ts
index abe4cc55a..13af65848 100644
--- a/app/src/helpers/commons.ts
+++ b/app/src/helpers/commons.ts
@@ -182,11 +182,30 @@ export function getFileContent(
   })
 }
 
+export function getKeys<T extends Obj, K extends (keyof T)[]>(obj: T): K {
+  return Object.keys(obj) as K
+}
+
 export function toEntries<T extends Record<PropertyKey, unknown>>(
   obj: T,
 ): { [K in keyof T]: [K, T[K]] }[keyof T][] {
   return Object.entries(obj) as { [K in keyof T]: [K, T[K]] }[keyof T][]
 }
+
+export function fromEntries<
+  const T extends ReadonlyArray<readonly [PropertyKey, unknown]>,
+>(entries: T): { [K in T[number] as K[0]]: K[1] } {
+  return Object.fromEntries(entries) as { [K in T[number] as K[0]]: K[1] }
+}
+
+export function pick<T extends Obj, K extends (keyof T)[]>(
+  obj: T,
+  keys: K,
+): Pick<T, K[number]> {
+  return Object.fromEntries(keys.map((key) => [key, obj[key]])) as Pick<
+    T,
+    K[number]
+  >
 }
 
 export function omit<T extends Obj, K extends (keyof T)[]>(

From 837e92789a2a6f7e2af7f720df17e7ac3dfeff4a Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 12 Aug 2024 23:54:07 +0200
Subject: [PATCH 162/275] refactor: rework TagsSelectizeItem with multiple
 choices types

---
 .../globals/formItems/TagsSelectizeItem.vue   | 63 ++++++++++---------
 app/src/types/form.ts                         | 11 +++-
 2 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index ad2eb88b2..0f0cec56f 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -3,17 +3,14 @@ import type { BDropdown, BFormInput } from 'bootstrap-vue-next'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { fromEntries } from '@/helpers/commons'
 import type {
   BaseItemComputedProps,
+  Choice,
+  TagUpdateArgs,
   TagsSelectizeItemProps,
 } from '@/types/form'
 
-type TagUpdateArgs = {
-  action: 'add' | 'remove'
-  option: string
-  applyFn: (tag: string) => void
-}
-
 defineOptions({
   inheritAttrs: false,
 })
@@ -55,19 +52,26 @@ const criteria = computed(() => {
   return search.value.trim().toLowerCase()
 })
 const availableOptions = computed(() => {
-  const options = props.options.filter((opt) => {
-    return (
-      props.modelValue?.indexOf(opt) === -1 &&
-      props.disabledItems?.includes(opt)
-    )
+  return props.options.filter((opt) => {
+    const tag = typeof opt === 'string' ? opt : opt.value
+    let filterIn =
+      model.value?.indexOf(tag) === -1 &&
+      !(props.disabledItems?.includes(tag) ?? false)
+    if (filterIn && criteria.value) {
+      filterIn = tag.toLowerCase().indexOf(criteria.value) > -1
+    }
+    return filterIn
   })
-  if (criteria.value) {
-    return options.filter(
-      (opt) => opt.toLowerCase().indexOf(criteria.value) > -1,
-    )
-  }
-  return options
 })
+const texts = computed(() =>
+  fromEntries(
+    props.options.map((opt) => {
+      const tag = typeof opt === 'string' ? opt : opt.value
+      const text = typeof opt === 'string' ? opt : opt.text
+      return [tag, text]
+    }),
+  ),
+)
 const searchI18n = computed(() => {
   const params = { items: t('items.' + props.itemsName, 0) }
   return {
@@ -80,18 +84,20 @@ const searchState = computed(() => {
   return criteria.value && availableOptions.value.length === 0 ? false : null
 })
 
-function onAddTag(option: string, applyFn: TagUpdateArgs['applyFn']) {
-  emit('tag-update', { action: 'add', option, applyFn })
+function onAddTag(option: Choice, applyFn: TagUpdateArgs['applyFn']) {
+  const tag = typeof option === 'string' ? option : option.value
+  emit('tag-update', { action: 'add', tag, applyFn })
   search.value = ''
   if (props.auto) {
-    applyFn(option)
+    applyFn(tag)
   }
 }
 
-function onRemoveTag(option: string, applyFn: TagUpdateArgs['applyFn']) {
-  emit('tag-update', { action: 'remove', option, applyFn })
+function onRemoveTag(option: Choice, applyFn: TagUpdateArgs['applyFn']) {
+  const tag = typeof option === 'string' ? option : option.value
+  emit('tag-update', { action: 'remove', tag, applyFn })
   if (props.auto) {
-    applyFn(option)
+    applyFn(tag)
   }
 }
 
@@ -134,11 +140,11 @@ function onDropdownKeydown(e: KeyboardEvent) {
           >
             <BFormTag
               :title="tag"
-              :disabled="disabled || disabledItems?.includes(tag)"
+              :disabled="disabled || (disabledItems?.includes(tag) ?? false)"
               class="border border-dark mb-2"
               @remove="onRemoveTag(tag, removeTag)"
             >
-              <YIcon v-if="tagIcon" :iname="tagIcon" /> {{ tag }}
+              <YIcon v-if="tagIcon" :iname="tagIcon" /> {{ texts[tag] }}
             </BFormTag>
           </li>
         </ul>
@@ -173,6 +179,7 @@ function onDropdownKeydown(e: KeyboardEvent) {
                   autocomplete="off"
                   size="sm"
                   type="search"
+                  @click.stop
                 />
               </BFormGroup>
             </BDropdownForm>
@@ -180,11 +187,11 @@ function onDropdownKeydown(e: KeyboardEvent) {
           </BDropdownGroup>
 
           <BDropdownItemButton
-            v-for="option in availableOptions"
-            :key="option"
+            v-for="(option, i) in availableOptions"
+            :key="i"
             @click="onAddTag(option, addTag)"
           >
-            {{ option }}
+            {{ typeof option === 'string' ? option : option.text }}
           </BDropdownItemButton>
           <BDropdownText v-if="!criteria && availableOptions.length === 0">
             <YIcon iname="exclamation-triangle" />
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index bf5f39f53..584207845 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -10,7 +10,14 @@ import { isObjectLiteral } from '@/helpers/commons'
 import type { ArrInnerType, Cols, Obj, StateVariant } from '@/types/commons'
 
 type StateValidation = false | null
-type Choices = string[] | { text: string; value: string }[]
+export type Choice = string | { text: string; value: string }
+type Choices = Choice[]
+
+export type TagUpdateArgs = {
+  action: 'add' | 'remove'
+  tag: string
+  applyFn: (tag: string) => void
+}
 
 // DISPLAY
 
@@ -121,7 +128,7 @@ export type TagsItemProps = BaseWritableItemProps & {
 
 export type TagsSelectizeItemProps = BaseWritableItemProps & {
   itemsName: string
-  options: string[]
+  options: Choices
   auto?: boolean
   disabledItems?: string[]
   label: string

From 7f867e38e9316014714c2057cdf7379753a7e747 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:00:28 +0200
Subject: [PATCH 163/275] fix: misc

---
 app/src/App.vue                               |  2 +-
 app/src/components/CardCollapse.vue           |  2 +-
 app/src/components/CardDeckFeed.vue           |  1 -
 app/src/helpers/commons.ts                    | 55 +------------------
 .../helpers/validators/customValidators.ts    |  2 +-
 app/src/router/index.ts                       |  6 +-
 app/src/types/core/data.ts                    |  6 +-
 7 files changed, 12 insertions(+), 62 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index d310d4d31..17b5ae943 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -114,6 +114,7 @@ onMounted(() => {
     <HistoryConsole />
 
     <!-- FOOTER -->
+    <div class="mt-4" />
     <footer class="py-3 mt-auto">
       <nav>
         <BNav class="justify-content-center">
@@ -185,7 +186,6 @@ header {
 footer {
   border-top: $thin-border;
   font-size: $font-size-sm;
-  margin-top: 2rem;
 
   .nav-item {
     & + .nav-item a::before {
diff --git a/app/src/components/CardCollapse.vue b/app/src/components/CardCollapse.vue
index 358a20d46..abbb372b9 100644
--- a/app/src/components/CardCollapse.vue
+++ b/app/src/components/CardCollapse.vue
@@ -54,7 +54,7 @@ const class_ = computed(() => {
 
 <style lang="scss" scoped>
 .card-collapse {
-  .card-header {
+  :deep(.card-header) {
     padding: 0;
   }
 
diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index a5528eb56..d96b3ee36 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -92,6 +92,5 @@ const root = () =>
 </script>
 
 <template>
-  {{ busy }}
   <root />
 </template>
diff --git a/app/src/helpers/commons.ts b/app/src/helpers/commons.ts
index 13af65848..92187267c 100644
--- a/app/src/helpers/commons.ts
+++ b/app/src/helpers/commons.ts
@@ -1,5 +1,4 @@
-import type { UnwrapRef } from 'vue'
-
+import i18n from '@/i18n'
 import type { Obj } from '@/types/commons'
 
 /**
@@ -26,7 +25,7 @@ export function timeout<T extends unknown>(
  *
  * @param value - Anything.
  */
-export function isObjectLiteral(value: any): value is object {
+export function isObjectLiteral(value: any): value is Obj {
   return (
     value !== null &&
     value !== undefined &&
@@ -59,52 +58,6 @@ export function isEmptyValue(
   )
 }
 
-type Flatten<T extends object> = object extends T
-  ? object
-  : {
-        [K in keyof T]-?: (
-          x: NonNullable<T[K]> extends infer V
-            ? V extends object
-              ? V extends readonly any[]
-                ? Pick<T, K>
-                : Flatten<V> extends infer FV
-                  ? {
-                      [P in keyof FV as `${Extract<P, string | number>}`]: FV[P]
-                    }
-                  : never
-              : Pick<T, K>
-            : never,
-        ) => void
-      } extends Record<keyof T, (y: infer O) => void>
-    ? O extends infer U
-      ? { [K in keyof O]: O[K] }
-      : never
-    : never
-
-/**
- * Returns an flattened object literal, with all keys at first level and removing nested ones.
- *
- * @param obj - An object literal to flatten.
- * @param flattened - An object literal to add passed obj keys/values.
- */
-export function flattenObjectLiteral<T extends object>(
-  obj: T,
-  flattened: Partial<Flatten<T>> = {},
-) {
-  function flatten(objLit: Partial<Flatten<T>>) {
-    for (const key in objLit) {
-      const value = objLit[key]
-      if (isObjectLiteral(value)) {
-        flatten(value)
-      } else {
-        flattened[key] = value
-      }
-    }
-  }
-  flatten(obj)
-  return flattened as Flatten<T>
-}
-
 /**
  * Returns an new Object filtered with passed filter function.
  * Each entry `[key, value]` will be forwarded to the `filter` function.
@@ -218,7 +171,3 @@ export function omit<T extends Obj, K extends (keyof T)[]>(
       .map((key) => [key, obj[key]]),
   ) as Omit<T, K[number]>
 }
-
-export function asUnreffed<T>(value: T): UnwrapRef<T> {
-  return value as UnwrapRef<T>
-}
diff --git a/app/src/helpers/validators/customValidators.ts b/app/src/helpers/validators/customValidators.ts
index 209773e66..9a39fba65 100644
--- a/app/src/helpers/validators/customValidators.ts
+++ b/app/src/helpers/validators/customValidators.ts
@@ -50,7 +50,7 @@ const name = helpers.regex(
   new RegExp(`^(?:[A-Za-z${nonAsciiWordCharacters}]{1,30}[ ,.'-]{0,3})+$`),
 )
 
-const unique = (items: MaybeRef<any[]>) =>
+const unique = (items: MaybeRef<any[] | null>) =>
   helpers.withParams({ type: 'unique', arg: toValue(items) }, (item) => {
     const items_ = toValue(items)
     return items_ ? !helpers.req(item) || !items_.includes(item) : true
diff --git a/app/src/router/index.ts b/app/src/router/index.ts
index 898c2e070..37936d45a 100644
--- a/app/src/router/index.ts
+++ b/app/src/router/index.ts
@@ -51,10 +51,10 @@ router.beforeEach((to, from, next) => {
   }
 })
 
-router.afterEach((to, from) => {
+router.afterEach((to) => {
   const { updateRouterKey, updateBreadcrumb } = useInfos()
-  updateRouterKey({ to, from })
-  updateBreadcrumb({ to, from })
+  updateRouterKey(to)
+  updateBreadcrumb(to)
 })
 
 export default router
diff --git a/app/src/types/core/data.ts b/app/src/types/core/data.ts
index 4c92c16e5..63097c7ee 100644
--- a/app/src/types/core/data.ts
+++ b/app/src/types/core/data.ts
@@ -1,3 +1,5 @@
+import type { StateVariant } from '@/types/commons'
+
 export type UserItem = {
   username: string
   fullname: string
@@ -31,9 +33,9 @@ export type DomainDetail = {
   certificate: {
     subject: string
     CA_name: string
-    CA_type: string // enumlike
+    CA_type: 'selfsigned' | 'letsencrypt' | 'other'
     validity: number
-    style: string // enumlike
+    style: Exclude<StateVariant, 'info'>
     summary: string // enum
     ACME_eligible: boolean
   }

From 38859f5afc84d86342d977ff84731e9ae019f0f1 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:06:36 +0200
Subject: [PATCH 164/275] refactor: rework async AppCatalog

---
 .../globals/skeletons/AppCatalogSkeleton.vue  |  54 ++++
 app/src/types/core/api.ts                     |  73 +++++
 app/src/views/app/AppCatalog.vue              | 304 +++++++-----------
 app/src/views/app/appData.ts                  |  19 ++
 4 files changed, 259 insertions(+), 191 deletions(-)
 create mode 100644 app/src/components/globals/skeletons/AppCatalogSkeleton.vue
 create mode 100644 app/src/types/core/api.ts
 create mode 100644 app/src/views/app/appData.ts

diff --git a/app/src/components/globals/skeletons/AppCatalogSkeleton.vue b/app/src/components/globals/skeletons/AppCatalogSkeleton.vue
new file mode 100644
index 000000000..06792016d
--- /dev/null
+++ b/app/src/components/globals/skeletons/AppCatalogSkeleton.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { randint } from '@/helpers/commons'
+</script>
+
+<template>
+  <BInputGroup class="w-100 mb-4">
+    <BInputGroupText>
+      <YIcon iname="search" />
+    </BInputGroupText>
+
+    <BFormInput :disabled="true" />
+  </BInputGroup>
+
+  <BCardGroup deck>
+    <BCard v-for="i in 15" :key="i" no-body>
+      <div class="d-flex w-100 mt-auto">
+        <BSkeleton width="30px" height="30px" class="me-2 ms-auto" />
+        <BSkeleton
+          :width="randint(30, 70) + '%'"
+          height="30px"
+          class="me-auto"
+        />
+      </div>
+      <BSkeleton
+        v-if="randint(0, 1)"
+        :width="randint(30, 85) + '%'"
+        height="24px"
+        class="mx-auto"
+      />
+      <BSkeleton
+        :width="randint(30, 85) + '%'"
+        height="24px"
+        class="mx-auto mb-auto"
+      />
+    </BCard>
+  </BCardGroup>
+</template>
+
+<style lang="scss" scoped>
+.card {
+  min-height: 10rem;
+  flex-basis: 100% !important;
+
+  @include media-breakpoint-up(md) {
+    flex-basis: 50% !important;
+    max-width: calc(50% - 0.75rem);
+  }
+
+  @include media-breakpoint-up(lg) {
+    flex-basis: 33% !important;
+    max-width: calc(33.3% - 1rem);
+  }
+}
+</style>
diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
new file mode 100644
index 000000000..9fe94c960
--- /dev/null
+++ b/app/src/types/core/api.ts
@@ -0,0 +1,73 @@
+import type { Obj, Translation } from '@/types/commons'
+
+// APPS
+
+export type AppLevel = -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
+export type AppState = 'working' | 'inprogress' | 'thirdparty'
+export type AppUpstream = {
+  license?: string | null
+  website?: string | null
+  demo?: string | null
+  admindoc?: string | null
+  userdoc?: string | null
+  code?: string | null
+  cpe?: string | null
+}
+export type AppMinManifest = {
+  packaging_format: 1 | 2
+  id: string
+  name: string
+  description: Translation
+  version: string
+  maintainers: string[]
+  integration: {
+    architectures: string | string[]
+    ldap: 'not_relevant' | boolean
+    sso: 'not_relevant' | boolean
+    multi_instance: boolean
+    disk: string
+    ram: { build: string; runtime: string }
+    yunohost: string
+  }
+  upstream: AppUpstream
+}
+type CatalogApp = {
+  added_in_catalog: number
+  antifeatures: string[]
+  category: string
+  featured: boolean
+  git: {
+    branch: string
+    revision: string
+    url: string | null
+  } | null
+  high_quality: boolean
+  id: string
+  lastUpdate: number
+  level: AppLevel
+  logo_hash: string | null
+  maintained: boolean
+  manifest: AppMinManifest
+  potential_alternative_to: string[]
+  state: AppState
+  subtags: string[]
+  repository: string
+  installed: boolean
+}
+
+export type Catalog = {
+  apps: Obj<CatalogApp>
+  categories: {
+    description: string
+    icon: string
+    id: string
+    subtags: { id: string; title: string }[]
+    title: string
+  }[]
+  antifeatures: {
+    description: string
+    icon: string
+    id: string
+    title: string
+  }[]
+}
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index e8b48fe66..a8fcd0163 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -1,28 +1,29 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 
+import api from '@/api'
 import CardDeckFeed from '@/components/CardDeckFeed.vue'
-import { useForm } from '@/composables/form'
+import { useForm, useFormQuery } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
-import { useInitialQueries } from '@/composables/useInitialQueries'
 import { useSearch } from '@/composables/useSearch'
-import { randint } from '@/helpers/commons'
+import { pick } from '@/helpers/commons'
 import { appRepoUrl, required } from '@/helpers/validators'
-import type { Obj } from '@/types/commons'
+import type { Catalog } from '@/types/core/api'
 import type { FieldProps, FormFieldDict } from '@/types/form'
+import { formatAppQuality } from './appData'
 
 const props = withDefaults(
   defineProps<{
     search?: string
-    quality?: string
-    category?: string | null
-    subtag?: string
+    quality?: 'all' | 'highQuality' | 'decentQuality' | 'working'
+    category?: 'all' | string | null
+    subtag?: 'all' | 'others' | string
   }>(),
   {
     search: '',
-    quality: 'decent_quality',
+    quality: 'decentQuality',
     category: null,
     subtag: 'all',
   },
@@ -30,17 +31,59 @@ const props = withDefaults(
 
 const { t } = useI18n()
 const router = useRouter()
-const route = useRoute()
 const modalConfirm = useAutoModal()
-const { loading } = useInitialQueries(
-  [{ uri: 'apps/catalog?full&with_categories&with_antifeatures' }],
-  { onQueriesResponse },
-)
 
-const selectedApp = ref()
-const antifeatures = ref()
+const [apps, categories] = await api
+  .get<Catalog>({
+    uri: 'apps/catalog?full&with_categories&with_antifeatures',
+    initial: true,
+  })
+  .then((catalog) => {
+    const apps = Object.values(catalog.apps)
+      .map((app) => {
+        const working = app.state === 'working'
+        return {
+          ...pick(app, ['id', 'category', 'subtags', 'maintained']),
+          ...pick(app.manifest, ['name', 'description']),
+          quality: formatAppQuality({ level: app.level, state: app.state }),
+          working,
+          decentQuality: working && app.level > 4,
+          highQuality: working && app.level >= 8,
+          logoHash: app.logo_hash,
+          searchValues: [
+            app.id,
+            app.state,
+            app.manifest.name,
+            app.manifest.description,
+            app.potential_alternative_to.join(' '),
+          ]
+            .join(' ')
+            .toLowerCase(),
+        }
+      })
+      .sort((a, b) => (a.id > b.id ? 1 : -1))
+
+    // CATEGORIES
+    const categories = [
+      { text: t('app_choose_category'), value: null, subtags: [] },
+      { text: t('all_apps'), value: 'all', icon: 'search', subtags: [] },
+      ...catalog.categories.map(({ title, id, ...rest }) => {
+        return { text: title, value: id, ...rest }
+      }),
+    ]
+
+    return [apps, categories] as const
+  })
+
+const {
+  quality,
+  category,
+  subtag,
+  search: externalSearch,
+} = useFormQuery(props, () => {
+  if (props.category === null) return { ...props, category: 'all' }
+})
 
-const apps = ref<Obj[] | undefined>()
 const [search, filteredApps] = useSearch(
   apps,
   (s, app) => {
@@ -58,11 +101,11 @@ const [search, filteredApps] = useSearch(
       if (!appMatchSubtag) return false
     }
     if (s === '') return true
-    if (app.searchValues.includes(search)) return true
+    if (app.searchValues.includes(s)) return true
     return false
   },
   {
-    externalSearch: () => props.search,
+    externalSearch,
     filterIfNoSearch: true,
     filterAllFn(s) {
       if (props.category === null) return false
@@ -79,7 +122,7 @@ const fields = {
     component: 'InputItem',
     label: t('url'),
     rules: { required, appRepoUrl },
-    props: {
+    cProps: {
       id: 'custom-install',
       placeholder: 'https://some.git.forge.tld/USER/REPOSITORY',
     },
@@ -88,25 +131,20 @@ const fields = {
 const { v, onSubmit } = useForm(form, fields)
 
 const qualityOptions = [
-  { value: 'high_quality', text: t('only_highquality_apps') },
+  { value: 'highQuality', text: t('only_highquality_apps') },
   {
-    value: 'decent_quality',
+    value: 'decentQuality',
     text: t('only_decent_quality_apps'),
   },
   { value: 'working', text: t('only_working_apps') },
   { value: 'all', text: t('all_apps') },
 ]
-const categories = reactive([
-  { text: t('app_choose_category'), value: null },
-  { text: t('all_apps'), value: 'all', icon: 'search' },
-  // The rest is filled from api data
-])
 
 const subtags = computed(() => {
   // build an options array for subtags v-model/options
   if (props.category && categories.length > 2) {
-    const category = categories.find((cat) => cat.value === props.category)
-    if (category.subtags) {
+    const category = categories.find((cat) => cat.value === props.category)!
+    if (category.subtags.length) {
       const subtags = [{ text: t('all'), value: 'all' }]
       category.subtags.forEach((subtag) => {
         subtags.push({ text: subtag.title, value: subtag.id })
@@ -118,75 +156,6 @@ const subtags = computed(() => {
   return null
 })
 
-function onQueriesResponse(catalog: any) {
-  const apps_ = []
-  for (const key in catalog.apps) {
-    const app = catalog.apps[key]
-    app.isInstallable =
-      !app.installed || app.manifest.integration.multi_instance
-    app.working = app.state === 'working'
-    app.decent_quality = app.working && app.level > 4
-    app.high_quality = app.working && app.level >= 8
-    app.color = 'danger'
-    if (app.working && app.level <= 0) {
-      app.state = 'broken'
-      app.color = 'danger'
-    } else if (app.working && app.level <= 4) {
-      app.state = 'lowquality'
-      app.color = 'warning'
-    } else if (app.working) {
-      app.color = 'success'
-    }
-    app.searchValues = [
-      app.id,
-      app.state,
-      app.manifest.name,
-      app.manifest.description,
-      app.potential_alternative_to.join(' '),
-    ]
-      .join(' ')
-      .toLowerCase()
-    apps_.push(app)
-  }
-  apps.value = apps_.sort((a, b) => (a.id > b.id ? 1 : -1))
-
-  // CATEGORIES
-  catalog.categories.forEach(({ title, id, icon, subtags, description }) => {
-    categories.push({
-      text: title,
-      value: id,
-      icon,
-      subtags,
-      description,
-    })
-  })
-  antifeatures.value = Object.fromEntries(
-    catalog.antifeatures.map((af) => [af.id, af]),
-  )
-}
-
-function updateQuery(key, value) {
-  // Update the query string without reloading the page
-  router.replace({
-    query: {
-      ...route.query,
-      // allow search without selecting a category
-      category: route.query.category || 'all',
-      [key]: value,
-    },
-  })
-}
-
-// INSTALL APP
-async function onInstallClick(appId: string) {
-  const app = apps.value.find((app) => app.id === appId)
-  if (!app.decent_quality) {
-    const confirmed = await modalConfirm(t('confirm_install_app_' + app.state))
-    if (!confirmed) return
-  }
-  router.push({ name: 'app-install', params: { id: app.id } })
-}
-
 // INSTALL CUSTOM APP
 const onCustomInstallClick = onSubmit(async () => {
   const confirmed = await modalConfirm(t('confirm_install_custom_app'))
@@ -201,12 +170,7 @@ const onCustomInstallClick = onSubmit(async () => {
 </script>
 
 <template>
-  <ViewSearch
-    v-model="search"
-    :items="filteredApps"
-    items-name="apps"
-    :loading="loading"
-  >
+  <ViewSearch :items="filteredApps" items-name="apps">
     <template #top-bar>
       <div id="view-top-bar">
         <!-- APP SEARCH -->
@@ -217,16 +181,11 @@ const onCustomInstallClick = onSubmit(async () => {
 
           <BFormInput
             id="search-input"
-            :model-value="search"
+            v-model="search"
             :placeholder="$t('search.for', { items: $t('items.apps', 2) })"
-            @update:model-value="updateQuery('search', $event)"
           />
 
-          <BFormSelect
-            :model-value="quality"
-            :options="qualityOptions"
-            @update:model-value="updateQuery('quality', $event)"
-          />
+          <BFormSelect v-model="quality" :options="qualityOptions" />
         </BInputGroup>
 
         <!-- CATEGORY SELECT -->
@@ -235,16 +194,12 @@ const onCustomInstallClick = onSubmit(async () => {
             <YIcon iname="filter" />
           </BInputGroupText>
 
-          <BFormSelect
-            :model-value="category"
-            :options="categories"
-            @update:model-value="updateQuery('category', $event)"
-          />
+          <BFormSelect v-model="category" :options="categories" />
 
           <BButton
             variant="primary"
             :disabled="category === null"
-            @click="updateQuery('category', null)"
+            @click="category = null"
           >
             {{ $t('app_show_categories') }}
           </BButton>
@@ -256,46 +211,44 @@ const onCustomInstallClick = onSubmit(async () => {
 
           <BFormRadioGroup
             id="subtags-radio"
+            v-model="subtag"
             name="subtags"
-            :checked="subtag"
             :options="subtags"
-            @change="updateQuery('subtag', $event)"
             buttons
             button-variant="outline-secondary"
           />
 
           <BFormSelect
             id="subtags-select"
-            :model-value="subtag"
+            v-model="subtag"
             :options="subtags"
-            @update:model-value="updateQuery('subtag', $event)"
           />
         </BInputGroup>
       </div>
     </template>
 
     <!-- CATEGORIES CARDS -->
-    <BCardGroup v-if="category === null" deck tag="ul">
-      <BCard
-        v-for="cat in categories.slice(1)"
-        :key="cat.value"
-        tag="li"
-        class="category-card"
-      >
-        <BCardTitle>
-          <BLink
-            @click.prevent="updateQuery('category', cat.value)"
-            class="card-link"
-          >
-            <YIcon :iname="cat.icon" /> {{ cat.text }}
-          </BLink>
-        </BCardTitle>
-        <BCardText>{{ cat.description }}</BCardText>
-      </BCard>
-    </BCardGroup>
+    <template v-if="category === null" #forced-default>
+      <BCardGroup deck tag="ul" class="p-0 m-0">
+        <BCard
+          v-for="cat in categories.slice(1)"
+          :key="cat.text"
+          tag="li"
+          class="category-card"
+        >
+          <BCardTitle>
+            <BLink class="card-link" @click.prevent="category = cat.value">
+              <YIcon v-if="cat.icon" :iname="cat.icon" /> {{ cat.text }}
+            </BLink>
+          </BCardTitle>
+          <BCardText v-if="'description' in cat">{{
+            cat.description
+          }}</BCardText>
+        </BCard>
+      </BCardGroup>
+    </template>
 
-    <!-- APPS CARDS -->
-    <CardDeckFeed v-else>
+    <CardDeckFeed v-if="filteredApps">
       <BCard
         v-for="(app, i) in filteredApps"
         :key="app.id"
@@ -310,9 +263,9 @@ const onCustomInstallClick = onSubmit(async () => {
       >
         <BCardBody class="d-flex">
           <BImg
-            v-if="app.logo_hash"
+            v-if="app.logoHash"
             class="app-logo rounded"
-            :src="`./applogos/${app.logo_hash}.png`"
+            :src="`./applogos/${app.logoHash}.png`"
           />
 
           <div>
@@ -321,37 +274,36 @@ const onCustomInstallClick = onSubmit(async () => {
                 :to="{ name: 'app-install', params: { id: app.id } }"
                 class="card-link"
               >
-                {{ app.manifest.name }}
+                {{ app.name }}
               </BLink>
 
               <small
-                v-if="app.state !== 'working' || app.high_quality"
+                v-if="app.quality.state !== 'working' || app.highQuality"
                 class="d-flex align-items-center ms-2 position-relative"
               >
                 <BBadge
-                  v-if="app.state !== 'working'"
-                  :variant="app.color"
+                  v-if="app.quality.state !== 'working'"
                   v-b-popover.hover.bottom="
-                    $t(`app_state_${app.state}_explanation`)
+                    $t(`app_state_${app.quality.state}_explanation`)
                   "
+                  :variant="app.quality.variant"
                 >
-                  <!-- app.state can be 'lowquality' or 'inprogress' -->
-                  {{ $t('app_state_' + app.state) }}
+                  {{ $t(`app_state_${app.quality.state}`) }}
                 </BBadge>
 
                 <YIcon
-                  v-if="app.high_quality"
-                  iname="star"
-                  class="star"
+                  v-if="app.highQuality"
                   v-b-popover.hover.bottom="
                     $t(`app_state_highquality_explanation`)
                   "
+                  iname="star"
+                  class="star"
                 />
               </small>
             </BCardTitle>
 
             <BCardText :id="`${app.id}-desc`">
-              {{ app.manifest.description }}
+              {{ app.description }}
             </BCardText>
 
             <BCardText
@@ -359,8 +311,8 @@ const onCustomInstallClick = onSubmit(async () => {
               class="align-self-end position-relative mt-auto"
             >
               <span
-                class="alert-warning p-1"
                 v-b-popover.hover.top="$t('orphaned_details')"
+                class="alert-warning p-1"
               >
                 <YIcon iname="warning" /> {{ $t('orphaned') }}
               </span>
@@ -390,33 +342,6 @@ const onCustomInstallClick = onSubmit(async () => {
         </template>
       </CardForm>
     </template>
-
-    <!-- CUSTOM SKELETON -->
-    <template #skeleton>
-      <BCardGroup deck>
-        <BCard v-for="i in 15" :key="i" no-body style="min-height: 10rem">
-          <div class="d-flex w-100 mt-auto">
-            <BSkeleton width="30px" height="30px" class="me-2 ms-auto" />
-            <BSkeleton
-              :width="randint(30, 70) + '%'"
-              height="30px"
-              class="me-auto"
-            />
-          </div>
-          <BSkeleton
-            v-if="randint(0, 1)"
-            :width="randint(30, 85) + '%'"
-            height="24px"
-            class="mx-auto"
-          />
-          <BSkeleton
-            :width="randint(30, 85) + '%'"
-            height="24px"
-            class="mx-auto mb-auto"
-          />
-        </BCard>
-      </BCardGroup>
-    </template>
   </ViewSearch>
 </template>
 
@@ -449,13 +374,9 @@ const onCustomInstallClick = onSubmit(async () => {
 }
 
 .card-deck {
-  padding: 0;
-  margin-bottom: 0;
-  display: flex;
-  flex-flow: row wrap;
-
-  > * {
+  .card {
     flex-basis: 100%;
+    outline: none;
 
     @include media-breakpoint-up(md) {
       flex-basis: 50%;
@@ -466,14 +387,15 @@ const onCustomInstallClick = onSubmit(async () => {
       flex-basis: 33%;
       max-width: calc(33.3% - 1rem);
     }
-  }
 
-  .card {
     &:hover {
       color: $white;
       background-color: $dark;
       border-color: $dark;
     }
+    &:focus {
+      box-shadow: 0 0 0 $btn-focus-width rgba($dark, 0.5);
+    }
 
     :deep(.card-link) {
       color: inherit;
diff --git a/app/src/views/app/appData.ts b/app/src/views/app/appData.ts
new file mode 100644
index 000000000..15f275b3f
--- /dev/null
+++ b/app/src/views/app/appData.ts
@@ -0,0 +1,19 @@
+import type { AppLevel, AppState } from '@/types/core/api'
+
+export function formatAppQuality(app: { state: AppState; level: AppLevel }) {
+  const variants = {
+    working: 'success',
+    lowquality: 'warning',
+    inprogress: 'danger',
+    broken: 'danger',
+    thirdparty: 'danger',
+  } as const
+  const working = app.state === 'working'
+  const state: keyof typeof variants =
+    working && app.level <= 0
+      ? 'broken'
+      : working && app.level <= 4
+        ? 'lowquality'
+        : app.state
+  return { state, variant: variants[state] }
+}

From a5714e56fc062a1b214a48a442de1cb6b04c441e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:12:56 +0200
Subject: [PATCH 165/275] refactor: rework async AppInfo

---
 app/src/helpers/commons.ts                    |   9 +
 app/src/types/core/api.ts                     |  46 ++
 app/src/views/app/AppInfo.vue                 | 516 +++++++-----------
 app/src/views/app/_AppIntegrationAndLinks.vue |  67 +++
 app/src/views/app/appData.ts                  |  41 +-
 5 files changed, 348 insertions(+), 331 deletions(-)
 create mode 100644 app/src/views/app/_AppIntegrationAndLinks.vue

diff --git a/app/src/helpers/commons.ts b/app/src/helpers/commons.ts
index 92187267c..e987213b5 100644
--- a/app/src/helpers/commons.ts
+++ b/app/src/helpers/commons.ts
@@ -88,6 +88,15 @@ export function arrayDiff<T extends string>(
   return arr1.filter((item) => !arr2.includes(item))
 }
 
+export function joinOrNull(
+  value: any[] | string | null | undefined,
+): string | null {
+  if (Array.isArray(value) && value.length) {
+    return value.join(i18n.global.t('words.separator'))
+  }
+  return typeof value === 'string' ? value : null
+}
+
 /**
  * Returns a new string with escaped HTML (`&<>"'` replaced by entities).
  *
diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index 9fe94c960..0ba2c36e5 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -1,4 +1,5 @@
 import type { Obj, Translation } from '@/types/commons'
+import type { Permission } from '@/types/core/data'
 
 // APPS
 
@@ -71,3 +72,48 @@ export type Catalog = {
     title: string
   }[]
 }
+
+export type AppInfo = {
+  id: string
+  description: string
+  label: string
+  name: string
+  version: string
+  domain_path: string
+  logo: string | null
+  screenshot?: string
+  upgradable: string
+  settings: { domain?: string; path?: string } & Obj
+  setting_path: string
+  permissions: Obj<Permission & { sublabel: string }>
+  manifest: AppMinManifest & {
+    install: Obj<AnyOption>
+    upstream: {
+      license: string | null
+      website: string | null
+      demo: string | null
+      admindoc: string | null
+      userdoc: string | null
+      code: string | null
+    }
+    resources: Obj
+    doc: {
+      DESCRIPTION?: Translation
+      ADMIN?: Translation
+    } & Obj<Translation>
+    notifications: {
+      PRE_INSTALL: Obj<Translation> | null
+      POST_INSTALL: Obj<Translation> | null
+      PRE_UPGRADE: Obj<Translation> | null
+      POST_UPGRADE: Obj<Translation> | null
+    }
+  }
+  from_catalog: CatalogApp
+  is_webapp: boolean
+  is_default: boolean
+  supports_change_url: boolean
+  supports_backup_restore: boolean
+  supports_multi_instance: boolean
+  supports_config_panel: boolean
+  supports_purge: boolean
+}
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index f43976286..e4cd456c7 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -1,25 +1,26 @@
 <script setup lang="ts">
-import { useVuelidate } from '@vuelidate/core'
-import { computed, reactive, ref, shallowRef } from 'vue'
+import { reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 
 import api, { objectToParams } from '@/api'
 import { type APIError } from '@/api/errors'
 import ConfigPanelsComponent from '@/components/ConfigPanels.vue'
-import type {
-  ConfigPanelsProps,
-  OnPanelApply,
-} from '@/composables/configPanels'
 import { formatConfigPanels, useConfigPanels } from '@/composables/configPanels'
 import { useDomains } from '@/composables/data'
+import { useArrayRule, useForm } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
-import { useInitialQueries } from '@/composables/useInitialQueries'
-import { isEmptyValue } from '@/helpers/commons'
+import { isEmptyValue, joinOrNull, pick, toEntries } from '@/helpers/commons'
 import { humanPermissionName } from '@/helpers/filters/human'
-import { helpers, required } from '@/helpers/validators'
+import { required } from '@/helpers/validators'
 import { formatI18nField } from '@/helpers/yunohostArguments'
+import type { Obj } from '@/types/commons'
+import type { AppInfo } from '@/types/core/api'
+import type { Permission } from '@/types/core/data'
 import type { CoreConfigPanels } from '@/types/core/options'
+import type { BaseItemComputedProps } from '@/types/form'
+import AppIntegrationAndLinks from './_AppIntegrationAndLinks.vue'
+import { formatAppIntegration, formatAppLinks } from './appData'
 
 const props = defineProps<{
   id: string
@@ -27,249 +28,177 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
-const route = useRoute()
 const router = useRouter()
 const modalConfirm = useAutoModal()
 
-const { domainsAsChoices } = useDomains()
-
-// FIXME
-type AppForm = {
-  labels: { label: string; show_tile: boolean }[]
-  url: { domain: string; path: string }
-}
-const form: AppForm = reactive({
-  labels: [],
-  url: { domain: '', path: '' },
-})
-const rules = computed(() => ({
-  labels: {
-    $each: helpers.forEach({
-      label: { required },
-    }),
-  },
-  url: { path: { required } },
-}))
-const externalResults = reactive({})
-const v$ = useVuelidate(rules, form, { $externalResults: externalResults })
-const { loading, refetch } = useInitialQueries(
-  [
+const [app, form, coreConfig, configPanelErr] = await api
+  .fetchAll<[AppInfo, Obj<Permission>]>([
     { uri: `apps/${props.id}?full` },
+    // FIXME permissions needed?
     { uri: 'users/permissions?full', cachePath: 'permissions' },
     { uri: 'domains', cachePath: 'domains' },
-  ],
-  { onQueriesResponse },
-)
-
-const app = ref()
-const purge = ref(false)
-const configPanelErr = ref('')
-const config = shallowRef<ConfigPanelsProps | undefined>()
-const doc = ref()
-
-const currentTab = computed(() => {
-  return route.params.tabId
-})
-
-const allowedGroups = computed(() => {
-  if (!app.value) return
-  return app.value.permissions[0].allowed
-})
-
-function appLinksIcons(linkType) {
-  const linksIcons = {
-    license: 'institution',
-    website: 'globe',
-    admindoc: 'book',
-    userdoc: 'book',
-    code: 'code',
-    package: 'code',
-    package_license: 'institution',
-    forum: 'comments',
-  }
-  return linksIcons[linkType]
-}
-
-async function onQueriesResponse(app_: any) {
-  // const form = { labels: [] }
-
-  const mainPermission = app_.permissions[props.id + '.main']
-  mainPermission.name = props.id + '.main'
-  mainPermission.title = t('permission_main')
-  mainPermission.tileAvailable =
-    mainPermission.url !== null && !mainPermission.url.startsWith('re:')
-  form.labels.push({
-    label: mainPermission.label,
-    show_tile: mainPermission.show_tile,
-  })
+  ])
+  .then(async ([app_]) => {
+    // Query config panels if app supports it
+    let config: CoreConfigPanels | undefined
+    let configPanelErr: string | undefined
+    if (app_.supports_config_panel) {
+      await api
+        .get<CoreConfigPanels>(`apps/${props.id}/config?full`)
+        .then((coreConfig) => {
+          // Fake integration of operations in config panels
+          coreConfig.panels.unshift({
+            id: 'operations',
+            name: t('operations'),
+          })
+          config = coreConfig
+        })
+        .catch((err: APIError) => {
+          configPanelErr = err.message
+        })
+    }
 
-  const permissions = [mainPermission]
-  for (const [name, perm] of Object.entries(app_.permissions)) {
-    if (!name.endsWith('.main')) {
-      permissions.push({
+    const { domain, path } = app_.settings
+    const form = ref({
+      labels: [] as { label: string; show_tile: boolean }[],
+      url: domain && path ? { domain, path: path.slice(1) } : undefined,
+    })
+    const permissions = []
+    for (const [name, perm] of toEntries(app_.permissions)) {
+      const isMain = name.endsWith('.main')
+      const permission = {
         ...perm,
         name,
-        label: perm.sublabel,
-        title: humanPermissionName(name),
-        tileAvailable: perm.url !== null && !perm.url.startsWith('re:'),
-      })
-      form.labels.push({ label: perm.sublabel, show_tile: perm.show_tile })
+        label: isMain ? perm.label : perm.sublabel,
+        title: isMain ? t('permission_main') : humanPermissionName(name),
+        tileAvailable: !!perm.url && !perm.url.startsWith('re:'),
+      }
+      permissions.push(permission)
+      form.value.labels.push(pick(permission, ['label', 'show_tile']))
     }
-  }
-  // this.form = form
-
-  const { DESCRIPTION, ADMIN, ...doc } = app_.manifest.doc
-  const notifs = app_.manifest.notifications
-  const {
-    ldap,
-    sso,
-    multi_instance,
-    ram,
-    disk,
-    architectures: archs,
-  } = app_.manifest.integration
-  app.value = {
-    id: props.id,
-    version: app_.version,
-    label: mainPermission.label,
-    domain: app_.settings.domain,
-    alternativeTo: app_.from_catalog.potential_alternative_to?.length
-      ? app_.from_catalog.potential_alternative_to.join(t('words.separator'))
-      : null,
-    description: DESCRIPTION ? formatI18nField(DESCRIPTION) : app_.description,
-    integration:
-      app_.manifest.packaging_format >= 2
-        ? {
-            archs: Array.isArray(archs)
-              ? archs.join(t('words.separator'))
-              : archs,
-            ldap: ldap === 'not_relevant' ? null : ldap,
-            sso: sso === 'not_relevant' ? null : sso,
-            multi_instance,
-            resources: { ram: ram.runtime, disk },
-          }
-        : null,
-    links: [
-      [
-        'license',
-        `https://spdx.org/licenses/${app_.manifest.upstream.license}`,
-      ],
-      ...['website', 'admindoc', 'userdoc', 'code'].map((key) => {
-        return [key, app_.manifest.upstream[key]]
+
+    const { DESCRIPTION, ADMIN, ...doc } = app_.manifest.doc
+    const notifs = app_.manifest.notifications
+    const { label, allowed } = app_.permissions[props.id + '.main']
+    const app = {
+      id: props.id,
+      version: app_.version,
+      label,
+      domain,
+      url: domain && path ? `https://${domain}${path}` : null,
+      allowedGroups: allowed.length ? allowed.join(', ') : t('nobody'),
+      alternativeTo: joinOrNull(app_.from_catalog.potential_alternative_to),
+      description: formatI18nField(DESCRIPTION) || app_.description,
+      integration: formatAppIntegration(
+        app_.manifest.integration,
+        app_.manifest.packaging_format,
+      ),
+      // TODO: could return `remote` key of manifest to pass only manifest and id?
+      links: formatAppLinks({
+        ...app_.manifest,
+        // @ts-expect-error
+        remote: app_.from_catalog.git ?? { url: null },
       }),
-      ['package', app_.from_catalog.git?.url],
-      ['package_license', app_.from_catalog.git?.url + '/blob/master/LICENSE'],
-      ['forum', `https://forum.yunohost.org/tag/${app_.manifest.id}`],
-    ].filter(([key, val]) => !!val),
-    doc: {
-      notifications: {
-        postInstall:
-          notifs.POST_INSTALL && notifs.POST_INSTALL.main
+      doc: {
+        notifications: {
+          postInstall: notifs.POST_INSTALL?.main
             ? [['main', formatI18nField(notifs.POST_INSTALL.main)]]
             : [],
-        postUpgrade: notifs.POST_UPGRADE
-          ? Object.entries(notifs.POST_UPGRADE).map(([key, content]) => {
-              return [key, formatI18nField(content)]
-            })
-          : [],
+          postUpgrade: notifs.POST_UPGRADE
+            ? Object.entries(notifs.POST_UPGRADE).map(([key, content]) => {
+                return [key, formatI18nField(content)]
+              })
+            : [],
+        },
+        admin: [
+          ['admin', formatI18nField(ADMIN)],
+          ...Object.keys(doc)
+            .sort()
+            .map((key) => [
+              key.charAt(0) + key.slice(1).toLowerCase(),
+              formatI18nField(doc[key]),
+            ]),
+        ].filter((doc) => doc[1]),
       },
-      admin: [
-        ['admin', formatI18nField(ADMIN)],
-        ...Object.keys(doc)
-          .sort()
-          .map((key) => [
-            key.charAt(0) + key.slice(1).toLowerCase(),
-            formatI18nField(doc[key]),
-          ]),
-      ].filter((doc) => doc[1]),
-    },
-    is_webapp: app_.is_webapp,
-    is_default: app_.is_default,
-    supports_change_url: app_.supports_change_url,
-    supports_config_panel: app_.supports_config_panel,
-    supports_purge: app_.supports_purge,
-    permissions,
-  }
-  if (app_.settings.domain && app_.settings.path) {
-    app.value.url = 'https://' + app_.settings.domain + app_.settings.path
-    form.url = {
-      domain: app_.settings.domain,
-      path: app_.settings.path.slice(1),
+      isWebapp: app_.is_webapp,
+      isDefault: ref(app_.is_default),
+      supportsChangeUrl: app_.supports_change_url,
+      supportsPurge: app_.supports_purge,
+      permissions,
     }
-  }
-
-  if (
-    !Object.values(app.value.doc.notifications).some((notif) => notif.length)
-  ) {
-    app.value.doc.notifications = null
-  }
-
-  if (app_.supports_config_panel) {
-    await api
-      .get(`apps/${props.id}/config?full`)
-      .then((cp) => {
-        const config_ = cp as CoreConfigPanels
-        // Fake integration of operations in config panels
-        config_.panels.unshift({
-          id: 'operations',
-          name: t('operations'),
-        })
-        config.value = useConfigPanels(
-          formatConfigPanels(config_),
-          () => props.tabId,
-          onPanelApply,
-        )
-      })
-      .catch((err: APIError) => {
-        configPanelErr.value = err.message
-      })
-  }
-}
 
-const onPanelApply: OnPanelApply = ({ panelId, data, action }, onError) => {
-  api
-    .put({
-      uri: action
-        ? `apps/${props.id}/actions/${action}`
-        : `apps/${props.id}/config/${panelId}`,
-      data: isEmptyValue(data) ? {} : { args: objectToParams(data) },
-      humanKey: {
-        key: `apps.${action ? 'action' : 'update'}_config`,
-        id: panelId,
-        name: props.id,
+    return [app, form, config, configPanelErr] as const
+  })
+const { domainsAsChoices } = useDomains()
+
+const config = coreConfig
+  ? useConfigPanels(
+      formatConfigPanels(coreConfig),
+      () => props.tabId,
+      ({ panelId, data, action }, onError) => {
+        api
+          .put({
+            uri: action
+              ? `apps/${props.id}/actions/${action}`
+              : `apps/${props.id}/config/${panelId}`,
+            data: isEmptyValue(data) ? {} : { args: objectToParams(data) },
+            humanKey: {
+              key: `apps.${action ? 'action' : 'update'}_config`,
+              id: panelId,
+              name: props.id,
+            },
+          })
+          .then(() => api.refetch())
+          .catch(onError)
       },
-    })
-    .then(() => refetch())
-    .catch(onError)
+    )
+  : undefined
+
+const fields = {
+  labels: reactive({
+    rules: useArrayRule(() => form.value.labels, { label: { required } }),
+  }),
+  url: {
+    rules: { path: { required } },
+  },
 }
+const { v } = useForm(form, fields)
+const purge = ref(false)
 
-function changeLabel(permName, data) {
-  data.show_tile = data.show_tile ? 'True' : 'False'
+async function changeLabel(permName: string, i: number) {
+  if (!(await v.value.form.labels[i].$validate())) return
+  const data = form.value.labels[i]
   api
     .put({
       uri: 'users/permissions/' + permName,
-      data,
+      data: {
+        label: data.label,
+        show_tile: data.show_tile ? 'True' : 'False',
+      },
       humanKey: {
         key: 'apps.change_label',
-        prevName: app.value.label,
+        prevName: app.label,
         nextName: data.label,
       },
     })
-    .then(() => refetch(false))
+    // FIXME really need to refetch? permissions store update should be ok
+    .then(() => api.refetch())
 }
 
 async function changeUrl() {
+  if (!(await v.value.form.url.$validate())) return
   const confirmed = await modalConfirm(t('confirm_app_change_url'))
   if (!confirmed) return
 
-  const { domain, path } = form.url
+  const { domain, path } = form.value.url!
   api
     .put({
       uri: `apps/${props.id}/changeurl`,
       data: { domain, path: '/' + path },
-      humanKey: { key: 'apps.change_url', name: app.value.label },
+      humanKey: { key: 'apps.change_url', name: app.label },
     })
-    .then(() => refetch(false))
+    // Refetch because some content of this page relies on the url
+    .then(() => api.refetch())
 }
 
 async function setAsDefaultDomain(undo = false) {
@@ -281,20 +210,21 @@ async function setAsDefaultDomain(undo = false) {
       uri: `apps/${props.id}/default${undo ? '?undo' : ''}`,
       humanKey: {
         key: 'apps.set_default',
-        name: app.value.label,
-        domain: app.value.domain,
+        name: app.label,
+        domain: app.domain,
       },
     })
-    .then(() => refetch(false))
+    .then(() => (app.isDefault.value = true))
 }
 
 async function dismissNotification(name: string) {
   api
     .put({
       uri: `apps/${props.id}/dismiss_notification/${name}`,
-      humanKey: { key: 'apps.dismiss_notification', name: app.value.label },
+      humanKey: { key: 'apps.dismiss_notification', name: app.label },
     })
-    .then(() => refetch(false))
+    // FIXME no need to refetch i guess, filter the reactive notifs?
+    .then(() => api.refetch)
 }
 
 async function uninstall() {
@@ -303,7 +233,7 @@ async function uninstall() {
     .delete({
       uri: 'apps/' + props.id,
       data,
-      humanKey: { key: 'apps.uninstall', name: app.value.label },
+      humanKey: { key: 'apps.uninstall', name: app.label },
     })
     .then(() => {
       router.push({ name: 'app-list' })
@@ -312,14 +242,9 @@ async function uninstall() {
 </script>
 
 <template>
-  <ViewBase :loading="loading">
+  <div>
     <YAlert
-      v-if="
-        app &&
-        app.doc &&
-        app.doc.notifications &&
-        app.doc.notifications.postInstall.length
-      "
+      v-if="app.doc.notifications.postInstall.length"
       variant="info"
       class="my-4"
     >
@@ -345,12 +270,7 @@ async function uninstall() {
     </YAlert>
 
     <YAlert
-      v-if="
-        app &&
-        app.doc &&
-        app.doc.notifications &&
-        app.doc.notifications.postUpgrade.length
-      "
+      v-if="app.doc.notifications.postUpgrade.length"
       variant="info"
       class="my-4"
     >
@@ -375,7 +295,7 @@ async function uninstall() {
       />
     </YAlert>
 
-    <section v-if="app" class="border rounded p-3 mb-4">
+    <section class="border rounded p-3 mb-4">
       <div class="d-md-flex align-items-center mb-4">
         <h1 class="mb-3 mb-md-0">
           <YIcon iname="cube" />
@@ -436,14 +356,14 @@ async function uninstall() {
     <!-- BASIC INFOS -->
     <ConfigPanelsComponent
       v-if="config"
-      v-model="config.form"
+      v-model="config.form.value"
       :panel="config.panel.value"
       :validations="config.v.value"
       :routes="config.routes"
       @apply="config.onPanelApply"
     >
       <!-- OPERATIONS TAB -->
-      <template v-if="currentTab === 'operations'" #default>
+      <template v-if="tabId === 'operations'" #default>
         <!-- CHANGE PERMISSIONS LABEL -->
         <BFormGroup
           :label="$t('app_manage_label_and_tiles')"
@@ -457,15 +377,14 @@ async function uninstall() {
             label-cols="0"
             label-class=""
             class="m-0"
-            :validation="v$.form.labels.$each[i]"
+            :validation="v.form.labels[i]"
           >
-            <template #default="{ self }">
+            <template #default="componentProps">
               <BInputGroup>
                 <InputItem
-                  :state="self.state"
-                  v-model="form.labels[i].label"
                   :id="'perm' + i"
-                  :aria-describedby="'perm-' + i + '_group__BV_description_'"
+                  v-bind="componentProps as BaseItemComputedProps"
+                  v-model="form.labels[i].label"
                 />
 
                 <BInputGroupText v-if="perm.tileAvailable">
@@ -476,9 +395,9 @@ async function uninstall() {
                 </BInputGroupText>
 
                 <BButton
-                  variant="info"
                   v-t="'save'"
-                  @click="changeLabel(perm.name, form.labels[i])"
+                  variant="info"
+                  @click="changeLabel(perm.name, i)"
                 />
               </BInputGroup>
             </template>
@@ -500,9 +419,7 @@ async function uninstall() {
           label-class="fw-bold"
           label-cols-lg="0"
         >
-          {{
-            allowedGroups.length > 0 ? allowedGroups.join(', ') : $t('nobody')
-          }}
+          {{ app.allowedGroups }}
           <BButton
             size="sm"
             :to="{ name: 'group-list' }"
@@ -516,14 +433,13 @@ async function uninstall() {
         <hr />
 
         <!-- CHANGE URL -->
-        <BFormGroup
+        <FormField
+          v-if="app.isWebapp"
           :label="$t('app_info_changeurl_desc')"
-          label-for="input-url"
-          :label-cols-lg="app.supports_change_url ? 0 : 0"
+          :label-cols="0"
           label-class="fw-bold"
-          v-if="app.is_webapp"
         >
-          <BInputGroup v-if="app.supports_change_url">
+          <BInputGroup v-if="app.supportsChangeUrl && form.url">
             <BInputGroupText>https://</BInputGroupText>
 
             <BFormSelect
@@ -533,11 +449,7 @@ async function uninstall() {
 
             <BInputGroupText>/</BInputGroupText>
 
-            <BFormInput
-              id="input-url"
-              v-model="form.url.path"
-              class="flex-grow-3"
-            />
+            <BFormInput v-model="form.url.path" class="flex-grow-3" />
 
             <BButton @click="changeUrl" variant="info" v-t="'save'" />
           </BInputGroup>
@@ -546,18 +458,17 @@ async function uninstall() {
             <YIcon iname="exclamation" />
             {{ $t('app_info_change_url_disabled_tooltip') }}
           </div>
-        </BFormGroup>
-        <hr v-if="app.is_webapp" />
+        </FormField>
+        <hr v-if="app.isWebapp" />
 
         <!-- MAKE DEFAULT -->
-        <BFormGroup
+        <FormField
+          v-if="app.isWebapp"
           :label="$t('app_info_default_desc', { domain: app.domain })"
           label-for="main-domain"
-          label-class="fw-bold"
-          label-cols-md="4"
-          v-if="app.is_webapp"
+          label-cols="0"
         >
-          <template v-if="!app.is_default">
+          <template v-if="!app.isDefault.value">
             <BButton
               @click="setAsDefaultDomain(false)"
               id="main-domain"
@@ -576,11 +487,11 @@ async function uninstall() {
               <YIcon iname="star" /> {{ $t('app_make_not_default') }}
             </BButton>
           </template>
-        </BFormGroup>
+        </FormField>
       </template>
     </ConfigPanelsComponent>
 
-    <BCard v-if="app && app.doc.admin.length" no-body>
+    <BCard v-if="app.doc.admin.length" no-body>
       <BTabs card fill pills>
         <BTab v-for="[name, content] in app.doc.admin" :key="name">
           <template #title>
@@ -592,83 +503,23 @@ async function uninstall() {
       </BTabs>
     </BCard>
 
-    <YCard
-      v-if="app && app.integration"
-      id="app-integration"
-      :title="$t('app.integration.title')"
-      collapsable
-      collapsed
-      no-body
-    >
-      <BListGroup flush>
-        <YListGroupItem variant="info">
-          {{ $t('app.integration.archs') }} {{ app.integration.archs }}
-        </YListGroupItem>
-        <YListGroupItem
-          v-if="app.integration.ldap"
-          :variant="app.integration.ldap === true ? 'success' : 'warning'"
-        >
-          {{ $t(`app.integration.ldap.${app.integration.ldap}`) }}
-        </YListGroupItem>
-        <YListGroupItem
-          v-if="app.integration.sso"
-          :variant="app.integration.sso === true ? 'success' : 'warning'"
-        >
-          {{ $t(`app.integration.sso.${app.integration.sso}`) }}
-        </YListGroupItem>
-        <YListGroupItem variant="info">
-          {{
-            $t(
-              `app.integration.multi_instance.${app.integration.multi_instance}`,
-            )
-          }}
-        </YListGroupItem>
-        <YListGroupItem variant="info">
-          {{ $t('app.integration.resources', app.integration.resources) }}
-        </YListGroupItem>
-      </BListGroup>
-    </YCard>
-
-    <YCard
-      v-if="app"
-      id="app-links"
-      icon="link"
-      :title="$t('app.links.title')"
-      collapsable
-      collapsed
-      no-body
-    >
-      <BListGroup flush>
-        <YListGroupItem v-for="[key, link] in app.links" :key="key" no-status>
-          <BLink :href="link" target="_blank">
-            <YIcon :iname="appLinksIcons(key)" class="me-1" />
-            {{ $t('app.links.' + key) }}
-          </BLink>
-        </YListGroupItem>
-      </BListGroup>
-    </YCard>
+    <AppIntegrationAndLinks :integration="app.integration" :links="app.links" />
 
     <BModal
-      v-if="app"
       id="uninstall-modal"
       :title="$t('confirm_uninstall', { name: id })"
       header-bg-variant="warning"
       header-class="text-black"
-      :body-class="{ 'd-none': !app.supports_purge }"
+      :body-class="{ 'd-none': !app.supportsPurge }"
       @ok="uninstall"
     >
-      <BFormGroup v-if="app.supports_purge">
+      <BFormGroup v-if="app.supportsPurge">
         <BFormCheckbox v-model="purge">
           {{ $t('app.uninstall.purge_desc', { name: id }) }}
         </BFormCheckbox>
       </BFormGroup>
     </BModal>
-
-    <template #skeleton>
-      <CardInfoSkeleton :item-count="8" />
-      <CardFormSkeleton />
-    </template>
-  </ViewBase>
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -689,4 +540,9 @@ select {
 .yuno-alert div div:not(:last-child) {
   margin-bottom: 1rem;
 }
+
+// FIXME bootstrap-vue-next bug
+:deep(.card-header-tabs) {
+  margin-bottom: unset;
+}
 </style>
diff --git a/app/src/views/app/_AppIntegrationAndLinks.vue b/app/src/views/app/_AppIntegrationAndLinks.vue
new file mode 100644
index 000000000..130f382ed
--- /dev/null
+++ b/app/src/views/app/_AppIntegrationAndLinks.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { AppLinks, AppIntegration } from './appData'
+
+defineProps<{
+  links: AppLinks
+  integration?: AppIntegration
+}>()
+</script>
+
+<template>
+  <YCard
+    v-if="integration"
+    id="app-integration"
+    :title="$t('app.integration.title')"
+    collapsable
+    collapsed
+    no-body
+  >
+    <BListGroup flush>
+      <YListGroupItem variant="info">
+        {{ $t('app.integration.archs') }} {{ integration.archs }}
+      </YListGroupItem>
+      <YListGroupItem
+        v-if="integration.ldap"
+        :variant="integration.ldap === true ? 'success' : 'warning'"
+      >
+        {{ $t(`app.integration.ldap.${integration.ldap}`) }}
+      </YListGroupItem>
+      <YListGroupItem
+        v-if="integration.sso"
+        :variant="integration.sso === true ? 'success' : 'warning'"
+      >
+        {{ $t(`app.integration.sso.${integration.sso}`) }}
+      </YListGroupItem>
+      <YListGroupItem variant="info">
+        {{ $t(`app.integration.multi_instance.${integration.multiInstance}`) }}
+      </YListGroupItem>
+      <YListGroupItem variant="info">
+        {{ $t('app.integration.resources', integration.resources) }}
+      </YListGroupItem>
+    </BListGroup>
+  </YCard>
+
+  <YCard
+    id="app-links"
+    icon="link"
+    :title="$t('app.links.title')"
+    collapsable
+    collapsed
+    no-body
+  >
+    <template #header>
+      <h2><YIcon iname="link" /> {{ $t('app.links.title') }}</h2>
+    </template>
+
+    <BListGroup flush>
+      <template v-for="([icon, link], key) in links" :key="key">
+        <YListGroupItem v-if="link" no-status>
+          <YIcon :iname="icon" class="me-3" />
+          <BLink :href="link" target="_blank">
+            {{ $t('app.links.' + key) }}
+          </BLink>
+        </YListGroupItem>
+      </template>
+    </BListGroup>
+  </YCard>
+</template>
diff --git a/app/src/views/app/appData.ts b/app/src/views/app/appData.ts
index 15f275b3f..d642fd0c5 100644
--- a/app/src/views/app/appData.ts
+++ b/app/src/views/app/appData.ts
@@ -1,4 +1,5 @@
-import type { AppLevel, AppState } from '@/types/core/api'
+import { joinOrNull } from '@/helpers/commons'
+import type { AppLevel, AppManifest, AppState } from '@/types/core/api'
 
 export function formatAppQuality(app: { state: AppState; level: AppLevel }) {
   const variants = {
@@ -17,3 +18,41 @@ export function formatAppQuality(app: { state: AppState; level: AppLevel }) {
         : app.state
   return { state, variant: variants[state] }
 }
+
+export function formatAppIntegration(
+  {
+    architectures,
+    ldap,
+    sso,
+    multi_instance,
+    ram,
+    disk,
+  }: AppManifest['integration'],
+  packagingFormat: number,
+) {
+  if (packagingFormat < 2) return undefined // LEGACY
+  return {
+    archs: joinOrNull(architectures),
+    ldap: ldap === 'not_relevant' ? null : ldap,
+    sso: sso === 'not_relevant' ? null : sso,
+    multiInstance: multi_instance,
+    resources: { ram: ram.runtime, disk },
+  }
+}
+
+export function formatAppLinks({ upstream, id, remote }: AppManifest) {
+  const url = remote.url
+  return {
+    license: ['institution', `https://spdx.org/licenses/${upstream.license}`],
+    website: ['globe', upstream.website],
+    admindoc: ['book', upstream.admindoc],
+    userdoc: ['book', upstream.userdoc],
+    code: ['code', upstream.code],
+    package: ['code', url],
+    package_license: ['institution', url ? `${url}/blob/master/LICENSE` : null],
+    forum: ['comments', `https://forum.yunohost.org/tag/${id}`],
+  } as const
+}
+
+export type AppIntegration = ReturnType<typeof formatAppIntegration>
+export type AppLinks = ReturnType<typeof formatAppLinks>

From 301fd4d36c43dd2072a7db925cae3c51dc0dff9e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:14:52 +0200
Subject: [PATCH 166/275] refactor: rework async AppInstall

---
 app/src/types/core/api.ts        |  31 +++
 app/src/views/app/AppInstall.vue | 315 +++++++++----------------------
 app/src/views/app/appData.ts     |  10 +-
 3 files changed, 129 insertions(+), 227 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index 0ba2c36e5..0deea28a6 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -1,5 +1,6 @@
 import type { Obj, Translation } from '@/types/commons'
 import type { Permission } from '@/types/core/data'
+import type { AnyOption } from '@/types/core/options'
 
 // APPS
 
@@ -32,6 +33,36 @@ export type AppMinManifest = {
   }
   upstream: AppUpstream
 }
+
+export type AppManifest = AppMinManifest & {
+  upstream: AppUpstream
+  install: AnyOption[]
+  doc: {
+    DESCRIPTION?: Translation
+    ADMIN?: Translation
+  } & Obj<Translation>
+  notifications: {
+    PRE_INSTALL: Obj<Translation> | null
+    POST_INSTALL: Obj<Translation> | null
+    PRE_UPGRADE: Obj<Translation> | null
+    POST_UPGRADE: Obj<Translation> | null
+  }
+  requirements: Record<
+    'required_yunohost_version' | 'arch' | 'install' | 'disk' | 'ram',
+    {
+      pass: boolean
+      values: { current: string; required: string }
+    }
+  >
+  resources: Obj
+  remote: { type: string; url: string; branch: string; revision: string }
+  lastUpdate: number
+  quality: { level: AppLevel; state: AppState }
+  antifeatures: string[]
+  potential_alternative_to: string[]
+  screenshot: string | null
+}
+
 type CatalogApp = {
   added_in_catalog: number
   antifeatures: string[]
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 0a6974e57..4344f7082 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -1,179 +1,100 @@
 <script setup lang="ts">
-import { ref, shallowRef, type Ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 
 import api, { objectToParams } from '@/api'
-import { type APIError } from '@/api/errors'
 import { formatOptions } from '@/composables/configPanels'
-import { useForm, type FormValidation } from '@/composables/form'
+import { useForm } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
-import { useInitialQueries } from '@/composables/useInitialQueries'
+import { getKeys, joinOrNull } from '@/helpers/commons'
 import { formatForm, formatI18nField } from '@/helpers/yunohostArguments'
 import type { Obj } from '@/types/commons'
-import type { FormFieldDict } from '@/types/form'
+import type { AppManifest, Catalog } from '@/types/core/api'
+import {
+  formatAppIntegration,
+  formatAppLinks,
+  formatAppNotifs,
+  formatAppQuality,
+} from '@/views/app/appData'
+import AppIntegrationAndLinks from './_AppIntegrationAndLinks.vue'
 
 const props = defineProps<{
   id: string
 }>()
 
 const { t } = useI18n()
-const route = useRoute()
 const router = useRouter()
 const modalConfirm = useAutoModal()
 
-// TODO: handling async form is a mess, make a composable or something?
-const formData = shallowRef<
-  | {
-      form: Ref<Obj>
-      fields: FormFieldDict<Obj>
-      v: Ref<FormValidation<Obj>>
-      onSubmit: (
-        fn: (onError: (err: APIError) => void) => void,
-      ) => (e: SubmitEvent) => void
-    }
-  | undefined
->()
-
-const { loading } = useInitialQueries(
-  [
-    { uri: 'apps/catalog?full&with_categories&with_antifeatures' },
-    { uri: `apps/manifest?app=${props.id}&with_screenshot` },
-  ],
-  { onQueriesResponse },
-)
-
-// FIXME
-const app = ref(undefined)
-const name = ref(undefined)
-const force = ref(false)
-
-function appLinksIcons(linkType) {
-  const linksIcons = {
-    license: 'institution',
-    website: 'globe',
-    admindoc: 'book',
-    userdoc: 'book',
-    code: 'code',
-    package: 'code',
-    package_license: 'institution',
-    forum: 'comments',
-  }
-  return linksIcons[linkType]
-}
-
-function onQueriesResponse(catalog: any, _app: any) {
-  const antifeaturesList = Object.fromEntries(
-    catalog.antifeatures.map((af) => [af.id, af]),
-  )
-
-  const { id, name, version, requirements } = _app
-  const {
-    ldap,
-    sso,
-    multi_instance,
-    ram,
-    disk,
-    architectures: archs,
-  } = _app.integration
+const [app, form, fields] = await api
+  .fetchAll<
+    [Catalog, AppManifest]
+  >([{ uri: 'apps/catalog?full&with_categories&with_antifeatures' }, { uri: `apps/manifest?app=${props.id}&with_screenshot` }])
+  .then(([catalog, manifest]) => {
+    const antifeaturesList = Object.fromEntries(
+      catalog.antifeatures.map((af) => [af.id, af]),
+    )
+    const { id, name, version, screenshot, requirements } = manifest
+    const quality = formatAppQuality(manifest.quality)
+    const preInstall = formatI18nField(manifest.notifications.PRE_INSTALL?.main)
+    const antifeatures = manifest.antifeatures?.length
+      ? manifest.antifeatures.map((af) => antifeaturesList[af])
+      : null
+    const hasDanger = quality.variant === 'danger' || !requirements.ram.pass
+    const hasSupport = getKeys(requirements).every((key) => {
+      // ram support is non-blocking requirement and handled on its own.
+      return key === 'ram' || requirements[key].pass
+    })
 
-  const quality = { state: _app.quality.state, variant: 'danger' }
-  if (quality.state === 'working') {
-    if (_app.quality.level <= 0) {
-      quality.state = 'broken'
-    } else if (_app.quality.level <= 4) {
-      quality.state = 'lowquality'
-      quality.variant = 'warning'
-    } else {
-      quality.variant = 'success'
-      quality.state = _app.quality.level >= 8 ? 'highquality' : 'goodquality'
+    const app = {
+      id,
+      name,
+      alternativeTo: joinOrNull(manifest.potential_alternative_to),
+      description: formatI18nField(
+        manifest.doc.DESCRIPTION || manifest.description,
+      ),
+      screenshot,
+      demo: manifest.upstream.demo,
+      version,
+      license: manifest.upstream.license,
+      integration: formatAppIntegration(
+        manifest.integration,
+        manifest.packaging_format,
+      ),
+      links: formatAppLinks(manifest),
+      preInstall,
+      antifeatures,
+      quality,
+      requirements,
+      hasWarning: !!preInstall || antifeatures || quality.variant === 'warning',
+      hasDanger,
+      hasSupport,
+      canInstall: hasSupport && !hasDanger,
     }
-  }
-  const preInstall = formatI18nField(_app.notifications.PRE_INSTALL.main)
-  const antifeatures = _app.antifeatures?.length
-    ? _app.antifeatures.map((af) => antifeaturesList[af])
-    : null
-
-  const hasDanger = quality.variant === 'danger' || !requirements.ram.pass
-  const hasSupport = Object.keys(requirements).every((key) => {
-    // ram support is non-blocking requirement and handled on its own.
-    return key === 'ram' || requirements[key].pass
-  })
-
-  const app_ = {
-    id,
-    name,
-    alternativeTo:
-      _app.potential_alternative_to && _app.potential_alternative_to.length
-        ? _app.potential_alternative_to.join(t('words.separator'))
-        : null,
-    description: formatI18nField(_app.doc.DESCRIPTION || _app.description),
-    screenshot: _app.screenshot,
-    demo: _app.upstream.demo,
-    version,
-    license: _app.upstream.license,
-    integration:
-      _app.packaging_format >= 2
-        ? {
-            archs: Array.isArray(archs)
-              ? archs.join(t('words.separator'))
-              : archs,
-            ldap: ldap === 'not_relevant' ? null : ldap,
-            sso: sso === 'not_relevant' ? null : sso,
-            multi_instance,
-            resources: { ram: ram.runtime, disk },
-          }
-        : null,
-    links: [
-      ['license', `https://spdx.org/licenses/${_app.upstream.license}`],
-      ...['website', 'admindoc', 'userdoc', 'code'].map((key) => {
-        return [key, _app.upstream[key]]
-      }),
-      ['package', _app.remote.url],
-      ['package_license', _app.remote.url + '/blob/master/LICENSE'],
-      ['forum', `https://forum.yunohost.org/tag/${id}`],
-    ].filter(([key, val]) => !!val),
-    preInstall,
-    antifeatures,
-    quality,
-    requirements,
-    hasWarning: !!preInstall || antifeatures || quality.variant === 'warning',
-    hasDanger,
-    hasSupport,
-    canInstall: hasSupport && !hasDanger,
-  }
 
-  // FIXME yunohost should add the label field by default
-  _app.install.unshift({
-    type: 'string',
-    id: 'label',
-    ask: t('label_for_manifestname', { name }),
-    default: name,
-    help: t('label_for_manifestname_help'),
-    optional: false,
+    const { form, fields } = formatOptions([
+      // FIXME yunohost should add the label field by default
+      {
+        type: 'string',
+        id: 'label',
+        ask: t('label_for_manifestname', { name }),
+        default: name,
+        help: t('label_for_manifestname_help'),
+        optional: false,
+      },
+      ...manifest.install,
+    ])
+    return [app, form, fields] as const
   })
 
-  const { form, fields } = formatOptions(_app.install)
-  const { v, onSubmit } = useForm(form, fields)
-  formData.value = { form, fields, v, onSubmit }
-
-  app.value = app_
-}
-
-function formatAppNotifs(notifs) {
-  return Object.keys(notifs).reduce((acc, key) => {
-    return acc + '\n\n' + notifs[key]
-  }, '')
-}
-
-async function performInstall(onError: (err: APIError) => void) {
-  const { form } = formData.value!
+const { v, onSubmit } = useForm(form, fields)
+const force = ref(false)
 
+const performInstall = onSubmit(async (onError) => {
   if ('path' in form.value && form.value.path === '/') {
     const confirmed = await modalConfirm(
-      t('confirm_install_domain_root', {
-        domain: form.value.domain,
-      }),
+      t('confirm_install_domain_root', { domain: form.value.domain }),
     )
     if (!confirmed) return
   }
@@ -189,10 +110,10 @@ async function performInstall(onError: (err: APIError) => void) {
     .post({
       uri: 'apps',
       data,
-      humanKey: { key: 'apps.install', name: app.value.name },
+      humanKey: { key: 'apps.install', name: app.name },
     })
-    .then(async ({ notifications }) => {
-      const postInstall = formatAppNotifs(notifications)
+    .then(async (response: { notifications: Obj<string> }) => {
+      const postInstall = formatAppNotifs(response.notifications)
       if (postInstall) {
         const message =
           t('app.install.notifs.post.alert') + '\n\n' + postInstall
@@ -200,7 +121,7 @@ async function performInstall(onError: (err: APIError) => void) {
           message,
           {
             title: t('app.install.notifs.post.title', {
-              name: app.value.name,
+              name: app.name,
             }),
           },
           { markdown: true, cancelable: false },
@@ -209,11 +130,11 @@ async function performInstall(onError: (err: APIError) => void) {
       router.push({ name: 'app-list' })
     })
     .catch(onError)
-}
+})
 </script>
 
 <template>
-  <ViewBase :loading="loading">
+  <div>
     <template v-if="app">
       <section class="border rounded p-3 mb-4">
         <div class="d-md-flex align-items-center mb-4">
@@ -252,64 +173,10 @@ async function performInstall(onError: (err: APIError) => void) {
         />
       </section>
 
-      <YCard
-        v-if="app.integration"
-        id="app-integration"
-        :title="$t('app.integration.title')"
-        collapsable
-        collapsed
-        no-body
-      >
-        <BListGroup flush>
-          <YListGroupItem variant="info">
-            {{ $t('app.integration.archs') }} {{ app.integration.archs }}
-          </YListGroupItem>
-          <YListGroupItem
-            v-if="app.integration.ldap"
-            :variant="app.integration.ldap === true ? 'success' : 'warning'"
-          >
-            {{ $t(`app.integration.ldap.${app.integration.ldap}`) }}
-          </YListGroupItem>
-          <YListGroupItem
-            v-if="app.integration.sso"
-            :variant="app.integration.sso === true ? 'success' : 'warning'"
-          >
-            {{ $t(`app.integration.sso.${app.integration.sso}`) }}
-          </YListGroupItem>
-          <YListGroupItem variant="info">
-            {{
-              $t(
-                `app.integration.multi_instance.${app.integration.multi_instance}`,
-              )
-            }}
-          </YListGroupItem>
-          <YListGroupItem variant="info">
-            {{ $t('app.integration.resources', app.integration.resources) }}
-          </YListGroupItem>
-        </BListGroup>
-      </YCard>
-
-      <YCard
-        id="app-links"
-        icon="link"
-        :title="$t('app.links.title')"
-        collapsable
-        collapsed
-        no-body
-      >
-        <template #header>
-          <h2><YIcon iname="link" /> {{ $t('app.links.title') }}</h2>
-        </template>
-
-        <BListGroup flush>
-          <YListGroupItem v-for="[key, link] in app.links" :key="key" no-status>
-            <BLink :href="link" target="_blank">
-              <YIcon :iname="appLinksIcons(key)" class="me-1" />
-              {{ $t('app.links.' + key) }}
-            </BLink>
-          </YListGroupItem>
-        </BListGroup>
-      </YCard>
+      <AppIntegrationAndLinks
+        :integration="app.integration"
+        :links="app.links"
+      />
 
       <YAlert v-if="app.hasWarning" variant="warning" class="my-4">
         <h2>{{ $t('app.install.notifs.pre.warning') }}</h2>
@@ -385,28 +252,24 @@ async function performInstall(onError: (err: APIError) => void) {
 
       <!-- INSTALL FORM -->
       <CardForm
-        v-if="formData && (app.canInstall || force)"
-        v-model="formData.form.value"
-        :fields="formData.fields"
+        v-if="app.canInstall || force"
+        v-model="form"
+        :fields="fields"
         :title="$t('app_install_parameters')"
         icon="cog"
         :submit-text="$t('install')"
-        :validations="formData.v.value"
-        @submit="formData.onSubmit(performInstall)($event)"
+        :validations="v"
+        @submit="performInstall"
       />
     </template>
 
+    <!-- FIXME hum not handled, is it still a thing? -->
     <!-- In case of a custom url with no manifest found -->
     <BAlert :modelValue="app === null" variant="warning">
       <YIcon iname="exclamation-triangle" />
       {{ $t('app_install_custom_no_manifest') }}
     </BAlert>
-
-    <template #skeleton>
-      <CardInfoSkeleton />
-      <CardFormSkeleton :cols="null" />
-    </template>
-  </ViewBase>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/app/src/views/app/appData.ts b/app/src/views/app/appData.ts
index d642fd0c5..ba04c4ef5 100644
--- a/app/src/views/app/appData.ts
+++ b/app/src/views/app/appData.ts
@@ -1,6 +1,14 @@
-import { joinOrNull } from '@/helpers/commons'
+import { getKeys, joinOrNull } from '@/helpers/commons'
+import type { Obj } from '@/types/commons'
 import type { AppLevel, AppManifest, AppState } from '@/types/core/api'
 
+export function formatAppNotifs(notifs: Obj<string> | null): string {
+  if (!notifs) return ''
+  return getKeys(notifs).reduce((acc, key) => {
+    return acc + '\n\n' + notifs[key]
+  }, '')
+}
+
 export function formatAppQuality(app: { state: AppState; level: AppLevel }) {
   const variants = {
     working: 'success',

From 2478f53fc25741259aded1a85d8e936961195ee8 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:15:59 +0200
Subject: [PATCH 167/275] refactor: rework async AppList

---
 app/src/types/core/api.ts     |  2 ++
 app/src/views/app/AppList.vue | 53 +++++++++++++----------------------
 2 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index 0deea28a6..7ba15ea06 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -148,3 +148,5 @@ export type AppInfo = {
   supports_config_panel: boolean
   supports_purge: boolean
 }
+
+export type AppList = { apps: AppInfo[] }
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index 36792d3fd..6812bd58f 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -1,35 +1,23 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
-import { useInitialQueries } from '@/composables/useInitialQueries'
+import api from '@/api'
 import { useSearch } from '@/composables/useSearch'
-import type { Obj } from '@/types/commons'
-
-const { loading } = useInitialQueries([{ uri: 'apps?full' }], {
-  onQueriesResponse,
-})
-
-const apps = ref<Obj[] | undefined>()
-const [search, filteredApps] = useSearch(apps, (s, app) => {
-  return Object.values(app).some(
-    (value) => value && value.toLowerCase().includes(s),
-  )
-})
-
-function onQueriesResponse(data: any) {
-  if (data.apps.length === 0) {
-    apps.value = undefined
-    return
-  }
-
-  apps.value = data.apps
-    .map(({ id, name, description, manifest }) => {
-      return { id, name: manifest.name, label: name, description }
-    })
-    .sort((prev, app) => {
-      return prev.label > app.label ? 1 : -1
-    })
-}
+import type { AppList } from '@/types/core/api'
+
+const apps = await api
+  .get<AppList>({ uri: 'apps?full', initial: true })
+  .then(({ apps }) => {
+    return apps
+      .map(({ id, name, description, manifest }) => {
+        return { id, name: manifest.name, label: name, description }
+      })
+      .sort((prev, app) => {
+        return prev.label > app.label ? 1 : -1
+      })
+  })
+
+const [search, filteredApps] = useSearch(apps, (s, app) =>
+  Object.values(app).some((value) => value && value.toLowerCase().includes(s)),
+)
 </script>
 
 <template>
@@ -37,7 +25,6 @@ function onQueriesResponse(data: any) {
     v-model="search"
     items-name="installed_apps"
     :items="filteredApps"
-    :loading="loading"
   >
     <template #top-bar-buttons>
       <BButton variant="success" :to="{ name: 'app-catalog' }">
@@ -54,8 +41,8 @@ function onQueriesResponse(data: any) {
         class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
-          <h5 class="fw-bold">
-            {{ label }}
+          <h5>
+            <strong class="me-1 fw-bold">{{ label }}</strong>
             <small class="text-secondary">{{ id }}</small>
           </h5>
           <p class="m-0">

From ccc65b0b06d3c9d05dc8a1698d3ed497b21e9df0 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:19:22 +0200
Subject: [PATCH 168/275] refactor: rework async BackupCreate

---
 app/src/types/core/api.ts             |  38 +++++
 app/src/views/backup/BackupCreate.vue | 223 +++++++++-----------------
 app/src/views/backup/backupData.ts    |  59 +++++++
 3 files changed, 174 insertions(+), 146 deletions(-)
 create mode 100644 app/src/views/backup/backupData.ts

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index 7ba15ea06..d5a5e57c9 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -150,3 +150,41 @@ export type AppInfo = {
 }
 
 export type AppList = { apps: AppInfo[] }
+
+// BACKUP
+
+export type BackupHookDataKeys =
+  | 'data_xmpp'
+  | 'data_multimedia'
+  | 'data_mail'
+  | 'data_home'
+export type BackupHookKeys =
+  | BackupHookDataKeys
+  | 'conf_ynh_settings'
+  | 'conf_ldap'
+  | 'conf_manually_modified_files'
+  | 'conf_ynh_certs'
+
+export type BackupHooksList = {
+  hooks: BackupHookKeys[]
+}
+
+export type BackupAppList = {
+  apps: Pick<
+    AppInfo,
+    'description' | 'name' | 'version' | 'domain_path' | 'id'
+  >[]
+}
+
+export type BackupInfo = {
+  path: string
+  created_at: string
+  description: string
+  size: number
+  // TODO as array like everywhere else?
+  apps: Obj<
+    Pick<AppInfo, 'description' | 'name' | 'version'> & { size: number }
+  >
+  system: Record<BackupHookKeys, { paths: string[]; size: number }>
+  from_yunohost_version: string
+}
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index df8e8b76e..6a77fa86c 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -1,58 +1,34 @@
 <script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
 import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
-import { useInitialQueries } from '@/composables/useInitialQueries'
+import { fromEntries } from '@/helpers/commons'
+import type { BackupAppList, BackupHooksList } from '@/types/core/api'
+import { formatBackupSystem, parseBackupForm } from './backupData'
 
 const props = defineProps<{
   id: string
 }>()
 
-const { t } = useI18n()
 const router = useRouter()
-const { loading } = useInitialQueries(
-  [{ uri: 'hooks/backup' }, { uri: 'apps?with_backup' }],
-  { onQueriesResponse },
-)
 
-const selected = ref<string[]>([])
-const system = ref()
-const apps = ref()
-
-function formatHooks(hooks) {
-  const data = {}
-  hooks.forEach((hook) => {
-    const groupId = hook.startsWith('conf_')
-      ? 'adminjs_group_configuration'
-      : hook
-    if (groupId in data) {
-      data[groupId].value.push(hook)
-      data[groupId].description += ', ' + t('hook_' + hook)
-    } else {
-      data[groupId] = {
-        name: t('hook_' + groupId),
-        value: [hook],
-        description: t(groupId === hook ? `hook_${hook}_desc` : 'hook_' + hook),
-      }
-    }
+const [system, apps] = await api
+  .fetchAll<
+    [BackupHooksList, BackupAppList]
+  >([{ uri: 'hooks/backup' }, { uri: 'apps?with_backup' }])
+  .then(([{ hooks }, { apps }]) => {
+    return [
+      formatBackupSystem(hooks),
+      fromEntries(apps.map((app) => [app.id, app])),
+    ] as const
   })
-  return data
-}
 
-function onQueriesResponse({ hooks }: any, { apps: apps_ }: any) {
-  system.value = formatHooks(hooks)
-  // transform app array into literal object to match hooks data structure
-  apps.value = apps_.reduce((obj, app) => {
-    obj[app.id] = app
-    return obj
-  }, {})
-  selected.value = [...Object.keys(system.value), ...Object.keys(apps.value)]
-}
+const selected = ref([...Object.keys(system), ...Object.keys(apps)])
 
 function toggleSelected(select: boolean, type: 'system' | 'apps') {
-  const keys = Object.keys((type === 'system' ? system : apps).value)
+  const keys = Object.keys(type === 'system' ? system : apps)
   if (select) {
     const toSelect = keys.filter((item) => !selected.value.includes(item))
     selected.value = [...selected.value, ...toSelect]
@@ -64,126 +40,81 @@ function toggleSelected(select: boolean, type: 'system' | 'apps') {
 }
 
 function createBackup() {
-  const data = { apps: [], system: [] }
-  for (const item of selected.value) {
-    if (item in system.value) {
-      data.system = [...data.system, ...system.value[item].value]
-    } else {
-      data.apps.push(item)
-    }
-  }
-
+  const data = parseBackupForm(selected.value, system)
   api.post({ uri: 'backups', data, humanKey: 'backups.create' }).then(() => {
     router.push({ name: 'backup-list', params: { id: props.id } })
   })
 }
+
+const CheckboxList = createReusableTemplate<{
+  icon: string
+  type: 'system' | 'apps'
+  data: typeof system | typeof apps
+}>()
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="CardListSkeleton">
-    <!-- FIXME switch to <CardForm> ? -->
+  <div>
+    <CheckboxList.define v-slot="{ type, icon, data }">
+      <!-- SYSTEM HEADER -->
+      <BListGroupItem
+        class="d-flex align-items-sm-center flex-column flex-sm-row text-primary"
+      >
+        <h4 class="m-0"><YIcon :iname="icon" /> {{ $t(type) }}</h4>
+
+        <div class="ms-sm-auto mt-2 mt-sm-0">
+          <BButton
+            v-t="'select_all'"
+            size="sm"
+            variant="outline-dark"
+            @click="toggleSelected(true, type)"
+          />
+
+          <BButton
+            v-t="'select_none'"
+            size="sm"
+            variant="outline-dark"
+            class="ms-2"
+            @click="toggleSelected(false, type)"
+          />
+        </div>
+      </BListGroupItem>
+
+      <!-- SYSTEM ITEMS -->
+      <BListGroupItem
+        v-for="(item, partName) in data"
+        :key="partName"
+        class="d-flex justify-content-between align-items-center pe-0"
+      >
+        <!-- FIXME use FormField or BFormGroup to get labels? -->
+        <div class="me-2">
+          <h5 v-if="'id' in item">
+            <span class="fw-bold me-1">{{ item.name }}</span>
+            <small class="text-secondary">{{ item.id }}</small>
+          </h5>
+          <h5 v-else class="fw-bold">
+            {{ item.name }}
+          </h5>
+          <p class="m-0 text-muted">
+            {{ item.description }}
+          </p>
+        </div>
+
+        <BFormCheckbox :value="partName" :aria-label="$t('check')" />
+      </BListGroupItem>
+    </CheckboxList.define>
+
+    <!-- FIXME use DefineTemplate -->
     <YCard :title="$t('backup_create')" icon="archive" no-body>
       <BFormCheckboxGroup
-        v-model="selected"
         id="backup-select"
+        v-model="selected"
         name="backup-select"
         size="lg"
       >
         <BListGroup flush>
-          <!-- SYSTEM HEADER -->
-          <BListGroupItem
-            class="d-flex align-items-sm-center flex-column flex-sm-row text-primary"
-          >
-            <h4 class="m-0"><YIcon iname="cube" /> {{ $t('system') }}</h4>
-
-            <div class="ms-sm-auto mt-2 mt-sm-0">
-              <BButton
-                @click="toggleSelected(true, 'system')"
-                v-t="'select_all'"
-                size="sm"
-                variant="outline-dark"
-              />
-
-              <BButton
-                @click="toggleSelected(false, 'system')"
-                v-t="'select_none'"
-                size="sm"
-                variant="outline-dark"
-                class="ms-2"
-              />
-            </div>
-          </BListGroupItem>
-
-          <!-- SYSTEM ITEMS -->
-          <BListGroupItem
-            v-for="(item, partName) in system"
-            :key="partName"
-            class="d-flex justify-content-between align-items-center pe-0"
-          >
-            <div class="me-2">
-              <h5 class="fw-bold">
-                {{ item.name }}
-              </h5>
-              <p class="m-0 text-muted">
-                {{ item.description }}
-              </p>
-            </div>
-
-            <BFormCheckbox
-              :value="partName"
-              :aria-label="$t('check')"
-              class="d-inline"
-            />
-          </BListGroupItem>
-
-          <!-- APPS HEADER -->
-          <BListGroupItem
-            class="d-flex align-items-sm-center flex-column flex-sm-row text-primary"
-          >
-            <h4 class="m-0">
-              <YIcon iname="cubes" /> {{ $t('applications') }}
-            </h4>
-
-            <div class="ms-sm-auto mt-2 mt-sm-0">
-              <BButton
-                @click="toggleSelected(true, 'apps')"
-                v-t="'select_all'"
-                size="sm"
-                variant="outline-dark"
-              />
-
-              <BButton
-                @click="toggleSelected(false, 'apps')"
-                v-t="'select_none'"
-                size="sm"
-                variant="outline-dark"
-                class="ms-2"
-              />
-            </div>
-          </BListGroupItem>
-
-          <!-- APPS ITEMS -->
-          <BListGroupItem
-            v-for="(item, appName) in apps"
-            :key="appName"
-            class="d-flex justify-content-between align-items-center pe-0"
-          >
-            <div class="me-2">
-              <h5 class="fw-bold">
-                {{ item.name }}
-                <small class="text-secondary">{{ item.id }}</small>
-              </h5>
-              <p class="m-0">
-                {{ item.description }}
-              </p>
-            </div>
-
-            <BFormCheckbox
-              :value="appName"
-              :aria-label="$t('check')"
-              class="d-inline"
-            />
-          </BListGroupItem>
+          <CheckboxList.reuse icon="cube" type="system" :data="system" />
+          <CheckboxList.reuse icon="cubes" type="apps" :data="apps" />
         </BListGroup>
       </BFormCheckboxGroup>
 
@@ -197,5 +128,5 @@ function createBackup() {
         />
       </template>
     </YCard>
-  </ViewBase>
+  </div>
 </template>
diff --git a/app/src/views/backup/backupData.ts b/app/src/views/backup/backupData.ts
new file mode 100644
index 000000000..30e488efc
--- /dev/null
+++ b/app/src/views/backup/backupData.ts
@@ -0,0 +1,59 @@
+import { toEntries } from '@/helpers/commons'
+import type {
+  BackupHookDataKeys,
+  BackupHookKeys,
+  BackupHooksList,
+  BackupInfo,
+} from '@/types/core/api'
+import i18n from '@/i18n'
+
+type BackupSystem = Record<
+  BackupHookDataKeys | 'adminjs_group_configuration',
+  {
+    name: string
+    value: string[]
+    description: string
+    size?: number
+  }
+>
+
+export function formatBackupSystem(
+  system: BackupHooksList['hooks'] | BackupInfo['system'],
+) {
+  const t = i18n.global.t
+  const infos = (
+    !Array.isArray(system)
+      ? toEntries(system).map(([key, { size }]) => [key, size])
+      : system.map((key) => [key])
+  ) as [BackupHookKeys, number | undefined][]
+  return infos.reduce((data, [key, size]) => {
+    const hookKey = key.startsWith('conf_')
+      ? 'adminjs_group_configuration'
+      : (key as BackupHookDataKeys)
+    if (hookKey in data) {
+      data[hookKey].value.push(key)
+      data[hookKey].description += ', ' + t('hook_' + key)
+      if (size) data[hookKey].size! += size
+    } else {
+      data[hookKey] = {
+        name: t('hook_' + hookKey),
+        value: [key],
+        description: t(hookKey === key ? `hook_${key}_desc` : 'hook_' + key),
+        size,
+      }
+    }
+    return data
+  }, {} as BackupSystem)
+}
+
+export function parseBackupForm(selected: string[], system: BackupSystem) {
+  const data = { apps: [], system: [] } as { apps: string[]; system: string[] }
+  for (const key of selected) {
+    if (key in system) {
+      data.system.push(...system[key as keyof typeof system].value)
+    } else {
+      data.apps.push(key)
+    }
+  }
+  return data
+}

From a0dc769461a39d157a4a8ee8d5d59ca190914d9e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:19:59 +0200
Subject: [PATCH 169/275] refactor: rework async BackupInfo

---
 app/src/views/backup/BackupInfo.vue | 109 ++++++++--------------------
 1 file changed, 32 insertions(+), 77 deletions(-)

diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index 47ee2b197..41981df44 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -7,10 +7,11 @@ import api from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { useInfos } from '@/composables/useInfos'
-import { useInitialQueries } from '@/composables/useInitialQueries'
 import { isEmptyValue } from '@/helpers/commons'
 import { readableDate } from '@/helpers/filters/date'
 import { humanSize } from '@/helpers/filters/human'
+import type { BackupInfo } from '@/types/core/api'
+import { formatBackupSystem, parseBackupForm } from './backupData'
 
 const props = defineProps<{
   id: string
@@ -20,63 +21,33 @@ const props = defineProps<{
 const { t } = useI18n()
 const router = useRouter()
 const modalConfirm = useAutoModal()
-const { loading } = useInitialQueries(
-  [{ uri: `backups/${props.name}?with_details` }],
-  { onQueriesResponse },
-)
 
-const selected = ref<string[]>([])
-const error = ref('')
-const isValid = ref<boolean | null>(null)
-const infos = ref()
-const apps = ref()
-const system = ref()
-
-const hasBackupData = computed(() => {
-  return !isEmptyValue(system.value) || !isEmptyValue(apps.value)
-})
-
-function formatHooks(hooks) {
-  const data = {}
-  Object.entries(hooks).forEach(([hook, { size }]) => {
-    const groupId = hook.startsWith('conf_')
-      ? 'adminjs_group_configuration'
-      : hook
-    if (groupId in data) {
-      data[groupId].value.push(hook)
-      data[groupId].description += ', ' + t('hook_' + hook)
-      data[groupId].size += size
-    } else {
-      data[groupId] = {
-        name: t('hook_' + groupId),
-        value: [hook],
-        description: t(groupId === hook ? `hook_${hook}_desc` : 'hook_' + hook),
-        size,
-      }
+const { infos, system, apps } = await api
+  .get<BackupInfo>({ uri: `backups/${props.name}?with_details` })
+  .then((backup) => {
+    return {
+      system: formatBackupSystem(backup.system),
+      apps: backup.apps,
+      infos: {
+        id: props.name,
+        created_at: readableDate(backup.created_at),
+        size: humanSize(backup.size),
+        path: backup.path,
+      },
     }
   })
-  return data
-}
 
-function onQueriesResponse(data: any) {
-  infos.value = {
-    name: props.name,
-    created_at: data.created_at,
-    size: data.size,
-    path: data.path,
-  }
-  system.value = formatHooks(data.system)
-  apps.value = data.apps
+const allKeys = [...Object.keys(apps), ...Object.keys(system)]
+const selected = ref(allKeys)
+const serverError = ref('')
+const isValid = ref<boolean | null>(null)
 
-  toggleSelected()
-}
+const hasBackupData = computed(() => {
+  return !isEmptyValue(system) || !isEmptyValue(apps)
+})
 
 function toggleSelected(select = true) {
-  if (select) {
-    selected.value = [...Object.keys(apps.value), ...Object.keys(system.value)]
-  } else {
-    selected.value = []
-  }
+  selected.value = select ? allKeys : []
 }
 
 async function restoreBackup() {
@@ -85,19 +56,12 @@ async function restoreBackup() {
   )
   if (!confirmed) return
 
-  const data = { apps: [], system: [], force: '' }
-  for (const item of selected.value) {
-    if (item in system.value) {
-      data.system = [...data.system, ...system.value[item].value]
-    } else {
-      data.apps.push(item)
-    }
-  }
-
+  const data = parseBackupForm(selected.value, system)
   api
     .put({
       uri: `backups/${props.name}/restore`,
-      data,
+      // FIXME force?
+      data: { ...data, force: '' },
       humanKey: { key: 'backups.restore', name: props.name },
     })
     .then(() => {
@@ -105,7 +69,7 @@ async function restoreBackup() {
     })
     .catch((err: APIError) => {
       if (!(err instanceof APIBadRequestError)) throw err
-      error.value = err.message
+      serverError.value = err.message
       isValid.value = false
     })
 }
@@ -136,7 +100,7 @@ function downloadBackup() {
 </script>
 
 <template>
-  <ViewBase :loading="loading">
+  <div>
     <!-- BACKUP INFO -->
     <YCard :title="$t('infos')" icon="info-circle" button-unbreak="sm">
       <template #header-buttons>
@@ -152,19 +116,15 @@ function downloadBackup() {
       </template>
 
       <BRow
-        v-for="(value, prop) in infos"
+        v-for="(text, prop) in infos"
         :key="prop"
         no-gutters
         class="row-line"
       >
         <BCol md="3" xl="2">
-          <strong>{{ $t(prop === 'name' ? 'id' : prop) }}</strong>
-        </BCol>
-        <BCol>
-          <span v-if="prop === 'created_at'">{{ readableDate(value) }}</span>
-          <span v-else-if="prop === 'size'">{{ humanSize(value) }}</span>
-          <span v-else>{{ value }}</span>
+          <strong>{{ $t(prop) }}</strong>
         </BCol>
+        <BCol>{{ text }}</BCol>
       </BRow>
     </YCard>
 
@@ -244,7 +204,7 @@ function downloadBackup() {
 
         <BFormInvalidFeedback id="backup-restore-feedback" :state="isValid">
           <BAlert :modelValue="true" variant="danger" class="mb-0">
-            {{ error }}
+            {{ serverError }}
           </BAlert>
         </BFormInvalidFeedback>
       </BFormCheckboxGroup>
@@ -264,10 +224,5 @@ function downloadBackup() {
         />
       </template>
     </YCard>
-
-    <template #skeleton>
-      <CardInfoSkeleton :item-count="4" />
-      <CardListSkeleton />
-    </template>
-  </ViewBase>
+  </div>
 </template>

From dd6522a8b39f2304076c8d2912a92bad3ec63557 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:21:39 +0200
Subject: [PATCH 170/275] refactor: rework async BackupList

---
 app/src/types/core/api.ts           |  9 +++++
 app/src/views/backup/BackupList.vue | 53 +++++++++++------------------
 2 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index d5a5e57c9..df1ccaa98 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -188,3 +188,12 @@ export type BackupInfo = {
   system: Record<BackupHookKeys, { paths: string[]; size: number }>
   from_yunohost_version: string
 }
+
+export type BackupList = {
+  archives: Obj<{
+    path: string
+    created_at: string
+    description: string
+    size: number
+  }>
+}
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index fac7204b6..b349e06d2 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -1,47 +1,34 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
-import { useInitialQueries } from '@/composables/useInitialQueries'
+import api from '@/api'
+import { toEntries } from '@/helpers/commons'
 import { distanceToNow, readableDate } from '@/helpers/filters/date'
 import { humanSize } from '@/helpers/filters/human'
+import type { BackupList } from '@/types/core/api'
 
-const props = defineProps<{
+defineProps<{
   id: string
 }>()
 
-const { loading } = useInitialQueries([{ uri: 'backups?with_info' }], {
-  onQueriesResponse,
-})
-const archives = ref<any[] | null>(null)
-
-function onQueriesResponse(data: any) {
-  const archives_ = Object.entries(data.archives)
-  if (archives_.length) {
-    archives.value = archives_
-      .map(([name, infos]) => {
-        infos.name = name
-        return infos
-      })
+const archives = await api
+  .get<BackupList>({ uri: 'backups?with_info', initial: true })
+  .then((data) => {
+    return toEntries(data.archives)
+      .map(([name, archive]) => ({ ...archive, name }))
       .reverse()
-  } else {
-    archives.value = null
-  }
-}
+  })
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="ListGroupSkeleton">
-    <template #top>
-      <TopBar
-        :button="{
-          text: $t('backup_new'),
-          icon: 'plus',
-          to: { name: 'backup-create' },
-        }"
-      />
-    </template>
+  <div>
+    <TopBar
+      :button="{
+        text: $t('backup_new'),
+        icon: 'plus',
+        to: { name: 'backup-create' },
+      }"
+    />
 
-    <BAlert v-if="!archives" :modelValue="!archives" variant="warning">
+    <BAlert v-if="!archives.length" :model-value="true" variant="warning">
       <YIcon iname="exclamation-triangle" />
       {{ $t('items_verbose_count', { items: $t('items.backups', 0) }, 0) }}
     </BAlert>
@@ -68,5 +55,5 @@ function onQueriesResponse(data: any) {
         <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>
-  </ViewBase>
+  </div>
 </template>

From 50a464016bc27b506d635f8c565d628ca7789c08 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:22:58 +0200
Subject: [PATCH 171/275] refactor: rework async DiagnosisView

---
 app/src/types/core/api.ts                 |  19 +++
 app/src/views/diagnosis/DiagnosisView.vue | 167 +++++++++-------------
 2 files changed, 89 insertions(+), 97 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index df1ccaa98..aca12384d 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -197,3 +197,22 @@ export type BackupList = {
     size: number
   }>
 }
+
+// DIAGNOSIS
+
+export type Diagnosis = {
+  reports: {
+    id: string
+    cached_for: number
+    items: {
+      meta: Obj
+      status: 'INFO' | 'SUCCESS' | 'WARNING' | 'ERROR'
+      data: Obj
+      summary: string
+      details?: string[]
+      ignored: boolean
+    }[]
+    timestamp: number
+    description: string
+  }[]
+}
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 8d45541b3..fb497bcf5 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -1,83 +1,69 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
 import api from '@/api'
-import { useInitialQueries } from '@/composables/useInitialQueries'
 import { distanceToNow } from '@/helpers/filters/date'
-import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
+import { STATUS_VARIANT, isOkStatus } from '@/helpers/yunohostArguments'
+import type { StateStatus } from '@/types/commons'
+import type { Diagnosis } from '@/types/core/api'
 
-const { loading, refetch } = useInitialQueries(
-  [
+const reports = await api
+  .fetchAll<[null, Diagnosis | null]>([
     {
       method: 'PUT',
       uri: 'diagnosis/run?except_if_never_ran_yet',
       humanKey: 'diagnosis.run',
     },
     { uri: 'diagnosis?full' },
-  ],
-  { showModal: true, onQueriesResponse },
-)
-
-const reports = ref()
-
-function onQueriesResponse(_: any, reportsData: any) {
-  if (reportsData === null) {
-    reports.value = null
-    return
-  }
-
-  const reports_ = reportsData.reports
-  for (const report of reports_) {
-    report.warnings = 0
-    report.errors = 0
-    report.ignoreds = 0
-
-    for (const item of report.items) {
-      const status = (item.variant = item.status.toLowerCase())
-      item.issue = false
-
-      if (item.ignored) {
-        report.ignoreds++
-      }
-      if (status === 'warning') {
-        item.issue = true
-        if (!item.ignored) {
-          report.warnings++
-        }
-      } else if (status === 'error') {
-        item.variant = 'danger'
-        item.issue = true
-        if (!item.ignored) {
-          report.errors++
-        }
+  ])
+  .then(([_, diagnosis]) => {
+    if (!diagnosis) return null
+
+    return diagnosis.reports.map((report) => {
+      const badges = {
+        warnings: 0,
+        errors: 0,
+        ignoreds: 0,
       }
 
-      item.icon =
-        DEFAULT_STATUS_ICON[item.variant as 'success' | 'warning' | 'danger']
-    }
-
-    report.noIssues = report.warnings + report.errors === 0
-  }
-  reports.value = reports_
-}
+      const items = report.items.map((item) => {
+        const status = item.status.toLowerCase() as StateStatus
+        const variant = STATUS_VARIANT[status]
+        const issue = !isOkStatus(status)
+
+        if (item.ignored) badges.ignoreds++
+        else if (issue) badges[`${status}s`]++
+
+        return { ...item, status, issue, variant }
+      })
+      return {
+        ...report,
+        ...badges,
+        items,
+        noIssues: badges.warnings + badges.errors === 0,
+      }
+    })
+  })
 
-function runDiagnosis({ id = null, description } = {}) {
-  const param = id !== null ? '?force' : ''
-  const data = id !== null ? { categories: [id] } : {}
+type Report = Exclude<typeof reports, null>[number]
 
+function runDiagnosis(report?: { id: string; description: string }) {
+  const id = report?.id
   api
     .put({
-      uri: 'diagnosis/run' + param,
-      data,
+      uri: 'diagnosis/run' + id ? '?force' : '',
+      data: id ? { categories: [id] } : {},
       humanKey: {
-        key: 'diagnosis.run' + (id !== null ? '_specific' : ''),
-        description,
+        key: 'diagnosis.run' + (id ? '_specific' : ''),
+        description: report?.description,
       },
     })
-    .then(() => refetch(false))
+    .then(() => api.refetch())
 }
 
-function toggleIgnoreIssue(action, report, item) {
+function toggleIgnoreIssue(
+  action: 'ignore' | 'unignore',
+  report: Report,
+  item: Report['items'][number],
+) {
   const filterArgs = [report.id].concat(
     Object.entries(item.meta).map((entries) => entries.join('=')),
   )
@@ -86,16 +72,14 @@ function toggleIgnoreIssue(action, report, item) {
     .put({
       uri: 'diagnosis/' + action,
       data: { filter: filterArgs },
-      humanKey: `diagnosis.${action}.${item.status.toLowerCase()}`,
+      humanKey: `diagnosis.${action}.${item.status}`,
     })
     .then(() => {
       item.ignored = action === 'ignore'
-      if (item.ignored) {
-        report[item.status.toLowerCase() + 's']--
-        report.ignoreds++
-      } else {
-        report[item.status.toLowerCase() + 's']++
-        report.ignoreds--
+      const count = item.ignored ? 1 : -1
+      report.ignoreds += count
+      if (!isOkStatus(item.status)) {
+        report[`${item.status}s`] -= count
       }
     })
 }
@@ -108,26 +92,26 @@ function shareLogs() {
 </script>
 
 <template>
-  <ViewBase :loading="loading">
-    <template #top-bar-group-right>
-      <BButton @click="shareLogs" variant="success">
-        <YIcon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
-      </BButton>
-    </template>
-
-    <template #top>
-      <div class="alert alert-info">
-        {{ $t(reports ? 'diagnosis_explanation' : 'diagnosis_first_run') }}
-        <BButton
-          v-if="reports === null"
-          class="d-block mt-2"
-          variant="info"
-          @click="runDiagnosis()"
-        >
-          <YIcon iname="stethoscope" /> {{ $t('run_first_diagnosis') }}
+  <div>
+    <TopBar>
+      <template #group-right>
+        <BButton @click="shareLogs" variant="success">
+          <YIcon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
         </BButton>
-      </div>
-    </template>
+      </template>
+    </TopBar>
+
+    <div class="alert alert-info">
+      {{ $t(reports ? 'diagnosis_explanation' : 'diagnosis_first_run') }}
+      <BButton
+        v-if="reports === null"
+        class="d-block mt-2"
+        variant="info"
+        @click="runDiagnosis()"
+      >
+        <YIcon iname="stethoscope" /> {{ $t('run_first_diagnosis') }}
+      </BButton>
+    </div>
 
     <!-- REPORT CARD -->
     <YCard
@@ -186,7 +170,6 @@ function shareLogs() {
           v-for="(item, i) in report.items"
           :key="i"
           :variant="item.variant"
-          :icon="item.Icon"
           :faded="item.ignored"
         >
           <div class="item-button d-flex align-items-center">
@@ -236,17 +219,7 @@ function shareLogs() {
         </YListGroupItem>
       </BListGroup>
     </YCard>
-
-    <template #skeleton>
-      <CardListSkeleton />
-      <BCard no-body>
-        <template #header>
-          <BSkeleton width="30%" height="36px" class="m-0" />
-        </template>
-      </BCard>
-      <CardListSkeleton />
-    </template>
-  </ViewBase>
+  </div>
 </template>
 
 <style lang="scss" scoped>

From 20bbdb7e8636f6984e48972f807f1de1a1e60445 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:24:10 +0200
Subject: [PATCH 172/275] refactor: rework async DomainAdd

---
 app/src/views/domain/DomainAdd.vue | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/domain/DomainAdd.vue
index 23f41d942..695401cb2 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -4,17 +4,15 @@ import { useRouter } from 'vue-router'
 
 import api from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
-import { useInitialQueries } from '@/composables/useInitialQueries'
 import { DomainForm } from '@/views/_partials'
 
 const router = useRouter()
 
-const { loading } = useInitialQueries([
-  { uri: 'domains', cachePath: 'domains' },
-])
+await api.fetch({ uri: 'domains', cachePath: 'domains' })
+
 const serverError = ref('')
 
-function onSubmit(data) {
+function onSubmit(data: { domain: string; dyndns_recovery_password?: string }) {
   api
     .post({
       uri: 'domains',
@@ -33,12 +31,10 @@ function onSubmit(data) {
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="CardFormSkeleton">
-    <DomainForm
-      :title="$t('domain_add')"
-      :server-error="serverError"
-      @submit="onSubmit"
-      :submit-text="$t('add')"
-    />
-  </ViewBase>
+  <DomainForm
+    :title="$t('domain_add')"
+    :server-error="serverError"
+    :submit-text="$t('add')"
+    @submit="onSubmit"
+  />
 </template>

From e99a50e5fcc10abe4ad8fc8ca62c377e466769f1 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:25:03 +0200
Subject: [PATCH 173/275] refactor: rework async DomainDns

---
 app/src/types/core/api.ts          |  15 ++++
 app/src/views/domain/DomainDns.vue | 132 ++++++++++++++---------------
 2 files changed, 79 insertions(+), 68 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index aca12384d..f8975091f 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -216,3 +216,18 @@ export type Diagnosis = {
     description: string
   }[]
 }
+
+// DOMAINS
+
+export type DNSRecord = {
+  name: string
+  type: string
+  managed_by_yunohost: boolean
+  old_content: string
+  content: string
+  spaces: string // Added when formating
+}
+export type DNSCategories = Record<
+  'create' | 'update' | 'delete' | 'unchanged',
+  DNSRecord[]
+>
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index aaac5f30f..72c4c133a 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -4,8 +4,16 @@ import { useI18n } from 'vue-i18n'
 
 import api from '@/api'
 import { useAutoModal } from '@/composables/useAutoModal'
-import { isEmptyValue } from '@/helpers/commons'
-import { useInitialQueries } from '@/composables/useInitialQueries'
+import type { Obj, StateVariant } from '@/types/commons'
+import type { DNSCategories, DNSRecord } from '@/types/core/api'
+
+type DNSChanges = {
+  action: 'create' | 'update' | 'delete'
+  icon: string
+  variant: string
+  records: DNSRecord[]
+}
+type DNSError = { icon: string; variant: StateVariant; message: string }
 
 const props = defineProps<{
   name: string
@@ -13,79 +21,70 @@ const props = defineProps<{
 
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
-const { loading } = useInitialQueries(
-  [{ uri: `domains/${props.name}/dns/suggest` }],
-  { onQueriesResponse },
-)
+
+const dnsConfig = await api.get<string>({
+  uri: `domains/${props.name}/dns/suggest`,
+  initial: true,
+})
 
 const showAutoConfigCard = ref(true)
 const showManualConfigCard = ref(false)
-const dnsConfig = ref('')
-const dnsChanges = ref(undefined)
-const dnsErrors = ref(undefined)
-const dnsZone = ref(undefined)
-const force = ref(null)
+const dnsChanges = ref<DNSChanges[] | null>(null)
+const dnsErrors = ref<DNSError[]>([])
+const dnsZone = ref<DNSRecord[] | null>(null)
+const force = ref<boolean | null>(null)
 
 getDnsChanges()
-
-function onQueriesResponse(suggestedConfig: any) {
-  dnsConfig.value = suggestedConfig
-}
-
+// FIXME other Suspense? get types
 function getDnsChanges() {
-  loading.value = true
-
   return api
     .post({
       uri: `domains/${props.name}/dns/push?dry_run`,
-      showModal: false,
+      showModal: true,
       websocket: false,
     })
-    .then((dnsChanges) => {
-      function getLongest(arr, key) {
+    .then((dnsCategories: DNSCategories) => {
+      let canForce = false
+
+      function getLongest(arr: Obj[], key: string) {
         return arr.reduce((acc, obj) => {
           if (obj[key].length > acc) return obj[key].length
           return acc
         }, 0)
       }
 
-      const changes = []
-      let canForce = false
-      const categories = [
-        { action: 'create', icon: 'plus', variant: 'success' },
-        { action: 'update', icon: 'exchange', variant: 'warning' },
-        { action: 'delete', icon: 'minus', variant: 'danger' },
-      ]
-      categories.forEach((category) => {
-        const records = dnsChanges[category.action]
-        if (records && records.length > 0) {
-          const longestName = getLongest(records, 'name')
-          const longestType = getLongest(records, 'type')
-          records.forEach((record) => {
-            record.name =
-              record.name + ' '.repeat(longestName - record.name.length + 1)
-            record.spaces = ' '.repeat(longestType - record.type.length + 1)
-            if (record.managed_by_yunohost === false) canForce = true
-          })
-          changes.push({ ...category, records })
-        }
-      })
+      function addSpace(str: string, len: number, prepend: boolean = false) {
+        return (prepend ? str : '') + ' '.repeat(len - str.length + 1)
+      }
 
-      const unchanged = dnsChanges.unchanged
-      if (unchanged) {
-        const longestName = getLongest(unchanged, 'name')
-        const longestType = getLongest(unchanged, 'type')
-        unchanged.forEach((record) => {
-          record.name =
-            record.name + ' '.repeat(longestName - record.name.length + 1)
-          record.spaces = ' '.repeat(longestType - record.type.length + 1)
+      function formatRecords(records?: DNSRecord[]) {
+        if (!records) return null
+        const longestName = getLongest(records, 'name')
+        const longestType = getLongest(records, 'type')
+        return records.map((record) => {
+          record.name = addSpace(record.name, longestName, true)
+          record.spaces = addSpace(record.type, longestType)
+          if (record.managed_by_yunohost) canForce = true
+          return record
         })
-        dnsZone.value = unchanged
       }
 
+      const categories = [
+        { action: 'create' as const, icon: 'plus', variant: 'success' },
+        { action: 'update' as const, icon: 'exchange', variant: 'warning' },
+        { action: 'delete' as const, icon: 'minus', variant: 'danger' },
+      ]
+      const changes = categories
+        .map((category) => {
+          const records = formatRecords(dnsCategories[category.action])
+          if (!records) return null
+          return { ...category, records }
+        })
+        .filter((dnsChange) => dnsChange !== null) as DNSChanges[]
+
+      dnsZone.value = formatRecords(dnsCategories.unchanged)
       dnsChanges.value = changes.length > 0 ? changes : null
       force.value = canForce ? false : null
-      loading.value = false
     })
     .catch((err) => {
       if (err.name !== 'APIBadRequestError') throw err
@@ -100,7 +99,6 @@ function getDnsChanges() {
         showManualConfigCard.value = true
         showAutoConfigCard.value = false
       }
-      loading.value = false
     })
 }
 
@@ -115,24 +113,22 @@ async function pushDnsChanges() {
       uri: `domains/${props.name}/dns/push${force.value ? '?force' : ''}`,
       humanKey: { key: 'domains.push_dns_changes', name: props.name },
     })
-    .then(async (responseData) => {
+    .then(async (responseData: Obj<string[]>) => {
       await getDnsChanges()
-      if (!isEmptyValue(responseData)) {
-        dnsErrors.value = Object.keys(responseData).reduce((acc, key) => {
-          const args =
-            key === 'warnings'
-              ? { icon: 'warning', variant: 'warning' }
-              : { icon: 'ban', variant: 'danger' }
-          responseData[key].forEach((message) => acc.push({ ...args, message }))
-          return acc
-        }, [])
-      }
+      dnsErrors.value = Object.keys(responseData).reduce((acc, key) => {
+        const args =
+          key === 'warnings'
+            ? { icon: 'warning', variant: 'warning' as const }
+            : { icon: 'ban', variant: 'danger' as const }
+        responseData[key].forEach((message) => acc.push({ ...args, message }))
+        return acc
+      }, [] as DNSError[])
     })
 }
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="CardInfoSkeleton">
+  <div>
     <section v-if="showAutoConfigCard" class="panel-section">
       <BCardTitle title-tag="h3">
         {{ $t('domain.dns.auto_config') }}
@@ -176,7 +172,7 @@ async function pushDnsChanges() {
               :title="
                 managed_by_yunohost === false && force !== true
                   ? $t('domain.dns.auto_config_ignored')
-                  : null
+                  : undefined
               "
             >
               <YIcon :iname="icon" :class="'text-' + variant" />
@@ -203,7 +199,7 @@ async function pushDnsChanges() {
       />
 
       <!-- CONFIG ERROR ALERT -->
-      <template v-if="dnsErrors && dnsErrors.length">
+      <template v-if="dnsErrors.length">
         <ReadOnlyAlertItem
           v-for="({ variant, icon, message }, i) in dnsErrors"
           :key="i"
@@ -268,7 +264,7 @@ async function pushDnsChanges() {
 
       <pre class="log">{{ dnsConfig }}</pre>
     </section>
-  </ViewBase>
+  </div>
 </template>
 
 <style lang="scss" scoped>

From ddf872dd583adc17796ba51b52a32a1d66bfe918 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:25:25 +0200
Subject: [PATCH 174/275] refactor: rework async DomainInfo

---
 app/src/views/domain/DomainInfo.vue | 111 +++++++++++-----------------
 1 file changed, 42 insertions(+), 69 deletions(-)

diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index bd1f93893..ac1ed705f 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -1,18 +1,13 @@
 <script setup lang="ts">
-import { computed, ref, shallowRef } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import api, { objectToParams } from '@/api'
 import ConfigPanelsComponent from '@/components/ConfigPanels.vue'
-import type {
-  ConfigPanelsProps,
-  OnPanelApply,
-} from '@/composables/configPanels'
 import { formatConfigPanels, useConfigPanels } from '@/composables/configPanels'
 import { useDomains } from '@/composables/data'
 import { useAutoModal } from '@/composables/useAutoModal'
-import { useInitialQueries } from '@/composables/useInitialQueries'
 import type { CoreConfigPanels } from '@/types/core/options'
 import DomainDns from '@/views/domain/DomainDns.vue'
 
@@ -24,40 +19,53 @@ const props = defineProps<{
 const { t } = useI18n()
 const router = useRouter()
 const modalConfirm = useAutoModal()
-const { loading, refetch } = useInitialQueries(
-  [
+
+const coreConfig = await api
+  .fetchAll<[null, null, CoreConfigPanels]>([
     { uri: 'domains', cachePath: 'domains' },
     {
       uri: `domains/${props.name}`,
       cachePath: `domainDetails.${props.name}`,
     },
     { uri: `domains/${props.name}/config?full` },
-  ],
-  { onQueriesResponse },
+  ])
+  .then((responses) => responses[2])
+const { domain } = useDomains(() => props.name)
+const config = useConfigPanels(
+  formatConfigPanels(coreConfig),
+  () => props.tabId,
+  ({ panelId, data, action }, onError) => {
+    api
+      .put({
+        uri: action
+          ? `domain/${props.name}/actions/${action}`
+          : `domains/${props.name}/config/${panelId}`,
+        data: { args: objectToParams(data) },
+        humanKey: {
+          key: `domains.${action ? 'action' : 'update'}_config`,
+          id: panelId,
+          name: props.name,
+        },
+      })
+      .then(() => api.refetch())
+      .catch(onError)
+  },
 )
 
-const { mainDomain, domain } = useDomains(() => props.name)
-const config = shallowRef<ConfigPanelsProps | undefined>()
 const unsubscribeDomainFromDyndns = ref(false)
 
 const cert = computed(() => {
-  const { CA_type: authority, validity } = domain.value.certificate
-  const baseInfos = { authority, validity }
-  if (validity <= 0) {
-    return { icon: 'times', variant: 'danger', ...baseInfos }
-  } else if (authority === 'other') {
-    return validity < 15
-      ? { icon: 'exclamation', variant: 'danger', ...baseInfos }
-      : { icon: 'check', variant: 'success', ...baseInfos }
-  } else if (authority === 'letsencrypt') {
-    return { icon: 'thumbs-up', variant: 'success', ...baseInfos }
+  const { CA_type, validity, style } = domain.value.certificate
+  return {
+    authority: CA_type,
+    validity,
+    variant: style,
+    icon: {
+      warning: 'exclamation',
+      success: CA_type === 'other' ? 'check' : 'thumbs-up',
+      danger: 'times',
+    }[style],
   }
-  return { icon: 'exclamation', variant: 'warning', ...baseInfos }
-})
-
-const isMainDomain = computed(() => {
-  if (!mainDomain.value) return
-  return props.name === mainDomain.value
 })
 
 const isMainDynDomain = computed(() => {
@@ -66,35 +74,6 @@ const isMainDynDomain = computed(() => {
   )
 })
 
-function onQueriesResponse(
-  domains: any,
-  domain: any,
-  config_: CoreConfigPanels,
-) {
-  config.value = useConfigPanels(
-    formatConfigPanels(config_),
-    () => props.tabId,
-    onPanelApply,
-  )
-}
-
-const onPanelApply: OnPanelApply = ({ panelId, data, action }, onError) => {
-  api
-    .put({
-      uri: action
-        ? `domain/${props.name}/actions/${action}`
-        : `domains/${props.name}/config/${panelId}`,
-      data: { args: objectToParams(data) },
-      humanKey: {
-        key: `domains.${action ? 'action' : 'update'}_config`,
-        id: panelId,
-        name: props.name,
-      },
-    })
-    .then(() => refetch())
-    .catch(onError)
-}
-
 async function deleteDomain() {
   const data =
     isMainDynDomain.value && !unsubscribeDomainFromDyndns.value
@@ -130,10 +109,10 @@ async function setAsDefaultDomain() {
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="CardListSkeleton">
+  <div>
     <!-- INFO CARD -->
-    <YCard v-if="domain" :title="name" icon="globe">
-      <template v-if="isMainDomain" #header-next>
+    <YCard :title="name" icon="globe">
+      <template v-if="domain.main" #header-next>
         <BBadge variant="info" class="main-domain-badge">
           <ExplainWhat
             id="explain-main-domain"
@@ -147,18 +126,14 @@ async function setAsDefaultDomain() {
 
       <template #header-buttons>
         <!-- DEFAULT DOMAIN -->
-        <BButton
-          v-if="!isMainDomain"
-          @click="setAsDefaultDomain"
-          variant="info"
-        >
+        <BButton v-if="!domain.main" variant="info" @click="setAsDefaultDomain">
           <YIcon iname="star" /> {{ $t('set_default') }}
         </BButton>
 
         <!-- DELETE DOMAIN -->
         <BButton
           v-b-modal.delete-modal
-          :disabled="isMainDomain"
+          :disabled="domain.main"
           variant="danger"
         >
           <YIcon iname="trash-o" /> {{ $t('delete') }}
@@ -235,7 +210,6 @@ async function setAsDefaultDomain() {
     </YCard>
 
     <ConfigPanelsComponent
-      v-if="config"
       v-model="config.form"
       :panel="config.panel.value"
       :validations="config.v.value"
@@ -248,7 +222,6 @@ async function setAsDefaultDomain() {
     </ConfigPanelsComponent>
 
     <BModal
-      v-if="domain"
       id="delete-modal"
       :title="$t('confirm_delete', { name: props.name })"
       @ok="deleteDomain"
@@ -262,7 +235,7 @@ async function setAsDefaultDomain() {
         </BFormCheckbox>
       </BFormGroup>
     </BModal>
-  </ViewBase>
+  </div>
 </template>
 
 <style lang="scss" scoped>

From 3e44d959eb11a561eead191b3c8c44b762ff7b2e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:25:58 +0200
Subject: [PATCH 175/275] refactor: rework async DomainList

---
 app/src/views/domain/DomainList.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 0572a2520..9d8e10c6f 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
+import api from '@/api'
 import RecursiveListGroup from '@/components/RecursiveListGroup.vue'
 import { useDomains } from '@/composables/data'
-import { useInitialQueries } from '@/composables/useInitialQueries'
 import { useSearch } from '@/composables/useSearch'
 
-const { loading } = useInitialQueries([
-  { uri: 'domains', cachePath: 'domains' },
-])
+await api.fetch({ uri: 'domains', cachePath: 'domains' })
+
 const { mainDomain, domainsTree } = useDomains()
 
 const [search, filteredTree] = useSearch(domainsTree, (s, node) =>
@@ -20,7 +19,6 @@ const [search, filteredTree] = useSearch(domainsTree, (s, node) =>
     v-model="search"
     :items="filteredTree ? filteredTree.children : filteredTree"
     items-name="domains"
-    :loading="loading"
   >
     <template #top-bar-buttons>
       <BButton variant="success" :to="{ name: 'domain-add' }">

From fe380005a5ba89393ebcec04a6b3ed842710954c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:26:49 +0200
Subject: [PATCH 176/275] refactor: rework async GroupList

---
 app/src/views/group/GroupList.vue | 238 ++++++++++++++----------------
 1 file changed, 107 insertions(+), 131 deletions(-)

diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 01726e2a9..f84c45a1f 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -1,165 +1,151 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import api from '@/api'
 import TagsSelectizeItem from '@/components/globals/formItems/TagsSelectizeItem.vue'
 import { useAutoModal } from '@/composables/useAutoModal'
-import { useInitialQueries } from '@/composables/useInitialQueries'
 import { useSearch } from '@/composables/useSearch'
-import { isEmptyValue } from '@/helpers/commons'
+import { toEntries } from '@/helpers/commons'
 import type { Obj } from '@/types/commons'
+import type { Group, Permission, UserItem } from '@/types/core/data'
+import type { TagUpdateArgs } from '@/types/form'
 
 // TODO add global search with type (search by: group, user, permission)
 // TODO add vuex store update on inputs ?
 
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
-const { loading } = useInitialQueries(
-  [
+
+const {
+  primaryGroups,
+  userGroups,
+  permissionOptions,
+  userOptions,
+  activeUserGroups,
+} = await api
+  .fetchAll<[Obj<UserItem>, Obj<Group>, Obj<Permission>]>([
     { uri: 'users', cachePath: 'users' },
     {
       uri: 'users/groups?full&include_primary_groups',
       cachePath: 'groups',
     },
     { uri: 'users/permissions?full', cachePath: 'permissions' },
-  ],
-  { onQueriesResponse },
-)
-
-const permissions = ref()
-const permissionsOptions = ref()
-const primaryGroups = ref<Obj[] | undefined>()
-const userGroups = ref()
-const usersOptions = ref()
-const activeUserGroups = ref()
-
-const [search, filteredGroups] = useSearch(primaryGroups, (s, group) => {
-  return group.name.toLowerCase().includes(s)
-})
-
-function onQueriesResponse(users: any, allGroups: any, permsDict: any) {
-  // Do not use computed properties to get values from the store here to avoid auto
-  // updates while modifying values.
-  const permissions_ = Object.entries(permsDict).map(([id, value]) => ({
-    id,
-    ...value,
-  }))
-  const userNames = users ? Object.keys(users) : []
-  const primaryGroups_ = []
-  const userGroups_ = {}
-
-  for (const groupName in allGroups) {
-    // copy the group to unlink it from the store
-    const group_ = { ...allGroups[groupName], name: groupName }
-    group_.permissions = group_.permissions.map((perm) => {
-      return permsDict[perm].label
-    })
-
-    if (userNames.includes(groupName)) {
-      userGroups_[groupName] = group_
-      continue
+  ])
+  .then(([users, groups, permsDict]) => {
+    type DGroup = Group & {
+      members: string[]
+      name: string
+      isSpecial?: boolean
+      disabledItems?: string[]
     }
-
-    group_.isSpecial = ['visitors', 'all_users', 'admins'].includes(groupName)
-
-    if (groupName === 'visitors') {
-      // Forbid to add or remove a protected permission on group `visitors`
-      group_.disabledItems = permissions_
-        .filter(({ id }) => {
-          return (
-            ['mail.main', 'xmpp.main'].includes(id) || permsDict[id].protected
-          )
-        })
-        .map(({ id }) => permsDict[id].label)
+    const permIds = Object.keys(permsDict)
+    const userNames = users ? Object.keys(users) : []
+    const specialGroupsFilters = {
+      visitors: (id: string) => permsDict[id].protected,
+      all_users: (id: string) => ['ssh.main', 'sftp.main'].includes(id),
+      admins: (id: string) => ['ssh.main', 'sftp.main'].includes(id),
     }
 
-    if (groupName === 'all_users') {
-      // Forbid to add ssh and sftp permission on group `all_users`
-      group_.disabledItems = permissions_
-        .filter(({ id }) => {
-          return ['ssh.main', 'sftp.main'].includes(id)
-        })
-        .map(({ id }) => permsDict[id].label)
+    function isSpecialGroup(
+      name: string,
+    ): name is 'visitors' | 'all_users' | 'admins' {
+      return ['visitors', 'all_users', 'admins'].includes(name)
     }
 
-    if (groupName === 'admins') {
-      // Forbid to add ssh and sftp permission on group `admins`
-      group_.disabledItems = permissions_
-        .filter(({ id }) => {
-          return ['ssh.main', 'sftp.main'].includes(id)
-        })
-        .map(({ id }) => permsDict[id].label)
-    }
+    const { primaryGroups, userGroups } = toEntries(groups).reduce(
+      (g, [name, data]) => {
+        const group: DGroup = {
+          name,
+          // Clone data to avoid mutating the cache
+          members: [...data.members],
+          permissions: [...data.permissions],
+        }
 
-    primaryGroups_.push(group_)
-  }
+        if (userNames.includes(name)) {
+          g.userGroups[name] = group
+        } else {
+          if (isSpecialGroup(name)) {
+            group.isSpecial = true
+            // Forbid to add or remove a protected permission on group `visitors`
+            // Forbid to add ssh and sftp permission on group `all_users` and `admins`
+            group.disabledItems = permIds.filter(specialGroupsFilters[name])
+          }
+          g.primaryGroups.push(group)
+        }
 
-  const activeUserGroups_ = Object.entries(userGroups_)
-    .filter(([_, group]) => {
-      return group.permissions.length > 0
-    })
-    .map(([name]) => name)
+        return g
+      },
+      { primaryGroups: [] as DGroup[], userGroups: {} as Obj<DGroup> },
+    )
 
-  permissions.value = permissions_
-  permissionsOptions.value = permissions_.map((perm) => perm.label)
-  primaryGroups.value = primaryGroups_
-  userGroups.value = isEmptyValue(userGroups_) ? null : userGroups_
-  usersOptions.value = userNames
-  activeUserGroups.value = activeUserGroups_
-}
+    return {
+      primaryGroups: ref(primaryGroups),
+      userGroups: reactive(userGroups),
+      permissionOptions: permIds.map((id) => ({
+        value: id,
+        text: permsDict[id].label,
+      })),
+      userOptions: userNames,
+      activeUserGroups: ref(
+        Object.values(userGroups)
+          .filter((group) => group.permissions.length > 0)
+          .map((group) => group.name),
+      ),
+    }
+  })
+
+const [search, filteredGroups] = useSearch(primaryGroups, (s, group) => {
+  return group.name.toLowerCase().includes(s)
+})
 
-async function onPermissionChanged({ option, groupName, action, applyMethod }) {
-  const permId = permissions.value.find((perm) => perm.label === option).id
-  if (action === 'add' && ['sftp.main', 'ssh.main'].includes(permId)) {
+async function onPermissionChanged(
+  { tag: perm, action, applyFn }: TagUpdateArgs,
+  name: string,
+) {
+  if (action === 'add' && ['sftp.main', 'ssh.main'].includes(perm)) {
     const confirmed = await modalConfirm(
-      t('confirm_group_add_access_permission', {
-        name: groupName,
-        perm: option,
-      }),
+      t('confirm_group_add_access_permission', { name, perm }),
     )
     if (!confirmed) return
   }
 
   api
     .put({
-      uri: `users/permissions/${permId}/${action}/${groupName}`,
-      cachePath: `permissions.${permId}`,
-      humanKey: { key: 'permissions.' + action, perm: option, name: groupName },
+      uri: `users/permissions/${perm}/${action}/${name}`,
+      cachePath: `permissions.${perm}`,
+      humanKey: { key: `permissions.${action}`, perm, name },
     })
-    .then(() => applyMethod(option))
+    .then(() => applyFn(perm))
 }
 
-function onUserChanged({ option, groupName, action, applyMethod }) {
+function onUserChanged(
+  { tag: user, action, applyFn }: TagUpdateArgs,
+  name: string,
+) {
   api
     .put({
-      uri: `users/groups/${groupName}/${action}/${option}`,
-      cachePath: `groups.${groupName}`,
-      humanKey: { key: 'groups.' + action, user: option, name: groupName },
+      uri: `users/groups/${name}/${action}/${user}`,
+      cachePath: `groups.${name}`,
+      humanKey: { key: `groups.${action}`, user, name },
     })
-    .then(() => applyMethod(option))
+    .then(() => applyFn(user))
 }
 
-function onSpecificUserAdded({ option: userName, action, applyMethod }) {
-  if (action === 'add') {
-    userGroups.value[userName].permissions = []
-    applyMethod(userName)
-  }
-}
-
-async function deleteGroup(groupName) {
-  const confirmed = await modalConfirm(t('confirm_delete', { name: groupName }))
+async function deleteGroup(name: string) {
+  const confirmed = await modalConfirm(t('confirm_delete', { name }))
   if (!confirmed) return
 
   api
     .delete({
-      uri: `users/groups/${groupName}`,
-      cachePath: `groups.${groupName}`,
-      humanKey: { key: 'groups.delete', name: groupName },
+      uri: `users/groups/${name}`,
+      cachePath: `groups.${name}`,
+      humanKey: { key: 'groups.delete', name },
     })
     .then(() => {
-      primaryGroups.value = primaryGroups.value?.filter(
-        (group) => group.name !== groupName,
+      // FIXME primaryGroups as ref to override it ?
+      primaryGroups.value = primaryGroups.value.filter(
+        (group) => group.name !== name,
       )
     })
 }
@@ -170,7 +156,6 @@ async function deleteGroup(groupName) {
     v-model="search"
     :items="filteredGroups"
     items-name="groups"
-    :loading="loading"
     skeleton="CardFormSkeleton"
   >
     <template #top-bar-buttons>
@@ -222,12 +207,12 @@ async function deleteGroup(groupName) {
           <template v-if="group.name == 'admins' || !group.isSpecial">
             <TagsSelectizeItem
               v-model="group.members"
-              :options="usersOptions"
+              :options="userOptions"
               :id="group.name + '-users'"
               :label="$t('group_add_member')"
               tag-icon="user"
               items-name="users"
-              @tag-update="onUserChanged({ ...$event, groupName: group.name })"
+              @tag-update="onUserChanged($event, group.name)"
             />
           </template>
         </BCol>
@@ -241,27 +226,20 @@ async function deleteGroup(groupName) {
         <BCol>
           <TagsSelectizeItem
             v-model="group.permissions"
-            :options="permissionsOptions"
+            :options="permissionOptions"
             :id="group.name + '-perms'"
             :label="$t('group_add_permission')"
             tag-icon="key-modern"
             items-name="permissions"
-            @tag-update="
-              onPermissionChanged({ ...$event, groupName: group.name })
-            "
             :disabled-items="group.disabledItems"
+            @tag-update="onPermissionChanged($event, group.name)"
           />
         </BCol>
       </BRow>
     </YCard>
 
     <!-- USER GROUPS CARD -->
-    <YCard
-      v-if="userGroups"
-      collapsable
-      :title="$t('group_specific_permissions')"
-      icon="group"
-    >
+    <YCard collapsable :title="$t('group_specific_permissions')" icon="group">
       <template v-for="userName in activeUserGroups" :key="userName">
         <BRow>
           <BCol md="3" lg="2">
@@ -271,14 +249,12 @@ async function deleteGroup(groupName) {
           <BCol>
             <TagsSelectizeItem
               v-model="userGroups[userName].permissions"
-              :options="permissionsOptions"
+              :options="permissionOptions"
               :id="userName + '-perms'"
               :label="$t('group_add_permission')"
               tag-icon="key-modern"
               items-name="permissions"
-              @tag-update="
-                onPermissionChanged({ ...$event, groupName: userName })
-              "
+              @tag-update="onPermissionChanged($event, userName)"
             />
           </BCol>
         </BRow>
@@ -287,12 +263,12 @@ async function deleteGroup(groupName) {
 
       <TagsSelectizeItem
         v-model="activeUserGroups"
-        :options="usersOptions"
+        auto
+        :options="userOptions"
         id="user-groups"
         :label="$t('group_add_member')"
         no-tags
         items-name="users"
-        @tag-update="onSpecificUserAdded"
       />
     </YCard>
   </ViewSearch>

From e8b0e3b87c2f21a5d6bce1157e3442720ecc59a3 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:28:06 +0200
Subject: [PATCH 177/275] refactor: rework async ServiceInfo

---
 app/src/types/core/api.ts             | 11 ++++
 app/src/views/service/ServiceInfo.vue | 93 ++++++++++++---------------
 2 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index f8975091f..4e6e03658 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -198,6 +198,17 @@ export type BackupList = {
   }>
 }
 
+// SERVICES
+
+export type ServiceInfo = {
+  status: 'running' | 'stopped' | 'failed' | 'unknown'
+  start_on_boot: 'enabled' | 'disabled' | 'unknown'
+  last_state_change: string | 'unknown'
+  description: string
+  configuration: 'valid' | 'broken' | 'unknown'
+}
+export type ServiceLogs = Obj<string[]>
+
 // DIAGNOSIS
 
 export type Diagnosis = {
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index a4c1da951..640bf8318 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -1,70 +1,61 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import api from '@/api'
 import { useAutoModal } from '@/composables/useAutoModal'
-import { useInitialQueries } from '@/composables/useInitialQueries'
 import { distanceToNow } from '@/helpers/filters/date'
+import type { ServiceInfo, ServiceLogs } from '@/types/core/api'
 
-const props = defineProps<{
-  name: string
-}>()
+const props = defineProps<{ name: string }>()
 
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
-const { loading, refetch } = useInitialQueries(
-  [
-    { uri: 'services/' + props.name },
-    { uri: `services/${props.name}/log?number=50` },
-  ],
-  { onQueriesResponse },
-)
-
-const infos = ref()
-const uptime = ref()
-const isCritical = ref()
-const logs = ref()
-const action = ref()
-
-function onQueriesResponse(
-  // eslint-disable-next-line
-  { status, description, start_on_boot, last_state_change, configuration }: any,
-  logs_: any,
-) {
-  isCritical.value = ['nginx', 'ssh', 'slapd', 'yunohost-api'].includes(
-    props.name,
-  )
-  // eslint-disable-next-line
-  uptime.value = last_state_change === 'unknown' ? 0 : last_state_change
-  infos.value = { description, status, start_on_boot, configuration }
-
-  logs.value = Object.keys(logs_)
-    .sort((prev, curr) => {
-      if (prev === 'journalctl') return -1
-      else if (curr === 'journalctl') return 1
-      else if (prev < curr) return -1
-      else return 1
-    })
-    .map((filename) => ({ content: logs_[filename].join('\n'), filename }))
-}
 
-async function updateService(action) {
+const { infos, upOrDownTime, isCritical, logs } = await api
+  .fetchAll<
+    [ServiceInfo, ServiceLogs]
+  >([{ uri: 'services/' + props.name }, { uri: `services/${props.name}/log?number=50` }])
+  .then(([service, logs]) => {
+    const { last_state_change, ...infos } = service
+    const criticalServices = ['nginx', 'ssh', 'slapd', 'yunohost-api']
+
+    return {
+      infos,
+      upOrDownTime:
+        last_state_change === 'unknown'
+          ? t('unknown')
+          : distanceToNow(last_state_change, false),
+      isCritical: criticalServices.includes(props.name),
+      logs: Object.keys(logs)
+        .sort((prev, curr) => {
+          if (prev === 'journalctl') return -1
+          else if (curr === 'journalctl') return 1
+          else if (prev < curr) return -1
+          else return 1
+        })
+        .map((filename) => ({
+          content: logs[filename].join('\n'),
+          filename,
+        })),
+    }
+  })
+
+async function updateService(action: 'start' | 'stop' | 'restart') {
   const confirmed = await modalConfirm(
-    t('confirm_service_' + action, { name: props.name }),
+    t(`confirm_service_${action}`, { name: props.name }),
   )
   if (!confirmed) return
 
   api
     .put({
       uri: `services/${props.name}/${action}`,
-      humanKey: { key: 'services.' + action, name: props.name },
+      humanKey: { key: `services.${action}`, name: props.name },
     })
-    .then(() => refetch(false))
+    .then(() => api.refetch())
 }
 
 function shareLogs() {
-  const logs = logs.value
+  const logsContent = logs
     .map(({ filename, content }) => {
       return `LOGFILE: ${filename}\n${content}`
     })
@@ -72,21 +63,21 @@ function shareLogs() {
 
   fetch('https://paste.yunohost.org/documents', {
     method: 'POST',
-    body: logs,
+    body: logsContent,
   })
     .then((response) => {
       if (response.ok) return response.json()
+      else console.error('error', response)
       // FIXME flash error
-      /* eslint-disable-next-line */ else console.log('error', response)
     })
     .then(({ key }) => {
-      window.open('https://paste.yunohost.org/' + key, '_blank')
+      window.open(`https://paste.yunohost.org/${key}`, '_blank')
     })
 }
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="CardInfoSkeleton">
+  <div>
     <!-- INFO CARD -->
     <YCard :title="name" icon="info-circle" button-unbreak="sm">
       <template #header-buttons>
@@ -129,7 +120,7 @@ function shareLogs() {
               <YIcon :iname="value === 'running' ? 'check-circle' : 'times'" />
               {{ $t(value) }}
             </span>
-            {{ $t('since') }} {{ distanceToNow(uptime) }}
+            {{ $t('since') }} {{ upOrDownTime }}
           </template>
 
           <span
@@ -160,7 +151,7 @@ function shareLogs() {
         <pre class="log"><code>{{ content }}</code></pre>
       </template>
     </YCard>
-  </ViewBase>
+  </div>
 </template>
 
 <style lang="scss" scoped>

From b9154908b44268d67031ba49bbd45b06745437ac Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:28:35 +0200
Subject: [PATCH 178/275] refactor: rework async ServiceList

---
 app/src/types/core/api.ts             |  1 +
 app/src/views/service/ServiceList.vue | 51 ++++++++++++++-------------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index 4e6e03658..adf5a229c 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -208,6 +208,7 @@ export type ServiceInfo = {
   configuration: 'valid' | 'broken' | 'unknown'
 }
 export type ServiceLogs = Obj<string[]>
+export type ServiceList = Obj<ServiceInfo>
 
 // DIAGNOSIS
 
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 3f1c2f326..3a603b900 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -1,31 +1,34 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { useInitialQueries } from '@/composables/useInitialQueries'
+import api from '@/api'
 import { useSearch } from '@/composables/useSearch'
 import { distanceToNow } from '@/helpers/filters/date'
-import type { Obj } from '@/types/commons'
+import type { ServiceList } from '@/types/core/api'
 
-const { loading } = useInitialQueries([{ uri: 'services' }], {
-  onQueriesResponse,
-})
+const { t } = useI18n()
+
+const services = await api
+  .get<ServiceList>({ uri: 'services' })
+  .then((services) => {
+    return Object.keys(services)
+      .sort()
+      .map((name) => {
+        const service = services[name]
+        return {
+          ...service,
+          name,
+          last_state_change:
+            service.last_state_change === 'unknown'
+              ? t('unknown')
+              : distanceToNow(service.last_state_change, false),
+        }
+      })
+  })
 
-const services = ref<Obj[] | undefined>()
 const [search, filteredServices] = useSearch(services, (s, service) => {
   return service.name.toLowerCase().includes(s)
 })
-
-function onQueriesResponse(services_: any) {
-  services.value = Object.keys(services_)
-    .sort()
-    .map((name) => {
-      const service = services_[name]
-      if (service.last_state_change === 'unknown') {
-        service.last_state_change = 0
-      }
-      return { ...service, name }
-    })
-}
 </script>
 
 <template>
@@ -34,7 +37,6 @@ function onQueriesResponse(services_: any) {
     v-model="search"
     :items="filteredServices"
     items-name="services"
-    :loading="loading"
   >
     <BListGroup>
       <BListGroupItem
@@ -49,18 +51,19 @@ function onQueriesResponse(services_: any) {
         class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
-          <h5 class="fw-bold">
-            {{ name }}
+          <h5>
+            <span class="fw-bold me-1">{{ name }}</span>
             <small class="text-secondary">{{ description }}</small>
           </h5>
           <p class="m-0">
+            <!-- FIXME +`-emphasis`? + rework emphasis color or text colors -->
             <span
-              :class="status === 'running' ? 'text-success' : 'text-danger'"
+              :class="`text-${status === 'running' ? 'success' : 'danger'}`"
             >
               <YIcon :iname="status === 'running' ? 'check-circle' : 'times'" />
               {{ $t(status) }}
             </span>
-            {{ $t('since') }} {{ distanceToNow(last_state_change) }}
+            {{ $t('since') }} {{ last_state_change }}
           </p>
         </div>
 

From 732578156a620972add3180d70ffee47e92e3075 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:29:27 +0200
Subject: [PATCH 179/275] refactor: rework async ToolFirewall

---
 app/src/types/core/api.ts           |  13 +++
 app/src/views/tool/ToolFirewall.vue | 163 +++++++++++++++-------------
 2 files changed, 99 insertions(+), 77 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index adf5a229c..070984d7d 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -229,6 +229,19 @@ export type Diagnosis = {
   }[]
 }
 
+// FIREWALL
+
+type Protocols = { TCP: number[]; UDP: number[] }
+export type Firewall = {
+  ipv4: Protocols
+  ipv6: Protocols
+  uPnP: Protocols & {
+    TCP_TO_CLOSE: number[]
+    UDP_TO_CLOSE: number[]
+    enabled: boolean
+  }
+}
+
 // DOMAINS
 
 export type DNSRecord = {
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index c435ff31a..b7fe436eb 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -1,21 +1,63 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import api from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
 import { useForm } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
-import { useInitialQueries } from '@/composables/useInitialQueries'
-import { toEntries } from '@/helpers/commons'
 import { between, integer, required } from '@/helpers/validators'
+import type { Firewall } from '@/types/core/api'
 import type { FieldProps, FormFieldDict } from '@/types/form'
 
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
-const { loading, refetch } = useInitialQueries([{ uri: '/firewall?raw' }], {
-  onQueriesResponse,
-})
+const { protocols, upnpEnabled } = await api
+  .fetch<Firewall>({ uri: 'firewall?raw' })
+  .then((firewall) => {
+    const portTypes = ['TCP', 'UDP'] as const
+    const protocolsTypes = ['ipv4', 'ipv6', 'uPnP'] as const
+    const ports = Object.values(firewall).reduce(
+      (ports, protocols) => {
+        for (const type of portTypes) {
+          for (const port of protocols[type]) {
+            ports[type].add(port)
+          }
+        }
+        return ports
+      },
+      { TCP: new Set<number>(), UDP: new Set<number>() },
+    )
+
+    type Row = { port: number } & Record<keyof Firewall, boolean>
+    const tables = {
+      TCP: [] as Row[],
+      UDP: [] as Row[],
+    }
+    for (const protocol of portTypes) {
+      for (const port of ports[protocol]) {
+        const row = { port } as Row
+        for (const connection of protocolsTypes) {
+          row[connection] = firewall[connection][protocol].includes(port)
+        }
+        tables[protocol].push(row)
+      }
+      tables[protocol].sort((a, b) => (a.port < b.port ? -1 : 1))
+    }
+
+    return {
+      protocols: reactive(tables),
+      upnpEnabled: ref(firewall.uPnP.enabled),
+    }
+  })
+
+const upnpError = ref('')
+const tableFields = [
+  { key: 'port', label: t('port') },
+  { key: 'ipv4', label: t('ipv4') },
+  { key: 'ipv6', label: t('ipv6') },
+  { key: 'uPnP', label: t('upnp') },
+]
 
 type Form = {
   action: 'allow' | 'disallow'
@@ -84,50 +126,12 @@ const fields = {
 
 const { v } = useForm(form, fields)
 
-// Ports tables data
-const protocols = ref()
-const protocolsFields = toEntries(fields).map(([key, { label }]) => ({
-  key,
-  label,
-}))
-
-// uPnP
-const upnpEnabled = ref()
-const upnpError = ref('')
-
-function onQueriesResponse(data: any) {
-  const ports = Object.values(data).reduce(
-    (ports_, protocols_) => {
-      for (const type of ['TCP', 'UDP']) {
-        for (const port of protocols_[type]) {
-          ports_[type].add(port)
-        }
-      }
-      return ports
-    },
-    { TCP: new Set(), UDP: new Set() },
-  )
-
-  const tables = {
-    TCP: [],
-    UDP: [],
-  }
-  for (const protocol of ['TCP', 'UDP']) {
-    for (const port of ports[protocol]) {
-      const row = { port }
-      for (const connection of ['ipv4', 'ipv6', 'uPnP']) {
-        row[connection] = data[connection][protocol].includes(port)
-      }
-      tables[protocol].push(row)
-    }
-    tables[protocol].sort((a, b) => (a.port < b.port ? -1 : 1))
-  }
-
-  protocols.value = tables
-  upnpEnabled.value = data.uPnP.enabled
-}
-
-async function togglePort({ action, port, protocol, connection }) {
+async function togglePort({
+  action,
+  port,
+  protocol,
+  connection,
+}: Form): Promise<boolean> {
   const confirmed = await modalConfirm(
     t('confirm_firewall_' + action, {
       port,
@@ -135,9 +139,7 @@ async function togglePort({ action, port, protocol, connection }) {
       connection,
     }),
   )
-  if (!confirmed) {
-    return Promise.resolve(confirmed)
-  }
+  if (!confirmed) return false
 
   const actionTrad = t({ allow: 'open', disallow: 'close' }[action])
   return api
@@ -152,10 +154,10 @@ async function togglePort({ action, port, protocol, connection }) {
       },
       showModal: false,
     })
-    .then(() => confirmed)
+    .then(() => true)
 }
 
-async function toggleUpnp(value) {
+async function toggleUpnp() {
   const action = upnpEnabled.value ? 'disable' : 'enable'
   const confirmed = await modalConfirm(t('confirm_upnp_' + action))
   if (!confirmed) return
@@ -167,7 +169,7 @@ async function toggleUpnp(value) {
     })
     .then(() => {
       // FIXME Couldn't test when it works.
-      refetch(false)
+      api.refetch()
     })
     .catch((err: APIError) => {
       if (!(err instanceof APIBadRequestError)) throw err
@@ -175,38 +177,43 @@ async function toggleUpnp(value) {
     })
 }
 
-function onTablePortToggling(port, protocol, connection, index, value) {
-  protocols.value[protocol][index][connection] = value
+function onTablePortToggling(
+  { port, protocol, connection }: Omit<Form, 'action'>,
+  index: number,
+  value: boolean,
+) {
+  const protocols_ =
+    protocol === 'Both' ? (['TCP', 'UDP'] as const) : [protocol]
+  protocols_.forEach((protocol) => {
+    protocols[protocol][index][connection] = value
+  })
   const action = value ? 'allow' : 'disallow'
-  togglePort({ action, port, protocol, connection }).then((toggled) => {
+  togglePort({ action, port, protocol, connection }).then((confirmed) => {
     // Revert change on cancel
-    if (!toggled) {
-      protocols.value[protocol][index][connection] = !value
+    if (!confirmed) {
+      protocols_.forEach((protocol) => {
+        protocols[protocol][index][connection] = !value
+      })
     }
   })
 }
 
 function onFormPortToggling() {
-  togglePort(form).then((toggled) => {
-    if (toggled) refetch(false)
+  togglePort(form.value).then((confirmed) => {
+    // TODO: update data instead of refetch?
+    if (confirmed) api.refetch()
   })
 }
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="CardFormSkeleton">
+  <div>
     <!-- PORTS -->
     <YCard :title="$t('ports')" icon="shield">
       <div v-for="(items, protocol) in protocols" :key="protocol">
         <h5>{{ $t(protocol) }}</h5>
 
-        <BTable
-          :fields="protocolsFields"
-          :items="items"
-          small
-          striped
-          responsive
-        >
+        <BTable :fields="tableFields" :items="items" small striped responsive>
           <!-- PORT CELL -->
           <template #cell(port)="data">
             {{ data.value }}
@@ -216,13 +223,15 @@ function onFormPortToggling() {
           <template #cell()="data">
             <BFormCheckbox
               v-if="data.field.key !== 'uPnP'"
-              :modelValue="data.value"
+              :model-value="data.value as boolean"
               switch
-              @update:modelValue="
+              @update:model-value="
                 onTablePortToggling(
-                  data.item.port,
-                  protocol,
-                  data.field.key,
+                  {
+                    port: data.item.port,
+                    protocol,
+                    connection: data.field.key as Form['connection'],
+                  },
                   data.index,
                   $event,
                 )
@@ -278,7 +287,7 @@ function onFormPortToggling() {
         </BButton>
       </template>
     </YCard>
-  </ViewBase>
+  </div>
 </template>
 
 <style lang="scss" scoped>

From 27f87eeb17a9759f75e9cb6849e34cef44e6985a Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:30:09 +0200
Subject: [PATCH 180/275] refactor: rework async ToolLog

---
 app/src/types/core/api.ts      |  27 ++++++
 app/src/views/tool/ToolLog.vue | 170 ++++++++++++++++-----------------
 2 files changed, 107 insertions(+), 90 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index 070984d7d..14190b2ce 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -242,6 +242,33 @@ export type Firewall = {
   }
 }
 
+// LOGS
+
+export type LogInfo = {
+  description: string
+  name: string
+  metadata_path: string
+  metadata: {
+    ended_at: string | null
+    env: Obj
+    error: string | null
+    interface: 'cli' | 'api'
+    operation: string
+    parent: string | null
+    related_to: string[][]
+    started_at: string
+    success: boolean | '?'
+    yunohost_version: string
+    suboperations: {
+      name: string
+      description: string
+      success: boolean | '?'
+    }[]
+  }
+  log_path: string
+  logs: string[]
+}
+
 // DOMAINS
 
 export type DNSRecord = {
diff --git a/app/src/views/tool/ToolLog.vue b/app/src/views/tool/ToolLog.vue
index c286cb6dc..82fc71da0 100644
--- a/app/src/views/tool/ToolLog.vue
+++ b/app/src/views/tool/ToolLog.vue
@@ -1,68 +1,61 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
 import api, { objectToParams } from '@/api'
-import type { APIQuery } from '@/api/api'
-import { useInitialQueries } from '@/composables/useInitialQueries'
 import { escapeHtml } from '@/helpers/commons'
 import { readableDate } from '@/helpers/filters/date'
-
-const props = defineProps<{
-  name: string
-}>()
-
-const numberOfLines = ref(25)
-const queries = computed<APIQuery[]>(() => {
-  const queryString = objectToParams({
-    filter_irrelevant: '',
-    with_suboperations: '',
-    number: numberOfLines.value,
+import type { LogInfo } from '@/types/core/api'
+
+const props = withDefaults(
+  defineProps<{
+    name: string
+    n?: number
+  }>(),
+  {
+    n: 25,
+  },
+)
+
+const router = useRouter()
+
+const { description, logs, moreLogsAvailable, info } = await api
+  .fetch<LogInfo>({
+    uri: `logs/${props.name}?${objectToParams({
+      filter_irrelevant: '',
+      with_suboperations: '',
+      number: props.n || 25,
+    })}`,
   })
-  return [{ uri: `logs/${props.name}?${queryString}` }]
-})
-const { loading, refetch } = useInitialQueries(queries, {
-  onQueriesResponse,
-})
-
-// Log data
-const description = ref()
-const info = ref({})
-const logs = ref()
-// Logs line display
-const moreLogsAvailable = ref(false)
-
-function onQueriesResponse(log: any) {
-  if (log.logs.length === numberOfLines.value) {
-    moreLogsAvailable.value = true
-    numberOfLines.value *= 10
-  } else {
-    moreLogsAvailable.value = false
-  }
-  description.value = log.description
-
-  const levels = ['ERROR', 'WARNING', 'SUCCESS', 'INFO']
-  logs.value = log.logs
-    .map((line) => {
-      const escaped = escapeHtml(line)
-      for (const level of levels) {
-        if (line.includes(level + ' -')) {
-          return `<span class="alert-${
-            level === 'ERROR' ? 'danger' : level.toLowerCase()
-          }">${escaped}</span>`
+  .then((log) => {
+    const levels = ['ERROR', 'WARNING', 'SUCCESS', 'INFO']
+    const logs = log.logs
+      .map((line) => {
+        const escaped = escapeHtml(line)
+        for (const level of levels) {
+          if (line.includes(level + ' -')) {
+            return `<span class="alert-${
+              level === 'ERROR' ? 'danger' : level.toLowerCase()
+            }">${escaped}</span>`
+          }
         }
-      }
-      return escaped
-    })
-    .join('\n')
-  // eslint-disable-next-line
-  const { started_at, ended_at, error, success, suboperations } = log.metadata
-  const info_ = { path: log.log_path, started_at, ended_at }
-  if (!success) info_.error = error
-  if (suboperations && suboperations.length) info_.suboperations = suboperations
-  // eslint-disable-next-line
-  if (!ended_at) delete info_.ended_at
-  info.value = info
-}
+        return escaped
+      })
+      .join('\n')
+    const { started_at, ended_at, error, suboperations } = log.metadata
+    return {
+      description: log.description,
+      logs,
+      moreLogsAvailable: log.logs.length === props.n || 25,
+      info: {
+        path: log.log_path,
+        started_at: readableDate(started_at),
+        ended_at: ended_at ? readableDate(ended_at) : null,
+        error: error ? !!error : null,
+        suboperations:
+          suboperations && suboperations.length ? suboperations : null,
+      },
+    }
+  })
 
 function shareLogs() {
   api
@@ -78,40 +71,38 @@ function shareLogs() {
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="CardInfoSkeleton">
+  <div>
     <!-- INFO CARD -->
     <YCard :title="description" icon="info-circle">
-      <BRow
-        v-for="(value, prop) in info"
-        :key="prop"
-        no-gutters
-        class="row-line"
-      >
-        <BCol md="3" xl="2">
-          <strong>{{ $t('logs_' + prop) }}</strong>
-        </BCol>
-
-        <BCol>
-          <span v-if="prop.endsWith('_at')">{{ readableDate(value) }}</span>
-
-          <div v-else-if="prop === 'suboperations'">
-            <div v-for="operation in value" :key="operation.name">
-              <YIcon
-                v-if="operation.success !== true"
-                iname="times"
-                class="text-danger"
-              />
-              <BLink
-                :to="{ name: 'tool-log', params: { name: operation.name } }"
+      <template v-for="(value, prop) in info" :key="prop">
+        <BRow v-if="value !== null" no-gutters class="row-line">
+          <BCol md="3" xl="2">
+            <strong>{{ $t('logs_' + prop) }}</strong>
+          </BCol>
+
+          <BCol>
+            <div v-if="prop === 'suboperations'">
+              <div
+                v-for="operation in value as LogInfo['metadata']['suboperations']"
+                :key="operation.name"
               >
-                {{ operation.description }}
-              </BLink>
+                <YIcon
+                  v-if="operation.success !== true"
+                  iname="times"
+                  class="text-danger"
+                />
+                <BLink
+                  :to="{ name: 'tool-log', params: { name: operation.name } }"
+                >
+                  {{ operation.description }}
+                </BLink>
+              </div>
             </div>
-          </div>
 
-          <span v-else>{{ value }}</span>
-        </BCol>
-      </BRow>
+            <span v-else>{{ value }}</span>
+          </BCol>
+        </BRow>
+      </template>
     </YCard>
 
     <div v-if="info.error" class="alert alert-danger my-5">
@@ -129,9 +120,8 @@ function shareLogs() {
 
       <BButton
         v-if="moreLogsAvailable"
-        variant="white"
         class="w-100 rounded-0"
-        @click="refetch(false)"
+        @click="router.replace({ params: { n: props.n * 10 } })"
       >
         <YIcon iname="plus" /> {{ $t('logs_more') }}
       </BButton>
@@ -143,5 +133,5 @@ function shareLogs() {
     </YCard>
 
     <p class="w-100 px-5 py-2 mb-0" v-html="$t('text_selection_is_disabled')" />
-  </ViewBase>
+  </div>
 </template>

From 68e6c78c22e318f7de0dd64d5683c87f76efb659 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:30:30 +0200
Subject: [PATCH 181/275] refactor: rework async ToolLogs

---
 app/src/types/core/api.ts       | 11 +++++++
 app/src/views/tool/ToolLogs.vue | 53 ++++++++++++---------------------
 2 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index 14190b2ce..2afcbc9b4 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -244,6 +244,17 @@ export type Firewall = {
 
 // LOGS
 
+export type LogList = {
+  operation: {
+    name: string
+    path: string
+    description: string
+    started_at: string
+    success: boolean | '?'
+    parent: string | null
+  }[]
+}
+
 export type LogInfo = {
   description: string
   name: string
diff --git a/app/src/views/tool/ToolLogs.vue b/app/src/views/tool/ToolLogs.vue
index 6fc34eb34..56fb7ad66 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -1,56 +1,41 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
-import { useInitialQueries } from '@/composables/useInitialQueries'
+import api from '@/api'
 import { useSearch } from '@/composables/useSearch'
 import { distanceToNow, readableDate } from '@/helpers/filters/date'
 import type { Obj } from '@/types/commons'
+import type { LogList } from '@/types/core/api'
 
-const { loading } = useInitialQueries(
-  [{ uri: `logs?limit=${25}&with_details` }],
-  { onQueriesResponse },
-)
+const operations = await api
+  .fetch<LogList>({ uri: `logs?limit=${25}&with_details` })
+  .then((logs) => {
+    const iconAndClass = {
+      '?': { icon: 'question', class: 'text-warning' },
+      true: { icon: 'check', class: 'text-success' },
+      false: { icon: 'close', class: 'text-danger' },
+    } as Obj<{ icon: string; class: string }>
+    return logs.operation.map((log) => ({
+      ...log,
+      ...iconAndClass[String(log.success) as keyof typeof iconAndClass],
+    }))
+  })
 
-const operations = ref<Obj[] | undefined>()
 const [search, filteredOperations] = useSearch(operations, (s, op) => {
   return op.description.toLowerCase().includes(s)
 })
-
-function onQueriesResponse({ operation }: any) {
-  operation.forEach((log, index) => {
-    if (log.success === '?') {
-      operation[index].icon = 'question'
-      operation[index].class = 'warning'
-    } else if (log.success) {
-      operation[index].icon = 'check'
-      operation[index].class = 'success'
-    } else {
-      operation[index].icon = 'close'
-      operation[index].class = 'danger'
-    }
-  })
-  operations.value = operation
-}
 </script>
 
 <template>
-  <ViewSearch
-    v-model="search"
-    :items="filteredOperations"
-    items-name="logs"
-    :loading="loading"
-    skeleton="CardListSkeleton"
-  >
+  <ViewSearch v-model="search" :items="filteredOperations" items-name="logs">
     <YCard :title="$t('logs_operation')" icon="wrench" no-body>
       <BListGroup flush>
         <BListGroupItem
           v-for="log in filteredOperations"
           :key="log.name"
-          :to="{ name: 'tool-log', params: { name: log.name || log.log_path } }"
+          :to="{ name: 'tool-log', params: { name: log.name || log.path } }"
           :title="readableDate(log.started_at)"
         >
-          <small class="me-3">{{ distanceToNow(log.started_at) }} </small>
-          <YIcon :iname="log.icon" :class="'text-' + log.class" />
+          <small class="me-3">{{ distanceToNow(log.started_at) }}</small>
+          <YIcon :iname="log.icon" :class="log.class" />
           {{ log.description }}
         </BListGroupItem>
       </BListGroup>

From ab506a5727dd7d4cf432fe9339f56cce10952b92 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:31:17 +0200
Subject: [PATCH 182/275] refactor: rework async ToolMigrations

---
 app/src/types/core/api.ts             | 16 ++++++
 app/src/views/tool/ToolMigrations.vue | 83 ++++++++++++---------------
 2 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index 2afcbc9b4..0daab85b8 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -280,6 +280,22 @@ export type LogInfo = {
   logs: string[]
 }
 
+// MIGRATIONS
+
+type MigrationInfo = {
+  id: string
+  number: number
+  name: string
+  mode: 'auto' | 'manual'
+  state: 'pending' | 'done' | 'skipped'
+  description: string
+  disclaimer: string | null
+}
+
+export type MigrationList = {
+  migrations: MigrationInfo[]
+}
+
 // DOMAINS
 
 export type DNSRecord = {
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index 6394a0a58..d9569f89b 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -1,54 +1,52 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { reactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import api from '@/api'
 import { useAutoModal } from '@/composables/useAutoModal'
-import { useInitialQueries } from '@/composables/useInitialQueries'
+import type { Obj } from '@/types/commons'
+import type { MigrationList } from '@/types/core/api'
 
 // FIXME not tested with pending migrations (disclaimer and stuff)
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
-const { loading, refetch } = useInitialQueries(
-  [{ uri: 'migrations?pending' }, { uri: 'migrations?done' }],
-  { onQueriesResponse },
-)
 
-const pending = ref()
-const done = ref()
-const checked = reactive({})
-
-function onQueriesResponse(
-  { migrations: pending_ }: any,
-  { migrations: done_ }: any,
-) {
-  done.value = done_.length ? done_.reverse() : null
-  pending_.forEach((migration) => {
-    if (migration.disclaimer) {
-      migration.disclaimer = migration.disclaimer.replaceAll('\n', '<br>')
-      checked[migration.id] = null
+const { pending, done, checked } = await api
+  .fetchAll<
+    [MigrationList, MigrationList]
+  >([{ uri: 'migrations?pending' }, { uri: 'migrations?done' }])
+  .then(([{ migrations: pending }, { migrations: done }]) => {
+    const checked = {} as Obj<boolean | undefined>
+    return {
+      pending: pending.length
+        ? reactive(
+            pending
+              .map((migration) => {
+                if (migration.disclaimer) {
+                  migration.disclaimer =
+                    migration.disclaimer.replaceAll('\n', '<br>') ?? null
+                  checked[migration.id] = false
+                }
+                return migration
+              })
+              .reverse(),
+          )
+        : null,
+      done: done.length ? done.reverse() : null,
+      checked: reactive(checked),
     }
   })
-  // FIXME change to pending
-  pending.value = pending_.length ? pending_.reverse() : null
-}
 
 function runMigrations() {
-  // Display an error on migration's disclaimer that aren't checked.
-  for (const [id, value] of Object.entries(checked)) {
-    if (value !== true) {
-      checked[id] = false
-    }
-  }
   // Check that every migration's disclaimer has been checked.
   if (Object.values(checked).every((value) => value === true)) {
     api
       .put({ uri: 'migrations?accept_disclaimer', humanKey: 'migrations.run' })
-      .then(() => refetch(false))
+      .then(() => api.refetch())
   }
 }
 
-async function skipMigration(id) {
+async function skipMigration(id: string) {
   const confirmed = await modalConfirm(t('confirm_migrations_skip'))
   if (!confirmed) return
   api
@@ -57,12 +55,12 @@ async function skipMigration(id) {
       data: { skip: '', targets: id },
       humanKey: 'migration.skip',
     })
-    .then(() => refetch(false))
+    .then(() => api.refetch())
 }
 </script>
 
 <template>
-  <ViewBase :loading="loading">
+  <div>
     <!-- PENDING MIGRATIONS -->
     <YCard :title="$t('migrations_pending')" icon="cogs" no-body>
       <template #header-buttons v-if="pending">
@@ -86,7 +84,12 @@ async function skipMigration(id) {
             {{ number }}. {{ description }}
 
             <div class="ms-auto">
-              <BButton @click="skipMigration(id)" size="sm" variant="warning">
+              <BButton
+                size="sm"
+                variant="warning"
+                class="d-flex align-items-center ms-2"
+                @click="skipMigration(id)"
+              >
                 <YIcon iname="close" /> {{ $t('skip') }}
               </BButton>
             </div>
@@ -98,13 +101,12 @@ async function skipMigration(id) {
 
             <BFormCheckbox
               :id="'checkbox-' + number"
+              v-model="checked[id]"
               :name="'checkbox-' + number"
               :aria-describedby="'checkbox-feedback-' + number"
-              v-model="checked[id]"
             >
               {{ $t('migrations_disclaimer_check_message') }}
             </BFormCheckbox>
-
             <BFormInvalidFeedback
               v-if="checked[id] === false"
               :state="false"
@@ -137,14 +139,5 @@ async function skipMigration(id) {
         </BListGroupItem>
       </BListGroup>
     </YCard>
-
-    <template #skeleton>
-      <CardListSkeleton :item-count="3" />
-      <BCard no-body>
-        <template #header>
-          <BSkeleton width="30%" height="36px" class="m-0" />
-        </template>
-      </BCard>
-    </template>
-  </ViewBase>
+  </div>
 </template>

From 09e9c272b7b51c3ad659f5dcd8aa925c35784d67 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:31:47 +0200
Subject: [PATCH 183/275] refactor: rework async ToolSettings

---
 app/src/views/tool/ToolSettings.vue | 64 +++++++++++------------------
 1 file changed, 25 insertions(+), 39 deletions(-)

diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index 2514cdd8f..35d006a28 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -1,53 +1,39 @@
 <script setup lang="ts">
-import { shallowRef } from 'vue'
-
 import api, { objectToParams } from '@/api'
 import ConfigPanelsComponent from '@/components/ConfigPanels.vue'
-import type {
-  ConfigPanelsProps,
-  OnPanelApply,
-} from '@/composables/configPanels'
 import { formatConfigPanels, useConfigPanels } from '@/composables/configPanels'
-import { useInitialQueries } from '@/composables/useInitialQueries'
 import type { CoreConfigPanels } from '@/types/core/options'
 
 const props = defineProps<{ tabId?: string }>()
 
-const { loading, refetch } = useInitialQueries([{ uri: 'settings?full' }], {
-  onQueriesResponse,
+const coreConfig = await api.get<CoreConfigPanels>({
+  uri: 'settings?full',
+  initial: true,
 })
-const config = shallowRef<ConfigPanelsProps | undefined>()
-
-function onQueriesResponse(config_: CoreConfigPanels) {
-  config.value = useConfigPanels(
-    formatConfigPanels(config_),
-    () => props.tabId,
-    onPanelApply,
-  )
-}
 
-const onPanelApply: OnPanelApply = ({ panelId, data }, onError) => {
-  // FIXME no route for potential action
-  api
-    .put({
-      uri: `settings/${panelId}`,
-      data: { args: objectToParams(data) },
-      humanKey: { key: 'settings.update', panel: panelId },
-    })
-    .then(() => refetch())
-    .catch(onError)
-}
+const { form, panel, v, routes, onPanelApply } = useConfigPanels(
+  formatConfigPanels(coreConfig),
+  () => props.tabId,
+  ({ panelId, data }, onError) => {
+    // FIXME no route for potential action
+    api
+      .put({
+        uri: `settings/${panelId}`,
+        data: { args: objectToParams(data) },
+        humanKey: { key: 'settings.update', panel: panelId },
+      })
+      .then(() => api.refetch())
+      .catch(onError)
+  },
+)
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="CardFormSkeleton">
-    <ConfigPanelsComponent
-      v-if="config"
-      v-model="config.form"
-      :panel="config.panel.value"
-      :validations="config.v.value"
-      :routes="config.routes"
-      @apply="config.onPanelApply"
-    />
-  </ViewBase>
+  <ConfigPanelsComponent
+    v-model="form"
+    :panel="panel"
+    :validations="v"
+    :routes="routes"
+    @apply="onPanelApply"
+  />
 </template>

From f7c563afb22a096fbe08ee9829635872980bbf7b Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:32:26 +0200
Subject: [PATCH 184/275] refactor: rework async SystemUpdate

---
 app/src/types/core/api.ts             | 20 ++++++
 app/src/views/update/SystemUpdate.vue | 92 ++++++++++-----------------
 2 files changed, 55 insertions(+), 57 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index 0daab85b8..f860e2167 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -296,6 +296,26 @@ export type MigrationList = {
   migrations: MigrationInfo[]
 }
 
+export type SystemUpdate = {
+  system: {
+    name: string
+    new_version: string
+    current_version: string
+  }[]
+  apps: {
+    name: string
+    id: string
+    new_version: string
+    current_version: string
+    notifications: {
+      PRE_UPGRADE: Obj<string> | null
+      POST_UPGRADE: Obj<string> | null
+    }
+  }[]
+  important_yunohost_upgrade: boolean
+  pending_migrations: MigrationInfo[]
+}
+
 // DOMAINS
 
 export type DNSRecord = {
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 7e300a199..48cc4d59b 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -6,60 +6,40 @@ import api from '@/api'
 import CardCollapse from '@/components/CardCollapse.vue'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { useInfos } from '@/composables/useInfos'
-import { useInitialQueries } from '@/composables/useInitialQueries'
+import type { SystemUpdate } from '@/types/core/api'
+import { formatAppNotifs } from '../app/appData'
 
 const { t } = useI18n()
 const { tryToReconnect } = useInfos()
 const modalConfirm = useAutoModal()
-const { loading } = useInitialQueries(
-  [{ method: 'PUT', uri: 'update/all', humanKey: 'update' }],
-  { showModal: true, onQueriesResponse },
-)
 
-const system = ref()
-const apps = ref()
-const importantYunohostUpgrade = ref()
-const pendingMigrations = ref()
-const showPreUpgradeModal = ref(false)
-const preUpgrade = ref({
-  apps: [],
-  notifs: [],
-})
-
-function onQueriesResponse({
-  apps_,
-  system_,
-  important_yunohost_upgrade,
-  pending_migrations,
-}: any) {
-  apps.value = apps_.length ? apps_ : null
-  system.value = system_.length ? system_ : null
-  // eslint-disable-next-line camelcase
-  importantYunohostUpgrade.value = important_yunohost_upgrade
-  pendingMigrations.value = pending_migrations.length !== 0
-}
-
-function formatAppNotifs(notifs) {
-  return Object.keys(notifs).reduce((acc, key) => {
-    return acc + '\n\n' + notifs[key]
-  }, '')
-}
+const { apps, system, importantYunohostUpgrade, pendingMigrations } = await api
+  .put<SystemUpdate>({ uri: 'update/all', humanKey: 'update' })
+  .then(({ apps, system, important_yunohost_upgrade, pending_migrations }) => {
+    return {
+      apps: ref(apps),
+      system: ref(system),
+      importantYunohostUpgrade: important_yunohost_upgrade,
+      pendingMigrations: !!pending_migrations.length,
+    }
+  })
+const preUpgrade = ref<
+  | { apps: { id: string; name: string; notif: string }[]; hasNotifs: boolean }
+  | undefined
+>()
 
-async function confirmAppsUpgrade(id = null) {
-  const appList = id ? [apps.value.find((app) => app.id === id)] : apps.value
+async function confirmAppsUpgrade(id?: string) {
+  const appList = id ? [apps.value.find((app) => app.id === id)!] : apps.value
   const apps_ = appList.map((app) => ({
     id: app.id,
     name: app.name,
-    notif: app.notifications.PRE_UPGRADE
-      ? formatAppNotifs(app.notifications.PRE_UPGRADE)
-      : '',
+    notif: formatAppNotifs(app.notifications.PRE_UPGRADE),
   }))
   preUpgrade.value = { apps: apps_, hasNotifs: apps_.some((app) => app.notif) }
-  showPreUpgradeModal.value = true
 }
 
-async function performAppsUpgrade(ids) {
-  const apps_ = ids.map((id) => apps.value.find((app) => app.id === id))
+async function performAppsUpgrade(ids: string[]) {
+  const apps_ = ids.map((id) => apps.value.find((app) => app.id === id)!)
   const lastAppId = apps_[apps_.length - 1].id
 
   for (const app of apps_) {
@@ -68,7 +48,7 @@ async function performAppsUpgrade(ids) {
         uri: `apps/${app.id}/upgrade`,
         humanKey: { key: 'upgrade.app', app: app.name },
       })
-      .then((response) => {
+      .then((response: Pick<SystemUpdate['apps'][number], 'notifications'>) => {
         const postMessage = formatAppNotifs(response.notifications.POST_UPGRADE)
         const isLast = app.id === lastAppId
         apps.value = apps.value.filter((a) => app.id !== a.id)
@@ -88,15 +68,11 @@ async function performAppsUpgrade(ids) {
             { markdown: true, cancelable: !isLast },
           )
         } else {
-          return Promise.resolve(true)
+          return true
         }
       })
     if (!continue_) break
   }
-
-  if (!apps.value.length) {
-    apps.value = null
-  }
 }
 
 async function performSystemUpgrade() {
@@ -111,13 +87,13 @@ async function performSystemUpgrade() {
         initialDelay: 2000,
       })
     }
-    system.value = null
+    system.value = []
   })
 }
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="CardListSkeleton">
+  <div>
     <!-- MIGRATIONS WARN -->
     <YAlert v-if="pendingMigrations" variant="warning" alert>
       <span v-html="$t('pending_migrations')" />
@@ -130,7 +106,7 @@ async function performSystemUpgrade() {
 
     <!-- SYSTEM UPGRADE -->
     <YCard :title="$t('system')" icon="server" no-body>
-      <BListGroup v-if="system" flush>
+      <BListGroup v-if="system.length" flush>
         <BListGroupItem
           v-for="{ name, current_version, new_version } in system"
           :key="name"
@@ -144,14 +120,14 @@ async function performSystemUpgrade() {
         </BListGroupItem>
       </BListGroup>
 
-      <BCardBody v-else-if="system === null">
+      <BCardBody v-else>
         <span class="text-success">
           <YIcon iname="check-circle" />
           {{ $t('system_packages_nothing') }}
         </span>
       </BCardBody>
 
-      <template #buttons v-if="system">
+      <template v-if="system.length" #buttons>
         <BButton
           variant="success"
           v-t="'system_upgrade_all_packages_btn'"
@@ -162,7 +138,7 @@ async function performSystemUpgrade() {
 
     <!-- APPS UPGRADE -->
     <YCard :title="$t('applications')" icon="cubes" no-body>
-      <BListGroup v-if="apps" flush>
+      <BListGroup v-if="apps.length" flush>
         <BListGroupItem
           v-for="{ name, id, current_version, new_version } in apps"
           :key="id"
@@ -185,13 +161,13 @@ async function performSystemUpgrade() {
         </BListGroupItem>
       </BListGroup>
 
-      <BCardBody v-else-if="apps === null">
+      <BCardBody v-else>
         <span class="text-success">
           <YIcon iname="check-circle" /> {{ $t('system_apps_nothing') }}
         </span>
       </BCardBody>
 
-      <template #buttons v-if="apps">
+      <template v-if="apps.length" #buttons>
         <BButton
           variant="success"
           v-t="'system_upgrade_all_applications_btn'"
@@ -201,8 +177,9 @@ async function performSystemUpgrade() {
     </YCard>
 
     <BModal
-      v-model="showPreUpgradeModal"
+      v-if="preUpgrade"
       id="apps-pre-upgrade"
+      :model-value="true"
       :title="$t('app.upgrade.confirm.title')"
       header-bg-variant="warning"
       header-class="text-black"
@@ -210,6 +187,7 @@ async function performSystemUpgrade() {
       ok-variant="success"
       :cancel-title="$t('cancel')"
       @ok="performAppsUpgrade(preUpgrade.apps.map((app) => app.id))"
+      @cancel="preUpgrade = undefined"
     >
       <h3>
         {{ $t('app.upgrade.confirm.apps') }}
@@ -248,7 +226,7 @@ async function performSystemUpgrade() {
         </div>
       </div>
     </BModal>
-  </ViewBase>
+  </div>
 </template>
 
 <style scoped lang="scss">

From 1e2a1e2663bd3ed492bfa2b86a4957a1dd8d4e64 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:32:50 +0200
Subject: [PATCH 185/275] refactor: rework async UserCreate

---
 app/src/views/user/UserCreate.vue | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index 74e76fabc..df34c15e3 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -6,7 +6,6 @@ import { useRouter } from 'vue-router'
 import api from '@/api'
 import { useDomains, useUsersAndGroups } from '@/composables/data'
 import { useForm } from '@/composables/form'
-import { useInitialQueries } from '@/composables/useInitialQueries'
 import {
   alphalownumdot_,
   minLength,
@@ -20,13 +19,12 @@ import type { FieldProps, FormFieldDict } from '@/types/form'
 
 const { t } = useI18n()
 const router = useRouter()
-const { loading } = useInitialQueries(
-  [
-    { uri: 'users', cachePath: 'users' },
-    { uri: 'domains', cachePath: 'domains' },
-  ],
-  { onQueriesResponse },
-)
+
+await api.fetchAll([
+  { uri: 'users', cachePath: 'users' },
+  { uri: 'domains', cachePath: 'domains' },
+])
+
 const { usernames } = useUsersAndGroups()
 const { domainsAsChoices, mainDomain } = useDomains()
 
@@ -105,10 +103,6 @@ const fields = {
 
 const { v, onSubmit } = useForm(form, fields)
 
-function onQueriesResponse() {
-  form.value.domain = mainDomain.value
-}
-
 const onUserCreate = onSubmit(async (onError) => {
   const data = await formatForm(form)
   api
@@ -126,7 +120,7 @@ const onUserCreate = onSubmit(async (onError) => {
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="CardFormSkeleton">
+  <div>
     <CardForm
       v-model="form"
       icon="user-plus"
@@ -145,5 +139,5 @@ const onUserCreate = onSubmit(async (onError) => {
         </BInputGroup>
       </template>
     </CardForm>
-  </ViewBase>
+  </div>
 </template>

From 66bf3a556034c849396b74a2c02463925656050f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:33:19 +0200
Subject: [PATCH 186/275] refactor: rework async UserEdit

---
 app/src/views/user/UserEdit.vue | 129 ++++++++++++++++----------------
 1 file changed, 66 insertions(+), 63 deletions(-)

diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 9fdc23590..4479a5f45 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -4,11 +4,9 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
-import type ViewBase from '@/components/globals/ViewBase.vue'
 import { useDomains, useUsersAndGroups } from '@/composables/data'
 import { useArrayRule, useForm } from '@/composables/form'
-import { useInitialQueries } from '@/composables/useInitialQueries'
-import { arrayDiff } from '@/helpers/commons'
+import { arrayDiff, getKeys } from '@/helpers/commons'
 import {
   emailForward,
   emailLocalPart,
@@ -20,7 +18,8 @@ import {
   sameAs,
 } from '@/helpers/validators'
 import { formatAdress, formatForm, sizeToM } from '@/helpers/yunohostArguments'
-import type { AdressModelValue, FieldProps, FormFieldDict } from '@/types/form'
+import type { UserDetails } from '@/types/core/data'
+import type { FieldProps, FormFieldDict } from '@/types/form'
 
 const props = defineProps<{
   name: string
@@ -28,29 +27,30 @@ const props = defineProps<{
 
 const { t } = useI18n()
 const router = useRouter()
-const { loading } = useInitialQueries(
-  [
-    {
-      uri: `users/${props.name}`,
-      cachePath: `userDetails.${props.name}`,
-    },
-    { uri: 'domains', cachePath: 'domains' },
-  ],
-  { onQueriesResponse },
-)
-
-const viewElem = ref<InstanceType<typeof ViewBase> | null>(null)
+await api.fetchAll([
+  {
+    uri: `users/${props.name}`,
+    cachePath: `userDetails.${props.name}`,
+  },
+  { uri: 'domains', cachePath: 'domains' },
+])
 
 const { domainsAsChoices, mainDomain } = useDomains()
+const { user } = useUsersAndGroups(() => props.name)
+// mailbox-quota could be 'No quota' or 'Pas de quota'...
+const mailboxQuota =
+  parseInt(user.value['mailbox-quota'].limit) > 0
+    ? sizeToM(user.value['mailbox-quota'].limit) ?? 0
+    : 0
 
 type Form = typeof form.value
 const form = ref({
   username: props.name,
-  fullname: '',
-  mail: { localPart: '', separator: '@', domain: '' } as AdressModelValue,
-  mailbox_quota: '' as string | number,
-  mail_aliases: [] as AdressModelValue[],
-  mail_forward: [] as string[],
+  fullname: user.value.fullname,
+  mail: formatAdress(user.value.mail),
+  mailbox_quota: mailboxQuota,
+  mail_aliases: user.value['mail-aliases'].map((mail) => formatAdress(mail)),
+  mail_forward: [...user.value['mail-forward']],
   change_password: '',
   confirmation: '',
 })
@@ -74,7 +74,10 @@ const fields = reactive({
   mail: reactive({
     component: 'AdressItem',
     label: t('user_email'),
-    rules: { localPart: { required, email: emailLocalPart } },
+    rules: {
+      localPart: { required, email: emailLocalPart },
+      domain: { required },
+    },
     cProps: { id: 'mail', choices: domainsAsChoices },
   }) satisfies FieldProps<'AdressItem', Form['mail']>,
 
@@ -88,13 +91,17 @@ const fields = reactive({
     cProps: {
       id: 'mailbox-quota',
       placeholder: t('mailbox_quota_placeholder'),
+      type: 'number',
     },
   } satisfies FieldProps<'InputItem', Form['mailbox_quota']>,
 
   mail_aliases: reactive({
     component: 'AdressItem',
+    label: t('user_emailaliases'),
+    id: 'mail_aliases',
     rules: useArrayRule(() => form.value.mail_aliases, {
       localPart: { required, email: emailLocalPart },
+      domain: { required },
     }),
     cProps: {
       placeholder: t('placeholder.username'),
@@ -104,6 +111,8 @@ const fields = reactive({
 
   mail_forward: reactive({
     component: 'InputItem',
+    label: t('user_emailforward'),
+    id: 'mail_forward',
     rules: useArrayRule(() => form.value.mail_forward, {
       required,
       emailForward,
@@ -145,57 +154,51 @@ const fields = reactive({
 
 const { v, onSubmit } = useForm(form, fields)
 
-function onQueriesResponse(user_: any) {
-  form.value.fullname = user_.fullname
-  form.value.mail = formatAdress(user_.mail)
-  if (user_['mail-aliases']) {
-    form.value.mail_aliases = user_['mail-aliases'].map((mail) =>
-      formatAdress(mail),
-    )
-  }
-  if (user_['mail-forward']) {
-    form.value.mail_forward = user_['mail-forward'].map((mail) => ({ mail })) // Copy value
-  }
-  // mailbox-quota could be 'No quota' or 'Pas de quota'...
-  if (parseInt(user_['mailbox-quota'].limit) > 0) {
-    form.value.mailbox_quota = sizeToM(user_['mailbox-quota'].limit)
-  } else {
-    form.value.mailbox_quota = ''
-  }
-}
-
 const onUserEdit = onSubmit(async (onError, serverErrors) => {
-  const { username: _, ...formData } = await formatForm(form, {
+  const {
+    username: _,
+    confirmation: __,
+    ...formData
+  } = await formatForm(form, {
     removeEmpty: true,
   })
-  const user_ = useUsersAndGroups(props.name).user.value!
-  const data = {}
+  const data = {} as Partial<
+    Omit<UserDetails, 'mail-aliases' | 'mail-forward' | 'mailbox-quota'> &
+      Record<
+        | 'add_mailalias'
+        | 'remove_mailalias'
+        | 'add_mailforward'
+        | 'remove_mailforward',
+        string[]
+      > & { mailbox_quota: string; change_password: string }
+  >
   if (!Object.prototype.hasOwnProperty.call(formData, 'mailbox_quota')) {
-    formData.mailbox_quota = ''
+    formData.mailbox_quota = 0
   }
 
-  // formData.mail_forward = formData.mail_forward?.map((v) => v.mail)
-
-  for (const key of ['mail_aliases', 'mail_forward']) {
-    const dashedKey = key.replace('_', '-')
-    const newKey = key.replace('_', '').replace('es', '')
-    const addDiff = arrayDiff(formData[key], user_[dashedKey])
-    const rmDiff = arrayDiff(user_[dashedKey], formData[key])
-    if (addDiff.length) data['add_' + newKey] = addDiff
-    if (rmDiff.length) data['remove_' + newKey] = rmDiff
+  for (const key of ['mail_aliases', 'mail_forward'] as const) {
+    const dashedKey = key.replace('_', '-') as 'mail-aliases' | 'mail-forward'
+    const newKey = key.replace('_', '').replace('es', '') as
+      | 'mailalias'
+      | 'mailforward'
+    const addDiff = arrayDiff(formData[key], user.value[dashedKey])
+    const rmDiff = arrayDiff(user.value[dashedKey], formData[key])
+    if (addDiff.length) data[`add_${newKey}`] = addDiff
+    if (rmDiff.length) data[`remove_${newKey}`] = rmDiff
   }
 
-  for (const key in formData) {
+  getKeys(formData).forEach((key) => {
+    if (key === 'mail_aliases' || key === 'mail_forward') return
     if (key === 'mailbox_quota') {
-      const quota =
-        parseInt(formData[key]) > 0 ? formData[key] + 'M' : 'No quota'
-      if (parseInt(quota) !== parseInt(user_['mailbox-quota'].limit)) {
-        data[key] = quota === 'No quota' ? '0' : quota
+      if (formData[key] !== mailboxQuota) {
+        data[key] = formData[key]! > 0 ? formData[key] + 'M' : 'No quota'
       }
-    } else if (!key.includes('mail_') && formData[key] !== user_[key]) {
+    } else if (key === 'change_password') {
+      data.change_password = formData[key]
+    } else if (formData[key] !== user.value[key]) {
       data[key] = formData[key]
     }
-  }
+  })
 
   if (Object.keys(data).length === 0) {
     serverErrors.global = [t('error_modify_something')]
@@ -217,7 +220,7 @@ const onUserEdit = onSubmit(async (onError, serverErrors) => {
 </script>
 
 <template>
-  <ViewBase ref="viewElem" :loading="loading" skeleton="CardFormSkeleton">
+  <div>
     <CardForm
       v-model="form"
       icon="user"
@@ -252,7 +255,7 @@ const onUserEdit = onSubmit(async (onError, serverErrors) => {
         />
       </template>
     </CardForm>
-  </ViewBase>
+  </div>
 </template>
 
 <style lang="scss" scoped>

From 9dcdc654b961438266496cb406e8315a233337a6 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:33:38 +0200
Subject: [PATCH 187/275] refactor: rework async UserInfo

---
 app/src/views/user/UserInfo.vue | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index 40ab77cd9..43879b8cd 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -4,17 +4,15 @@ import { useRouter } from 'vue-router'
 
 import api from '@/api'
 import { useUsersAndGroups } from '@/composables/data'
-import { useInitialQueries } from '@/composables/useInitialQueries'
 
 const props = defineProps<{ name: string }>()
 
 const router = useRouter()
-const { loading } = useInitialQueries([
-  {
-    uri: `users/${props.name}`,
-    cachePath: `userDetails.${props.name}`,
-  },
-])
+
+await api.get({
+  uri: `users/${props.name}`,
+  cachePath: `userDetails.${props.name}`,
+})
 
 const { user } = useUsersAndGroups(() => props.name)
 const purge = ref(false)
@@ -35,8 +33,8 @@ function deleteUser() {
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="CardInfoSkeleton">
-    <YCard v-if="user" :title="user.fullname" icon="user">
+  <div>
+    <YCard :title="user.fullname" icon="user">
       <div class="d-flex align-items-center flex-column flex-md-row">
         <YIcon iname="user" class="fa-fw" />
 
@@ -45,7 +43,7 @@ function deleteUser() {
             <BCol>
               <strong>{{ $t('user_username') }}</strong>
             </BCol>
-            <BCol>{{ user.username }}</BCol>
+            <BCol>{{ name }}</BCol>
           </BRow>
 
           <BRow>
@@ -99,11 +97,11 @@ function deleteUser() {
 
       <template #buttons>
         <BButton
-          :to="{ name: 'user-edit', params: { user } }"
+          :to="{ name: 'user-edit', params: { name } }"
           :variant="user ? 'info' : 'dark'"
         >
           <YIcon iname="edit" />
-          {{ user ? $t('user_username_edit', { name: user.username }) : '' }}
+          {{ user ? $t('user_username_edit', { name }) : '' }}
         </BButton>
 
         <BButton v-b-modal.delete-modal :variant="user ? 'danger' : 'dark'">
@@ -116,14 +114,14 @@ function deleteUser() {
     <BModal
       v-if="user"
       id="delete-modal"
-      :title="$t('confirm_delete', { name: user.username })"
+      :title="$t('confirm_delete', { name })"
       @ok="deleteUser"
       header-bg-variant="warning"
       header-class="text-black"
     >
       <BFormGroup>
         <BFormCheckbox v-model="purge">
-          {{ $t('purge_user_data_checkbox', { name: user.username }) }}
+          {{ $t('purge_user_data_checkbox', { name }) }}
         </BFormCheckbox>
 
         <template #description>
@@ -134,7 +132,7 @@ function deleteUser() {
         </template>
       </BFormGroup>
     </BModal>
-  </ViewBase>
+  </div>
 </template>
 
 <style lang="scss" scoped>

From 06ce2a5bec0db3925992a65dd040563b3f29dd3c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:33:53 +0200
Subject: [PATCH 188/275] refactor: rework async UserList

---
 app/src/views/user/UserList.vue | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 25f94ffdd..40671766c 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
+import api from '@/api'
 import { useUsersAndGroups } from '@/composables/data'
 import { useInfos } from '@/composables/useInfos'
-import { useInitialQueries } from '@/composables/useInitialQueries'
 import { useSearch } from '@/composables/useSearch'
 
-const { loading } = useInitialQueries([
-  {
-    uri: 'users?fields=username&fields=fullname&fields=mail&fields=mailbox-quota&fields=groups',
-    cachePath: 'users',
-  },
-])
+await api.get({
+  uri: 'users?fields=username&fields=fullname&fields=mail&fields=mailbox-quota&fields=groups',
+  cachePath: 'users',
+})
 
 const { users } = useUsersAndGroups()
 const [search, filteredUsers] = useSearch(
@@ -25,12 +23,7 @@ function downloadExport() {
 </script>
 
 <template>
-  <ViewSearch
-    v-model="search"
-    :items="filteredUsers"
-    items-name="users"
-    :loading="loading"
-  >
+  <ViewSearch v-model="search" :items="filteredUsers" items-name="users">
     <template #top-bar-buttons>
       <BButton variant="info" :to="{ name: 'group-list' }">
         <YIcon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }}

From 8507e35ff22011c3847218894394fbaf3c49cd5f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:34:21 +0200
Subject: [PATCH 189/275] ts: types to ToolPower

---
 app/src/views/tool/ToolPower.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/views/tool/ToolPower.vue b/app/src/views/tool/ToolPower.vue
index 31b0e348d..485abc2bc 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -9,7 +9,7 @@ const { t } = useI18n()
 const modalConfirm = useAutoModal()
 const { tryToReconnect } = useInfos()
 
-async function triggerAction(action) {
+async function triggerAction(action: 'reboot' | 'shutdown') {
   const confirmed = await modalConfirm(t('confirm_reboot_action_' + action))
   if (!confirmed) return
 

From a12e168b45d1d68f5b16e55d5638c9177325acca Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 01:58:07 +0200
Subject: [PATCH 190/275] refactor: format InputItem type=number as number

---
 app/src/components/globals/formItems/InputItem.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index 64933e4f6..2e2e3dbf2 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -31,7 +31,14 @@ defineEmits<{
 
 const touch = inject(ValidationTouchSymbol)
 
-const model = defineModel<string | number | null>()
+const model = defineModel<string | number | null>({
+  set(value) {
+    if (props.type === 'number' && typeof value === 'string') {
+      return parseInt(value)
+    }
+    return value
+  }
+})
 
 const autocomplete = computed(() => {
   const typeToAutocomplete = {

From c786d47a6f5fe08cd404cb49b83c8620833163f6 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 01:59:16 +0200
Subject: [PATCH 191/275] feat: add routes skeletons

---
 app/src/router/routes.ts | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/app/src/router/routes.ts b/app/src/router/routes.ts
index a65487b52..8a869327d 100644
--- a/app/src/router/routes.ts
+++ b/app/src/router/routes.ts
@@ -51,6 +51,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'users' },
       breadcrumb: ['user-list'],
+      skeleton: 'ListGroupSkeleton',
     },
   },
   {
@@ -60,6 +61,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'users_new' },
       breadcrumb: ['user-list', 'user-create'],
+      skeleton: 'CardFormSkeleton',
     },
   },
   {
@@ -80,6 +82,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { param: 'name' },
       breadcrumb: ['user-list', 'user-info'],
+      skeleton: 'CardInfoSkeleton',
     },
   },
   {
@@ -90,6 +93,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { param: 'name', trad: 'user_username_edit' },
       breadcrumb: ['user-list', 'user-info', 'user-edit'],
+      skeleton: 'CardFormSkeleton',
     },
   },
 
@@ -103,6 +107,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'groups_and_permissions' },
       breadcrumb: ['user-list', 'group-list'],
+      skeleton: 'CardFormSkeleton',
     },
   },
   {
@@ -125,6 +130,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'domains' },
       breadcrumb: ['domain-list'],
+      skeleton: 'ListGroupSkeleton',
     },
   },
   {
@@ -134,6 +140,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'domain_add' },
       breadcrumb: ['domain-list', 'domain-add'],
+      skeleton: 'CardFormSkeleton',
     },
   },
   {
@@ -145,6 +152,7 @@ const routes: RouteRecordRaw[] = [
       routerParams: ['name'], // Override router key params to avoid view recreation at tab change.
       args: { param: 'name' },
       breadcrumb: ['domain-list', 'domain-info'],
+      skeleton: 'CardListSkeleton',
     },
   },
 
@@ -158,6 +166,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'applications' },
       breadcrumb: ['app-list'],
+      skeleton: 'ListGroupSkeleton',
     },
   },
   {
@@ -168,6 +177,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'catalog' },
       breadcrumb: ['app-list', 'app-catalog'],
+      skeleton: 'AppCatalogSkeleton',
     },
   },
   {
@@ -178,6 +188,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'install_name', param: 'id' },
       breadcrumb: ['app-list', 'app-catalog', 'app-install'],
+      skeleton: ['CardInfoSkeleton', { is: 'CardFormSkeleton', cols: null }],
     },
   },
   {
@@ -188,6 +199,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'install_name', param: 'id' },
       breadcrumb: ['app-list', 'app-catalog', 'app-install-custom'],
+      skeleton: ['CardInfoSkeleton', { is: 'CardFormSkeleton', cols: null }],
     },
   },
   {
@@ -199,6 +211,7 @@ const routes: RouteRecordRaw[] = [
       routerParams: ['id'], // Override router key params to avoid view recreation at tab change.
       args: { param: 'id' },
       breadcrumb: ['app-list', 'app-info'],
+      skeleton: [{ is: 'CardInfoSkeleton', itemCount: 8 }, 'CardFormSkeleton'],
     },
   },
 
@@ -212,6 +225,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'system_update' },
       breadcrumb: ['update'],
+      skeleton: 'CardListSkeleton',
     },
   },
 
@@ -225,6 +239,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'services' },
       breadcrumb: ['tool-list', 'service-list'],
+      skeleton: 'ListGroupSkeleton',
     },
   },
   {
@@ -235,6 +250,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { param: 'name' },
       breadcrumb: ['tool-list', 'service-list', 'service-info'],
+      skeleton: 'CardInfoSkeleton',
     },
   },
 
@@ -257,16 +273,18 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'logs' },
       breadcrumb: ['tool-list', 'tool-logs'],
+      skeleton: 'CardListSkeleton',
     },
   },
   {
     name: 'tool-log',
-    path: '/tools/logs/:name',
+    path: '/tools/logs/:name/:n?',
     component: () => import('@/views/tool/ToolLog.vue'),
     props: true,
     meta: {
       args: { param: 'name' },
       breadcrumb: ['tool-list', 'tool-logs', 'tool-log'],
+      skeleton: 'CardInfoSkeleton',
     },
   },
   {
@@ -276,6 +294,10 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'migrations' },
       breadcrumb: ['tool-list', 'tool-migrations'],
+      skeleton: [
+        { is: 'CardListSkeleton', itemCount: 3 },
+        { is: 'CardListSkeleton', itemCount: 3 },
+      ],
     },
   },
   {
@@ -285,6 +307,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'firewall' },
       breadcrumb: ['tool-list', 'tool-firewall'],
+      skeleton: 'CardFormSkeleton',
     },
   },
   {
@@ -305,6 +328,7 @@ const routes: RouteRecordRaw[] = [
       routerParams: [],
       args: { trad: 'tools_yunohost_settings' },
       breadcrumb: ['tool-list', 'tool-settings'],
+      skeleton: 'CardFormSkeleton',
     },
   },
   {
@@ -327,6 +351,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'diagnosis' },
       breadcrumb: ['diagnosis'],
+      skeleton: ['CardListSkeleton', 'CardListSkeleton', 'CardListSkeleton'],
     },
   },
 
@@ -350,6 +375,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { param: 'id' },
       breadcrumb: ['backup', 'backup-list'],
+      skeleton: 'ListGroupSkeleton',
     },
   },
   {
@@ -360,6 +386,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { param: 'name' },
       breadcrumb: ['backup', 'backup-list', 'backup-info'],
+      skeleton: [{ is: 'CardInfoSkeleton', itemCount: 4 }, 'CardListSkeleton'],
     },
   },
   {
@@ -370,6 +397,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'backup_create' },
       breadcrumb: ['backup', 'backup-list', 'backup-create'],
+      skeleton: 'CardListSkeleton',
     },
   },
 ]

From c9eedc49898c02871074d4c8552de8e1c00b7022 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 02:00:53 +0200
Subject: [PATCH 192/275] chore: rm no longer used useInitialQueries.ts

---
 app/src/composables/useInitialQueries.ts | 38 ------------------------
 1 file changed, 38 deletions(-)
 delete mode 100644 app/src/composables/useInitialQueries.ts

diff --git a/app/src/composables/useInitialQueries.ts b/app/src/composables/useInitialQueries.ts
deleted file mode 100644
index 1ccea7ba3..000000000
--- a/app/src/composables/useInitialQueries.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue'
-import { ref, toValue } from 'vue'
-
-import type { APIQuery } from '@/api/api'
-import api from '@/api/api'
-
-export function useInitialQueries<T extends any[] = any[]>(
-  queries: MaybeRefOrGetter<APIQuery[]> | ComputedRef<APIQuery[]>,
-  {
-    onQueriesResponse,
-    showModal = false,
-  }: {
-    onQueriesResponse?: (...responses: T) => Promise<void> | void
-    showModal?: boolean
-  } = {},
-) {
-  const loading = ref(true)
-  const responses: Ref<T | null> = ref(null)
-  // FIXME watch `queries` to call on change?
-
-  function call(triggerLoading = true) {
-    if (triggerLoading) loading.value = true
-    return api
-      .fetchAll<T>(toValue(queries), { showModal, initial: true })
-      .then(async (responses_) => {
-        responses.value = responses_
-        if (onQueriesResponse) {
-          await onQueriesResponse(...responses_)
-        }
-        loading.value = false
-        return responses
-      })
-  }
-
-  call()
-
-  return { loading, responses, refetch: call }
-}

From 4f0df604584bd03c0f8b4baa22be41f1603e9163 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 02:01:32 +0200
Subject: [PATCH 193/275] chore: rm no longer used ViewBase component

---
 app/src/components/globals/ViewBase.vue | 56 -------------------------
 1 file changed, 56 deletions(-)
 delete mode 100644 app/src/components/globals/ViewBase.vue

diff --git a/app/src/components/globals/ViewBase.vue b/app/src/components/globals/ViewBase.vue
deleted file mode 100644
index ca870c6bb..000000000
--- a/app/src/components/globals/ViewBase.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import type { Component } from 'vue'
-
-defineOptions({ inheritAttrs: false })
-withDefaults(
-  defineProps<{
-    loading?: boolean
-    skeleton?: string | Component
-  }>(),
-  {
-    loading: false,
-    skeleton: 'CardFormSkeleton',
-  },
-)
-
-const slots = defineSlots<{
-  'top-bar-group-left': any
-  'top-bar-group-right': any
-  'top-bar': any
-  top: any
-  default: any
-  bot: any
-  skeleton: any
-}>()
-</script>
-
-<template>
-  <div>
-    <TopBar v-if="slots['top-bar-group-left'] || slots['top-bar-group-right']">
-      <template #group-left>
-        <slot name="top-bar-group-left" />
-      </template>
-      <template #group-right>
-        <slot name="top-bar-group-right" />
-      </template>
-    </TopBar>
-    <slot v-else name="top-bar" />
-
-    <slot name="top" />
-
-    <BSkeletonWrapper :loading="loading">
-      <template #loading>
-        <slot name="skeleton">
-          <Component :is="skeleton" />
-        </slot>
-      </template>
-
-      <!-- Empty div to be able to receive multiple components -->
-      <div>
-        <slot name="default" />
-      </div>
-    </BSkeletonWrapper>
-
-    <slot name="bot" />
-  </div>
-</template>

From 445b1bdd21341be32687786c3e79c971eeb4b14a Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 10:49:37 +0200
Subject: [PATCH 194/275] refactor: use YAlert everywhere

---
 app/src/components/globals/CardForm.vue            |  7 ++++---
 app/src/components/globals/ViewSearch.vue          | 14 ++++++++------
 app/src/components/globals/YAlert.vue              | 12 ++++++------
 .../globals/formItems/ReadOnlyAlertItem.vue        | 13 ++++---------
 app/src/views/app/AppInstall.vue                   | 10 +++++++---
 app/src/views/backup/BackupInfo.vue                |  4 ++--
 app/src/views/backup/BackupList.vue                | 10 +++++++---
 7 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index 2f91906d9..ad5e29881 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -194,14 +194,15 @@ const Fields = createReusableTemplate<{
         </slot>
 
         <slot name="server-error">
-          <BAlert
+          <YAlert
+            v-if="globalErrorFeedback !== ''"
+            alert
             variant="danger"
             class="my-3"
             icon="ban"
-            :model-value="globalErrorFeedback !== ''"
           >
             <div v-html="globalErrorFeedback" />
-          </BAlert>
+          </YAlert>
         </slot>
       </BForm>
 
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index c3d2023ad..0b7c03d48 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -73,12 +73,14 @@ const noItemsMessage = computed(() => {
     <slot name="top" />
 
     <slot name="forced-default">
-      <BAlert v-if="noItemsMessage" :model-value="true" variant="warning">
-        <slot name="alert-message">
-          <YIcon iname="exclamation-triangle" />
-          {{ noItemsMessage }}
-        </slot>
-      </BAlert>
+      <YAlert
+        v-if="noItemsMessage"
+        alert
+        icon="exclamation-triangle"
+        variant="warning"
+      >
+        {{ noItemsMessage }}
+      </YAlert>
       <slot v-else name="default" />
     </slot>
 
diff --git a/app/src/components/globals/YAlert.vue b/app/src/components/globals/YAlert.vue
index 885c7f446..882633286 100644
--- a/app/src/components/globals/YAlert.vue
+++ b/app/src/components/globals/YAlert.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColorVariant } from 'bootstrap-vue-next'
+import { BAlert } from 'bootstrap-vue-next'
 import { computed } from 'vue'
 
 import { DEFAULT_VARIANT_ICON } from '@/helpers/yunohostArguments'
@@ -7,13 +8,13 @@ import { DEFAULT_VARIANT_ICON } from '@/helpers/yunohostArguments'
 const props = withDefaults(
   defineProps<{
     alert?: boolean
-    variant?: ColorVariant
     icon?: string
+    variant?: ColorVariant
   }>(),
   {
     alert: false,
-    variant: 'info',
     icon: undefined,
+    variant: 'info' as const,
   },
 )
 
@@ -24,10 +25,9 @@ const icon = computed(() => {
 
 <template>
   <Component
-    v-bind="$attrs"
-    :is="alert ? 'BAlert' : 'div'"
-    :modelValue="alert ? true : null"
-    :variant="alert ? variant : null"
+    :is="alert ? BAlert : 'div'"
+    :model-value="alert ? true : undefined"
+    :variant="alert ? variant : undefined"
     :class="{ ['alert alert-' + variant]: !alert }"
     class="yuno-alert d-flex flex-column flex-md-row align-items-center"
   >
diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index 8f90149e5..dc6742a99 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -10,6 +10,7 @@ const props = withDefaults(defineProps<ReadOnlyAlertItemProps>(), {
 })
 
 const icon = computed(() => {
+  // TODO merge with `DEFAULT_VARIANT_ICON`
   const icons = {
     success: 'thumbs-up',
     info: 'info',
@@ -22,14 +23,8 @@ const icon = computed(() => {
 </script>
 
 <template>
-  <BAlert
-    :id="id"
-    :model-value="true"
-    :variant="type"
-    class="d-flex flex-column flex-md-row align-items-center"
-  >
-    <YIcon :iname="icon" :variant="type" class="me-md-3 mb-md-0 mb-2" />
-
+  <!-- TODO ally: do we set it as a true alert or is it cosmetic? -->
+  <YAlert :id="id" alert :icon="icon" :variant="type">
     <VueShowdown :markdown="label" tag="span" class="markdown" />
-  </BAlert>
+  </YAlert>
 </template>
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 4344f7082..38caf1945 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -265,10 +265,14 @@ const performInstall = onSubmit(async (onError) => {
 
     <!-- FIXME hum not handled, is it still a thing? -->
     <!-- In case of a custom url with no manifest found -->
-    <BAlert :modelValue="app === null" variant="warning">
-      <YIcon iname="exclamation-triangle" />
+    <YAlert
+      v-if="app === null"
+      alert
+      icon="exclamation-triangle"
+      variant="warning"
+    >
       {{ $t('app_install_custom_no_manifest') }}
-    </BAlert>
+    </YAlert>
   </div>
 </template>
 
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index 41981df44..b921382d1 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -203,9 +203,9 @@ function downloadBackup() {
         </BListGroup>
 
         <BFormInvalidFeedback id="backup-restore-feedback" :state="isValid">
-          <BAlert :modelValue="true" variant="danger" class="mb-0">
+          <YAlert alert variant="danger" class="mb-0">
             {{ serverError }}
-          </BAlert>
+          </YAlert>
         </BFormInvalidFeedback>
       </BFormCheckboxGroup>
 
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index b349e06d2..888d03b1b 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -28,10 +28,14 @@ const archives = await api
       }"
     />
 
-    <BAlert v-if="!archives.length" :model-value="true" variant="warning">
-      <YIcon iname="exclamation-triangle" />
+    <YAlert
+      v-if="!archives.length"
+      alert
+      icon="exclamation-triangle"
+      variant="warning"
+    >
       {{ $t('items_verbose_count', { items: $t('items.backups', 0) }, 0) }}
-    </BAlert>
+    </YAlert>
 
     <BListGroup v-else>
       <BListGroupItem

From de143bbd78522a827eed9fc110a11aad573232f8 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 11:32:17 +0200
Subject: [PATCH 195/275] chore: lint

---
 app/overrides.d.ts                               |  4 ++++
 app/src/App.vue                                  |  4 ++--
 app/src/components/CardDeckFeed.vue              |  2 --
 app/src/components/LazyRenderer.vue              |  6 +++---
 app/src/components/RecursiveListGroup.vue        | 16 +++++++++-------
 app/src/components/globals/TopBar.vue            |  4 ++--
 app/src/components/globals/YCard.vue             |  4 ++--
 app/src/components/globals/YListGroupItem.vue    |  6 +++---
 .../components/globals/formItems/InputItem.vue   |  2 +-
 .../globals/skeletons/CardFormSkeleton.vue       |  2 +-
 app/src/main.ts                                  |  1 +
 app/src/views/app/AppInfo.vue                    |  8 ++++----
 app/src/views/app/AppInstall.vue                 |  2 +-
 app/src/views/backup/BackupCreate.vue            |  2 +-
 app/src/views/backup/BackupInfo.vue              | 16 ++++++++--------
 app/src/views/diagnosis/DiagnosisView.vue        | 10 +++++-----
 app/src/views/domain/DomainDns.vue               |  2 +-
 app/src/views/domain/DomainInfo.vue              |  2 +-
 app/src/views/group/GroupList.vue                | 12 ++++++------
 app/src/views/service/ServiceInfo.vue            |  6 +++---
 app/src/views/tool/ToolFirewall.vue              |  2 +-
 app/src/views/tool/ToolLog.vue                   |  4 ++--
 app/src/views/tool/ToolMigrations.vue            |  6 +++---
 app/src/views/tool/ToolPower.vue                 |  6 +++---
 app/src/views/update/SystemUpdate.vue            |  8 ++++----
 app/src/views/user/UserInfo.vue                  |  2 +-
 26 files changed, 72 insertions(+), 67 deletions(-)

diff --git a/app/overrides.d.ts b/app/overrides.d.ts
index f03512084..fcc095a1b 100644
--- a/app/overrides.d.ts
+++ b/app/overrides.d.ts
@@ -15,4 +15,8 @@ declare module 'bootstrap-vue-next' {
   interface BaseColorVariant {
     best: unknown
   }
+  interface BaseSize {
+    // `xs` size is available only for BButton
+    xs: unknown
+  }
 }
diff --git a/app/src/App.vue b/app/src/App.vue
index 17b5ae943..45ad9d325 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -91,12 +91,12 @@ onMounted(() => {
             </BButton>
           </li>
 
-          <li class="nav-item" v-show="connected">
+          <li v-show="connected" class="nav-item">
             <BButton
-              @click.prevent="logout"
               variant="outline-dark"
               block
               size="sm"
+              @click.prevent="logout"
             >
               {{ $t('logout') }} <YIcon iname="sign-out" />
             </BButton>
diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index d96b3ee36..6d5c37d1b 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { BCardGroup } from 'bootstrap-vue-next'
 import {
-  getCurrentInstance,
   h,
   nextTick,
   onBeforeUnmount,
@@ -29,7 +28,6 @@ function getTopParent(prev: HTMLElement): HTMLElement {
     : getTopParent(prev.parentElement!)
 }
 
-const i = getCurrentInstance()
 function onScroll() {
   const elem = feedElem.value?.$el
   if (
diff --git a/app/src/components/LazyRenderer.vue b/app/src/components/LazyRenderer.vue
index 92e5278b7..90ee04e79 100644
--- a/app/src/components/LazyRenderer.vue
+++ b/app/src/components/LazyRenderer.vue
@@ -28,8 +28,8 @@ const fixedMinHeight = ref(props.minHeight)
 const rootElem = ref<HTMLDivElement | null>(null)
 
 onMounted(() => {
-  let unrenderTimer: NodeJS.Timeout
-  let renderTimer: NodeJS.Timeout
+  let unrenderTimer: number
+  let renderTimer: number
 
   observer.value = new IntersectionObserver(
     (entries) => {
@@ -55,7 +55,7 @@ onMounted(() => {
 
         if (!props.unrender) {
           // Stop listening to intersections after first appearance if unrendering is not activated
-          this.observer.disconnect()
+          observer.value!.disconnect()
         }
       } else if (props.unrender) {
         clearTimeout(renderTimer)
diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 314ba52e0..c7d580d69 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -15,12 +15,14 @@ const props = withDefaults(
   },
 )
 
+type NodeSlot = {
+  [K in keyof TreeChildNode as TreeChildNode[K] extends Function
+    ? never
+    : K]: TreeChildNode[K]
+}
+
 defineSlots<{
-  default: (props: {
-    [K in keyof TreeChildNode as TreeChildNode[K] extends Function
-      ? never
-      : K]: TreeChildNode[K]
-  }) => any
+  default: (props: NodeSlot) => any
 }>()
 
 function getClasses(node: AnyTreeNode, i: number) {
@@ -42,7 +44,7 @@ function getClasses(node: AnyTreeNode, i: number) {
         :class="getClasses(node, i)"
         @click="$router.push(node.data.to)"
       >
-        <slot name="default" v-bind="node" />
+        <slot name="default" v-bind="node as NodeSlot" />
 
         <BButton
           v-if="node.height > 0"
@@ -61,8 +63,8 @@ function getClasses(node: AnyTreeNode, i: number) {
 
       <BCollapse
         v-if="node.height > 0"
-        v-model="node.data.opened"
         :id="'collapse-' + node.id"
+        v-model="node.data.opened"
       >
         <RecursiveListGroup
           :tree="node"
diff --git a/app/src/components/globals/TopBar.vue b/app/src/components/globals/TopBar.vue
index 61f679049..843d87583 100644
--- a/app/src/components/globals/TopBar.vue
+++ b/app/src/components/globals/TopBar.vue
@@ -13,8 +13,8 @@ const slots = defineSlots<{
 </script>
 
 <template>
-  <BButtonToolbar :aria-label="label" id="top-bar">
-    <div id="top-bar-left" class="top-bar-group" v-if="slots['group-left']">
+  <BButtonToolbar id="top-bar" :aria-label="label">
+    <div v-if="slots['group-left']" id="top-bar-left" class="top-bar-group">
       <slot name="group-left" />
     </div>
 
diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index b6b0a3838..944453a65 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -63,7 +63,6 @@ const visible = ref(!props.collapsed)
 
       <BButton
         v-if="collapsable"
-        @click="visible = !visible"
         size="sm"
         variant="outline-secondary"
         class="align-self-center ms-auto"
@@ -72,6 +71,7 @@ const visible = ref(!props.collapsed)
           collapsed: !visible,
           [`ms-${buttonUnbreak}-2`]: buttonUnbreak,
         }"
+        @click="visible = !visible"
       >
         <YIcon iname="chevron-right" />
         <span class="visually-hidden">{{ $t('words.collapse') }}</span>
@@ -88,7 +88,7 @@ const visible = ref(!props.collapsed)
       <slot name="default" />
     </template>
 
-    <template #footer v-if="slots['buttons']">
+    <template v-if="slots['buttons']" #footer>
       <slot name="buttons" />
     </template>
   </BCard>
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index 96fcae18e..42b175e69 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -103,9 +103,9 @@ const class_ = computed(() => {
       }
     }
 
-    .yuno-list-group-item-content {
-      // color: $black;
-    }
+    // .yuno-list-group-item-content {
+    //   color: $black;
+    // }
   }
 
   &-faded > * {
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index 2e2e3dbf2..f7faf275a 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -37,7 +37,7 @@ const model = defineModel<string | number | null>({
       return parseInt(value)
     }
     return value
-  }
+  },
 })
 
 const autocomplete = computed(() => {
diff --git a/app/src/components/globals/skeletons/CardFormSkeleton.vue b/app/src/components/globals/skeletons/CardFormSkeleton.vue
index 09000634b..8ff58bd56 100644
--- a/app/src/components/globals/skeletons/CardFormSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardFormSkeleton.vue
@@ -34,8 +34,8 @@ withDefaults(
 
         <BCol>
           <div
-            class="w100 d-flex justify-content-between"
             v-if="count % 2 === 0"
+            class="w100 d-flex justify-content-between"
           >
             <BSkeleton width="100%" height="38px" />
 
diff --git a/app/src/main.ts b/app/src/main.ts
index ece197e65..8f238788c 100644
--- a/app/src/main.ts
+++ b/app/src/main.ts
@@ -58,6 +58,7 @@ Object.values(globalComponentsModules).forEach(
     // defineOptions({
     //   name: 'FormField',
     // })
+    // @ts-expect-error
     app.component(component.__name || component.name, component)
   },
 )
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index e4cd456c7..75dd14dc1 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -318,8 +318,8 @@ async function uninstall() {
         </BButton>
 
         <BButton
-          v-b-modal.uninstall-modal
           id="uninstall"
+          v-b-modal.uninstall-modal
           variant="danger"
           :class="{ 'ms-auto': !app.url }"
         >
@@ -451,7 +451,7 @@ async function uninstall() {
 
             <BFormInput v-model="form.url.path" class="flex-grow-3" />
 
-            <BButton @click="changeUrl" variant="info" v-t="'save'" />
+            <BButton v-t="'save'" variant="info" @click="changeUrl" />
           </BInputGroup>
 
           <div v-else class="alert alert-warning">
@@ -470,9 +470,9 @@ async function uninstall() {
         >
           <template v-if="!app.isDefault.value">
             <BButton
-              @click="setAsDefaultDomain(false)"
               id="main-domain"
               variant="success"
+              @click="setAsDefaultDomain(false)"
             >
               <YIcon iname="star" /> {{ $t('app_make_default') }}
             </BButton>
@@ -480,9 +480,9 @@ async function uninstall() {
 
           <template v-else>
             <BButton
-              @click="setAsDefaultDomain(true)"
               id="main-domain"
               variant="warning"
+              @click="setAsDefaultDomain(true)"
             >
               <YIcon iname="star" /> {{ $t('app_make_not_default') }}
             </BButton>
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 38caf1945..ff91b8205 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -244,8 +244,8 @@ const performInstall = onSubmit(async (onError) => {
         </p>
 
         <CheckboxItem
-          v-model="force"
           id="force-install"
+          v-model="force"
           :label="$t('app.install.problems.ignore')"
         />
       </YAlert>
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index 6a77fa86c..d313072b6 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -121,10 +121,10 @@ const CheckboxList = createReusableTemplate<{
       <!-- SUBMIT -->
       <template #buttons>
         <BButton
-          @click="createBackup"
           v-t="'backup_action'"
           variant="success"
           :disabled="selected.length === 0"
+          @click="createBackup"
         />
       </template>
     </YCard>
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index b921382d1..ea0b5b1dd 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -105,12 +105,12 @@ function downloadBackup() {
     <YCard :title="$t('infos')" icon="info-circle" button-unbreak="sm">
       <template #header-buttons>
         <!-- DOWNLOAD ARCHIVE -->
-        <BButton @click="downloadBackup" size="sm" variant="success">
+        <BButton size="sm" variant="success" @click="downloadBackup">
           <YIcon iname="download" /> {{ $t('download') }}
         </BButton>
 
         <!-- DELETE ARCHIVE -->
-        <BButton @click="deleteBackup" size="sm" variant="danger">
+        <BButton size="sm" variant="danger" @click="deleteBackup">
           <YIcon iname="trash-o" /> {{ $t('delete') }}
         </BButton>
       </template>
@@ -138,24 +138,24 @@ function downloadBackup() {
     >
       <template #header-buttons>
         <BButton
+          v-t="'select_all'"
           size="sm"
           variant="outline-secondary"
           @click="toggleSelected()"
-          v-t="'select_all'"
         />
 
         <BButton
+          v-t="'select_none'"
           size="sm"
           variant="outline-secondary"
           @click="toggleSelected(false)"
-          v-t="'select_none'"
         />
       </template>
 
       <BFormCheckboxGroup
         v-if="hasBackupData"
-        v-model="selected"
         id="backup-select"
+        v-model="selected"
         name="backup-select"
         size="lg"
         aria-describedby="backup-restore-feedback"
@@ -170,7 +170,7 @@ function downloadBackup() {
             <div class="me-2">
               <h5 class="fw-bold">
                 {{ item.name }}
-                <small class="text-secondary" v-if="item.size">
+                <small v-if="item.size" class="text-secondary">
                   ({{ humanSize(item.size) }})
                 </small>
               </h5>
@@ -216,11 +216,11 @@ function downloadBackup() {
       <!-- SUBMIT -->
       <template v-if="hasBackupData" #buttons>
         <BButton
-          @click="restoreBackup"
+          v-t="'restore'"
           form="backup-restore"
           variant="success"
-          v-t="'restore'"
           :disabled="selected.length === 0"
+          @click="restoreBackup"
         />
       </template>
     </YCard>
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index fb497bcf5..6aa83d8d4 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -95,7 +95,7 @@ function shareLogs() {
   <div>
     <TopBar>
       <template #group-right>
-        <BButton @click="shareLogs" variant="success">
+        <BButton variant="success" @click="shareLogs">
           <YIcon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
         </BButton>
       </template>
@@ -129,18 +129,18 @@ function shareLogs() {
         <div class="">
           <BBadge
             v-if="report.noIssues"
-            variant="success"
             v-t="'everything_good'"
+            variant="success"
           />
           <BBadge
             v-if="report.errors"
-            variant="danger"
             v-t="{ path: 'issues', args: { count: report.errors } }"
+            variant="danger"
           />
           <BBadge
             v-if="report.warnings"
-            variant="warning"
             v-t="{ path: 'warnings', args: { count: report.warnings } }"
+            variant="warning"
           />
           <BBadge
             v-if="report.ignoreds"
@@ -194,10 +194,10 @@ function shareLogs() {
 
               <BButton
                 v-if="item.details"
+                v-b-toggle="`collapse-${report.id}-item-${i}`"
                 size="sm"
                 variant="outline-dark"
                 class="ms-lg-2 mt-2 mt-lg-0"
-                v-b-toggle="`collapse-${report.id}-item-${i}`"
               >
                 <YIcon iname="level-down" /> {{ $t('details') }}
               </BButton>
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index 72c4c133a..7ba9bee31 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -143,9 +143,9 @@ async function pushDnsChanges() {
       <!-- AUTO CONFIG CHANGES -->
       <template v-if="dnsChanges">
         <div
-          class="mb-3"
           v-for="{ action, records, icon, variant } in dnsChanges"
           :key="icon"
+          class="mb-3"
         >
           <h4 class="mt-4 mb-2">
             {{ action }}
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index ac1ed705f..436fff111 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -224,10 +224,10 @@ async function setAsDefaultDomain() {
     <BModal
       id="delete-modal"
       :title="$t('confirm_delete', { name: props.name })"
-      @ok="deleteDomain"
       header-bg-variant="warning"
       header-class="text-black"
       :body-class="{ 'd-none': !isMainDynDomain }"
+      @ok="deleteDomain"
     >
       <BFormGroup v-if="isMainDynDomain">
         <BFormCheckbox v-model="unsubscribeDomainFromDyndns">
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index f84c45a1f..ef79e1128 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -180,9 +180,9 @@ async function deleteGroup(name: string) {
         <!-- DELETE GROUP -->
         <BButton
           v-if="!group.isSpecial"
-          @click="deleteGroup(group.name)"
           size="sm"
           variant="danger"
+          @click="deleteGroup(group.name)"
         >
           <YIcon iname="trash-o" /> {{ $t('delete') }}
         </BButton>
@@ -198,7 +198,7 @@ async function deleteGroup(name: string) {
               <YIcon iname="info-circle" />
               {{ $t('group_explain_' + group.name) }}
             </p>
-            <p class="text-primary-emphasis" v-if="group.name === 'visitors'">
+            <p v-if="group.name === 'visitors'" class="text-primary-emphasis">
               <em>{{
                 $t('group_explain_visitors_needed_for_external_client')
               }}</em>
@@ -206,9 +206,9 @@ async function deleteGroup(name: string) {
           </template>
           <template v-if="group.name == 'admins' || !group.isSpecial">
             <TagsSelectizeItem
+              :id="group.name + '-users'"
               v-model="group.members"
               :options="userOptions"
-              :id="group.name + '-users'"
               :label="$t('group_add_member')"
               tag-icon="user"
               items-name="users"
@@ -225,9 +225,9 @@ async function deleteGroup(name: string) {
         </BCol>
         <BCol>
           <TagsSelectizeItem
+            :id="group.name + '-perms'"
             v-model="group.permissions"
             :options="permissionOptions"
-            :id="group.name + '-perms'"
             :label="$t('group_add_permission')"
             tag-icon="key-modern"
             items-name="permissions"
@@ -248,9 +248,9 @@ async function deleteGroup(name: string) {
 
           <BCol>
             <TagsSelectizeItem
+              :id="userName + '-perms'"
               v-model="userGroups[userName].permissions"
               :options="permissionOptions"
-              :id="userName + '-perms'"
               :label="$t('group_add_permission')"
               tag-icon="key-modern"
               items-name="permissions"
@@ -262,10 +262,10 @@ async function deleteGroup(name: string) {
       </template>
 
       <TagsSelectizeItem
+        id="user-groups"
         v-model="activeUserGroups"
         auto
         :options="userOptions"
-        id="user-groups"
         :label="$t('group_add_member')"
         no-tags
         items-name="users"
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index 640bf8318..df672e8ba 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -83,22 +83,22 @@ function shareLogs() {
       <template #header-buttons>
         <template v-if="infos.status === 'running'">
           <!-- RESTART SERVICE -->
-          <BButton @click="updateService('restart')" variant="warning">
+          <BButton variant="warning" @click="updateService('restart')">
             <YIcon iname="refresh" /> {{ $t('restart') }}
           </BButton>
 
           <!-- STOP SERVICE -->
           <BButton
             v-if="!isCritical"
-            @click="updateService('stop')"
             variant="danger"
+            @click="updateService('stop')"
           >
             <YIcon iname="warning" /> {{ $t('stop') }}
           </BButton>
         </template>
 
         <!-- START SERVICE -->
-        <BButton v-else @click="updateService('start')" variant="success">
+        <BButton v-else variant="success" @click="updateService('start')">
           <YIcon iname="play" /> {{ $t('start') }}
         </BButton>
       </template>
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index b7fe436eb..a3736ff2c 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -280,8 +280,8 @@ function onFormPortToggling() {
 
       <template #buttons>
         <BButton
-          @click="toggleUpnp"
           :variant="!upnpEnabled ? 'success' : 'danger'"
+          @click="toggleUpnp"
         >
           {{ $t(!upnpEnabled ? 'enable' : 'disable') }}
         </BButton>
diff --git a/app/src/views/tool/ToolLog.vue b/app/src/views/tool/ToolLog.vue
index 82fc71da0..f7115e3e8 100644
--- a/app/src/views/tool/ToolLog.vue
+++ b/app/src/views/tool/ToolLog.vue
@@ -113,7 +113,7 @@ function shareLogs() {
     <!-- LOGS CARD -->
     <YCard :title="$t('logs')" icon="file-text" no-body>
       <template #header-buttons>
-        <BButton @click="shareLogs" variant="success">
+        <BButton variant="success" @click="shareLogs">
           <YIcon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
         </BButton>
       </template>
@@ -127,7 +127,7 @@ function shareLogs() {
       </BButton>
 
       <pre class="log unselectable"><code v-html="logs" /></pre>
-      <BButton @click="shareLogs" variant="success" class="w-100 rounded-0">
+      <BButton variant="success" class="w-100 rounded-0" @click="shareLogs">
         <YIcon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
       </BButton>
     </YCard>
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index d9569f89b..4ac54b733 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -63,7 +63,7 @@ async function skipMigration(id: string) {
   <div>
     <!-- PENDING MIGRATIONS -->
     <YCard :title="$t('migrations_pending')" icon="cogs" no-body>
-      <template #header-buttons v-if="pending">
+      <template v-if="pending" #header-buttons>
         <BButton size="sm" variant="success" @click="runMigrations">
           <YIcon iname="play" /> {{ $t('run') }}
         </BButton>
@@ -109,8 +109,8 @@ async function skipMigration(id: string) {
             </BFormCheckbox>
             <BFormInvalidFeedback
               v-if="checked[id] === false"
-              :state="false"
               :id="'checkbox-feedback-' + number"
+              :state="false"
             >
               {{ $t('migrations_disclaimer_not_checked') }}
             </BFormInvalidFeedback>
@@ -133,7 +133,7 @@ async function skipMigration(id: string) {
         </span>
       </BCardBody>
 
-      <BListGroup flush v-else-if="done">
+      <BListGroup v-else-if="done" flush>
         <BListGroupItem v-for="{ number, description } in done" :key="number">
           {{ number }}. {{ description }}
         </BListGroupItem>
diff --git a/app/src/views/tool/ToolPower.vue b/app/src/views/tool/ToolPower.vue
index 485abc2bc..a4fd509a8 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -30,7 +30,7 @@ async function triggerAction(action: 'reboot' | 'shutdown') {
       :label="$t('tools_reboot')"
       label-for="reboot"
     >
-      <BButton @click="triggerAction('reboot')" variant="danger" id="reboot">
+      <BButton id="reboot" variant="danger" @click="triggerAction('reboot')">
         <YIcon iname="refresh" /> {{ $t('tools_reboot_btn') }}
       </BButton>
     </BFormGroup>
@@ -45,9 +45,9 @@ async function triggerAction(action: 'reboot' | 'shutdown') {
       label-for="shutdown"
     >
       <BButton
-        @click="triggerAction('shutdown')"
-        variant="danger"
         id="shutdown"
+        variant="danger"
+        @click="triggerAction('shutdown')"
       >
         <YIcon iname="power-off" /> {{ $t('tools_shutdown_btn') }}
       </BButton>
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 48cc4d59b..ac17bd19b 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -129,8 +129,8 @@ async function performSystemUpgrade() {
 
       <template v-if="system.length" #buttons>
         <BButton
-          variant="success"
           v-t="'system_upgrade_all_packages_btn'"
+          variant="success"
           @click="performSystemUpgrade()"
         />
       </template>
@@ -153,9 +153,9 @@ async function performSystemUpgrade() {
           </h5>
 
           <BButton
+            v-t="'system_upgrade_btn'"
             variant="success"
             size="sm"
-            v-t="'system_upgrade_btn'"
             @click="confirmAppsUpgrade(id)"
           />
         </BListGroupItem>
@@ -169,8 +169,8 @@ async function performSystemUpgrade() {
 
       <template v-if="apps.length" #buttons>
         <BButton
-          variant="success"
           v-t="'system_upgrade_all_applications_btn'"
+          variant="success"
           @click="confirmAppsUpgrade()"
         />
       </template>
@@ -210,9 +210,9 @@ async function performSystemUpgrade() {
         <div class="card-collapse-wrapper">
           <CardCollapse
             v-for="{ id, name, notif } in preUpgrade.apps"
+            :id="`${id}-notifs`"
             :key="`${id}-notifs`"
             :title="name"
-            :id="`${id}-notifs`"
             visible
             flush
           >
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index 43879b8cd..1c646bb7c 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -115,9 +115,9 @@ function deleteUser() {
       v-if="user"
       id="delete-modal"
       :title="$t('confirm_delete', { name })"
-      @ok="deleteUser"
       header-bg-variant="warning"
       header-class="text-black"
+      @ok="deleteUser"
     >
       <BFormGroup>
         <BFormCheckbox v-model="purge">

From fe81ebb3dcf03de5fb621f76065bfad917698964 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 11:33:22 +0200
Subject: [PATCH 196/275] chore: update components.d.ts

---
 app/components.d.ts | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/app/components.d.ts b/app/components.d.ts
index 28bcb1d06..84371e35e 100644
--- a/app/components.d.ts
+++ b/app/components.d.ts
@@ -7,21 +7,18 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    AbstractForm: typeof import('./src/components/globals/AbstractForm.vue')['default']
     AdressItem: typeof import('./src/components/globals/formItems/AdressItem.vue')['default']
-    BAlert: typeof import('bootstrap-vue-next')['BAlert']
-    BBadge: typeof import('bootstrap-vue-next')['BBadge']
+    AppCatalogSkeleton: typeof import('./src/components/globals/skeletons/AppCatalogSkeleton.vue')['default']
+    BAccordion: typeof import('bootstrap-vue-next')['BAccordion']
+    BAccordionItem: typeof import('bootstrap-vue-next')['BAccordionItem']
     BBreadcrumb: typeof import('bootstrap-vue-next')['BBreadcrumb']
     BBreadcrumbItem: typeof import('bootstrap-vue-next')['BBreadcrumbItem']
     BButton: typeof import('bootstrap-vue-next')['BButton']
-    BButtonGroup: typeof import('bootstrap-vue-next')['BButtonGroup']
     BButtonToolbar: typeof import('bootstrap-vue-next')['BButtonToolbar']
     BCard: typeof import('bootstrap-vue-next')['BCard']
     BCardBody: typeof import('bootstrap-vue-next')['BCardBody']
-    BCardFooter: typeof import('bootstrap-vue-next')['BCardFooter']
     BCardGroup: typeof import('bootstrap-vue-next')['BCardGroup']
     BCardHeader: typeof import('bootstrap-vue-next')['BCardHeader']
-    BCardText: typeof import('bootstrap-vue-next')['BCardText']
     BCardTitle: typeof import('bootstrap-vue-next')['BCardTitle']
     BCol: typeof import('bootstrap-vue-next')['BCol']
     BCollapse: typeof import('bootstrap-vue-next')['BCollapse']
@@ -29,7 +26,6 @@ declare module 'vue' {
     BDropdownDivider: typeof import('bootstrap-vue-next')['BDropdownDivider']
     BDropdownForm: typeof import('bootstrap-vue-next')['BDropdownForm']
     BDropdownGroup: typeof import('bootstrap-vue-next')['BDropdownGroup']
-    BDropdownItem: typeof import('bootstrap-vue-next')['BDropdownItem']
     BDropdownItemButton: typeof import('bootstrap-vue-next')['BDropdownItemButton']
     BDropdownText: typeof import('bootstrap-vue-next')['BDropdownText']
     BForm: typeof import('bootstrap-vue-next')['BForm']
@@ -38,12 +34,11 @@ declare module 'vue' {
     BFormGroup: typeof import('bootstrap-vue-next')['BFormGroup']
     BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
     BFormRadio: typeof import('bootstrap-vue-next')['BFormRadio']
-    BFormRadioGroup: typeof import('bootstrap-vue-next')['BFormRadioGroup']
     BFormSelect: typeof import('bootstrap-vue-next')['BFormSelect']
+    BFormSelectOption: typeof import('bootstrap-vue-next')['BFormSelectOption']
     BFormTag: typeof import('bootstrap-vue-next')['BFormTag']
     BFormTags: typeof import('bootstrap-vue-next')['BFormTags']
     BFormTextarea: typeof import('bootstrap-vue-next')['BFormTextarea']
-    BImg: typeof import('bootstrap-vue-next')['BImg']
     BInputGroup: typeof import('bootstrap-vue-next')['BInputGroup']
     BInputGroupText: typeof import('bootstrap-vue-next')['BInputGroupText']
     BLink: typeof import('bootstrap-vue-next')['BLink']
@@ -73,23 +68,28 @@ declare module 'vue' {
     CardInfoSkeleton: typeof import('./src/components/globals/skeletons/CardInfoSkeleton.vue')['default']
     CardListSkeleton: typeof import('./src/components/globals/skeletons/CardListSkeleton.vue')['default']
     CheckboxItem: typeof import('./src/components/globals/formItems/CheckboxItem.vue')['default']
-    ConfigPanel: typeof import('./src/components/ConfigPanel.vue')['default']
     ConfigPanels: typeof import('./src/components/ConfigPanels.vue')['default']
     DescriptionRow: typeof import('./src/components/globals/DescriptionRow.vue')['default']
     DisplayTextItem: typeof import('./src/components/globals/formItems/DisplayTextItem.vue')['default']
     ExplainWhat: typeof import('./src/components/globals/ExplainWhat.vue')['default']
     FileItem: typeof import('./src/components/globals/formItems/FileItem.vue')['default']
     FormField: typeof import('./src/components/globals/FormField.vue')['default']
+    FormFieldMultiple: typeof import('./src/components/globals/FormFieldMultiple.vue')['default']
     FormFieldReadonly: typeof import('./src/components/globals/FormFieldReadonly.vue')['default']
     InputItem: typeof import('./src/components/globals/formItems/InputItem.vue')['default']
     LazyRenderer: typeof import('./src/components/LazyRenderer.vue')['default']
     ListGroupSkeleton: typeof import('./src/components/globals/skeletons/ListGroupSkeleton.vue')['default']
+    MainLayout: typeof import('./src/components/layouts/MainLayout.vue')['default']
     MarkdownItem: typeof import('./src/components/globals/formItems/MarkdownItem.vue')['default']
     MessageListGroup: typeof import('./src/components/MessageListGroup.vue')['default']
+    ModalError: typeof import('./src/components/modals/ModalError.vue')['default']
+    ModalOverlay: typeof import('./src/components/modals/ModalOverlay.vue')['default']
+    ModalReconnecting: typeof import('./src/components/modals/ModalReconnecting.vue')['default']
+    ModalWaiting: typeof import('./src/components/modals/ModalWaiting.vue')['default']
+    ModalWarning: typeof import('./src/components/modals/ModalWarning.vue')['default']
     QueryHeader: typeof import('./src/components/QueryHeader.vue')['default']
     ReadOnlyAlertItem: typeof import('./src/components/globals/formItems/ReadOnlyAlertItem.vue')['default']
     RecursiveListGroup: typeof import('./src/components/RecursiveListGroup.vue')['default']
-    RoutableTabs: typeof import('./src/components/RoutableTabs.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SelectItem: typeof import('./src/components/globals/formItems/SelectItem.vue')['default']
@@ -97,7 +97,6 @@ declare module 'vue' {
     TagsSelectizeItem: typeof import('./src/components/globals/formItems/TagsSelectizeItem.vue')['default']
     TextAreaItem: typeof import('./src/components/globals/formItems/TextAreaItem.vue')['default']
     TopBar: typeof import('./src/components/globals/TopBar.vue')['default']
-    ViewBase: typeof import('./src/components/globals/ViewBase.vue')['default']
     ViewSearch: typeof import('./src/components/globals/ViewSearch.vue')['default']
     YAlert: typeof import('./src/components/globals/YAlert.vue')['default']
     YBreadcrumb: typeof import('./src/components/globals/YBreadcrumb.vue')['default']
@@ -107,9 +106,6 @@ declare module 'vue' {
     YSpinner: typeof import('./src/components/globals/YSpinner.vue')['default']
   }
   export interface ComponentCustomProperties {
-    vBModal: typeof import('bootstrap-vue-next')['vBModal']
-    vBPopover: typeof import('bootstrap-vue-next')['vBPopover']
-    vBToggle: typeof import('bootstrap-vue-next')['vBToggle']
     vBTooltip: typeof import('bootstrap-vue-next')['vBTooltip']
   }
 }

From 181c1e15999f7f0b93d4b6211f1b061464221744 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 11:43:34 +0200
Subject: [PATCH 197/275] chore: update package.json

---
 app/package.json | 38 ++++++++++++++++++++------------------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/app/package.json b/app/package.json
index 24dfcbf4f..8e5a31f78 100644
--- a/app/package.json
+++ b/app/package.json
@@ -13,35 +13,37 @@
     "lintfix": "prettier --write --list-different . && yarn lint:js --fix"
   },
   "dependencies": {
-    "@fontsource/fira-code": "^5.0.17",
-    "@fontsource/firago": "^5.0.7",
+    "@fontsource/fira-code": "^5.0.18",
+    "@fontsource/firago": "^5.0.11",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.11.0",
+    "@vueuse/core": "^10.11.1",
     "bootstrap": "^5.3.3",
-    "bootstrap-vue-next": "^0.23.2",
-    "date-fns": "^3.3.1",
+    "bootstrap-vue-next": "^0.24.7",
+    "date-fns": "^3.6.0",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
-    "vue": "^3.4.21",
-    "vue-i18n": "^9.10.1",
-    "vue-router": "^4.3.0",
+    "uuid": "^10.0.0",
+    "vue": "^3.4.37",
+    "vue-i18n": "^9.13.1",
+    "vue-router": "^4.4.3",
     "vue-showdown": "^4.2.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-vue": "^5.1.2",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.1",
-    "eslint": "^8.57.0",
+    "eslint": "^9.9.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.22.0",
-    "prettier": "^3.2.5",
-    "sass": "^1.71.1",
-    "typescript": "^5.4.5",
-    "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.1.4",
-    "vue-tsc": "^2.0.19"
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.27.0",
+    "prettier": "^3.3.3",
+    "sass": "^1.77.8",
+    "typescript": "^5.5.4",
+    "unplugin-vue-components": "^0.27.4",
+    "vite": "^5.4.0",
+    "vue-tsc": "^2.0.29"
   },
   "browserslist": [
     "> 1%",

From fcfcd767f0c8f7dee3b08fcf42fcb4ab576480a4 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 15 Aug 2024 17:56:06 +0200
Subject: [PATCH 198/275] fix: scss text-$variant contrast, font-weight and
 outlined button variant text to black

---
 app/src/scss/_variables.scss | 65 ++++++++++++++++++++++++++++++++----
 app/src/scss/main.scss       | 26 +++++++++++++--
 2 files changed, 82 insertions(+), 9 deletions(-)

diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index bf6ab798d..48843c4f6 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -34,9 +34,9 @@ $gray-100: #fafafa;
 $gray-200: #ededed;
 $gray-300: #e3e3e3;
 $gray-400: #d4d4d4;
-$gray-500:  	#b5b5b5;
+$gray-500: #b5b5b5;
 $gray-600: #757575;
-$gray-700:  	#4f4f4f;
+$gray-700: #4f4f4f;
 $gray-800: #3b3b3b;
 $gray-900: #262626;
 $black: #202020;
@@ -73,7 +73,7 @@ $theme-colors: (
   'best': $purple,
 );
 
-$min-contrast-ratio: 7;
+// $min-contrast-ratio: 7;
 
 $spacer: 1rem;
 
@@ -91,9 +91,9 @@ $component-active-color: $black;
 // Adapt font-weight based on fira
 $font-weight-light: 200;
 $font-weight-normal: 400;
-$font-weight-medium: 500;
+$font-weight-medium: 400;
 $font-weight-semibold: 500;
-$font-weight-bold: 700;
+$font-weight-bold: 500;
 
 $headings-font-weight: 500;
 
@@ -114,9 +114,9 @@ $font-family-sans-serif:
   'Apple Color Emoji',
   'Segoe UI Emoji',
   'Segoe UI Symbol',
-  'Noto Color Emoji' !default;
+  'Noto Color Emoji';
 $font-family-monospace: 'Fira Code', SFMono-Regular, Menlo, Monaco, Consolas,
-  'Liberation Mono', 'Courier New', monospace !default;
+  'Liberation Mono', 'Courier New', monospace;
 
 $h2-font-size: $font-size-base * 1.5;
 $h3-font-size: $font-size-base * 1.4;
@@ -126,9 +126,60 @@ $h5-font-size: $font-size-base * 1.1;
 $list-group-item-padding-y: $spacer * 0.75;
 $modal-md: 600px;
 
+$form-feedback-invalid-color: shade-color($danger, 20%);
+
 // Import default variables after the above setup to compute all other variables.
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/variables-dark';
+
+// Hacky way to have different text colors
+@function custom-text-color($identifier, $target) {
+  @each $variant
+    in ('primary', 'secondary', 'success', 'info', 'warning', 'danger', 'best')
+  {
+    @if $identifier == $variant {
+      @return rgb(var(--#{$prefix}#{$identifier}-text-rgb));
+    }
+  }
+  @return rgba-css-var($identifier, $target);
+}
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value') !default;
+$utilities-text: map-merge(
+  $theme-colors-rgb,
+  (
+    'black': to-rgb($black),
+    'white': to-rgb($white),
+    'body': to-rgb($body-color),
+  )
+);
+$utilities-text-colors: map-loop(
+  $utilities-text,
+  custom-text-color,
+  '$key',
+  'text'
+);
+
+// Altered text color variant for light theme
+$light-text-colors: (
+  'primary': shade-color($primary, 30%),
+  'secondary': $secondary,
+  'success': shade-color($success, 45%),
+  'info': shade-color($info, 45%),
+  'warning': shade-color($warning, 50%),
+  'danger': shade-color($danger, 20%),
+  'best': shade-color($purple, 15%),
+);
+// Altered text color variant for dark theme
+$dark-text-colors: (
+  'primary': $primary,
+  'secondary': tint-color($secondary, 20%),
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'danger': $danger,
+  'best': $purple,
+);
+
 @import '~bootstrap/scss/maps';
 @import '~bootstrap/scss/mixins';
 @import '~bootstrap/scss/utilities';
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 9c0e05708..949260866 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -22,7 +22,7 @@
 @import '~bootstrap/scss/nav';
 @import '~bootstrap/scss/navbar';
 @import '~bootstrap/scss/card';
-@import "~bootstrap/scss/accordion";
+@import '~bootstrap/scss/accordion';
 @import '~bootstrap/scss/breadcrumb';
 // @import "~bootstrap/scss/pagination";
 @import '~bootstrap/scss/badge';
@@ -53,9 +53,31 @@
 @import 'font';
 @import '~fork-awesome/scss/fork-awesome.scss';
 
-
 // Style overrides happens after dependencies imports
 
+:root,
+[data-bs-theme='light'] {
+  @each $color, $value in $light-text-colors {
+    --#{$prefix}#{$color}-text-rgb: #{to-rgb($value)};
+  }
+  @each $color, $value in $theme-colors {
+    .btn-outline-#{$color} {
+      --bs-btn-color: $dark;
+    }
+  }
+}
+
+[data-bs-theme='dark'] {
+  @each $color, $value in $dark-text-colors {
+    --#{$prefix}#{$color}-text-rgb: #{to-rgb($value)};
+  }
+  @each $color, $value in $theme-colors {
+    .btn-outline-#{$color} {
+      --bs-btn-color: $light;
+    }
+  }
+}
+
 html {
   min-height: 100vh;
 }

From 42e97c749a17cec522955600fef4fcc6b89cb043 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 16 Aug 2024 00:24:39 +0200
Subject: [PATCH 199/275] fix: improve skeletons

---
 .../globals/skeletons/AppCatalogSkeleton.vue  |  56 +++++-----
 .../globals/skeletons/BSkeleton.vue           |  14 +--
 .../globals/skeletons/BSkeletonWrapper.vue    |  90 +++++++++++++++-
 .../globals/skeletons/CardFormSkeleton.vue    | 100 +++++++++---------
 .../globals/skeletons/CardInfoSkeleton.vue    |  28 ++---
 .../globals/skeletons/CardListSkeleton.vue    |  41 +++----
 .../globals/skeletons/ListGroupSkeleton.vue   |  19 ++--
 app/src/components/layouts/MainLayout.vue     |   2 +-
 app/src/router/routes.ts                      |   8 +-
 9 files changed, 222 insertions(+), 136 deletions(-)

diff --git a/app/src/components/globals/skeletons/AppCatalogSkeleton.vue b/app/src/components/globals/skeletons/AppCatalogSkeleton.vue
index 06792016d..9bc44bd9e 100644
--- a/app/src/components/globals/skeletons/AppCatalogSkeleton.vue
+++ b/app/src/components/globals/skeletons/AppCatalogSkeleton.vue
@@ -3,37 +3,39 @@ import { randint } from '@/helpers/commons'
 </script>
 
 <template>
-  <BInputGroup class="w-100 mb-4">
-    <BInputGroupText>
-      <YIcon iname="search" />
-    </BInputGroupText>
+  <BSkeletonWrapper button search>
+    <BInputGroup class="w-100 mb-4">
+      <BInputGroupText>
+        <YIcon iname="search" />
+      </BInputGroupText>
 
-    <BFormInput :disabled="true" />
-  </BInputGroup>
+      <BFormInput :disabled="true" />
+    </BInputGroup>
 
-  <BCardGroup deck>
-    <BCard v-for="i in 15" :key="i" no-body>
-      <div class="d-flex w-100 mt-auto">
-        <BSkeleton width="30px" height="30px" class="me-2 ms-auto" />
+    <BCardGroup deck>
+      <BCard v-for="i in 15" :key="i" no-body>
+        <div class="d-flex w-100 mt-auto">
+          <BSkeleton width="30px" height="30px" class="me-2 ms-auto" />
+          <BSkeleton
+            :width="randint(30, 70) + '%'"
+            height="30px"
+            class="me-auto"
+          />
+        </div>
         <BSkeleton
-          :width="randint(30, 70) + '%'"
-          height="30px"
-          class="me-auto"
+          v-if="randint(0, 1)"
+          :width="randint(30, 85) + '%'"
+          height="24px"
+          class="mx-auto"
         />
-      </div>
-      <BSkeleton
-        v-if="randint(0, 1)"
-        :width="randint(30, 85) + '%'"
-        height="24px"
-        class="mx-auto"
-      />
-      <BSkeleton
-        :width="randint(30, 85) + '%'"
-        height="24px"
-        class="mx-auto mb-auto"
-      />
-    </BCard>
-  </BCardGroup>
+        <BSkeleton
+          :width="randint(30, 85) + '%'"
+          height="24px"
+          class="mx-auto mb-auto"
+        />
+      </BCard>
+    </BCardGroup>
+  </BSkeletonWrapper>
 </template>
 
 <style lang="scss" scoped>
diff --git a/app/src/components/globals/skeletons/BSkeleton.vue b/app/src/components/globals/skeletons/BSkeleton.vue
index 061289f06..d8a023e7e 100644
--- a/app/src/components/globals/skeletons/BSkeleton.vue
+++ b/app/src/components/globals/skeletons/BSkeleton.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-defineProps<{
-  height: string
-  width: string
-}>()
+withDefaults(defineProps<{ height?: string; width?: string }>(), {
+  height: '26px',
+  width: '100%',
+})
 </script>
 
 <template>
@@ -13,7 +13,7 @@ defineProps<{
 .b-skeleton {
   position: relative;
   overflow: hidden;
-  background-color: $gray-200;
+  background-color: var(--bs-secondary-bg);
   cursor: wait;
 
   height: $font-size-base;
@@ -22,9 +22,5 @@ defineProps<{
   @if $enable-rounded {
     border-radius: 0.25rem;
   }
-
-  [data-bs-theme='dark'] & {
-    background-color: $gray-800;
-  }
 }
 </style>
diff --git a/app/src/components/globals/skeletons/BSkeletonWrapper.vue b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
index 59680c5bc..b080c530b 100644
--- a/app/src/components/globals/skeletons/BSkeletonWrapper.vue
+++ b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
@@ -1,16 +1,96 @@
 <script setup lang="ts">
-withDefaults(defineProps<{ loading?: boolean }>(), { loading: false })
+withDefaults(defineProps<{ button: boolean; search: boolean }>(), {
+  button: false,
+  search: false,
+})
+
+const slots = defineSlots<{
+  default: any
+}>()
 </script>
 
 <template>
-  <div v-if="loading" class="b-skeleton-wrapper">
-    <slot name="loading" />
+  <div class="y-skeleton-wrapper">
+    <div class="visually-hidden">
+      <!-- FIXME add `loading` translation -->
+      {{ $t('loading') }}
+    </div>
+
+    <div v-if="search || button" id="top-bar-skeleton" class="d-flex mb-3">
+      <div id="search-skeleton" class="top-bar-group-skeleton">
+        <BInputGroup v-if="search" class="pe-none" aria-hidden="true">
+          <BInputGroupText>
+            <YIcon iname="search" />
+          </BInputGroupText>
+
+          <BFormInput :disabled="true" tabindex="-1" />
+        </BInputGroup>
+      </div>
+
+      <div v-if="button" id="button-skeleton" class="top-bar-group-skeleton">
+        <BSkeleton height="36px" class="ms-3-md" />
+      </div>
+    </div>
+
+    <slot name="default" />
   </div>
-  <slot v-else name="default" />
 </template>
 
 <style scoped lang="scss">
-.b-skeleton-wrapper {
+.y-skeleton-wrapper {
   cursor: wait;
+
+  #top-bar-skeleton {
+    flex-wrap: wrap-reverse;
+
+    .top-bar-group-skeleton {
+      margin-bottom: 1rem;
+    }
+
+    #button-skeleton {
+      width: 170px;
+    }
+
+    @include media-breakpoint-down(sm) {
+      .top-bar-group-skeleton {
+        flex-direction: column-reverse;
+      }
+      #button-skeleton {
+        width: 100%;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      flex-direction: column-reverse;
+
+      #button-skeleton {
+        margin-bottom: 0.75rem;
+
+        :deep(> *) {
+          margin-bottom: 0.25rem;
+        }
+      }
+
+      .top-bar-group-skeleton {
+        justify-content: space-between;
+        flex-wrap: wrap;
+      }
+    }
+
+    @include media-breakpoint-up(md) {
+      #search-skeleton {
+        flex-grow: 2;
+        max-width: 50%;
+      }
+
+      #button-skeleton {
+        margin-left: auto;
+      }
+
+      :deep(.btn) {
+        margin-left: 0.5rem;
+      }
+    }
+  }
 }
 </style>
diff --git a/app/src/components/globals/skeletons/CardFormSkeleton.vue b/app/src/components/globals/skeletons/CardFormSkeleton.vue
index 8ff58bd56..16ab79448 100644
--- a/app/src/components/globals/skeletons/CardFormSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardFormSkeleton.vue
@@ -2,59 +2,55 @@
 import { randint } from '@/helpers/commons'
 import type { Cols } from '@/types/commons'
 
-withDefaults(
-  defineProps<{
-    itemCount?: number
-    cols: Cols
-  }>(),
-  {
-    itemCount: 5,
-    cols: () => ({ md: 4, lg: 2 }),
-  },
-)
+withDefaults(defineProps<{ itemCount?: number; cols: Cols }>(), {
+  itemCount: 5,
+  cols: () => ({ md: 4, lg: 2 }),
+})
 </script>
 
 <template>
-  <BCard>
-    <template #header>
-      <BSkeleton width="30%" height="36px" class="m-0" />
-    </template>
-
-    <template v-for="count in itemCount" :key="count">
-      <BRow :class="{ 'd-block': cols === null }">
-        <BCol v-bind="cols">
-          <div style="height: 38px" class="d-flex align-items-center">
-            <BSkeleton
-              class="m-0"
-              :width="randint(45, 100) + '%'"
-              height="24px"
-            />
-          </div>
-        </BCol>
-
-        <BCol>
-          <div
-            v-if="count % 2 === 0"
-            class="w100 d-flex justify-content-between"
-          >
-            <BSkeleton width="100%" height="38px" />
-
-            <BSkeleton width="38px" height="38px" class="ms-2" />
-          </div>
-
-          <BSkeleton v-else width="100%" height="38px" />
-
-          <BSkeleton :width="randint(15, 35) + '%'" height="19px" />
-        </BCol>
-      </BRow>
-
-      <hr />
-    </template>
-
-    <template #footer>
-      <div class="d-flex justify-content-end w-100">
-        <BSkeleton width="100px" height="38px" />
-      </div>
-    </template>
-  </BCard>
+  <BSkeletonWrapper>
+    <BCard>
+      <template #header>
+        <BSkeleton width="30%" height="26px" class="m-0" />
+      </template>
+
+      <template v-for="count in itemCount" :key="count">
+        <BRow :class="{ 'd-block': cols === null }">
+          <BCol v-bind="cols">
+            <div style="height: 38px" class="d-flex align-items-center">
+              <BSkeleton
+                class="m-0"
+                :width="randint(45, 100) + '%'"
+                height="24px"
+              />
+            </div>
+          </BCol>
+
+          <BCol>
+            <div
+              v-if="count % 2 === 0"
+              class="w100 d-flex justify-content-between"
+            >
+              <BSkeleton width="100%" height="38px" />
+
+              <BSkeleton width="38px" height="38px" class="ms-2" />
+            </div>
+
+            <BSkeleton v-else width="100%" height="38px" />
+
+            <BSkeleton :width="randint(15, 35) + '%'" height="19px" />
+          </BCol>
+        </BRow>
+
+        <hr />
+      </template>
+
+      <template #footer>
+        <div class="d-flex justify-content-end w-100">
+          <BSkeleton width="100px" height="36px" />
+        </div>
+      </template>
+    </BCard>
+  </BSkeletonWrapper>
 </template>
diff --git a/app/src/components/globals/skeletons/CardInfoSkeleton.vue b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
index 3087d8d57..f60a5cef3 100644
--- a/app/src/components/globals/skeletons/CardInfoSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
@@ -5,18 +5,20 @@ withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
 </script>
 
 <template>
-  <BCard>
-    <template #header>
-      <BSkeleton width="30%" height="36px" class="m-0" />
-    </template>
+  <BSkeletonWrapper>
+    <BCard>
+      <template #header>
+        <BSkeleton width="30%" height="36px" class="m-0" />
+      </template>
 
-    <BRow v-for="i in itemCount" :key="i" no-gutters>
-      <BCol cols="5" md="3" xl="3">
-        <BSkeleton :width="randint(45, 95) + '%'" height="19px" />
-      </BCol>
-      <BCol>
-        <BSkeleton :width="randint(10, 60) + '%'" height="19px" />
-      </BCol>
-    </BRow>
-  </BCard>
+      <BRow v-for="i in itemCount" :key="i" no-gutters>
+        <BCol cols="5" md="3" xl="3">
+          <BSkeleton :width="randint(45, 95) + '%'" height="19px" />
+        </BCol>
+        <BCol>
+          <BSkeleton :width="randint(10, 60) + '%'" height="19px" />
+        </BCol>
+      </BRow>
+    </BCard>
+  </BSkeletonWrapper>
 </template>
diff --git a/app/src/components/globals/skeletons/CardListSkeleton.vue b/app/src/components/globals/skeletons/CardListSkeleton.vue
index 4984cf1d0..c388d69c7 100644
--- a/app/src/components/globals/skeletons/CardListSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardListSkeleton.vue
@@ -1,26 +1,31 @@
 <script setup lang="ts">
 import { randint } from '@/helpers/commons'
 
-withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
+withDefaults(defineProps<{ itemCount: number; search: boolean }>(), {
+  itemCount: 5,
+  search: false,
+})
 </script>
 
 <template>
-  <BCard no-body>
-    <template #header>
-      <BSkeleton width="30%" height="36px" class="m-0" />
-    </template>
+  <BSkeletonWrapper :search="search">
+    <BCard no-body>
+      <template #header>
+        <BSkeleton width="30%" height="36px" class="m-0" />
+      </template>
 
-    <BListGroup flush>
-      <BListGroupItem v-for="count in itemCount" :key="count" class="d-flex">
-        <div style="width: 20%">
-          <BSkeleton
-            :width="randint(50, 100) + '%'"
-            height="24px"
-            class="me-3"
-          />
-        </div>
-        <BSkeleton :width="randint(30, 80) + '%'" height="24px" class="m-0" />
-      </BListGroupItem>
-    </BListGroup>
-  </BCard>
+      <BListGroup flush>
+        <BListGroupItem v-for="count in itemCount" :key="count" class="d-flex">
+          <div style="width: 20%">
+            <BSkeleton
+              :width="randint(50, 100) + '%'"
+              height="24px"
+              class="me-3"
+            />
+          </div>
+          <BSkeleton :width="randint(30, 80) + '%'" height="24px" class="m-0" />
+        </BListGroupItem>
+      </BListGroup>
+    </BCard>
+  </BSkeletonWrapper>
 </template>
diff --git a/app/src/components/globals/skeletons/ListGroupSkeleton.vue b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
index 3e4d24924..2e325bf61 100644
--- a/app/src/components/globals/skeletons/ListGroupSkeleton.vue
+++ b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
@@ -1,14 +1,19 @@
 <script setup lang="ts">
 import { randint } from '@/helpers/commons'
 
-withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
+withDefaults(
+  defineProps<{ itemCount: number; button: boolean; search: boolean }>(),
+  { itemCount: 5, button: true, search: true },
+)
 </script>
 
 <template>
-  <BListGroup>
-    <BListGroupItem v-for="count in itemCount" :key="count">
-      <BSkeleton :width="randint(15, 25) + '%'" height="24px" class="mb-2" />
-      <BSkeleton :width="randint(25, 50) + '%'" height="24px" class="m-0" />
-    </BListGroupItem>
-  </BListGroup>
+  <BSkeletonWrapper :button="button" :search="search">
+    <BListGroup>
+      <BListGroupItem v-for="count in itemCount" :key="count">
+        <BSkeleton :width="randint(15, 25) + '%'" height="24px" class="mb-2" />
+        <BSkeleton :width="randint(25, 50) + '%'" height="24px" class="m-0" />
+      </BListGroupItem>
+    </BListGroup>
+  </BSkeletonWrapper>
 </template>
diff --git a/app/src/components/layouts/MainLayout.vue b/app/src/components/layouts/MainLayout.vue
index 0afe3eb23..74c90f5ce 100644
--- a/app/src/components/layouts/MainLayout.vue
+++ b/app/src/components/layouts/MainLayout.vue
@@ -77,7 +77,7 @@ const modalComponent = computed(() => {
         <Component :is="Component" :class="classes" />
         <template #fallback>
           <template v-for="({ is, ...props }, i) in skeletons" :key="i">
-            <Component :is="is" v-bind="props" />
+            <Component :is="is" v-bind="props" :class="{ 'mt-3': i !== 0 }" />
           </template>
         </template>
       </Suspense>
diff --git a/app/src/router/routes.ts b/app/src/router/routes.ts
index 8a869327d..36d3e44c0 100644
--- a/app/src/router/routes.ts
+++ b/app/src/router/routes.ts
@@ -239,7 +239,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'services' },
       breadcrumb: ['tool-list', 'service-list'],
-      skeleton: 'ListGroupSkeleton',
+      skeleton: { is: 'ListGroupSkeleton', button: false },
     },
   },
   {
@@ -250,7 +250,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { param: 'name' },
       breadcrumb: ['tool-list', 'service-list', 'service-info'],
-      skeleton: 'CardInfoSkeleton',
+      skeleton: ['CardInfoSkeleton', 'CardInfoSkeleton'],
     },
   },
 
@@ -273,7 +273,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { trad: 'logs' },
       breadcrumb: ['tool-list', 'tool-logs'],
-      skeleton: 'CardListSkeleton',
+      skeleton: { is: 'CardListSkeleton', search: true },
     },
   },
   {
@@ -284,7 +284,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       args: { param: 'name' },
       breadcrumb: ['tool-list', 'tool-logs', 'tool-log'],
-      skeleton: 'CardInfoSkeleton',
+      skeleton: ['CardInfoSkeleton', 'CardInfoSkeleton'],
     },
   },
   {

From f9b4fd4188694eb6b033a9a1826b3f7090a000a2 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 16 Aug 2024 00:25:37 +0200
Subject: [PATCH 200/275] chore: rm no longer used CardButtonsSkeleto

---
 .../globals/skeletons/CardButtonsSkeleton.vue | 24 -------------------
 1 file changed, 24 deletions(-)
 delete mode 100644 app/src/components/globals/skeletons/CardButtonsSkeleton.vue

diff --git a/app/src/components/globals/skeletons/CardButtonsSkeleton.vue b/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
deleted file mode 100644
index f8bf1038d..000000000
--- a/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { randint } from '@/helpers/commons'
-
-withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 4 })
-</script>
-
-<template>
-  <BCard>
-    <template #header>
-      <BSkeleton width="30%" height="36px" class="m-0" />
-    </template>
-
-    <div v-for="count in itemCount" :key="count">
-      <template v-if="randint(0, 1)">
-        <BSkeleton width="100%" height="24px" />
-        <BSkeleton :width="randint(15, 60) + '%'" height="24px" />
-      </template>
-      <BSkeleton v-else :width="randint(45, 100) + '%'" height="24px" />
-
-      <BSkeleton :width="randint(20, 30) + '%'" height="38px" class="mt-3" />
-      <hr />
-    </div>
-  </BCard>
-</template>

From 4c9938e23f2fa2f21e37422db0971363ea95ecda Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 16 Aug 2024 12:11:24 +0200
Subject: [PATCH 201/275] feat: add quick add item dropdown in home

---
 app/src/components/layouts/MainLayout.vue | 31 +++++++++++++++++++++--
 app/src/scss/_variables.scss              |  1 +
 app/src/views/HomeView.vue                |  6 -----
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/app/src/components/layouts/MainLayout.vue b/app/src/components/layouts/MainLayout.vue
index 74c90f5ce..91e4258c8 100644
--- a/app/src/components/layouts/MainLayout.vue
+++ b/app/src/components/layouts/MainLayout.vue
@@ -2,6 +2,7 @@
 import { createReusableTemplate } from '@vueuse/core'
 import type { VNode } from 'vue'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import {
@@ -13,8 +14,9 @@ import {
 import { useInfos } from '@/composables/useInfos'
 import { useRequests } from '@/composables/useRequests'
 import { useSettings } from '@/composables/useSettings'
-import type { Skeleton, VueClass } from '@/types/commons'
+import type { CustomRoute, Skeleton, VueClass } from '@/types/commons'
 
+const { t } = useI18n()
 const router = useRouter()
 const { routerKey } = useInfos()
 const { reconnecting, currentRequest, dismissModal } = useRequests()
@@ -25,6 +27,13 @@ const RootView = createReusableTemplate<{
   classes: VueClass
 }>()
 
+const quickAddItems: CustomRoute[] = [
+  { text: t('users_new'), to: { name: 'user-create' } },
+  { text: t('domain_add'), to: { name: 'domain-add' } },
+  { text: t('group_new'), to: { name: 'group-create' } },
+  { text: t('install'), to: { name: 'app-catalog' } },
+]
+
 const skeletons = computed<Skeleton[]>(() => {
   const skeleton = router.currentRoute.value.meta.skeleton ?? 'CardInfoSkeleton'
   const skeletons = Array.isArray(skeleton) ? skeleton : [skeleton]
@@ -88,7 +97,25 @@ const modalComponent = computed(() => {
     </BOverlay>
   </RootView.define>
 
-  <YBreadcrumb />
+  <div class="d-flex align-items-center mt-2 mb-4">
+    <YBreadcrumb />
+
+    <BDropdown
+      v-if="router.currentRoute.value.name === 'home'"
+      variant="success"
+      class="ms-auto"
+    >
+      <template #button-content>
+        <!-- FIXME i18n `quick_add` -->
+        <YIcon iname="plus" /> {{ t('quick_add') }}
+      </template>
+      <template v-for="(item, i) in quickAddItems" :key="i">
+        <BDropdownItem :to="item.to">
+          <YIcon iname="plus" /> {{ item.text }}
+        </BDropdownItem>
+      </template>
+    </BDropdown>
+  </div>
 
   <main id="main">
     <!-- The `key` on RouterView make sure that if a link points to a page that
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index 48843c4f6..e429cc763 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -127,6 +127,7 @@ $list-group-item-padding-y: $spacer * 0.75;
 $modal-md: 600px;
 
 $form-feedback-invalid-color: shade-color($danger, 20%);
+$breadcrumb-margin-bottom: 0;
 
 // Import default variables after the above setup to compute all other variables.
 @import '~bootstrap/scss/variables';
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index 880d1880a..f8c1d67ae 100644
--- a/app/src/views/HomeView.vue
+++ b/app/src/views/HomeView.vue
@@ -29,9 +29,3 @@ const menu = [
     </BListGroup>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.home {
-  margin-top: 2rem;
-}
-</style>

From 55d81708c1cb9c4ffb01d572b8a20745cfe7b430 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sat, 17 Aug 2024 00:55:02 +0200
Subject: [PATCH 202/275] fix: buttons should not be rotated + rename prop
 collapsable -> collapsible

---
 app/src/components/globals/YCard.vue          | 10 +++++-----
 app/src/scss/main.scss                        | 16 +++++++++-------
 app/src/views/app/_AppIntegrationAndLinks.vue |  4 ++--
 app/src/views/diagnosis/DiagnosisView.vue     |  2 +-
 app/src/views/group/GroupList.vue             |  4 ++--
 app/src/views/tool/ToolMigrations.vue         |  2 +-
 6 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index 944453a65..088f3d29d 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -10,7 +10,7 @@ const props = withDefaults(
     title?: string
     titleTag?: string
     icon?: string
-    collapsable?: boolean
+    collapsible?: boolean
     collapsed?: boolean
     buttonUnbreak?: Breakpoint
   }>(),
@@ -21,7 +21,7 @@ const props = withDefaults(
     title: undefined,
     titleTag: 'h2',
     icon: undefined,
-    collapsable: false,
+    collapsible: false,
     collapsed: false,
     buttonUnbreak: 'md',
   },
@@ -39,7 +39,7 @@ const visible = ref(!props.collapsed)
 </script>
 
 <template>
-  <BCard :no-body="collapsable ? true : noBody" :class="{ 'border-0': asTab }">
+  <BCard :no-body="collapsible ? true : noBody" :class="{ 'border-0': asTab, 'collapsible': collapsible }">
     <template v-if="!asTab" #header>
       <div class="w-100 d-flex align-items-center flex-wrap custom-header">
         <slot name="header">
@@ -62,7 +62,7 @@ const visible = ref(!props.collapsed)
       </div>
 
       <BButton
-        v-if="collapsable"
+        v-if="collapsible"
         size="sm"
         variant="outline-secondary"
         class="align-self-center ms-auto"
@@ -78,7 +78,7 @@ const visible = ref(!props.collapsed)
       </BButton>
     </template>
 
-    <BCollapse v-if="collapsable" :visible="visible">
+    <BCollapse v-if="collapsible" :visible="visible">
       <slot v-if="noBody" name="default" />
       <BCardBody v-else>
         <slot name="default" />
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 949260866..ba1b4661b 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -222,13 +222,15 @@ h3.card-title {
 }
 
 // collapse icon
-.not-collapsed > .icon {
-  transform: rotate(-90deg);
-}
-.collapsed > .icon {
-  transform: rotate(90deg);
-  position: relative;
-  top: 2px;
+.collapsible {
+  .not-collapsed > .icon {
+    transform: rotate(-90deg);
+  }
+  .collapsed > .icon {
+    transform: rotate(90deg);
+    position: relative;
+    top: 2px;
+  }
 }
 
 // limit the size of toggle dropdown buttons to a square
diff --git a/app/src/views/app/_AppIntegrationAndLinks.vue b/app/src/views/app/_AppIntegrationAndLinks.vue
index 130f382ed..c573994a2 100644
--- a/app/src/views/app/_AppIntegrationAndLinks.vue
+++ b/app/src/views/app/_AppIntegrationAndLinks.vue
@@ -12,7 +12,7 @@ defineProps<{
     v-if="integration"
     id="app-integration"
     :title="$t('app.integration.title')"
-    collapsable
+    collapsible
     collapsed
     no-body
   >
@@ -45,7 +45,7 @@ defineProps<{
     id="app-links"
     icon="link"
     :title="$t('app.links.title')"
-    collapsable
+    collapsible
     collapsed
     no-body
   >
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 6aa83d8d4..4a253d4d7 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -117,7 +117,7 @@ function shareLogs() {
     <YCard
       v-for="report in reports"
       :key="report.id"
-      collapsable
+      collapsible
       :collapsed="report.noIssues"
       no-body
       button-unbreak="lg"
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index ef79e1128..18b02c833 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -168,7 +168,7 @@ async function deleteGroup(name: string) {
     <YCard
       v-for="group in filteredGroups"
       :key="group.name"
-      collapsable
+      collapsible
       :title="
         group.isSpecial
           ? $t('group_' + group.name)
@@ -239,7 +239,7 @@ async function deleteGroup(name: string) {
     </YCard>
 
     <!-- USER GROUPS CARD -->
-    <YCard collapsable :title="$t('group_specific_permissions')" icon="group">
+    <YCard collipsable :title="$t('group_specific_permissions')" icon="group">
       <template v-for="userName in activeUserGroups" :key="userName">
         <BRow>
           <BCol md="3" lg="2">
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index 4ac54b733..8e12a9638 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -123,7 +123,7 @@ async function skipMigration(id: string) {
     <YCard
       :title="$t('migrations_done')"
       icon="cogs"
-      collapsable
+      collapsible
       collapsed
       no-body
     >

From eb0597b5448b75c8d64644d1c7b55c8ceea55786 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sat, 17 Aug 2024 10:01:35 +0200
Subject: [PATCH 203/275] fix: misc styling fixes

---
 app/src/App.vue                            |  2 +-
 app/src/components/ConfigPanels.vue        |  2 +-
 app/src/scss/_variables.scss               | 10 ++++++----
 app/src/views/_partials/HistoryConsole.vue | 12 +++++++-----
 app/src/views/tool/ToolFirewall.vue        |  5 +----
 5 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index 45ad9d325..ada09b31b 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -86,7 +86,7 @@ onMounted(() => {
 
         <BNavbarNav class="ms-auto">
           <li class="nav-item">
-            <BButton :href="ssoLink" variant="primary" size="sm" block>
+            <BButton :href="ssoLink" variant="primary" size="sm" class="d-block">
               {{ $t('user_interface_link') }} <YIcon iname="user" />
             </BButton>
           </li>
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 5699e63de..6c504d2f1 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -35,7 +35,7 @@ const modelValue = defineModel<NestedMV>({ required: true })
 
 <template>
   <BCard v-if="routes.length > 1" no-body class="config-panel">
-    <BCardHeader header-tag="nav">
+    <BCardHeader tag="nav">
       <BNav card-header fill pills>
         <BNavItem
           v-for="route in routes"
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index e429cc763..63399daa1 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -43,9 +43,9 @@ $black: #202020;
 
 $blue: #60a5fa;
 $indigo: #6812f3;
-$purple: #b957ea;
+$purple: #cf76fc;
 $pink: #e93f8e;
-$red: #ff5a5a;
+$red: #fd6666;
 $orange: #fd7e17;
 $yellow: #ffd452;
 $green: #70ea8d;
@@ -60,6 +60,8 @@ $warning: $yellow;
 $danger: $red;
 $light: $gray-100;
 $dark: $gray-900;
+// Custom
+$best: $purple;
 
 $theme-colors: (
   'primary': $primary,
@@ -70,7 +72,7 @@ $theme-colors: (
   'danger': $danger,
   'light': $light,
   'dark': $dark,
-  'best': $purple,
+  'best': $best,
 );
 
 // $min-contrast-ratio: 7;
@@ -168,7 +170,7 @@ $light-text-colors: (
   'info': shade-color($info, 45%),
   'warning': shade-color($warning, 50%),
   'danger': shade-color($danger, 20%),
-  'best': shade-color($purple, 15%),
+  'best': shade-color($purple, 30%),
 );
 // Altered text color variant for dark theme
 $dark-text-colors: (
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index dff2aae87..9992be922 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -5,8 +5,10 @@ import { computed, nextTick, ref } from 'vue'
 import MessageListGroup from '@/components/MessageListGroup.vue'
 import QueryHeader from '@/components/QueryHeader.vue'
 import { useRequests } from '@/composables/useRequests'
+import { useSettings } from '@/composables/useSettings'
 
 const { historyList, showModal } = useRequests()
+const { dark } = useSettings()
 const rootElem = ref<InstanceType<typeof BCard> | null>(null)
 const historyElem = ref<InstanceType<typeof BAccordion> | null>(null)
 const open = ref(false)
@@ -115,16 +117,15 @@ function onHistoryBarClick(e: MouseEvent) {
       tabindex="0"
       :aria-expanded="open ? 'true' : 'false'"
       aria-controls="console-collapse"
-      header-tag="header"
-      :header-bg-variant="open ? 'best' : 'white'"
-      :class="{ 'text-white': open }"
+      :variant="open ? 'best' : dark ? 'dark' : 'light'"
+      tag="header"
       class="d-flex align-items-center"
       @mousedown.left.prevent="onHistoryBarClick"
       @keyup.space.enter.prevent="onHistoryBarKey"
     >
       <h5 class="m-0">
         <YIcon iname="history" />
-        <span class="d-none d-sm-inline fw-bold">
+        <span class="d-none d-sm-inline fw-bold ms-1">
           {{ $t('history.title') }}
         </span>
       </h5>
@@ -187,7 +188,8 @@ function onHistoryBarClick(e: MouseEvent) {
 
 #console {
   position: sticky;
-  z-index: 15;
+  // To be able to read the console while waiting modal is displayed
+  z-index: 1057;
   bottom: 0;
 
   width: calc(100% + 3rem);
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index a3736ff2c..6e73273e9 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -294,15 +294,12 @@ function onFormPortToggling() {
 :deep() {
   .form-switch {
     .form-check-input {
-      --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(255, 255, 255)'/></svg>") !important;
-      [data-bs-theme='dark'] * & {
-        --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(34, 38, 42)'/></svg>") !important;
-      }
       &:checked {
         border-color: $success;
         background-color: $success;
       }
       &:not(:checked) {
+        --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23222222)'/></svg>") !important;
         border-color: $danger;
         background-color: $danger;
       }

From 457225b980f457ccc758739590ffe72506032cd9 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 18 Aug 2024 10:19:30 +0200
Subject: [PATCH 204/275] fix: configpanels form + validation

---
 app/src/components/ConfigPanels.vue | 9 +++++----
 app/src/composables/form.ts         | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 6c504d2f1..2ce68f869 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -3,6 +3,8 @@
   lang="ts"
   generic="NestedMV extends Obj, MV extends Obj<NestedMV>"
 >
+import { useRoute } from 'vue-router'
+
 import type { FormValidation } from '@/composables/form'
 import type { KeyOfStr, Obj } from '@/types/commons'
 import type { ConfigPanel, ConfigPanels } from '@/types/configPanels'
@@ -11,8 +13,8 @@ defineOptions({
   inheritAttrs: false,
 })
 
+const currentRoute = useRoute()
 const props = defineProps<{
-  // modelValue: MV[keyof MV]
   panel: ConfigPanel<NestedMV, MV>
   routes: ConfigPanels<NestedMV, MV>['routes']
   validations: FormValidation<NestedMV>
@@ -20,7 +22,6 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   apply: [action?: KeyOfStr<typeof props.panel.fields>]
-  'update:modelValue': [modelValue: MV[keyof MV]]
 }>()
 
 const slots = defineSlots<{
@@ -41,7 +42,7 @@ const modelValue = defineModel<NestedMV>({ required: true })
           v-for="route in routes"
           :key="route.text"
           :to="route.to"
-          :active="$route.params.tabId === route.to.params?.tabId"
+          :active="currentRoute.params.tabId === route.to.params?.tabId"
         >
           <!-- FIXME added :active="" because `exact-active-class` not working https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/1754 -->
           <!-- exact-active-class="active" -->
@@ -52,7 +53,7 @@ const modelValue = defineModel<NestedMV>({ required: true })
     </BCardHeader>
 
     <CardForm
-      v-model="modelValue"
+      v-model="modelValue.value"
       :fields="panel.fields"
       :no-footer="!panel.hasApplyButton"
       :sections="panel.sections"
diff --git a/app/src/composables/form.ts b/app/src/composables/form.ts
index 68a7ae79a..e6d0d2ab8 100644
--- a/app/src/composables/form.ts
+++ b/app/src/composables/form.ts
@@ -37,7 +37,7 @@ export function useTouch(
     const v = toValue(validation)
     if (v) {
       // For fields that have multiple elements
-      if (key) {
+      if (key && v[key]) {
         v[key].$touch()
         clear?.(v[key].$path)
       } else {

From 8b16a3e0e2ae7c1fc0a5f36d0bab20e008faae77 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 18 Aug 2024 10:19:54 +0200
Subject: [PATCH 205/275] fix: alert's icon variants

---
 app/src/components/globals/YAlert.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/src/components/globals/YAlert.vue b/app/src/components/globals/YAlert.vue
index 882633286..0a70cf8e4 100644
--- a/app/src/components/globals/YAlert.vue
+++ b/app/src/components/globals/YAlert.vue
@@ -31,7 +31,12 @@ const icon = computed(() => {
     :class="{ ['alert alert-' + variant]: !alert }"
     class="yuno-alert d-flex flex-column flex-md-row align-items-center"
   >
-    <YIcon v-if="icon" :iname="icon" class="me-md-3 mb-md-0 mb-2 md" />
+    <YIcon
+      v-if="icon"
+      :iname="icon"
+      :variant="variant"
+      class="me-md-3 mb-md-0 mb-2 md"
+    />
 
     <div class="w-100">
       <slot name="default" />

From 4542ae06726b0b31bd673c4ab26c14909247141c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 21 Aug 2024 18:21:29 +0200
Subject: [PATCH 206/275] feat: add YListItem to display common list fields

---
 app/src/components/globals/YListItem.vue | 40 ++++++++++++++++++++++++
 app/src/views/app/AppList.vue            | 20 +++---------
 app/src/views/backup/BackupInfo.vue      | 12 +++----
 app/src/views/backup/BackupList.vue      | 21 +++----------
 app/src/views/service/ServiceList.vue    | 30 ++++++------------
 app/src/views/user/UserList.vue          | 19 +++--------
 6 files changed, 70 insertions(+), 72 deletions(-)
 create mode 100644 app/src/components/globals/YListItem.vue

diff --git a/app/src/components/globals/YListItem.vue b/app/src/components/globals/YListItem.vue
new file mode 100644
index 000000000..768500c0c
--- /dev/null
+++ b/app/src/components/globals/YListItem.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    label: string
+    sublabel?: string
+    description?: string
+  }>(),
+  {
+    sublabel: undefined,
+  },
+)
+
+const slots = defineSlots<{
+  default?: any
+}>()
+</script>
+
+<template>
+  <BListGroupItem
+    class="d-flex justify-content-between align-items-center pe-0"
+  >
+    <div>
+      <h5>
+        <strong class="fw-bold">{{ label }}</strong>
+        <small v-if="sublabel" class="ms-1 text-secondary">
+          {{ sublabel }}
+        </small>
+      </h5>
+      <p v-if="description || slots.default" class="m-0">
+        <slot name="default">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+
+    <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
+  </BListGroupItem>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index 6812bd58f..8b7e68c79 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -34,24 +34,14 @@ const [search, filteredApps] = useSearch(apps, (s, app) =>
     </template>
 
     <BListGroup>
-      <BListGroupItem
+      <YListItem
         v-for="{ id, description, label } in filteredApps"
         :key="id"
         :to="{ name: 'app-info', params: { id } }"
-        class="d-flex justify-content-between align-items-center pe-0"
-      >
-        <div>
-          <h5>
-            <strong class="me-1 fw-bold">{{ label }}</strong>
-            <small class="text-secondary">{{ id }}</small>
-          </h5>
-          <p class="m-0">
-            {{ description }}
-          </p>
-        </div>
-
-        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
-      </BListGroupItem>
+        :label="label"
+        :sublabel="id"
+        :description="description"
+      />
     </BListGroup>
   </ViewSearch>
 </template>
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index ea0b5b1dd..a414bc458 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -168,9 +168,9 @@ function downloadBackup() {
             class="d-flex justify-content-between align-items-center pe-0"
           >
             <div class="me-2">
-              <h5 class="fw-bold">
-                {{ item.name }}
-                <small v-if="item.size" class="text-secondary">
+              <h5>
+                <span class="fw-bold">{{ item.name }}</span>
+                <small v-if="item.size" class="ms-1 text-secondary">
                   ({{ humanSize(item.size) }})
                 </small>
               </h5>
@@ -189,9 +189,9 @@ function downloadBackup() {
             class="d-flex justify-content-between align-items-center pe-0"
           >
             <div class="me-2">
-              <h5 class="fw-bold">
-                {{ item.name }}
-                <small class="text-secondary">
+              <h5>
+                <span  class="fw-bold">{{ item.name }}</span>
+                <small class="ms-1 text-secondary">
                   {{ appName }} ({{ humanSize(item.size) }})
                 </small>
               </h5>
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index 888d03b1b..fd03a7ccb 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -38,26 +38,15 @@ const archives = await api
     </YAlert>
 
     <BListGroup v-else>
-      <BListGroupItem
+      <YListItem
         v-for="{ name, created_at, path, size } in archives"
         :key="name"
         :to="{ name: 'backup-info', params: { name, id } }"
         :title="readableDate(created_at)"
-        class="d-flex justify-content-between align-items-center pe-0"
-      >
-        <div>
-          <h5 class="fw-bold">
-            {{ distanceToNow(created_at) }}
-            <small class="text-secondary"
-              >{{ name }} ({{ humanSize(size) }})</small
-            >
-          </h5>
-          <p class="mb-0">
-            {{ path }}
-          </p>
-        </div>
-        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
-      </BListGroupItem>
+        :label="distanceToNow(created_at)"
+        :sublabel="`${name} (${humanSize(size)})`"
+        :description="path"
+      />
     </BListGroup>
   </div>
 </template>
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 3a603b900..ac38c12b2 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -39,7 +39,7 @@ const [search, filteredServices] = useSearch(services, (s, service) => {
     items-name="services"
   >
     <BListGroup>
-      <BListGroupItem
+      <YListItem
         v-for="{
           name,
           description,
@@ -48,27 +48,15 @@ const [search, filteredServices] = useSearch(services, (s, service) => {
         } in filteredServices"
         :key="name"
         :to="{ name: 'service-info', params: { name } }"
-        class="d-flex justify-content-between align-items-center pe-0"
+        :label="name"
+        :sublabel="description"
       >
-        <div>
-          <h5>
-            <span class="fw-bold me-1">{{ name }}</span>
-            <small class="text-secondary">{{ description }}</small>
-          </h5>
-          <p class="m-0">
-            <!-- FIXME +`-emphasis`? + rework emphasis color or text colors -->
-            <span
-              :class="`text-${status === 'running' ? 'success' : 'danger'}`"
-            >
-              <YIcon :iname="status === 'running' ? 'check-circle' : 'times'" />
-              {{ $t(status) }}
-            </span>
-            {{ $t('since') }} {{ last_state_change }}
-          </p>
-        </div>
-
-        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
-      </BListGroupItem>
+        <span :class="`text-${status === 'running' ? 'success' : 'danger'}`">
+          <YIcon :iname="status === 'running' ? 'check-circle' : 'times'" />
+          {{ $t(status) }}
+        </span>
+        {{ $t('since') }} {{ last_state_change }}
+      </YListItem>
     </BListGroup>
   </ViewSearch>
 </template>
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 40671766c..40e7e5cff 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -49,23 +49,14 @@ function downloadExport() {
     </template>
 
     <BListGroup>
-      <BListGroupItem
+      <YListItem
         v-for="user in filteredUsers"
         :key="user.username"
         :to="{ name: 'user-info', params: { name: user.username } }"
-        class="d-flex justify-content-between align-items-center pe-0"
-      >
-        <div>
-          <h5 class="fw-bold">
-            {{ user.username }}
-            <small class="text-secondary">{{ user.fullname }}</small>
-          </h5>
-          <p class="m-0">
-            {{ user.mail }}
-          </p>
-        </div>
-        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
-      </BListGroupItem>
+        :label="user.username"
+        :sublabel="user.fullname"
+        :description="user.mail"
+      />
     </BListGroup>
   </ViewSearch>
 </template>

From 12399ca3df56ed4c30370121d59e65ff6c04fcbe Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 21 Aug 2024 18:27:15 +0200
Subject: [PATCH 207/275] fix: views's modal variant and position

---
 app/src/composables/useAutoModal.ts   | 6 +++---
 app/src/views/app/AppInfo.vue         | 4 ++--
 app/src/views/domain/DomainInfo.vue   | 4 ++--
 app/src/views/update/SystemUpdate.vue | 6 +++---
 app/src/views/user/UserInfo.vue       | 4 ++--
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/src/composables/useAutoModal.ts b/app/src/composables/useAutoModal.ts
index ecb981f26..5ff0fb585 100644
--- a/app/src/composables/useAutoModal.ts
+++ b/app/src/composables/useAutoModal.ts
@@ -19,11 +19,11 @@ export function useAutoModal() {
       centered: true,
       okOnly: !cancelable,
       ...(markdown
-        ? { headerBgVariant: 'warning', headerClass: 'text-black' }
+        ? { headerVariant: 'warning' }
         : {
             hideHeader: true,
-            bodyBgVariant: 'warning',
-            bodyClass: ['fw-bold', 'rounded-top', 'text-black'],
+            bodyVariant: 'warning',
+            bodyClass: ['fw-bold', 'rounded-top'],
           }),
       ...props_,
     }
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 75dd14dc1..4baac5e0e 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -507,9 +507,9 @@ async function uninstall() {
 
     <BModal
       id="uninstall-modal"
+      centered
       :title="$t('confirm_uninstall', { name: id })"
-      header-bg-variant="warning"
-      header-class="text-black"
+      header-variant="warning"
       :body-class="{ 'd-none': !app.supportsPurge }"
       @ok="uninstall"
     >
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 436fff111..f6dde308f 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -223,9 +223,9 @@ async function setAsDefaultDomain() {
 
     <BModal
       id="delete-modal"
+      centered
       :title="$t('confirm_delete', { name: props.name })"
-      header-bg-variant="warning"
-      header-class="text-black"
+      header-variant="warning"
       :body-class="{ 'd-none': !isMainDynDomain }"
       @ok="deleteDomain"
     >
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index ac17bd19b..7a5c48fee 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -179,15 +179,15 @@ async function performSystemUpgrade() {
     <BModal
       v-if="preUpgrade"
       id="apps-pre-upgrade"
+      centered
       :model-value="true"
       :title="$t('app.upgrade.confirm.title')"
-      header-bg-variant="warning"
-      header-class="text-black"
+      header-variant="warning"
       :ok-title="$t('system_upgrade_btn')"
       ok-variant="success"
       :cancel-title="$t('cancel')"
       @ok="performAppsUpgrade(preUpgrade.apps.map((app) => app.id))"
-      @cancel="preUpgrade = undefined"
+      @hide="preUpgrade = undefined"
     >
       <h3>
         {{ $t('app.upgrade.confirm.apps') }}
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index 1c646bb7c..f40d6c3ec 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -114,9 +114,9 @@ function deleteUser() {
     <BModal
       v-if="user"
       id="delete-modal"
+      centered
       :title="$t('confirm_delete', { name })"
-      header-bg-variant="warning"
-      header-class="text-black"
+      header-variant="warning"
       @ok="deleteUser"
     >
       <BFormGroup>

From 7f79fc812c6f378737d229eabf074f0da03542f3 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 21 Aug 2024 18:28:42 +0200
Subject: [PATCH 208/275] feat: show modal on action error when no form

---
 app/src/views/backup/BackupInfo.vue | 17 ++++++-----------
 app/src/views/domain/DomainInfo.vue | 11 ++++++++++-
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index a414bc458..760bb3410 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -39,8 +39,6 @@ const { infos, system, apps } = await api
 
 const allKeys = [...Object.keys(apps), ...Object.keys(system)]
 const selected = ref(allKeys)
-const serverError = ref('')
-const isValid = ref<boolean | null>(null)
 
 const hasBackupData = computed(() => {
   return !isEmptyValue(system) || !isEmptyValue(apps)
@@ -65,12 +63,15 @@ async function restoreBackup() {
       humanKey: { key: 'backups.restore', name: props.name },
     })
     .then(() => {
-      isValid.value = null
+      // FIXME back to backup list or home ?
     })
     .catch((err: APIError) => {
       if (!(err instanceof APIBadRequestError)) throw err
-      serverError.value = err.message
-      isValid.value = false
+      modalConfirm(
+        err.message,
+        { title: t('error'), bodyVariant: 'danger' },
+        { cancelable: false },
+      )
     })
 }
 
@@ -201,12 +202,6 @@ function downloadBackup() {
             <BFormCheckbox :value="appName" :aria-label="$t('check')" />
           </BListGroupItem>
         </BListGroup>
-
-        <BFormInvalidFeedback id="backup-restore-feedback" :state="isValid">
-          <YAlert alert variant="danger" class="mb-0">
-            {{ serverError }}
-          </YAlert>
-        </BFormInvalidFeedback>
       </BFormCheckboxGroup>
 
       <div v-else class="alert alert-warning mb-0">
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index f6dde308f..e9416355d 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import api, { objectToParams } from '@/api'
+import { APIBadRequestError } from '@/api/errors'
 import ConfigPanelsComponent from '@/components/ConfigPanels.vue'
 import { formatConfigPanels, useConfigPanels } from '@/composables/configPanels'
 import { useDomains } from '@/composables/data'
@@ -82,7 +83,7 @@ async function deleteDomain() {
 
   api
     .delete({
-      uri: 'domains',
+      uri: `domains/${props.name}`,
       cachePath: `domains.${props.name}`,
       data,
       humanKey: {
@@ -93,6 +94,14 @@ async function deleteDomain() {
     .then(() => {
       router.push({ name: 'domain-list' })
     })
+    .catch((err) => {
+      if (!(err instanceof APIBadRequestError)) throw err
+      modalConfirm(
+        err.data.error,
+        { headerVariant: 'danger', title: t('error') },
+        { markdown: true, cancelable: false },
+      )
+    })
 }
 
 async function setAsDefaultDomain() {

From 008c2c53abfc08f1db84fb7122b2e186737ec3b9 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 21 Aug 2024 18:30:26 +0200
Subject: [PATCH 209/275] fix: misc form related issues

---
 app/src/components/ConfigPanels.vue      |  2 +-
 app/src/components/globals/FormField.vue |  1 -
 app/src/composables/form.ts              |  2 +-
 app/src/views/domain/DomainInfo.vue      |  2 +-
 app/src/views/tool/ToolWebadmin.vue      | 12 ++++++------
 5 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 2ce68f869..a99e2f200 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -53,7 +53,7 @@ const modelValue = defineModel<NestedMV>({ required: true })
     </BCardHeader>
 
     <CardForm
-      v-model="modelValue.value"
+      v-model="modelValue"
       :fields="panel.fields"
       :no-footer="!panel.hasApplyButton"
       :sections="panel.sections"
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 25ea0bc30..7972e812b 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -171,7 +171,6 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
           {{ asInputGroup ? label : prepend }}
         </BInputGroupText>
         <ReuseTemplate v-bind="{ ariaDescribedby }" />
-        <BInputGroupText v-if="append">{{ append }}</BInputGroupText>
       </BInputGroup>
       <ReuseTemplate v-else v-bind="{ ariaDescribedby }" />
     </template>
diff --git a/app/src/composables/form.ts b/app/src/composables/form.ts
index e6d0d2ab8..68cb19ae1 100644
--- a/app/src/composables/form.ts
+++ b/app/src/composables/form.ts
@@ -113,7 +113,7 @@ export function useForm<
     // FIXME add option to ask confirmation (with param text confirm)
     return async (e: SubmitEvent) => {
       e.preventDefault()
-      if (!(await v.value.$validate())) return
+      if (!(await v.value.form.$validate())) return
       fn(onErrorFn, serverErrors)
     }
   }
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index e9416355d..643e3b4c9 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -219,7 +219,7 @@ async function setAsDefaultDomain() {
     </YCard>
 
     <ConfigPanelsComponent
-      v-model="config.form"
+      v-model="config.form.value"
       :panel="config.panel.value"
       :validations="config.v.value"
       :routes="config.routes"
diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index 055c251cc..b2ba18697 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/app/src/views/tool/ToolWebadmin.vue
@@ -16,14 +16,14 @@ const fields = {
   locale: reactive({
     component: 'SelectItem',
     label: ct('tools_webadmin.language'),
-    props: { id: 'locale', choices: settings.availableLocales },
+    cProps: { id: 'locale', choices: settings.availableLocales },
   }) as FormField<'SelectItem', string>,
 
   fallbackLocale: reactive({
     component: 'SelectItem',
     label: ct('tools_webadmin.fallback_language'),
     description: ct('tools_webadmin.fallback_language_description'),
-    props: {
+    cProps: {
       id: 'fallback-locale',
       choices: settings.availableLocales,
     },
@@ -34,21 +34,21 @@ const fields = {
     id: 'cache',
     label: ct('tools_webadmin.cache'),
     description: ct('tools_webadmin.cache_description'),
-    props: { labels: { true: 'enabled', false: 'disabled' } },
+    cProps: { labels: { true: 'enabled', false: 'disabled' } },
   }) as FormField<'CheckboxItem', boolean>,
 
   transitions: reactive({
     component: 'CheckboxItem',
     id: 'transitions',
     label: ct('tools_webadmin.transitions'),
-    props: { labels: { true: 'enabled', false: 'disabled' } },
+    cProps: { labels: { true: 'enabled', false: 'disabled' } },
   }) as FormField<'CheckboxItem', boolean>,
 
   dark: reactive({
     component: 'CheckboxItem',
     id: 'theme',
     label: ct('tools_webadmin.theme'),
-    props: { labels: { true: '🌙', false: '☀️' } },
+    cProps: { labels: { true: '🌙', false: '☀️' } },
   }) as FormField<'CheckboxItem', boolean>,
 
   experimental: reactive({
@@ -58,7 +58,7 @@ const fields = {
     description: ct('tools_webadmin.experimental_description'),
     // Available in dev mode only
     visible: import.meta.env.DEV,
-    props: { labels: { true: 'enabled', false: 'disabled' } },
+    cProps: { labels: { true: 'enabled', false: 'disabled' } },
   }) as FormField<'CheckboxItem', boolean>,
 }
 const form = ref(pick(settings, getKeys(fields)))

From 9649627bb8d7b375bfbee50d549e05543fdea298 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 21 Aug 2024 18:31:25 +0200
Subject: [PATCH 210/275] fix: InputItem: return empty string for none value in
 type number

---
 app/src/components/globals/formItems/InputItem.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index f7faf275a..4ca4e5918 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -34,6 +34,7 @@ const touch = inject(ValidationTouchSymbol)
 const model = defineModel<string | number | null>({
   set(value) {
     if (props.type === 'number' && typeof value === 'string') {
+      if (value === '') return ''
       return parseInt(value)
     }
     return value

From 3e877c138011adee9fc45378420fc914d439af73 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 21 Aug 2024 18:31:50 +0200
Subject: [PATCH 211/275] fix: SelectItem: handle `_none` choice

---
 .../globals/formItems/SelectItem.vue           | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index aa3aab181..c0d5da1b9 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -23,7 +23,21 @@ defineEmits<{
   'update:modelValue': [value: string | null]
 }>()
 
-const model = defineModel<string | number | null>()
+const model = defineModel<string | number | null>({
+  set: (value) => {
+    if (value === 'null') {
+      return null
+    }
+    return value
+  },
+})
+
+const isOptionalSelectOption = computed(() => {
+  // FIXME `None` handling for config panels is a bit weird
+  return props.choices?.some(
+    (choice) => typeof choice !== 'string' && choice.value === '_none',
+  )
+})
 
 const touch = inject(ValidationTouchSymbol)
 
@@ -41,7 +55,7 @@ const required = computed(() => 'required' in (props?.validation ?? {}))
     :required="required"
     @blur="touch?.(touchKey)"
   >
-    <template #first>
+    <template v-if="!isOptionalSelectOption" #first>
       <BFormSelectOption value="null" :disabled="required">
         -- {{ required ? $t('select_an_option') : $t('words.none') }} --
       </BFormSelectOption>

From 66f0ed2370090f4bc2b13ebf361073743e1fb756 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 21 Aug 2024 18:33:23 +0200
Subject: [PATCH 212/275] fix: waiting modal flickering when quick response or
 error

---
 app/src/api/api.ts                         | 15 ++++++++++++---
 app/src/components/modals/ModalOverlay.vue |  1 +
 app/src/components/modals/ModalWaiting.vue |  2 +-
 app/src/composables/useRequests.ts         | 15 ++++++++++++---
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/app/src/api/api.ts b/app/src/api/api.ts
index fa706388c..f75c5a572 100644
--- a/app/src/api/api.ts
+++ b/app/src/api/api.ts
@@ -7,7 +7,11 @@ import {
 } from '@/composables/useRequests'
 import { useSettings } from '@/composables/useSettings'
 import type { Obj } from '@/types/commons'
-import { APIUnauthorizedError, type APIError } from './errors'
+import {
+  APIBadRequestError,
+  APIUnauthorizedError,
+  type APIError,
+} from './errors'
 import { getError, getResponseData, openWebSocket } from './handlers'
 
 export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'DELETE'
@@ -143,8 +147,13 @@ export default {
 
     if (!response.ok) {
       const errorData = await getResponseData<string | APIErrorData>(response)
-      endRequest({ request, success: false })
-      throw getError(request, response, errorData)
+      const err = getError(request, response, errorData)
+      endRequest({
+        request,
+        success: false,
+        isFormError: err instanceof APIBadRequestError,
+      })
+      throw err
     }
 
     const responseData = await getResponseData<T>(response)
diff --git a/app/src/components/modals/ModalOverlay.vue b/app/src/components/modals/ModalOverlay.vue
index 6beeed491..7630063ee 100644
--- a/app/src/components/modals/ModalOverlay.vue
+++ b/app/src/components/modals/ModalOverlay.vue
@@ -30,6 +30,7 @@ defineSlots<{
     no-close-on-backdrop
     no-close-on-esc
     :hide-footer="hideFooter"
+    no-fade
   >
     <template #header>
       <QueryHeader type="overlay" :request="request" tabindex="0" />
diff --git a/app/src/components/modals/ModalWaiting.vue b/app/src/components/modals/ModalWaiting.vue
index f2592b3ec..8549b82b4 100644
--- a/app/src/components/modals/ModalWaiting.vue
+++ b/app/src/components/modals/ModalWaiting.vue
@@ -26,7 +26,7 @@ const progress = computed(() => {
 <template>
   <ModalOverlay :request="request">
     <h5
-      v-t="messages || progress ? 'api.processing' : 'api.waiting'"
+      v-t="messages || progress ? 'api.processing' : 'api_waiting'"
       class="text-center mt-4"
     />
 
diff --git a/app/src/composables/useRequests.ts b/app/src/composables/useRequests.ts
index e01e3014c..e2fe70fd7 100644
--- a/app/src/composables/useRequests.ts
+++ b/app/src/composables/useRequests.ts
@@ -23,6 +23,7 @@ export type APIRequest = {
   err?: APIError
   action?: APIActionProps
   showModal?: boolean
+  showModalTimeout?: number
 }
 type APIActionProps = {
   messages: RequestMessage[]
@@ -107,12 +108,12 @@ export const useRequests = createGlobalState(() => {
     const r = requests.value[requests.value.length - 1]!
 
     if (showModal) {
-      setTimeout(() => {
+      request.showModalTimeout = setTimeout(() => {
         // Display the waiting modal only if the request takes some time.
         if (r.status === 'pending') {
           r.showModal = true
         }
-      }, 300)
+      }, 300) as unknown as number
     }
 
     return r
@@ -121,12 +122,14 @@ export const useRequests = createGlobalState(() => {
   function endRequest({
     request,
     success,
+    isFormError = false,
   }: {
     request: APIRequest
     success: boolean
+    isFormError?: boolean
   }) {
     let status: RequestStatus = success ? 'success' : 'error'
-    let hideModal = success
+    let hideModal = success || isFormError
 
     if (success && request.action) {
       const { warnings, errors, messages } = request.action
@@ -137,6 +140,12 @@ export const useRequests = createGlobalState(() => {
       if (errors || warnings) status = 'warning'
     }
 
+    if (request.showModalTimeout) {
+      // Clear the timeout to avoid delayed modal to show up
+      clearTimeout(request.showModalTimeout)
+      delete request.showModalTimeout
+    }
+
     setTimeout(() => {
       request.status = status
 

From fa29cbb49914fef50a62866bb15729c637714f07 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 21 Aug 2024 18:34:06 +0200
Subject: [PATCH 213/275] fix: Diagnosis badges reactivity

---
 app/src/views/diagnosis/DiagnosisView.vue | 44 ++++++++++++-----------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 4a253d4d7..efa0c4034 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { reactive } from 'vue'
+
 import api from '@/api'
 import { distanceToNow } from '@/helpers/filters/date'
 import { STATUS_VARIANT, isOkStatus } from '@/helpers/yunohostArguments'
@@ -18,25 +20,27 @@ const reports = await api
     if (!diagnosis) return null
 
     return diagnosis.reports.map((report) => {
-      const badges = {
+      const badges = reactive({
         warnings: 0,
         errors: 0,
         ignoreds: 0,
-      }
+      })
 
-      const items = report.items.map((item) => {
-        const status = item.status.toLowerCase() as StateStatus
-        const variant = STATUS_VARIANT[status]
-        const issue = !isOkStatus(status)
+      const items = reactive(
+        report.items.map((item) => {
+          const status = item.status.toLowerCase() as StateStatus
+          const variant = STATUS_VARIANT[status]
+          const issue = !isOkStatus(status)
 
-        if (item.ignored) badges.ignoreds++
-        else if (issue) badges[`${status}s`]++
+          if (item.ignored) badges.ignoreds++
+          else if (issue) badges[`${status}s`]++
 
-        return { ...item, status, issue, variant }
-      })
+          return { ...item, status, issue, variant }
+        }),
+      )
       return {
         ...report,
-        ...badges,
+        badges,
         items,
         noIssues: badges.warnings + badges.errors === 0,
       }
@@ -49,7 +53,7 @@ function runDiagnosis(report?: { id: string; description: string }) {
   const id = report?.id
   api
     .put({
-      uri: 'diagnosis/run' + id ? '?force' : '',
+      uri: 'diagnosis/run' + (id ? '?force' : ''),
       data: id ? { categories: [id] } : {},
       humanKey: {
         key: 'diagnosis.run' + (id ? '_specific' : ''),
@@ -77,9 +81,9 @@ function toggleIgnoreIssue(
     .then(() => {
       item.ignored = action === 'ignore'
       const count = item.ignored ? 1 : -1
-      report.ignoreds += count
+      report.badges.ignoreds += count
       if (!isOkStatus(item.status)) {
-        report[`${item.status}s`] -= count
+        report.badges[`${item.status}s`] -= count
       }
     })
 }
@@ -133,18 +137,18 @@ function shareLogs() {
             variant="success"
           />
           <BBadge
-            v-if="report.errors"
-            v-t="{ path: 'issues', args: { count: report.errors } }"
+            v-if="report.badges.errors"
+            v-t="{ path: 'issues', args: { count: report.badges.errors } }"
             variant="danger"
           />
           <BBadge
-            v-if="report.warnings"
-            v-t="{ path: 'warnings', args: { count: report.warnings } }"
+            v-if="report.badges.warnings"
+            v-t="{ path: 'warnings', args: { count: report.badges.warnings } }"
             variant="warning"
           />
           <BBadge
-            v-if="report.ignoreds"
-            v-t="{ path: 'ignored', args: { count: report.ignoreds } }"
+            v-if="report.badges.ignoreds"
+            v-t="{ path: 'ignored', args: { count: report.badges.ignoreds } }"
           />
         </div>
       </template>

From 5ad3738861ce8aed0fd7696b7d89069c5417c98a Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 21 Aug 2024 18:35:20 +0200
Subject: [PATCH 214/275] fix: cache payloads + delay data deletion to avoid
 view error before routing

---
 app/src/composables/data.ts | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/src/composables/data.ts b/app/src/composables/data.ts
index d47fc93cc..c0b69cc87 100644
--- a/app/src/composables/data.ts
+++ b/app/src/composables/data.ts
@@ -43,7 +43,7 @@ const useData = createGlobalState(() => {
         }
     } else if (key === 'userDetails' && param) {
       if (method === 'GET' || method === 'PUT') {
-        userDetails.value[param] = payload[param]
+        userDetails.value[param] = payload
       } else if (method === 'DELETE') {
         delete userDetails.value[param]
         delete users.value[param]
@@ -79,6 +79,8 @@ const useData = createGlobalState(() => {
           delete domainDetails.value[param]
         }
       }
+    } else if (key === 'mainDomain' && method === 'PUT' && param) {
+      mainDomain.value = param
     } else if (key === 'domainDetails' && param && method === 'GET') {
       domainDetails.value[param] = payload
     } else {
@@ -239,7 +241,16 @@ export function useCache<T extends any = any>(
       }
       return (isEmptyValue(d) ? undefined : d) as T
     }),
-    update: (payload: T) => data.update(method, payload, key, param),
+    update: (payload: T) => {
+      if (method === 'DELETE') {
+        // Update the cache with a delay to avoid current view to error out since there's no data anymore
+        setTimeout(() => {
+          data.update(method, payload, key, param)
+        }, 100)
+      } else {
+        data.update(method, payload, key, param)
+      }
+    },
   }
 }
 

From 6cf9fa3804e1aa68da07130cfe610f69ab0589ef Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 21 Aug 2024 18:36:03 +0200
Subject: [PATCH 215/275] fix: ToolLog moar logs button condition

---
 app/src/views/tool/ToolLog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/views/tool/ToolLog.vue b/app/src/views/tool/ToolLog.vue
index f7115e3e8..b67ae4fb0 100644
--- a/app/src/views/tool/ToolLog.vue
+++ b/app/src/views/tool/ToolLog.vue
@@ -45,7 +45,7 @@ const { description, logs, moreLogsAvailable, info } = await api
     return {
       description: log.description,
       logs,
-      moreLogsAvailable: log.logs.length === props.n || 25,
+      moreLogsAvailable: log.logs.length === props.n,
       info: {
         path: log.log_path,
         started_at: readableDate(started_at),

From 55cdc2a3d70ebee25c16be553dce9f24fe7cb1f9 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 21 Aug 2024 20:41:45 +0200
Subject: [PATCH 216/275] fix: new tactic to display properly translated title
 and breadcrumb at page load

---
 app/src/components/globals/YBreadcrumb.vue |   5 +-
 app/src/composables/useInfos.ts            | 124 +++++++++++++--------
 app/src/router/index.ts                    |   6 -
 3 files changed, 79 insertions(+), 56 deletions(-)

diff --git a/app/src/components/globals/YBreadcrumb.vue b/app/src/components/globals/YBreadcrumb.vue
index 9f5bf432c..bbe949848 100644
--- a/app/src/components/globals/YBreadcrumb.vue
+++ b/app/src/components/globals/YBreadcrumb.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { useInfos } from '@/composables/useInfos'
 
-const { breadcrumb } = useInfos()
+const { breadcrumb, updateHtmlTitle } = useInfos()
+
+// Call this here to trigger title update at page load (with translation)
+updateHtmlTitle()
 </script>
 
 <template>
diff --git a/app/src/composables/useInfos.ts b/app/src/composables/useInfos.ts
index c82185402..0c0a47a16 100644
--- a/app/src/composables/useInfos.ts
+++ b/app/src/composables/useInfos.ts
@@ -1,19 +1,40 @@
 import { createGlobalState, useLocalStorage } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type {
   RouteLocationNormalized,
   RouteLocationNormalizedLoaded,
-  RouteRecordNormalized,
+  RouteMeta,
+  RouteParamsGeneric,
+  RouteRecordNameGeneric,
 } from 'vue-router'
 import { useRouter } from 'vue-router'
 
 import api from '@/api'
 import { timeout } from '@/helpers/commons'
 import i18n from '@/i18n'
-import type { CustomRoute } from '@/types/commons'
 import { useDomains } from './data'
 import { useRequests, type ReconnectingArgs } from './useRequests'
 
+type BreadcrumbRoutes = {
+  name: RouteRecordNameGeneric
+  params: RouteParamsGeneric
+  args: RouteMeta['args']
+}
+
+function formatRoute({ name, params, args }: BreadcrumbRoutes) {
+  const { trad, param } = args
+  // if a traduction key string has been given and we also need to pass
+  // the route param as a variable.
+  if (trad && param) {
+    return i18n.global.t(trad, { [param]: params[param] })
+  } else if (trad) {
+    return i18n.global.t(trad)
+  } else if (param) {
+    return params[param] as string
+  }
+  return ''
+}
+
 export const useInfos = createGlobalState(() => {
   const router = useRouter()
 
@@ -22,13 +43,60 @@ export const useInfos = createGlobalState(() => {
   const connected = useLocalStorage('connected', false)
   const yunohost = ref<{ version: string; repo: string } | undefined>()
   const routerKey = ref<string | undefined>()
-  const breadcrumb = ref<CustomRoute[]>([])
+  const breadcrumbRoutes = ref<BreadcrumbRoutes[]>([])
+
+  const breadcrumb = computed(() => {
+    return breadcrumbRoutes.value.map((to) => {
+      console.log(to)
+      return { to: { name: to.name }, text: formatRoute(to) }
+    })
+  })
+
+  const htmlTitle = computed(() => {
+    const bc = breadcrumb.value
+    if (bc.length === 0) {
+      const { name, params, meta } = router.currentRoute.value
+      return formatRoute({ name, params, args: meta.args || {} })
+    }
+    return (bc.length > 2 ? bc.slice(-2) : bc)
+      .map((route) => route.text)
+      .reverse()
+      .join(' / ')
+  })
 
   const { maybeMainDomain } = useDomains()
   const ssoLink = computed(() => {
     return `//${maybeMainDomain.value ?? host.value}/yunohost/sso`
   })
 
+  watch(router.currentRoute, (to) => {
+    updateRouterKey()
+
+    const routeNames =
+      to.meta.breadcrumb ||
+      to.matched
+        .slice()
+        .reverse()
+        .find((route) => route.meta.breadcrumb)?.meta.breadcrumb
+    if (!routeNames) {
+      breadcrumbRoutes.value = []
+      return
+    }
+
+    const allRoutes = router.getRoutes()
+    breadcrumbRoutes.value = routeNames.map((name) => {
+      const route = allRoutes.find((route) => route.name === name)
+      if (!route) {
+        throw Error(
+          `Route ${name}, declared in breadcrumd, cannot be found in routes.`,
+        )
+      }
+      return { name: to.name, params: to.params, args: route.meta.args || {} }
+    })
+
+    updateHtmlTitle()
+  })
+
   // INIT
 
   async function _checkInstall(retry = 2) {
@@ -123,50 +191,9 @@ export const useInfos = createGlobalState(() => {
     routerKey.value = `${to.name?.toString()}-${params.join('-')}`
   }
 
-  function updateBreadcrumb(to: RouteLocationNormalized) {
-    function getRouteNames(route: RouteLocationNormalized): string[] {
-      if (route.meta.breadcrumb) return route.meta.breadcrumb
-      const parentRoute = route.matched
-        .slice()
-        .reverse()
-        .find((route) => route.meta.breadcrumb)
-      return parentRoute?.meta.breadcrumb || []
-    }
-
-    function formatRoute(
-      route: RouteRecordNormalized | RouteLocationNormalized,
-    ) {
-      const { trad, param } = route.meta.args || {}
-      let text = ''
-      // if a traduction key string has been given and we also need to pass
-      // the route param as a variable.
-      if (trad && param) {
-        text = i18n.global.t(trad, { [param]: to.params[param] })
-      } else if (trad) {
-        text = i18n.global.t(trad)
-      } else if (param) {
-        text = to.params[param] as string
-      }
-      return { to: { name: route.name! }, text }
-    }
-
-    const routeNames = getRouteNames(to)
-    const allRoutes = router.getRoutes()
-    breadcrumb.value = routeNames.map((name) => {
-      const route = allRoutes.find((route) => route.name === name)!
-      return formatRoute(route)
-    })
-
-    function getTitle(breadcrumb: CustomRoute[]) {
-      if (breadcrumb.length === 0) return formatRoute(to).text
-      return (breadcrumb.length > 2 ? breadcrumb.slice(-2) : breadcrumb)
-        .map((route) => route.text)
-        .reverse()
-        .join(' / ')
-    }
-
+  function updateHtmlTitle() {
     // Display a simplified breadcrumb as the document title.
-    document.title = `${getTitle(breadcrumb.value)} | ${i18n.global.t('yunohost_admin')}`
+    document.title = `${htmlTitle.value} | ${i18n.global.t('yunohost_admin')}`
   }
 
   return {
@@ -183,7 +210,6 @@ export const useInfos = createGlobalState(() => {
     login,
     logout,
     tryToReconnect,
-    updateRouterKey,
-    updateBreadcrumb,
+    updateHtmlTitle,
   }
 })
diff --git a/app/src/router/index.ts b/app/src/router/index.ts
index 37936d45a..a449597a8 100644
--- a/app/src/router/index.ts
+++ b/app/src/router/index.ts
@@ -51,10 +51,4 @@ router.beforeEach((to, from, next) => {
   }
 })
 
-router.afterEach((to) => {
-  const { updateRouterKey, updateBreadcrumb } = useInfos()
-  updateRouterKey(to)
-  updateBreadcrumb(to)
-})
-
 export default router

From 65da87bee2a28f61a556f66d4d57833e6618f59e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 21 Aug 2024 21:24:46 +0200
Subject: [PATCH 217/275] fix: postinstall form

---
 app/src/composables/data.ts            |  8 ++++++--
 app/src/composables/useInfos.ts        |  2 +-
 app/src/views/PostInstall.vue          |  4 +---
 app/src/views/_partials/DomainForm.vue | 16 +++++++++++-----
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/app/src/composables/data.ts b/app/src/composables/data.ts
index c0b69cc87..ea7cd6619 100644
--- a/app/src/composables/data.ts
+++ b/app/src/composables/data.ts
@@ -127,11 +127,15 @@ export function useUsersAndGroups(username?: MaybeRefOrGetter<string>) {
   }
 }
 
-export function useDomains(domain_?: MaybeRefOrGetter<string>) {
+export function useDomains(
+  domain_?: MaybeRefOrGetter<string>,
+  installed: boolean = true,
+) {
   const { mainDomain, domains: domains_, domainDetails } = useData()
 
   const domains = computed(() => {
-    if (!domains_.value) throw new Error(getNoDataMessage('domains'))
+    if (!domains_.value && installed)
+      throw new Error(getNoDataMessage('domains'))
     return domains_.value
   })
 
diff --git a/app/src/composables/useInfos.ts b/app/src/composables/useInfos.ts
index 0c0a47a16..1fe90b1da 100644
--- a/app/src/composables/useInfos.ts
+++ b/app/src/composables/useInfos.ts
@@ -123,7 +123,7 @@ export const useInfos = createGlobalState(() => {
     if (!installed.value) {
       router.push({ name: 'post-install' })
     } else {
-      _onLogin()
+      await _onLogin()
     }
   }
 
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 893074472..6c1f5cf61 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -133,11 +133,9 @@ async function performPostInstall(force = false) {
       } else if (hasWordsInError(['domain', 'dyndns'])) {
         step.value = 'domain'
         serverError.value = err.message
-      } else if (hasWordsInError(['password', 'user'])) {
+      } else {
         step.value = 'user'
         serverErrors.global = [err.message]
-      } else {
-        throw err
       }
     })
 }
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 965b39f7c..a971ec809 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 
 import { useDomains } from '@/composables/data'
 import { useForm } from '@/composables/form'
+import { useInfos } from '@/composables/useInfos'
 import {
   domain,
   dynDomain,
@@ -34,8 +35,9 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const { installed } = useInfos()
 
-const { domains } = useDomains()
+const { domains } = useDomains(undefined, installed.value)
 const dynDomains = ['nohost.me', 'noho.st', 'ynh.fr']
 
 const dynDnsForbiden = computed(() => {
@@ -75,17 +77,21 @@ const fields = {
     },
   }) satisfies FieldProps<'InputItem', Form['domain']>,
 
-  dynDomain: {
+  dynDomain: reactive({
     component: 'AdressItem',
     label: t('domain_name'),
-    rules: { localPart: { required, dynDomain } },
+    rules: computed(() => {
+      return selected.value === 'dynDomain'
+        ? { localPart: { required, dynDomain }, domain: { required } }
+        : undefined
+    }),
     cProps: {
       id: 'dyn-domain',
       placeholder: t('placeholder.domain').split('.')[0],
       type: 'domain',
       choices: dynDomains,
     },
-  } satisfies FieldProps<'AdressItem', Form['dynDomain']>,
+  }) satisfies FieldProps<'AdressItem', Form['dynDomain']>,
 
   dynDomainPassword: reactive({
     component: 'InputItem',
@@ -121,7 +127,7 @@ const fields = {
     label: t('domain_name'),
     rules: computed(() =>
       selected.value === 'localDomain'
-        ? { localPart: { required, dynDomain } }
+        ? { localPart: { required, dynDomain }, domain: { required } }
         : undefined,
     ),
     cProps: {

From bdb283a80c77681c0fac97d82c1cd57031a2480d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 21 Aug 2024 21:25:44 +0200
Subject: [PATCH 218/275] fix: load base data before view data

---
 app/src/App.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index ada09b31b..b4a513703 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 
 import { useInfos } from '@/composables/useInfos'
 import { useRequests } from '@/composables/useRequests'
@@ -10,7 +10,8 @@ const { ssoLink, connected, yunohost, logout, onAppCreated } = useInfos()
 const { locked } = useRequests()
 const { spinner, dark } = useSettings()
 
-onAppCreated()
+const ready = ref(false)
+onAppCreated().then(() => ready.value = true)
 
 onMounted(() => {
   const copypastaCode = ['ArrowDown', 'ArrowDown', 'ArrowUp', 'ArrowUp']
@@ -106,7 +107,7 @@ onMounted(() => {
     </header>
 
     <!-- MAIN -->
-    <MainLayout />
+    <MainLayout v-if="ready" />
 
     <BModalOrchestrator />
 

From 6888ccb571f289b0afa9f9bbda41a3a2d2c9db97 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 21 Aug 2024 21:52:47 +0200
Subject: [PATCH 219/275] fix: use different strategy for domains not available
 in DomainForm in PostInstall

---
 app/src/composables/data.ts            |  3 +--
 app/src/views/PostInstall.vue          |  1 +
 app/src/views/_partials/DomainForm.vue | 10 +++-------
 app/src/views/domain/DomainAdd.vue     |  3 +++
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/app/src/composables/data.ts b/app/src/composables/data.ts
index ea7cd6619..2ee4b8bdc 100644
--- a/app/src/composables/data.ts
+++ b/app/src/composables/data.ts
@@ -134,8 +134,7 @@ export function useDomains(
   const { mainDomain, domains: domains_, domainDetails } = useData()
 
   const domains = computed(() => {
-    if (!domains_.value && installed)
-      throw new Error(getNoDataMessage('domains'))
+    if (!domains_.value) throw new Error(getNoDataMessage('domains'))
     return domains_.value
   })
 
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 6c1f5cf61..f76a4ecdb 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -163,6 +163,7 @@ async function performPostInstall(force = false) {
     <!-- DOMAIN SETUP STEP -->
     <template v-else-if="step === 'domain'">
       <DomainForm
+        :domains="[]"
         :title="$t('postinstall_set_domain')"
         :submit-text="$t('next')"
         :server-error="serverError"
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index a971ec809..0c4d27ddd 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -2,9 +2,7 @@
 import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useDomains } from '@/composables/data'
 import { useForm } from '@/composables/form'
-import { useInfos } from '@/composables/useInfos'
 import {
   domain,
   dynDomain,
@@ -21,6 +19,7 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
+    domains: string[]
     title: string
     submitText?: string
     serverError?: string
@@ -35,14 +34,11 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const { installed } = useInfos()
-
-const { domains } = useDomains(undefined, installed.value)
 const dynDomains = ['nohost.me', 'noho.st', 'ynh.fr']
 
 const dynDnsForbiden = computed(() => {
-  if (!domains.value) return false
-  return domains.value.some((domain) => {
+  if (!props.domains) return false
+  return props.domains.some((domain) => {
     return dynDomains.some((dynDomain) => domain.includes(dynDomain))
   })
 })
diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/domain/DomainAdd.vue
index 695401cb2..56eae2a5c 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -4,12 +4,14 @@ import { useRouter } from 'vue-router'
 
 import api from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
+import { useDomains } from '@/composables/data'
 import { DomainForm } from '@/views/_partials'
 
 const router = useRouter()
 
 await api.fetch({ uri: 'domains', cachePath: 'domains' })
 
+const { domains } = useDomains()
 const serverError = ref('')
 
 function onSubmit(data: { domain: string; dyndns_recovery_password?: string }) {
@@ -32,6 +34,7 @@ function onSubmit(data: { domain: string; dyndns_recovery_password?: string }) {
 
 <template>
   <DomainForm
+    :domains="domains"
     :title="$t('domain_add')"
     :server-error="serverError"
     :submit-text="$t('add')"

From 2ba27d6c33b51eb34ec5547d818810098048f125 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 21 Aug 2024 21:55:24 +0200
Subject: [PATCH 220/275] fix: redirect to home in PostInstall if already
 installed

---
 app/src/views/PostInstall.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index f76a4ecdb..5e85602a9 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import router from '@/router'
 import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -6,6 +7,7 @@ import api from '@/api'
 import { APIBadRequestError } from '@/api/errors'
 import { useForm } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { useInfos } from '@/composables/useInfos'
 import {
   alphalownumdot_,
   minLength,
@@ -20,6 +22,11 @@ import { DomainForm } from '@/views/_partials'
 
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
+const { installed } = useInfos()
+
+if (installed.value) {
+  router.push({ name: 'home' })
+}
 
 type Steps = 'start' | 'domain' | 'user' | 'rootfsspace-error' | 'login'
 const step = ref<Steps>('start')

From d2cf9522b11b47ae1e051a7207abf858e0a111a9 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 22 Aug 2024 00:45:07 +0200
Subject: [PATCH 221/275] refactor: use defineModel

---
 app/src/components/globals/CardForm.vue         | 10 +++++-----
 app/src/components/globals/FormField.vue        |  6 ++----
 .../components/globals/FormFieldMultiple.vue    | 17 +++++++++--------
 .../components/globals/FormFieldReadonly.vue    |  5 +++--
 app/src/components/globals/ViewSearch.vue       |  2 --
 .../components/globals/formItems/AdressItem.vue |  1 -
 .../globals/formItems/CheckboxItem.vue          |  9 ++-------
 .../components/globals/formItems/FileItem.vue   |  9 ++++++---
 .../components/globals/formItems/InputItem.vue  | 12 ++++--------
 .../components/globals/formItems/TagsItem.vue   |  5 ++---
 .../globals/formItems/TagsSelectizeItem.vue     |  9 ++++-----
 .../globals/formItems/TextAreaItem.vue          |  4 ++--
 app/src/types/form.ts                           | 11 ++++-------
 13 files changed, 43 insertions(+), 57 deletions(-)

diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index ad5e29881..a0ad8b6d9 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -19,7 +19,6 @@ import { isDisplayComponent, isWritableComponent } from '@/types/form'
 const props = withDefaults(
   defineProps<{
     id?: string
-    modelValue?: MV
     fields?: FFD
     validations?: FormValidation<MV>
     submitText?: string
@@ -31,7 +30,6 @@ const props = withDefaults(
   }>(),
   {
     id: 'ynh-form',
-    modelValue: undefined,
     fields: undefined,
     validations: undefined,
     submitText: undefined,
@@ -71,6 +69,8 @@ const slots = defineSlots<
   }
 >()
 
+const modelValue = defineModel<MV>()
+
 const { t } = useI18n()
 
 const globalErrorFeedback = computed(() => {
@@ -94,7 +94,7 @@ const sections = computed(() => {
 
 function onModelUpdate(key: keyof MV, value: MV[keyof MV]) {
   emit('update:modelValue', {
-    ...props.modelValue!,
+    ...modelValue.value!,
     [key]: value,
   })
 }
@@ -119,7 +119,7 @@ const Fields = createReusableTemplate<{
           <FormField
             v-if="!field.readonly"
             v-bind="field"
-            :model-value="props.modelValue![k]"
+            :model-value="modelValue![k]"
             :validation="props.validations?.form[k]"
             @update:model-value="onModelUpdate(k, $event)"
           >
@@ -130,7 +130,7 @@ const Fields = createReusableTemplate<{
           <FormFieldReadonly
             v-else
             v-bind="field"
-            :model-value="props.modelValue![k]"
+            :model-value="modelValue![k]"
           />
         </slot>
         <slot
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 7972e812b..fb5ac7e17 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -36,7 +36,6 @@ const props = withDefaults(defineProps<FormFieldProps<C, MV>>(), {
   prepend: undefined,
   rules: undefined,
 
-  modelValue: undefined,
   validation: undefined,
 })
 
@@ -51,7 +50,7 @@ const slots = defineSlots<{
   description?: any
 }>()
 
-const model = defineModel<MV>()
+const modelValue = defineModel<MV>()
 
 const attrs = useAttrs()
 const { t } = useI18n()
@@ -137,7 +136,6 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
       v-bind="{
         ...(props.cProps ?? ({} as ItemComponentToItemProps[C])),
         ariaDescribedby,
-        modelValue: props.modelValue,
         state,
         validation: validation,
       }"
@@ -146,7 +144,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
       <Component
         v-bind="props.cProps"
         :is="component"
-        v-model="model"
+        v-model="modelValue"
         :aria-describedby="ariaDescribedby"
         :state="state"
         :validation="validation"
diff --git a/app/src/components/globals/FormFieldMultiple.vue b/app/src/components/globals/FormFieldMultiple.vue
index bd1b3a2fc..3f9e8fbaf 100644
--- a/app/src/components/globals/FormFieldMultiple.vue
+++ b/app/src/components/globals/FormFieldMultiple.vue
@@ -44,13 +44,12 @@ const props = withDefaults(
     defaultValue: undefined,
     addBtnText: undefined,
 
-    modelValue: undefined,
     validation: undefined,
   },
 )
 
 const emit = defineEmits<{
-  'update:modelValue': [value: MV]
+  'update:modelValue': [modelValue: MV]
 }>()
 
 const slots = defineSlots<{
@@ -62,6 +61,8 @@ const slots = defineSlots<{
   description?: () => any
 }>()
 
+const modelValue = defineModel<MV>()
+
 const { t } = useI18n()
 
 const attrs = useAttrs()
@@ -104,7 +105,7 @@ const error = computed(() => {
 
 const subProps = computed<FormFieldProps<C, ArrInnerType<MV>>[]>(() => {
   return (
-    props.modelValue?.map((modelValue: ArrInnerType<MV>, i) => {
+    modelValue.value?.map((modelValue: ArrInnerType<MV>, i) => {
       return {
         cProps: {
           ...(props.cProps ?? ({} as ItemComponentToItemProps[C])),
@@ -143,22 +144,22 @@ const errorMessage = computed(() => {
 })
 
 function addElement() {
-  const value = [...(props?.modelValue || []), props.defaultValue!()] as MV
+  const value = [...(modelValue.value || []), props.defaultValue!()] as MV
   emit('update:modelValue', value)
 
   // FIXME: Focus newly inserted form item
 }
 
 function removeElement(index: number) {
-  if (!props.modelValue) return
-  const value = [...props.modelValue] as MV
+  if (!modelValue.value) return
+  const value = [...modelValue.value] as MV
   value.splice(index, 1)
   emit('update:modelValue', value)
 }
 
 function updateElement(index: number, newValue: ArrInnerType<MV>) {
-  if (!props.modelValue) return
-  const value = [...props.modelValue] as MV
+  if (!modelValue.value) return
+  const value = [...modelValue.value] as MV
   value.splice(index, 1, newValue)
   emit('update:modelValue', value)
 }
diff --git a/app/src/components/globals/FormFieldReadonly.vue b/app/src/components/globals/FormFieldReadonly.vue
index 6214a32e5..b753f93fa 100644
--- a/app/src/components/globals/FormFieldReadonly.vue
+++ b/app/src/components/globals/FormFieldReadonly.vue
@@ -19,10 +19,11 @@ defineOptions({
 
 const props = withDefaults(defineProps<FormFieldReadonlyProps<C, MV>>(), {
   id: undefined,
-  modelValue: undefined,
   cols: () => ({ md: 4, lg: 3 }),
 })
 
+const modelValue = defineModel<MV>()
+
 const { t } = useI18n()
 
 const cols = computed<Cols>(() => ({
@@ -32,7 +33,7 @@ const cols = computed<Cols>(() => ({
 }))
 
 const text = computed(() => {
-  return parseValue(props.modelValue)
+  return parseValue(modelValue.value)
 })
 
 function parseValue(value: any) {
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index 0b7c03d48..770625df9 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -9,11 +9,9 @@ const props = withDefaults(
   defineProps<{
     items?: T[] | null
     itemsName: string | null
-    modelValue?: string
   }>(),
   {
     items: undefined,
-    modelValue: undefined,
   },
 )
 
diff --git a/app/src/components/globals/formItems/AdressItem.vue b/app/src/components/globals/formItems/AdressItem.vue
index 5e2caf727..3922a34ea 100644
--- a/app/src/components/globals/formItems/AdressItem.vue
+++ b/app/src/components/globals/formItems/AdressItem.vue
@@ -14,7 +14,6 @@ withDefaults(
     touchKey: undefined,
     type: 'email',
 
-    modelValue: undefined,
     state: undefined,
     validation: undefined,
     ariaDescribedby: undefined,
diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index 51d53d7ac..42d469e7b 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -12,23 +12,18 @@ withDefaults(
     labels: () => ({ true: 'yes', false: 'no' }),
 
     ariaDescribedby: undefined,
-    modelValue: undefined,
     state: undefined,
     validation: undefined,
   },
 )
 
-defineEmits<{
-  'update:modelValue': [value: boolean]
-}>()
-
-const model = defineModel<boolean>()
+const modelValue = defineModel<boolean>()
 </script>
 
 <template>
   <BFormCheckbox
     :id="id"
-    v-model="model"
+    v-model="modelValue"
     :name="name"
     :aria-describedby="ariaDescribedby"
     :state="state"
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 61c96f71b..f90c1f065 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -21,7 +21,6 @@ const props = withDefaults(
     dropPlaceholder: undefined,
 
     ariaDescribedby: undefined,
-    modelValue: () => ({ file: null }),
     state: undefined,
     validation: undefined,
   },
@@ -31,13 +30,17 @@ const emit = defineEmits<{
   'update:modelValue': [value: FileModelValue]
 }>()
 
+const modelValue = defineModel<FileModelValue>({
+  default: () => ({ file: null }),
+})
+
 const touch = inject(ValidationTouchSymbol)
 const inputElem = ref<InstanceType<typeof BFormFile> | null>(null)
 
 const placeholder = computed(() => {
-  return props.modelValue.file === null
+  return modelValue.value.file === null
     ? props.placeholder
-    : props.modelValue.file.name
+    : modelValue.value.file.name
 })
 
 function onInput(file: File | File[] | null) {
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index 4ca4e5918..bf5d7a02a 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -20,18 +20,12 @@ const props = withDefaults(
     type: 'text',
 
     ariaDescribedby: undefined,
-    modelValue: undefined,
     state: undefined,
     validation: undefined,
   },
 )
-defineEmits<{
-  'update:modelValue': [value: string | number | null]
-}>()
 
-const touch = inject(ValidationTouchSymbol)
-
-const model = defineModel<string | number | null>({
+const modelValue = defineModel<string | number | null>({
   set(value) {
     if (props.type === 'number' && typeof value === 'string') {
       if (value === '') return ''
@@ -41,6 +35,8 @@ const model = defineModel<string | number | null>({
   },
 })
 
+const touch = inject(ValidationTouchSymbol)
+
 const autocomplete = computed(() => {
   const typeToAutocomplete = {
     password: 'new-password',
@@ -64,7 +60,7 @@ const fromValidation = computed(() => {
   <BFormInput
     :id="id"
     v-bind="fromValidation"
-    v-model="model"
+    v-model="modelValue"
     :name="name"
     :placeholder="placeholder"
     :autocomplete="autocomplete"
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index ad0d633be..a85e19745 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -15,7 +15,6 @@ const props = withDefaults(
     // options: undefined,
 
     ariaDescribedby: undefined,
-    modelValue: undefined,
     state: undefined,
     validation: undefined,
   },
@@ -23,7 +22,7 @@ const props = withDefaults(
 
 const touch = inject(ValidationTouchSymbol)
 
-const model = defineModel<string[]>()
+const modelValue = defineModel<string[]>()
 
 const required = computed(() => 'required' in (props?.validation ?? {}))
 
@@ -34,7 +33,7 @@ const required = computed(() => 'required' in (props?.validation ?? {}))
 <template>
   <BFormTags
     :id="id"
-    v-model="model"
+    v-model="modelValue"
     :name="name"
     :placeholder="placeholder"
     :limit="limit"
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index 0f0cec56f..f8da44ff7 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -30,18 +30,17 @@ const props = withDefaults(
     tagIcon: undefined,
 
     ariaDescribedby: undefined,
-    modelValue: undefined,
     state: undefined,
     validation: undefined,
   },
 )
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string[]]
   'tag-update': [value: TagUpdateArgs]
 }>()
 
-const model = defineModel<string[]>()
+const modelValue = defineModel<string[]>()
+
 const searchElem = ref<InstanceType<typeof BDropdown> | null>(null)
 const dropdownElem = ref<InstanceType<typeof BFormInput> | null>(null)
 
@@ -55,7 +54,7 @@ const availableOptions = computed(() => {
   return props.options.filter((opt) => {
     const tag = typeof opt === 'string' ? opt : opt.value
     let filterIn =
-      model.value?.indexOf(tag) === -1 &&
+      modelValue.value?.indexOf(tag) === -1 &&
       !(props.disabledItems?.includes(tag) ?? false)
     if (filterIn && criteria.value) {
       filterIn = tag.toLowerCase().indexOf(criteria.value) > -1
@@ -120,7 +119,7 @@ function onDropdownKeydown(e: KeyboardEvent) {
     <BFormTags
       v-bind="$attrs"
       :id="id"
-      v-model="model"
+      v-model="modelValue"
       :name="name"
       :aria-describedby="ariaDescribedby"
       :state="state"
diff --git a/app/src/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index 12b49af34..d5e35301c 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -24,7 +24,7 @@ defineEmits<{
   'update:modelValue': [value: string | null]
 }>()
 
-const model = defineModel<string>()
+const modelValue = defineModel<string>()
 
 const touch = inject(ValidationTouchSymbol)
 
@@ -34,7 +34,7 @@ const required = computed(() => 'required' in (props?.validation ?? {}))
 <template>
   <BFormTextarea
     :id="id"
-    v-model="model"
+    v-model="modelValue"
     :name="name"
     :placeholder="placeholder"
     :aria-describedby="ariaDescribedby"
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 584207845..63301890b 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -55,7 +55,6 @@ type BaseWritableItemProps = {
 
 export type BaseItemComputedProps<MV extends any = any> = {
   ariaDescribedby?: string | string[]
-  modelValue?: MV
   state?: StateValidation
   validation?: BaseValidation
 }
@@ -238,8 +237,7 @@ type FormFieldRules<MV extends any> = MV extends object
     : ValidationArgs<MV | Partial<MV>>
   : ValidationRuleCollection<MV>
 
-type BaseFormFieldComputedProps<MV extends any = any> = {
-  modelValue?: MV
+type BaseFormFieldComputedProps = {
   validation?: BaseValidation
 }
 
@@ -295,14 +293,13 @@ export type FormFieldProps<
   C extends AnyWritableComponents,
   MV extends any,
 > = Omit<FormField<C, MV>, 'hr' | 'visible' | 'readonly'> &
-  BaseFormFieldComputedProps<MV>
+  BaseFormFieldComputedProps
+// BaseFormFieldComputedProps<MV>
 
 export type FormFieldReadonlyProps<
   C extends AnyWritableComponents,
   MV extends any,
-> = Omit<FormFieldReadonly<C>, 'hr' | 'visible' | 'readonly' | 'rules'> & {
-  modelValue?: MV
-}
+> = Omit<FormFieldReadonly<C>, 'hr' | 'visible' | 'readonly' | 'rules'>
 
 export type FormFieldDict<T extends Obj = Obj> = {
   [k in keyof T | string]: k extends keyof T

From ee6f93505f4212722f38215a8008a3900e4c2dec Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 22 Aug 2024 00:49:28 +0200
Subject: [PATCH 222/275] fix: wrong route name in breadcrumb

---
 app/src/composables/useInfos.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/src/composables/useInfos.ts b/app/src/composables/useInfos.ts
index 1fe90b1da..cbbbd8031 100644
--- a/app/src/composables/useInfos.ts
+++ b/app/src/composables/useInfos.ts
@@ -91,7 +91,11 @@ export const useInfos = createGlobalState(() => {
           `Route ${name}, declared in breadcrumd, cannot be found in routes.`,
         )
       }
-      return { name: to.name, params: to.params, args: route.meta.args || {} }
+      return {
+        name: route.name,
+        params: to.params,
+        args: route.meta.args || {},
+      }
     })
 
     updateHtmlTitle()

From 4004e680a442e3772ef475991bf71e4365f7a89f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 22 Aug 2024 00:56:46 +0200
Subject: [PATCH 223/275] chore: lint

---
 app/src/App.vue                               |  9 +++++--
 app/src/components/globals/YCard.vue          |  5 +++-
 app/src/components/globals/YListItem.vue      |  3 ++-
 .../globals/skeletons/BSkeletonWrapper.vue    |  2 +-
 app/src/composables/data.ts                   |  5 +---
 app/src/composables/useInfos.ts               |  3 +--
 app/src/types/form.ts                         | 10 ++++----
 app/src/views/backup/BackupInfo.vue           |  2 +-
 app/src/views/user/UserEdit.vue               |  2 +-
 app/tsconfig.node.json                        | 24 +++++++++----------
 10 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index b4a513703..be09de55a 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -11,7 +11,7 @@ const { locked } = useRequests()
 const { spinner, dark } = useSettings()
 
 const ready = ref(false)
-onAppCreated().then(() => ready.value = true)
+onAppCreated().then(() => (ready.value = true))
 
 onMounted(() => {
   const copypastaCode = ['ArrowDown', 'ArrowDown', 'ArrowUp', 'ArrowUp']
@@ -87,7 +87,12 @@ onMounted(() => {
 
         <BNavbarNav class="ms-auto">
           <li class="nav-item">
-            <BButton :href="ssoLink" variant="primary" size="sm" class="d-block">
+            <BButton
+              :href="ssoLink"
+              variant="primary"
+              size="sm"
+              class="d-block"
+            >
               {{ $t('user_interface_link') }} <YIcon iname="user" />
             </BButton>
           </li>
diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index 088f3d29d..e377507e1 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -39,7 +39,10 @@ const visible = ref(!props.collapsed)
 </script>
 
 <template>
-  <BCard :no-body="collapsible ? true : noBody" :class="{ 'border-0': asTab, 'collapsible': collapsible }">
+  <BCard
+    :no-body="collapsible ? true : noBody"
+    :class="{ 'border-0': asTab, collapsible: collapsible }"
+  >
     <template v-if="!asTab" #header>
       <div class="w-100 d-flex align-items-center flex-wrap custom-header">
         <slot name="header">
diff --git a/app/src/components/globals/YListItem.vue b/app/src/components/globals/YListItem.vue
index 768500c0c..55371c28d 100644
--- a/app/src/components/globals/YListItem.vue
+++ b/app/src/components/globals/YListItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = withDefaults(
+withDefaults(
   defineProps<{
     label: string
     sublabel?: string
@@ -7,6 +7,7 @@ const props = withDefaults(
   }>(),
   {
     sublabel: undefined,
+    description: undefined,
   },
 )
 
diff --git a/app/src/components/globals/skeletons/BSkeletonWrapper.vue b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
index b080c530b..e2200d837 100644
--- a/app/src/components/globals/skeletons/BSkeletonWrapper.vue
+++ b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
@@ -4,7 +4,7 @@ withDefaults(defineProps<{ button: boolean; search: boolean }>(), {
   search: false,
 })
 
-const slots = defineSlots<{
+defineSlots<{
   default: any
 }>()
 </script>
diff --git a/app/src/composables/data.ts b/app/src/composables/data.ts
index 2ee4b8bdc..c0b69cc87 100644
--- a/app/src/composables/data.ts
+++ b/app/src/composables/data.ts
@@ -127,10 +127,7 @@ export function useUsersAndGroups(username?: MaybeRefOrGetter<string>) {
   }
 }
 
-export function useDomains(
-  domain_?: MaybeRefOrGetter<string>,
-  installed: boolean = true,
-) {
+export function useDomains(domain_?: MaybeRefOrGetter<string>) {
   const { mainDomain, domains: domains_, domainDetails } = useData()
 
   const domains = computed(() => {
diff --git a/app/src/composables/useInfos.ts b/app/src/composables/useInfos.ts
index cbbbd8031..c3edd765c 100644
--- a/app/src/composables/useInfos.ts
+++ b/app/src/composables/useInfos.ts
@@ -21,7 +21,7 @@ type BreadcrumbRoutes = {
   args: RouteMeta['args']
 }
 
-function formatRoute({ name, params, args }: BreadcrumbRoutes) {
+function formatRoute({ params, args }: BreadcrumbRoutes) {
   const { trad, param } = args
   // if a traduction key string has been given and we also need to pass
   // the route param as a variable.
@@ -47,7 +47,6 @@ export const useInfos = createGlobalState(() => {
 
   const breadcrumb = computed(() => {
     return breadcrumbRoutes.value.map((to) => {
-      console.log(to)
       return { to: { name: to.name }, text: formatRoute(to) }
     })
   })
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 63301890b..1c80645be 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -53,7 +53,7 @@ type BaseWritableItemProps = {
   disabled?: boolean
 }
 
-export type BaseItemComputedProps<MV extends any = any> = {
+export type BaseItemComputedProps = {
   ariaDescribedby?: string | string[]
   state?: StateValidation
   validation?: BaseValidation
@@ -296,10 +296,10 @@ export type FormFieldProps<
   BaseFormFieldComputedProps
 // BaseFormFieldComputedProps<MV>
 
-export type FormFieldReadonlyProps<
-  C extends AnyWritableComponents,
-  MV extends any,
-> = Omit<FormFieldReadonly<C>, 'hr' | 'visible' | 'readonly' | 'rules'>
+export type FormFieldReadonlyProps<C extends AnyWritableComponents> = Omit<
+  FormFieldReadonly<C>,
+  'hr' | 'visible' | 'readonly' | 'rules'
+>
 
 export type FormFieldDict<T extends Obj = Obj> = {
   [k in keyof T | string]: k extends keyof T
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index 760bb3410..e28594630 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -191,7 +191,7 @@ function downloadBackup() {
           >
             <div class="me-2">
               <h5>
-                <span  class="fw-bold">{{ item.name }}</span>
+                <span class="fw-bold">{{ item.name }}</span>
                 <small class="ms-1 text-secondary">
                   {{ appName }} ({{ humanSize(item.size) }})
                 </small>
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 4479a5f45..cdab2fe32 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -40,7 +40,7 @@ const { user } = useUsersAndGroups(() => props.name)
 // mailbox-quota could be 'No quota' or 'Pas de quota'...
 const mailboxQuota =
   parseInt(user.value['mailbox-quota'].limit) > 0
-    ? sizeToM(user.value['mailbox-quota'].limit) ?? 0
+    ? (sizeToM(user.value['mailbox-quota'].limit) ?? 0)
     : 0
 
 type Form = typeof form.value
diff --git a/app/tsconfig.node.json b/app/tsconfig.node.json
index 81c218077..1a555ac37 100644
--- a/app/tsconfig.node.json
+++ b/app/tsconfig.node.json
@@ -1,14 +1,12 @@
 {
-    "compilerOptions": {
-      "composite": true,
-      "skipLibCheck": true,
-      "module": "ESNext",
-      "moduleResolution": "bundler",
-      "allowSyntheticDefaultImports": true,
-      "strict": true,
-      "types": [
-        "node"
-      ]
-    },
-    "include": ["vite.config.ts"]
-  }
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts"]
+}

From d60dc9297e3be6914098a59ebb6bd6444f14b041 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 22 Aug 2024 00:57:13 +0200
Subject: [PATCH 224/275] chore: downgrade eslint + upgrade vueuse

---
 app/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/package.json b/app/package.json
index 8e5a31f78..327d2d4e9 100644
--- a/app/package.json
+++ b/app/package.json
@@ -17,7 +17,7 @@
     "@fontsource/firago": "^5.0.11",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.11.1",
+    "@vueuse/core": "^11.0.1",
     "bootstrap": "^5.3.3",
     "bootstrap-vue-next": "^0.24.7",
     "date-fns": "^3.6.0",
@@ -34,7 +34,7 @@
     "@vitejs/plugin-vue": "^5.1.2",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.1",
-    "eslint": "^9.9.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-vue": "^9.27.0",

From 052da9d085acf7dd14a8ea32ed4d1593dd720f52 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 22 Aug 2024 01:01:29 +0200
Subject: [PATCH 225/275] chore: update components.d.ts

---
 app/components.d.ts | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/components.d.ts b/app/components.d.ts
index 84371e35e..1d1de8ad8 100644
--- a/app/components.d.ts
+++ b/app/components.d.ts
@@ -1,24 +1,27 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     AdressItem: typeof import('./src/components/globals/formItems/AdressItem.vue')['default']
     AppCatalogSkeleton: typeof import('./src/components/globals/skeletons/AppCatalogSkeleton.vue')['default']
     BAccordion: typeof import('bootstrap-vue-next')['BAccordion']
     BAccordionItem: typeof import('bootstrap-vue-next')['BAccordionItem']
+    BBadge: typeof import('bootstrap-vue-next')['BBadge']
     BBreadcrumb: typeof import('bootstrap-vue-next')['BBreadcrumb']
     BBreadcrumbItem: typeof import('bootstrap-vue-next')['BBreadcrumbItem']
     BButton: typeof import('bootstrap-vue-next')['BButton']
+    BButtonGroup: typeof import('bootstrap-vue-next')['BButtonGroup']
     BButtonToolbar: typeof import('bootstrap-vue-next')['BButtonToolbar']
     BCard: typeof import('bootstrap-vue-next')['BCard']
     BCardBody: typeof import('bootstrap-vue-next')['BCardBody']
     BCardGroup: typeof import('bootstrap-vue-next')['BCardGroup']
     BCardHeader: typeof import('bootstrap-vue-next')['BCardHeader']
+    BCardText: typeof import('bootstrap-vue-next')['BCardText']
     BCardTitle: typeof import('bootstrap-vue-next')['BCardTitle']
     BCol: typeof import('bootstrap-vue-next')['BCol']
     BCollapse: typeof import('bootstrap-vue-next')['BCollapse']
@@ -26,19 +29,24 @@ declare module 'vue' {
     BDropdownDivider: typeof import('bootstrap-vue-next')['BDropdownDivider']
     BDropdownForm: typeof import('bootstrap-vue-next')['BDropdownForm']
     BDropdownGroup: typeof import('bootstrap-vue-next')['BDropdownGroup']
+    BDropdownItem: typeof import('bootstrap-vue-next')['BDropdownItem']
     BDropdownItemButton: typeof import('bootstrap-vue-next')['BDropdownItemButton']
     BDropdownText: typeof import('bootstrap-vue-next')['BDropdownText']
     BForm: typeof import('bootstrap-vue-next')['BForm']
     BFormCheckbox: typeof import('bootstrap-vue-next')['BFormCheckbox']
+    BFormCheckboxGroup: typeof import('bootstrap-vue-next')['BFormCheckboxGroup']
     BFormFile: typeof import('bootstrap-vue-next')['BFormFile']
     BFormGroup: typeof import('bootstrap-vue-next')['BFormGroup']
     BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
+    BFormInvalidFeedback: typeof import('bootstrap-vue-next')['BFormInvalidFeedback']
     BFormRadio: typeof import('bootstrap-vue-next')['BFormRadio']
+    BFormRadioGroup: typeof import('bootstrap-vue-next')['BFormRadioGroup']
     BFormSelect: typeof import('bootstrap-vue-next')['BFormSelect']
     BFormSelectOption: typeof import('bootstrap-vue-next')['BFormSelectOption']
     BFormTag: typeof import('bootstrap-vue-next')['BFormTag']
     BFormTags: typeof import('bootstrap-vue-next')['BFormTags']
     BFormTextarea: typeof import('bootstrap-vue-next')['BFormTextarea']
+    BImg: typeof import('bootstrap-vue-next')['BImg']
     BInputGroup: typeof import('bootstrap-vue-next')['BInputGroup']
     BInputGroupText: typeof import('bootstrap-vue-next')['BInputGroupText']
     BLink: typeof import('bootstrap-vue-next')['BLink']
@@ -59,8 +67,10 @@ declare module 'vue' {
     BRow: typeof import('bootstrap-vue-next')['BRow']
     BSkeleton: typeof import('./src/components/globals/skeletons/BSkeleton.vue')['default']
     BSkeletonWrapper: typeof import('./src/components/globals/skeletons/BSkeletonWrapper.vue')['default']
+    BTab: typeof import('bootstrap-vue-next')['BTab']
+    BTable: typeof import('bootstrap-vue-next')['BTable']
+    BTabs: typeof import('bootstrap-vue-next')['BTabs']
     ButtonItem: typeof import('./src/components/globals/formItems/ButtonItem.vue')['default']
-    CardButtonsSkeleton: typeof import('./src/components/globals/skeletons/CardButtonsSkeleton.vue')['default']
     CardCollapse: typeof import('./src/components/CardCollapse.vue')['default']
     CardDeckFeed: typeof import('./src/components/CardDeckFeed.vue')['default']
     CardForm: typeof import('./src/components/globals/CardForm.vue')['default']
@@ -103,9 +113,13 @@ declare module 'vue' {
     YCard: typeof import('./src/components/globals/YCard.vue')['default']
     YIcon: typeof import('./src/components/globals/YIcon.vue')['default']
     YListGroupItem: typeof import('./src/components/globals/YListGroupItem.vue')['default']
+    YListItem: typeof import('./src/components/globals/YListItem.vue')['default']
     YSpinner: typeof import('./src/components/globals/YSpinner.vue')['default']
   }
   export interface ComponentCustomProperties {
+    vBModal: typeof import('bootstrap-vue-next')['vBModal']
+    vBPopover: typeof import('bootstrap-vue-next')['vBPopover']
+    vBToggle: typeof import('bootstrap-vue-next')['vBToggle']
     vBTooltip: typeof import('bootstrap-vue-next')['vBTooltip']
   }
 }

From 931c0bced39e16bdbeccbaee51ce72f4d2c2c2a1 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 22 Aug 2024 01:01:48 +0200
Subject: [PATCH 226/275] chore: update yarn.lock

---
 app/yarn.lock | 1425 ++++++++++++++++++++++++++++---------------------
 1 file changed, 824 insertions(+), 601 deletions(-)

diff --git a/app/yarn.lock b/app/yarn.lock
index 178d74834..92bebd353 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -2,135 +2,151 @@
 # yarn lockfile v1
 
 
-"@aashutoshrathi/word-wrap@^1.2.3":
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
-  integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
-
-"@antfu/utils@^0.7.6":
-  version "0.7.7"
-  resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.7.7.tgz#26ea493a831b4f3a85475e7157be02fb4eab51fb"
-  integrity sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==
-
-"@babel/parser@^7.23.9":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.1.tgz#1e416d3627393fab1cb5b0f2f1796a100ae9133a"
-  integrity sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==
-
-"@esbuild/aix-ppc64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f"
-  integrity sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==
-
-"@esbuild/android-arm64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz#7ad65a36cfdb7e0d429c353e00f680d737c2aed4"
-  integrity sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==
-
-"@esbuild/android-arm@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.19.12.tgz#b0c26536f37776162ca8bde25e42040c203f2824"
-  integrity sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==
-
-"@esbuild/android-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.19.12.tgz#cb13e2211282012194d89bf3bfe7721273473b3d"
-  integrity sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==
-
-"@esbuild/darwin-arm64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz#cbee41e988020d4b516e9d9e44dd29200996275e"
-  integrity sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==
-
-"@esbuild/darwin-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz#e37d9633246d52aecf491ee916ece709f9d5f4cd"
-  integrity sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==
-
-"@esbuild/freebsd-arm64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz#1ee4d8b682ed363b08af74d1ea2b2b4dbba76487"
-  integrity sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==
-
-"@esbuild/freebsd-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz#37a693553d42ff77cd7126764b535fb6cc28a11c"
-  integrity sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==
-
-"@esbuild/linux-arm64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz#be9b145985ec6c57470e0e051d887b09dddb2d4b"
-  integrity sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==
-
-"@esbuild/linux-arm@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz#207ecd982a8db95f7b5279207d0ff2331acf5eef"
-  integrity sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==
-
-"@esbuild/linux-ia32@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz#d0d86b5ca1562523dc284a6723293a52d5860601"
-  integrity sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==
-
-"@esbuild/linux-loong64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz#9a37f87fec4b8408e682b528391fa22afd952299"
-  integrity sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==
-
-"@esbuild/linux-mips64el@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz#4ddebd4e6eeba20b509d8e74c8e30d8ace0b89ec"
-  integrity sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==
-
-"@esbuild/linux-ppc64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz#adb67dadb73656849f63cd522f5ecb351dd8dee8"
-  integrity sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==
-
-"@esbuild/linux-riscv64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz#11bc0698bf0a2abf8727f1c7ace2112612c15adf"
-  integrity sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==
-
-"@esbuild/linux-s390x@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz#e86fb8ffba7c5c92ba91fc3b27ed5a70196c3cc8"
-  integrity sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==
-
-"@esbuild/linux-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz#5f37cfdc705aea687dfe5dfbec086a05acfe9c78"
-  integrity sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==
-
-"@esbuild/netbsd-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz#29da566a75324e0d0dd7e47519ba2f7ef168657b"
-  integrity sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==
-
-"@esbuild/openbsd-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz#306c0acbdb5a99c95be98bdd1d47c916e7dc3ff0"
-  integrity sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==
-
-"@esbuild/sunos-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz#0933eaab9af8b9b2c930236f62aae3fc593faf30"
-  integrity sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==
-
-"@esbuild/win32-arm64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz#773bdbaa1971b36db2f6560088639ccd1e6773ae"
-  integrity sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==
-
-"@esbuild/win32-ia32@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz#000516cad06354cc84a73f0943a4aa690ef6fd67"
-  integrity sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==
-
-"@esbuild/win32-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz#c57c8afbb4054a3ab8317591a0b7320360b444ae"
-  integrity sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==
+"@antfu/utils@^0.7.10":
+  version "0.7.10"
+  resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.7.10.tgz#ae829f170158e297a9b6a28f161a8e487d00814d"
+  integrity sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==
+
+"@babel/helper-string-parser@^7.24.8":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
+  integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
+
+"@babel/helper-validator-identifier@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
+  integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
+
+"@babel/parser@^7.24.7":
+  version "7.25.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.3.tgz#91fb126768d944966263f0657ab222a642b82065"
+  integrity sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==
+  dependencies:
+    "@babel/types" "^7.25.2"
+
+"@babel/types@^7.25.2":
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.2.tgz#55fb231f7dc958cd69ea141a4c2997e819646125"
+  integrity sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==
+  dependencies:
+    "@babel/helper-string-parser" "^7.24.8"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    to-fast-properties "^2.0.0"
+
+"@esbuild/aix-ppc64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz#c7184a326533fcdf1b8ee0733e21c713b975575f"
+  integrity sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==
+
+"@esbuild/android-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz#09d9b4357780da9ea3a7dfb833a1f1ff439b4052"
+  integrity sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==
+
+"@esbuild/android-arm@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.21.5.tgz#9b04384fb771926dfa6d7ad04324ecb2ab9b2e28"
+  integrity sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==
+
+"@esbuild/android-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.21.5.tgz#29918ec2db754cedcb6c1b04de8cd6547af6461e"
+  integrity sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==
+
+"@esbuild/darwin-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz#e495b539660e51690f3928af50a76fb0a6ccff2a"
+  integrity sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==
+
+"@esbuild/darwin-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz#c13838fa57372839abdddc91d71542ceea2e1e22"
+  integrity sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==
+
+"@esbuild/freebsd-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz#646b989aa20bf89fd071dd5dbfad69a3542e550e"
+  integrity sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==
+
+"@esbuild/freebsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz#aa615cfc80af954d3458906e38ca22c18cf5c261"
+  integrity sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==
+
+"@esbuild/linux-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz#70ac6fa14f5cb7e1f7f887bcffb680ad09922b5b"
+  integrity sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==
+
+"@esbuild/linux-arm@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz#fc6fd11a8aca56c1f6f3894f2bea0479f8f626b9"
+  integrity sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==
+
+"@esbuild/linux-ia32@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz#3271f53b3f93e3d093d518d1649d6d68d346ede2"
+  integrity sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==
+
+"@esbuild/linux-loong64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz#ed62e04238c57026aea831c5a130b73c0f9f26df"
+  integrity sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==
+
+"@esbuild/linux-mips64el@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz#e79b8eb48bf3b106fadec1ac8240fb97b4e64cbe"
+  integrity sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==
+
+"@esbuild/linux-ppc64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz#5f2203860a143b9919d383ef7573521fb154c3e4"
+  integrity sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==
+
+"@esbuild/linux-riscv64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz#07bcafd99322d5af62f618cb9e6a9b7f4bb825dc"
+  integrity sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==
+
+"@esbuild/linux-s390x@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz#b7ccf686751d6a3e44b8627ababc8be3ef62d8de"
+  integrity sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==
+
+"@esbuild/linux-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz#6d8f0c768e070e64309af8004bb94e68ab2bb3b0"
+  integrity sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==
+
+"@esbuild/netbsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz#bbe430f60d378ecb88decb219c602667387a6047"
+  integrity sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==
+
+"@esbuild/openbsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz#99d1cf2937279560d2104821f5ccce220cb2af70"
+  integrity sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==
+
+"@esbuild/sunos-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz#08741512c10d529566baba837b4fe052c8f3487b"
+  integrity sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==
+
+"@esbuild/win32-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz#675b7385398411240735016144ab2e99a60fc75d"
+  integrity sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==
+
+"@esbuild/win32-ia32@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz#1bfc3ce98aa6ca9a0969e4d2af72144c59c1193b"
+  integrity sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==
+
+"@esbuild/win32-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz#acad351d582d157bb145535db2a6ff53dd514b5c"
+  integrity sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==
 
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
@@ -139,10 +155,10 @@
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
-"@eslint-community/regexpp@^4.6.1":
-  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
-  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
+"@eslint-community/regexpp@^4.10.0", "@eslint-community/regexpp@^4.6.1":
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.11.0.tgz#b0ffd0312b4a3fd2d6f77237e7248a5ad3a680ae"
+  integrity sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==
 
 "@eslint/eslintrc@^2.1.4":
   version "2.1.4"
@@ -164,44 +180,15 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
-"@floating-ui/core@^1.0.0":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
-  integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
-  dependencies:
-    "@floating-ui/utils" "^0.2.1"
-
-"@floating-ui/dom@^1.6.1":
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
-  integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
-  dependencies:
-    "@floating-ui/core" "^1.0.0"
-    "@floating-ui/utils" "^0.2.0"
-
-"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
-  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
-
-"@floating-ui/vue@^1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-1.0.6.tgz#31860a12f1135d19554c232d99c5bab631c5c576"
-  integrity sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==
-  dependencies:
-    "@floating-ui/dom" "^1.6.1"
-    "@floating-ui/utils" "^0.2.1"
-    vue-demi ">=0.13.0"
+"@fontsource/fira-code@^5.0.18":
+  version "5.0.19"
+  resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-5.0.19.tgz#75a1adaa86ce968a2469db3ee5c4a5608d3ce063"
+  integrity sha512-dNQM7isP7wojw9IQQwIyrJOke+PoyTP9TSSpeo3trZHNOG1DJIEiMFMDCVerTixyfKMWgtJDEDyFCWfwyzEoEg==
 
-"@fontsource/fira-code@^5.0.17":
-  version "5.0.17"
-  resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-5.0.17.tgz#7b0c402548190ea55a613fe19b879a5f4ddaf8ab"
-  integrity sha512-Ai0qE5PWvm6ETny7ToAitwdhYtO3YrNIHoa0arPquXxpnlRSB+OsJfhKnfgDKm6WMmCnxKOfsIslbVw5PqQvvQ==
-
-"@fontsource/firago@^5.0.7":
-  version "5.0.7"
-  resolved "https://registry.yarnpkg.com/@fontsource/firago/-/firago-5.0.7.tgz#24dfb34a1a1744001bc1d9c093e5233a1c84f12f"
-  integrity sha512-xuTYVOBSwev2IVp2dqgrnq3gABUnehn91Ii+R1TM5Jpvr86gCPrMxmqfL9fgpUb5r12u7U1LBVC20GypIy8jeg==
+"@fontsource/firago@^5.0.11":
+  version "5.0.11"
+  resolved "https://registry.yarnpkg.com/@fontsource/firago/-/firago-5.0.11.tgz#8fe3c8b47cc1d8148bc50c80189ed3aac8555cb7"
+  integrity sha512-XfFsLxSFMTbJTN+94yFTJyuFGmoxtykt+6rL0fj9unCeXslllirpH6KetIlbZO73NzTUmKYRvtOJdOgVbBGtaQ==
 
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
@@ -218,35 +205,35 @@
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
 "@humanwhocodes/object-schema@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
-  integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
+  integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
-"@intlify/core-base@9.10.2":
-  version "9.10.2"
-  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.10.2.tgz#e7f8857f8011184e4afbdcfae7dbd85c50ba5271"
-  integrity sha512-HGStVnKobsJL0DoYIyRCGXBH63DMQqEZxDUGrkNI05FuTcruYUtOAxyL3zoAZu/uDGO6mcUvm3VXBaHG2GdZCg==
+"@intlify/core-base@9.14.0":
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.14.0.tgz#63ce687a6560c0af6a16cb567d9d8a1ea1a5a65e"
+  integrity sha512-zJn0imh9HIsZZUtt9v8T16PeVstPv6bP2YzlrYJwoF8F30gs4brZBwW2KK6EI5WYKFi3NeqX6+UU4gniz5TkGg==
   dependencies:
-    "@intlify/message-compiler" "9.10.2"
-    "@intlify/shared" "9.10.2"
+    "@intlify/message-compiler" "9.14.0"
+    "@intlify/shared" "9.14.0"
 
-"@intlify/message-compiler@9.10.2":
-  version "9.10.2"
-  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.10.2.tgz#c44cbb915bdd0d62780a38595a84006c781f717a"
-  integrity sha512-ntY/kfBwQRtX5Zh6wL8cSATujPzWW2ZQd1QwKyWwAy5fMqJyyixHMeovN4fmEyCqSu+hFfYOE63nU94evsy4YA==
+"@intlify/message-compiler@9.14.0":
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.14.0.tgz#e767141dd12862b3c1bf02ab5fc4852792812381"
+  integrity sha512-sXNsoMI0YsipSXW8SR75drmVK56tnJHoYbPXUv2Cf9lz6FzvwsosFm6JtC1oQZI/kU+n7qx0qRrEWkeYFTgETA==
   dependencies:
-    "@intlify/shared" "9.10.2"
+    "@intlify/shared" "9.14.0"
     source-map-js "^1.0.2"
 
-"@intlify/shared@9.10.2":
-  version "9.10.2"
-  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.10.2.tgz#693300ea033868cbe4086b832170612f002e24a9"
-  integrity sha512-ttHCAJkRy7R5W2S9RVnN9KYQYPIpV2+GiS79T4EE37nrPyH6/1SrOh3bmdCRC1T3ocL8qCDx7x2lBJ0xaITU7Q==
+"@intlify/shared@9.14.0":
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.14.0.tgz#e8fb3693ad4171442cbe6cb8922a9b5a22ffb4ef"
+  integrity sha512-r+N8KRQL7LgN1TMTs1A2svfuAU0J94Wu9wWdJVJqYsoMMLIeJxrPjazihfHpmJqfgZq0ah3Y9Q4pgWV2O90Fyg==
 
-"@jridgewell/sourcemap-codec@^1.4.15":
-  version "1.4.15"
-  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
-  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+"@jridgewell/sourcemap-codec@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -274,7 +261,7 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
   integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
 
-"@rollup/pluginutils@^5.0.4":
+"@rollup/pluginutils@^5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
   integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
@@ -283,70 +270,85 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
-"@rollup/rollup-android-arm-eabi@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz#b98786c1304b4ff8db3a873180b778649b5dff2b"
-  integrity sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==
-
-"@rollup/rollup-android-arm64@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz#8833679af11172b1bf1ab7cb3bad84df4caf0c9e"
-  integrity sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==
-
-"@rollup/rollup-darwin-arm64@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz#ef02d73e0a95d406e0eb4fd61a53d5d17775659b"
-  integrity sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==
-
-"@rollup/rollup-darwin-x64@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz#3ce5b9bcf92b3341a5c1c58a3e6bcce0ea9e7455"
-  integrity sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==
-
-"@rollup/rollup-linux-arm-gnueabihf@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz#3d3d2c018bdd8e037c6bfedd52acfff1c97e4be4"
-  integrity sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==
-
-"@rollup/rollup-linux-arm64-gnu@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz#5fc8cc978ff396eaa136d7bfe05b5b9138064143"
-  integrity sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==
-
-"@rollup/rollup-linux-arm64-musl@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz#f2ae7d7bed416ffa26d6b948ac5772b520700eef"
-  integrity sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==
-
-"@rollup/rollup-linux-riscv64-gnu@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz#303d57a328ee9a50c85385936f31cf62306d30b6"
-  integrity sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==
-
-"@rollup/rollup-linux-x64-gnu@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz#f672f6508f090fc73f08ba40ff76c20b57424778"
-  integrity sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==
-
-"@rollup/rollup-linux-x64-musl@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz#d2f34b1b157f3e7f13925bca3288192a66755a89"
-  integrity sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==
-
-"@rollup/rollup-win32-arm64-msvc@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz#8ffecc980ae4d9899eb2f9c4ae471a8d58d2da6b"
-  integrity sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==
-
-"@rollup/rollup-win32-ia32-msvc@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz#a7505884f415662e088365b9218b2b03a88fc6f2"
-  integrity sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==
-
-"@rollup/rollup-win32-x64-msvc@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz#6abd79db7ff8d01a58865ba20a63cfd23d9e2a10"
-  integrity sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==
+"@rollup/rollup-android-arm-eabi@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.0.tgz#d941173f82f9b041c61b0dc1a2a91dcd06e4b31e"
+  integrity sha512-WTWD8PfoSAJ+qL87lE7votj3syLavxunWhzCnx3XFxFiI/BA/r3X7MUM8dVrH8rb2r4AiO8jJsr3ZjdaftmnfA==
+
+"@rollup/rollup-android-arm64@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.0.tgz#7e7157c8543215245ceffc445134d9e843ba51c0"
+  integrity sha512-a1sR2zSK1B4eYkiZu17ZUZhmUQcKjk2/j9Me2IDjk1GHW7LB5Z35LEzj9iJch6gtUfsnvZs1ZNyDW2oZSThrkA==
+
+"@rollup/rollup-darwin-arm64@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.0.tgz#f0a18a4fc8dc6eb1e94a51fa2adb22876f477947"
+  integrity sha512-zOnKWLgDld/svhKO5PD9ozmL6roy5OQ5T4ThvdYZLpiOhEGY+dp2NwUmxK0Ld91LrbjrvtNAE0ERBwjqhZTRAA==
+
+"@rollup/rollup-darwin-x64@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.0.tgz#34b7867613e5cc42d2b85ddc0424228cc33b43f0"
+  integrity sha512-7doS8br0xAkg48SKE2QNtMSFPFUlRdw9+votl27MvT46vo44ATBmdZdGysOevNELmZlfd+NEa0UYOA8f01WSrg==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.0.tgz#422b19ff9ae02b05d3395183d1d43b38c7c8be0b"
+  integrity sha512-pWJsfQjNWNGsoCq53KjMtwdJDmh/6NubwQcz52aEwLEuvx08bzcy6tOUuawAOncPnxz/3siRtd8hiQ32G1y8VA==
+
+"@rollup/rollup-linux-arm-musleabihf@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.0.tgz#568aa29195ef6fc57ec6ed3f518923764406a8ee"
+  integrity sha512-efRIANsz3UHZrnZXuEvxS9LoCOWMGD1rweciD6uJQIx2myN3a8Im1FafZBzh7zk1RJ6oKcR16dU3UPldaKd83w==
+
+"@rollup/rollup-linux-arm64-gnu@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.0.tgz#22309c8bcba9a73114f69165c72bc94b2fbec085"
+  integrity sha512-ZrPhydkTVhyeGTW94WJ8pnl1uroqVHM3j3hjdquwAcWnmivjAwOYjTEAuEDeJvGX7xv3Z9GAvrBkEzCgHq9U1w==
+
+"@rollup/rollup-linux-arm64-musl@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.0.tgz#c93c388af6d33f082894b8a60839d7265b2b9bc5"
+  integrity sha512-cfaupqd+UEFeURmqNP2eEvXqgbSox/LHOyN9/d2pSdV8xTrjdg3NgOFJCtc1vQ/jEke1qD0IejbBfxleBPHnPw==
+
+"@rollup/rollup-linux-powerpc64le-gnu@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.0.tgz#493c5e19e395cf3c6bd860c7139c8a903dea72b4"
+  integrity sha512-ZKPan1/RvAhrUylwBXC9t7B2hXdpb/ufeu22pG2psV7RN8roOfGurEghw1ySmX/CmDDHNTDDjY3lo9hRlgtaHg==
+
+"@rollup/rollup-linux-riscv64-gnu@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.0.tgz#a2eab4346fbe5909165ce99adb935ba30c9fb444"
+  integrity sha512-H1eRaCwd5E8eS8leiS+o/NqMdljkcb1d6r2h4fKSsCXQilLKArq6WS7XBLDu80Yz+nMqHVFDquwcVrQmGr28rg==
+
+"@rollup/rollup-linux-s390x-gnu@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.0.tgz#0bc49a79db4345d78d757bb1b05e73a1b42fa5c3"
+  integrity sha512-zJ4hA+3b5tu8u7L58CCSI0A9N1vkfwPhWd/puGXwtZlsB5bTkwDNW/+JCU84+3QYmKpLi+XvHdmrlwUwDA6kqw==
+
+"@rollup/rollup-linux-x64-gnu@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.0.tgz#4fd36a6a41f3406d8693321b13d4f9b7658dd4b9"
+  integrity sha512-e2hrvElFIh6kW/UNBQK/kzqMNY5mO+67YtEh9OA65RM5IJXYTWiXjX6fjIiPaqOkBthYF1EqgiZ6OXKcQsM0hg==
+
+"@rollup/rollup-linux-x64-musl@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.0.tgz#10ebb13bd4469cbad1a5d9b073bd27ec8a886200"
+  integrity sha512-1vvmgDdUSebVGXWX2lIcgRebqfQSff0hMEkLJyakQ9JQUbLDkEaMsPTLOmyccyC6IJ/l3FZuJbmrBw/u0A0uCQ==
+
+"@rollup/rollup-win32-arm64-msvc@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.0.tgz#2fef1a90f1402258ef915ae5a94cc91a5a1d5bfc"
+  integrity sha512-s5oFkZ/hFcrlAyBTONFY1TWndfyre1wOMwU+6KCpm/iatybvrRgmZVM+vCFwxmC5ZhdlgfE0N4XorsDpi7/4XQ==
+
+"@rollup/rollup-win32-ia32-msvc@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.0.tgz#a18ad47a95c5f264defb60acdd8c27569f816fc1"
+  integrity sha512-G9+TEqRnAA6nbpqyUqgTiopmnfgnMkR3kMukFBDsiyy23LZvUCpiUwjTRx6ezYCjJODXrh52rBR9oXvm+Fp5wg==
+
+"@rollup/rollup-win32-x64-msvc@4.21.0":
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.0.tgz#20c09cf44dcb082140cc7f439dd679fe4bba3375"
+  integrity sha512-2jsCDZwtQvRhejHLfZ1JY6w6kEuEtfF9nzYsZxzSlNVKDX+DpsDJ+Rbjkm74nvg2rdx0gwBS+IMdvwJuq3S9pQ==
 
 "@types/estree@1.0.5", "@types/estree@^1.0.0":
   version "1.0.5"
@@ -358,104 +360,248 @@
   resolved "https://registry.yarnpkg.com/@types/showdown/-/showdown-2.0.6.tgz#3d7affd5f971b4a17783ec2b23b4ad3b97477b7e"
   integrity sha512-pTvD/0CIeqe4x23+YJWlX2gArHa8G0J0Oh6GKaVXV7TAeickpkkZiNOgFcFcmLQ5lB/K0qBJL1FtRYltBfbGCQ==
 
+"@types/uuid@^10.0.0":
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-10.0.0.tgz#e9c07fe50da0f53dc24970cca94d619ff03f6f6d"
+  integrity sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==
+
 "@types/web-bluetooth@^0.0.20":
   version "0.0.20"
   resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
   integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
 
+"@typescript-eslint/eslint-plugin@^7.1.1":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz#b16d3cf3ee76bf572fdf511e79c248bdec619ea3"
+  integrity sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==
+  dependencies:
+    "@eslint-community/regexpp" "^4.10.0"
+    "@typescript-eslint/scope-manager" "7.18.0"
+    "@typescript-eslint/type-utils" "7.18.0"
+    "@typescript-eslint/utils" "7.18.0"
+    "@typescript-eslint/visitor-keys" "7.18.0"
+    graphemer "^1.4.0"
+    ignore "^5.3.1"
+    natural-compare "^1.4.0"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/parser@^7.1.1":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.18.0.tgz#83928d0f1b7f4afa974098c64b5ce6f9051f96a0"
+  integrity sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==
+  dependencies:
+    "@typescript-eslint/scope-manager" "7.18.0"
+    "@typescript-eslint/types" "7.18.0"
+    "@typescript-eslint/typescript-estree" "7.18.0"
+    "@typescript-eslint/visitor-keys" "7.18.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.18.0.tgz#c928e7a9fc2c0b3ed92ab3112c614d6bd9951c83"
+  integrity sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==
+  dependencies:
+    "@typescript-eslint/types" "7.18.0"
+    "@typescript-eslint/visitor-keys" "7.18.0"
+
+"@typescript-eslint/type-utils@7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.18.0.tgz#2165ffaee00b1fbbdd2d40aa85232dab6998f53b"
+  integrity sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "7.18.0"
+    "@typescript-eslint/utils" "7.18.0"
+    debug "^4.3.4"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/types@7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.18.0.tgz#b90a57ccdea71797ffffa0321e744f379ec838c9"
+  integrity sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==
+
+"@typescript-eslint/typescript-estree@7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.18.0.tgz#b5868d486c51ce8f312309ba79bdb9f331b37931"
+  integrity sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==
+  dependencies:
+    "@typescript-eslint/types" "7.18.0"
+    "@typescript-eslint/visitor-keys" "7.18.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/utils@7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.18.0.tgz#bca01cde77f95fc6a8d5b0dbcbfb3d6ca4be451f"
+  integrity sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@typescript-eslint/scope-manager" "7.18.0"
+    "@typescript-eslint/types" "7.18.0"
+    "@typescript-eslint/typescript-estree" "7.18.0"
+
+"@typescript-eslint/visitor-keys@7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.18.0.tgz#0564629b6124d67607378d0f0332a0495b25e7d7"
+  integrity sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==
+  dependencies:
+    "@typescript-eslint/types" "7.18.0"
+    eslint-visitor-keys "^3.4.3"
+
 "@ungap/structured-clone@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
-"@vitejs/plugin-vue@^5.0.4":
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz#508d6a0f2440f86945835d903fcc0d95d1bb8a37"
-  integrity sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==
+"@vitejs/plugin-vue@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.1.2.tgz#f11091e0130eca6c1ca8cfb85ee71ea53b255d31"
+  integrity sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==
 
-"@vue/compiler-core@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.21.tgz#868b7085378fc24e58c9aed14c8d62110a62be1a"
-  integrity sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==
+"@volar/language-core@2.4.0", "@volar/language-core@~2.4.0-alpha.18":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-2.4.0.tgz#962efc66ff9198ee2412786e99528bf77cdad100"
+  integrity sha512-FTla+khE+sYK0qJP+6hwPAAUwiNHVMph4RUXpxf/FIPKUP61NFrVZorml4mjFShnueR2y9/j8/vnh09YwVdH7A==
   dependencies:
-    "@babel/parser" "^7.23.9"
-    "@vue/shared" "3.4.21"
-    entities "^4.5.0"
-    estree-walker "^2.0.2"
-    source-map-js "^1.0.2"
+    "@volar/source-map" "2.4.0"
+
+"@volar/source-map@2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-2.4.0.tgz#b6690f06c600eaf587bbc81b0153203e4f6db72a"
+  integrity sha512-2ceY8/NEZvN6F44TXw2qRP6AQsvCYhV2bxaBPWxV9HqIfkbRydSksTFObCF1DBDNBfKiZTS8G/4vqV6cvjdOIQ==
 
-"@vue/compiler-dom@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz#0077c355e2008207283a5a87d510330d22546803"
-  integrity sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==
+"@volar/typescript@~2.4.0-alpha.18":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-2.4.0.tgz#f909d20dfe43dd846d30695f6e5467276ff4418e"
+  integrity sha512-9zx3lQWgHmVd+JRRAHUSRiEhe4TlzL7U7e6ulWXOxHH/WNYxzKwCvZD7WYWEZFdw4dHfTD9vUR0yPQO6GilCaQ==
   dependencies:
-    "@vue/compiler-core" "3.4.21"
-    "@vue/shared" "3.4.21"
+    "@volar/language-core" "2.4.0"
+    path-browserify "^1.0.1"
+    vscode-uri "^3.0.8"
 
-"@vue/compiler-sfc@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz#4af920dc31ab99e1ff5d152b5fe0ad12181145b2"
-  integrity sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==
+"@vue/compiler-core@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.38.tgz#326dfe3c92fa2b0f1dc9b39a948a231980253496"
+  integrity sha512-8IQOTCWnLFqfHzOGm9+P8OPSEDukgg3Huc92qSG49if/xI2SAwLHQO2qaPQbjCWPBcQoO1WYfXfTACUrWV3c5A==
   dependencies:
-    "@babel/parser" "^7.23.9"
-    "@vue/compiler-core" "3.4.21"
-    "@vue/compiler-dom" "3.4.21"
-    "@vue/compiler-ssr" "3.4.21"
-    "@vue/shared" "3.4.21"
+    "@babel/parser" "^7.24.7"
+    "@vue/shared" "3.4.38"
+    entities "^4.5.0"
     estree-walker "^2.0.2"
-    magic-string "^0.30.7"
-    postcss "^8.4.35"
-    source-map-js "^1.0.2"
+    source-map-js "^1.2.0"
 
-"@vue/compiler-ssr@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz#b84ae64fb9c265df21fc67f7624587673d324fef"
-  integrity sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==
+"@vue/compiler-dom@3.4.38", "@vue/compiler-dom@^3.4.0":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz#90348fac1130e0bbd408b650635cb626b3b9df06"
+  integrity sha512-Osc/c7ABsHXTsETLgykcOwIxFktHfGSUDkb05V61rocEfsFDcjDLH/IHJSNJP+/Sv9KeN2Lx1V6McZzlSb9EhQ==
   dependencies:
-    "@vue/compiler-dom" "3.4.21"
-    "@vue/shared" "3.4.21"
+    "@vue/compiler-core" "3.4.38"
+    "@vue/shared" "3.4.38"
 
-"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.5.1":
-  version "6.6.1"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.1.tgz#7c14346383751d9f6ad4bea0963245b30220ef83"
-  integrity sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==
+"@vue/compiler-sfc@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.38.tgz#954c3f6777bbbcca28771ba59b795f12f76ef188"
+  integrity sha512-s5QfZ+9PzPh3T5H4hsQDJtI8x7zdJaew/dCGgqZ2630XdzaZ3AD8xGZfBqpT8oaD/p2eedd+pL8tD5vvt5ZYJQ==
+  dependencies:
+    "@babel/parser" "^7.24.7"
+    "@vue/compiler-core" "3.4.38"
+    "@vue/compiler-dom" "3.4.38"
+    "@vue/compiler-ssr" "3.4.38"
+    "@vue/shared" "3.4.38"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.10"
+    postcss "^8.4.40"
+    source-map-js "^1.2.0"
+
+"@vue/compiler-ssr@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.38.tgz#9ded18f6d9c8b2440039a58492cfff36fa1a7774"
+  integrity sha512-YXznKFQ8dxYpAz9zLuVvfcXhc31FSPFDcqr0kyujbOwNhlmaNvL2QfIy+RZeJgSn5Fk54CWoEUeW+NVBAogGaw==
+  dependencies:
+    "@vue/compiler-dom" "3.4.38"
+    "@vue/shared" "3.4.38"
+
+"@vue/compiler-vue2@^2.7.16":
+  version "2.7.16"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz#2ba837cbd3f1b33c2bc865fbe1a3b53fb611e249"
+  integrity sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.2.0"
+
+"@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.6.3":
+  version "6.6.3"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz#b23a588154cba8986bba82b6e1d0248bde3fd1a0"
+  integrity sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==
+
+"@vue/eslint-config-typescript@^13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@vue/eslint-config-typescript/-/eslint-config-typescript-13.0.0.tgz#f5f3d986ace34a10f403921d5044831b89a1b679"
+  integrity sha512-MHh9SncG/sfqjVqjcuFLOLD6Ed4dRAis4HNt0dXASeAuLqIAx4YMB1/m2o4pUKK1vCt8fUvYG8KKX2Ot3BVZTg==
+  dependencies:
+    "@typescript-eslint/eslint-plugin" "^7.1.1"
+    "@typescript-eslint/parser" "^7.1.1"
+    vue-eslint-parser "^9.3.1"
+
+"@vue/language-core@2.0.29":
+  version "2.0.29"
+  resolved "https://registry.yarnpkg.com/@vue/language-core/-/language-core-2.0.29.tgz#19462d786cd7a1c21dbe575b46970a57094e0357"
+  integrity sha512-o2qz9JPjhdoVj8D2+9bDXbaI4q2uZTHQA/dbyZT4Bj1FR9viZxDJnLcKVHfxdn6wsOzRgpqIzJEEmSSvgMvDTQ==
+  dependencies:
+    "@volar/language-core" "~2.4.0-alpha.18"
+    "@vue/compiler-dom" "^3.4.0"
+    "@vue/compiler-vue2" "^2.7.16"
+    "@vue/shared" "^3.4.0"
+    computeds "^0.0.1"
+    minimatch "^9.0.3"
+    muggle-string "^0.4.1"
+    path-browserify "^1.0.1"
 
-"@vue/reactivity@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.21.tgz#affd3415115b8ebf4927c8d2a0d6a24bccfa9f02"
-  integrity sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==
+"@vue/reactivity@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.38.tgz#ec2d549f4b831cd03d0baabf7d77e840b8536000"
+  integrity sha512-4vl4wMMVniLsSYYeldAKzbk72+D3hUnkw9z8lDeJacTxAkXeDAP1uE9xr2+aKIN0ipOL8EG2GPouVTH6yF7Gnw==
   dependencies:
-    "@vue/shared" "3.4.21"
+    "@vue/shared" "3.4.38"
 
-"@vue/runtime-core@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.21.tgz#3749c3f024a64c4c27ecd75aea4ca35634db0062"
-  integrity sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==
+"@vue/runtime-core@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.38.tgz#bead9085e9a1c5a446e27d74ffb450f9261cf097"
+  integrity sha512-21z3wA99EABtuf+O3IhdxP0iHgkBs1vuoCAsCKLVJPEjpVqvblwBnTj42vzHRlWDCyxu9ptDm7sI2ZMcWrQqlA==
   dependencies:
-    "@vue/reactivity" "3.4.21"
-    "@vue/shared" "3.4.21"
+    "@vue/reactivity" "3.4.38"
+    "@vue/shared" "3.4.38"
 
-"@vue/runtime-dom@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz#91f867ef64eff232cac45095ab28ebc93ac74588"
-  integrity sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==
+"@vue/runtime-dom@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.38.tgz#52678ba0b85f94400a0a9c8dd23ddef4dd65657d"
+  integrity sha512-afZzmUreU7vKwKsV17H1NDThEEmdYI+GCAK/KY1U957Ig2NATPVjCROv61R19fjZNzMmiU03n79OMnXyJVN0UA==
   dependencies:
-    "@vue/runtime-core" "3.4.21"
-    "@vue/shared" "3.4.21"
+    "@vue/reactivity" "3.4.38"
+    "@vue/runtime-core" "3.4.38"
+    "@vue/shared" "3.4.38"
     csstype "^3.1.3"
 
-"@vue/server-renderer@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.21.tgz#150751579d26661ee3ed26a28604667fa4222a97"
-  integrity sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==
+"@vue/server-renderer@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.38.tgz#457401ef2b0f969156702061e56915acecc9fe2c"
+  integrity sha512-NggOTr82FbPEkkUvBm4fTGcwUY8UuTsnWC/L2YZBmvaQ4C4Jl/Ao4HHTB+l7WnFCt5M/dN3l0XLuyjzswGYVCA==
   dependencies:
-    "@vue/compiler-ssr" "3.4.21"
-    "@vue/shared" "3.4.21"
+    "@vue/compiler-ssr" "3.4.38"
+    "@vue/shared" "3.4.38"
+
+"@vue/shared@3.4.38", "@vue/shared@^3.4.0":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.38.tgz#552a6770098bfd556fa3e2c686c9d3b4f4cd94c2"
+  integrity sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==
 
-"@vue/shared@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.21.tgz#de526a9059d0a599f0b429af7037cd0c3ed7d5a1"
-  integrity sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==
+"@vue/tsconfig@^0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@vue/tsconfig/-/tsconfig-0.5.1.tgz#3124ec16cc0c7e04165b88dc091e6b97782fffa9"
+  integrity sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==
 
 "@vuelidate/core@^2.0.3":
   version "2.0.3"
@@ -471,37 +617,37 @@
   dependencies:
     vue-demi "^0.13.11"
 
-"@vueuse/core@^10.7.2":
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.9.0.tgz#7d779a95cf0189de176fee63cee4ba44b3c85d64"
-  integrity sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==
+"@vueuse/core@^11.0.1":
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-11.0.1.tgz#cffaf8824a1b3b3c3cbe5d7d6de21000f43fab23"
+  integrity sha512-YTrekI18WwEyP3h168Fir94G/HNC27wvXJI21Alm0sPOwvhihfkrvHIe+5PNJq+MpgWdRcsjvE/38JaoKrgZhQ==
   dependencies:
     "@types/web-bluetooth" "^0.0.20"
-    "@vueuse/metadata" "10.9.0"
-    "@vueuse/shared" "10.9.0"
-    vue-demi ">=0.14.7"
+    "@vueuse/metadata" "11.0.1"
+    "@vueuse/shared" "11.0.1"
+    vue-demi ">=0.14.10"
 
-"@vueuse/metadata@10.9.0":
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.9.0.tgz#769a1a9db65daac15cf98084cbf7819ed3758620"
-  integrity sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==
+"@vueuse/metadata@11.0.1":
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-11.0.1.tgz#b78fee96948896f1663c8da1f4a94839aa7627d7"
+  integrity sha512-dTFvuHFAjLYOiSd+t9Sk7xUiuL6jbfay/eX+g+jaipXXlwKur2VCqBCZX+jfu+2vROUGcUsdn3fJR9KkpadIOg==
 
-"@vueuse/shared@10.9.0":
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.9.0.tgz#13af2a348de15d07b7be2fd0c7fc9853a69d8fe0"
-  integrity sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==
+"@vueuse/shared@11.0.1":
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-11.0.1.tgz#50c34d3d20a889bfa36db87fd7208be29e5448c7"
+  integrity sha512-eAPf5CQB3HR0S76HqrhjBqFYstZfiHWZq8xF9EQmobGBkrhPfErJEhr8aMNQMqd6MkENIx2pblIEfJGlHpClug==
   dependencies:
-    vue-demi ">=0.14.7"
+    vue-demi ">=0.14.10"
 
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.11.3, acorn@^8.9.0:
-  version "8.11.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
-  integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
+acorn@^8.11.3, acorn@^8.12.1, acorn@^8.9.0:
+  version "8.12.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.1.tgz#71616bdccbe25e27a54439e0046e89ca76df2248"
+  integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
 
 ajv@^6.12.4:
   version "6.12.6"
@@ -538,6 +684,11 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -553,13 +704,10 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
-bootstrap-vue-next@^0.16.6:
-  version "0.16.6"
-  resolved "https://registry.yarnpkg.com/bootstrap-vue-next/-/bootstrap-vue-next-0.16.6.tgz#bd35ad1ed64692badd8c7093fd238b5d6fc65ab0"
-  integrity sha512-CDjq3KgIOALJO/Zvmcgxqavv1NznFROUl7yWHAmp4T4R8IRJLfyMj1zizjw2OzCvQ+uJ9PZ28T1Cx7xq8+m2xg==
-  dependencies:
-    "@floating-ui/vue" "^1.0.6"
-    "@vueuse/core" "^10.7.2"
+bootstrap-vue-next@^0.24.7:
+  version "0.24.10"
+  resolved "https://registry.yarnpkg.com/bootstrap-vue-next/-/bootstrap-vue-next-0.24.10.tgz#6afc9777fc5de68b6499a2d4a327bf145f28ba83"
+  integrity sha512-8SIb8bBWBjK3383xu32W3K4rFtxNl890GrcOykha54ZfeWRw0G4yKU+Epswqr5obbj9mBlX2cV9G9d6sI0GyvA==
 
 bootstrap@^5.3.3:
   version "5.3.3"
@@ -581,12 +729,12 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^3.0.2, braces@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+braces@^3.0.3, braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
   dependencies:
-    fill-range "^7.0.1"
+    fill-range "^7.1.1"
 
 callsites@^3.0.0:
   version "3.1.0"
@@ -601,7 +749,7 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3, chokidar@^3.6.0:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -633,11 +781,21 @@ commander@^9.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
   integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
 
+computeds@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/computeds/-/computeds-0.0.1.tgz#215b08a4ba3e08a11ff6eee5d6d8d7166a97ce2e"
+  integrity sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+confbox@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/confbox/-/confbox-0.1.7.tgz#ccfc0a2bcae36a84838e83a3b7f770fb17d6c579"
+  integrity sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==
+
 cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -657,15 +815,20 @@ csstype@^3.1.3:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-date-fns@^3.3.1:
+date-fns@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
   integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
 
-debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
-  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+de-indent@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
+
+debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.6:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.6.tgz#2ab2c38fbaffebf8aa95fdfe6d88438c7a13c52b"
+  integrity sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==
   dependencies:
     ms "2.1.2"
 
@@ -674,6 +837,13 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
 doctrine@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
@@ -686,34 +856,34 @@ entities@^4.5.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
-esbuild@^0.19.3:
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.12.tgz#dc82ee5dc79e82f5a5c3b4323a2a641827db3e04"
-  integrity sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==
+esbuild@^0.21.3:
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d"
+  integrity sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==
   optionalDependencies:
-    "@esbuild/aix-ppc64" "0.19.12"
-    "@esbuild/android-arm" "0.19.12"
-    "@esbuild/android-arm64" "0.19.12"
-    "@esbuild/android-x64" "0.19.12"
-    "@esbuild/darwin-arm64" "0.19.12"
-    "@esbuild/darwin-x64" "0.19.12"
-    "@esbuild/freebsd-arm64" "0.19.12"
-    "@esbuild/freebsd-x64" "0.19.12"
-    "@esbuild/linux-arm" "0.19.12"
-    "@esbuild/linux-arm64" "0.19.12"
-    "@esbuild/linux-ia32" "0.19.12"
-    "@esbuild/linux-loong64" "0.19.12"
-    "@esbuild/linux-mips64el" "0.19.12"
-    "@esbuild/linux-ppc64" "0.19.12"
-    "@esbuild/linux-riscv64" "0.19.12"
-    "@esbuild/linux-s390x" "0.19.12"
-    "@esbuild/linux-x64" "0.19.12"
-    "@esbuild/netbsd-x64" "0.19.12"
-    "@esbuild/openbsd-x64" "0.19.12"
-    "@esbuild/sunos-x64" "0.19.12"
-    "@esbuild/win32-arm64" "0.19.12"
-    "@esbuild/win32-ia32" "0.19.12"
-    "@esbuild/win32-x64" "0.19.12"
+    "@esbuild/aix-ppc64" "0.21.5"
+    "@esbuild/android-arm" "0.21.5"
+    "@esbuild/android-arm64" "0.21.5"
+    "@esbuild/android-x64" "0.21.5"
+    "@esbuild/darwin-arm64" "0.21.5"
+    "@esbuild/darwin-x64" "0.21.5"
+    "@esbuild/freebsd-arm64" "0.21.5"
+    "@esbuild/freebsd-x64" "0.21.5"
+    "@esbuild/linux-arm" "0.21.5"
+    "@esbuild/linux-arm64" "0.21.5"
+    "@esbuild/linux-ia32" "0.21.5"
+    "@esbuild/linux-loong64" "0.21.5"
+    "@esbuild/linux-mips64el" "0.21.5"
+    "@esbuild/linux-ppc64" "0.21.5"
+    "@esbuild/linux-riscv64" "0.21.5"
+    "@esbuild/linux-s390x" "0.21.5"
+    "@esbuild/linux-x64" "0.21.5"
+    "@esbuild/netbsd-x64" "0.21.5"
+    "@esbuild/openbsd-x64" "0.21.5"
+    "@esbuild/sunos-x64" "0.21.5"
+    "@esbuild/win32-arm64" "0.21.5"
+    "@esbuild/win32-ia32" "0.21.5"
+    "@esbuild/win32-x64" "0.21.5"
 
 escape-string-regexp@^4.0.0:
   version "4.0.0"
@@ -725,25 +895,26 @@ eslint-config-prettier@^9.1.0:
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f"
   integrity sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==
 
-eslint-plugin-prettier@^5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz#17cfade9e732cef32b5f5be53bd4e07afd8e67e1"
-  integrity sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==
+eslint-plugin-prettier@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz#d1c8f972d8f60e414c25465c163d16f209411f95"
+  integrity sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==
   dependencies:
     prettier-linter-helpers "^1.0.0"
-    synckit "^0.8.6"
+    synckit "^0.9.1"
 
-eslint-plugin-vue@^9.22.0:
-  version "9.23.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.23.0.tgz#1354a33b0cd21e0cb373557ff73c5d7a6698fbcd"
-  integrity sha512-Bqd/b7hGYGrlV+wP/g77tjyFmp81lh5TMw0be9093X02SyelxRRfCI6/IsGq/J7Um0YwB9s0Ry0wlFyjPdmtUw==
+eslint-plugin-vue@^9.27.0:
+  version "9.27.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.27.0.tgz#c22dae704a03d9ecefa81364ff89f60ce0481f94"
+  integrity sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
+    globals "^13.24.0"
     natural-compare "^1.4.0"
     nth-check "^2.1.1"
     postcss-selector-parser "^6.0.15"
     semver "^7.6.0"
-    vue-eslint-parser "^9.4.2"
+    vue-eslint-parser "^9.4.3"
     xml-name-validator "^4.0.0"
 
 eslint-scope@^7.1.1, eslint-scope@^7.2.2:
@@ -813,9 +984,9 @@ espree@^9.3.1, espree@^9.6.0, espree@^9.6.1:
     eslint-visitor-keys "^3.4.1"
 
 esquery@^1.4.0, esquery@^1.4.2:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
-  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
   dependencies:
     estraverse "^5.1.0"
 
@@ -851,7 +1022,7 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
   integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
 
-fast-glob@^3.3.1:
+fast-glob@^3.2.9, fast-glob@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -886,10 +1057,10 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
   dependencies:
     to-regex-range "^5.0.1"
 
@@ -930,11 +1101,6 @@ fsevents@~2.3.2, fsevents@~2.3.3:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
-function-bind@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
-  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
-
 get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
@@ -966,13 +1132,25 @@ glob@^7.1.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-globals@^13.19.0:
+globals@^13.19.0, globals@^13.24.0:
   version "13.24.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
   integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
   dependencies:
     type-fest "^0.20.2"
 
+globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
 graphemer@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
@@ -983,22 +1161,20 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-hasown@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
-  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
-  dependencies:
-    function-bind "^1.1.2"
+he@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-ignore@^5.2.0:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
-  integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
+ignore@^5.2.0, ignore@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
+  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
 
 immutable@^4.0.0:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.5.tgz#f8b436e66d59f99760dc577f5c99a4fd2a5cc5a0"
-  integrity sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
+  integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
 
 import-fresh@^3.2.1:
   version "3.3.0"
@@ -1033,13 +1209,6 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-core-module@^2.13.0:
-  version "2.13.1"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
-  integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
-  dependencies:
-    hasown "^2.0.0"
-
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -1104,10 +1273,13 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-local-pkg@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.4.3.tgz#0ff361ab3ae7f1c19113d9bb97b98b905dbc4963"
-  integrity sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==
+local-pkg@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.5.0.tgz#093d25a346bae59a99f80e75f6e9d36d7e8c925c"
+  integrity sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==
+  dependencies:
+    mlly "^1.4.2"
+    pkg-types "^1.0.3"
 
 locate-path@^6.0.0:
   version "6.0.0"
@@ -1126,31 +1298,24 @@ lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-lru-cache@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
-  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
-  dependencies:
-    yallist "^4.0.0"
-
-magic-string@^0.30.3, magic-string@^0.30.7:
-  version "0.30.8"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.8.tgz#14e8624246d2bedba70d5462aa99ac9681844613"
-  integrity sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==
+magic-string@^0.30.10, magic-string@^0.30.11:
+  version "0.30.11"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.11.tgz#301a6f93b3e8c2cb13ac1a7a673492c0dfd12954"
+  integrity sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==
   dependencies:
-    "@jridgewell/sourcemap-codec" "^1.4.15"
+    "@jridgewell/sourcemap-codec" "^1.5.0"
 
-merge2@^1.3.0:
+merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
 micromatch@^4.0.4:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
-  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.7.tgz#33e8190d9fe474a9895525f5618eee136d46c2e5"
+  integrity sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==
   dependencies:
-    braces "^3.0.2"
+    braces "^3.0.3"
     picomatch "^2.3.1"
 
 minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
@@ -1160,18 +1325,33 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^9.0.3:
-  version "9.0.3"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
-  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+minimatch@^9.0.3, minimatch@^9.0.4, minimatch@^9.0.5:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
   dependencies:
     brace-expansion "^2.0.1"
 
+mlly@^1.4.2, mlly@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.7.1.tgz#e0336429bb0731b6a8e887b438cbdae522c8f32f"
+  integrity sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==
+  dependencies:
+    acorn "^8.11.3"
+    pathe "^1.1.2"
+    pkg-types "^1.1.1"
+    ufo "^1.5.3"
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+muggle-string@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/muggle-string/-/muggle-string-0.4.1.tgz#3b366bd43b32f809dc20659534dd30e7c8a0d328"
+  integrity sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==
+
 nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
@@ -1202,16 +1382,16 @@ once@^1.3.0:
     wrappy "1"
 
 optionator@^0.9.3:
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
-  integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
+  integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
   dependencies:
-    "@aashutoshrathi/word-wrap" "^1.2.3"
     deep-is "^0.1.3"
     fast-levenshtein "^2.0.6"
     levn "^0.4.1"
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
+    word-wrap "^1.2.5"
 
 p-limit@^3.0.2:
   version "3.1.0"
@@ -1234,6 +1414,11 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+path-browserify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
+  integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -1249,36 +1434,50 @@ path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-parse@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
-  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-picocolors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
-  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+pathe@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
+  integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
+
+picocolors@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
+  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+pkg-types@^1.0.3, pkg-types@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-1.1.3.tgz#161bb1242b21daf7795036803f28e30222e476e3"
+  integrity sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==
+  dependencies:
+    confbox "^0.1.7"
+    mlly "^1.7.1"
+    pathe "^1.1.2"
+
 postcss-selector-parser@^6.0.15:
-  version "6.0.16"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz#3b88b9f5c5abd989ef4e2fc9ec8eedd34b20fb04"
-  integrity sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss@^8.4.35:
-  version "8.4.37"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.37.tgz#4505f992cd0c20e03d25f13b31901640b2db731a"
-  integrity sha512-7iB/v/r7Woof0glKLH8b1SPHrsX7uhdO+Geb41QpF/+mWZHU3uxxSlN+UXGVit1PawOYDToO+AbZzhBzWRDwbQ==
+postcss@^8.4.40, postcss@^8.4.41:
+  version "8.4.41"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.41.tgz#d6104d3ba272d882fe18fc07d15dc2da62fa2681"
+  integrity sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==
   dependencies:
     nanoid "^3.3.7"
-    picocolors "^1.0.0"
+    picocolors "^1.0.1"
     source-map-js "^1.2.0"
 
 prelude-ls@^1.2.1:
@@ -1293,10 +1492,10 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^3.2.5:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
-  integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
+prettier@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
+  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
 
 punycode@^2.1.0:
   version "2.3.1"
@@ -1320,15 +1519,6 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.22.4:
-  version "1.22.8"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
-  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
-  dependencies:
-    is-core-module "^2.13.0"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
@@ -1341,26 +1531,29 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rollup@^4.2.0:
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.13.0.tgz#dd2ae144b4cdc2ea25420477f68d4937a721237a"
-  integrity sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==
+rollup@^4.20.0:
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.21.0.tgz#28db5f5c556a5180361d35009979ccc749560b9d"
+  integrity sha512-vo+S/lfA2lMS7rZ2Qoubi6I5hwZwzXeUIctILZLbHI+laNtvhhOIon2S1JksA5UEDQ7l3vberd0fxK44lTYjbQ==
   dependencies:
     "@types/estree" "1.0.5"
   optionalDependencies:
-    "@rollup/rollup-android-arm-eabi" "4.13.0"
-    "@rollup/rollup-android-arm64" "4.13.0"
-    "@rollup/rollup-darwin-arm64" "4.13.0"
-    "@rollup/rollup-darwin-x64" "4.13.0"
-    "@rollup/rollup-linux-arm-gnueabihf" "4.13.0"
-    "@rollup/rollup-linux-arm64-gnu" "4.13.0"
-    "@rollup/rollup-linux-arm64-musl" "4.13.0"
-    "@rollup/rollup-linux-riscv64-gnu" "4.13.0"
-    "@rollup/rollup-linux-x64-gnu" "4.13.0"
-    "@rollup/rollup-linux-x64-musl" "4.13.0"
-    "@rollup/rollup-win32-arm64-msvc" "4.13.0"
-    "@rollup/rollup-win32-ia32-msvc" "4.13.0"
-    "@rollup/rollup-win32-x64-msvc" "4.13.0"
+    "@rollup/rollup-android-arm-eabi" "4.21.0"
+    "@rollup/rollup-android-arm64" "4.21.0"
+    "@rollup/rollup-darwin-arm64" "4.21.0"
+    "@rollup/rollup-darwin-x64" "4.21.0"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.21.0"
+    "@rollup/rollup-linux-arm-musleabihf" "4.21.0"
+    "@rollup/rollup-linux-arm64-gnu" "4.21.0"
+    "@rollup/rollup-linux-arm64-musl" "4.21.0"
+    "@rollup/rollup-linux-powerpc64le-gnu" "4.21.0"
+    "@rollup/rollup-linux-riscv64-gnu" "4.21.0"
+    "@rollup/rollup-linux-s390x-gnu" "4.21.0"
+    "@rollup/rollup-linux-x64-gnu" "4.21.0"
+    "@rollup/rollup-linux-x64-musl" "4.21.0"
+    "@rollup/rollup-win32-arm64-msvc" "4.21.0"
+    "@rollup/rollup-win32-ia32-msvc" "4.21.0"
+    "@rollup/rollup-win32-x64-msvc" "4.21.0"
     fsevents "~2.3.2"
 
 run-parallel@^1.1.9:
@@ -1370,21 +1563,19 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-sass@^1.71.1:
-  version "1.72.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.72.0.tgz#5b9978943fcfb32b25a6a5acb102fc9dabbbf41c"
-  integrity sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==
+sass@^1.77.8:
+  version "1.77.8"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.8.tgz#9f18b449ea401759ef7ec1752a16373e296b52bd"
+  integrity sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-semver@^7.3.6, semver@^7.6.0:
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
-  integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
-  dependencies:
-    lru-cache "^6.0.0"
+semver@^7.3.6, semver@^7.5.4, semver@^7.6.0:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
 
 shebang-command@^2.0.0:
   version "2.0.0"
@@ -1412,6 +1603,11 @@ simple-evaluate@^1.4.6:
   dependencies:
     get-value "^2.0.6"
 
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
@@ -1436,15 +1632,10 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-preserve-symlinks-flag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
-  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
-
-synckit@^0.8.6:
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.8.tgz#fe7fe446518e3d3d49f5e429f443cf08b6edfcd7"
-  integrity sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==
+synckit@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.9.1.tgz#febbfbb6649979450131f64735aa3f6c14575c88"
+  integrity sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==
   dependencies:
     "@pkgr/core" "^0.1.0"
     tslib "^2.6.2"
@@ -1454,6 +1645,11 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -1461,10 +1657,15 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+ts-api-utils@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
+  integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
+
 tslib@^2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
-  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
+  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
@@ -1478,31 +1679,41 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
-unplugin-vue-components@^0.26.0:
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/unplugin-vue-components/-/unplugin-vue-components-0.26.0.tgz#6d79caa770039a1eb3d7c09fdd28778ea20afef3"
-  integrity sha512-s7IdPDlnOvPamjunVxw8kNgKNK8A5KM1YpK5j/p97jEKTjlPNrA0nZBiSfAKKlK1gWZuyWXlKL5dk3EDw874LQ==
-  dependencies:
-    "@antfu/utils" "^0.7.6"
-    "@rollup/pluginutils" "^5.0.4"
-    chokidar "^3.5.3"
-    debug "^4.3.4"
-    fast-glob "^3.3.1"
-    local-pkg "^0.4.3"
-    magic-string "^0.30.3"
-    minimatch "^9.0.3"
-    resolve "^1.22.4"
-    unplugin "^1.4.0"
+typescript@^5.5.4:
+  version "5.5.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
+  integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
 
-unplugin@^1.4.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.10.0.tgz#9cb8140f61e3fbcf27c7c38d305e9d62d5dbbf0b"
-  integrity sha512-CuZtvvO8ua2Wl+9q2jEaqH6m3DoQ38N7pvBYQbbaeNlWGvK2l6GHiKi29aIHDPoSxdUzQ7Unevf1/ugil5X6Pg==
+ufo@^1.5.3:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.5.4.tgz#16d6949674ca0c9e0fbbae1fa20a71d7b1ded754"
+  integrity sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==
+
+unplugin-vue-components@^0.27.4:
+  version "0.27.4"
+  resolved "https://registry.yarnpkg.com/unplugin-vue-components/-/unplugin-vue-components-0.27.4.tgz#748468b2cb6a856235bdd512c33b629c33c3d23a"
+  integrity sha512-1XVl5iXG7P1UrOMnaj2ogYa5YTq8aoh5jwDPQhemwO/OrXW+lPQKDXd1hMz15qxQPxgb/XXlbgo3HQ2rLEbmXQ==
   dependencies:
-    acorn "^8.11.3"
+    "@antfu/utils" "^0.7.10"
+    "@rollup/pluginutils" "^5.1.0"
+    chokidar "^3.6.0"
+    debug "^4.3.6"
+    fast-glob "^3.3.2"
+    local-pkg "^0.5.0"
+    magic-string "^0.30.11"
+    minimatch "^9.0.5"
+    mlly "^1.7.1"
+    unplugin "^1.12.1"
+
+unplugin@^1.12.1:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.12.2.tgz#cc85aef010614394898caccf5f17002af8a4cd6f"
+  integrity sha512-bEqQxeC7rxtxPZ3M5V4Djcc4lQqKPgGe3mAWZvxcSmX5jhGxll19NliaRzQSQPrk4xJZSGniK3puLWpRuZN7VQ==
+  dependencies:
+    acorn "^8.12.1"
     chokidar "^3.6.0"
     webpack-sources "^3.2.3"
-    webpack-virtual-modules "^0.6.1"
+    webpack-virtual-modules "^0.6.2"
 
 uri-js@^4.2.2:
   version "4.4.1"
@@ -1516,31 +1727,41 @@ util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-vite@^5.1.4:
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.1.6.tgz#706dae5fab9e97f57578469eef1405fc483943e4"
-  integrity sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==
+uuid@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
+  integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==
+
+vite@^5.4.0:
+  version "5.4.2"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.2.tgz#8acb6ec4bfab823cdfc1cb2d6c53ed311bc4e47e"
+  integrity sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==
   dependencies:
-    esbuild "^0.19.3"
-    postcss "^8.4.35"
-    rollup "^4.2.0"
+    esbuild "^0.21.3"
+    postcss "^8.4.41"
+    rollup "^4.20.0"
   optionalDependencies:
     fsevents "~2.3.3"
 
-vue-demi@>=0.13.0, vue-demi@>=0.14.7:
-  version "0.14.7"
-  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2"
-  integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
+vscode-uri@^3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.8.tgz#1770938d3e72588659a172d0fd4642780083ff9f"
+  integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==
+
+vue-demi@>=0.14.10:
+  version "0.14.10"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
+  integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
 
 vue-demi@^0.13.11:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
   integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
 
-vue-eslint-parser@^9.4.2:
-  version "9.4.2"
-  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz#02ffcce82042b082292f2d1672514615f0d95b6d"
-  integrity sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==
+vue-eslint-parser@^9.3.1, vue-eslint-parser@^9.4.3:
+  version "9.4.3"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz#9b04b22c71401f1e8bca9be7c3e3416a4bde76a8"
+  integrity sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==
   dependencies:
     debug "^4.3.4"
     eslint-scope "^7.1.1"
@@ -1550,21 +1771,21 @@ vue-eslint-parser@^9.4.2:
     lodash "^4.17.21"
     semver "^7.3.6"
 
-vue-i18n@^9.10.1:
-  version "9.10.2"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.10.2.tgz#6f4b5d76bce649f1e18bb9b7767b72962b3e30a3"
-  integrity sha512-ECJ8RIFd+3c1d3m1pctQ6ywG5Yj8Efy1oYoAKQ9neRdkLbuKLVeW4gaY5HPkD/9ssf1pOnUrmIFjx2/gkGxmEw==
+vue-i18n@^9.13.1:
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.14.0.tgz#d6f1b3d95bfc4f40e630ff9456c78ab5becfd933"
+  integrity sha512-LxmpRuCt2rI8gqU+kxeflRZMQn4D5+4M3oP3PWZdowW/ePJraHqhF7p4CuaME52mUxdw3Mmy2yAUKgfZYgCRjA==
   dependencies:
-    "@intlify/core-base" "9.10.2"
-    "@intlify/shared" "9.10.2"
+    "@intlify/core-base" "9.14.0"
+    "@intlify/shared" "9.14.0"
     "@vue/devtools-api" "^6.5.0"
 
-vue-router@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.3.0.tgz#d5913f27bf68a0a178ee798c3c88be471811a235"
-  integrity sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==
+vue-router@^4.4.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.4.3.tgz#58a39dc804632bfb6d26f052aa8f6718bd130299"
+  integrity sha512-sv6wmNKx2j3aqJQDMxLFzs/u/mjA9Z5LCgy6BE0f7yFWMjrPLnS/sPNn8ARY/FXw6byV18EFutn5lTO6+UsV5A==
   dependencies:
-    "@vue/devtools-api" "^6.5.1"
+    "@vue/devtools-api" "^6.6.3"
 
 vue-showdown@^4.2.0:
   version "4.2.0"
@@ -1575,33 +1796,35 @@ vue-showdown@^4.2.0:
     showdown "^2.1.0"
     vue "^3.3.4"
 
-vue@^3.3.4, vue@^3.4.21:
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.21.tgz#69ec30e267d358ee3a0ce16612ba89e00aaeb731"
-  integrity sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==
+vue-tsc@^2.0.29:
+  version "2.0.29"
+  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-2.0.29.tgz#bf7e9605af9fadec7fd6037d242217f5c6ad2c3b"
+  integrity sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==
   dependencies:
-    "@vue/compiler-dom" "3.4.21"
-    "@vue/compiler-sfc" "3.4.21"
-    "@vue/runtime-dom" "3.4.21"
-    "@vue/server-renderer" "3.4.21"
-    "@vue/shared" "3.4.21"
+    "@volar/typescript" "~2.4.0-alpha.18"
+    "@vue/language-core" "2.0.29"
+    semver "^7.5.4"
 
-vuex@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.1.0.tgz#aa1b3ea5c7385812b074c86faeeec2217872e36c"
-  integrity sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==
+vue@^3.3.4, vue@^3.4.37:
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.38.tgz#0ccbb64ed03ef3c4ab73e540793290b18e7c4236"
+  integrity sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==
   dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.11"
+    "@vue/compiler-dom" "3.4.38"
+    "@vue/compiler-sfc" "3.4.38"
+    "@vue/runtime-dom" "3.4.38"
+    "@vue/server-renderer" "3.4.38"
+    "@vue/shared" "3.4.38"
 
 webpack-sources@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack-virtual-modules@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz#ac6fdb9c5adb8caecd82ec241c9631b7a3681b6f"
-  integrity sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==
+webpack-virtual-modules@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8"
+  integrity sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==
 
 which@^2.0.1:
   version "2.0.2"
@@ -1610,6 +1833,11 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+word-wrap@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
+  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -1620,11 +1848,6 @@ xml-name-validator@^4.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
   integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
 
-yallist@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
-  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
-
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"

From bb498792250fd375a9a9fd4be91abfc247368715 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 23 Aug 2024 13:45:13 +0200
Subject: [PATCH 227/275] chore: rm tsconfig.node.json

---
 app/tsconfig.node.json | 12 ------------
 1 file changed, 12 deletions(-)
 delete mode 100644 app/tsconfig.node.json

diff --git a/app/tsconfig.node.json b/app/tsconfig.node.json
deleted file mode 100644
index 1a555ac37..000000000
--- a/app/tsconfig.node.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "types": ["node"]
-  },
-  "include": ["vite.config.ts"]
-}

From d549d3fafc2711cd0de6efc7fa5fc0b2421eeee9 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 23 Aug 2024 13:49:02 +0200
Subject: [PATCH 228/275] fix: misc ts errors

---
 app/package.json                              |  3 +-
 app/src/components/LazyRenderer.vue           |  4 +-
 app/src/components/globals/CardForm.vue       |  9 ++-
 app/src/components/globals/FormField.vue      |  7 +--
 .../components/globals/FormFieldMultiple.vue  |  7 ++-
 .../components/globals/FormFieldReadonly.vue  |  2 +-
 .../globals/formItems/AdressItem.vue          | 23 ++++---
 .../globals/formItems/CheckboxItem.vue        | 25 ++++----
 .../components/globals/formItems/FileItem.vue |  2 +-
 .../globals/formItems/InputItem.vue           |  2 +-
 .../globals/formItems/SelectItem.vue          |  2 +-
 .../components/globals/formItems/TagsItem.vue |  2 +-
 .../globals/formItems/TagsSelectizeItem.vue   |  2 +-
 .../globals/formItems/TextAreaItem.vue        |  2 +-
 app/src/composables/configPanels.ts           |  2 +-
 app/src/composables/useInfos.ts               |  1 +
 app/src/composables/useRequests.ts            |  2 +-
 app/src/helpers/yunohostArguments.ts          |  4 +-
 app/src/types/form.ts                         |  1 -
 app/src/views/_partials/HistoryConsole.vue    |  2 +-
 app/src/views/app/AppInfo.vue                 |  2 +-
 app/vite.config.ts                            | 60 +++++++++----------
 22 files changed, 84 insertions(+), 82 deletions(-)

diff --git a/app/package.json b/app/package.json
index 327d2d4e9..359734df2 100644
--- a/app/package.json
+++ b/app/package.json
@@ -10,7 +10,8 @@
     "lint:js": "eslint --ext \".ts,.vue,.cjs,.js\" --ignore-path ../.gitignore .",
     "lint:prettier": "prettier --check .",
     "lint": "yarn lint:js && yarn lint:prettier",
-    "lintfix": "prettier --write --list-different . && yarn lint:js --fix"
+    "lintfix": "prettier --write --list-different . && yarn lint:js --fix",
+    "type-check": "vue-tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
     "@fontsource/fira-code": "^5.0.18",
diff --git a/app/src/components/LazyRenderer.vue b/app/src/components/LazyRenderer.vue
index 90ee04e79..3ebd47153 100644
--- a/app/src/components/LazyRenderer.vue
+++ b/app/src/components/LazyRenderer.vue
@@ -46,7 +46,7 @@ onMounted(() => {
       if (intersecting) {
         clearTimeout(unrenderTimer)
         // Show the component after a delay (to avoid rendering while scrolling fast)
-        renderTimer = setTimeout(
+        renderTimer = window.setTimeout(
           () => {
             render.value = true
           },
@@ -60,7 +60,7 @@ onMounted(() => {
       } else if (props.unrender) {
         clearTimeout(renderTimer)
         // Hide the component after a delay if it's no longer in the viewport
-        unrenderTimer = setTimeout(() => {
+        unrenderTimer = window.setTimeout(() => {
           fixedMinHeight.value = rootElem.value!.clientHeight
           render.value = false
         }, props.unrenderDelay)
diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index a0ad8b6d9..587d00db9 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -61,7 +61,7 @@ const slots = defineSlots<
   } & {
     [K in KeyOfStr<FFD> as `component:${K}`]?: (
       _: FFD[K]['component'] extends AnyWritableComponents
-        ? FFD[K]['cProps'] & BaseItemComputedProps<MV[K]>
+        ? FFD[K]['cProps'] & BaseItemComputedProps
         : FFD[K]['component'] extends AnyDisplayComponents
           ? FFD[K]['cProps']
           : never,
@@ -105,12 +105,16 @@ const Fields = createReusableTemplate<{
     string
   >][]
 }>()
+
+// presence of <!-- @vue-expect-error --> are for `yarn type-check`,
+// don't know why custom component slots name doesn't pass
 </script>
 
 <template>
   <Fields.define v-slot="{ fieldsProps }">
     <template v-for="[k, field] in fieldsProps" :key="k">
       <template v-if="toValue(field.visible) ?? true">
+        <!-- @vue-expect-error -->
         <slot
           v-if="isWritableComponent<MV[typeof k]>(field)"
           :name="`field:${k}`"
@@ -123,7 +127,9 @@ const Fields = createReusableTemplate<{
             :validation="props.validations?.form[k]"
             @update:model-value="onModelUpdate(k, $event)"
           >
+            <!-- @vue-expect-error -->
             <template v-if="slots[`component:${k}`]" #default="childProps">
+              <!-- @vue-expect-error -->
               <slot :name="`component:${k}`" v-bind="childProps" />
             </template>
           </FormField>
@@ -133,6 +139,7 @@ const Fields = createReusableTemplate<{
             :model-value="modelValue![k]"
           />
         </slot>
+        <!-- @vue-expect-error -->
         <slot
           v-else-if="isDisplayComponent(field)"
           :name="`component:${k}`"
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index fb5ac7e17..fe145e6aa 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -12,7 +12,6 @@ import { omit } from '@/helpers/commons'
 import type {
   AnyWritableComponents,
   BaseItemComputedProps,
-  FormField,
   FormFieldProps,
   ItemComponentToItemProps,
 } from '@/types/form'
@@ -45,7 +44,7 @@ defineEmits<{
 
 const slots = defineSlots<{
   default?: (
-    componentProps: FormField<C, MV>['cProps'] & BaseItemComputedProps<MV>,
+    componentProps: ItemComponentToItemProps[C] & BaseItemComputedProps,
   ) => any
   description?: any
 }>()
@@ -137,13 +136,13 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
         ...(props.cProps ?? ({} as ItemComponentToItemProps[C])),
         ariaDescribedby,
         state,
-        validation: validation,
+        validation,
       }"
     >
       <!-- if no component was passed as slot, render a component from the props -->
       <Component
         v-bind="props.cProps"
-        :is="component"
+        :is="props.component"
         v-model="modelValue"
         :aria-describedby="ariaDescribedby"
         :state="state"
diff --git a/app/src/components/globals/FormFieldMultiple.vue b/app/src/components/globals/FormFieldMultiple.vue
index 3f9e8fbaf..6c0aee362 100644
--- a/app/src/components/globals/FormFieldMultiple.vue
+++ b/app/src/components/globals/FormFieldMultiple.vue
@@ -54,8 +54,7 @@ const emit = defineEmits<{
 
 const slots = defineSlots<{
   default?: (_: {
-    componentProps: FormField<C, ArrInnerType<MV>>['cProps'] &
-      BaseItemComputedProps<ArrInnerType<MV>>
+    componentProps: ItemComponentToItemProps[C] & BaseItemComputedProps
     index: number
   }) => any
   description?: () => any
@@ -168,12 +167,14 @@ function updateElement(index: number, newValue: ArrInnerType<MV>) {
 <template>
   <BFormGroup v-bind="computedAttrs" :id="id" :label="label" :state="state">
     <div v-for="(fieldProps, index) in subProps" :key="index" class="item">
+      <!-- @vue-expect-error -->
       <FormField
         v-bind="fieldProps"
         class="w-100 mb-3"
-        @update:model-value="updateElement(index, $event)"
+        @update:model-value="updateElement(index, $event as ArrInnerType<MV>)"
       >
         <template v-if="slots.default" #default="componentProps">
+          <!-- @vue-expect-error -->
           <slot v-bind="{ componentProps, index }" />
         </template>
       </FormField>
diff --git a/app/src/components/globals/FormFieldReadonly.vue b/app/src/components/globals/FormFieldReadonly.vue
index b753f93fa..5a09ce046 100644
--- a/app/src/components/globals/FormFieldReadonly.vue
+++ b/app/src/components/globals/FormFieldReadonly.vue
@@ -17,7 +17,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<FormFieldReadonlyProps<C, MV>>(), {
+const props = withDefaults(defineProps<FormFieldReadonlyProps<C>>(), {
   id: undefined,
   cols: () => ({ md: 4, lg: 3 }),
 })
diff --git a/app/src/components/globals/formItems/AdressItem.vue b/app/src/components/globals/formItems/AdressItem.vue
index 3922a34ea..b109b927f 100644
--- a/app/src/components/globals/formItems/AdressItem.vue
+++ b/app/src/components/globals/formItems/AdressItem.vue
@@ -5,20 +5,17 @@ import type {
   BaseItemComputedProps,
 } from '@/types/form'
 
-withDefaults(
-  defineProps<AdressItemProps & BaseItemComputedProps<AdressModelValue>>(),
-  {
-    id: undefined,
-    name: undefined,
-    placeholder: undefined,
-    touchKey: undefined,
-    type: 'email',
+withDefaults(defineProps<AdressItemProps & BaseItemComputedProps>(), {
+  id: undefined,
+  name: undefined,
+  placeholder: undefined,
+  touchKey: undefined,
+  type: 'email',
 
-    state: undefined,
-    validation: undefined,
-    ariaDescribedby: undefined,
-  },
-)
+  state: undefined,
+  validation: undefined,
+  ariaDescribedby: undefined,
+})
 
 const emit = defineEmits<{
   'update:modelValue': [value: AdressModelValue]
diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index 42d469e7b..c2c907847 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -1,21 +1,18 @@
 <script setup lang="ts">
 import type { CheckboxItemProps, BaseItemComputedProps } from '@/types/form'
 
-withDefaults(
-  defineProps<CheckboxItemProps & BaseItemComputedProps<boolean>>(),
-  {
-    id: undefined,
-    name: undefined,
-    placeholder: undefined,
-    touchKey: undefined,
-    label: undefined,
-    labels: () => ({ true: 'yes', false: 'no' }),
+withDefaults(defineProps<CheckboxItemProps & BaseItemComputedProps>(), {
+  id: undefined,
+  name: undefined,
+  placeholder: undefined,
+  touchKey: undefined,
+  label: undefined,
+  labels: () => ({ true: 'yes', false: 'no' }),
 
-    ariaDescribedby: undefined,
-    state: undefined,
-    validation: undefined,
-  },
-)
+  ariaDescribedby: undefined,
+  state: undefined,
+  validation: undefined,
+})
 
 const modelValue = defineModel<boolean>()
 </script>
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index f90c1f065..5e2331b5c 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -11,7 +11,7 @@ import type {
 } from '@/types/form'
 
 const props = withDefaults(
-  defineProps<FileItemProps & BaseItemComputedProps<FileModelValue>>(),
+  defineProps<FileItemProps & BaseItemComputedProps>(),
   {
     id: undefined,
     name: undefined,
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index bf5d7a02a..f25930d42 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -7,7 +7,7 @@ import type { BaseItemComputedProps, InputItemProps } from '@/types/form'
 import { objectGet } from '@/helpers/commons'
 
 const props = withDefaults(
-  defineProps<InputItemProps & BaseItemComputedProps<string | number | null>>(),
+  defineProps<InputItemProps & BaseItemComputedProps>(),
   {
     id: undefined,
     name: undefined,
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index c0d5da1b9..2099ce102 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -5,7 +5,7 @@ import { ValidationTouchSymbol } from '@/composables/form'
 import type { BaseItemComputedProps, SelectItemProps } from '@/types/form'
 
 const props = withDefaults(
-  defineProps<SelectItemProps & BaseItemComputedProps<string | null>>(),
+  defineProps<SelectItemProps & BaseItemComputedProps>(),
   {
     id: undefined,
     name: undefined,
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index a85e19745..ac665b2f0 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -5,7 +5,7 @@ import { ValidationTouchSymbol } from '@/composables/form'
 import type { BaseItemComputedProps, TagsItemProps } from '@/types/form'
 
 const props = withDefaults(
-  defineProps<TagsItemProps & BaseItemComputedProps<string[]>>(),
+  defineProps<TagsItemProps & BaseItemComputedProps>(),
   {
     id: undefined,
     name: undefined,
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index f8da44ff7..cbbd46061 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -16,7 +16,7 @@ defineOptions({
 })
 
 const props = withDefaults(
-  defineProps<TagsSelectizeItemProps & BaseItemComputedProps<string[]>>(),
+  defineProps<TagsSelectizeItemProps & BaseItemComputedProps>(),
   {
     id: undefined,
     name: undefined,
diff --git a/app/src/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index d5e35301c..68fbf3cc9 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -5,7 +5,7 @@ import { ValidationTouchSymbol } from '@/composables/form'
 import type { BaseItemComputedProps, TextAreaItemProps } from '@/types/form'
 
 const props = withDefaults(
-  defineProps<TextAreaItemProps & BaseItemComputedProps<string | null>>(),
+  defineProps<TextAreaItemProps & BaseItemComputedProps>(),
   {
     id: undefined,
     name: undefined,
diff --git a/app/src/composables/configPanels.ts b/app/src/composables/configPanels.ts
index 5b2f18542..e31d7e839 100644
--- a/app/src/composables/configPanels.ts
+++ b/app/src/composables/configPanels.ts
@@ -357,7 +357,7 @@ function useEvaluation(expression: string, form: MaybeRefOrGetter<Obj>) {
         ctx[key] = ctx[key].content
       }
       if (isAdressModelValue(ctx[key])) {
-        ctx[key] = ctx[key].value().join('')
+        ctx[key] = Object.values(ctx[key]).join('')
       }
     }
 
diff --git a/app/src/composables/useInfos.ts b/app/src/composables/useInfos.ts
index c3edd765c..f42bb5422 100644
--- a/app/src/composables/useInfos.ts
+++ b/app/src/composables/useInfos.ts
@@ -214,5 +214,6 @@ export const useInfos = createGlobalState(() => {
     logout,
     tryToReconnect,
     updateHtmlTitle,
+    updateRouterKey,
   }
 })
diff --git a/app/src/composables/useRequests.ts b/app/src/composables/useRequests.ts
index e2fe70fd7..5bca09e49 100644
--- a/app/src/composables/useRequests.ts
+++ b/app/src/composables/useRequests.ts
@@ -108,7 +108,7 @@ export const useRequests = createGlobalState(() => {
     const r = requests.value[requests.value.length - 1]!
 
     if (showModal) {
-      request.showModalTimeout = setTimeout(() => {
+      request.showModalTimeout = window.setTimeout(() => {
         // Display the waiting modal only if the request takes some time.
         if (r.status === 'pending') {
           r.showModal = true
diff --git a/app/src/helpers/yunohostArguments.ts b/app/src/helpers/yunohostArguments.ts
index 07d0a7906..e545e16a1 100644
--- a/app/src/helpers/yunohostArguments.ts
+++ b/app/src/helpers/yunohostArguments.ts
@@ -182,7 +182,7 @@ export function formatForm<
   R extends { [k in keyof T]: Awaited<FormValueReturnType<T[k]>> },
 >(
   form: MaybeRef<T>,
-  { removeEmpty = false },
+  { removeEmpty }: { removeEmpty: boolean },
 ): Promise<
   Partial<{
     // TODO: using `Partial` for now since i'm not sure we can infer empty `'' | [] | {}`
@@ -194,7 +194,7 @@ export function formatForm<
   R extends { [k in keyof T]: Awaited<FormValueReturnType<T[k]>> },
 >(
   form: MaybeRef<T>,
-  { removeNullish = false },
+  { removeNullish }: { removeNullish: boolean },
 ): Promise<{
   [k in keyof R as R[k] extends undefined | null ? never : k]: R[k]
 }>
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 1c80645be..89c07d979 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -294,7 +294,6 @@ export type FormFieldProps<
   MV extends any,
 > = Omit<FormField<C, MV>, 'hr' | 'visible' | 'readonly'> &
   BaseFormFieldComputedProps
-// BaseFormFieldComputedProps<MV>
 
 export type FormFieldReadonlyProps<C extends AnyWritableComponents> = Omit<
   FormFieldReadonly<C>,
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index 9992be922..00b209e99 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -85,7 +85,7 @@ function onHistoryBarClick(e: MouseEvent) {
   }
 
   // Delay the mouse move listener to distinguish a click from a drag.
-  const listenToMouseMove = setTimeout(() => {
+  const listenToMouseMove = window.setTimeout(() => {
     hElem.style.height = hElem.offsetHeight + 'px'
     hElem.classList.add('no-max')
     window.addEventListener('mousemove', onMouseMove)
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 4baac5e0e..bc78afcfa 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -224,7 +224,7 @@ async function dismissNotification(name: string) {
       humanKey: { key: 'apps.dismiss_notification', name: app.label },
     })
     // FIXME no need to refetch i guess, filter the reactive notifs?
-    .then(() => api.refetch)
+    .then(() => api.refetch())
 }
 
 async function uninstall() {
diff --git a/app/vite.config.ts b/app/vite.config.ts
index 41844e4ab..96e644a45 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -3,7 +3,7 @@ import { defineConfig, loadEnv } from 'vite'
 import fs from 'fs'
 import createVuePlugin from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
-import { BootstrapVueNextResolver } from 'unplugin-vue-components/resolvers'
+import { BootstrapVueNextResolver } from 'bootstrap-vue-next'
 
 import supportedLocales from './src/i18n/supportedLocales'
 
@@ -13,7 +13,7 @@ const supportedDatefnsLocales = Object.entries(supportedLocales).map(
   },
 )
 
-export default defineConfig(({ command, mode }) => {
+export default defineConfig(({ mode }) => {
   // Load env file based on `mode` in the current working directory.
   // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
   const env = loadEnv(mode, process.cwd())
@@ -57,7 +57,7 @@ export default defineConfig(({ command, mode }) => {
     build: {
       rollupOptions: {
         output: {
-          manualChunks: (id) => {
+          manualChunks: (id: string) => {
             // Circular import problems, this will merge core deps and api together
             if (!id.includes('node_modules') && id.includes('api/')) {
               return 'core'
@@ -65,7 +65,7 @@ export default defineConfig(({ command, mode }) => {
             // Translations
             if (id.includes('locales')) {
               const match = /.*\/i18n\/locales\/([\w-]+)\.json/.exec(id)
-              return `locales/${match[1]}/translations`
+              return `locales/${match![1]}/translations`
             }
             // Split date-fns locales
             if (id.includes('date-fns')) {
@@ -93,33 +93,33 @@ export default defineConfig(({ command, mode }) => {
       ...config,
       base: '/yunohost/admin',
     }
-  } else if (mode === 'development') {
-    return {
-      ...config,
-      server: {
-        port: 8080,
-        host: env.VITE_IP,
-        https: {
-          // Use already created cert from yunohost instance
-          key: fs.readFileSync('/etc/yunohost/certs/yunohost.org/key.pem'),
-          cert: fs.readFileSync('/etc/yunohost/certs/yunohost.org/crt.pem'),
-        },
-        fs: {
-          // Needed for special ynh-dev context where node_modules is symlinked
-          allow: [
-            '/ynh-dev/yunohost-admin/app',
-            '/var/cache/ynh-dev/yunohost-admin/node_modules',
-          ],
-        },
-        proxy: {
-          '/yunohost': {
-            target: `https://${env.VITE_IP}`,
-            ws: true,
-            logLevel: 'info',
-            secure: false,
-          },
+  }
+  // mode dev
+  return {
+    ...config,
+    server: {
+      port: 8080,
+      host: env.VITE_IP,
+      https: {
+        // Use already created cert from yunohost instance
+        key: fs.readFileSync('/etc/yunohost/certs/yunohost.org/key.pem'),
+        cert: fs.readFileSync('/etc/yunohost/certs/yunohost.org/crt.pem'),
+      },
+      fs: {
+        // Needed for special ynh-dev context where node_modules is symlinked
+        allow: [
+          '/ynh-dev/yunohost-admin/app',
+          '/var/cache/ynh-dev/yunohost-admin/node_modules',
+        ],
+      },
+      proxy: {
+        '/yunohost': {
+          target: `https://${env.VITE_IP}`,
+          ws: true,
+          logLevel: 'info',
+          secure: false,
         },
       },
-    }
+    },
   }
 })

From 75925a203b03983663e1333fdc1247222cfd1052 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 23 Aug 2024 14:00:14 +0200
Subject: [PATCH 229/275] chore: rm some FIXME

---
 app/src/components/globals/skeletons/BSkeletonWrapper.vue | 1 -
 app/src/components/layouts/MainLayout.vue                 | 1 -
 app/src/components/modals/ModalReconnecting.vue           | 1 -
 app/src/composables/configPanels.ts                       | 2 --
 app/src/types/form.ts                                     | 1 -
 app/src/views/PostInstall.vue                             | 2 --
 app/src/views/backup/BackupCreate.vue                     | 1 -
 app/src/views/domain/DomainList.vue                       | 1 -
 app/src/views/group/GroupList.vue                         | 1 -
 app/src/views/tool/ToolList.vue                           | 1 -
 10 files changed, 12 deletions(-)

diff --git a/app/src/components/globals/skeletons/BSkeletonWrapper.vue b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
index e2200d837..e579b41b4 100644
--- a/app/src/components/globals/skeletons/BSkeletonWrapper.vue
+++ b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
@@ -12,7 +12,6 @@ defineSlots<{
 <template>
   <div class="y-skeleton-wrapper">
     <div class="visually-hidden">
-      <!-- FIXME add `loading` translation -->
       {{ $t('loading') }}
     </div>
 
diff --git a/app/src/components/layouts/MainLayout.vue b/app/src/components/layouts/MainLayout.vue
index 91e4258c8..730fa78c7 100644
--- a/app/src/components/layouts/MainLayout.vue
+++ b/app/src/components/layouts/MainLayout.vue
@@ -106,7 +106,6 @@ const modalComponent = computed(() => {
       class="ms-auto"
     >
       <template #button-content>
-        <!-- FIXME i18n `quick_add` -->
         <YIcon iname="plus" /> {{ t('quick_add') }}
       </template>
       <template v-for="(item, i) in quickAddItems" :key="i">
diff --git a/app/src/components/modals/ModalReconnecting.vue b/app/src/components/modals/ModalReconnecting.vue
index 0ee3a37ba..3f15e7c8d 100644
--- a/app/src/components/modals/ModalReconnecting.vue
+++ b/app/src/components/modals/ModalReconnecting.vue
@@ -20,7 +20,6 @@ const request = reactive<{
   subStatus?: 'expired' | 'failed'
 }>({
   status: 'pending',
-  // FIXME translate
   humanRoute: 'reconnecting',
 })
 
diff --git a/app/src/composables/configPanels.ts b/app/src/composables/configPanels.ts
index e31d7e839..f26394046 100644
--- a/app/src/composables/configPanels.ts
+++ b/app/src/composables/configPanels.ts
@@ -234,7 +234,6 @@ export function formatOptions<MV extends Obj>(
   fields: FormFieldDict<MV>
   form: Ref<MV>
 } {
-  // FIXME handle optional for app install ? or is already handled in core bookworm?
   const form = ref(
     Object.fromEntries(
       options
@@ -332,7 +331,6 @@ function useExpression(
     // FIXME normalize expression in core? ('', 'false', 'true') and rm next 2 lines
     if (!expression || expression === 'true') return true
     if (expression === 'false') return false
-    // FIXME remove asUnreffed and manage ref type?
     return useEvaluation(expression, form)
   }
   return true
diff --git a/app/src/types/form.ts b/app/src/types/form.ts
index 89c07d979..ca11ae66c 100644
--- a/app/src/types/form.ts
+++ b/app/src/types/form.ts
@@ -27,7 +27,6 @@ type BaseDisplayItemProps = {
 }
 
 export type ButtonItemProps = BaseDisplayItemProps & {
-  // FIXME compute enabled JSExpression
   id: string
   enabled?: boolean | ComputedRef<boolean>
   icon?: string
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 5e85602a9..fc170a3af 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -42,7 +42,6 @@ const form = ref({
   confirmation: '',
 })
 const fields = {
-  // FIXME satisfies FormFieldDict but not for CardForm?
   alert: {
     component: 'ReadOnlyAlertItem',
     cProps: { label: t('postinstall.user.first_user_help'), type: 'info' },
@@ -119,7 +118,6 @@ async function performPostInstall(force = false) {
     { removeEmpty: true },
   )
 
-  // FIXME does the api will throw an error for bad passwords ?
   api
     .post({
       uri: 'postinstall' + (force ? '?force_diskspace' : ''),
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index d313072b6..4d124b0f2 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -86,7 +86,6 @@ const CheckboxList = createReusableTemplate<{
         :key="partName"
         class="d-flex justify-content-between align-items-center pe-0"
       >
-        <!-- FIXME use FormField or BFormGroup to get labels? -->
         <div class="me-2">
           <h5 v-if="'id' in item">
             <span class="fw-bold me-1">{{ item.name }}</span>
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 9d8e10c6f..cb09ba494 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -33,7 +33,6 @@ const [search, filteredTree] = useSearch(domainsTree, (s, node) =>
       :toggle-text="$t('domain.toggle_subdomains')"
       class="mb-5"
     >
-      <!-- FIXME slot typing not appearing? -->
       <template #default="{ data, parent }">
         <div class="w-100 d-flex justify-content-between align-items-center">
           <h5 class="me-3">
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 18b02c833..328a299f1 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -143,7 +143,6 @@ async function deleteGroup(name: string) {
       humanKey: { key: 'groups.delete', name },
     })
     .then(() => {
-      // FIXME primaryGroups as ref to override it ?
       primaryGroups.value = primaryGroups.value.filter(
         (group) => group.name !== name,
       )
diff --git a/app/src/views/tool/ToolList.vue b/app/src/views/tool/ToolList.vue
index 7f970d6e7..dbcf9fe53 100644
--- a/app/src/views/tool/ToolList.vue
+++ b/app/src/views/tool/ToolList.vue
@@ -26,7 +26,6 @@ const menu = [
 ]
 </script>
 
-<!-- FIXME make a component shared with HomeView.vue ? -->
 <template>
   <BListGroup class="menu-list">
     <BListGroupItem

From fbde9f99cf5f3ff4e4d4315c3b6302f90cbef17a Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 23 Aug 2024 14:01:45 +0200
Subject: [PATCH 230/275] locales: add missing keys

---
 app/src/i18n/locales/en.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index d32f28b20..cee5e2c1e 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -329,6 +329,9 @@
         "help": "Need help?"
     },
     "footer_version": "Powered by <a href='https://yunohost.org'>YunoHost</a> {version} ({repo}).",
+    "form": {
+        "select_one": "Please select an option"
+    },
     "form_errors": {
         "alpha": "Value must be alphabetical characters only.",
         "alphalownumdot_": "Value must be lower-case alphanumeric, dots and underscore characters only.",
@@ -341,6 +344,7 @@
         "invalid_form": "The form contains some errors.",
         "maxValue": "Value must be a number equal or lesser than {max}.",
         "minValue": "Value must be a number equal or greater than {min}.",
+        "numValue": "Value must be a number",
         "name": "Names may not includes special characters except <code> ,.'-</code>",
         "notInUsers": "The user '{value}' already exists.",
         "number": "Value must be a number.",
@@ -505,6 +509,7 @@
     "label_for_manifestname_help": "This is the name displayed in the user portal. This can be changed later.",
     "last_ran": "Last time ran:",
     "license": "License",
+    "loading": "Loading",
     "local_archives": "Local archives",
     "login": "Login",
     "logout": "Logout",
@@ -590,6 +595,7 @@
     "protocol": "Protocol",
     "purge_user_data_checkbox": "Purge {name}'s data? (This will remove the content of its home and mail directories.)",
     "purge_user_data_warning": "Purging user's data is not reversible. Be sure you know what you're doing!",
+    "quick_add": "Quick add",
     "readme": "Readme",
     "rerun_diagnosis": "Rerun diagnosis",
     "restart": "Restart",

From be8b077586edb218eecf3165ce5bcdaf94827a16 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 23 Aug 2024 14:11:42 +0200
Subject: [PATCH 231/275] chore: add prettier ignore

---
 app/src/types/commons.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/types/commons.ts b/app/src/types/commons.ts
index fe1af5d6c..27aa7df9a 100644
--- a/app/src/types/commons.ts
+++ b/app/src/types/commons.ts
@@ -13,7 +13,7 @@ export type VueClass =
 // BVN (not exported types for now)
 
 // eslint-disable-next-line prettier/prettier
-type ColsNumbers = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
+type ColsNumbers = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' // prettier-ignore
 export type Cols = Partial<Record<Breakpoint, boolean | ColsNumbers | 'auto'>>
 
 // CUSTOM

From 7859b221fc57c4f5c4e07c79f76407c1b17d4887 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 29 Aug 2024 09:57:47 +0200
Subject: [PATCH 232/275] fix: ConfigPanel help message

---
 app/src/components/ConfigPanel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
index cd868fadb..194939502 100644
--- a/app/src/components/ConfigPanel.vue
+++ b/app/src/components/ConfigPanel.vue
@@ -12,7 +12,7 @@
     <slot name="tab-top" />
 
     <template v-if="panel.help" #disclaimer>
-      <div class="alert alert-info" v-html="help" />
+      <div class="alert alert-info" v-html="panel.help" />
     </template>
 
     <slot name="tab-before" />

From f578b1913071215beaa522561a052f32fd30bf0e Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Sat, 31 Aug 2024 20:11:25 +0200
Subject: [PATCH 233/275] Update changelog for 12.0.2

---
 debian/changelog | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/debian/changelog b/debian/changelog
index e37576fbd..a160fb657 100644
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,3 +1,11 @@
+yunohost-admin (12.0.2) testing; urgency=low
+
+  - config panels: fix panel help message not being displayed (7859b221)
+
+  Thanks to all contributors <3 ! (axolotle)
+
+ -- Alexandre Aubin <alex.aubin@mailoo.org>  Sat, 31 Aug 2024 20:09:29 +0200
+
 yunohost-admin (12.0.1) testing; urgency=low
 
   - Reflect change in the core about pydantic/config panels (06bb22f4, 60934cf7)

From e02eaf5645ff96ce3c1f16549be44d17ca334cc4 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 5 Sep 2024 12:07:47 +0200
Subject: [PATCH 234/275] fix: update router key before router key to avoid
 double api queries

---
 app/src/composables/useInfos.ts | 2 --
 app/src/router/index.ts         | 4 +++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/composables/useInfos.ts b/app/src/composables/useInfos.ts
index f42bb5422..09e5906ce 100644
--- a/app/src/composables/useInfos.ts
+++ b/app/src/composables/useInfos.ts
@@ -69,8 +69,6 @@ export const useInfos = createGlobalState(() => {
   })
 
   watch(router.currentRoute, (to) => {
-    updateRouterKey()
-
     const routeNames =
       to.meta.breadcrumb ||
       to.matched
diff --git a/app/src/router/index.ts b/app/src/router/index.ts
index a449597a8..ead5c5d3b 100644
--- a/app/src/router/index.ts
+++ b/app/src/router/index.ts
@@ -39,7 +39,9 @@ router.beforeEach((to, from, next) => {
     dismissModal(currentRequest.value.id)
   }
 
-  const { installed, connected, onLogout } = useInfos()
+  const { installed, connected, onLogout, updateRouterKey } = useInfos()
+  updateRouterKey(to)
+
   if (to.name === 'post-install' && installed.value) {
     return next('/')
   }

From 6c0aef41c1afedee7fe8a4392465f02f5ea570be Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 5 Sep 2024 12:12:42 +0200
Subject: [PATCH 235/275] fix: show login view on unauthorized api error

---
 app/src/App.vue                    | 2 +-
 app/src/api/api.ts                 | 5 ++++-
 app/src/composables/useRequests.ts | 8 +++++---
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index be09de55a..6020ab7c7 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -11,7 +11,7 @@ const { locked } = useRequests()
 const { spinner, dark } = useSettings()
 
 const ready = ref(false)
-onAppCreated().then(() => (ready.value = true))
+onAppCreated().finally(() => (ready.value = true))
 
 onMounted(() => {
   const copypastaCode = ['ArrowDown', 'ArrowDown', 'ArrowUp', 'ArrowUp']
diff --git a/app/src/api/api.ts b/app/src/api/api.ts
index f75c5a572..64241cc0c 100644
--- a/app/src/api/api.ts
+++ b/app/src/api/api.ts
@@ -151,7 +151,10 @@ export default {
       endRequest({
         request,
         success: false,
-        isFormError: err instanceof APIBadRequestError,
+        showError: !(
+          err instanceof APIBadRequestError ||
+          err instanceof APIUnauthorizedError
+        ),
       })
       throw err
     }
diff --git a/app/src/composables/useRequests.ts b/app/src/composables/useRequests.ts
index 5bca09e49..1c2dc15af 100644
--- a/app/src/composables/useRequests.ts
+++ b/app/src/composables/useRequests.ts
@@ -122,14 +122,14 @@ export const useRequests = createGlobalState(() => {
   function endRequest({
     request,
     success,
-    isFormError = false,
+    showError = false,
   }: {
     request: APIRequest
     success: boolean
-    isFormError?: boolean
+    showError?: boolean
   }) {
     let status: RequestStatus = success ? 'success' : 'error'
-    let hideModal = success || isFormError
+    let hideModal = success || !showError
 
     if (success && request.action) {
       const { warnings, errors, messages } = request.action
@@ -155,6 +155,8 @@ export const useRequests = createGlobalState(() => {
         requests.value = requests.value.filter(
           (r) => r.showModal || !!r.action || !!r.err,
         )
+      } else if (showError) {
+        request.showModal = true
       }
     }, 350)
   }

From 4c3bd7391c005258c315558c612070e1178aa52d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 5 Sep 2024 12:25:41 +0200
Subject: [PATCH 236/275] fix: handle api not responding errors

---
 app/src/api/api.ts                       | 5 ++++-
 app/src/components/modals/ModalError.vue | 8 ++++++--
 app/src/composables/useInfos.ts          | 5 ++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/src/api/api.ts b/app/src/api/api.ts
index 64241cc0c..36224ba9c 100644
--- a/app/src/api/api.ts
+++ b/app/src/api/api.ts
@@ -28,6 +28,7 @@ export type APIQuery = {
   data?: Obj
   humanKey?: string | HumanKey
   showModal?: boolean
+  ignoreError?: boolean
   websocket?: boolean
   initial?: boolean
   asFormData?: boolean
@@ -106,6 +107,7 @@ export default {
     data = undefined,
     humanKey = undefined,
     showModal = method !== 'GET',
+    ignoreError = false,
     websocket = method !== 'GET',
     initial = false,
     asFormData = true,
@@ -153,7 +155,8 @@ export default {
         success: false,
         showError: !(
           err instanceof APIBadRequestError ||
-          err instanceof APIUnauthorizedError
+          err instanceof APIUnauthorizedError ||
+          ignoreError
         ),
       })
       throw err
diff --git a/app/src/components/modals/ModalError.vue b/app/src/components/modals/ModalError.vue
index 7a7dd531c..fd7147482 100644
--- a/app/src/components/modals/ModalError.vue
+++ b/app/src/components/modals/ModalError.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { APIError, APIInternalError } from '@/api/errors'
+import { APIError, APIInternalError, APINotRespondingError } from '@/api/errors'
 import ModalOverlay from '@/components/modals/ModalOverlay.vue'
 import type { APIRequest } from '@/composables/useRequests'
 
@@ -18,7 +18,11 @@ const { err, messages, traceback } = (() => {
 </script>
 
 <template>
-  <ModalOverlay :request="request" footer-variant="danger" :hide-footer="false">
+  <ModalOverlay
+    :request="request"
+    footer-variant="danger"
+    :hide-footer="err instanceof APINotRespondingError"
+  >
     <h5 v-t="`api_errors_titles.${err.name}`" />
 
     <em v-t="'api_error.sorry'" />
diff --git a/app/src/composables/useInfos.ts b/app/src/composables/useInfos.ts
index 09e5906ce..3f9eeedd9 100644
--- a/app/src/composables/useInfos.ts
+++ b/app/src/composables/useInfos.ts
@@ -106,7 +106,10 @@ export const useInfos = createGlobalState(() => {
     // FIXME need testing with api not responding
     try {
       const data = await timeout(
-        api.get<{ installed: boolean }>('installed'),
+        api.get<{ installed: boolean }>({
+          uri: 'installed',
+          ignoreError: retry > 0,
+        }),
         5000,
       )
       installed.value = data.installed

From 9a5541637c35b21de0b63770da494763cf9cdf06 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 5 Sep 2024 12:26:20 +0200
Subject: [PATCH 237/275] fix: handle errors in history that are not actions

---
 app/src/composables/useRequests.ts         | 2 +-
 app/src/views/_partials/HistoryConsole.vue | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/src/composables/useRequests.ts b/app/src/composables/useRequests.ts
index 1c2dc15af..33d439adc 100644
--- a/app/src/composables/useRequests.ts
+++ b/app/src/composables/useRequests.ts
@@ -57,7 +57,7 @@ export const useRequests = createGlobalState(() => {
     return requests.value.find((r) => r.showModal)
   })
   const locked = computed(() => currentRequest.value?.showModal)
-  const historyList = computed<APIRequestAction[]>(() => {
+  const historyList = computed<APIRequest[]>(() => {
     return requests.value
       .filter((r) => !!r.action || !!r.err)
       .reverse() as APIRequestAction[]
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index 00b209e99..0b181af8b 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -174,7 +174,10 @@ function onHistoryBarClick(e: MouseEvent) {
               @show-error="showModal"
             />
           </template>
-          <MessageListGroup :messages="request.action.messages" />
+          <MessageListGroup
+            v-if="request.action"
+            :messages="request.action.messages"
+          />
         </BAccordionItem>
       </BAccordion>
     </BCollapse>

From c294b1708e6b356b130806e1c6a79bf7e2f387be Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 5 Sep 2024 12:28:37 +0200
Subject: [PATCH 238/275] fix: handle api queries errors that prevents views to
 display

---
 app/src/components/layouts/MainLayout.vue | 27 ++++++++++++++++++-----
 app/src/composables/useInfos.ts           |  3 +++
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/app/src/components/layouts/MainLayout.vue b/app/src/components/layouts/MainLayout.vue
index 730fa78c7..1aae2ddd5 100644
--- a/app/src/components/layouts/MainLayout.vue
+++ b/app/src/components/layouts/MainLayout.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { createReusableTemplate } from '@vueuse/core'
 import type { VNode } from 'vue'
-import { computed } from 'vue'
+import { computed, onErrorCaptured } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
@@ -18,7 +18,7 @@ import type { CustomRoute, Skeleton, VueClass } from '@/types/commons'
 
 const { t } = useI18n()
 const router = useRouter()
-const { routerKey } = useInfos()
+const { routerKey, hasSuspenseError } = useInfos()
 const { reconnecting, currentRequest, dismissModal } = useRequests()
 const { transitions, transitionName, dark } = useSettings()
 
@@ -26,6 +26,7 @@ const RootView = createReusableTemplate<{
   Component: VNode
   classes: VueClass
 }>()
+const FallbackView = createReusableTemplate()
 
 const quickAddItems: CustomRoute[] = [
   { text: t('users_new'), to: { name: 'user-create' } },
@@ -71,9 +72,24 @@ const modalComponent = computed(() => {
     return { is: ModalWaiting, props: { request } }
   }
 })
+
+onErrorCaptured((e) => {
+  // If an error occurs in an async view when calling the api it will prevent
+  // the component to show up and will block the entire app.
+  // So we prevent the view to try to show itself and display the skeleton instead,
+  // the error modal will show up and lock the view or propose to go back.
+  hasSuspenseError.value = true
+  console.error(e)
+})
 </script>
 
 <template>
+  <FallbackView.define>
+    <template v-for="({ is, ...props }, i) in skeletons" :key="i">
+      <Component :is="is" v-bind="props" :class="{ 'mt-3': i !== 0 }" />
+    </template>
+  </FallbackView.define>
+
   <RootView.define v-slot="{ Component, classes }">
     <BOverlay
       opacity="0.75"
@@ -83,11 +99,10 @@ const modalComponent = computed(() => {
       class="main-overlay"
     >
       <Suspense>
-        <Component :is="Component" :class="classes" />
+        <FallbackView.reuse v-if="hasSuspenseError" />
+        <Component :is="Component" v-else :class="classes" />
         <template #fallback>
-          <template v-for="({ is, ...props }, i) in skeletons" :key="i">
-            <Component :is="is" v-bind="props" :class="{ 'mt-3': i !== 0 }" />
-          </template>
+          <FallbackView.reuse />
         </template>
       </Suspense>
 
diff --git a/app/src/composables/useInfos.ts b/app/src/composables/useInfos.ts
index 3f9eeedd9..10d477701 100644
--- a/app/src/composables/useInfos.ts
+++ b/app/src/composables/useInfos.ts
@@ -42,6 +42,7 @@ export const useInfos = createGlobalState(() => {
   const installed = ref<boolean | undefined>()
   const connected = useLocalStorage('connected', false)
   const yunohost = ref<{ version: string; repo: string } | undefined>()
+  const hasSuspenseError = ref(false)
   const routerKey = ref<string | undefined>()
   const breadcrumbRoutes = ref<BreadcrumbRoutes[]>([])
 
@@ -96,6 +97,7 @@ export const useInfos = createGlobalState(() => {
     })
 
     updateHtmlTitle()
+    hasSuspenseError.value = false
   })
 
   // INIT
@@ -205,6 +207,7 @@ export const useInfos = createGlobalState(() => {
     installed,
     connected,
     yunohost,
+    hasSuspenseError,
     routerKey,
     breadcrumb,
     ssoLink,

From 7a8061e201efc969d7b2f8d72a197eebffade825 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 5 Sep 2024 13:54:16 +0200
Subject: [PATCH 239/275] fix: update router key in router after hook

---
 app/src/router/index.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/src/router/index.ts b/app/src/router/index.ts
index ead5c5d3b..05dab750d 100644
--- a/app/src/router/index.ts
+++ b/app/src/router/index.ts
@@ -39,8 +39,7 @@ router.beforeEach((to, from, next) => {
     dismissModal(currentRequest.value.id)
   }
 
-  const { installed, connected, onLogout, updateRouterKey } = useInfos()
-  updateRouterKey(to)
+  const { installed, connected, onLogout } = useInfos()
 
   if (to.name === 'post-install' && installed.value) {
     return next('/')
@@ -53,4 +52,8 @@ router.beforeEach((to, from, next) => {
   }
 })
 
+router.afterEach((to) => {
+  useInfos().updateRouterKey(to)
+})
+
 export default router

From 79db49c25c14e1a55f5a3af7cd9676c39d1300c0 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 9 Sep 2024 09:58:06 +0200
Subject: [PATCH 240/275] fix: also close modal on APIErrorLog

---
 app/src/api/api.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/src/api/api.ts b/app/src/api/api.ts
index 36224ba9c..0ae10b5e4 100644
--- a/app/src/api/api.ts
+++ b/app/src/api/api.ts
@@ -9,6 +9,7 @@ import { useSettings } from '@/composables/useSettings'
 import type { Obj } from '@/types/commons'
 import {
   APIBadRequestError,
+  APIErrorLog,
   APIUnauthorizedError,
   type APIError,
 } from './errors'
@@ -156,6 +157,7 @@ export default {
         showError: !(
           err instanceof APIBadRequestError ||
           err instanceof APIUnauthorizedError ||
+          err instanceof APIErrorLog ||
           ignoreError
         ),
       })

From 97378825f9742ad5f81e2851cef048ab8c1d001b Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 9 Sep 2024 10:00:31 +0200
Subject: [PATCH 241/275] fix: deepSetErrors form: do not reset deep error if
 not already there

---
 app/src/composables/form.ts | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/src/composables/form.ts b/app/src/composables/form.ts
index 68cb19ae1..9173ce444 100644
--- a/app/src/composables/form.ts
+++ b/app/src/composables/form.ts
@@ -138,15 +138,11 @@ export function deepSetErrors(
   ...keys: string[]
 ) {
   const [k, ...ks] = keys
+  if (!(k in serverErrors) && !value.length) return
   if (ks.length) {
-    if (!(k in serverErrors) && !value.length) {
-      serverErrors[k] = {}
-      deepSetErrors(serverErrors[k] as ServerErrors, value, ...ks)
-    } else if (k in serverErrors) {
-      deepSetErrors(serverErrors[k] as ServerErrors, value, ...ks)
-    }
+    if (!(k in serverErrors)) serverErrors[k] = {}
+    deepSetErrors(serverErrors[k] as ServerErrors, value, ...ks)
   } else {
-    if (!(k in serverErrors) && !value.length) return
     serverErrors[k] = value
   }
 }

From 99fdd4f64babefe2f72b861a13a2179e263b1016 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 9 Sep 2024 11:06:30 +0200
Subject: [PATCH 242/275] refactor: add `postinstall` prop to DomainForm to
 query or not domains

---
 app/src/views/PostInstall.vue          |  4 ++--
 app/src/views/_partials/DomainForm.vue | 12 +++++++++---
 app/src/views/domain/DomainAdd.vue     |  5 -----
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index fc170a3af..1c9553878 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -168,10 +168,10 @@ async function performPostInstall(force = false) {
     <!-- DOMAIN SETUP STEP -->
     <template v-else-if="step === 'domain'">
       <DomainForm
-        :domains="[]"
-        :title="$t('postinstall_set_domain')"
+        postinstall
         :submit-text="$t('next')"
         :server-error="serverError"
+        :title="$t('postinstall_set_domain')"
         @submit="setDomain"
       >
         <template #disclaimer>
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 0c4d27ddd..d423b89f1 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -2,6 +2,7 @@
 import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useDomains } from '@/composables/data'
 import { useForm } from '@/composables/form'
 import {
   domain,
@@ -19,12 +20,13 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
-    domains: string[]
     title: string
+    postinstall?: boolean
     submitText?: string
     serverError?: string
   }>(),
   {
+    postinstall: false,
     submitText: undefined,
     serverError: undefined,
   },
@@ -33,12 +35,16 @@ const emit = defineEmits<{
   submit: [data: { domain: string; dyndns_recovery_password?: string }]
 }>()
 
+const { domains, domainsAsChoices } = !props.postinstall
+  ? useDomains()
+  : { domains: ref([] as string[]), domainsAsChoices: ref([] as string[]) }
+
 const { t } = useI18n()
 const dynDomains = ['nohost.me', 'noho.st', 'ynh.fr']
 
 const dynDnsForbiden = computed(() => {
-  if (!props.domains) return false
-  return props.domains.some((domain) => {
+  if (!domains.value) return false
+  return domains.value.some((domain) => {
     return dynDomains.some((dynDomain) => domain.includes(dynDomain))
   })
 })
diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/domain/DomainAdd.vue
index 56eae2a5c..892c72c19 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -4,14 +4,10 @@ import { useRouter } from 'vue-router'
 
 import api from '@/api'
 import { APIBadRequestError, type APIError } from '@/api/errors'
-import { useDomains } from '@/composables/data'
 import { DomainForm } from '@/views/_partials'
 
 const router = useRouter()
 
-await api.fetch({ uri: 'domains', cachePath: 'domains' })
-
-const { domains } = useDomains()
 const serverError = ref('')
 
 function onSubmit(data: { domain: string; dyndns_recovery_password?: string }) {
@@ -34,7 +30,6 @@ function onSubmit(data: { domain: string; dyndns_recovery_password?: string }) {
 
 <template>
   <DomainForm
-    :domains="domains"
     :title="$t('domain_add')"
     :server-error="serverError"
     :submit-text="$t('add')"

From 5f820c1de07b605d7c1a146842628c95091ae981 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 9 Sep 2024 11:14:35 +0200
Subject: [PATCH 243/275] feat: add `subdomain` radio choice to DomainForm with
 auto install letsencrypt cert option

---
 app/src/i18n/locales/en.json           |   5 +-
 app/src/views/_partials/DomainForm.vue | 106 ++++++++++++++++++++++++-
 app/src/views/domain/DomainAdd.vue     |   6 +-
 3 files changed, 113 insertions(+), 4 deletions(-)

diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index d9773dcdd..89c6082cd 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -246,12 +246,15 @@
             "dyn_dns_password_desc": "This password will allow you to later recover control of the domain if you reinstall your system. If you already registered this domain previously, use your recovery password here to reclaim it.",
             "from_local": "I want a domain for local usage / test only",
             "from_local_desc": "If you don't want an \"actual\" public domain name, you can use anything ending in <code>.local</code> or <code>.test</code>. Domain names ending in <code>.local</code> are special in the sense that they may automatically be resolved on the local network, assuming the clients support the Bonjour protocol. Alternatively, you may need to tweak the <code>/etc/hosts</code> file (or equivalent on Windows) on every client that you want to use this domain from, or to configure local DNS entries on your internet router.",
-            "from_registrar": "I want to add a domain I own, or a subdomain",
+            "from_registrar": "I want to add a domain I own",
             "from_registrar_desc": "You will need to manually configure DNS records on your registrar to finalize this domain's configuration. YunoHost's diagnosis will guide you about what DNS records to configure exactly.",
+            "from_subdomain": "I want to add a subdomain of an already added domain",
+            "from_subdomain_desc": "If your configured DNS records allows it, you will be able to automaticly install Let's Encrypt certificate.",
             "from_yunohost": "I don't own a domain, I want to register/use a free DynDNS domain provided by the YunoHost project",
             "from_yunohost_desc": "The YunoHost project maintains a free 'DynDNS' service. It is limited to one such domain per server (though you can also add sub-domains later using the other 'Add a domain I own, or a subdomain' option above). The DNS configuration will be automatically handled by YunoHost. This is ideal when starting up with self-hosting in general and you don't want to invest in a domain name yet. However, on the medium/long-term, we recommend buying your very own domain name to some registrar to have full ownership of your domain."
         },
         "cert": {
+            "install": "Also install Let's Encrypt certificate",
             "types": {
                 "letsencrypt": "Let's Encrypt",
                 "other": "Other/Unknown",
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index d423b89f1..8f197383e 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -2,6 +2,7 @@
 import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import api from '@/api'
 import { useDomains } from '@/composables/data'
 import { useForm } from '@/composables/form'
 import {
@@ -32,12 +33,34 @@ const props = withDefaults(
   },
 )
 const emit = defineEmits<{
-  submit: [data: { domain: string; dyndns_recovery_password?: string }]
+  submit: [
+    data: {
+      domain: string
+      dyndns_recovery_password?: string
+      install_letsencrypt_cert?: boolean
+    },
+  ]
 }>()
 
 const { domains, domainsAsChoices } = !props.postinstall
   ? useDomains()
   : { domains: ref([] as string[]), domainsAsChoices: ref([] as string[]) }
+const domainsCertsReady: Record<string, boolean> = !props.postinstall
+  ? await api
+      .fetchAll(
+        domains.value.map((domain) => ({ uri: `domains/${domain}/cert?full` })),
+      )
+      .then((certs) => {
+        return certs.reduce(
+          (acc, cert, i) => {
+            const domain = domains.value[i]
+            acc[domain] = cert.certificates[domain].has_wildcards
+            return acc
+          },
+          {} as Record<string, boolean>,
+        )
+      })
+  : {}
 
 const { t } = useI18n()
 const dynDomains = ['nohost.me', 'noho.st', 'ynh.fr']
@@ -49,11 +72,13 @@ const dynDnsForbiden = computed(() => {
   })
 })
 
-type Selected = 'domain' | 'dynDomain' | 'localDomain'
+type Selected = 'domain' | 'subDomain' | 'dynDomain' | 'localDomain'
 const selected = ref<'' | Selected>(dynDnsForbiden.value ? 'domain' : '')
 
 type Form = {
   domain: string
+  subDomain: AdressModelValue
+  certInstall: boolean
   dynDomain: AdressModelValue
   dynDomainPassword: string
   dynDomainPasswordConfirmation: string
@@ -61,6 +86,8 @@ type Form = {
 }
 const form = ref<Form>({
   domain: '',
+  subDomain: { localPart: '', separator: '.', domain: domains.value[0] },
+  certInstall: false,
   dynDomain: { localPart: '', separator: '.', domain: 'nohost.me' },
   dynDomainPassword: '',
   dynDomainPasswordConfirmation: '',
@@ -79,6 +106,36 @@ const fields = {
     },
   }) satisfies FieldProps<'InputItem', Form['domain']>,
 
+  subDomain: reactive({
+    component: 'AdressItem',
+    label: t('domain_name'),
+    rules: computed(() => {
+      return selected.value === 'subDomain'
+        ? { localPart: { required, dynDomain }, domain: { required } }
+        : undefined
+    }),
+    cProps: {
+      id: 'sub-domain',
+      placeholder: t('placeholder.domain').split('.')[0],
+      type: 'domain',
+      choices: domainsAsChoices,
+    },
+  }) satisfies FieldProps<'AdressItem', Form['subDomain']>,
+
+  certInstall: reactive({
+    component: 'CheckboxItem',
+    label: t('domain.cert.install'),
+    cProps: {
+      id: 'cert-install',
+    },
+    visible: computed(() => {
+      return (
+        !!form.value.subDomain.domain &&
+        domainsCertsReady[form.value.subDomain.domain]
+      )
+    }),
+  }) satisfies FieldProps<'CheckboxItem', Form['certInstall']>,
+
   dynDomain: reactive({
     component: 'AdressItem',
     label: t('domain_name'),
@@ -162,6 +219,10 @@ const domainIsVisible = computed(() => {
   return selected.value === 'domain'
 })
 
+const subDomainIsVisible = computed(() => {
+  return selected.value === 'subDomain'
+})
+
 const dynDomainIsVisible = computed(() => {
   return selected.value === 'dynDomain'
 })
@@ -179,6 +240,10 @@ const onDomainAdd = onSubmit(async () => {
     domain,
     dyndns_recovery_password:
       domainType === 'dynDomain' ? form.value.dynDomainPassword : undefined,
+    install_letsencrypt_cert:
+      domainType === 'subDomain' && fields.certInstall.visible
+        ? form.value.certInstall
+        : undefined,
   })
 })
 </script>
@@ -220,6 +285,43 @@ const onDomainAdd = onSubmit(async () => {
       />
     </BCollapse>
 
+    <BFormRadio
+      v-if="domainsCertsReady"
+      v-model="selected"
+      name="domain-type"
+      value="subDomain"
+      :class="subDomainIsVisible ? null : 'collapsed'"
+      :aria-expanded="subDomainIsVisible ? 'true' : 'false'"
+      aria-controls="collapse-subDomain"
+      class="mb-2"
+    >
+      {{ $t('domain.add.from_subdomain') }}
+    </BFormRadio>
+
+    <BCollapse
+      v-if="!postinstall"
+      id="collapse-subDomain"
+      v-model="subDomainIsVisible"
+    >
+      <p class="mt-2 mb-3 alert alert-info">
+        <YIcon iname="info-circle" />
+        <span class="ps-1" v-html="$t('domain.add.from_subdomain_desc')" />
+      </p>
+
+      <FormField
+        v-bind="fields.subDomain"
+        v-model="form.subDomain"
+        :validation="v.form.subDomain"
+      />
+
+      <FormField
+        v-if="fields.certInstall.visible"
+        v-bind="fields.certInstall"
+        v-model="form.certInstall"
+        :validation="v.form.certInstall"
+      />
+    </BCollapse>
+
     <BFormRadio
       v-model="selected"
       name="domain-type"
diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/domain/DomainAdd.vue
index 892c72c19..048603c4e 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -10,7 +10,11 @@ const router = useRouter()
 
 const serverError = ref('')
 
-function onSubmit(data: { domain: string; dyndns_recovery_password?: string }) {
+function onSubmit(data: {
+  domain: string
+  dyndns_recovery_password?: string
+  install_letsencrypt_cert?: boolean
+}) {
   api
     .post({
       uri: 'domains',

From 5e0c3e5484c33e885d09902421d1b53c929a0e1b Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 9 Sep 2024 11:15:04 +0200
Subject: [PATCH 244/275] feat: add ModalForm component

---
 app/components.d.ts                      |   1 +
 app/src/components/globals/ModalForm.vue | 230 +++++++++++++++++++++++
 2 files changed, 231 insertions(+)
 create mode 100644 app/src/components/globals/ModalForm.vue

diff --git a/app/components.d.ts b/app/components.d.ts
index 1d1de8ad8..6c78a9eb6 100644
--- a/app/components.d.ts
+++ b/app/components.d.ts
@@ -93,6 +93,7 @@ declare module 'vue' {
     MarkdownItem: typeof import('./src/components/globals/formItems/MarkdownItem.vue')['default']
     MessageListGroup: typeof import('./src/components/MessageListGroup.vue')['default']
     ModalError: typeof import('./src/components/modals/ModalError.vue')['default']
+    ModalForm: typeof import('./src/components/globals/ModalForm.vue')['default']
     ModalOverlay: typeof import('./src/components/modals/ModalOverlay.vue')['default']
     ModalReconnecting: typeof import('./src/components/modals/ModalReconnecting.vue')['default']
     ModalWaiting: typeof import('./src/components/modals/ModalWaiting.vue')['default']
diff --git a/app/src/components/globals/ModalForm.vue b/app/src/components/globals/ModalForm.vue
new file mode 100644
index 000000000..1b45fda00
--- /dev/null
+++ b/app/src/components/globals/ModalForm.vue
@@ -0,0 +1,230 @@
+<script setup lang="ts" generic="MV extends Obj, FFD extends FormFieldDict<MV>">
+import { createReusableTemplate } from '@vueuse/core'
+import { computed, toValue } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { FormValidation } from '@/composables/form'
+import { toEntries } from '@/helpers/commons'
+import type { KeyOfStr, Obj, VueClass } from '@/types/commons'
+import type { ConfigSection } from '@/types/configPanels'
+import type {
+  AnyDisplayComponents,
+  AnyWritableComponents,
+  BaseItemComputedProps,
+  ButtonItemProps,
+  FormFieldDict,
+} from '@/types/form'
+import { isDisplayComponent, isWritableComponent } from '@/types/form'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    fields?: FFD
+    validations?: FormValidation<MV>
+    submitText?: string
+    inline?: boolean
+    formClasses?: VueClass
+    noFooter?: boolean
+    hr?: boolean
+    sections?: ConfigSection<MV, FFD>[]
+  }>(),
+  {
+    id: 'ynh-form',
+    fields: undefined,
+    validations: undefined,
+    submitText: undefined,
+    inline: false,
+    formClasses: undefined,
+    noFooter: false,
+    hr: false,
+    sections: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  submit: [e: SubmitEvent]
+  action: [actionId: KeyOfStr<FFD>]
+  'update:modelValue': [modelValue: MV]
+}>()
+
+const slots = defineSlots<
+  {
+    top?: any
+    disclaimer?: any
+    'before-form'?: any
+    default?: any
+    'server-error'?: any
+    'after-form'?: any
+    buttons: any
+  } & {
+    [K in KeyOfStr<FFD> as `field:${K}`]?: (_: FFD[K]) => any
+  } & {
+    [K in KeyOfStr<FFD> as `component:${K}`]?: (
+      _: FFD[K]['component'] extends AnyWritableComponents
+        ? FFD[K]['cProps'] & BaseItemComputedProps
+        : FFD[K]['component'] extends AnyDisplayComponents
+          ? FFD[K]['cProps']
+          : never,
+    ) => any
+  }
+>()
+
+const modelValue = defineModel<MV>()
+const show = defineModel<boolean>('show')
+
+const { t } = useI18n()
+
+const globalErrorFeedback = computed(() => {
+  const v = props.validations
+  if (!v) return ''
+  const externalResults = toValue(v.global.$externalResults[0]?.$message)
+  return externalResults ?? (v.form.$error ? t('form_errors.invalid_form') : '')
+})
+
+const fields = computed(() => (props.fields ? toEntries(props.fields) : []))
+const sections = computed(() => {
+  const { sections, fields } = props
+  if (!sections || !fields) return
+  return sections.map((section) => ({
+    ...section,
+    fields: section.fields.map((id) => [id, fields[id]]) as {
+      [k in Extract<keyof FFD, string>]: [k, FFD[k]]
+    }[Extract<keyof FFD, string>][],
+  }))
+})
+
+function onModelUpdate(key: keyof MV, value: MV[keyof MV]) {
+  emit('update:modelValue', {
+    ...modelValue.value!,
+    [key]: value,
+  })
+}
+
+const Fields = createReusableTemplate<{
+  fieldsProps: { [k in Extract<keyof FFD, string>]: [k, FFD[k]] }[Extract<
+    keyof FFD,
+    string
+  >][]
+}>()
+
+// presence of <!-- @vue-expect-error --> are for `yarn type-check`,
+// don't know why custom component slots name doesn't pass
+</script>
+
+<template>
+  <Fields.define v-slot="{ fieldsProps }">
+    <template v-for="[k, field] in fieldsProps" :key="k">
+      <template v-if="toValue(field.visible) ?? true">
+        <!-- @vue-expect-error -->
+        <slot
+          v-if="isWritableComponent<MV[typeof k]>(field)"
+          :name="`field:${k}`"
+          v-bind="field"
+        >
+          <FormField
+            v-if="!field.readonly"
+            v-bind="field"
+            :model-value="modelValue![k]"
+            :validation="props.validations?.form[k]"
+            @update:model-value="onModelUpdate(k, $event)"
+          >
+            <!-- @vue-expect-error -->
+            <template v-if="slots[`component:${k}`]" #default="childProps">
+              <!-- @vue-expect-error -->
+              <slot :name="`component:${k}`" v-bind="childProps" />
+            </template>
+          </FormField>
+          <FormFieldReadonly
+            v-else
+            v-bind="field"
+            :model-value="modelValue![k]"
+          />
+        </slot>
+        <!-- @vue-expect-error -->
+        <slot
+          v-else-if="isDisplayComponent(field)"
+          :name="`component:${k}`"
+          v-bind="field.cProps"
+        >
+          <Component
+            :is="field.component"
+            v-if="field.component !== 'ButtonItem'"
+            v-bind="field.cProps"
+          />
+          <ButtonItem
+            v-else
+            v-bind="field.cProps as ButtonItemProps"
+            @action="emit('action', $event as KeyOfStr<FFD>)"
+          />
+        </slot>
+
+        <hr v-if="field.hr ?? hr" />
+      </template>
+    </template>
+  </Fields.define>
+
+  <BModal v-model="show" v-bind="$attrs" centered class="card-form">
+    <template #default>
+      <slot name="top" />
+
+      <slot name="disclaimer" />
+
+      <slot name="before-form" />
+
+      <BForm
+        :id="id"
+        :inline="inline"
+        :class="formClasses"
+        novalidate
+        @submit.prevent.stop="emit('submit', $event as SubmitEvent)"
+      >
+        <slot name="default">
+          <template v-if="sections">
+            <template v-for="section in sections" :key="section.id">
+              <Component
+                :is="section.name ? 'section' : 'div'"
+                v-if="toValue(section.visible)"
+                class="form-section"
+              >
+                <BCardTitle v-if="section.name" title-tag="h3">
+                  {{ section.name }}
+                  <small v-if="section.help">{{ section.help }}</small>
+                </BCardTitle>
+                <!-- @vue-ignore-next-line -->
+                <Fields.reuse :fields-props="section.fields" />
+              </Component>
+            </template>
+          </template>
+          <template v-else-if="fields">
+            <!-- @vue-ignore-next-line -->
+            <Fields.reuse :fields-props="fields" />
+          </template>
+        </slot>
+
+        <slot name="server-error">
+          <YAlert
+            v-if="globalErrorFeedback !== ''"
+            alert
+            variant="danger"
+            class="my-3"
+            icon="ban"
+          >
+            <div v-html="globalErrorFeedback" />
+          </YAlert>
+        </slot>
+      </BForm>
+
+      <slot name="after-form" />
+    </template>
+
+    <template #footer>
+      <BButton type="submit" variant="success" :form="id">
+        {{ submitText ?? $t('save') }}
+      </BButton>
+    </template>
+  </BModal>
+</template>

From cdf6ee4bb71982721bf371cd6efc23095994a9f2 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 9 Sep 2024 11:16:21 +0200
Subject: [PATCH 245/275] feat: add `modal` prop to DomainForm to display has a
 modal

---
 app/src/views/_partials/DomainForm.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 8f197383e..1ee7b6cf4 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -22,11 +22,13 @@ defineOptions({
 const props = withDefaults(
   defineProps<{
     title: string
+    modal?: boolean
     postinstall?: boolean
     submitText?: string
     serverError?: string
   }>(),
   {
+    modal: false,
     postinstall: false,
     submitText: undefined,
     serverError: undefined,
@@ -42,6 +44,8 @@ const emit = defineEmits<{
   ]
 }>()
 
+const show = defineModel<boolean>('show')
+
 const { domains, domainsAsChoices } = !props.postinstall
   ? useDomains()
   : { domains: ref([] as string[]), domainsAsChoices: ref([] as string[]) }
@@ -249,7 +253,10 @@ const onDomainAdd = onSubmit(async () => {
 </script>
 
 <template>
-  <CardForm
+  <Component
+    :is="modal ? 'ModalForm' : 'CardForm'"
+    id="domain-add"
+    v-model:show="show"
     :title="title"
     icon="globe"
     :submit-text="submitText"
@@ -379,5 +386,5 @@ const onDomainAdd = onSubmit(async () => {
         :validation="v.form.localDomain"
       />
     </BCollapse>
-  </CardForm>
+  </Component>
 </template>

From 95192f8265a268d5402e1c90dd320ec43d8394bc Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 9 Sep 2024 11:19:21 +0200
Subject: [PATCH 246/275] feat: add ability to add a domain in the AppInstall
 view from the `domain` field

---
 app/src/views/app/AppInstall.vue | 59 +++++++++++++++++++++++++++++++-
 1 file changed, 58 insertions(+), 1 deletion(-)

diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index ff91b8205..9e992cc53 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -4,13 +4,17 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
 import api, { objectToParams } from '@/api'
+import { APIBadRequestError, APIError } from '@/api/errors'
 import { formatOptions } from '@/composables/configPanels'
+import { useDomains } from '@/composables/data'
 import { useForm } from '@/composables/form'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { getKeys, joinOrNull } from '@/helpers/commons'
 import { formatForm, formatI18nField } from '@/helpers/yunohostArguments'
 import type { Obj } from '@/types/commons'
 import type { AppManifest, Catalog } from '@/types/core/api'
+import type { FormFieldProps } from '@/types/form'
+import DomainForm from '@/views/_partials/DomainForm.vue'
 import {
   formatAppIntegration,
   formatAppLinks,
@@ -88,8 +92,11 @@ const [app, form, fields] = await api
     return [app, form, fields] as const
   })
 
+const { domainsAsChoices } = useDomains()
 const { v, onSubmit } = useForm(form, fields)
 const force = ref(false)
+const showAddDomainModal = ref(false)
+const domainAddServerError = ref('')
 
 const performInstall = onSubmit(async (onError) => {
   if ('path' in form.value && form.value.path === '/') {
@@ -131,6 +138,28 @@ const performInstall = onSubmit(async (onError) => {
     })
     .catch(onError)
 })
+
+function onDomainAdd(data: {
+  domain: string
+  dyndns_recovery_password?: string
+  install_letsencrypt_cert?: boolean
+}) {
+  api
+    .post({
+      uri: 'domains',
+      cachePath: `domains.${data.domain}`,
+      data,
+      humanKey: { key: 'domains.add', name: data.domain },
+    })
+    .then(() => {
+      form.value.domain = data.domain
+      showAddDomainModal.value = false
+    })
+    .catch((err: APIError) => {
+      if (!(err instanceof APIBadRequestError)) throw err
+      domainAddServerError.value = err.message
+    })
+}
 </script>
 
 <template>
@@ -260,9 +289,37 @@ const performInstall = onSubmit(async (onError) => {
         :submit-text="$t('install')"
         :validations="v"
         @submit="performInstall"
-      />
+      >
+        <template v-if="form.domain" #field:domain="fieldProps">
+          <FormField
+            v-bind="fieldProps as FormFieldProps<'SelectItem', string>"
+          >
+            <template #default="componentProps">
+              <BInputGroup>
+                <SelectItem
+                  v-bind="componentProps"
+                  v-model="form.domain"
+                  :options="domainsAsChoices"
+                />
+                <BButton variant="primary" @click="showAddDomainModal = true">
+                  {{ t('domain_add') }}
+                </BButton>
+              </BInputGroup>
+            </template>
+          </FormField>
+        </template>
+      </CardForm>
     </template>
 
+    <DomainForm
+      v-model:show="showAddDomainModal"
+      modal
+      :submit-text="$t('add')"
+      :server-error="domainAddServerError"
+      :title="$t('domain_add')"
+      @submit="onDomainAdd"
+    />
+
     <!-- FIXME hum not handled, is it still a thing? -->
     <!-- In case of a custom url with no manifest found -->
     <YAlert

From 83934107903503ebd783ee766a832c7125e885f6 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 10 Sep 2024 15:49:21 +0200
Subject: [PATCH 247/275] fix: dns push records type + display

---
 app/src/types/core/api.ts          | 8 +++++---
 app/src/views/domain/DomainDns.vue | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index f860e2167..41529b27d 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -319,11 +319,13 @@ export type SystemUpdate = {
 // DOMAINS
 
 export type DNSRecord = {
-  name: string
   type: string
-  managed_by_yunohost: boolean
-  old_content: string
+  name: string
+  ttl: number
   content: string
+  old_content?: string
+  id?: number
+  managed_by_yunohost?: boolean
   spaces: string // Added when formating
 }
 export type DNSCategories = Record<
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index 7ba9bee31..8a28997cf 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -58,7 +58,7 @@ function getDnsChanges() {
       }
 
       function formatRecords(records?: DNSRecord[]) {
-        if (!records) return null
+        if (!records || !records.length) return null
         const longestName = getLongest(records, 'name')
         const longestType = getLongest(records, 'type')
         return records.map((record) => {
@@ -84,7 +84,7 @@ function getDnsChanges() {
 
       dnsZone.value = formatRecords(dnsCategories.unchanged)
       dnsChanges.value = changes.length > 0 ? changes : null
-      force.value = canForce ? false : null
+      force.value = changes.length && canForce ? false : null
     })
     .catch((err) => {
       if (err.name !== 'APIBadRequestError') throw err

From 93dd81086bb84acf7a01b52b19ffddb1a60c9ab2 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 11 Sep 2024 10:29:11 +0200
Subject: [PATCH 248/275] feat: add tos acknowledgement in post install

---
 app/src/views/PostInstall.vue | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index fc170a3af..00330d944 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -31,6 +31,7 @@ if (installed.value) {
 type Steps = 'start' | 'domain' | 'user' | 'rootfsspace-error' | 'login'
 const step = ref<Steps>('start')
 const serverError = ref('')
+const tosAcknowledged = ref(false)
 const domain = ref('')
 const dyndns_recovery_password = ref<string | undefined>()
 
@@ -150,17 +151,30 @@ async function performPostInstall(force = false) {
   <div class="post-install">
     <!-- START STEP -->
     <template v-if="step === 'start'">
-      <p class="alert alert-success">
-        <YIcon iname="thumbs-up" /> {{ $t('postinstall_intro_1') }}
-      </p>
+      <YAlert variant="success" icon="thumbs-up">
+        {{ $t('postinstall_intro_1') }}
+      </YAlert>
 
-      <p class="alert alert-info">
+      <YAlert variant="info">
         <span v-t="'postinstall_intro_2'" />
         <br />
         <span v-html="$t('postinstall_intro_3')" />
-      </p>
-
-      <BButton size="lg" variant="success" @click="goToStep('domain')">
+      </YAlert>
+
+      <YAlert variant="warning">
+        <MarkdownItem
+          :label="t('tos.postinstall_acknowledgement')"
+          class="mb-2"
+        />
+        <CheckboxItem v-model="tosAcknowledged" :label="t('tos.i_agree')" />
+      </YAlert>
+
+      <BButton
+        size="lg"
+        variant="success"
+        :disabled="!tosAcknowledged"
+        @click="goToStep('domain')"
+      >
         {{ $t('begin') }}
       </BButton>
     </template>

From bfd70bc947a225d3dcb07ac877e4ac28df9991b9 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 11 Sep 2024 10:30:22 +0200
Subject: [PATCH 249/275] feat: allow html in CheckboxItem labels

---
 app/src/components/globals/formItems/CheckboxItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index c2c907847..f22da08b4 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -26,6 +26,6 @@ const modelValue = defineModel<boolean>()
     :state="state"
     switch
   >
-    {{ label || $t(labels[modelValue ? 'true' : 'false']) }}
+    <span v-html="label || $t(labels[modelValue ? 'true' : 'false'])" />
   </BFormCheckbox>
 </template>

From 993c0f789925d5d67e9dc8b5a02b2129295c9c2f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 11 Sep 2024 10:30:48 +0200
Subject: [PATCH 250/275] feat: add 'checked' validator

---
 app/src/helpers/validators/customValidators.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/src/helpers/validators/customValidators.ts b/app/src/helpers/validators/customValidators.ts
index 77a9f3157..5d4a287de 100644
--- a/app/src/helpers/validators/customValidators.ts
+++ b/app/src/helpers/validators/customValidators.ts
@@ -56,6 +56,8 @@ const unique = (items: MaybeRef<any[] | null>) =>
     return items_ ? !helpers.req(item) || !items_.includes(item) : true
   })
 
+const checked = (value: boolean) => value === true
+
 export {
   alphalownumdot_,
   domain,
@@ -67,4 +69,5 @@ export {
   appRepoUrl,
   name,
   unique,
+  checked,
 }

From c4836c1b7e60a3e09608124de4dcfd0fc8463459 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 11 Sep 2024 10:32:53 +0200
Subject: [PATCH 251/275] feat: add tos acknowledgement in DomainForm for dyn
 domains

---
 app/src/views/_partials/DomainForm.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 0c4d27ddd..99c2b3530 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 
 import { useForm } from '@/composables/form'
 import {
+  checked,
   domain,
   dynDomain,
   minLength,
@@ -51,6 +52,7 @@ type Form = {
   dynDomain: AdressModelValue
   dynDomainPassword: string
   dynDomainPasswordConfirmation: string
+  tosAcknowledged: boolean
   localDomain: AdressModelValue
 }
 const form = ref<Form>({
@@ -58,6 +60,7 @@ const form = ref<Form>({
   dynDomain: { localPart: '', separator: '.', domain: 'nohost.me' },
   dynDomainPassword: '',
   dynDomainPasswordConfirmation: '',
+  tosAcknowledged: false,
   localDomain: { localPart: '', separator: '.', domain: 'local' },
 })
 const fields = {
@@ -118,6 +121,18 @@ const fields = {
     },
   }) satisfies FieldProps<'InputItem', Form['dynDomainPasswordConfirmation']>,
 
+  tosAcknowledged: reactive({
+    component: 'CheckboxItem',
+    label: t('tos.acknowledgement'),
+    rules: computed(() =>
+      selected.value === 'dynDomain' ? { checked } : undefined,
+    ),
+    cProps: {
+      id: 'tos-acknowledged',
+      label: t('tos.i_have_read'),
+    },
+  }) satisfies FieldProps<'CheckboxItem', Form['tosAcknowledged']>,
+
   localDomain: reactive({
     component: 'AdressItem',
     label: t('domain_name'),
@@ -150,6 +165,7 @@ const dynKeys = [
   'dynDomain',
   'dynDomainPassword',
   'dynDomainPasswordConfirmation',
+  'tosAcknowledged',
 ] as (keyof Form)[]
 
 const domainIsVisible = computed(() => {

From a21f95599c0a75296d312aaec587d838e7df50d9 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 11 Sep 2024 10:33:15 +0200
Subject: [PATCH 252/275] feat: add TOS link in footer

---
 app/src/App.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/src/App.vue b/app/src/App.vue
index 6020ab7c7..c7b3239b0 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -138,6 +138,13 @@ onMounted(() => {
           >
             <YIcon iname="life-ring" /> {{ $t('footer.help') }}
           </BNavItem>
+          <BNavItem
+            href="https://yunohost.org/terms_of_services"
+            target="_blank"
+            link-classes="text-secondary"
+          >
+            <YIcon iname="legal" /> {{ $t('footer.tos') }}
+          </BNavItem>
           <BNavItem
             href="https://donate.yunohost.org/"
             target="_blank"

From b79c81fefc361ff4dbfdc988975e68f7d2a8b9f9 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 11 Sep 2024 10:34:18 +0200
Subject: [PATCH 253/275] i18n: add new TOS translations

---
 app/src/i18n/locales/en.json | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index d9773dcdd..e102c8a6c 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -326,7 +326,8 @@
     "footer": {
         "documentation": "Documentation",
         "donate": "Donate",
-        "help": "Need help?"
+        "help": "Need help?",
+        "tos": "Terms of Service"
     },
     "footer_version": "Powered by <a href='https://yunohost.org'>YunoHost</a> {version} ({repo}).",
     "form": {
@@ -337,6 +338,7 @@
         "alphalownumdot_": "Value must be lower-case alphanumeric, dots and underscore characters only.",
         "appRepoUrl": "YunoHost app repository URLs are expected to look like https://domain.tld/path/to/repo_ynh",
         "between": "Value must be between {min} and {max}.",
+        "checked": "Checkbox must be checked.",
         "domain": "Invalid domain name: Must be lower-case alphanumeric, dot and dash characters only",
         "dynDomain": "Invalid domain name: Must be lower-case alphanumeric and dash characters only",
         "email": "Invalid email: must be alphanumeric and <code>_.-</code> characters only (e.g. someone@example.com, s0me-1@example.com)",
@@ -649,6 +651,12 @@
     },
     "tools_webadmin_settings": "Web-admin settings",
     "tools_yunohost_settings": "YunoHost settings",
+    "tos": {
+        "acknowledgement": "TOS acknowledgement",
+        "i_agree": "I agree",
+        "i_have_read": "I have read the <a href='https://yunohost.org/terms_of_services' target='_blank'>Terms of service</a>",
+        "postinstall_acknowledgement": "The YunoHost project is a team of volunteers who have made common cause to create a free operating system for servers, called YunoHost. YunoHost is published under the [GNU Affero General Public License v3](https://www.gnu.org/licenses/agpl-3.0.txt).  In connection with this software, the project administers and makes available several technical and community services for various purposes.  By using these services, you agree to be bound by the following [Terms of service](https://yunohost.org/terms_of_services)."
+    },
     "traceback": "Traceback",
     "udp": "UDP",
     "unauthorized": "Unauthorized",

From 8a966435b3d6eed1760d60eb93c59e8c28050ed7 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 12 Sep 2024 12:31:47 +0200
Subject: [PATCH 254/275] fix: display wrong password or username error on
 failed login

---
 app/src/views/LoginView.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index 280788415..e80534854 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter, type LocationQueryValue } from 'vue-router'
 
+import { APIUnauthorizedError } from '@/api/errors'
 import { useForm } from '@/composables/form'
 import { useInfos } from '@/composables/useInfos'
 import { alphalownumdot_, minLength, required } from '@/helpers/validators'
@@ -49,7 +50,7 @@ const fields = {
   } satisfies FieldProps<'InputItem', Form['password']>,
 } satisfies FormFieldDict<Form>
 
-const { v, onSubmit } = useForm(form, fields)
+const { v, onSubmit, serverErrors } = useForm(form, fields)
 
 const onLogin = onSubmit((onError) => {
   const { username, password } = form.value
@@ -66,7 +67,13 @@ const onLogin = onSubmit((onError) => {
         )
       }
     })
-    .catch((err) => onError(err, t('wrong_password_or_username')))
+    .catch((err) => {
+      if (err instanceof APIUnauthorizedError) {
+        serverErrors.global = [t('wrong_password_or_username')]
+      } else {
+        onError(err)
+      }
+    })
 })
 </script>
 

From 43f8e8bb7b4f2807d502c4dffeba4e51923a2e10 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 12 Sep 2024 12:37:18 +0200
Subject: [PATCH 255/275] feat: save logged in username

---
 app/src/composables/useInfos.ts | 3 +++
 app/src/views/LoginView.vue     | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/src/composables/useInfos.ts b/app/src/composables/useInfos.ts
index 10d477701..07d7362b9 100644
--- a/app/src/composables/useInfos.ts
+++ b/app/src/composables/useInfos.ts
@@ -41,6 +41,7 @@ export const useInfos = createGlobalState(() => {
   const host = ref(window.location.host)
   const installed = ref<boolean | undefined>()
   const connected = useLocalStorage('connected', false)
+  const currentUser = useLocalStorage<string | null>('currentUser', null)
   const yunohost = ref<{ version: string; repo: string } | undefined>()
   const hasSuspenseError = ref(false)
   const routerKey = ref<string | undefined>()
@@ -151,6 +152,7 @@ export const useInfos = createGlobalState(() => {
 
   function onLogout(route?: RouteLocationNormalizedLoaded) {
     connected.value = false
+    currentUser.value = null
     yunohost.value = undefined
     const previousRoute = route ?? router.currentRoute.value
     if (previousRoute.name === 'login') return
@@ -206,6 +208,7 @@ export const useInfos = createGlobalState(() => {
     host,
     installed,
     connected,
+    currentUser,
     yunohost,
     hasSuspenseError,
     routerKey,
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index e80534854..526685c28 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -20,7 +20,7 @@ const props = withDefaults(
 
 const { t } = useI18n()
 const router = useRouter()
-const { login, installed } = useInfos()
+const { login, installed, currentUser } = useInfos()
 
 type Form = typeof form.value
 const form = ref({
@@ -57,6 +57,7 @@ const onLogin = onSubmit((onError) => {
   const credentials = [username, password].join(':')
   login(credentials)
     .then(() => {
+      currentUser.value = username
       if (props.forceReload) {
         window.location.href = '/yunohost/admin/'
       } else {

From 4f2e693434e720cac90aec47673dcd64e043f5d5 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 12 Sep 2024 12:39:14 +0200
Subject: [PATCH 256/275] feat: ask confirmation before removing current user
 from 'admins' group

---
 app/src/i18n/locales/en.json      |  5 +++++
 app/src/views/group/GroupList.vue | 11 ++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index d9773dcdd..096036a0e 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -373,6 +373,11 @@
     "group_new": "New group",
     "group_specific_permissions": "Individual user permissions",
     "group_visitors": "Visitors",
+    "groups": {
+        "remove_user": {
+            "confirm_from_admins": "Are you sure you want to remove yourself from the 'admins' group?"
+        }
+    },
     "groups_and_permissions": "Groups and permissions",
     "groups_and_permissions_manage": "Manage groups and permissions",
     "history": {
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 328a299f1..779f847b5 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n'
 import api from '@/api'
 import TagsSelectizeItem from '@/components/globals/formItems/TagsSelectizeItem.vue'
 import { useAutoModal } from '@/composables/useAutoModal'
+import { useInfos } from '@/composables/useInfos'
 import { useSearch } from '@/composables/useSearch'
 import { toEntries } from '@/helpers/commons'
 import type { Obj } from '@/types/commons'
@@ -16,6 +17,7 @@ import type { TagUpdateArgs } from '@/types/form'
 
 const { t } = useI18n()
 const modalConfirm = useAutoModal()
+const { currentUser } = useInfos()
 
 const {
   primaryGroups,
@@ -119,10 +121,17 @@ async function onPermissionChanged(
     .then(() => applyFn(perm))
 }
 
-function onUserChanged(
+async function onUserChanged(
   { tag: user, action, applyFn }: TagUpdateArgs,
   name: string,
 ) {
+  if (name === 'admins' && action === 'remove' && user === currentUser.value) {
+    const confirmed = await modalConfirm(
+      t('groups.remove_user.confirm_from_admins'),
+    )
+    if (!confirmed) return
+  }
+
   api
     .put({
       uri: `users/groups/${name}/${action}/${user}`,

From d20619e3c4ba486a036c49477dcb6638620baf26 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 12 Sep 2024 14:16:27 +0200
Subject: [PATCH 257/275] feat: display custom antifeature text in AppInstall

---
 app/src/types/core/api.ts        | 1 +
 app/src/views/app/AppInstall.vue | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index 41529b27d..83f54eaf5 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -31,6 +31,7 @@ export type AppMinManifest = {
     ram: { build: string; runtime: string }
     yunohost: string
   }
+  antifeatures?: Obj<Translation>
   upstream: AppUpstream
 }
 
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index ff91b8205..ddfa68957 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -39,7 +39,12 @@ const [app, form, fields] = await api
     const quality = formatAppQuality(manifest.quality)
     const preInstall = formatI18nField(manifest.notifications.PRE_INSTALL?.main)
     const antifeatures = manifest.antifeatures?.length
-      ? manifest.antifeatures.map((af) => antifeaturesList[af])
+      ? manifest.antifeatures.map((af) => {
+          const antifeature = antifeaturesList[af]
+          const customText = catalog.apps[id]?.manifest.antifeatures?.[af]
+          if (customText) antifeature.description = formatI18nField(customText)
+          return antifeature
+        })
       : null
     const hasDanger = quality.variant === 'danger' || !requirements.ram.pass
     const hasSupport = getKeys(requirements).every((key) => {

From 4875c0d193d9e6cb91b2ea8716b813a748321e19 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 12 Sep 2024 15:06:40 +0200
Subject: [PATCH 258/275] i18n: escape `@` char

---
 app/src/i18n/locales/ar.json      |  4 ++--
 app/src/i18n/locales/ca.json      | 10 +++++-----
 app/src/i18n/locales/cs.json      |  8 ++++----
 app/src/i18n/locales/de.json      | 10 +++++-----
 app/src/i18n/locales/en.json      | 10 +++++-----
 app/src/i18n/locales/eo.json      |  2 +-
 app/src/i18n/locales/es.json      | 10 +++++-----
 app/src/i18n/locales/eu.json      | 10 +++++-----
 app/src/i18n/locales/fa.json      |  8 ++++----
 app/src/i18n/locales/fi.json      |  8 ++++----
 app/src/i18n/locales/fr.json      | 10 +++++-----
 app/src/i18n/locales/gl.json      | 10 +++++-----
 app/src/i18n/locales/id.json      | 10 +++++-----
 app/src/i18n/locales/it.json      | 10 +++++-----
 app/src/i18n/locales/ja.json      | 12 ++++++------
 app/src/i18n/locales/ko.json      |  2 +-
 app/src/i18n/locales/nl.json      | 10 +++++-----
 app/src/i18n/locales/oc.json      |  8 ++++----
 app/src/i18n/locales/pl.json      | 10 +++++-----
 app/src/i18n/locales/pt.json      |  8 ++++----
 app/src/i18n/locales/ru.json      | 10 +++++-----
 app/src/i18n/locales/sk.json      |  8 ++++----
 app/src/i18n/locales/tr.json      |  8 ++++----
 app/src/i18n/locales/uk.json      | 10 +++++-----
 app/src/i18n/locales/zh_Hans.json | 10 +++++-----
 25 files changed, 108 insertions(+), 108 deletions(-)

diff --git a/app/src/i18n/locales/ar.json b/app/src/i18n/locales/ar.json
index 238d12210..cf207391d 100644
--- a/app/src/i18n/locales/ar.json
+++ b/app/src/i18n/locales/ar.json
@@ -147,7 +147,7 @@
     "user_interface_link": "واجهة المستخدم",
     "user_mailbox_quota": "مساحة علبة البريد",
     "user_mailbox_use": "المساحة المستعمَلة في علبة البريد",
-    "user_new_forward": "newforward@myforeigndomain.org",
+    "user_new_forward": "newforward{'@'}myforeigndomain.org",
     "user_username": "إسم المستخدم",
     "user_username_edit": "تعديل حساب {name}",
     "users": "المستخدمون",
@@ -598,7 +598,7 @@
         "users": "بدون مستخدم | مستخدم | {c} مستخدمين"
     },
     "domain_dns_push_managed_in_parent_domain": "تتم إدارة ميزة سجلات DNS التلقائية في النطاق الرئيسي <a href='#/domains/{parent_domain}/dns'> {parent_domain} </a>.",
-    "tip_about_user_email": "يتم إنشاء المستخدمين باستخدام عنوان بريد إلكتروني مرتبط (وحساب XMPP) بالشكل التالي username@domain.tld. يمكن لاحقا للمدير أو المستخدم إضافة أسماء مستعارة إضافية للبريد الإلكتروني وإعادة توجيهات للبريد الإلكتروني.",
+    "tip_about_user_email": "يتم إنشاء المستخدمين باستخدام عنوان بريد إلكتروني مرتبط (وحساب XMPP) بالشكل التالي username{'@'}domain.tld. يمكن لاحقا للمدير أو المستخدم إضافة أسماء مستعارة إضافية للبريد الإلكتروني وإعادة توجيهات للبريد الإلكتروني.",
     "app_state_broken": "مُكسَّر",
     "diagnosis_explanation": "ستحاول ميزة التشخيص تحديد المشكلات الشائعة في الجوانب المختلفة لخادمك للتأكد من أن كل شيء يعمل بسلاسة. يتم تشغيل التشخيص تلقائيًا مرتين يوميًا ويتم إرسال بريد إلكتروني إلى المدير في حالة العثور على مشكلات. لاحظ أن بعض الفحوصات قد لا تكون ذات صلة إذا كنت لا ترغب في استخدام بعض الميزات المحددة (على سبيل المثال XMPP) أو قد تفشل إذا كان لديك إعداد معقد. في مثل هذه الحالات ، وإن كنت تعرف ما تفعله ، فلا بأس في تجاهل المشكلات أو التحذيرات المرتبطة.",
     "diagnosis_first_run": "ستحاول ميزة التشخيص تحديد المشكلات الشائعة في الجوانب المختلفة لخادمك للتأكد من أن كل شيء يعمل بسلاسة. فضلًا لا داعي للذعر إن رأيت مجموعة من الأخطاء مباشرة بعد إعداد خادمك: يُفترض للميزة مساعدتك في تحديد المشكلات وإرشادك لإصلاحها. سيتم أيضًا تشغيل التشخيص تلقائيًا مرتين يوميًا ويتم إرسال بريد إلكتروني إلى المدير إن تم العثور على مشكلات.",
diff --git a/app/src/i18n/locales/ca.json b/app/src/i18n/locales/ca.json
index 6b37082ad..7c0c77797 100644
--- a/app/src/i18n/locales/ca.json
+++ b/app/src/i18n/locales/ca.json
@@ -163,7 +163,7 @@
     "certificate": "Certificat",
     "run": "Executar",
     "user_emailforward": "Reenviament de E-mail",
-    "user_new_forward": "noureenviar@dominiextern.org",
+    "user_new_forward": "noureenviar{'@'}dominiextern.org",
     "all_apps": "Totes les aplicacions",
     "confirm_install_app_lowquality": "Atenció: aquesta aplicació funciona però encara no està ben integrada a YunoHost. Algunes característiques com la identificació única i la còpia de seguretat i restauració de l'aplicació poden no estar presents.",
     "confirm_install_app_inprogress": "ATENCIÓ! Aquesta aplicació encara és experimental (si no és que no funciona directament) i és probable que trenqui el sistema! No hauríeu d'instal·lar-la a no ser que sapigueu el que feu. Esteu segurs de voler córrer aquest risc?",
@@ -251,7 +251,7 @@
     "diagnosis_explanation": "La funció de diagnòstic intentarà identificar els errors més comuns en diferents aspectes del servidor per verificar que tot funciona correctament. El diagnòstic s'executa automàticament dues vegades al dia i s'envia un correu electrònic a l'administrador si es troben errors. Tingueu en compte que no tots els tests seran rellevants si no s'utilitzen algunes funcions específiques (com per exemple XMPP) o pot ser que falli si teniu un sistema amb una configuració complexa. En aquests casos, i si sabeu el que feu, podeu ignorar els problemes o avisos corresponents.",
     "pending_migrations": "Hi ha algunes migracions pendents esperant per ser executades. Aneu a <a href='#/tools/migrations'>Eines > Migracions</a> per fer-les.",
     "logs_suboperations": "Sub-operacions",
-    "tip_about_user_email": "Els usuaris es creen amb una adreça de correu electrònic associada (i compte de XMPP) amb el format usari@domini.tld. L'administrador i l'usuari poden afegir a posteriori adreces de correu addicionals i reenviament de correus.",
+    "tip_about_user_email": "Els usuaris es creen amb una adreça de correu electrònic associada (i compte de XMPP) amb el format usari{'@'}domini.tld. L'administrador i l'usuari poden afegir a posteriori adreces de correu addicionals i reenviament de correus.",
     "permission_show_tile_enabled": "Mostrar la «tile» en el portal de l'usuari",
     "permission_main": "Etiqueta principal",
     "permission_corresponding_url": "URL corresponent",
@@ -286,7 +286,7 @@
         "notInUsers": "L'usuari «{value}» ja existeix.",
         "minValue": "El valor ha de ser un nombre superior o igual a {min}.",
         "name": "Els noms no poden incloure caràcters especials ha excepció de <code>,.'-</code>",
-        "email": "Correu electrònic no vàlid: ha de ser caràcters alfanumèrics i <code>_.</code> exclusivament (per exemple someone@example.com, s0me-1@example.com)",
+        "email": "Correu electrònic no vàlid: ha de ser caràcters alfanumèrics i <code>_.</code> exclusivament (per exemple someone{'@'}example.com, s0me-1{'@'}example.com)",
         "dynDomain": "Nom de domini no vàlid: Ha de contenir caràcters alfanumèrics en minúscules i guionets exclusivament",
         "domain": "Nom de domini no vàlid: Ha de contenir caràcters alfanumèrics en minúscules, punts i guionets exclusivament",
         "between": "El valor ha d'estar entre {min} i {max}.",
@@ -295,7 +295,7 @@
         "remote": "{message}",
         "pattern": "{type}",
         "invalid_form": "El formulari conté alguns errors.",
-        "emailForward": "Reenviament de correu electrònic no vàlid: només ha de ser caràcters alfanumèrics i <code>_.-+</code> (p. ex., nom+etiqueta@example.com, _n.0-m+etiqueta@example.com)",
+        "emailForward": "Reenviament de correu electrònic no vàlid: només ha de ser caràcters alfanumèrics i <code>_.-+</code> (p. ex., nom+etiqueta{'@'}example.com, _n.0-m+etiqueta{'@'}example.com)",
         "appRepoUrl": "S'espera que els URL del dipòsit d'aplicacions de YunoHost siguin com https://domini.tld/cami/al/diposit_ynh",
         "maxValue": "El valor ha de ser un nombre igual o inferior a {max}."
     },
@@ -628,7 +628,7 @@
     "domain_dns_push_managed_in_parent_domain": "La funció d'entrades DNS automàtiques es gestiona al domini principal <a href='#/domains/{parent_domain}/dns'>{parent_domain}</a>.",
     "domain_dns_push_not_applicable": "La funció d'entrades DNS automàtiques no és aplicable al domini {domain}.<br> Hauríeu de configurar manualment les vostres entrades DNS seguint la <a href='https://yunohost.org/dns'>documentació</a> i la configuració suggerida a continuació.",
     "hook_data_xmpp": "Dades de XMPP",
-    "group_explain_admins": "Aquest és un grup especial corresponent als usuaris administradors. Els usuaris d'aquest grup poden accedir al webadmin de YunoHost, connectar-se al servidor amb SSH i utilitzar l'ordre `sudo`. També rebran correus electrònics enviats a root@, admin@ i admins@, com ara les notificacions de diagnòstic. Només heu d'afegir a aquest grup persones en qui confieu absolutament!",
+    "group_explain_admins": "Aquest és un grup especial corresponent als usuaris administradors. Els usuaris d'aquest grup poden accedir al webadmin de YunoHost, connectar-se al servidor amb SSH i utilitzar l'ordre `sudo`. També rebran correus electrònics enviats a root{'@'}, admin{'@'} i admins{'@'}, com ara les notificacions de diagnòstic. Només heu d'afegir a aquest grup persones en qui confieu absolutament!",
     "items_verbose_items_left": "Queden {items}. | Queda 1 {items}. | Queden {items}.",
     "postinstall": {
         "user": {
diff --git a/app/src/i18n/locales/cs.json b/app/src/i18n/locales/cs.json
index 1641d490c..a3b140eb4 100644
--- a/app/src/i18n/locales/cs.json
+++ b/app/src/i18n/locales/cs.json
@@ -107,8 +107,8 @@
         "notInUsers": "Uživatel '{value}' již existuje.",
         "minValue": "Hodnota musí být číslo rovno nebo vyšší než {min}.",
         "name": "Jména nemohou obsahovat speciální znaky mimo <code> ,.'-</code>",
-        "emailForward": "Nesprávný tvar email pro přesměrování: může obsahovat pouze alfanumerické znaky a <code>_.-+</code> (např. someone+tag@example.com, s0me-1+tag@example.com)",
-        "email": "Nesprávný tvar emailu: může obsahovat alfanumerické znaky a <code>_.-</code> (např. someone@example.com, s0me-1@example.com)",
+        "emailForward": "Nesprávný tvar email pro přesměrování: může obsahovat pouze alfanumerické znaky a <code>_.-+</code> (např. someone+tag{'@'}example.com, s0me-1+tag{'@'}example.com)",
+        "email": "Nesprávný tvar emailu: může obsahovat alfanumerické znaky a <code>_.-</code> (např. someone{'@'}example.com, s0me-1{'@'}example.com)",
         "dynDomain": "Nesprávný tvar doménového jména: může obsahovat pouze malé alfanumerické znaky a pomlčku",
         "domain": "Nesprávný tvar doménového jména: musí obsahovat pouze malé alfanumerické znaky, tečku a pomlčku",
         "between": "Hodnota musí být mezi {min} a {max}.",
@@ -210,7 +210,7 @@
     "tools_reboot_btn": "Restartovat",
     "tools_reboot": "Restartovat váš server",
     "tools": "Nástroje",
-    "tip_about_user_email": "Uživatelům je vytvořena příslušná emailová adresa (a XMPP účet) ve tvaru uzivatelskejmeno@vasedomena.cz. Další emailové aliasy a emailové přesměrování mohou být později přidány administrátorem a také samotnými uživateli.",
+    "tip_about_user_email": "Uživatelům je vytvořena příslušná emailová adresa (a XMPP účet) ve tvaru uzivatelskejmeno{'@'}vasedomena.cz. Další emailové aliasy a emailové přesměrování mohou být později přidány administrátorem a také samotnými uživateli.",
     "tcp": "TCP",
     "system_upgrade_all_packages_btn": "Aktualizovat všechny balíky",
     "system_upgrade_all_applications_btn": "Aktualizovat všechny aplikace",
@@ -447,7 +447,7 @@
     "login": "Přihlásit se",
     "good_practices_about_user_password": "Nyní zvolte nové heslo uživatele. Heslo by mělo být minimálně 8 znaků dlouhé, avšak je dobrou taktikou jej mít delší (např. použít více slov) a použít kombinaci znaků (velké, malé, čísla a speciální znaky).",
     "user_username": "Uživatelské jméno",
-    "user_new_forward": "adresa-pro-presmerovani@jina-domena.cz",
+    "user_new_forward": "adresa-pro-presmerovani{'@'}jina-domena.cz",
     "user_mailbox_use": "Zabrané místo emailové schránky",
     "user_mailbox_quota": "Kvóta emailové schránky",
     "user_interface_link": "Uživatelské rozhraní",
diff --git a/app/src/i18n/locales/de.json b/app/src/i18n/locales/de.json
index b086f3bb5..c2c346216 100644
--- a/app/src/i18n/locales/de.json
+++ b/app/src/i18n/locales/de.json
@@ -113,7 +113,7 @@
     "user_fullname": "Vollständiger Name",
     "user_interface_link": "Benutzeroberfläche",
     "user_mailbox_quota": "Mailbox Kontingent",
-    "user_new_forward": "weiterleitung@externedomain.org",
+    "user_new_forward": "weiterleitung{'@'}externedomain.org",
     "user_username": "Anmeldename",
     "user_username_edit": "Account von {name} bearbeiten",
     "users": "Konten",
@@ -250,7 +250,7 @@
     "operation_failed_explanation": "Die Operation ist fehlgeschlagen! Das tut uns leid :( Sie können Sich <a href='https://yunohost.org/help'>hier Hilfe holen</a>. Bitte stellen Sie *die ganzen Logs* der Operation bereit, damit Ihnen besser geholfen werden kann. Dies tun Sie, indem Sie auf den grünen 'mit Yunopaste teilen' Knopf drücken. Wenn Sie die Logs teilen, wird Yunohost automatisch versuchen Ihre privaten Daten wie Domainnamen und IP's zu anonymisieren.",
     "diagnosis_explanation": "Die Diagnosefunktion wird versuchen, gängige Probleme in verschiedenen Teilen Ihres Servers zu finden, damit alles reibungslos läuft. Die Diagnose wird auch automatisch zweimal täglich ausgeführt und falls Fehler gefunden werden, bekommt der Administrator eine E-Mail. Beachten Sie, dass einige Tests nicht relevant sind, wenn Sie einzelne Features (zum Beispiel XMPP) nicht benutzten oder Sie ein komplexes Setup haben. In diesem Fall und wenn Sie wissen was Sie tun ist es in Ordnung die dazugehörigen Warnungen und Hinweise zu ignorieren.",
     "pending_migrations": "Es gibt einige ausstehende Migrationen, die darauf warten, ausgeführt zu werden. Bitte gehen Sie auf <a href='#/tools/migrations'>Werkzeuge > Migrationen</a> um diese auszuführen.",
-    "tip_about_user_email": "Konten werden mit einer verknüpften E-Mail-Adresse (und XMPP Account) erstellt im Format username@domain.tld. Zusätzliche E-Mail-Aliasse and E-Mail-Weiterleitungen können später durch Administratoren und Benutzer hinzugefügt werden.",
+    "tip_about_user_email": "Konten werden mit einer verknüpften E-Mail-Adresse (und XMPP Account) erstellt im Format username{'@'}domain.tld. Zusätzliche E-Mail-Aliasse and E-Mail-Weiterleitungen können später durch Administratoren und Benutzer hinzugefügt werden.",
     "logs_suboperations": "Unter-Operationen",
     "api_errors_titles": {
         "APIBadRequestError": "Es ist ein Fehler in Yunohost aufgetreten",
@@ -352,8 +352,8 @@
         "notInUsers": "Das Konto '{value}' existiert bereits.",
         "minValue": "Der Wert muss eine Zahl sein, die gleich oder größer als {min} ist.",
         "name": "Namen dürfen keine Sonderzeichen außer <code>, .'- </code> enthalten",
-        "emailForward": "Ungültige E-Mail-Weiterleitung: Sie darf nur aus alphanumerischen Zeichen und <code> _.-+</code> bestehen (z. B. jemand+tag@example.com, s0me-1+tag@example.com)",
-        "email": "Ungültige E-Mail: Sie darf nur aus alphanumerischen Zeichen und <code> _.-</code> bestehen (z. B. jemand@example.com, s0me-1@example.com)",
+        "emailForward": "Ungültige E-Mail-Weiterleitung: Sie darf nur aus alphanumerischen Zeichen und <code> _.-+</code> bestehen (z. B. jemand+tag{'@'}example.com, s0me-1+tag{'@'}example.com)",
+        "email": "Ungültige E-Mail: Sie darf nur aus alphanumerischen Zeichen und <code> _.-</code> bestehen (z. B. jemand{'@'}example.com, s0me-1{'@'}example.com)",
         "dynDomain": "Ungültiger Domainname: Er darf nur aus alphanumerischen Kleinbuchstaben und Bindestrichen bestehen",
         "domain": "Ungültiger Domainname: Er darf nur aus alphanumerischen Kleinbuchstaben, Punkt- und Strichzeichen bestehen",
         "between": "Der Wert muss zwischen {min} und {max} liegen.",
@@ -581,7 +581,7 @@
     "details_about": "Mehr Details über {subject} anzeigen",
     "confirm_install_app_broken": "VORSICHT! Diese Applikation ist gemäss YunoHost's automatischen Test beschädigt und wird vermutlich ihr System beschädigen! Sie sollten sie vermutlich NICHT installieren, es sei denn, Sie wissen was Sie tun. Wollen Sie dieses Risiko wirklich eingehen?",
     "group_admins": "Administratoren",
-    "group_explain_admins": "Dies ist eine spezielle Gruppe, welche zu den Administratoren-Benutzern gehört. Benutzer in dieser Gruppe besitzen, einfach ausgedrückt, alle Berechtigungen auf dem Server (verändern, erstellen, hinzufügen und zurückhalten). Sie können folglich auf die Admin-Oberfläche von YunoHost zugreifen, sich via SSH mit dem Server verbinden und ausserdem das Kommando `sudo` verwenden. Zusätzlich erhalten sie alle E-Mails, welche an root@, admin@, admins@, wie z.B. die Diagnose-Benachrichtigungen, gesendet wurden. Sie sollten wirklich nur Personen zu dieser Gruppe hinzufügen, denen Sie absolut vertrauen!",
+    "group_explain_admins": "Dies ist eine spezielle Gruppe, welche zu den Administratoren-Benutzern gehört. Benutzer in dieser Gruppe besitzen, einfach ausgedrückt, alle Berechtigungen auf dem Server (verändern, erstellen, hinzufügen und zurückhalten). Sie können folglich auf die Admin-Oberfläche von YunoHost zugreifen, sich via SSH mit dem Server verbinden und ausserdem das Kommando `sudo` verwenden. Zusätzlich erhalten sie alle E-Mails, welche an root{'@'}, admin{'@'}, admins{'@'}, wie z.B. die Diagnose-Benachrichtigungen, gesendet wurden. Sie sollten wirklich nur Personen zu dieser Gruppe hinzufügen, denen Sie absolut vertrauen!",
     "important_yunohost_upgrade": "Eine grössere YunoHost-Aktualisierung ist erhältlich. Es ist sehr empfehlenswert, die Release-Note(s) im Forum sorgfältig durchzulesen, bevor Sie aktualisieren : <a href='https://forum.yunohost.org/tag/ynh_release'>Die Release-Notes im Forum aufrufen.</a>",
     "label_for_manifestname_help": "Dies ist der Name, welcher im Benutzer-Portal angezeigt wird. Dies kann später nochmal geändert werden.",
     "manage_groups": "Gruppenmanagement",
diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index d9773dcdd..59eb51841 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -339,8 +339,8 @@
         "between": "Value must be between {min} and {max}.",
         "domain": "Invalid domain name: Must be lower-case alphanumeric, dot and dash characters only",
         "dynDomain": "Invalid domain name: Must be lower-case alphanumeric and dash characters only",
-        "email": "Invalid email: must be alphanumeric and <code>_.-</code> characters only (e.g. someone@example.com, s0me-1@example.com)",
-        "emailForward": "Invalid email forward: must be alphanumeric and <code>_.-+</code> characters only (e.g. someone+tag@example.com, s0me-1+tag@example.com)",
+        "email": "Invalid email: must be alphanumeric and <code>_.-</code> characters only (e.g. someone{'@'}example.com, s0me-1{'@'}example.com)",
+        "emailForward": "Invalid email forward: must be alphanumeric and <code>_.-+</code> characters only (e.g. someone+tag{'@'}example.com, s0me-1+tag{'@'}example.com)",
         "invalid_form": "The form contains some errors.",
         "maxValue": "Value must be a number equal or lesser than {max}.",
         "minValue": "Value must be a number equal or greater than {min}.",
@@ -364,7 +364,7 @@
     "group_add_permission": "Add a permission",
     "group_admins": "Admins",
     "group_all_users": "All users",
-    "group_explain_admins": "This is a special group corresponding to admin users. Users in this group can access YunoHost's webadmin, connect to the server with SSH and use the `sudo` command. They will also receive emails sent to root@, admin@ and admins@, such as the diagnosis notifications. You should only add people you absolutely trust in this group!",
+    "group_explain_admins": "This is a special group corresponding to admin users. Users in this group can access YunoHost's webadmin, connect to the server with SSH and use the `sudo` command. They will also receive emails sent to root{'@'}, admin{'@'} and admins{'@'}, such as the diagnosis notifications. You should only add people you absolutely trust in this group!",
     "group_explain_all_users": "This is a special group containing all users accounts on the server",
     "group_explain_visitors": "This is a special group representing anonymous visitors",
     "group_explain_visitors_needed_for_external_client": "Be careful that you need to keep some applications allowed to visitors if you intend to use them with external clients. For example, this is the case for Nextcloud if you intend to use a synchronization client on your smartphone or desktop computer.",
@@ -629,7 +629,7 @@
     "system_upgrade_btn": "Upgrade",
     "tcp": "TCP",
     "text_selection_is_disabled": "Text selection is disabled. If you want to share this log, please share the *full* log with the 'Share with Yunopaste' button.<br/><small>Or if you really really want to select text, press these keys: ↓↓↑↑.</small>",
-    "tip_about_user_email": "Users are created with an associated email address (and XMPP account) with the format username@domain.tld. Additional email aliases and email forwards can later be added by the admin and the user.",
+    "tip_about_user_email": "Users are created with an associated email address (and XMPP account) with the format username{'@'}domain.tld. Additional email aliases and email forwards can later be added by the admin and the user.",
     "tools": "Tools",
     "tools_reboot": "Reboot your server",
     "tools_reboot_btn": "Reboot",
@@ -668,7 +668,7 @@
     "user_interface_link": "User interface",
     "user_mailbox_quota": "Mailbox quota",
     "user_mailbox_use": "Mailbox used space",
-    "user_new_forward": "newforward@myforeigndomain.org",
+    "user_new_forward": "newforward{'@'}myforeigndomain.org",
     "user_username": "Username",
     "user_username_edit": "Edit {name}’s account",
     "users": "Users",
diff --git a/app/src/i18n/locales/eo.json b/app/src/i18n/locales/eo.json
index 4cf379b73..88b533ece 100644
--- a/app/src/i18n/locales/eo.json
+++ b/app/src/i18n/locales/eo.json
@@ -142,7 +142,7 @@
     "manage_domains": "Administri domajnojn",
     "user_username_edit": "Redakti {name} konton",
     "logs_package": "Historio pri administrado de pakoj Debian",
-    "user_new_forward": "novjora@myforeigndomain.org",
+    "user_new_forward": "novjora{'@'}myforeigndomain.org",
     "logs_share_with_yunopaste": "Kunhavigu kun YunoPaste",
     "certificate": "Atestilo",
     "logs_system": "Kernel ŝtipoj kaj aliaj malaltnivelaj eventoj",
diff --git a/app/src/i18n/locales/es.json b/app/src/i18n/locales/es.json
index c97302faf..a2e17ffb8 100644
--- a/app/src/i18n/locales/es.json
+++ b/app/src/i18n/locales/es.json
@@ -122,7 +122,7 @@
     "user_fullname": "Nombre y Apellido",
     "user_interface_link": "Interfaz de usuario",
     "user_mailbox_quota": "Cuota de correo",
-    "user_new_forward": "nuevoreenviar@dominioexterior.org",
+    "user_new_forward": "nuevoreenviar{'@'}dominioexterior.org",
     "user_username": "Nombre de usuario",
     "user_username_edit": "Editar la cuenta de {name}",
     "users": "Usuarios",
@@ -248,7 +248,7 @@
     "issues": "{count} problemas",
     "restart": "Reiniciar",
     "diagnosis_explanation": "La funcionalidad de diagnóstico intentará identificar problemas comunes en varios aspectos del servidor para asegurarse de que todo vaya bien. El diagnóstico se ejecuta automáticamente dos veces al día y un correo electrónico se envía al administrador si se encuentra algún problema. Note que algunas pruebas pueden ser irrelevantes si no desea utilizar ciertas funcionalidades (por ejemplo XMPP) o podrían fallar si tiene una configuración compleja. En esos casos, si sabe lo que está haciendo, no hay problema con ignorar los errores o alertas correspondientes.",
-    "tip_about_user_email": "Los usuarios son creados con una dirección de correo electrónico (y cuenta XMPP) con el formato username@domain.ltd. Aliases de correo y reenvíos de correo pueden ser agregados luego por el administrador o el usuario.",
+    "tip_about_user_email": "Los usuarios son creados con una dirección de correo electrónico (y cuenta XMPP) con el formato username{'@'}domain.ltd. Aliases de correo y reenvíos de correo pueden ser agregados luego por el administrador o el usuario.",
     "permission_show_tile_enabled": "Mostrar el tile en el portal de usuario",
     "permission_main": "Etiqueta principal",
     "permission_corresponding_url": "URL Correspondiente",
@@ -322,8 +322,8 @@
         "required": "El campo es obligatorio.",
         "dynDomain": "Nombre de dominio incorrecto. Solo debe contener caracteres alfanuméricos en minúsculas y guiones",
         "appRepoUrl": "Las URL de repositorios de aplicaciones YunoHost deberían parecerse a https://domain.tld/path/to/repo_ynh",
-        "email": "Correo incorrecto: debe contener solo caracteres alfanuméricos y <code>_.-</code> (ej. alguien@ejemplo.com, 4l-guien@ejemplo.com)",
-        "emailForward": "Redirección de correo incorrecto: debe contener solo caracteres alfanuméricos y <code>_.-</code> (ej. alguien@ejemplo.com, 4l-guien@ejemplo.com)"
+        "email": "Correo incorrecto: debe contener solo caracteres alfanuméricos y <code>_.-</code> (ej. alguien{'@'}ejemplo.com, 4l-guien{'@'}ejemplo.com)",
+        "emailForward": "Redirección de correo incorrecto: debe contener solo caracteres alfanuméricos y <code>_.-</code> (ej. alguien{'@'}ejemplo.com, 4l-guien{'@'}ejemplo.com)"
     },
     "footer": {
         "donate": "Donar",
@@ -584,7 +584,7 @@
     "label_for_manifestname_help": "Este es el nombre que se mostrará en el portal de usuarix. Puedes cambiarlo más tarde.",
     "manage_groups": "Gestionar grupos",
     "tools_yunohost_settings": "Ajustes YunoHost",
-    "group_explain_admins": "Este es un grupo asociado a los usuarixs administradorxs. Lxs usuarixs de este grupo tienen acceso al panel de control web de YunoHost, conexión al servidor por SSH y pueden utilizar el comando `sudo`. También reciben correos enviados a root@, admin@ y admins@, como las notificaciones de diagnóstico. ¡Añade únicamente a gente del grupo en la que confíes plenamente!",
+    "group_explain_admins": "Este es un grupo asociado a los usuarixs administradorxs. Lxs usuarixs de este grupo tienen acceso al panel de control web de YunoHost, conexión al servidor por SSH y pueden utilizar el comando `sudo`. También reciben correos enviados a root{'@'}, admin{'@'} y admins{'@'}, como las notificaciones de diagnóstico. ¡Añade únicamente a gente del grupo en la que confíes plenamente!",
     "wrong_password_or_username": "Contraseña o usuario incorrecto",
     "important_yunohost_upgrade": "Una actualización de categoría 'major' está disponible. Se recomienda leer detenidamente las notas de lanzamiento en el foro antes de actualizar: <a href='https://forum.yunohost.org/tag/ynh_release'>Busca las notas de lanzamiento en el foro</a>",
     "app": {
diff --git a/app/src/i18n/locales/eu.json b/app/src/i18n/locales/eu.json
index fe5b270b6..c0aa22b0a 100644
--- a/app/src/i18n/locales/eu.json
+++ b/app/src/i18n/locales/eu.json
@@ -75,11 +75,11 @@
         "required": "Ezinbestekoa da.",
         "domain": "Arazoa domeinu izenarekin: zenbakiak, hizki txikiak, puntuak eta gidoiak bakarrik erabili daitezke",
         "dynDomain": "Arazoa domeinu izenarekin: zenbakiak, hizki txikiak eta gidoiak bakarrik erabil daitezke",
-        "emailForward": "Arazoa posta elektronikoaren birbidalketarekin: zenbakiak, hizkiak eta <code>_.-+</code> bakarrik erabil daitezke (esaterako izena+etiketa@adibidea.eus, iz3na-1+etiketa@adibidea.eus)",
+        "emailForward": "Arazoa posta elektronikoaren birbidalketarekin: zenbakiak, hizkiak eta <code>_.-+</code> bakarrik erabil daitezke (esaterako izena+etiketa{'@'}adibidea.eus, iz3na-1+etiketa{'@'}adibidea.eus)",
         "maxValue": "Zenbakia {max} edo txikiagoa izan behar da.",
         "passwordLenght": "Pasahitzak 8 karaktere izan behar ditu gutxienez.",
         "between": "{min} eta {max} artean egon behar da.",
-        "email": "Arazoa posta elektronikoarekin: zenbakiak, hizkiak eta <code>_.-</code> bakarrik erabili daitezke (esaterako izena@adibidea.eus, iz3na-1@adibidea.eus)",
+        "email": "Arazoa posta elektronikoarekin: zenbakiak, hizkiak eta <code>_.-</code> bakarrik erabili daitezke (esaterako izena{'@'}adibidea.eus, iz3na-1{'@'}adibidea.eus)",
         "minValue": "Zenbakia {min} edo handiagoa izan behar da.",
         "notInUsers": "Badago '{value}' izena duen erabiltzailea dagoeneko.",
         "number": "Balioa zenbaki bat izan behar da.",
@@ -540,7 +540,7 @@
     "user_emailaliases": "e-mail ezizenak",
     "user_emailforward": "Posta elektronikoaren birbidalketa",
     "user_fullname": "Izen osoa",
-    "user_new_forward": "birbidalketaberria@kanpoko-domeinua.eus",
+    "user_new_forward": "birbidalketaberria{'@'}kanpoko-domeinua.eus",
     "user_username": "Erabiltzaile-izena",
     "users": "Erabiltzaileak",
     "yes": "Bai",
@@ -556,7 +556,7 @@
     "users_export": "Esportatu erabiltzaileak",
     "users_import_csv_file": "CSV fitxategia",
     "users_import_update": "Eguneratu existitzen diren erabiltzaileak",
-    "tip_about_user_email": "Erabiltzaileak sortzerakoan ePosta helbide bat (eta XMPP kontu bat) esleitzen zaie erabiltzailea@domeinua.eus itxurarekin. Administrari eta erabiltzaileek helbide elektroniko gehiago eta birbidalketarako helbideak gehitu ditzazkete geroago.",
+    "tip_about_user_email": "Erabiltzaileak sortzerakoan ePosta helbide bat (eta XMPP kontu bat) esleitzen zaie erabiltzailea{'@'}domeinua.eus itxurarekin. Administrari eta erabiltzaileek helbide elektroniko gehiago eta birbidalketarako helbideak gehitu ditzazkete geroago.",
     "tools_webadmin_settings": "Administrazio-webgunearen ezarpenak",
     "user_mailbox_use": "Posta elektronikorako erabilitako espazioa",
     "users_new": "Erabiltzaile berria",
@@ -581,7 +581,7 @@
     "confirm_install_app_broken": "ADI! Aplikazio hau hondatuta dago YunoHost-en azterketa automatikoen arabera eta litekeena da sistema hondatzea! EZ instalatu ez badakizu zertan ari zaren. Arriskatu nahi al duzu?",
     "details_about": "Erakutsi xehetasun gehiago {subject}(r)i buruz",
     "group_admins": "Administratzaileak",
-    "group_explain_admins": "Administratzeko ahalmena duten erabiltzaileen talde berezia da hau. Talde honetan dauden erabiltzaileek YunoHosten web-administrazioa, SSH konexioa eta 'sudo' komandoa erabil dezakete. root@, admin@ eta admins@ kontuei bidalitako mezu elektronikoak ere jasoko dituzte, diagnostikoen jakinarazpenez gain. Erabat fio zaren erabiltzaileak baino ez zenituzke gehitu beharko talde honetara!",
+    "group_explain_admins": "Administratzeko ahalmena duten erabiltzaileen talde berezia da hau. Talde honetan dauden erabiltzaileek YunoHosten web-administrazioa, SSH konexioa eta 'sudo' komandoa erabil dezakete. root{'@'}, admin{'@'} eta admins{'@'} kontuei bidalitako mezu elektronikoak ere jasoko dituzte, diagnostikoen jakinarazpenez gain. Erabat fio zaren erabiltzaileak baino ez zenituzke gehitu beharko talde honetara!",
     "label_for_manifestname_help": "Erabiltzaileen atarian ageri den izena da hau. Aldatzea dago.",
     "manage_groups": "Kudeatu taldeak",
     "tools_yunohost_settings": "YunoHosten ezarpenak",
diff --git a/app/src/i18n/locales/fa.json b/app/src/i18n/locales/fa.json
index 2c95f7755..51878a865 100644
--- a/app/src/i18n/locales/fa.json
+++ b/app/src/i18n/locales/fa.json
@@ -42,8 +42,8 @@
     },
     "form_errors": {
         "name": "اسامی نبایدشامل کاراکتر های خاص باشند! بغیر از:<code> ,.'-</code>",
-        "emailForward": "ایمیل فوروارد نامعتبر: باید فقط حروف الفبا و عدد و کاراکترهای <code>_.-</code> باشد (بطور مثال : someone@example.com, s0me-1@example.com)",
-        "email": "ایمیل نامعتبر: باید فقط حروف الفبا و عدد و کاراکترهای <code>_.-</code> باشد (بطور مثال : someone@example.com, s0me-1@example.com)",
+        "emailForward": "ایمیل فوروارد نامعتبر: باید فقط حروف الفبا و عدد و کاراکترهای <code>_.-</code> باشد (بطور مثال : someone{'@'}example.com, s0me-1{'@'}example.com)",
+        "email": "ایمیل نامعتبر: باید فقط حروف الفبا و عدد و کاراکترهای <code>_.-</code> باشد (بطور مثال : someone{'@'}example.com, s0me-1{'@'}example.com)",
         "dynDomain": "نام دامنه نامعتبر است: فقط باید حروف کوچک وکاراکتر خط تیره باشد",
         "domain": "نام دامنه نامعتبر است: فقط باید حروف کوچک ، دات وکاراکتر خط تیره باشد",
         "between": "مقدار باید بین {min} و {max} باشد.",
@@ -170,7 +170,7 @@
     "users": "کاربران",
     "user_username_edit": "ویرایش حساب کاربری {name}",
     "user_username": "نام کاربری",
-    "user_new_forward": "newforward@myforeigndomain.org",
+    "user_new_forward": "newforward{'@'}myforeigndomain.org",
     "user_mailbox_use": "فضای استفاده شده صندوق پستی",
     "user_mailbox_quota": "سهمیه صندوق پستی",
     "user_interface_link": "رابط کاربری",
@@ -207,7 +207,7 @@
     "tools_reboot_btn": "راه اندازی مجدد",
     "tools_reboot": "راه اندازی مجدد سرور شما",
     "tools": "ابزارها",
-    "tip_about_user_email": "کاربران با یک آدرس ایمیل مرتبط (و حساب XMPP) با قالب username@domain.tld ایجاد می شوند. نام مستعار ایمیل اضافی و ایمیل ارسال شده بعداً توسط مدیر و کاربر اضافه می شود.",
+    "tip_about_user_email": "کاربران با یک آدرس ایمیل مرتبط (و حساب XMPP) با قالب username{'@'}domain.tld ایجاد می شوند. نام مستعار ایمیل اضافی و ایمیل ارسال شده بعداً توسط مدیر و کاربر اضافه می شود.",
     "tcp": "TCP",
     "system_upgrade_all_packages_btn": "ارتقاء تمام بسته ها",
     "system_upgrade_all_applications_btn": "ارتقاء تمام برنامه های کاربردی",
diff --git a/app/src/i18n/locales/fi.json b/app/src/i18n/locales/fi.json
index 3d5687faa..ecc5ae95d 100644
--- a/app/src/i18n/locales/fi.json
+++ b/app/src/i18n/locales/fi.json
@@ -136,10 +136,10 @@
         "passwordMatch": "Salasanat eivät täsmää.",
         "required": "Kenttä on pakollinen.",
         "alpha": "Arvo saa olla vain aakkosellisia merkkejä.",
-        "emailForward": "Virheellinen sähköpostin välitys-osoite: on oltava aakkosnumeerisia ja ainoastaan <code>_.-</code>-merkkejä (esim. joku+tagi@esimerkki.fi, j0ku-1+tagi@esimerkki.fi)",
+        "emailForward": "Virheellinen sähköpostin välitys-osoite: on oltava aakkosnumeerisia ja ainoastaan <code>_.-</code>-merkkejä (esim. joku+tagi{'@'}esimerkki.fi, j0ku-1+tagi{'@'}esimerkki.fi)",
         "minValue": "Arvon on oltava luku, joka on yhtä suuri tai suurempi kuin {min}.",
         "dynDomain": "Virheellinen domain nimi: Ainoastaan pienaakkoset aakkosnumeeriset merkit sekä viivamerkit",
-        "email": "Virheellinen sähköpostiosoite: on oltava aakkosnumeerisia ja ainoastaan <code>_.-</code>-merkkejä (esim. joku@esimerkki.fi, j0ku-1@esimerkki.fi)",
+        "email": "Virheellinen sähköpostiosoite: on oltava aakkosnumeerisia ja ainoastaan <code>_.-</code>-merkkejä (esim. joku{'@'}esimerkki.fi, j0ku-1{'@'}esimerkki.fi)",
         "name": "Nimet eivät saa sisältää erikoismerkkejä paitsi <code> ,.'-</code>",
         "maxValue": "Arvon on oltava luku, joka on yhtä suuri tai pienempi kuin {max}.",
         "pattern": "{type}",
@@ -388,7 +388,7 @@
     "user_interface_link": "Käyttöliittymä",
     "user_mailbox_quota": "Postilaatikonkiintiö",
     "user_mailbox_use": "Postilaatikon käytetty tila",
-    "user_new_forward": "uusi-eteenpäinosoite@ulkopuolinen-domain.fi",
+    "user_new_forward": "uusi-eteenpäinosoite{'@'}ulkopuolinen-domain.fi",
     "user_username": "Käyttäjänimi",
     "user_username_edit": "Muokkaa käyttäjän {name} nimeä",
     "users": "Käyttäjät",
@@ -505,7 +505,7 @@
     "status": "Tila",
     "stop": "Lopeta",
     "system": "Järjestelmä",
-    "tip_about_user_email": "Käyttäjille luodaan sähköpostiosoite (ja XMPP-tili) muodossa käyttäjänimi@domain.tld. Ylläpitäjä ja käyttäjä voivat myöhemmin lisätä lisää sähköpostialiaksia ja sähköpostin edelleenlähetyksiä.",
+    "tip_about_user_email": "Käyttäjille luodaan sähköpostiosoite (ja XMPP-tili) muodossa käyttäjänimi{'@'}domain.tld. Ylläpitäjä ja käyttäjä voivat myöhemmin lisätä lisää sähköpostialiaksia ja sähköpostin edelleenlähetyksiä.",
     "tools_reboot": "Käynnistä palvelimesi uudelleen",
     "tools_shutdown_reboot": "Sammuta/Käynnistä uudelleen",
     "upnp_disabled": "UPnP on pois käytöstä.",
diff --git a/app/src/i18n/locales/fr.json b/app/src/i18n/locales/fr.json
index 4bf2b6a33..c24bf0595 100644
--- a/app/src/i18n/locales/fr.json
+++ b/app/src/i18n/locales/fr.json
@@ -129,7 +129,7 @@
     "user_fullname": "Nom complet",
     "user_interface_link": "Portail",
     "user_mailbox_quota": "Quota de la boite aux lettres",
-    "user_new_forward": "nouveau_transfert@domainedistant.org",
+    "user_new_forward": "nouveau_transfert{'@'}domainedistant.org",
     "user_username": "Nom de compte",
     "user_username_edit": "Éditer le compte de {name}",
     "users": "Comptes",
@@ -255,7 +255,7 @@
     "operation_failed_explanation": "L'opération a échoué ! Veuillez-nous excuser pour ça :( Vous pouvez essayer de <a href='https://yunohost.org/help'>demander de l'aide</a>. Merci de fournir *le log complet* de l'opération pour les personnes qui vont vous aider. Vous pouvez cliquer sur le bouton vert 'Partager avec Yunopaste'. Quand vous partagez les logs, YunoHost essaie automatiquement d'anonymiser les informations privées comme le nom de domaine et l'adresses IP.",
     "diagnosis_explanation": "La fonctionnalité de diagnostic va tenter de trouver certains problèmes communs sur différents aspects de votre serveur pour être sûr que tout fonctionne normalement. Le diagnostic sera également effectué deux fois par jour et enverra un courriel au compte administrateur si des erreurs sont détectées. À noter que certains tests ne seront pas montrés si vous n'utilisez pas certaines fonctions spécifiques (XMPP, par exemple) ou s'ils échouent à cause d'une configuration trop complexe. Dans ce cas, et si vous savez ce que vous avez modifié, vous pouvez ignorer les problèmes et les avertissements correspondantes.",
     "pending_migrations": "Il y a des migrations en attente d'exécution. Veuillez aller dans <a href='#/tools/migrations'>Outils > Migrations</a> pour les exécuter.",
-    "tip_about_user_email": "Les comptes sont créés avec une adresse email associée (et un compte XMPP) au format username@domain.tld. Des alias d'email et des transferts d'emails supplémentaires peuvent être ajoutés ultérieurement par les personnes administrant le serveur ainsi celles ayant accès au compte lui même.",
+    "tip_about_user_email": "Les comptes sont créés avec une adresse email associée (et un compte XMPP) au format username{'@'}domain.tld. Des alias d'email et des transferts d'emails supplémentaires peuvent être ajoutés ultérieurement par les personnes administrant le serveur ainsi celles ayant accès au compte lui même.",
     "logs_suboperations": "Sous-opérations",
     "permission_show_tile_enabled": "Visible en tuile dans le portail YunoHost",
     "permission_main": "Label principal",
@@ -328,8 +328,8 @@
         "minValue": "La valeur doit être un nombre égal ou supérieur à {min}.",
         "name": "Les noms ne peuvent pas comporter de caractères spéciaux, sauf <code> ,.'-</code>",
         "appRepoUrl": "Les URLs de dêpôt d'app YunoHost doivent ressembler à https://domain.tld/path/to/repo_ynh",
-        "emailForward": "Adresse de transfert de courrier électronique invalide : elle doit être composée de caractères alphanumérique et de <code>_.-+</code> seulement (par exemple, someone+tag@example.com, s0me-1+tag@example.com)",
-        "email": "Adresse de courriel invalide : elle doit être composée de caractères alphanumérique et des caractères <code>_.-</code> seulement (par exemple someone@example.com, s0me-1@example.com)",
+        "emailForward": "Adresse de transfert de courrier électronique invalide : elle doit être composée de caractères alphanumérique et de <code>_.-+</code> seulement (par exemple, someone+tag{'@'}example.com, s0me-1+tag{'@'}example.com)",
+        "email": "Adresse de courriel invalide : elle doit être composée de caractères alphanumérique et des caractères <code>_.-</code> seulement (par exemple someone{'@'}example.com, s0me-1{'@'}example.com)",
         "dynDomain": "Nom de domaine invalide : Il doit être composé de minuscules alphanumériques et de tirets uniquement",
         "domain": "Nom de domaine invalide : Il doit être composé de minuscules alphanumériques, de points et de tirets uniquement",
         "between": "La valeur doit être comprise entre {min} et {max}.",
@@ -581,7 +581,7 @@
     "app_state_broken_explanation": "Cette application est actuellement cassée et ne peut être installée selon les contrôles automatiques de YunoHost",
     "details_about": "Afficher plus de détails sur {subject}",
     "group_admins": "Comptes administrateurs",
-    "group_explain_admins": "Il s'agit d'un groupe spécial correspondant aux comptes dits administrateurs. Les comptes affectés à ce groupe ont, pour faire simple, tous les droits sur le serveur (modification, création, ajout et suppression). Ils peuvent donc accéder à l'administration en ligne de YunoHost (panel web), se connecter au serveur avec SSH et utiliser la commande `sudo`. Ils recevront également les courriels envoyés à root@, admin@, admins@, tels que les notifications de diagnostic. Vous ne devriez ajouter dans ce groupe que des comptes de personnes en qui vous avez absolument confiance !",
+    "group_explain_admins": "Il s'agit d'un groupe spécial correspondant aux comptes dits administrateurs. Les comptes affectés à ce groupe ont, pour faire simple, tous les droits sur le serveur (modification, création, ajout et suppression). Ils peuvent donc accéder à l'administration en ligne de YunoHost (panel web), se connecter au serveur avec SSH et utiliser la commande `sudo`. Ils recevront également les courriels envoyés à root{'@'}, admin{'@'}, admins{'@'}, tels que les notifications de diagnostic. Vous ne devriez ajouter dans ce groupe que des comptes de personnes en qui vous avez absolument confiance !",
     "label_for_manifestname_help": "Il s'agit du nom affiché dans le portail d'utilisation de YunoHost. Il peut être modifié ultérieurement.",
     "manage_groups": "Gestion des groupes",
     "tools_yunohost_settings": "Paramètres de YunoHost",
diff --git a/app/src/i18n/locales/gl.json b/app/src/i18n/locales/gl.json
index b28350f37..aa42112f9 100644
--- a/app/src/i18n/locales/gl.json
+++ b/app/src/i18n/locales/gl.json
@@ -151,8 +151,8 @@
         "notInUsers": "A usuaria '{value}' xa existe.",
         "minValue": "O valor debe ser un número igual ou superior a {min}.",
         "name": "Os nomes non inclúen caracteres especiais excepto <code> ,.'-</code>",
-        "emailForward": "Email de reenvío non válido: ten que ser alfanumérico e caracteres <code>_.-+</code> (ex. menganito+etiqueta@exemplo.com, m3ng4ni7-o+etiqueta@exemplo.com)",
-        "email": "Email non válido: debe ser alfanumércio e caracteres <code>_.-</code> (ex. menganito@exemplo.com, p4c-0@exemplo.com)",
+        "emailForward": "Email de reenvío non válido: ten que ser alfanumérico e caracteres <code>_.-+</code> (ex. menganito+etiqueta{'@'}exemplo.com, m3ng4ni7-o+etiqueta{'@'}exemplo.com)",
+        "email": "Email non válido: debe ser alfanumércio e caracteres <code>_.-</code> (ex. menganito{'@'}exemplo.com, p4c-0{'@'}exemplo.com)",
         "dynDomain": "Nome de dominio non válido: Só pode ter caracteres alfanuméricos en minúscula e barra",
         "domain": "Nome de dominio non válido: Só pode ser alfanumérico en minúsculas, punto e barra",
         "between": "O valor ten que estar entre {min} e {max}.",
@@ -471,7 +471,7 @@
     "tools_reboot_btn": "Reiniciar",
     "tools_reboot": "Reinicia o servidor",
     "tools": "Ferramentas",
-    "tip_about_user_email": "As usuarias créanse cun enderezo de email asociado (e conta XMPP) co formato usuaria@dominio.tld. Alias de email adicionais e reenvíos de email pódense engadir posteriormente por parte da administración e a usuaria.",
+    "tip_about_user_email": "As usuarias créanse cun enderezo de email asociado (e conta XMPP) co formato usuaria{'@'}dominio.tld. Alias de email adicionais e reenvíos de email pódense engadir posteriormente por parte da administración e a usuaria.",
     "tcp": "TCP",
     "system_upgrade_all_packages_btn": "Actualizar tódolos paquetes",
     "system_upgrade_all_applications_btn": "Actualizar tódalas aplicacións",
@@ -498,7 +498,7 @@
     "users": "Usuarias",
     "user_username_edit": "Editar a conta de {name}",
     "user_username": "Identificador",
-    "user_new_forward": "novoreenvio@omeudominoexterno.org",
+    "user_new_forward": "novoreenvio{'@'}omeudominoexterno.org",
     "user_mailbox_use": "Espazo de correo utilizado",
     "user_mailbox_quota": "Cota de correo",
     "user_interface_link": "Interface de usuaria",
@@ -580,7 +580,7 @@
     "app_state_broken_explanation": "Actualmente esta aplicación está estragada e non é instalable según o test automático que fai YunoHost",
     "details_about": "Mostrar máis detalles sobre {subject}",
     "group_admins": "Admins",
-    "group_explain_admins": "Este é un grupo especial para as usuarias administradoras. As usuarias deste grupo poden acceder á web de administración de YunoHost, conectarse ao servidor por SSH e usar o comando `sudo`. Tamén recibirán os emails enviados a root@, admin@ e admins@, por exemplo as notificacións do diagnóstico. Só deberías engadir a persoas nas que confías totalmente!",
+    "group_explain_admins": "Este é un grupo especial para as usuarias administradoras. As usuarias deste grupo poden acceder á web de administración de YunoHost, conectarse ao servidor por SSH e usar o comando `sudo`. Tamén recibirán os emails enviados a root{'@'}, admin{'@'} e admins{'@'}, por exemplo as notificacións do diagnóstico. Só deberías engadir a persoas nas que confías totalmente!",
     "label_for_manifestname_help": "Este é o nome mostrado no portal da usuaria. Pódese cambiar despois.",
     "manage_groups": "Xestionar grupos",
     "tools_yunohost_settings": "Axustes YunoHost",
diff --git a/app/src/i18n/locales/id.json b/app/src/i18n/locales/id.json
index 1baeaf010..4f102c32f 100644
--- a/app/src/i18n/locales/id.json
+++ b/app/src/i18n/locales/id.json
@@ -276,9 +276,9 @@
         "between": "Harus di antara {min} dan {max}.",
         "dynDomain": "Nama domain tidak valid: Huruf kecil, angka, dan tanda hubung saja",
         "domain": "Nama domain tidak valid: Huruf kecil, angka, titik dan tanda hubung saja",
-        "email": "Surel tidak valid: Huruf, angka, dan <code>_.-</code> saja (cth. blabla@contoh.com, b1la-2@contoh.com)",
+        "email": "Surel tidak valid: Huruf, angka, dan <code>_.-</code> saja (cth. blabla{'@'}contoh.com, b1la-2{'@'}contoh.com)",
         "alphalownumdot_": "Harus hanya berupa karakter alfanumerik kecil dan garis bawah.",
-        "emailForward": "Penerusan surel tidak valid: harus alfanumerik dan hanya karakter <code>_.-+</code> (misal. someone+tag@example.com, s0me-1+tag@example.com)"
+        "emailForward": "Penerusan surel tidak valid: harus alfanumerik dan hanya karakter <code>_.-+</code> (misal. someone+tag{'@'}example.com, s0me-1+tag{'@'}example.com)"
     },
     "form_input_example": "Contoh: {example}",
     "group": "Kelompok",
@@ -553,7 +553,7 @@
     "app_state_broken": "rusak",
     "app_state_broken_explanation": "Saat ini, aplikasi ini rusak dan tidak dapat dipasang menurut uji coba otomatis YunoHost",
     "group_admins": "Admin",
-    "group_explain_admins": "Ini adalah kelompok khusus yang memuat pengguna administrator. Pengguna di kelompok ini bisa mengakses web administrasi YunoHost, terhubung ke peladen dengan SSH, dan menggunakan perintah `sudo`. Yang di kelompok tersebut juga akan menerima surel yang dikirim ke root@, admin@, dan admins@ seperti pemberitahuan diagnosis. Anda sebaiknya menambahkan orang-orang yang Anda sangat percaya ke kelompok ini!",
+    "group_explain_admins": "Ini adalah kelompok khusus yang memuat pengguna administrator. Pengguna di kelompok ini bisa mengakses web administrasi YunoHost, terhubung ke peladen dengan SSH, dan menggunakan perintah `sudo`. Yang di kelompok tersebut juga akan menerima surel yang dikirim ke root{'@'}, admin{'@'}, dan admins{'@'} seperti pemberitahuan diagnosis. Anda sebaiknya menambahkan orang-orang yang Anda sangat percaya ke kelompok ini!",
     "password_confirmation": "Konfirmasi kata sandi",
     "app_info_changeurl_desc": "Ubah URL akses aplikasi ini (domain dan/atau jalur).",
     "confirm_uninstall": "Apakah Anda yakin ingin melepas {name}?",
@@ -568,7 +568,7 @@
     "details_about": "Tampilkan lebih banyak detail tentang {subject}",
     "wrong_password_or_username": "Nama pengguna atau kata sandi salah",
     "firewall": "Tembok Api",
-    "user_new_forward": "terusanbaru@domainlainku.org",
+    "user_new_forward": "terusanbaru{'@'}domainlainku.org",
     "experimental_warning": "Peringatan: fitur ini bersifat eksperimental dan belum bisa diputuskan sebagai stabil, Anda jangan menggunakannya kecuali jika Anda mengetahui apa yang Anda lakukan.",
     "users_import": "Impor pengguna",
     "app_info_default_desc": "Alihkan pangkal domain ke aplikasi ini ({domain}).",
@@ -619,7 +619,7 @@
     "path": "Jalur",
     "logs_app": "Log aplikasi",
     "logs_share_with_yunopaste": "Bagikan log dengan YunoPaste",
-    "tip_about_user_email": "Pengguna dibuat dengan alamat surelnya (dan akun XMPP) tersendiri dengan format namapengguna@domain.tld. Surel tambahan seperti alias surel dan surel terusan bisa ditambahkan oleh administrator dan pengguna itu sendiri.",
+    "tip_about_user_email": "Pengguna dibuat dengan alamat surelnya (dan akun XMPP) tersendiri dengan format namapengguna{'@'}domain.tld. Surel tambahan seperti alias surel dan surel terusan bisa ditambahkan oleh administrator dan pengguna itu sendiri.",
     "user_emailforward": "Surel terusan",
     "user_emailforward_add": "Tambah surel terusan",
     "user_emailaliases_add": "Tambah alias surel",
diff --git a/app/src/i18n/locales/it.json b/app/src/i18n/locales/it.json
index ea658d1b8..3174de858 100644
--- a/app/src/i18n/locales/it.json
+++ b/app/src/i18n/locales/it.json
@@ -99,7 +99,7 @@
     "user_fullname": "Nome completo",
     "user_interface_link": "Interfaccia utente",
     "user_mailbox_quota": "Quota della casella di posta",
-    "user_new_forward": "nuovoinoltro@miodominiodifferente.org",
+    "user_new_forward": "nuovoinoltro{'@'}miodominiodifferente.org",
     "user_username": "Nome utente",
     "user_username_edit": "Modifica account di {name}",
     "users": "Utenti",
@@ -250,7 +250,7 @@
     "app_state_lowquality": "bassa qualità",
     "all": "Tutti",
     "pending_migrations": "Ci sono alcune migrazioni in sospeso in attesa di essere eseguite. Vai in <a href='#/tools/migrations'>Strumenti > Migrazioni</a> per eseguirle.",
-    "tip_about_user_email": "Gli utenti sono creati associati ad un indirizzo email (e un account XMPP) del tipo utente@domain.tld. Indirizzi email addizionali e forward possono essere aggiunti successivamente dall'amministratore e dall'utente.",
+    "tip_about_user_email": "Gli utenti sono creati associati ad un indirizzo email (e un account XMPP) del tipo utente{'@'}domain.tld. Indirizzi email addizionali e forward possono essere aggiunti successivamente dall'amministratore e dall'utente.",
     "logs_suboperations": "Sub-operazioni",
     "permission_show_tile_enabled": "Mostra il tile nel portale dell'utente",
     "permission_main": "Etichetta principale",
@@ -323,8 +323,8 @@
         "notInUsers": "L'utente '{value}' esiste già.",
         "minValue": "Il valore dev'essere maggiore o uguale a {min}.",
         "name": "I nomi non devono includere caratteri speciali, tolti <code> ,.'-</code>",
-        "emailForward": "Inoltro email non valido: dev'esser composta di soli caratteri alfanumerici e <code>_.-+</code> (es: prova+ricevute@esempio.com, m4r1-0@esempio.com)",
-        "email": "Email non valida: dev'esser composta di soli caratteri alfanumerici e <code>_.-</code> (es: prova@esempio.com, m4r1-0@esempio.com)",
+        "emailForward": "Inoltro email non valido: dev'esser composta di soli caratteri alfanumerici e <code>_.-+</code> (es: prova+ricevute{'@'}esempio.com, m4r1-0{'@'}esempio.com)",
+        "email": "Email non valida: dev'esser composta di soli caratteri alfanumerici e <code>_.-</code> (es: prova{'@'}esempio.com, m4r1-0{'@'}esempio.com)",
         "dynDomain": "Nome dominio non valido: Dev'esser composto di soli caratteri alfanumerici minuscoli e trattini",
         "domain": "Nome dominio non valido: Dev'esser composto di soli caratteri alfanumerici minuscoli, punti e trattini",
         "between": "Il valore dev'essere compreso tra {min} e {max}.",
@@ -688,7 +688,7 @@
     "tools_yunohost_settings": "Impostazioni di YunoHost",
     "app_state_broken": "rottə",
     "details_about": "Mostra maggiori dettagli riguardo a {subject}",
-    "group_explain_admins": "Questo è un gruppo speciale, che corrisponde agli utenti amministratori. Gli utenti di questo gruppo possono accedere all’interfaccia di amministrazione web di YunoHost, connettersi al server tramite SSH e usare il comando `sudo`. Inoltre, ricevono le email inviate a root@, admin@ e admins@, come le notifiche di diagnosi. Dovresti aggiungere a questo gruppo solo persone di cui ti fidi completamente!",
+    "group_explain_admins": "Questo è un gruppo speciale, che corrisponde agli utenti amministratori. Gli utenti di questo gruppo possono accedere all’interfaccia di amministrazione web di YunoHost, connettersi al server tramite SSH e usare il comando `sudo`. Inoltre, ricevono le email inviate a root{'@'}, admin{'@'} e admins{'@'}, come le notifiche di diagnosi. Dovresti aggiungere a questo gruppo solo persone di cui ti fidi completamente!",
     "group_admins": "Amministratori",
     "important_yunohost_upgrade": "Un importante aggiornamento di YunoHost è importante. È fortemente raccomandato di leggere attentamente le note di rilascio sul forum, prima di aggiornare: <a href='https://forum.yunohost.org/tag/ynh_release'>Visita le note di rilascio sul forum</a>",
     "label_for_manifestname_help": "Questo è il nome mostrato nel portale dell’utente. Potrà essere cambiato in seguito."
diff --git a/app/src/i18n/locales/ja.json b/app/src/i18n/locales/ja.json
index 7faa444a3..e3f310366 100644
--- a/app/src/i18n/locales/ja.json
+++ b/app/src/i18n/locales/ja.json
@@ -8,7 +8,7 @@
         },
         "local_part_description": {
             "domain": "サブドメインを選択してください。",
-            "email": "電子メールのローカルパート(@の右側)を選択してください。"
+            "email": "電子メールのローカルパート({'@'}の右側)を選択してください。"
         }
     },
     "administration_password": "管理用パスワード",
@@ -299,8 +299,8 @@
         "invalid_form": "フォームにエラーがあります。",
         "maxValue": "値は{max}より小さい必要があります。",
         "minValue": "値は{min}より大きい必要があります。",
-        "email": "不正な電子メール: 小文字の英数字、<code>_.-</code> である必要があります (例: someone@example.com, s0me-1@example.com)",
-        "emailForward": "不正な電子メール転送: 小文字の英数字、<code>_.-</code> である必要があります (例: someone+tag@example.com, s0me-1+tag@example.com)",
+        "email": "不正な電子メール: 小文字の英数字、<code>_.-</code> である必要があります (例: someone{'@'}example.com, s0me-1{'@'}example.com)",
+        "emailForward": "不正な電子メール転送: 小文字の英数字、<code>_.-</code> である必要があります (例: someone+tag{'@'}example.com, s0me-1+tag{'@'}example.com)",
         "pattern": "{type}",
         "remote": "{message}",
         "required": "フィールドは必要です。",
@@ -481,7 +481,7 @@
     "upnp": "UPnP",
     "url": "URL",
     "user_email": "電子メール",
-    "user_new_forward": "newforward@myforeigndomain.org",
+    "user_new_forward": "newforward{'@'}myforeigndomain.org",
     "user_username": "ユーザー名",
     "users": "ユーザー",
     "words": {
@@ -654,7 +654,7 @@
     },
     "since": "から",
     "text_selection_is_disabled": "テキスト選択は無効です。このログを共有したい場合は、[Yunopasteで共有]ボタンで *フル*ログ を共有してください。<br/><small>または、本当にテキストを選択したい場合は、次のキーを押します:↓↓↑↑。</small>",
-    "tip_about_user_email": "ユーザーは、username@domain.tld 形式の関連付けられた電子メール アドレス (および XMPP アカウント) を使用して作成されます。追加のメール エイリアスとメール転送については、管理者とユーザーの両方が後から追加できます。",
+    "tip_about_user_email": "ユーザーは、username{'@'}domain.tld 形式の関連付けられた電子メール アドレス (および XMPP アカウント) を使用して作成されます。追加のメール エイリアスとメール転送については、管理者とユーザーの両方が後から追加できます。",
     "unauthorized": "許可されていないアクセス",
     "users_import_confirm_destructive": "このファイルに存在しないユーザーを削除してもよろしいですか?",
     "users_import_csv_file_desc": "CSV ファイルは UTF-8 でエンコードされており、username, password, groups, email, quota の列が含まれている必要があります。よくわからない場合、一旦 <a href='/yunohost/api/users/export' target='_BLANK'>ユーザーを CSV ファイルにエクスポート</a> し、そのファイルを変更してください。",
@@ -675,6 +675,6 @@
     "postinstall_set_domain": "メインドメインの設定",
     "purge_user_data_checkbox": "{name}のデータをパージ(削除)しますか?(これにより、ホームディレクトリとメールディレクトリの内容が削除されます)",
     "purge_user_data_warning": "ユーザーのデータのパージ(削除)は一度行うと元に戻せません。自分が何をしようとしているのか、十分に理解してくださいね!",
-    "group_explain_admins": "これは管理者ユーザーに対応する特別なグループです。このグループのユーザーは、YunoHostのウェブ管理者にアクセスし、SSHでサーバーに接続し、「sudo」コマンドを使用できます。また、root@、admin@、admins@に送信された診断通知などの電子メールも受信します。このグループには、絶対に信頼できる人だけを追加する必要があります！",
+    "group_explain_admins": "これは管理者ユーザーに対応する特別なグループです。このグループのユーザーは、YunoHostのウェブ管理者にアクセスし、SSHでサーバーに接続し、「sudo」コマンドを使用できます。また、root{'@'}、admin{'@'}、admins{'@'}に送信された診断通知などの電子メールも受信します。このグループには、絶対に信頼できる人だけを追加する必要があります！",
     "postinstall_intro_3": "詳細については、<a href='//yunohost.org/en/install/hardware:vps_debian#fa-cog-proceed-with-the-initial-configuration' target='_blank'>適切なドキュメントページ</a>を参照してください"
 }
diff --git a/app/src/i18n/locales/ko.json b/app/src/i18n/locales/ko.json
index 16a35ef31..0827cd7bf 100644
--- a/app/src/i18n/locales/ko.json
+++ b/app/src/i18n/locales/ko.json
@@ -8,7 +8,7 @@
         },
         "local_part_description": {
             "domain": "서브도메인을 선택하세요.",
-            "email": "이메일의 주소 부분(@의 오른쪽 부분)를 선택하세요."
+            "email": "이메일의 주소 부분({'@'}의 오른쪽 부분)를 선택하세요."
         }
     },
     "administration_password": "관리자 비밀번호",
diff --git a/app/src/i18n/locales/nl.json b/app/src/i18n/locales/nl.json
index 9d9406885..3e899970a 100644
--- a/app/src/i18n/locales/nl.json
+++ b/app/src/i18n/locales/nl.json
@@ -112,7 +112,7 @@
     "user_fullname": "Volledige naam",
     "user_interface_link": "Gebruikersinterface",
     "user_mailbox_quota": "Mailbox quota",
-    "user_new_forward": "nieuwedoorstuurmail@mijndomein.org",
+    "user_new_forward": "nieuwedoorstuurmail{'@'}mijndomein.org",
     "user_username": "Gebruikersnaam",
     "user_username_edit": "Bewerk {name}'s account",
     "users": "Gebruikers",
@@ -475,7 +475,7 @@
         "reconnecting": "Herconnecteer"
     },
     "form_errors": {
-        "emailForward": "Ongeldig doorstuur-e-mailadres: mag enkel alfanumerische en <code>_.-+</code> tekens zijn (vb. iemand+label@voorbeeld.com, v00rbeeld-1+label@voorbeeld.com)",
+        "emailForward": "Ongeldig doorstuur-e-mailadres: mag enkel alfanumerische en <code>_.-+</code> tekens zijn (vb. iemand+label{'@'}voorbeeld.com, v00rbeeld-1+label{'@'}voorbeeld.com)",
         "maxValue": "Waarde moet een getal gelijk aan of kleiner dan {max} zijn.",
         "between": "De waarde moet tussen {min} en {max} zijn.",
         "remote": "{message}",
@@ -488,7 +488,7 @@
         "required": "Veld is verplicht.",
         "invalid_form": "Het formulier bevat een aantal fouten.",
         "alphalownumdot_": "Invoer moet uitsluitend bestaan uit alfanumerische kleine letters, punten en liggende-streepjes-tekens zijn.",
-        "email": "Ongeldig e-mailadres: mag enkel alfanumerische en <code>_.-</code> tekens zijn (vb. iemand@voorbeeld.com, v00rbeeld-1@voorbeeld.com)",
+        "email": "Ongeldig e-mailadres: mag enkel alfanumerische en <code>_.-</code> tekens zijn (vb. iemand{'@'}voorbeeld.com, v00rbeeld-1{'@'}voorbeeld.com)",
         "appRepoUrl": "YunoHost app opslagplaats URLs worden verwacht om eruit te zien als https://domain.tld/path/to/repo_ynh",
         "notInUsers": "De gebruiker '{value}' bestaat al.",
         "number": "Waarde moet een getal zijn.",
@@ -674,9 +674,9 @@
     "domain_add_dyndns_forbidden": "Je bent al geregistereerd/geabbonneerd op een DynDNS domein van het YunoHost project. Per ontwerp is deze toepassing gelimiteerd tot één zulk domein per server. Als je een ander subdomein van je bestaand geregistreerd domein wilt toevoegen, gebruik dan de 'voeg domein toe dat ik bezit, of subdomein' optie hierboven. Als je een totaal ander domein wilt gebruiken, zal je eerst je bestaande DynDNS domein moeten verwijderen. DynDNS domeinen zijn goed wanneer je start met zelf te hosten, maar op de medium/lange termijn raden we aan om je eigen domeinnaam te kopen bij een register zodat je volledige eigendom hebt van je domein.",
     "confirm_install_app_broken": "WAARSCHUWING! Deze applicatie is kapot volgens de automatische tests van Yunhost en zal waarschijnlijk je systeem kapot maken! Je moet deze app waarschijnlijk NIET installeren tenzij je weet wat je doet. Wil je dat risico nemen?",
     "group_add_permission": "Toestemming toevoegen",
-    "group_explain_admins": "Deze groep komt overeen met beheerders. Gebruikers in deze groep hebben toegang tot de YunoHost webadmin, kunnen connecteren met de server via SSH en kunnen het 'sudo' commando gebruiken. Ze zullen ook de e-mails verzonden aan root@, admin@ en admins@, en zulkse diagnose notificaties krijgen. Je zou enkel personen die je volledig vertrouwd mogen toevoegen in deze groep!",
+    "group_explain_admins": "Deze groep komt overeen met beheerders. Gebruikers in deze groep hebben toegang tot de YunoHost webadmin, kunnen connecteren met de server via SSH en kunnen het 'sudo' commando gebruiken. Ze zullen ook de e-mails verzonden aan root{'@'}, admin{'@'} en admins{'@'}, en zulkse diagnose notificaties krijgen. Je zou enkel personen die je volledig vertrouwd mogen toevoegen in deze groep!",
     "group_explain_visitors_needed_for_external_client": "Let op dat je sommige applicaties toegankelijk houdt voor bezoekers als je deze wilt gebruiken met externe cliënts. Dit is bijvoorbeeld het geval bij Nextcloud als je jouw smartphone of desktopcomputer wilt gebruiken als synchronisatiecliënt.",
-    "tip_about_user_email": "Gebruikers worden aangemaakt met een bijbehorend emailadres (en XMPP-account) in de vorm username@domain.tld. Extra email-aliassen en email-forwards kunnen later toegevoegd worden door de beheerders en de gebruiker.",
+    "tip_about_user_email": "Gebruikers worden aangemaakt met een bijbehorend emailadres (en XMPP-account) in de vorm username{'@'}domain.tld. Extra email-aliassen en email-forwards kunnen later toegevoegd worden door de beheerders en de gebruiker.",
     "mailbox_quota_example": "700M is een CD, 4700M is een DVD",
     "operation_failed_explanation": "De operatie ging fout! Onze excuses :( Je kan proberen <a href='https://yunohost.org/help'>om hulp te vragen</a>. Toon alstublieft het *volledige logbestand* van de operatie aan de mensen die je helpen. Je kan dit doen door te klikken op de groene knop 'Deel met Yunopaste'. Bij het delen van deze logbestanden zal YunoHost automatisch proberem om de privédata, zoals domeinnamen en IP-addressen, te anonymiseren.",
     "orphaned_details": "Deze app is al langere tijd niet onderhouden. Het zou nog kunnen werken, maar het zal geen updates meer ontvangen tot een vrijwilliger dit op zich neemt. Help mee om deze app nieuw leven in te blazen!",
diff --git a/app/src/i18n/locales/oc.json b/app/src/i18n/locales/oc.json
index 4aad387d8..e34dbfde1 100644
--- a/app/src/i18n/locales/oc.json
+++ b/app/src/i18n/locales/oc.json
@@ -156,7 +156,7 @@
     "postinstall_domain": "Aquò es lo primièr nom de domeni ligat al servidor YunoHost, mas tanben lo que servirà al portanèl d’identificacion. Serà doncas visible per totes los utilizaires, causissètz-lo amb suènh.",
     "postinstall_intro_2": "Doas etapas mai son necessàrias per activar lo servidor.",
     "postinstall_intro_3": "Podètz trapar mai d’informacion en anar a <a href='//yunohost.org/en/install/hardware:vps_debian#fa-cog-proceed-with-the-initial-configuration' target='_blank'> la pagina de documentacion en question</a>",
-    "user_new_forward": "novel_transferiment@domenialonhat.org",
+    "user_new_forward": "novel_transferiment{'@'}domenialonhat.org",
     "user_username_edit": "Modificar lo compte a {name}",
     "users_no": "Pas cap d’utilizaire.",
     "words": {
@@ -241,7 +241,7 @@
     "confirm_service_restart": "Volètz vertadièrament reaviar {name} ?",
     "restart": "Reaviar",
     "issues": "{count} problèmas",
-    "tip_about_user_email": "Los utilizaires son creats amb una adreça e-mails ligada (e un compte XMPP) al format utilizaire@domeni.tld. Las adreças de transferiments suplementàrias pòdon èsser ajustadas ulteriorament per l’administrator e l’utilizaire.",
+    "tip_about_user_email": "Los utilizaires son creats amb una adreça e-mails ligada (e un compte XMPP) al format utilizaire{'@'}domeni.tld. Las adreças de transferiments suplementàrias pòdon èsser ajustadas ulteriorament per l’administrator e l’utilizaire.",
     "operation_failed_explanation": "Aquesta operacion a pas capitat ! O planhèm :( Podètz ensajar de <a href='https://yunohost.org/help'>demandar d’ajuda</a>. Se vos plai donar lo *jornal complèt* de l’operacion qu’ensajan de vos ajudar. Podètz clicar sul boton verd « Partejar amb Yunopaste ». En partejant lo jornal d’audit, YunoHost provarà automaticament d’anonimizar las donadas coma los noms de domeni e adreças IP.",
     "group_explain_visitors_needed_for_external_client": "Agachatz que certanas aplicacions sián autorizadas pels visitaires se volètz las utilizar amb de clients extèrns. Per exemple, es lo cas per Nextcloud s’avètz idèa d’emplegar un client de sincronizacion pel vòstre smartphone o ordenador de burèu.",
     "diagnosis_explanation": "La foncionalitat de diagnostic provarà trobar problèmas comuns sus diferents aspèctes de vòstre servidor per s’assegurar que tot fonciona normalament. Lo diagnostic serà tanben realizat dos còps per jorn e enviarà un corrièl a l’administrator se d’errors son detectadas. De notar que d’unes ensages seràn pas mostrats s’utilizatz pas certanas foncions especificas (XMPP, per exemple) o se fracassan a causa d’una configuracion tròp complèxa. Dins aqueste cas, e se sabètz çò qu’avètz modificat, podètz ignorar los problèmas e avertiments correspondents.",
@@ -411,8 +411,8 @@
         "alpha": "La cadena de caractèrs deu conténer sonque de letras.",
         "passwordMatch": "Los senhals correspondon pas.",
         "passwordLenght": "Lo senhal deu conténer almens 8 caractèrs.",
-        "emailForward": "Adreça de transferiment invalida : deu sonque conténer de caractèrs alfranumerics e los caractèrs <code>_.-+</code> (per exemple, quauqun@exemple.com, kal-k1+etiqueta@exemple.com)",
-        "email": "Adreça electronica invalida : deu sonque conténer de caractèrs alfanumerics e los caractèrs <code>_.-</code> (per exemple quauqun@exemple.com, k4l-k1@exemple.com)",
+        "emailForward": "Adreça de transferiment invalida : deu sonque conténer de caractèrs alfranumerics e los caractèrs <code>_.-+</code> (per exemple, quauqun{'@'}exemple.com, kal-k1+etiqueta{'@'}exemple.com)",
+        "email": "Adreça electronica invalida : deu sonque conténer de caractèrs alfanumerics e los caractèrs <code>_.-</code> (per exemple quauqun{'@'}exemple.com, k4l-k1{'@'}exemple.com)",
         "dynDomain": "Nom de domeni invalid : deu conténer sonque de minusculas alfanumericas e de jonhents basses",
         "appRepoUrl": "Las URL del depaus d’aplicacions YunoHost devon semblar a https://domain.tld/path/to/repo_ynh",
         "maxValue": "La valor deu èsser un nombre egal o inferior a {max}.",
diff --git a/app/src/i18n/locales/pl.json b/app/src/i18n/locales/pl.json
index e64f365df..b77f92830 100644
--- a/app/src/i18n/locales/pl.json
+++ b/app/src/i18n/locales/pl.json
@@ -206,7 +206,7 @@
         "alphalownumdot_": "Dozwolone są tylko małe litery oraz znak podkreślenia.",
         "domain": "Niepoprawna domena: może składać się tylko z małych liter, cyfr, kropek i kresek",
         "dynDomain": "Niepoprawna domena: musi składać się tylko z małych liter, cyfr i kresek",
-        "email": "Niepoprawny e-mail: musi składać się z liter, cyfr oraz znaków<code>_.</code> (np. someone@example.com, s0me-1@example.com)",
+        "email": "Niepoprawny e-mail: musi składać się z liter, cyfr oraz znaków<code>_.</code> (np. someone{'@'}example.com, s0me-1{'@'}example.com)",
         "required": "Pole wymagane.",
         "maxValue": "Wartość musi być liczbą równą lub mniejszą od {max}.",
         "remote": "{message}",
@@ -218,7 +218,7 @@
         "minValue": "Wartość musi być liczbą równą lub większą od {min}.",
         "number": "Musisz podać liczbę.",
         "passwordLenght": "Hasło musi mieć co najmniej 8 znaków.",
-        "emailForward": "Niepoprawne przekierowanie e-mail: adres może zawierać jedynie litery, cyfry i znaki <code>_.-+</code> (np. ktos+tag@example.com, s0me-1+tag@example.com)",
+        "emailForward": "Niepoprawne przekierowanie e-mail: adres może zawierać jedynie litery, cyfry i znaki <code>_.-+</code> (np. ktos+tag{'@'}example.com, s0me-1+tag{'@'}example.com)",
         "appRepoUrl": "Adresy URL repozytoriów YunoHost powinny wyglądać podobnie do https://domain.tld/path/to/repo_ynh"
     },
     "everything_good": "Wszystko w porządku!",
@@ -565,13 +565,13 @@
     "users_import_delete_desc": "Wybranie tej opcji sprawia, że wszyscy istniejący użytkownicy niewymienieni w pliku CSV zostaną usunięci (i wymazani).",
     "yunohost_admin": "YunoHost Admin",
     "system_upgrade_all_packages_btn": "Aktualizuj wszystkie pakiety",
-    "tip_about_user_email": "Użytkownicy są tworzeni z przypisanym adresem email (i kontem XMPP) w formacie username@domain.tld. Dodatkowe aliasy adresów email i przekierowań mogą być później dodane przez admina lub użytkownika.",
+    "tip_about_user_email": "Użytkownicy są tworzeni z przypisanym adresem email (i kontem XMPP) w formacie username{'@'}domain.tld. Dodatkowe aliasy adresów email i przekierowań mogą być później dodane przez admina lub użytkownika.",
     "tools_reboot": "Uruchom ponownie serwer",
     "tools_shutdown_reboot": "Wyłącz/Uruchom ponownie",
     "user_emailaliases": "Aliasy adresu Email",
     "user_emailforward": "Przekierowywanie poczty",
     "user_mailbox_use": "Wykorzystana przestrzeń przez skrzynkę pocztową",
-    "user_new_forward": "newforward@myforeigndomain.org",
+    "user_new_forward": "newforward{'@'}myforeigndomain.org",
     "tools": "Narzędzia",
     "app_state_broken": "Zepsute",
     "app_state_broken_explanation": "Ta aplikacja aktualnie jest uszkodzona i według automatycznych testów YunoHost nie da się jej zainstalować",
@@ -582,7 +582,7 @@
     "manage_groups": "Zarządzaj grupami",
     "tools_yunohost_settings": "Ustawienia YunoHost",
     "wrong_password_or_username": "Błędne hasło lub nazwa użytkownika",
-    "group_explain_admins": "Jest to specjalna grupa użytkowników odpowiadająca administratorom. Użytkownicy należący do tej grupy mogą dostać się do portalu YunoHost webadmin, połączyć się z serwerem poprzez SSH i wykonywać polecenia `sudo`. Będą także otrzymywać maile wysłane do root@, admin@ oraz admins@, a także powiadomienia dotyczące diagnostyki. Dlatego też powinieneś do tej grupy dodawać tylko te osoby, którym ufasz w 100%!",
+    "group_explain_admins": "Jest to specjalna grupa użytkowników odpowiadająca administratorom. Użytkownicy należący do tej grupy mogą dostać się do portalu YunoHost webadmin, połączyć się z serwerem poprzez SSH i wykonywać polecenia `sudo`. Będą także otrzymywać maile wysłane do root{'@'}, admin{'@'} oraz admins{'@'}, a także powiadomienia dotyczące diagnostyki. Dlatego też powinieneś do tej grupy dodawać tylko te osoby, którym ufasz w 100%!",
     "important_yunohost_upgrade": "Dostępna jest spora aktualizacja dla YunoHost. Przed aktualizacją zaleca się uważnie przeczytać listę zmian dostępną na forum: <a href='https://forum.yunohost.org/tag/ynh_release'>Przejrzyj listę zmian na forum</a>",
     "app": {
         "install": {
diff --git a/app/src/i18n/locales/pt.json b/app/src/i18n/locales/pt.json
index d8ed7315b..4cc7e5d0f 100644
--- a/app/src/i18n/locales/pt.json
+++ b/app/src/i18n/locales/pt.json
@@ -90,7 +90,7 @@
     "user_emailaliases": "Pseudónimos de correio",
     "user_emailforward": "Reencaminhar correio",
     "user_fullname": "Nome completo",
-    "user_new_forward": "newforward@myforeigndomain.org",
+    "user_new_forward": "newforward{'@'}myforeigndomain.org",
     "user_username": "Nome de utilizador",
     "user_username_edit": "Editar conta de {name}",
     "users": "Utilizadores",
@@ -215,8 +215,8 @@
         "notInUsers": "O usuário '{value}' já existe.",
         "minValue": "Valor deve ser um número maior ou igual a {min}.",
         "name": "Nomes não podem incluir caracteres especiais exceto <code>,.'</code>",
-        "emailForward": "Encaminhamento de email inválido: deve ser composto somente de caracteres alfanuméricos e <code>_.-+</code> (e.g. alguem@exemplo.com, 4algu-3m@exemplo.com)",
-        "email": "Email inválido: deve ser composto somente por caracteres alfanuméricos e <code>_.</code> (e.g. alguem@exemplo.com, 4algu-3m@exemplo.com)",
+        "emailForward": "Encaminhamento de email inválido: deve ser composto somente de caracteres alfanuméricos e <code>_.-+</code> (e.g. alguem{'@'}exemplo.com, 4algu-3m{'@'}exemplo.com)",
+        "email": "Email inválido: deve ser composto somente por caracteres alfanuméricos e <code>_.</code> (e.g. alguem{'@'}exemplo.com, 4algu-3m{'@'}exemplo.com)",
         "dynDomain": "Nome de domínio inválido: Deve ser composto somente por caracteres alfanuméricos e traço",
         "domain": "Nome de domínio inválido: Deve ser composto somente por caracteres alfanuméricos minúsculos, ponto e traço",
         "between": "O valor deve ser entre {min} e {max}.",
@@ -316,7 +316,7 @@
     "user_mailbox_use": "Espaço utilizado",
     "user_mailbox_quota": "Quota de armazenamento de email",
     "user_interface_link": "Interface de usuário",
-    "tip_about_user_email": "Os usuários são criados com um endereço de email associado (uma conta XMPP) com o formato usuario@domain.tld. Endereços de emails adicionais e redirecionamentos de email podem ser adicionados mais tarde pelo usuário ou pelo administrador.",
+    "tip_about_user_email": "Os usuários são criados com um endereço de email associado (uma conta XMPP) com o formato usuario{'@'}domain.tld. Endereços de emails adicionais e redirecionamentos de email podem ser adicionados mais tarde pelo usuário ou pelo administrador.",
     "user_emailforward_add": "Adicionar um redirecionamento de email",
     "user_emailaliases_add": "Adicionar uma alias de email",
     "unknown": "Desconhecido",
diff --git a/app/src/i18n/locales/ru.json b/app/src/i18n/locales/ru.json
index 59df29458..850c4edc7 100644
--- a/app/src/i18n/locales/ru.json
+++ b/app/src/i18n/locales/ru.json
@@ -134,7 +134,7 @@
     "user_fullname": "Полное имя",
     "user_interface_link": "Интерфейс пользователя",
     "user_mailbox_use": "Используемое пространство почтового ящика",
-    "user_new_forward": "newforward@myforeigndomain.org",
+    "user_new_forward": "newforward{'@'}myforeigndomain.org",
     "user_username": "Имя пользователя",
     "user_username_edit": "Редактировать аккаунт {name}",
     "users": "Пользователи",
@@ -192,7 +192,7 @@
         "remote": "{message}",
         "pattern": "{type}",
         "invalid_form": "Форма содержит ошибки.",
-        "email": "Недействительный email: используйте только буквы, цифры и <code>_.-</code> символы (например, someone@example.com, s0me-1@example.com)",
+        "email": "Недействительный email: используйте только буквы, цифры и <code>_.-</code> символы (например, someone{'@'}example.com, s0me-1{'@'}example.com)",
         "minValue": "Значение должно быть числом, большим или равным {min}.",
         "passwordLenght": "Пароль должен состоять не менее чем из 8 символов.",
         "passwordMatch": "Пароли не совпадают.",
@@ -200,7 +200,7 @@
         "name": "Имена не должны содержать специальные символы, кроме <code> ,.'-</code>",
         "domain": "Недопустимое доменное имя: используйте строчные буквы, цифры, точки и дефисы",
         "dynDomain": "Недопустимое доменное имя: используйте строчные буквы, цифры и дефисы",
-        "emailForward": "Неправильный адрес электронной почты: используйте только буквы, цифры и <code>_.-+</code> символы (например, someone+tag@example.com, s0me-1+tag@example.com)",
+        "emailForward": "Неправильный адрес электронной почты: используйте только буквы, цифры и <code>_.-+</code> символы (например, someone+tag{'@'}example.com, s0me-1+tag{'@'}example.com)",
         "appRepoUrl": "URL-адреса репозитория приложений YunoHost будут выглядеть так: https://domain.tld/path/to/repo_ynh"
     },
     "footer": {
@@ -569,7 +569,7 @@
     },
     "items_verbose_items_left": "Осталось {items}. | Осталось 1 {items}. | Осталось {items}.",
     "permission_main": "Основной ярлык",
-    "tip_about_user_email": "Пользователи создаются с ассоциированным адресом электронной почты (и учетной записью XMPP) в формате username@domain.tld. Дополнительные псевдонимы и переадресации электронной почты могут быть добавлены администратором или пользователем позже.",
+    "tip_about_user_email": "Пользователи создаются с ассоциированным адресом электронной почты (и учетной записью XMPP) в формате username{'@'}domain.tld. Дополнительные псевдонимы и переадресации электронной почты могут быть добавлены администратором или пользователем позже.",
     "tools_webadmin_settings": "Настройки веб-интерфейса",
     "items_verbose_count": "Есть {items}. | Есть 1 {items}. | Есть {items}.",
     "traceback": "Откат",
@@ -690,6 +690,6 @@
     "wrong_password_or_username": "Неправильный пароль или имя пользователя",
     "label_for_manifestname_help": "Это имя, которое отображается в портале пользователя. Оно может быть изменено позже.",
     "tools_yunohost_settings": "Настройки YunoHost",
-    "group_explain_admins": "Это специальная группа для пользователей-администраторов. Пользователи в этой группе имеют доступ к администраторскому веб-интерфейсу YunoHost, SSH-соединению и использованию команды `sudo`. Они также будут получать письма, отправленные на почтовые ящики root@, admin@ и admins@, такие как уведомления диагностики. Вы должны добавлять сюда только тех, кому полностью доверяете!",
+    "group_explain_admins": "Это специальная группа для пользователей-администраторов. Пользователи в этой группе имеют доступ к администраторскому веб-интерфейсу YunoHost, SSH-соединению и использованию команды `sudo`. Они также будут получать письма, отправленные на почтовые ящики root{'@'}, admin{'@'} и admins{'@'}, такие как уведомления диагностики. Вы должны добавлять сюда только тех, кому полностью доверяете!",
     "important_yunohost_upgrade": "Доступен большое обновление YunoHost. Очень рекомендуется внимательно прочитать заметки о выпуске на форуме перед обновлением :<a href='https://forum.yunohost.org/tag/ynh_release'>Найти заметки о выпуске на форуме</a>"
 }
diff --git a/app/src/i18n/locales/sk.json b/app/src/i18n/locales/sk.json
index 54fca479e..5a7a23d07 100644
--- a/app/src/i18n/locales/sk.json
+++ b/app/src/i18n/locales/sk.json
@@ -212,9 +212,9 @@
         "alphalownumdot_": "Hodnota môže obsahovať iba alfanumerické znaky a podčiarkovník.",
         "domain": "Nesprávny tvar mena domény: môže obsahovať iba malé alfanumerické znaky, bodku a pomlčku",
         "dynDomain": "Nesprávny tvar mena domény: môže obsahovať iba malé alfanumerické znaky a pomlčku",
-        "email": "Neplatný e-mail: môže obsahovať iba alfanumerické znaky a <code>_.-</code> (napr. niekto@priklad.com, ni3kt0-1@priklad.com)",
+        "email": "Neplatný e-mail: môže obsahovať iba alfanumerické znaky a <code>_.-</code> (napr. niekto{'@'}priklad.com, ni3kt0-1{'@'}priklad.com)",
         "between": "Hodnota musí byť medzi {min} a {max}.",
-        "emailForward": "Nesprávny tvar e-mailu pre presmerovania: môže obsahovať iba alfanumerické znaky a <code>_.-+</code> (napr. niekto+znacka@priklad.com, ni3kto-1+znacka@priklad.com)",
+        "emailForward": "Nesprávny tvar e-mailu pre presmerovania: môže obsahovať iba alfanumerické znaky a <code>_.-+</code> (napr. niekto+znacka{'@'}priklad.com, ni3kto-1+znacka{'@'}priklad.com)",
         "appRepoUrl": "URL adresy YunoHost repozitárov majú mať tvar https://domena.tld/cesta/k/repo_ynh",
         "name": "Jediné povolené špeciálne znaky v mene môžu byť <code> ,.'-</code>",
         "minValue": "Hodnota musí byť číslo rovné alebo vyššie ako {min}.",
@@ -486,7 +486,7 @@
     "system_upgrade_btn": "Aktualizácia",
     "system_upgrade_all_packages_btn": "Aktualizovať všetky balíčky",
     "tcp": "TCP",
-    "tip_about_user_email": "Pri vytvorení používateľa je mu tiež pridelená e-mailová adresa (a účet XMPP) vo formáte menopouzivatela@domena.sk. Ďalšie e-mailové aliasy a presmerovania môžu pridať neskôr administrátor alebo samotný používateľ.",
+    "tip_about_user_email": "Pri vytvorení používateľa je mu tiež pridelená e-mailová adresa (a účet XMPP) vo formáte menopouzivatela{'@'}domena.sk. Ďalšie e-mailové aliasy a presmerovania môžu pridať neskôr administrátor alebo samotný používateľ.",
     "tools": "Nástroje",
     "tools_reboot": "Reštartujte svoj server",
     "tools_reboot_btn": "Reštartovať",
@@ -519,7 +519,7 @@
     "user_interface_link": "Používateľské rozhranie",
     "user_mailbox_quota": "Kvóta e-mailovej schránky",
     "user_mailbox_use": "Využité miesto v e-mailovej schránke",
-    "user_new_forward": "adresa-pre-presmerovanie@ina-domena.sk",
+    "user_new_forward": "adresa-pre-presmerovanie{'@'}ina-domena.sk",
     "user_username": "Meno používateľa",
     "user_username_edit": "Upraviť účet používateľa {name}",
     "users": "Používatelia",
diff --git a/app/src/i18n/locales/tr.json b/app/src/i18n/locales/tr.json
index 98a885f08..19d1825d0 100644
--- a/app/src/i18n/locales/tr.json
+++ b/app/src/i18n/locales/tr.json
@@ -119,8 +119,8 @@
         "alpha": "Değer yalnızca alfabetik karakterler olmalıdır.",
         "domain": "Geçersiz alan adı: Yalnızca küçük harfli, alfasayısal, nokta ve tire karakterlerinden oluşmalıdır",
         "dynDomain": "Geçersiz alan adı: Yalnızca küçük harfli, alfasayısal ve tire karakterlerinden oluşmalıdır",
-        "email": "Geçersiz e-posta: alfasayısal ve yalnızca <code>_.-</code> karakter olmalıdır (ör. birisi@example.com, s0me-1@example.com)",
-        "emailForward": "Geçersiz e-posta yönlendirmesi: alfasayısal ve yalnızca <code>_.-+</code> karakter olmalıdır (ör. birisi+etiket@example.com, s0me-1+etiket@example.com)",
+        "email": "Geçersiz e-posta: alfasayısal ve yalnızca <code>_.-</code> karakter olmalıdır (ör. birisi{'@'}example.com, s0me-1{'@'}example.com)",
+        "emailForward": "Geçersiz e-posta yönlendirmesi: alfasayısal ve yalnızca <code>_.-+</code> karakter olmalıdır (ör. birisi+etiket{'@'}example.com, s0me-1+etiket{'@'}example.com)",
         "appRepoUrl": "YunoHost uygulama deposu URL'lerinin https://domain.tld/path/to/repo_ynh gibi görünmesi bekleniyor",
         "name": "Adlar, <code> ,.'-</code> dışında özel karakterler içeremez",
         "minValue": "Değer, {min} değerinden büyük veya eşit bir sayı olmalıdır.",
@@ -491,7 +491,7 @@
     "system_upgrade_all_applications_btn": "Tüm uygulamaları güncelle",
     "system_upgrade_all_packages_btn": "Tüm paketleri güncelle",
     "text_selection_is_disabled": "Metin seçimi devre dışı. Bu günlüğü paylaşmak istiyorsanız, lütfen *tüm* günlüğü 'Yunopaste ile Paylaş' düğmesiyle paylaşın.<br/><small>Ya da gerçekten metin seçmek istiyorsanız şu tuşlara basın: ↓↓↑↑. </small>",
-    "tip_about_user_email": "Kullanıcılar, kullanıcıadı@domain.tld biçiminde ilişkili bir e-posta adresiyle (ve XMPP hesabıyla) oluşturulur. Ek e-posta takma adları ve e-posta yönlendirmeleri daha sonra yönetici ve kullanıcı tarafından eklenebilir.",
+    "tip_about_user_email": "Kullanıcılar, kullanıcıadı{'@'}domain.tld biçiminde ilişkili bir e-posta adresiyle (ve XMPP hesabıyla) oluşturulur. Ek e-posta takma adları ve e-posta yönlendirmeleri daha sonra yönetici ve kullanıcı tarafından eklenebilir.",
     "tools_reboot": "Sunucuyu yeniden başlat",
     "tools_reboot_btn": "Yeniden başlat",
     "tools_shutdown_btn": "Kapat",
@@ -504,7 +504,7 @@
     "user_emailforward": "E-posta yönlendirme",
     "user_interface_link": "Kullanıcı arayüzü",
     "user_mailbox_use": "E-posta kullanılan alan",
-    "user_new_forward": "yeniyonlendirme@digerdomain.tld",
+    "user_new_forward": "yeniyonlendirme{'@'}digerdomain.tld",
     "user_username": "Kullanıcı adı",
     "users": "Kullanıcılar",
     "users_import_csv_file": "CSV Dosyası",
diff --git a/app/src/i18n/locales/uk.json b/app/src/i18n/locales/uk.json
index 3246a7b71..13221ea38 100644
--- a/app/src/i18n/locales/uk.json
+++ b/app/src/i18n/locales/uk.json
@@ -156,7 +156,7 @@
         "between": "Значення має бути між {min} і {max}.",
         "domain": "Неприпустиме доменне ім'я: воно має складатися тільки з букв і чисел у нижньому регістрі, крапок і тире",
         "dynDomain": "Неприпустиме доменне ім'я: воно має складатися тільки з букв і чисел в нижньому регістрі та тире",
-        "email": "Неприпустима е-пошта: в ній мають бути лише букви та числа <code>_.-</code> (на зразок cholovyaha@example.com, ch0lov-1@example.com)",
+        "email": "Неприпустима е-пошта: в ній мають бути лише букви та числа <code>_.-</code> (на зразок cholovyaha{'@'}example.com, ch0lov-1{'@'}example.com)",
         "name": "Імена не можуть містити спеціальні символи, за винятком <code> ,.'-</code>",
         "minValue": "Значення має бути числом, рівним або більшим, ніж {min}.",
         "notInUsers": "Користувач '{value}' вже існує.",
@@ -165,7 +165,7 @@
         "passwordMatch": "Паролі не збігаються.",
         "required": "Обов'язкове поле.",
         "alphalownumdot_": "У значенні можуть бути тільки букви в нижньому регістрі, числа та знак нижнього підкреслення.",
-        "emailForward": "Неприпустима переадресація е-пошти: в ній мають бути лише букви та числа <code>_.-</code> (на зразок cholovyaha@example.com, ch0lov-1@example.com)",
+        "emailForward": "Неприпустима переадресація е-пошти: в ній мають бути лише букви та числа <code>_.-</code> (на зразок cholovyaha{'@'}example.com, ch0lov-1{'@'}example.com)",
         "remote": "{message}",
         "pattern": "{type}",
         "invalid_form": "Форма містить деякі помилки.",
@@ -448,7 +448,7 @@
     "user_fullname": "Повне ім'я",
     "user_interface_link": "Інтерфейс користувача",
     "user_mailbox_use": "Простір, що використовується поштовою скринькою",
-    "user_new_forward": "novapereadresaciya@myforeigndomain.org",
+    "user_new_forward": "novapereadresaciya{'@'}myforeigndomain.org",
     "user_username": "Ім'я користувача",
     "user_username_edit": "Редагувати обліковий запис користувача {name}",
     "users_new": "Новий користувач",
@@ -496,7 +496,7 @@
     "pending_migrations": "Є кілька незавершених міграцій, які очікують запуску. Будь ласка, перейдіть в розділ <a href='#/tools/migrations'>Засоби > Міграції</a>, щоб запустити їх.",
     "postinstall_domain": "Це перше доменне ім'я, пов'язане з сервером YonoHost, тобто ім'я, яким будуть користуватися користувачі вашого сервера, щоб потрапити на портал автентифікації. Воно буде видне кожному, вибирайте його ретельно.",
     "postinstall_intro_3": "Ви можете отримати більше відомостей, <a href='//yunohost.org/en/install/hardware:vps_debian#fa-cog-proceed-with-the-initial-configuration' target='_blank'>відвідавши сторінку документації</a>",
-    "tip_about_user_email": "Користувачі створюються із закріпленою адресою е-пошти (і обліковим записом XMPP) в форматі username@domain.tld. Додаткові аліаси та переадресації е-пошти можуть бути пізніше додані адміністратором і користувачем.",
+    "tip_about_user_email": "Користувачі створюються із закріпленою адресою е-пошти (і обліковим записом XMPP) в форматі username{'@'}domain.tld. Додаткові аліаси та переадресації е-пошти можуть бути пізніше додані адміністратором і користувачем.",
     "tools_shutdown": "Вимкнути цей сервер",
     "user_mailbox_quota": "Квота поштової скриньки",
     "users": "Користувачі",
@@ -585,7 +585,7 @@
     "tools_yunohost_settings": "Налаштування YunoHost",
     "wrong_password_or_username": "Недійсний пароль чи ім'я користувача",
     "confirm_install_app_broken": "УВАГА! Згідно з автоматичними тестами YunoHost, цей застосунок зламано, і він, швидше за все, зламає вашу систему! Ймовірно, вам НЕ варто встановлювати його, якщо ви не знаєте, що робите. Чи готові ви піти на такий ризик?",
-    "group_explain_admins": "Це спеціальна група, що відповідає користувачам з правами адміністратора. Користувачі цієї групи можуть отримати доступ до вебадмініструванні YunoHost, під'єднуватися до сервера по SSH і використовувати команду sudo. Вони також будуть отримувати електронні листи, відправлені на адреси root@, admin@ і admins@, наприклад, повідомлення про діагностику. Додавайте в цю групу тільки тих людей, яким ви цілковито довіряєте!",
+    "group_explain_admins": "Це спеціальна група, що відповідає користувачам з правами адміністратора. Користувачі цієї групи можуть отримати доступ до вебадмініструванні YunoHost, під'єднуватися до сервера по SSH і використовувати команду sudo. Вони також будуть отримувати електронні листи, відправлені на адреси root{'@'}, admin{'@'} і admins{'@'}, наприклад, повідомлення про діагностику. Додавайте в цю групу тільки тих людей, яким ви цілковито довіряєте!",
     "important_yunohost_upgrade": "Доступне велике оновлення YunoHost. Перед оновленням наполегливо радимо уважно прочитати примітки до випуску на форумі: <a href='https://forum.yunohost.org/tag/ynh_release'>Переглянути примітки до випуску на форумі</a>",
     "app": {
         "install": {
diff --git a/app/src/i18n/locales/zh_Hans.json b/app/src/i18n/locales/zh_Hans.json
index 7168389f4..b0cbfda17 100644
--- a/app/src/i18n/locales/zh_Hans.json
+++ b/app/src/i18n/locales/zh_Hans.json
@@ -90,8 +90,8 @@
         "notInUsers": "用户 '{value}' 已经存在。",
         "minValue": "值必须是等于或大于 {min} 的数字。",
         "name": "名称不得包含特殊字符，<code> ,.'-</code> 除外",
-        "emailForward": "无效的转发邮箱：仅可包含字母数字和 <code>_.-+</code> 字符（例如 someone+tag@example.com、s0me-1+tag@example.com）",
-        "email": "无效的邮箱：仅可包含字母数字且仅限 <code>_.-</code> 字符（例如 someone@example.com、s0me-1@example.com）",
+        "emailForward": "无效的转发邮箱：仅可包含字母数字和 <code>_.-+</code> 字符（例如 someone+tag{'@'}example.com、s0me-1+tag{'@'}example.com）",
+        "email": "无效的邮箱：仅可包含字母数字且仅限 <code>_.-</code> 字符（例如 someone{'@'}example.com、s0me-1{'@'}example.com）",
         "domain": "域名无效：仅可包含小写字母数字、点和短划线字符",
         "dynDomain": "域名无效：仅可包含小写字母数字和短划线字符",
         "between": "值必须介于 {min} 和 {max} 之间。",
@@ -423,7 +423,7 @@
     "tools_reboot_btn": "重启",
     "tools_reboot": "重启您的服务器",
     "tools": "工具",
-    "tip_about_user_email": "用户创建时带有一个关连的电子邮件地址（和XMPP账号），格式为username@domain.tld。额外的电子邮件别名和电子邮件转发可稍后由管理员和用户添加。",
+    "tip_about_user_email": "用户创建时带有一个关连的电子邮件地址（和XMPP账号），格式为username{'@'}domain.tld。额外的电子邮件别名和电子邮件转发可稍后由管理员和用户添加。",
     "tcp": "TCP",
     "tools_webadmin_settings": "网站管理设置",
     "tools_webadmin": {
@@ -466,7 +466,7 @@
     "users": "用户",
     "user_username_edit": "编辑 {name} 的账号",
     "user_username": "用户名",
-    "user_new_forward": "newforward@myforeigndomain.org",
+    "user_new_forward": "newforward{'@'}myforeigndomain.org",
     "user_mailbox_use": "邮箱已用空间",
     "user_mailbox_quota": "邮箱配额",
     "user_interface_link": "用户界面",
@@ -674,7 +674,7 @@
     "users_import_update_desc": "如果选中，CSV 文件中包含的所有现有用户都将更新为新值",
     "group_admins": "管理员",
     "details_about": "显示有关 {subject} 的更多详情",
-    "group_explain_admins": "这是一个对应管理员用户的特殊群组。此群组中的用户可以访问 YunoHost 的网站管理，使用 SSH 连接到服务器并使用 `sudo` 命令。他们还将收到发送至 root@、admin@ 和 admins@ 的电子邮件，例如诊断通知。您应该只将您绝对信任的人添加到此群组中！",
+    "group_explain_admins": "这是一个对应管理员用户的特殊群组。此群组中的用户可以访问 YunoHost 的网站管理，使用 SSH 连接到服务器并使用 `sudo` 命令。他们还将收到发送至 root{'@'}、admin{'@'} 和 admins{'@'} 的电子邮件，例如诊断通知。您应该只将您绝对信任的人添加到此群组中！",
     "label_for_manifestname_help": "这是显示在用户门户中的名称。这可以稍后更改。",
     "manage_groups": "管理群组",
     "text_selection_is_disabled": "文本选择已禁用。如果您想分享此日志，请使用 '使用 Yunopaste 共享' 按钮共享*完整*日志。<br/><small>或者如果您真的想要选择文本，请按这些键：↓↓↑↑。</small>",

From 10579ad95e077fe00d4416e1edea54d55a7d7f5b Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 12 Sep 2024 15:10:54 +0200
Subject: [PATCH 259/275] chore: clean locales

---
 app/src/i18n/locales/ar.json      | 3 +--
 app/src/i18n/locales/ca.json      | 3 +--
 app/src/i18n/locales/cs.json      | 1 -
 app/src/i18n/locales/da.json      | 1 -
 app/src/i18n/locales/de.json      | 3 +--
 app/src/i18n/locales/en.json      | 2 +-
 app/src/i18n/locales/es.json      | 3 +--
 app/src/i18n/locales/eu.json      | 3 +--
 app/src/i18n/locales/fi.json      | 3 +--
 app/src/i18n/locales/fr.json      | 3 +--
 app/src/i18n/locales/gl.json      | 3 +--
 app/src/i18n/locales/id.json      | 3 +--
 app/src/i18n/locales/it.json      | 3 +--
 app/src/i18n/locales/ja.json      | 1 -
 app/src/i18n/locales/ko.json      | 1 -
 app/src/i18n/locales/lt.json      | 1 -
 app/src/i18n/locales/nl.json      | 1 -
 app/src/i18n/locales/oc.json      | 1 -
 app/src/i18n/locales/pl.json      | 3 +--
 app/src/i18n/locales/pt.json      | 1 -
 app/src/i18n/locales/pt_BR.json   | 3 +--
 app/src/i18n/locales/ru.json      | 3 +--
 app/src/i18n/locales/sk.json      | 1 -
 app/src/i18n/locales/sl.json      | 3 +--
 app/src/i18n/locales/sv.json      | 3 +--
 app/src/i18n/locales/te.json      | 1 -
 app/src/i18n/locales/tr.json      | 1 -
 app/src/i18n/locales/uk.json      | 3 +--
 app/src/i18n/locales/zh_Hans.json | 1 -
 29 files changed, 17 insertions(+), 45 deletions(-)

diff --git a/app/src/i18n/locales/ar.json b/app/src/i18n/locales/ar.json
index cf207391d..666f62e0c 100644
--- a/app/src/i18n/locales/ar.json
+++ b/app/src/i18n/locales/ar.json
@@ -421,8 +421,7 @@
                 "upgrade_system": "تم إغلاق الاتصال بالخادم بسبب ترقية يونوهوست.في انتظار إمكانية الوصول للخادم مرة أخرى…",
                 "shutdown": "تم إيقاف تشغيل خادمك ولم يعد قابلا للوصول إليه.قم بتشغيله مرة أخرى وسيتاح لك تسجيل الدخول بمجرد إمكانية الوصول إليه."
             },
-            "failed": "يبدو أن الخادم لا يستجيب. يمكنك محاولة إعادة الاتصال مرة أخرى أو محاولة تشغيل`systemctl restart yunohost-api` من خلال ssh.",
-            "success": "يمكن الآن الوصول إلى الخادم! يمكنك محاولة تسجيل الدخول"
+            "failed": "يبدو أن الخادم لا يستجيب. يمكنك محاولة إعادة الاتصال مرة أخرى أو محاولة تشغيل`systemctl restart yunohost-api` من خلال ssh."
         },
         "partial_logs": "[…] (تحقق من السجل للحصول على السجلات الكاملة)"
     },
diff --git a/app/src/i18n/locales/ca.json b/app/src/i18n/locales/ca.json
index 7c0c77797..cc4a28e22 100644
--- a/app/src/i18n/locales/ca.json
+++ b/app/src/i18n/locales/ca.json
@@ -365,8 +365,7 @@
                 "upgrade_system": "La connexió amb el servidor s'ha tancat a causa de l'actualització de YunoHost. S'està esperant que el servidor torni a ser accessible…"
             },
             "title": "S'està intentant comunicar amb el servidor…",
-            "failed": "Sembla que el servidor no respon. Podeu provar de tornar a connectar-vos o provar d'executar `systemctl restart yunohost-api` mitjançant ssh.",
-            "success": "Ja es pot accedir al servidor! Podeu provar d'iniciar sessió"
+            "failed": "Sembla que el servidor no respon. Podeu provar de tornar a connectar-vos o provar d'executar `systemctl restart yunohost-api` mitjançant ssh."
         }
     },
     "app_install_parameters": "Paràmetres de la instal·lació",
diff --git a/app/src/i18n/locales/cs.json b/app/src/i18n/locales/cs.json
index a3b140eb4..a5a67fee0 100644
--- a/app/src/i18n/locales/cs.json
+++ b/app/src/i18n/locales/cs.json
@@ -46,7 +46,6 @@
                 "shutdown": "Váš server se ukončuje a nebude dostupný. Když ho znovu zapnete, jakmile bude zase dosažitelný, zobrazí se přihlašovací okno."
             },
             "title": "Snažím se navázat spojení se serverem…",
-            "success": "Server už odpovídá! Nyní se můžete přihlásit",
             "failed": "Zdá se, že server neodpovídá. Zkuste se znovu připojit nebo na něm pustit `systemctl restart yunohost-api`přes ssh."
         }
     },
diff --git a/app/src/i18n/locales/da.json b/app/src/i18n/locales/da.json
index 119b028c7..4a896a1a9 100644
--- a/app/src/i18n/locales/da.json
+++ b/app/src/i18n/locales/da.json
@@ -29,7 +29,6 @@
                 "shutdown": "Din server lukker ned og er ikke længere kontaktbar. Tænd for den igen og en loginprompt vil blive synlig så snart den atter er kontaktbar.",
                 "upgrade_system": "Forbindelsen til serveren er blevet lukket på grund af YunoHost opdatering. Venter på at kunne kontakte serveren igen…"
             },
-            "success": "Serveren er nu kontaktbar! Du kan prøve at logge ind",
             "title": "Forsøger at kommunikere med serveren…"
         },
         "partial_logs": "[...] (se i historik for at finde hele loggen)"
diff --git a/app/src/i18n/locales/de.json b/app/src/i18n/locales/de.json
index c2c346216..cbd467edd 100644
--- a/app/src/i18n/locales/de.json
+++ b/app/src/i18n/locales/de.json
@@ -403,8 +403,7 @@
                 "reboot": "Ihr Server startet neu und wird für einige Zeit nicht erreichbar sein. Eine Login-Aufforderung wird erscheinen, sobald der Server wieder erreichbar ist.",
                 "shutdown": "Ihr Server wird heruntergefahren und ist nicht mehr erreichbar. Schalten Sie ihn wieder ein und eine Anmeldeaufforderung wird angezeigt, sobald der Server erreichbar ist.",
                 "upgrade_system": "Die Verbindung mit dem Server wurde aufgrund einer YunoHost-Aktualisierung beendet. Warten Sie bis der Server wieder erreichbar ist…"
-            },
-            "success": "Der Server ist jetzt erreichbar! Sie können versuchen, sich anzumelden"
+            }
         }
     },
     "hook_data_xmpp": "XMPP-Daten",
diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index 59eb51841..34b3ec7f4 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -344,9 +344,9 @@
         "invalid_form": "The form contains some errors.",
         "maxValue": "Value must be a number equal or lesser than {max}.",
         "minValue": "Value must be a number equal or greater than {min}.",
-        "numValue": "Value must be a number",
         "name": "Names may not includes special characters except <code> ,.'-</code>",
         "notInUsers": "The user '{value}' already exists.",
+        "numValue": "Value must be a number",
         "number": "Value must be a number.",
         "passwordLenght": "Password must be at least 8 characters long.",
         "passwordMatch": "Passwords don't match.",
diff --git a/app/src/i18n/locales/es.json b/app/src/i18n/locales/es.json
index a2e17ffb8..1d9108d7e 100644
--- a/app/src/i18n/locales/es.json
+++ b/app/src/i18n/locales/es.json
@@ -290,8 +290,7 @@
                 "reboot": "Tu servidor se está reiniciando y no será accesible por un tiempo. Una solicitud de inicio de sesión estará disponible cuando el servidor se encuentre listo.",
                 "shutdown": "Su servidor se está apagando y ya no es accesible. Vuelva a encenderlo y aparecerá un aviso de inicio de sesión tan pronto como se pueda acceder al servidor.",
                 "upgrade_system": "La conexión con el servidor se ha cerrado debido a la actualización de YunoHost. Esperando a que el servidor sea accesible de nuevo…"
-            },
-            "success": "¡El servidor ya está disponible! Puedes intentar iniciar sesión"
+            }
         }
     },
     "address": {
diff --git a/app/src/i18n/locales/eu.json b/app/src/i18n/locales/eu.json
index c0aa22b0a..7a961aef7 100644
--- a/app/src/i18n/locales/eu.json
+++ b/app/src/i18n/locales/eu.json
@@ -32,8 +32,7 @@
                 "reboot": "Zerbitzaria berrabiarazten ari da eta ez da erabilgarri egongo tarte batez. Saioa hasteko galdegingo zaizu zerbitzaria berriro ere erabilgarri dagoenean.",
                 "shutdown": "Zerbitzari itzaltzen ari da eta aurrerantzean ez da erabilgarri egongo. Piztu ezazu berriro eta saioa hasteko galdegingo zaizu zerbitzaria berriro erabilgarri dagoenean.",
                 "upgrade_system": "Zerbitzariarekin konexioa eten da YunoHost eguneratzen ari delako. Zerbitzaria berriro erabilgarri noiz egongo zain…"
-            },
-            "success": "Zerbitzaria erabilgarri dago! Saioa hasten saia zaitezke"
+            }
         }
     },
     "api_error": {
diff --git a/app/src/i18n/locales/fi.json b/app/src/i18n/locales/fi.json
index ecc5ae95d..fea43ca3e 100644
--- a/app/src/i18n/locales/fi.json
+++ b/app/src/i18n/locales/fi.json
@@ -48,8 +48,7 @@
                 "reboot": "Palvelimesi käynnistyy uudelleen, eikä se ole tavoitettavissa vähään aikaan. Sisäänkirjautumiskehote tulee näkyviin heti, kun palvelin on tavoitettavissa.",
                 "shutdown": "Palvelimesi on sammumassa eikä ole enää tavoitettavissa. Kytke se takaisin päälle, ja kirjautumiskehote tulee näkyviin heti, kun palvelin on tavoitettavissa.",
                 "upgrade_system": "Yhteys palvelimeen on suljettu YunoHostin päivityksen vuoksi. Odotamme, että palvelin on jälleen tavoitettavissa…"
-            },
-            "success": "Palvelin on nyt tavoitettavissa! Voit yrittää kirjautua sisään"
+            }
         }
     },
     "all": "Kaikki",
diff --git a/app/src/i18n/locales/fr.json b/app/src/i18n/locales/fr.json
index c24bf0595..1dda9fb03 100644
--- a/app/src/i18n/locales/fr.json
+++ b/app/src/i18n/locales/fr.json
@@ -407,8 +407,7 @@
                 "reboot": "Votre serveur redémarre et ne sera pas joignable pendant un certain temps. Une invite de connexion sera disponible dès que le serveur sera accessible.",
                 "shutdown": "Votre serveur est en cours d'extinction et n'est plus joignable. Redémarrez-le et une invitation de connexion sera disponible dès que le serveur sera joignable.",
                 "upgrade_system": "La connexion avec le serveur a été fermée en raison de la mise à jour de YunoHost. Il vous faut patienter jusqu'à ce que le serveur soit à nouveau joignable…"
-            },
-            "success": "Le serveur est maintenant joignable ! Vous pouvez essayer de vous connecter"
+            }
         }
     },
     "go_back": "Revenir",
diff --git a/app/src/i18n/locales/gl.json b/app/src/i18n/locales/gl.json
index aa42112f9..ddb814a45 100644
--- a/app/src/i18n/locales/gl.json
+++ b/app/src/i18n/locales/gl.json
@@ -35,8 +35,7 @@
                 "reboot": "O servidor está reiniciando e non estará dispoñible por uns minutos. O formulario de conexión estará dispoñible tan pronto o servidor sexa accesible.",
                 "shutdown": "O servidor estase apagando e non está dispoñible. Acéndeo e o formulario de conexión estará dispoñible tan pronto o servidor sexa accesible.",
                 "upgrade_system": "Pechouse a conexión ao servidor debido á actualización de YunoHost. Agardando a que o servidor sexa accesible…"
-            },
-            "success": "O servidor está accesible! Podes intentar acceder"
+            }
         }
     },
     "all": "Todo",
diff --git a/app/src/i18n/locales/id.json b/app/src/i18n/locales/id.json
index 4f102c32f..8d02f9a83 100644
--- a/app/src/i18n/locales/id.json
+++ b/app/src/i18n/locales/id.json
@@ -28,8 +28,7 @@
                 "unknown": "Tidak dapat terhubung ke peladen karena alasan yang tidak diketahui."
             },
             "title": "Mencoba menghubungi peladen…",
-            "failed": "Sepertinya peladen tidak merespons. Anda bisa coba memuat ulang atau coba jalankan `systemctl restart yunohost-api` via SSH.",
-            "success": "Peladen bisa dicapai! Anda bisa mencoba masuk kembali"
+            "failed": "Sepertinya peladen tidak merespons. Anda bisa coba memuat ulang atau coba jalankan `systemctl restart yunohost-api` via SSH."
         },
         "partial_logs": "[…] (periksa semua log di dalam riwayat)"
     },
diff --git a/app/src/i18n/locales/it.json b/app/src/i18n/locales/it.json
index 3174de858..caf659d79 100644
--- a/app/src/i18n/locales/it.json
+++ b/app/src/i18n/locales/it.json
@@ -392,8 +392,7 @@
                 "unknown": "La connessione al server è stata interrotta per ragioni sconosciute.",
                 "reboot": "Il tuo server si sta riavviando e non sarà raggiungibile per un po'. Il prompt per il login sarà disponibile non appena il server diventerà raggiungibile.",
                 "upgrade_system": "La connessione al server è stata chiusa per un aggiornamento di YunoHost. Attendi che il server sia nuovamente raggiungibile…"
-            },
-            "success": "Il server è nuovamente raggiungibile! Puoi provare a fare il login"
+            }
         }
     },
     "address": {
diff --git a/app/src/i18n/locales/ja.json b/app/src/i18n/locales/ja.json
index e3f310366..aa828dd6a 100644
--- a/app/src/i18n/locales/ja.json
+++ b/app/src/i18n/locales/ja.json
@@ -30,7 +30,6 @@
                 "upgrade_system": "YunoHostのアップグレードのためサーバーとの接続が切断されました。サーバーが再度利用可能になるまでお待ちください…",
                 "reboot": "サーバーが再起動中のため、接続が途切れることがあります。再起動後、すぐにログイン画面が利用可能になります。"
             },
-            "success": "サーバーが利用可能になりました！ログインが可能です",
             "title": "サーバーと通信中…",
             "failed": "サーバーが応答していないようです。再接続するか、SSH経由で`systemctl restart yunohost-api`を実行してみてください。"
         }
diff --git a/app/src/i18n/locales/ko.json b/app/src/i18n/locales/ko.json
index 0827cd7bf..46ffee1e2 100644
--- a/app/src/i18n/locales/ko.json
+++ b/app/src/i18n/locales/ko.json
@@ -30,7 +30,6 @@
                 "unknown": "알 수 없는 이유로 서버와의 연결이 종료되었습니다.",
                 "upgrade_system": "YunoHost 업그레이드를 위해 서버와의 연결이 종료되었습니다. 다시 연결될 때까지 잠시 기다리세요…"
             },
-            "success": "서버와 연결되었습니다! 다시 로그인할 수 있습니다",
             "title": "서버와 통신중…",
             "failed": "서버가 응답하지 않는 것 같습니다. 다시 연결하거나 ssh를 통해 `systemctl restart yunohost-api` 명령을 실행하세요."
         }
diff --git a/app/src/i18n/locales/lt.json b/app/src/i18n/locales/lt.json
index bf6abb3d1..126a90358 100644
--- a/app/src/i18n/locales/lt.json
+++ b/app/src/i18n/locales/lt.json
@@ -19,7 +19,6 @@
                 "unknown": "Ryšys su serveriu nutrauktas dėl nežinomų priežasčių.",
                 "upgrade_system": "Ryšys su serveriu nutrauktas dėl YunoHost atnaujinimo. Laukiama, kol serveris vėl bus pasiekiamas…"
             },
-            "success": "Dabar serveris pasiekiamas! Galite pabandyti prisijungti",
             "title": "Bandoma susisiekti su serveriu…"
         },
         "processing": "Serveris apdoroja veiksmą…",
diff --git a/app/src/i18n/locales/nl.json b/app/src/i18n/locales/nl.json
index 3e899970a..33781316c 100644
--- a/app/src/i18n/locales/nl.json
+++ b/app/src/i18n/locales/nl.json
@@ -174,7 +174,6 @@
                 "reboot": "Je server is aan het herstarten en zal enige tijd niet bereikbaar zijn. Een login-prompt komt beschikbaar zodra de server terug is.",
                 "upgrade_system": "De verbinding met de server is gesloten vanwege een YunoHost upgrade. Wacht tot de server weer bereikbaar is…"
             },
-            "success": "De server is nu bereikbaar! Je kan proberen in te loggen",
             "title": "Poging met de server te communiceren…"
         }
     },
diff --git a/app/src/i18n/locales/oc.json b/app/src/i18n/locales/oc.json
index e34dbfde1..7388e1837 100644
--- a/app/src/i18n/locales/oc.json
+++ b/app/src/i18n/locales/oc.json
@@ -474,7 +474,6 @@
                 "shutdown": "Vòstre servidor es a s’aturar e serà pas mai contactable. Reaviatz-lo e una fenèstra de connexion serà disponibla tre que lo servidor serà contactable.",
                 "upgrade_system": "La connexion al servidor es estada tampada a causa de la mesa a nivèl de YunoHost. En espèra de poder contactar lo servidor de nòu…"
             },
-            "success": "Se pòt contactar lo servidor ! Podètz ensajar de vos connectar",
             "failed": "Lo servidor respond pas. Podètz ensajar de vos i tornar connectar o ensajar d’executar « systemctl restart yunohost-api » via SSH."
         }
     },
diff --git a/app/src/i18n/locales/pl.json b/app/src/i18n/locales/pl.json
index b77f92830..4677f0502 100644
--- a/app/src/i18n/locales/pl.json
+++ b/app/src/i18n/locales/pl.json
@@ -79,8 +79,7 @@
                 "reboot": "Serwer jest uruchamiany ponownie i będzie nieosiągalny przez pewien czas. Logowanie stanie się możliwe, gdy serwer będzie ponownie dostępny.",
                 "upgrade_system": "Połączenie z serwerem przerwane z powodu aktualizacji YunoHost. Trwa oczekiwanie na połączenie…"
             },
-            "title": "Trwa próba połączenia z serwerem…",
-            "success": "Serwer jest już dostępny! Możesz się zalogować"
+            "title": "Trwa próba połączenia z serwerem…"
         },
         "partial_logs": "[…] sprawdź w historii pełne logi"
     },
diff --git a/app/src/i18n/locales/pt.json b/app/src/i18n/locales/pt.json
index 4cc7e5d0f..6565d5a57 100644
--- a/app/src/i18n/locales/pt.json
+++ b/app/src/i18n/locales/pt.json
@@ -287,7 +287,6 @@
         "partial_logs": "[…] (verifique no histórico para logs completos)",
         "reconnecting": {
             "failed": "Parece que o servidor não está respondendo. Você pode tentar se reconectar novamente ou tentar executar `systemctl restart yunohost-api` através do ssh.",
-            "success": "O servidor agora está acessível! Você pode tentar fazer o login",
             "reason": {
                 "upgrade_system": "A conexão com o servidor foi encerrada devido à atualização do YunoHost. Esperando que o servidor esteja acessível novamente…",
                 "reboot": "Seu servidor está reiniciando e não estará acessível por algum tempo. Um prompt de login estará disponível assim que o servidor estiver acessível.",
diff --git a/app/src/i18n/locales/pt_BR.json b/app/src/i18n/locales/pt_BR.json
index a13437466..5baed16ed 100644
--- a/app/src/i18n/locales/pt_BR.json
+++ b/app/src/i18n/locales/pt_BR.json
@@ -28,8 +28,7 @@
                 "upgrade_system": "A conexão com o servidor foi encerrada devido a atualização do YunoHost. Aguardando a disponibilidade do servidor…",
                 "reboot": "Seu servidor está reiniciando e não poderá funcionar por algum tempo. A tela de login estará disponível assim que o servidor estiver online."
             },
-            "title": "Tentando se comunicar com o servidor…",
-            "success": "O servidor agora está online! Tente fazer login novamente"
+            "title": "Tentando se comunicar com o servidor…"
         }
     },
     "all_apps": "Todas as aplicações",
diff --git a/app/src/i18n/locales/ru.json b/app/src/i18n/locales/ru.json
index 850c4edc7..8dc5699f4 100644
--- a/app/src/i18n/locales/ru.json
+++ b/app/src/i18n/locales/ru.json
@@ -288,8 +288,7 @@
                 "reboot": "Ваш сервер перезагружается и будет недоступен некоторое время. Как только сервер будет доступен, появится приглашение к входу."
             },
             "failed": "Похоже, что сервер не отвечает. Вы можете попробовать подключиться снова или запустить `systemctl restart yunohost-api` через ssh.",
-            "title": "Пытаюсь установить связь с сервером…",
-            "success": "Сервер снова доступен! Попробуйте войти"
+            "title": "Пытаюсь установить связь с сервером…"
         }
     },
     "app_install_parameters": "Параметры установки",
diff --git a/app/src/i18n/locales/sk.json b/app/src/i18n/locales/sk.json
index 5a7a23d07..33f403ed3 100644
--- a/app/src/i18n/locales/sk.json
+++ b/app/src/i18n/locales/sk.json
@@ -29,7 +29,6 @@
                 "reboot": "Váš server sa reštartuje a nejaký čas nebude dostupný. Okno s prihlásením sa zobrazí akonáhle bude možné so serverom komunikovať.",
                 "upgrade_system": "Spojenie so serverom bolo ukončené kvôli aktualizácií YunoHost. Čakám, kým bude server opäť dostupný…"
             },
-            "success": "Server už je dostupný! Môžete sa skúsiť prihlásiť",
             "title": "Pokus o komunikáciu so serverom…"
         }
     },
diff --git a/app/src/i18n/locales/sl.json b/app/src/i18n/locales/sl.json
index 32b76c15d..2e0973de8 100644
--- a/app/src/i18n/locales/sl.json
+++ b/app/src/i18n/locales/sl.json
@@ -29,8 +29,7 @@
                 "shutdown": "Tvoj strežnik se ugaša in ni več dosegljiv. Ponovno ga vklopi in poziv za prijavo bo na razpolago takoj, ko bo strežnik dosegljiv."
             },
             "title": "Poskušam se povezati s strežnikom…",
-            "failed": "Videti je, da se strežnik ne odziva. Lahko se poskusiš ponovno povezati ali poskusi zagnati `systemctl restart yunohost-api` thru ssh.",
-            "success": "Strežnik je zdaj dosegljiv! Lahko se poskusiš vpisati"
+            "failed": "Videti je, da se strežnik ne odziva. Lahko se poskusiš ponovno povezati ali poskusi zagnati `systemctl restart yunohost-api` thru ssh."
         }
     },
     "api_error": {
diff --git a/app/src/i18n/locales/sv.json b/app/src/i18n/locales/sv.json
index b5a52e755..2e7d9ddbe 100644
--- a/app/src/i18n/locales/sv.json
+++ b/app/src/i18n/locales/sv.json
@@ -117,8 +117,7 @@
                 "reboot": "Din server håller på att starta om och kommer inte att kunna nås på ett tag. En inloggningsfråga kommer att finnas tillgänglig så snart servern är tillgänglig."
             },
             "failed": "Verkar som om servern inte svarar. Du kan försöka att återansluta eller försök köra `systemctl restart yunohost-api`genom ssh.",
-            "title": "Försöker kommunicera med servern…",
-            "success": "Servern är nu åtkomlig! Du kan försöka att logga in"
+            "title": "Försöker kommunicera med servern…"
         },
         "query_status": {
             "error": "Misslyckad",
diff --git a/app/src/i18n/locales/te.json b/app/src/i18n/locales/te.json
index 686bfc54c..00666a13d 100644
--- a/app/src/i18n/locales/te.json
+++ b/app/src/i18n/locales/te.json
@@ -27,7 +27,6 @@
                 "shutdown": "మీ సర్వర్ షట్ డౌన్ అవుతోంది మరియు ఇకపై చేరుకోలేరు. దానిని తిరిగి ఆన్ చేయండి. సర్వర్ చేరుకోగలిగిన వెంటనే లాగిన్ ప్రాంప్ట్ లభ్యం అవుతుంది.",
                 "upgrade_system": "YunoHost అప్ గ్రేడ్ కారణంగా సర్వర్తో కనెక్షన్ మూసివేయబడింది. సర్వర్ మళ్లీ చేరుకునే వరకు వేచి ఉంది…"
             },
-            "success": "సర్వర్ ఇప్పుడు చేరుకోవచ్చు! మీరు లాగిన్ చేయడానికి ప్రయత్నించవచ్చు",
             "title": "సర్వర్తో కమ్యూనికేట్ చేయడానికి ప్రయత్నిస్తోంది…",
             "failed": "సర్వర్ ప్రతిస్పందించడం లేదని కనిపిస్తోంది. మీరు మళ్లీ కనెక్ట్ చేయడానికి ప్రయత్నించవచ్చు లేదా ssh ద్వారా 'systemctl restart yunohost-api'ని రన్ చేయడానికి ప్రయత్నించవచ్చు."
         },
diff --git a/app/src/i18n/locales/tr.json b/app/src/i18n/locales/tr.json
index 19d1825d0..b81d23938 100644
--- a/app/src/i18n/locales/tr.json
+++ b/app/src/i18n/locales/tr.json
@@ -281,7 +281,6 @@
                 "upgrade_system": "YunoHost güncellemesi nedeniyle sunucuyla bağlantı kapatıldı. Sunucunun tekrar erişilebilir olması bekleniyor…",
                 "reboot": "Sunucunuz yeniden başlatılıyor ve bir süreliğine erişilemeyecek. Sunucu tekrar erişilebilir olduğunda bir oturum açma ekranı sunulacaktır."
             },
-            "success": "Sunucu artık erişilebilir durumda! Giriş yapabilirsiniz",
             "title": "Sunucuyla iletişim kurulmaya çalışılıyor…",
             "failed": "Sunucu yanıt vermiyor gibi görünüyor. Yeniden bağlanmayı deneyebilir veya ssh aracılığıyla `systemctl restart yunohost-api` çalıştırmayı deneyebilirsiniz."
         },
diff --git a/app/src/i18n/locales/uk.json b/app/src/i18n/locales/uk.json
index 13221ea38..0cfb3bec3 100644
--- a/app/src/i18n/locales/uk.json
+++ b/app/src/i18n/locales/uk.json
@@ -100,8 +100,7 @@
                 "shutdown": "Ваш сервер вимикається, і він більше не доступний. Увімкніть його знову, і запит на вхід з’явиться, щойно сервер стане доступним.",
                 "upgrade_system": "З'єднання з сервером було закрито через оновлення YunoHost. Очікуємо, поки сервер знову буде доступний…"
             },
-            "title": "Спробування зв'язатися з сервером…",
-            "success": "Тепер сервер доступний! Ви можете спробувати увійти"
+            "title": "Спробування зв'язатися з сервером…"
         }
     },
     "all": "Усе",
diff --git a/app/src/i18n/locales/zh_Hans.json b/app/src/i18n/locales/zh_Hans.json
index b0cbfda17..62842a5de 100644
--- a/app/src/i18n/locales/zh_Hans.json
+++ b/app/src/i18n/locales/zh_Hans.json
@@ -242,7 +242,6 @@
                 "upgrade_system": "由于 YunoHost 升级，与服务器的连接已关闭。正在等待服务器再次可访问…",
                 "shutdown": "您的服务器正在关闭并且无法再访问。请重新启机，当服务器可以访问时，登录提示将会出现。"
             },
-            "success": "服务器现在可以访问了！您可以尝试登录",
             "title": "正在尝试与服务器通信…"
         }
     },

From a9fa376ca80f1554431bd46231c8f48af51bf25a Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 12 Sep 2024 15:14:36 +0200
Subject: [PATCH 260/275] i18n: replace `{c}` with `{n}` for pluralization

---
 app/src/i18n/locales/ar.json      |  6 +++---
 app/src/i18n/locales/ca.json      | 18 +++++++++---------
 app/src/i18n/locales/cs.json      | 18 +++++++++---------
 app/src/i18n/locales/de.json      | 18 +++++++++---------
 app/src/i18n/locales/en.json      | 18 +++++++++---------
 app/src/i18n/locales/es.json      | 18 +++++++++---------
 app/src/i18n/locales/eu.json      | 18 +++++++++---------
 app/src/i18n/locales/fa.json      | 18 +++++++++---------
 app/src/i18n/locales/fi.json      | 18 +++++++++---------
 app/src/i18n/locales/fr.json      | 18 +++++++++---------
 app/src/i18n/locales/gl.json      | 18 +++++++++---------
 app/src/i18n/locales/id.json      | 18 +++++++++---------
 app/src/i18n/locales/it.json      | 18 +++++++++---------
 app/src/i18n/locales/ja.json      | 18 +++++++++---------
 app/src/i18n/locales/nl.json      | 18 +++++++++---------
 app/src/i18n/locales/oc.json      | 18 +++++++++---------
 app/src/i18n/locales/pl.json      | 18 +++++++++---------
 app/src/i18n/locales/pt.json      | 18 +++++++++---------
 app/src/i18n/locales/ru.json      | 18 +++++++++---------
 app/src/i18n/locales/sk.json      | 18 +++++++++---------
 app/src/i18n/locales/tr.json      | 18 +++++++++---------
 app/src/i18n/locales/uk.json      | 18 +++++++++---------
 app/src/i18n/locales/zh_Hans.json | 18 +++++++++---------
 23 files changed, 201 insertions(+), 201 deletions(-)

diff --git a/app/src/i18n/locales/ar.json b/app/src/i18n/locales/ar.json
index 666f62e0c..66616a13b 100644
--- a/app/src/i18n/locales/ar.json
+++ b/app/src/i18n/locales/ar.json
@@ -592,9 +592,9 @@
     "wrong_password_or_username": "اسم المستخدم أو كلمة المرور خاطئة",
     "app_manage_label_and_tiles": "إدارة الملصقات واللوحات",
     "items": {
-        "installed_apps": "لا توجد تطبيقات مثبّة | تطبيق مُنصّب | {c} تطبيقات مُنصّبة",
-        "apps": "لا تطبيق | تطبيق | {c} تطبيقات",
-        "users": "بدون مستخدم | مستخدم | {c} مستخدمين"
+        "installed_apps": "لا توجد تطبيقات مثبّة | تطبيق مُنصّب | {n} تطبيقات مُنصّبة",
+        "apps": "لا تطبيق | تطبيق | {n} تطبيقات",
+        "users": "بدون مستخدم | مستخدم | {n} مستخدمين"
     },
     "domain_dns_push_managed_in_parent_domain": "تتم إدارة ميزة سجلات DNS التلقائية في النطاق الرئيسي <a href='#/domains/{parent_domain}/dns'> {parent_domain} </a>.",
     "tip_about_user_email": "يتم إنشاء المستخدمين باستخدام عنوان بريد إلكتروني مرتبط (وحساب XMPP) بالشكل التالي username{'@'}domain.tld. يمكن لاحقا للمدير أو المستخدم إضافة أسماء مستعارة إضافية للبريد الإلكتروني وإعادة توجيهات للبريد الإلكتروني.",
diff --git a/app/src/i18n/locales/ca.json b/app/src/i18n/locales/ca.json
index cc4a28e22..cf9810981 100644
--- a/app/src/i18n/locales/ca.json
+++ b/app/src/i18n/locales/ca.json
@@ -257,15 +257,15 @@
     "permission_corresponding_url": "URL corresponent",
     "app_manage_label_and_tiles": "Gestionar etiquetes i «tiles»",
     "items": {
-        "backups": "cap còpia de seguretat | còpia de seguretat | {c} còpies de seguretat",
-        "apps": "cap aplicació | app | {c} aplicacions",
-        "installed_apps": "cap aplicació instal·lada | aplicació instal·lada | {c} aplicacions instal·lades",
-        "services": "cap servei | servei | {c} serveis",
-        "logs": "cap registre | registre | {c} registres",
-        "groups": "cap grup | grup | {c} grups",
-        "domains": "cap domini | domini | {c} dominis",
-        "users": "cap usuari | usuari | {c} usuaris",
-        "permissions": "cap permís | permís | {c} permisos"
+        "backups": "cap còpia de seguretat | còpia de seguretat | {n} còpies de seguretat",
+        "apps": "cap aplicació | app | {n} aplicacions",
+        "installed_apps": "cap aplicació instal·lada | aplicació instal·lada | {n} aplicacions instal·lades",
+        "services": "cap servei | servei | {n} serveis",
+        "logs": "cap registre | registre | {n} registres",
+        "groups": "cap grup | grup | {n} grups",
+        "domains": "cap domini | domini | {n} dominis",
+        "users": "cap usuari | usuari | {n} usuaris",
+        "permissions": "cap permís | permís | {n} permisos"
     },
     "history": {
         "methods": {
diff --git a/app/src/i18n/locales/cs.json b/app/src/i18n/locales/cs.json
index a5a67fee0..fe82ea7ec 100644
--- a/app/src/i18n/locales/cs.json
+++ b/app/src/i18n/locales/cs.json
@@ -359,15 +359,15 @@
     "items_verbose_items_left": "Zbývá {items} položek.",
     "items_verbose_count": "Počet položek {items}.",
     "items": {
-        "users": "žádní uživatelé | uživatel | {c} uživatelů",
-        "services": "žádné služby | služba | {c} služeb",
-        "permissions": "žádná oprávnění | oprávnění | {c} oprávnění",
-        "logs": "žádné záznamy | záznam | {c} záznamů",
-        "installed_apps": "žádné instalované aplikace | instalovaná aplikace | {c} instalovaných aplikací",
-        "groups": "žádná skupina | skupina | {c} skupin",
-        "domains": "žádné domény | doména | {c} domén",
-        "backups": "žádné zálohy | záloha | {c} záloh",
-        "apps": "žádné aplikace | aplikace | {c} aplikací"
+        "users": "žádní uživatelé | uživatel | {n} uživatelů",
+        "services": "žádné služby | služba | {n} služeb",
+        "permissions": "žádná oprávnění | oprávnění | {n} oprávnění",
+        "logs": "žádné záznamy | záznam | {n} záznamů",
+        "installed_apps": "žádné instalované aplikace | instalovaná aplikace | {n} instalovaných aplikací",
+        "groups": "žádná skupina | skupina | {n} skupin",
+        "domains": "žádné domény | doména | {n} domén",
+        "backups": "žádné zálohy | záloha | {n} záloh",
+        "apps": "žádné aplikace | aplikace | {n} aplikací"
     },
     "issues": "{count} chyb/problémů",
     "ipv6": "IPv6",
diff --git a/app/src/i18n/locales/de.json b/app/src/i18n/locales/de.json
index cbd467edd..bad7ca270 100644
--- a/app/src/i18n/locales/de.json
+++ b/app/src/i18n/locales/de.json
@@ -323,15 +323,15 @@
     "mailbox_quota_example": "700M ist eine CD, 4700M ist eine DVD",
     "items_verbose_count": "Es gibt {items}. | Es gibt 1 {items}. | Es gibt {items}.",
     "items": {
-        "users": "keine Konten | Konto | {c} Konten",
-        "services": "keine Dienste | Dienst | {c} Dienste",
-        "logs": "keine Protokolle | Protokoll | {c} Protokolle",
-        "installed_apps": "keine installierten Apps | installierte App | {c} installierte Apps",
-        "groups": "keine Gruppen | Gruppe | {c} Gruppen",
-        "domains": "keine Domänen | Domäne | {c} Domänen",
-        "backups": "keine Sicherungen | Sicherung| {c} Sicherungen",
-        "apps": "keine Apps | App | {c} Apps",
-        "permissions": "keine Berechtigungen | Berechtigung | {c} Berechtigungen"
+        "users": "keine Konten | Konto | {n} Konten",
+        "services": "keine Dienste | Dienst | {n} Dienste",
+        "logs": "keine Protokolle | Protokoll | {n} Protokolle",
+        "installed_apps": "keine installierten Apps | installierte App | {n} installierte Apps",
+        "groups": "keine Gruppen | Gruppe | {n} Gruppen",
+        "domains": "keine Domänen | Domäne | {n} Domänen",
+        "backups": "keine Sicherungen | Sicherung| {n} Sicherungen",
+        "apps": "keine Apps | App | {n} Apps",
+        "permissions": "keine Berechtigungen | Berechtigung | {n} Berechtigungen"
     },
     "history": {
         "methods": {
diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index 34b3ec7f4..55f5e0186 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -492,15 +492,15 @@
     "ipv6": "IPv6",
     "issues": "{count} issues",
     "items": {
-        "apps": "no apps | app | {c} apps",
-        "backups": "no backups | backup | {c} backups",
-        "domains": "no domains | domain | {c} domains",
-        "groups": "no groups | group | {c} groups",
-        "installed_apps": "no installed apps | installed app | {c} installed apps",
-        "logs": "no logs | log | {c} logs",
-        "permissions": "no permissions | permission | {c} permissions",
-        "services": "no services | service | {c} services",
-        "users": "no users | user | {c} users"
+        "apps": "no apps | app | {n} apps",
+        "backups": "no backups | backup | {n} backups",
+        "domains": "no domains | domain | {n} domains",
+        "groups": "no groups | group | {n} groups",
+        "installed_apps": "no installed apps | installed app | {n} installed apps",
+        "logs": "no logs | log | {n} logs",
+        "permissions": "no permissions | permission | {n} permissions",
+        "services": "no services | service | {n} services",
+        "users": "no users | user | {n} users"
     },
     "items_verbose_count": "There are {items}. | There is 1 {items}. | There are {items}.",
     "items_verbose_items_left": "There are {items} left. | There is 1 {items} left. | There are {items} left.",
diff --git a/app/src/i18n/locales/es.json b/app/src/i18n/locales/es.json
index 1d9108d7e..9a8fcbec8 100644
--- a/app/src/i18n/locales/es.json
+++ b/app/src/i18n/locales/es.json
@@ -361,15 +361,15 @@
     "hook_conf_ynh_settings": "Configuraciones de YunoHost",
     "confirm_group_add_access_permission": "¿Seguro que quieres conceder acceso {perm} a {name}? Este acceso incrementa significantemente la exposición a ataques al sistema si {name} resulta tener malas intenciones. Sólo deberías aprobarlo si CONFÍAS en esa persona/grupo.",
     "items": {
-        "services": "sin servicios | servicio | {c} servicios",
-        "users": "sin cuentas | cuenta | {c} cuentas",
-        "domains": "sin dominios | dominio | {c} dominios",
-        "installed_apps": "sin aplicaciones instaladas | aplicación instalada | {c} aplicaciones instaladas",
-        "apps": "sin aplicaciones | aplicación | {c} aplicaciones",
-        "permissions": "sin permisos | permiso | {c} permisos",
-        "groups": "sin grupos | grupo | {c} grupos",
-        "backups": "sin copias de seguridad | copia de seguridad | {c} copias de seguridad",
-        "logs": "sin registros | registro | {c} registros"
+        "services": "sin servicios | servicio | {n} servicios",
+        "users": "sin cuentas | cuenta | {n} cuentas",
+        "domains": "sin dominios | dominio | {n} dominios",
+        "installed_apps": "sin aplicaciones instaladas | aplicación instalada | {n} aplicaciones instaladas",
+        "apps": "sin aplicaciones | aplicación | {n} aplicaciones",
+        "permissions": "sin permisos | permiso | {n} permisos",
+        "groups": "sin grupos | grupo | {n} grupos",
+        "backups": "sin copias de seguridad | copia de seguridad | {n} copias de seguridad",
+        "logs": "sin registros | registro | {n} registros"
     },
     "migrations_disclaimer_check_message": "He leído y comprendido esta limitación de responsabilidad",
     "postinstall": {
diff --git a/app/src/i18n/locales/eu.json b/app/src/i18n/locales/eu.json
index 7a961aef7..a057427b8 100644
--- a/app/src/i18n/locales/eu.json
+++ b/app/src/i18n/locales/eu.json
@@ -88,15 +88,15 @@
         "appRepoUrl": "YunoHosten aplikazio-gordailuko URLek honako itxura daukate: https://domain.tld/path/to/repo_ynh"
     },
     "items": {
-        "backups": "babeskopia bat ere ez | babeskopia | {c} babeskopia",
-        "domains": "domeinu bat ere ez | domeinua | {c} domeinua",
-        "apps": "aplikazio bat ere ez | aplikazioa | {c} aplikazioa",
-        "groups": "talderik ez | taldea | {c} talde",
-        "installed_apps": "instalatutako aplikazio bat ere ez | instalatutako aplikazioa | {c} instalatutako aplikazioa",
-        "services": "zerbitzu bat ere ez | zerbitzua | {c} zerbitzua",
-        "users": "erabiltzaile bat ere ez | erabiltzailea | {c} erabiltzailea",
-        "logs": "erregistro bat ere ez | erregistroa | {c} erregistroa",
-        "permissions": "baimenik gabe | baimena | {c} baimen"
+        "backups": "babeskopia bat ere ez | babeskopia | {n} babeskopia",
+        "domains": "domeinu bat ere ez | domeinua | {n} domeinua",
+        "apps": "aplikazio bat ere ez | aplikazioa | {n} aplikazioa",
+        "groups": "talderik ez | taldea | {n} talde",
+        "installed_apps": "instalatutako aplikazio bat ere ez | instalatutako aplikazioa | {n} instalatutako aplikazioa",
+        "services": "zerbitzu bat ere ez | zerbitzua | {n} zerbitzua",
+        "users": "erabiltzaile bat ere ez | erabiltzailea | {n} erabiltzailea",
+        "logs": "erregistro bat ere ez | erregistroa | {n} erregistroa",
+        "permissions": "baimenik gabe | baimena | {n} baimen"
     },
     "history": {
         "title": "Historia",
diff --git a/app/src/i18n/locales/fa.json b/app/src/i18n/locales/fa.json
index 51878a865..288b55bd7 100644
--- a/app/src/i18n/locales/fa.json
+++ b/app/src/i18n/locales/fa.json
@@ -391,15 +391,15 @@
     "items_verbose_items_left": "{items} باقی مانده است.",
     "items_verbose_count": "{items} وجود دارد.",
     "items": {
-        "users": "بدون کاربر | کاربر | {c} کاربران",
-        "services": "بدون سرویس | سرویس | {c} سرویس ها",
-        "permissions": "بدون مجوز | اجازه | {c} مجوزها",
-        "logs": "بدون لاگ | لاگ | {c} لاگ ها",
-        "installed_apps": "بدون برنامه های نصب شده | برنامه نصب شده | {c} برنامه های نصب شده",
-        "groups": "بدون گروه | گروه | {c} گروه ها",
-        "domains": "بدون دامنه | دامنه | {c} دامنه ها",
-        "backups": "بدون پشتیبان گیری | پشتیبان گیری | {c} پشتیبان گیری",
-        "apps": "بدون برنامه | برنامه | {c} برنامه ها"
+        "users": "بدون کاربر | کاربر | {n} کاربران",
+        "services": "بدون سرویس | سرویس | {n} سرویس ها",
+        "permissions": "بدون مجوز | اجازه | {n} مجوزها",
+        "logs": "بدون لاگ | لاگ | {n} لاگ ها",
+        "installed_apps": "بدون برنامه های نصب شده | برنامه نصب شده | {n} برنامه های نصب شده",
+        "groups": "بدون گروه | گروه | {n} گروه ها",
+        "domains": "بدون دامنه | دامنه | {n} دامنه ها",
+        "backups": "بدون پشتیبان گیری | پشتیبان گیری | {n} پشتیبان گیری",
+        "apps": "بدون برنامه | برنامه | {n} برنامه ها"
     },
     "issues": "{count} مسائل",
     "installed": "نصب شد",
diff --git a/app/src/i18n/locales/fi.json b/app/src/i18n/locales/fi.json
index fea43ca3e..a710d77a7 100644
--- a/app/src/i18n/locales/fi.json
+++ b/app/src/i18n/locales/fi.json
@@ -200,15 +200,15 @@
     "installed": "Asennettu",
     "issues": "{count} ongelmaa",
     "items": {
-        "permissions": "ei oikeuksia | oikeus | {c} oikeutta",
-        "services": "ei palveluita | palvelu | {c} palvelua",
-        "apps": "ei sovelluksia | sovellus | {c} apps",
-        "backups": "ei varmuuskopioita | varmuuskopio | {c} varmuuskopiota",
-        "domains": "ei domaineja | domain | {c} domainia",
-        "groups": "ei ryhmiä | ryhmä | {c} ryhmiä",
-        "installed_apps": "ei asenettuja sovelluksia | asennettu sovellus | {c} asennettua sovellusta",
-        "logs": "ei logeja | logi | {c} logeja",
-        "users": "ei käyttäjiä | käyttäjä | {c} käyttäjää"
+        "permissions": "ei oikeuksia | oikeus | {n} oikeutta",
+        "services": "ei palveluita | palvelu | {n} palvelua",
+        "apps": "ei sovelluksia | sovellus | {n} apps",
+        "backups": "ei varmuuskopioita | varmuuskopio | {n} varmuuskopiota",
+        "domains": "ei domaineja | domain | {n} domainia",
+        "groups": "ei ryhmiä | ryhmä | {n} ryhmiä",
+        "installed_apps": "ei asenettuja sovelluksia | asennettu sovellus | {n} asennettua sovellusta",
+        "logs": "ei logeja | logi | {n} logeja",
+        "users": "ei käyttäjiä | käyttäjä | {n} käyttäjää"
     },
     "items_verbose_count": "On olemassa {items}. | On 1 {items}. | On {items}.",
     "items_verbose_items_left": "Jäljellä on {items}. | 1 {items} jäljellä. | {items} on jäljellä.",
diff --git a/app/src/i18n/locales/fr.json b/app/src/i18n/locales/fr.json
index 1dda9fb03..f6f9080d7 100644
--- a/app/src/i18n/locales/fr.json
+++ b/app/src/i18n/locales/fr.json
@@ -298,15 +298,15 @@
     "mailbox_quota_example": "700 M correspond à un CD, 4 700 M correspond à un DVD",
     "items_verbose_count": "Il n'y a {items}. | Il y a un {items}. | Il y a des {items}.",
     "items": {
-        "users": "aucun compte | compte | {c} comptes",
-        "services": "aucun service | service | {c} services",
-        "logs": "aucun historique/log | log | {c} logs",
-        "installed_apps": "aucune application installée | application installée | {c} applications installées",
-        "groups": "aucun groupe | groupe | {c} groupes",
-        "domains": "aucun domaine | domaine | {c} domaines",
-        "backups": "aucune sauvegarde | sauvegarde | {c} sauvegardes",
-        "apps": "aucune application | app | {c} apps",
-        "permissions": "pas d'autorisations | permission | {c} autorisations"
+        "users": "aucun compte | compte | {n} comptes",
+        "services": "aucun service | service | {n} services",
+        "logs": "aucun historique/log | log | {n} logs",
+        "installed_apps": "aucune application installée | application installée | {n} applications installées",
+        "groups": "aucun groupe | groupe | {n} groupes",
+        "domains": "aucun domaine | domaine | {n} domaines",
+        "backups": "aucune sauvegarde | sauvegarde | {n} sauvegardes",
+        "apps": "aucune application | app | {n} apps",
+        "permissions": "pas d'autorisations | permission | {n} autorisations"
     },
     "history": {
         "methods": {
diff --git a/app/src/i18n/locales/gl.json b/app/src/i18n/locales/gl.json
index ddb814a45..c301cea2b 100644
--- a/app/src/i18n/locales/gl.json
+++ b/app/src/i18n/locales/gl.json
@@ -186,15 +186,15 @@
     "domain_dns_config": "Configuración DNS",
     "domain_delete_forbidden_desc": "Non podes eliminar '{domain}' porque é o dominio por defecto, tes que elexir outro dominio (ou <a href='#/domains/add'>engadir un novo</a>) e configuralo como dominio por defecto antes de poder eliminar este.",
     "items": {
-        "groups": "sen grupos | grupo | {c} grupos",
-        "domains": "sen dominios | dominio | {c} dominios",
-        "backups": "0 copias | copia de apoio | {c} copias de apoio",
-        "apps": "sen apps | app | {c} apps",
-        "users": "sen usuarias | usuaria | {c} usuarias",
-        "services": "sen servizos | servizo | {c} servizos",
-        "permissions": "sen permisos | permiso | {c} permisos",
-        "logs": "sen rexistros | rexistro | {c} rexistros",
-        "installed_apps": "cero apps instaladas | app instalada | {c} apps instaladas"
+        "groups": "sen grupos | grupo | {n} grupos",
+        "domains": "sen dominios | dominio | {n} dominios",
+        "backups": "0 copias | copia de apoio | {n} copias de apoio",
+        "apps": "sen apps | app | {n} apps",
+        "users": "sen usuarias | usuaria | {n} usuarias",
+        "services": "sen servizos | servizo | {n} servizos",
+        "permissions": "sen permisos | permiso | {n} permisos",
+        "logs": "sen rexistros | rexistro | {n} rexistros",
+        "installed_apps": "cero apps instaladas | app instalada | {n} apps instaladas"
     },
     "issues": "{count} asuntos",
     "ipv6": "IPv6",
diff --git a/app/src/i18n/locales/id.json b/app/src/i18n/locales/id.json
index 8d02f9a83..4469b317a 100644
--- a/app/src/i18n/locales/id.json
+++ b/app/src/i18n/locales/id.json
@@ -601,15 +601,15 @@
     "hook_data_mail_desc": "Mentahan surel yang tersimpan di peladen",
     "id": "ID",
     "items": {
-        "services": "tidak ada layanan | layanan | {c} layanan",
-        "users": "tidak ada pengguna | pengguna | {c} pengguna",
-        "backups": "tidak ada cadangan | cadangan | {c} cadangan",
-        "logs": "tidak ada log | log | {c} log",
-        "permissions": "tidak ada perizinan | perizinan | {c} perizinan",
-        "apps": "tidak ada aplikasi | aplikasi | {c} aplikasi",
-        "domains": "tidak ada domain | domain | {c} domain",
-        "groups": "tidak ada kelompok | kelompok | {c} kelompok",
-        "installed_apps": "tidak ada aplikasi yang terpasang | aplikasi yang terpasang | {c} aplikasi yang terpasang"
+        "services": "tidak ada layanan | layanan | {n} layanan",
+        "users": "tidak ada pengguna | pengguna | {n} pengguna",
+        "backups": "tidak ada cadangan | cadangan | {n} cadangan",
+        "logs": "tidak ada log | log | {n} log",
+        "permissions": "tidak ada perizinan | perizinan | {n} perizinan",
+        "apps": "tidak ada aplikasi | aplikasi | {n} aplikasi",
+        "domains": "tidak ada domain | domain | {n} domain",
+        "groups": "tidak ada kelompok | kelompok | {n} kelompok",
+        "installed_apps": "tidak ada aplikasi yang terpasang | aplikasi yang terpasang | {n} aplikasi yang terpasang"
     },
     "migrations_no_pending": "Tidak ada migrasi yang tertunda",
     "orphaned_details": "Aplikasi ini sudah tidak dikelola beberapa lama. Mungkin masih bekerja, tapi tidak akan menerima pembaruan sampai orang lain mengelolanya. Silakan jika Anda mau untuk berkontribusi mengelolanya!",
diff --git a/app/src/i18n/locales/it.json b/app/src/i18n/locales/it.json
index caf659d79..8b6e4320f 100644
--- a/app/src/i18n/locales/it.json
+++ b/app/src/i18n/locales/it.json
@@ -293,15 +293,15 @@
     "mailbox_quota_example": "700MB è un CD, 4700M è un DVD",
     "items_verbose_count": "Ci sono {items}. | C’è 1 {items}. | Ci sono {items}.",
     "items": {
-        "users": "nessun utente | utente | {c} utenti",
-        "services": "nessun servizio | servizio | {c} servizi",
-        "logs": "nessun log | log | {c} logs",
-        "installed_apps": "nessun app installata | app installata | {c} apps installate",
-        "groups": "nessun gruppo | gruppo | {c} gruppi",
-        "domains": "nessun dominio | dominio | {c} domini",
-        "backups": "nessun backup | backup | {c} backups",
-        "apps": "nessuna app | app | {c} apps",
-        "permissions": "nessun permesso | permesso | {c} permessi"
+        "users": "nessun utente | utente | {n} utenti",
+        "services": "nessun servizio | servizio | {n} servizi",
+        "logs": "nessun log | log | {n} logs",
+        "installed_apps": "nessun app installata | app installata | {n} apps installate",
+        "groups": "nessun gruppo | gruppo | {n} gruppi",
+        "domains": "nessun dominio | dominio | {n} domini",
+        "backups": "nessun backup | backup | {n} backups",
+        "apps": "nessuna app | app | {n} apps",
+        "permissions": "nessun permesso | permesso | {n} permessi"
     },
     "history": {
         "methods": {
diff --git a/app/src/i18n/locales/ja.json b/app/src/i18n/locales/ja.json
index aa828dd6a..ff5d14172 100644
--- a/app/src/i18n/locales/ja.json
+++ b/app/src/i18n/locales/ja.json
@@ -624,15 +624,15 @@
     "hook_data_xmpp_desc": "ルームとユーザーの設定、ファイルのアップロード",
     "important_yunohost_upgrade": "YunoHostのメジャーアップグレードが利用可能です。アップグレードする前に、フォーラムのリリースノートを注意深く読むことを強くお勧めします: フォーラムの<a href='https://forum.yunohost.org/tag/ynh_release'>リリースノートを閲覧</a>",
     "items": {
-        "apps": "アプリなし | アプリ | {c} 個のアプリ",
-        "backups": "バックアップなし | バックアップ | {c} 個のバックアップ",
-        "domains": "ドメインなし | ドメイン | {c} 個のドメイン",
-        "groups": "グループなし | グループ | {c} 個のグループ",
-        "installed_apps": "インストール済アプリなし | インストール済アプリ | {c} 個のインストール済アプリ",
-        "logs": "ログなし | ログ | {c} 個のログ",
-        "permissions": "権限なし | 権限 | {c} 個の権限",
-        "services": "サービスなし | サービス | {c} 個のサービス",
-        "users": "ユーザーなし | ユーザー | {c} 人のユーザー"
+        "apps": "アプリなし | アプリ | {n} 個のアプリ",
+        "backups": "バックアップなし | バックアップ | {n} 個のバックアップ",
+        "domains": "ドメインなし | ドメイン | {n} 個のドメイン",
+        "groups": "グループなし | グループ | {n} 個のグループ",
+        "installed_apps": "インストール済アプリなし | インストール済アプリ | {n} 個のインストール済アプリ",
+        "logs": "ログなし | ログ | {n} 個のログ",
+        "permissions": "権限なし | 権限 | {n} 個の権限",
+        "services": "サービスなし | サービス | {n} 個のサービス",
+        "users": "ユーザーなし | ユーザー | {n} 人のユーザー"
     },
     "mailbox_quota_description": "メールのストレージサイズ制限を設定します。<br>無効にするには 0 を設定します。",
     "perform": "実行する",
diff --git a/app/src/i18n/locales/nl.json b/app/src/i18n/locales/nl.json
index 33781316c..e9837e421 100644
--- a/app/src/i18n/locales/nl.json
+++ b/app/src/i18n/locales/nl.json
@@ -507,15 +507,15 @@
         "is_empty": "Niets in geschiedenis op dit moment."
     },
     "items": {
-        "apps": "geen apps | app | {c} apps",
-        "logs": "geen logs | log | {c} logs",
-        "permissions": "geen privileges | privilege | {c} privilege",
-        "services": "geen diensten | dienst | {c} diensten",
-        "backups": "geen backups | backup | {c} backups",
-        "groups": "geen groepen | groep | {c} groepen",
-        "domains": "geen domein | domein | {c} domeins",
-        "users": "geen gebruikers | gebruiker | {c} gebruikers",
-        "installed_apps": "geen geïnstalleerde apps | geïnstalleerde app | {c} geïnstalleerde apps"
+        "apps": "geen apps | app | {n} apps",
+        "logs": "geen logs | log | {n} logs",
+        "permissions": "geen privileges | privilege | {n} privilege",
+        "services": "geen diensten | dienst | {n} diensten",
+        "backups": "geen backups | backup | {n} backups",
+        "groups": "geen groepen | groep | {n} groepen",
+        "domains": "geen domein | domein | {n} domeins",
+        "users": "geen gebruikers | gebruiker | {n} gebruikers",
+        "installed_apps": "geen geïnstalleerde apps | geïnstalleerde app | {n} geïnstalleerde apps"
     },
     "hook_data_xmpp_desc": "Kamer en gebruiker configuraties, geüploade bestanden",
     "ignored": "{count} genegeerd",
diff --git a/app/src/i18n/locales/oc.json b/app/src/i18n/locales/oc.json
index 7388e1837..fba40d625 100644
--- a/app/src/i18n/locales/oc.json
+++ b/app/src/i18n/locales/oc.json
@@ -374,15 +374,15 @@
     "items_verbose_items_left": "Demòran {items}. | Demòra {items}. | Demòran {items}.",
     "items_verbose_count": "I a {items}. | I a {items}. |I a {items}.",
     "items": {
-        "users": "cap d’utilizaire | utilizaire | {c} utilizaires",
-        "services": "cap de servici | servici | {c} servicis",
-        "installed_apps": "cap d’aplicacion pas installada | aplicacion installada | {c} aplicacions installadas",
-        "groups": "cap de grop | grop | {c} grops",
-        "domains": "cap de domeni | domeni | {c} domenis",
-        "backups": "cap de salvagarda | salvagarda | {c} salvagardas",
-        "apps": "cap d’aplicacion | app | {c} aplicacions",
-        "permissions": "cap de permission | permission | {c} permissions",
-        "logs": "cap de jornal| jornal | {c} jornals"
+        "users": "cap d’utilizaire | utilizaire | {n} utilizaires",
+        "services": "cap de servici | servici | {n} servicis",
+        "installed_apps": "cap d’aplicacion pas installada | aplicacion installada | {n} aplicacions installadas",
+        "groups": "cap de grop | grop | {n} grops",
+        "domains": "cap de domeni | domeni | {n} domenis",
+        "backups": "cap de salvagarda | salvagarda | {n} salvagardas",
+        "apps": "cap d’aplicacion | app | {n} aplicacions",
+        "permissions": "cap de permission | permission | {n} permissions",
+        "logs": "cap de jornal| jornal | {n} jornals"
     },
     "hook_data_xmpp": "Donadas XMPP",
     "hook_conf_manually_modified_files": "Fichièr de configuracion modificat manualament",
diff --git a/app/src/i18n/locales/pl.json b/app/src/i18n/locales/pl.json
index 4677f0502..b2ee6cde8 100644
--- a/app/src/i18n/locales/pl.json
+++ b/app/src/i18n/locales/pl.json
@@ -260,15 +260,15 @@
     "group_specific_permissions": "Indywidualne uprawnienia użytkownika",
     "installed": "Zainstalowano",
     "items": {
-        "permissions": "brak uprawnień | uprawnienie | {c} uprawnień",
-        "logs": "brak logów | log | {c} logów",
-        "services": "brak usług | usługa | {c} usług",
-        "users": "brak użytkowników | użytkownik | {c} użytkowników",
-        "apps": "brak aplikacji | aplikacja | {c} aplikacji",
-        "backups": "brak kopii zapasowych | kopia zapasowa | {c} kopii zapasowych",
-        "domains": "brak domen | domena | {c} domen",
-        "groups": "brak grup | grupa | {c} grup",
-        "installed_apps": "brak zainstalowanych aplikacji | zainstalowana aplikacja | {c} zainstalowanych aplikacji"
+        "permissions": "brak uprawnień | uprawnienie | {n} uprawnień",
+        "logs": "brak logów | log | {n} logów",
+        "services": "brak usług | usługa | {n} usług",
+        "users": "brak użytkowników | użytkownik | {n} użytkowników",
+        "apps": "brak aplikacji | aplikacja | {n} aplikacji",
+        "backups": "brak kopii zapasowych | kopia zapasowa | {n} kopii zapasowych",
+        "domains": "brak domen | domena | {n} domen",
+        "groups": "brak grup | grupa | {n} grup",
+        "installed_apps": "brak zainstalowanych aplikacji | zainstalowana aplikacja | {n} zainstalowanych aplikacji"
     },
     "infos": "Info",
     "hook_conf_ynh_settings": "Konfiguracja YunoHost",
diff --git a/app/src/i18n/locales/pt.json b/app/src/i18n/locales/pt.json
index 6565d5a57..6140ec99a 100644
--- a/app/src/i18n/locales/pt.json
+++ b/app/src/i18n/locales/pt.json
@@ -159,15 +159,15 @@
     "items_verbose_items_left": "Faltam {items}.",
     "items_verbose_count": "Não há {items}. | Existe 1 {items}. | Existem {items}.",
     "items": {
-        "users": "nenhum usuário | usuário | {c} usuários",
-        "services": "nenhum serviço | serviço | {c} serviços",
-        "permissions": "nenhuma permissão | permissão | {c} permissões",
-        "logs": "sem logs | log | {c} logs",
-        "installed_apps": "nenhum app instalado | app instalado | {c} apps instalados",
-        "groups": "nenhum grupo | grupo | {c} grupos",
-        "domains": "nenhum domínio | domínio | {c} domínios",
-        "backups": "nenhum backup | backup | {c} backups",
-        "apps": "nenhum app | spp | {c} apps"
+        "users": "nenhum usuário | usuário | {n} usuários",
+        "services": "nenhum serviço | serviço | {n} serviços",
+        "permissions": "nenhuma permissão | permissão | {n} permissões",
+        "logs": "sem logs | log | {n} logs",
+        "installed_apps": "nenhum app instalado | app instalado | {n} apps instalados",
+        "groups": "nenhum grupo | grupo | {n} grupos",
+        "domains": "nenhum domínio | domínio | {n} domínios",
+        "backups": "nenhum backup | backup | {n} backups",
+        "apps": "nenhum app | spp | {n} apps"
     },
     "issues": "{count} problemas",
     "ignored": "{count} ignorado",
diff --git a/app/src/i18n/locales/ru.json b/app/src/i18n/locales/ru.json
index 8dc5699f4..88bf3155d 100644
--- a/app/src/i18n/locales/ru.json
+++ b/app/src/i18n/locales/ru.json
@@ -548,15 +548,15 @@
     "pending_migrations": "Есть несколько незавершенных миграций, ожидающих запуска. Пожалуйста, перейдите в раздел <a href='#/tools/migrations'>Инструменты > Миграции</a>, чтобы запустить их.",
     "text_selection_is_disabled": "Выделение текста отключено. Если вы хотите поделиться этим журналом, пожалуйста, поделитесь *полным* журналом с помощью кнопки 'Share with Yunopaste'.<br/><small>Или если вы действительно очень хотите выделить текст, нажмите эти клавиши: ↓↓↑↑.</small>",
     "items": {
-        "apps": "нет приложений | приложение | {c} приложений",
-        "backups": "нет резервных копий | резервное копирование | {c} резервных копий",
-        "domains": "нет доменов | домен | {c} доменов",
-        "logs": "нет журналов | журнал | {c} журнала(ов)",
-        "services": "нет сервисов | сервис | {c} сервисов(а)",
-        "permissions": "нет разрешений | разрешение | {c} разрешения(ий)",
-        "groups": "нет групп | группа | {c} группы",
-        "installed_apps": "нет установленных приложений | установленное приложение | {c} установленные приложения",
-        "users": "нет пользователей | пользователь | {c} пользователи"
+        "apps": "нет приложений | приложение | {n} приложений",
+        "backups": "нет резервных копий | резервное копирование | {n} резервных копий",
+        "domains": "нет доменов | домен | {n} доменов",
+        "logs": "нет журналов | журнал | {n} журнала(ов)",
+        "services": "нет сервисов | сервис | {n} сервисов(а)",
+        "permissions": "нет разрешений | разрешение | {n} разрешения(ий)",
+        "groups": "нет групп | группа | {n} группы",
+        "installed_apps": "нет установленных приложений | установленное приложение | {n} установленные приложения",
+        "users": "нет пользователей | пользователь | {n} пользователи"
     },
     "postinstall": {
         "force": "Принудительная пост-установка",
diff --git a/app/src/i18n/locales/sk.json b/app/src/i18n/locales/sk.json
index 33f403ed3..cabe3c99c 100644
--- a/app/src/i18n/locales/sk.json
+++ b/app/src/i18n/locales/sk.json
@@ -281,15 +281,15 @@
     "ipv6": "IPv6",
     "issues": "{count} chýb",
     "items": {
-        "backups": "žiadne zálohy | záloha | {c} záloh",
-        "domains": "žiadne domény | doména | {c} domén",
-        "groups": "žiadna skupina | skupina | {c} skupín",
-        "logs": "žiadne záznamy | záznam | {c} záznamov",
-        "services": "žiadne služby | služba | {c} služby",
-        "users": "žiadni používatelia | používateľ | {c} používateľov",
-        "apps": "žiadne aplikácie | aplikácia | {c} aplikácií",
-        "installed_apps": "žiadne nainštalované aplikácie | nainštalovaná aplikácia | {c} nainštalovaných aplikácií",
-        "permissions": "žiadne oprávnenia | oprávnenie | {c} oprávnení"
+        "backups": "žiadne zálohy | záloha | {n} záloh",
+        "domains": "žiadne domény | doména | {n} domén",
+        "groups": "žiadna skupina | skupina | {n} skupín",
+        "logs": "žiadne záznamy | záznam | {n} záznamov",
+        "services": "žiadne služby | služba | {n} služby",
+        "users": "žiadni používatelia | používateľ | {n} používateľov",
+        "apps": "žiadne aplikácie | aplikácia | {n} aplikácií",
+        "installed_apps": "žiadne nainštalované aplikácie | nainštalovaná aplikácia | {n} nainštalovaných aplikácií",
+        "permissions": "žiadne oprávnenia | oprávnenie | {n} oprávnení"
     },
     "items_verbose_items_left": "Zostáva {items} položiek.",
     "label": "Názov",
diff --git a/app/src/i18n/locales/tr.json b/app/src/i18n/locales/tr.json
index b81d23938..482cd109e 100644
--- a/app/src/i18n/locales/tr.json
+++ b/app/src/i18n/locales/tr.json
@@ -86,15 +86,15 @@
     "groups_and_permissions": "Gruplar ve izinler",
     "ignore": "Göz ardı et",
     "items": {
-        "groups": "grup yok | grup | {c} grup",
-        "domains": "alan adı yok | alan adı | {c} alan adı",
-        "installed_apps": "yüklenmiş uygulama yok | yüklenmiş uygulama | {c} yüklenmiş uygulama",
-        "permissions": "izin yok | izin | {c} izin",
-        "apps": "uygulama yok | uygulama | {c} uygulama",
-        "backups": "yedek yok | yedek | {c} yedek",
-        "logs": "günlük yok | günlük | {c} günlük",
-        "services": "servis yok | servis | {c} servis",
-        "users": "kullanıcı yok | kullanıcı | {c} kullanıcı"
+        "groups": "grup yok | grup | {n} grup",
+        "domains": "alan adı yok | alan adı | {n} alan adı",
+        "installed_apps": "yüklenmiş uygulama yok | yüklenmiş uygulama | {n} yüklenmiş uygulama",
+        "permissions": "izin yok | izin | {n} izin",
+        "apps": "uygulama yok | uygulama | {n} uygulama",
+        "backups": "yedek yok | yedek | {n} yedek",
+        "logs": "günlük yok | günlük | {n} günlük",
+        "services": "servis yok | servis | {n} servis",
+        "users": "kullanıcı yok | kullanıcı | {n} kullanıcı"
     },
     "run_first_diagnosis": "İlk tanılamayı çalıştır",
     "begin": "Başla",
diff --git a/app/src/i18n/locales/uk.json b/app/src/i18n/locales/uk.json
index 0cfb3bec3..dc3539539 100644
--- a/app/src/i18n/locales/uk.json
+++ b/app/src/i18n/locales/uk.json
@@ -222,15 +222,15 @@
     "ipv6": "IPv6",
     "issues": "{count} проблем",
     "items": {
-        "apps": "немає застосунків | застосунок | {c} застосунків",
-        "backups": "немає резервних копій | резервна копія | {c} резервних копій",
-        "domains": "немає доменів | домен | {c} доменів",
-        "groups": "немає груп | група | {c} групи",
-        "installed_apps": "немає встановлених застосунків | установлений застосунок | {c} установлених застосунків",
-        "logs": "немає журналів | журнал | {c} журналів",
-        "permissions": "немає дозволів | дозвіл | {c} дозволів",
-        "services": "немає служб | служба | {c} служб",
-        "users": "немає користувачів | користувач | {c} користувачів"
+        "apps": "немає застосунків | застосунок | {n} застосунків",
+        "backups": "немає резервних копій | резервна копія | {n} резервних копій",
+        "domains": "немає доменів | домен | {n} доменів",
+        "groups": "немає груп | група | {n} групи",
+        "installed_apps": "немає встановлених застосунків | установлений застосунок | {n} установлених застосунків",
+        "logs": "немає журналів | журнал | {n} журналів",
+        "permissions": "немає дозволів | дозвіл | {n} дозволів",
+        "services": "немає служб | служба | {n} служб",
+        "users": "немає користувачів | користувач | {n} користувачів"
     },
     "items_verbose_count": "Наявно {items}. | Наявний 1 {items}. | Наявно {items}.",
     "items_verbose_items_left": "Лишилося {items}. | Лишився 1 {items}. | Лишилося {items}.",
diff --git a/app/src/i18n/locales/zh_Hans.json b/app/src/i18n/locales/zh_Hans.json
index 62842a5de..f76136f65 100644
--- a/app/src/i18n/locales/zh_Hans.json
+++ b/app/src/i18n/locales/zh_Hans.json
@@ -247,15 +247,15 @@
     },
     "ignored": "{count} 已忽略",
     "items": {
-        "installed_apps": "没有已安装应用 | 已安装应用 | {c} 个已安装应用",
-        "groups": "没有群组 | 群组 | {c} 个群组",
-        "domains": "没有域 | 域 | {c} 个域",
-        "backups": "没有备份 | 备份 | {c} 份备份",
-        "apps": "没有应用 | 应用 | {c} 个应用",
-        "users": "没有用户 | 用户 | {c} 个用户",
-        "services": "没有服务 | 服务 | {c} 个服务",
-        "permissions": "没有权限 | 权限 | {c} 个权限",
-        "logs": "没有日志 | 日志 | {c} 个日志"
+        "installed_apps": "没有已安装应用 | 已安装应用 | {n} 个已安装应用",
+        "groups": "没有群组 | 群组 | {n} 个群组",
+        "domains": "没有域 | 域 | {n} 个域",
+        "backups": "没有备份 | 备份 | {n} 份备份",
+        "apps": "没有应用 | 应用 | {n} 个应用",
+        "users": "没有用户 | 用户 | {n} 个用户",
+        "services": "没有服务 | 服务 | {n} 个服务",
+        "permissions": "没有权限 | 权限 | {n} 个权限",
+        "logs": "没有日志 | 日志 | {n} 个日志"
     },
     "issues": "{count} 个问题",
     "label_for_manifestname": "{name} 的标签",

From 2be0d28e529271aa52945cfb909e25cd4319672c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 13 Sep 2024 09:19:36 +0200
Subject: [PATCH 261/275] refactor(DomainForm): get all domains cert status
 instead of invidual calls

---
 app/src/types/core/api.ts              | 13 ++++++++++++-
 app/src/types/core/data.ts             | 12 ++----------
 app/src/views/_partials/DomainForm.vue | 20 +++++++++-----------
 3 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index f860e2167..3b88fd8c1 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -1,4 +1,4 @@
-import type { Obj, Translation } from '@/types/commons'
+import type { Obj, StateVariant, Translation } from '@/types/commons'
 import type { Permission } from '@/types/core/data'
 import type { AnyOption } from '@/types/core/options'
 
@@ -330,3 +330,14 @@ export type DNSCategories = Record<
   'create' | 'update' | 'delete' | 'unchanged',
   DNSRecord[]
 >
+
+export type Certificate = {
+  subject: string
+  CA_name: string
+  CA_type: 'selfsigned' | 'letsencrypt' | 'other'
+  validity: number
+  style: Exclude<StateVariant, 'info'>
+  summary: string // enum
+  ACME_eligible: boolean
+  has_wildcards: boolean
+}
diff --git a/app/src/types/core/data.ts b/app/src/types/core/data.ts
index 63097c7ee..e3561ec08 100644
--- a/app/src/types/core/data.ts
+++ b/app/src/types/core/data.ts
@@ -1,4 +1,4 @@
-import type { StateVariant } from '@/types/commons'
+import type { Certificate } from '@/types/core/api'
 
 export type UserItem = {
   username: string
@@ -30,15 +30,7 @@ export type Group = {
   permissions: string[]
 }
 export type DomainDetail = {
-  certificate: {
-    subject: string
-    CA_name: string
-    CA_type: 'selfsigned' | 'letsencrypt' | 'other'
-    validity: number
-    style: Exclude<StateVariant, 'info'>
-    summary: string // enum
-    ACME_eligible: boolean
-  }
+  certificate: Certificate
   registrar: string // or null ?
   apps: { name: string; id: string; path: string }[]
   main: boolean
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 1ee7b6cf4..610f299bf 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n'
 import api from '@/api'
 import { useDomains } from '@/composables/data'
 import { useForm } from '@/composables/form'
+import { fromEntries, toEntries } from '@/helpers/commons'
 import {
   domain,
   dynDomain,
@@ -13,6 +14,8 @@ import {
   sameAs,
 } from '@/helpers/validators'
 import { formatFormValue } from '@/helpers/yunohostArguments'
+import type { Obj } from '@/types/commons'
+import type { Certificate } from '@/types/core/api'
 import type { AdressModelValue, FieldProps, FormFieldDict } from '@/types/form'
 
 defineOptions({
@@ -51,17 +54,12 @@ const { domains, domainsAsChoices } = !props.postinstall
   : { domains: ref([] as string[]), domainsAsChoices: ref([] as string[]) }
 const domainsCertsReady: Record<string, boolean> = !props.postinstall
   ? await api
-      .fetchAll(
-        domains.value.map((domain) => ({ uri: `domains/${domain}/cert?full` })),
-      )
-      .then((certs) => {
-        return certs.reduce(
-          (acc, cert, i) => {
-            const domain = domains.value[i]
-            acc[domain] = cert.certificates[domain].has_wildcards
-            return acc
-          },
-          {} as Record<string, boolean>,
+      .get<{ certificates: Obj<Certificate> }>({ uri: `domains/*/cert?full` })
+      .then(({ certificates }) => {
+        return fromEntries(
+          toEntries(certificates).map(([domain, cert]) => {
+            return [domain, cert.has_wildcards]
+          }),
         )
       })
   : {}

From cc3f8c429f3d5b267a8dc593405315a0d7327259 Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Sun, 15 Sep 2024 11:47:07 +0200
Subject: [PATCH 262/275] i18n: TOS precisions

Co-authored-by: Alexandre Aubin <4533074+alexAubin@users.noreply.github.com>
---
 app/src/i18n/locales/en.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index e102c8a6c..002444417 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -327,7 +327,7 @@
         "documentation": "Documentation",
         "donate": "Donate",
         "help": "Need help?",
-        "tos": "Terms of Service"
+        "tos": "Terms of Services"
     },
     "footer_version": "Powered by <a href='https://yunohost.org'>YunoHost</a> {version} ({repo}).",
     "form": {
@@ -654,8 +654,8 @@
     "tos": {
         "acknowledgement": "TOS acknowledgement",
         "i_agree": "I agree",
-        "i_have_read": "I have read the <a href='https://yunohost.org/terms_of_services' target='_blank'>Terms of service</a>",
-        "postinstall_acknowledgement": "The YunoHost project is a team of volunteers who have made common cause to create a free operating system for servers, called YunoHost. YunoHost is published under the [GNU Affero General Public License v3](https://www.gnu.org/licenses/agpl-3.0.txt).  In connection with this software, the project administers and makes available several technical and community services for various purposes.  By using these services, you agree to be bound by the following [Terms of service](https://yunohost.org/terms_of_services)."
+        "i_have_read": "I have read and understand the <a href='https://yunohost.org/terms_of_services' target='_blank'>Terms of Services</a>",
+        "postinstall_acknowledgement": "The YunoHost project is a team of volunteers who have made common cause to create a free operating system for servers, called YunoHost. The YunoHost software is published under [the AGPLv3 license](https://www.gnu.org/licenses/agpl-3.0.txt). In connection with this software, the project administers and makes available several technical and community services for various purposes. By using these services, you agree to be bound by the following [Terms of Services](https://yunohost.org/terms_of_services)."
     },
     "traceback": "Traceback",
     "udp": "UDP",

From fa53aff280a2d88b42d164f7d50acd26282682ef Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 15 Sep 2024 16:17:43 +0200
Subject: [PATCH 263/275] feat: display domain auto dns not configured if
 option is activated

---
 app/src/views/domain/DomainDns.vue  | 10 +++++++++-
 app/src/views/domain/DomainInfo.vue |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index 8a28997cf..31bc7d93f 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -17,6 +17,7 @@ type DNSError = { icon: string; variant: StateVariant; message: string }
 
 const props = defineProps<{
   name: string
+  autoDns: boolean
 }>()
 
 const { t } = useI18n()
@@ -95,6 +96,13 @@ function getDnsChanges() {
       } else if (key === 'domain_dns_push_failed_to_authenticate') {
         const message = t(key, err.data)
         dnsErrors.value = [{ icon: 'ban', variant: 'danger', message }]
+      } else if (
+        key === 'domain_registrar_is_not_configured' &&
+        props.autoDns
+      ) {
+        dnsErrors.value = [
+          { icon: 'ban', variant: 'danger', message: err.data.error },
+        ]
       } else {
         showManualConfigCard.value = true
         showAutoConfigCard.value = false
@@ -192,7 +200,7 @@ async function pushDnsChanges() {
 
       <!-- CONFIG OK ALERT -->
       <ReadOnlyAlertItem
-        v-else-if="dnsChanges === null"
+        v-else-if="dnsChanges === null && !dnsErrors.length"
         :label="$t('domain.dns.auto_config_ok')"
         type="success"
         icon="thumbs-up"
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 643e3b4c9..25c648668 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -226,7 +226,7 @@ async function setAsDefaultDomain() {
       @apply="config.onPanelApply"
     >
       <template v-if="tabId === 'dns'" #tab-after>
-        <DomainDns :name="name" />
+        <DomainDns :name="name" :auto-dns="config.form.value.use_auto_dns" />
       </template>
     </ConfigPanelsComponent>
 

From 07bdfd08be7ead3098de9667540e4096ad9d6012 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 15 Sep 2024 16:18:23 +0200
Subject: [PATCH 264/275] fix: do not display manual dns card if domain is
 special tld

---
 app/src/views/domain/DomainDns.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index 31bc7d93f..e89ea383c 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -104,7 +104,7 @@ function getDnsChanges() {
           { icon: 'ban', variant: 'danger', message: err.data.error },
         ]
       } else {
-        showManualConfigCard.value = true
+        showManualConfigCard.value = key !== 'domain_dns_conf_special_use_tld'
         showAutoConfigCard.value = false
       }
     })

From 6ef1d11b1f235f96d07469b900c8ddbf327de6c5 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 15 Sep 2024 17:30:28 +0200
Subject: [PATCH 265/275] i18n: remove count info in `items`

---
 app/src/i18n/locales/ar.json      |  6 +++---
 app/src/i18n/locales/ca.json      | 18 +++++++++---------
 app/src/i18n/locales/cs.json      | 18 +++++++++---------
 app/src/i18n/locales/de.json      | 18 +++++++++---------
 app/src/i18n/locales/en.json      | 18 +++++++++---------
 app/src/i18n/locales/es.json      | 18 +++++++++---------
 app/src/i18n/locales/eu.json      | 18 +++++++++---------
 app/src/i18n/locales/fa.json      | 18 +++++++++---------
 app/src/i18n/locales/fi.json      | 18 +++++++++---------
 app/src/i18n/locales/fr.json      | 18 +++++++++---------
 app/src/i18n/locales/gl.json      | 18 +++++++++---------
 app/src/i18n/locales/id.json      | 18 +++++++++---------
 app/src/i18n/locales/it.json      | 18 +++++++++---------
 app/src/i18n/locales/ja.json      | 18 +++++++++---------
 app/src/i18n/locales/nl.json      | 18 +++++++++---------
 app/src/i18n/locales/oc.json      | 18 +++++++++---------
 app/src/i18n/locales/pl.json      | 18 +++++++++---------
 app/src/i18n/locales/pt.json      | 18 +++++++++---------
 app/src/i18n/locales/ru.json      | 18 +++++++++---------
 app/src/i18n/locales/sk.json      | 18 +++++++++---------
 app/src/i18n/locales/tr.json      | 18 +++++++++---------
 app/src/i18n/locales/uk.json      | 18 +++++++++---------
 app/src/i18n/locales/zh_Hans.json | 18 +++++++++---------
 23 files changed, 201 insertions(+), 201 deletions(-)

diff --git a/app/src/i18n/locales/ar.json b/app/src/i18n/locales/ar.json
index 66616a13b..4c4645912 100644
--- a/app/src/i18n/locales/ar.json
+++ b/app/src/i18n/locales/ar.json
@@ -592,9 +592,9 @@
     "wrong_password_or_username": "اسم المستخدم أو كلمة المرور خاطئة",
     "app_manage_label_and_tiles": "إدارة الملصقات واللوحات",
     "items": {
-        "installed_apps": "لا توجد تطبيقات مثبّة | تطبيق مُنصّب | {n} تطبيقات مُنصّبة",
-        "apps": "لا تطبيق | تطبيق | {n} تطبيقات",
-        "users": "بدون مستخدم | مستخدم | {n} مستخدمين"
+        "installed_apps": "لا توجد تطبيقات مثبّة | تطبيق مُنصّب | تطبيقات مُنصّبة",
+        "apps": "لا تطبيق | تطبيق | تطبيقات",
+        "users": "بدون مستخدم | مستخدم | مستخدمين"
     },
     "domain_dns_push_managed_in_parent_domain": "تتم إدارة ميزة سجلات DNS التلقائية في النطاق الرئيسي <a href='#/domains/{parent_domain}/dns'> {parent_domain} </a>.",
     "tip_about_user_email": "يتم إنشاء المستخدمين باستخدام عنوان بريد إلكتروني مرتبط (وحساب XMPP) بالشكل التالي username{'@'}domain.tld. يمكن لاحقا للمدير أو المستخدم إضافة أسماء مستعارة إضافية للبريد الإلكتروني وإعادة توجيهات للبريد الإلكتروني.",
diff --git a/app/src/i18n/locales/ca.json b/app/src/i18n/locales/ca.json
index cf9810981..7d0a8b5bc 100644
--- a/app/src/i18n/locales/ca.json
+++ b/app/src/i18n/locales/ca.json
@@ -257,15 +257,15 @@
     "permission_corresponding_url": "URL corresponent",
     "app_manage_label_and_tiles": "Gestionar etiquetes i «tiles»",
     "items": {
-        "backups": "cap còpia de seguretat | còpia de seguretat | {n} còpies de seguretat",
-        "apps": "cap aplicació | app | {n} aplicacions",
-        "installed_apps": "cap aplicació instal·lada | aplicació instal·lada | {n} aplicacions instal·lades",
-        "services": "cap servei | servei | {n} serveis",
-        "logs": "cap registre | registre | {n} registres",
-        "groups": "cap grup | grup | {n} grups",
-        "domains": "cap domini | domini | {n} dominis",
-        "users": "cap usuari | usuari | {n} usuaris",
-        "permissions": "cap permís | permís | {n} permisos"
+        "backups": "cap còpia de seguretat | còpia de seguretat | còpies de seguretat",
+        "apps": "cap aplicació | app | aplicacions",
+        "installed_apps": "cap aplicació instal·lada | aplicació instal·lada | aplicacions instal·lades",
+        "services": "cap servei | servei | serveis",
+        "logs": "cap registre | registre | registres",
+        "groups": "cap grup | grup | grups",
+        "domains": "cap domini | domini | dominis",
+        "users": "cap usuari | usuari | usuaris",
+        "permissions": "cap permís | permís | permisos"
     },
     "history": {
         "methods": {
diff --git a/app/src/i18n/locales/cs.json b/app/src/i18n/locales/cs.json
index fe82ea7ec..94c6b7cc8 100644
--- a/app/src/i18n/locales/cs.json
+++ b/app/src/i18n/locales/cs.json
@@ -359,15 +359,15 @@
     "items_verbose_items_left": "Zbývá {items} položek.",
     "items_verbose_count": "Počet položek {items}.",
     "items": {
-        "users": "žádní uživatelé | uživatel | {n} uživatelů",
-        "services": "žádné služby | služba | {n} služeb",
-        "permissions": "žádná oprávnění | oprávnění | {n} oprávnění",
-        "logs": "žádné záznamy | záznam | {n} záznamů",
-        "installed_apps": "žádné instalované aplikace | instalovaná aplikace | {n} instalovaných aplikací",
-        "groups": "žádná skupina | skupina | {n} skupin",
-        "domains": "žádné domény | doména | {n} domén",
-        "backups": "žádné zálohy | záloha | {n} záloh",
-        "apps": "žádné aplikace | aplikace | {n} aplikací"
+        "users": "žádní uživatelé | uživatel | uživatelů",
+        "services": "žádné služby | služba | služeb",
+        "permissions": "žádná oprávnění | oprávnění | oprávnění",
+        "logs": "žádné záznamy | záznam | záznamů",
+        "installed_apps": "žádné instalované aplikace | instalovaná aplikace | instalovaných aplikací",
+        "groups": "žádná skupina | skupina | skupin",
+        "domains": "žádné domény | doména | domén",
+        "backups": "žádné zálohy | záloha | záloh",
+        "apps": "žádné aplikace | aplikace | aplikací"
     },
     "issues": "{count} chyb/problémů",
     "ipv6": "IPv6",
diff --git a/app/src/i18n/locales/de.json b/app/src/i18n/locales/de.json
index bad7ca270..abc4ba8cc 100644
--- a/app/src/i18n/locales/de.json
+++ b/app/src/i18n/locales/de.json
@@ -323,15 +323,15 @@
     "mailbox_quota_example": "700M ist eine CD, 4700M ist eine DVD",
     "items_verbose_count": "Es gibt {items}. | Es gibt 1 {items}. | Es gibt {items}.",
     "items": {
-        "users": "keine Konten | Konto | {n} Konten",
-        "services": "keine Dienste | Dienst | {n} Dienste",
-        "logs": "keine Protokolle | Protokoll | {n} Protokolle",
-        "installed_apps": "keine installierten Apps | installierte App | {n} installierte Apps",
-        "groups": "keine Gruppen | Gruppe | {n} Gruppen",
-        "domains": "keine Domänen | Domäne | {n} Domänen",
-        "backups": "keine Sicherungen | Sicherung| {n} Sicherungen",
-        "apps": "keine Apps | App | {n} Apps",
-        "permissions": "keine Berechtigungen | Berechtigung | {n} Berechtigungen"
+        "users": "keine Konten | Konto | Konten",
+        "services": "keine Dienste | Dienst | Dienste",
+        "logs": "keine Protokolle | Protokoll | Protokolle",
+        "installed_apps": "keine installierten Apps | installierte App | installierte Apps",
+        "groups": "keine Gruppen | Gruppe | Gruppen",
+        "domains": "keine Domänen | Domäne | Domänen",
+        "backups": "keine Sicherungen | Sicherung| Sicherungen",
+        "apps": "keine Apps | App | Apps",
+        "permissions": "keine Berechtigungen | Berechtigung | Berechtigungen"
     },
     "history": {
         "methods": {
diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index 55f5e0186..a2ab7df66 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -492,15 +492,15 @@
     "ipv6": "IPv6",
     "issues": "{count} issues",
     "items": {
-        "apps": "no apps | app | {n} apps",
-        "backups": "no backups | backup | {n} backups",
-        "domains": "no domains | domain | {n} domains",
-        "groups": "no groups | group | {n} groups",
-        "installed_apps": "no installed apps | installed app | {n} installed apps",
-        "logs": "no logs | log | {n} logs",
-        "permissions": "no permissions | permission | {n} permissions",
-        "services": "no services | service | {n} services",
-        "users": "no users | user | {n} users"
+        "apps": "no apps | app | apps",
+        "backups": "no backups | backup | backups",
+        "domains": "no domains | domain | domains",
+        "groups": "no groups | group | groups",
+        "installed_apps": "no installed apps | installed app | installed apps",
+        "logs": "no logs | log | logs",
+        "permissions": "no permissions | permission | permissions",
+        "services": "no services | service | services",
+        "users": "no users | user | users"
     },
     "items_verbose_count": "There are {items}. | There is 1 {items}. | There are {items}.",
     "items_verbose_items_left": "There are {items} left. | There is 1 {items} left. | There are {items} left.",
diff --git a/app/src/i18n/locales/es.json b/app/src/i18n/locales/es.json
index 9a8fcbec8..f3469e81e 100644
--- a/app/src/i18n/locales/es.json
+++ b/app/src/i18n/locales/es.json
@@ -361,15 +361,15 @@
     "hook_conf_ynh_settings": "Configuraciones de YunoHost",
     "confirm_group_add_access_permission": "¿Seguro que quieres conceder acceso {perm} a {name}? Este acceso incrementa significantemente la exposición a ataques al sistema si {name} resulta tener malas intenciones. Sólo deberías aprobarlo si CONFÍAS en esa persona/grupo.",
     "items": {
-        "services": "sin servicios | servicio | {n} servicios",
-        "users": "sin cuentas | cuenta | {n} cuentas",
-        "domains": "sin dominios | dominio | {n} dominios",
-        "installed_apps": "sin aplicaciones instaladas | aplicación instalada | {n} aplicaciones instaladas",
-        "apps": "sin aplicaciones | aplicación | {n} aplicaciones",
-        "permissions": "sin permisos | permiso | {n} permisos",
-        "groups": "sin grupos | grupo | {n} grupos",
-        "backups": "sin copias de seguridad | copia de seguridad | {n} copias de seguridad",
-        "logs": "sin registros | registro | {n} registros"
+        "services": "sin servicios | servicio | servicios",
+        "users": "sin cuentas | cuenta | cuentas",
+        "domains": "sin dominios | dominio | dominios",
+        "installed_apps": "sin aplicaciones instaladas | aplicación instalada | aplicaciones instaladas",
+        "apps": "sin aplicaciones | aplicación | aplicaciones",
+        "permissions": "sin permisos | permiso | permisos",
+        "groups": "sin grupos | grupo | grupos",
+        "backups": "sin copias de seguridad | copia de seguridad | copias de seguridad",
+        "logs": "sin registros | registro | registros"
     },
     "migrations_disclaimer_check_message": "He leído y comprendido esta limitación de responsabilidad",
     "postinstall": {
diff --git a/app/src/i18n/locales/eu.json b/app/src/i18n/locales/eu.json
index a057427b8..d3ace92c4 100644
--- a/app/src/i18n/locales/eu.json
+++ b/app/src/i18n/locales/eu.json
@@ -88,15 +88,15 @@
         "appRepoUrl": "YunoHosten aplikazio-gordailuko URLek honako itxura daukate: https://domain.tld/path/to/repo_ynh"
     },
     "items": {
-        "backups": "babeskopia bat ere ez | babeskopia | {n} babeskopia",
-        "domains": "domeinu bat ere ez | domeinua | {n} domeinua",
-        "apps": "aplikazio bat ere ez | aplikazioa | {n} aplikazioa",
-        "groups": "talderik ez | taldea | {n} talde",
-        "installed_apps": "instalatutako aplikazio bat ere ez | instalatutako aplikazioa | {n} instalatutako aplikazioa",
-        "services": "zerbitzu bat ere ez | zerbitzua | {n} zerbitzua",
-        "users": "erabiltzaile bat ere ez | erabiltzailea | {n} erabiltzailea",
-        "logs": "erregistro bat ere ez | erregistroa | {n} erregistroa",
-        "permissions": "baimenik gabe | baimena | {n} baimen"
+        "backups": "babeskopia bat ere ez | babeskopia | babeskopia",
+        "domains": "domeinu bat ere ez | domeinua | domeinua",
+        "apps": "aplikazio bat ere ez | aplikazioa | aplikazioa",
+        "groups": "talderik ez | taldea | talde",
+        "installed_apps": "instalatutako aplikazio bat ere ez | instalatutako aplikazioa | instalatutako aplikazioa",
+        "services": "zerbitzu bat ere ez | zerbitzua | zerbitzua",
+        "users": "erabiltzaile bat ere ez | erabiltzailea | erabiltzailea",
+        "logs": "erregistro bat ere ez | erregistroa | erregistroa",
+        "permissions": "baimenik gabe | baimena | baimen"
     },
     "history": {
         "title": "Historia",
diff --git a/app/src/i18n/locales/fa.json b/app/src/i18n/locales/fa.json
index 288b55bd7..e39b5a295 100644
--- a/app/src/i18n/locales/fa.json
+++ b/app/src/i18n/locales/fa.json
@@ -391,15 +391,15 @@
     "items_verbose_items_left": "{items} باقی مانده است.",
     "items_verbose_count": "{items} وجود دارد.",
     "items": {
-        "users": "بدون کاربر | کاربر | {n} کاربران",
-        "services": "بدون سرویس | سرویس | {n} سرویس ها",
-        "permissions": "بدون مجوز | اجازه | {n} مجوزها",
-        "logs": "بدون لاگ | لاگ | {n} لاگ ها",
-        "installed_apps": "بدون برنامه های نصب شده | برنامه نصب شده | {n} برنامه های نصب شده",
-        "groups": "بدون گروه | گروه | {n} گروه ها",
-        "domains": "بدون دامنه | دامنه | {n} دامنه ها",
-        "backups": "بدون پشتیبان گیری | پشتیبان گیری | {n} پشتیبان گیری",
-        "apps": "بدون برنامه | برنامه | {n} برنامه ها"
+        "users": "بدون کاربر | کاربر | کاربران",
+        "services": "بدون سرویس | سرویس | سرویس ها",
+        "permissions": "بدون مجوز | اجازه | مجوزها",
+        "logs": "بدون لاگ | لاگ | لاگ ها",
+        "installed_apps": "بدون برنامه های نصب شده | برنامه نصب شده | برنامه های نصب شده",
+        "groups": "بدون گروه | گروه | گروه ها",
+        "domains": "بدون دامنه | دامنه | دامنه ها",
+        "backups": "بدون پشتیبان گیری | پشتیبان گیری | پشتیبان گیری",
+        "apps": "بدون برنامه | برنامه | برنامه ها"
     },
     "issues": "{count} مسائل",
     "installed": "نصب شد",
diff --git a/app/src/i18n/locales/fi.json b/app/src/i18n/locales/fi.json
index a710d77a7..3e8631f70 100644
--- a/app/src/i18n/locales/fi.json
+++ b/app/src/i18n/locales/fi.json
@@ -200,15 +200,15 @@
     "installed": "Asennettu",
     "issues": "{count} ongelmaa",
     "items": {
-        "permissions": "ei oikeuksia | oikeus | {n} oikeutta",
-        "services": "ei palveluita | palvelu | {n} palvelua",
-        "apps": "ei sovelluksia | sovellus | {n} apps",
-        "backups": "ei varmuuskopioita | varmuuskopio | {n} varmuuskopiota",
-        "domains": "ei domaineja | domain | {n} domainia",
-        "groups": "ei ryhmiä | ryhmä | {n} ryhmiä",
-        "installed_apps": "ei asenettuja sovelluksia | asennettu sovellus | {n} asennettua sovellusta",
-        "logs": "ei logeja | logi | {n} logeja",
-        "users": "ei käyttäjiä | käyttäjä | {n} käyttäjää"
+        "permissions": "ei oikeuksia | oikeus | oikeutta",
+        "services": "ei palveluita | palvelu | palvelua",
+        "apps": "ei sovelluksia | sovellus | apps",
+        "backups": "ei varmuuskopioita | varmuuskopio | varmuuskopiota",
+        "domains": "ei domaineja | domain | domainia",
+        "groups": "ei ryhmiä | ryhmä | ryhmiä",
+        "installed_apps": "ei asenettuja sovelluksia | asennettu sovellus | asennettua sovellusta",
+        "logs": "ei logeja | logi | logeja",
+        "users": "ei käyttäjiä | käyttäjä | käyttäjää"
     },
     "items_verbose_count": "On olemassa {items}. | On 1 {items}. | On {items}.",
     "items_verbose_items_left": "Jäljellä on {items}. | 1 {items} jäljellä. | {items} on jäljellä.",
diff --git a/app/src/i18n/locales/fr.json b/app/src/i18n/locales/fr.json
index f6f9080d7..efacdd9da 100644
--- a/app/src/i18n/locales/fr.json
+++ b/app/src/i18n/locales/fr.json
@@ -298,15 +298,15 @@
     "mailbox_quota_example": "700 M correspond à un CD, 4 700 M correspond à un DVD",
     "items_verbose_count": "Il n'y a {items}. | Il y a un {items}. | Il y a des {items}.",
     "items": {
-        "users": "aucun compte | compte | {n} comptes",
-        "services": "aucun service | service | {n} services",
-        "logs": "aucun historique/log | log | {n} logs",
-        "installed_apps": "aucune application installée | application installée | {n} applications installées",
-        "groups": "aucun groupe | groupe | {n} groupes",
-        "domains": "aucun domaine | domaine | {n} domaines",
-        "backups": "aucune sauvegarde | sauvegarde | {n} sauvegardes",
-        "apps": "aucune application | app | {n} apps",
-        "permissions": "pas d'autorisations | permission | {n} autorisations"
+        "users": "aucun compte | compte | comptes",
+        "services": "aucun service | service | services",
+        "logs": "aucun historique/log | log | logs",
+        "installed_apps": "aucune application installée | application installée | applications installées",
+        "groups": "aucun groupe | groupe | groupes",
+        "domains": "aucun domaine | domaine | domaines",
+        "backups": "aucune sauvegarde | sauvegarde | sauvegardes",
+        "apps": "aucune application | app | apps",
+        "permissions": "pas d'autorisations | permission | autorisations"
     },
     "history": {
         "methods": {
diff --git a/app/src/i18n/locales/gl.json b/app/src/i18n/locales/gl.json
index c301cea2b..6b925c7ed 100644
--- a/app/src/i18n/locales/gl.json
+++ b/app/src/i18n/locales/gl.json
@@ -186,15 +186,15 @@
     "domain_dns_config": "Configuración DNS",
     "domain_delete_forbidden_desc": "Non podes eliminar '{domain}' porque é o dominio por defecto, tes que elexir outro dominio (ou <a href='#/domains/add'>engadir un novo</a>) e configuralo como dominio por defecto antes de poder eliminar este.",
     "items": {
-        "groups": "sen grupos | grupo | {n} grupos",
-        "domains": "sen dominios | dominio | {n} dominios",
-        "backups": "0 copias | copia de apoio | {n} copias de apoio",
-        "apps": "sen apps | app | {n} apps",
-        "users": "sen usuarias | usuaria | {n} usuarias",
-        "services": "sen servizos | servizo | {n} servizos",
-        "permissions": "sen permisos | permiso | {n} permisos",
-        "logs": "sen rexistros | rexistro | {n} rexistros",
-        "installed_apps": "cero apps instaladas | app instalada | {n} apps instaladas"
+        "groups": "sen grupos | grupo | grupos",
+        "domains": "sen dominios | dominio | dominios",
+        "backups": "0 copias | copia de apoio | copias de apoio",
+        "apps": "sen apps | app | apps",
+        "users": "sen usuarias | usuaria | usuarias",
+        "services": "sen servizos | servizo | servizos",
+        "permissions": "sen permisos | permiso | permisos",
+        "logs": "sen rexistros | rexistro | rexistros",
+        "installed_apps": "cero apps instaladas | app instalada | apps instaladas"
     },
     "issues": "{count} asuntos",
     "ipv6": "IPv6",
diff --git a/app/src/i18n/locales/id.json b/app/src/i18n/locales/id.json
index 4469b317a..e135073c4 100644
--- a/app/src/i18n/locales/id.json
+++ b/app/src/i18n/locales/id.json
@@ -601,15 +601,15 @@
     "hook_data_mail_desc": "Mentahan surel yang tersimpan di peladen",
     "id": "ID",
     "items": {
-        "services": "tidak ada layanan | layanan | {n} layanan",
-        "users": "tidak ada pengguna | pengguna | {n} pengguna",
-        "backups": "tidak ada cadangan | cadangan | {n} cadangan",
-        "logs": "tidak ada log | log | {n} log",
-        "permissions": "tidak ada perizinan | perizinan | {n} perizinan",
-        "apps": "tidak ada aplikasi | aplikasi | {n} aplikasi",
-        "domains": "tidak ada domain | domain | {n} domain",
-        "groups": "tidak ada kelompok | kelompok | {n} kelompok",
-        "installed_apps": "tidak ada aplikasi yang terpasang | aplikasi yang terpasang | {n} aplikasi yang terpasang"
+        "services": "tidak ada layanan | layanan | layanan",
+        "users": "tidak ada pengguna | pengguna | pengguna",
+        "backups": "tidak ada cadangan | cadangan | cadangan",
+        "logs": "tidak ada log | log | log",
+        "permissions": "tidak ada perizinan | perizinan | perizinan",
+        "apps": "tidak ada aplikasi | aplikasi | aplikasi",
+        "domains": "tidak ada domain | domain | domain",
+        "groups": "tidak ada kelompok | kelompok | kelompok",
+        "installed_apps": "tidak ada aplikasi yang terpasang | aplikasi yang terpasang | aplikasi yang terpasang"
     },
     "migrations_no_pending": "Tidak ada migrasi yang tertunda",
     "orphaned_details": "Aplikasi ini sudah tidak dikelola beberapa lama. Mungkin masih bekerja, tapi tidak akan menerima pembaruan sampai orang lain mengelolanya. Silakan jika Anda mau untuk berkontribusi mengelolanya!",
diff --git a/app/src/i18n/locales/it.json b/app/src/i18n/locales/it.json
index 8b6e4320f..134e9e4fc 100644
--- a/app/src/i18n/locales/it.json
+++ b/app/src/i18n/locales/it.json
@@ -293,15 +293,15 @@
     "mailbox_quota_example": "700MB è un CD, 4700M è un DVD",
     "items_verbose_count": "Ci sono {items}. | C’è 1 {items}. | Ci sono {items}.",
     "items": {
-        "users": "nessun utente | utente | {n} utenti",
-        "services": "nessun servizio | servizio | {n} servizi",
-        "logs": "nessun log | log | {n} logs",
-        "installed_apps": "nessun app installata | app installata | {n} apps installate",
-        "groups": "nessun gruppo | gruppo | {n} gruppi",
-        "domains": "nessun dominio | dominio | {n} domini",
-        "backups": "nessun backup | backup | {n} backups",
-        "apps": "nessuna app | app | {n} apps",
-        "permissions": "nessun permesso | permesso | {n} permessi"
+        "users": "nessun utente | utente | utenti",
+        "services": "nessun servizio | servizio | servizi",
+        "logs": "nessun log | log | logs",
+        "installed_apps": "nessun app installata | app installata | apps installate",
+        "groups": "nessun gruppo | gruppo | gruppi",
+        "domains": "nessun dominio | dominio | domini",
+        "backups": "nessun backup | backup | backups",
+        "apps": "nessuna app | app | apps",
+        "permissions": "nessun permesso | permesso | permessi"
     },
     "history": {
         "methods": {
diff --git a/app/src/i18n/locales/ja.json b/app/src/i18n/locales/ja.json
index ff5d14172..7995b337b 100644
--- a/app/src/i18n/locales/ja.json
+++ b/app/src/i18n/locales/ja.json
@@ -624,15 +624,15 @@
     "hook_data_xmpp_desc": "ルームとユーザーの設定、ファイルのアップロード",
     "important_yunohost_upgrade": "YunoHostのメジャーアップグレードが利用可能です。アップグレードする前に、フォーラムのリリースノートを注意深く読むことを強くお勧めします: フォーラムの<a href='https://forum.yunohost.org/tag/ynh_release'>リリースノートを閲覧</a>",
     "items": {
-        "apps": "アプリなし | アプリ | {n} 個のアプリ",
-        "backups": "バックアップなし | バックアップ | {n} 個のバックアップ",
-        "domains": "ドメインなし | ドメイン | {n} 個のドメイン",
-        "groups": "グループなし | グループ | {n} 個のグループ",
-        "installed_apps": "インストール済アプリなし | インストール済アプリ | {n} 個のインストール済アプリ",
-        "logs": "ログなし | ログ | {n} 個のログ",
-        "permissions": "権限なし | 権限 | {n} 個の権限",
-        "services": "サービスなし | サービス | {n} 個のサービス",
-        "users": "ユーザーなし | ユーザー | {n} 人のユーザー"
+        "apps": "アプリなし | アプリ | 個のアプリ",
+        "backups": "バックアップなし | バックアップ | 個のバックアップ",
+        "domains": "ドメインなし | ドメイン | 個のドメイン",
+        "groups": "グループなし | グループ | 個のグループ",
+        "installed_apps": "インストール済アプリなし | インストール済アプリ | 個のインストール済アプリ",
+        "logs": "ログなし | ログ | 個のログ",
+        "permissions": "権限なし | 権限 | 個の権限",
+        "services": "サービスなし | サービス | 個のサービス",
+        "users": "ユーザーなし | ユーザー | 人のユーザー"
     },
     "mailbox_quota_description": "メールのストレージサイズ制限を設定します。<br>無効にするには 0 を設定します。",
     "perform": "実行する",
diff --git a/app/src/i18n/locales/nl.json b/app/src/i18n/locales/nl.json
index e9837e421..385de91a3 100644
--- a/app/src/i18n/locales/nl.json
+++ b/app/src/i18n/locales/nl.json
@@ -507,15 +507,15 @@
         "is_empty": "Niets in geschiedenis op dit moment."
     },
     "items": {
-        "apps": "geen apps | app | {n} apps",
-        "logs": "geen logs | log | {n} logs",
-        "permissions": "geen privileges | privilege | {n} privilege",
-        "services": "geen diensten | dienst | {n} diensten",
-        "backups": "geen backups | backup | {n} backups",
-        "groups": "geen groepen | groep | {n} groepen",
-        "domains": "geen domein | domein | {n} domeins",
-        "users": "geen gebruikers | gebruiker | {n} gebruikers",
-        "installed_apps": "geen geïnstalleerde apps | geïnstalleerde app | {n} geïnstalleerde apps"
+        "apps": "geen apps | app | apps",
+        "logs": "geen logs | log | logs",
+        "permissions": "geen privileges | privilege | privilege",
+        "services": "geen diensten | dienst | diensten",
+        "backups": "geen backups | backup | backups",
+        "groups": "geen groepen | groep | groepen",
+        "domains": "geen domein | domein | domeins",
+        "users": "geen gebruikers | gebruiker | gebruikers",
+        "installed_apps": "geen geïnstalleerde apps | geïnstalleerde app | geïnstalleerde apps"
     },
     "hook_data_xmpp_desc": "Kamer en gebruiker configuraties, geüploade bestanden",
     "ignored": "{count} genegeerd",
diff --git a/app/src/i18n/locales/oc.json b/app/src/i18n/locales/oc.json
index fba40d625..b3be66280 100644
--- a/app/src/i18n/locales/oc.json
+++ b/app/src/i18n/locales/oc.json
@@ -374,15 +374,15 @@
     "items_verbose_items_left": "Demòran {items}. | Demòra {items}. | Demòran {items}.",
     "items_verbose_count": "I a {items}. | I a {items}. |I a {items}.",
     "items": {
-        "users": "cap d’utilizaire | utilizaire | {n} utilizaires",
-        "services": "cap de servici | servici | {n} servicis",
-        "installed_apps": "cap d’aplicacion pas installada | aplicacion installada | {n} aplicacions installadas",
-        "groups": "cap de grop | grop | {n} grops",
-        "domains": "cap de domeni | domeni | {n} domenis",
-        "backups": "cap de salvagarda | salvagarda | {n} salvagardas",
-        "apps": "cap d’aplicacion | app | {n} aplicacions",
-        "permissions": "cap de permission | permission | {n} permissions",
-        "logs": "cap de jornal| jornal | {n} jornals"
+        "users": "cap d’utilizaire | utilizaire | utilizaires",
+        "services": "cap de servici | servici | servicis",
+        "installed_apps": "cap d’aplicacion pas installada | aplicacion installada | aplicacions installadas",
+        "groups": "cap de grop | grop | grops",
+        "domains": "cap de domeni | domeni | domenis",
+        "backups": "cap de salvagarda | salvagarda | salvagardas",
+        "apps": "cap d’aplicacion | app | aplicacions",
+        "permissions": "cap de permission | permission | permissions",
+        "logs": "cap de jornal| jornal | jornals"
     },
     "hook_data_xmpp": "Donadas XMPP",
     "hook_conf_manually_modified_files": "Fichièr de configuracion modificat manualament",
diff --git a/app/src/i18n/locales/pl.json b/app/src/i18n/locales/pl.json
index b2ee6cde8..32a7993c4 100644
--- a/app/src/i18n/locales/pl.json
+++ b/app/src/i18n/locales/pl.json
@@ -260,15 +260,15 @@
     "group_specific_permissions": "Indywidualne uprawnienia użytkownika",
     "installed": "Zainstalowano",
     "items": {
-        "permissions": "brak uprawnień | uprawnienie | {n} uprawnień",
-        "logs": "brak logów | log | {n} logów",
-        "services": "brak usług | usługa | {n} usług",
-        "users": "brak użytkowników | użytkownik | {n} użytkowników",
-        "apps": "brak aplikacji | aplikacja | {n} aplikacji",
-        "backups": "brak kopii zapasowych | kopia zapasowa | {n} kopii zapasowych",
-        "domains": "brak domen | domena | {n} domen",
-        "groups": "brak grup | grupa | {n} grup",
-        "installed_apps": "brak zainstalowanych aplikacji | zainstalowana aplikacja | {n} zainstalowanych aplikacji"
+        "permissions": "brak uprawnień | uprawnienie | uprawnień",
+        "logs": "brak logów | log | logów",
+        "services": "brak usług | usługa | usług",
+        "users": "brak użytkowników | użytkownik | użytkowników",
+        "apps": "brak aplikacji | aplikacja | aplikacji",
+        "backups": "brak kopii zapasowych | kopia zapasowa | kopii zapasowych",
+        "domains": "brak domen | domena | domen",
+        "groups": "brak grup | grupa | grup",
+        "installed_apps": "brak zainstalowanych aplikacji | zainstalowana aplikacja | zainstalowanych aplikacji"
     },
     "infos": "Info",
     "hook_conf_ynh_settings": "Konfiguracja YunoHost",
diff --git a/app/src/i18n/locales/pt.json b/app/src/i18n/locales/pt.json
index 6140ec99a..0b8f2e528 100644
--- a/app/src/i18n/locales/pt.json
+++ b/app/src/i18n/locales/pt.json
@@ -159,15 +159,15 @@
     "items_verbose_items_left": "Faltam {items}.",
     "items_verbose_count": "Não há {items}. | Existe 1 {items}. | Existem {items}.",
     "items": {
-        "users": "nenhum usuário | usuário | {n} usuários",
-        "services": "nenhum serviço | serviço | {n} serviços",
-        "permissions": "nenhuma permissão | permissão | {n} permissões",
-        "logs": "sem logs | log | {n} logs",
-        "installed_apps": "nenhum app instalado | app instalado | {n} apps instalados",
-        "groups": "nenhum grupo | grupo | {n} grupos",
-        "domains": "nenhum domínio | domínio | {n} domínios",
-        "backups": "nenhum backup | backup | {n} backups",
-        "apps": "nenhum app | spp | {n} apps"
+        "users": "nenhum usuário | usuário | usuários",
+        "services": "nenhum serviço | serviço | serviços",
+        "permissions": "nenhuma permissão | permissão | permissões",
+        "logs": "sem logs | log | logs",
+        "installed_apps": "nenhum app instalado | app instalado | apps instalados",
+        "groups": "nenhum grupo | grupo | grupos",
+        "domains": "nenhum domínio | domínio | domínios",
+        "backups": "nenhum backup | backup | backups",
+        "apps": "nenhum app | spp | apps"
     },
     "issues": "{count} problemas",
     "ignored": "{count} ignorado",
diff --git a/app/src/i18n/locales/ru.json b/app/src/i18n/locales/ru.json
index 88bf3155d..1dd462eae 100644
--- a/app/src/i18n/locales/ru.json
+++ b/app/src/i18n/locales/ru.json
@@ -548,15 +548,15 @@
     "pending_migrations": "Есть несколько незавершенных миграций, ожидающих запуска. Пожалуйста, перейдите в раздел <a href='#/tools/migrations'>Инструменты > Миграции</a>, чтобы запустить их.",
     "text_selection_is_disabled": "Выделение текста отключено. Если вы хотите поделиться этим журналом, пожалуйста, поделитесь *полным* журналом с помощью кнопки 'Share with Yunopaste'.<br/><small>Или если вы действительно очень хотите выделить текст, нажмите эти клавиши: ↓↓↑↑.</small>",
     "items": {
-        "apps": "нет приложений | приложение | {n} приложений",
-        "backups": "нет резервных копий | резервное копирование | {n} резервных копий",
-        "domains": "нет доменов | домен | {n} доменов",
-        "logs": "нет журналов | журнал | {n} журнала(ов)",
-        "services": "нет сервисов | сервис | {n} сервисов(а)",
-        "permissions": "нет разрешений | разрешение | {n} разрешения(ий)",
-        "groups": "нет групп | группа | {n} группы",
-        "installed_apps": "нет установленных приложений | установленное приложение | {n} установленные приложения",
-        "users": "нет пользователей | пользователь | {n} пользователи"
+        "apps": "нет приложений | приложение | приложений",
+        "backups": "нет резервных копий | резервное копирование | резервных копий",
+        "domains": "нет доменов | домен | доменов",
+        "logs": "нет журналов | журнал | журнала(ов)",
+        "services": "нет сервисов | сервис | сервисов(а)",
+        "permissions": "нет разрешений | разрешение | разрешения(ий)",
+        "groups": "нет групп | группа | группы",
+        "installed_apps": "нет установленных приложений | установленное приложение | установленные приложения",
+        "users": "нет пользователей | пользователь | пользователи"
     },
     "postinstall": {
         "force": "Принудительная пост-установка",
diff --git a/app/src/i18n/locales/sk.json b/app/src/i18n/locales/sk.json
index cabe3c99c..93f41ab69 100644
--- a/app/src/i18n/locales/sk.json
+++ b/app/src/i18n/locales/sk.json
@@ -281,15 +281,15 @@
     "ipv6": "IPv6",
     "issues": "{count} chýb",
     "items": {
-        "backups": "žiadne zálohy | záloha | {n} záloh",
-        "domains": "žiadne domény | doména | {n} domén",
-        "groups": "žiadna skupina | skupina | {n} skupín",
-        "logs": "žiadne záznamy | záznam | {n} záznamov",
-        "services": "žiadne služby | služba | {n} služby",
-        "users": "žiadni používatelia | používateľ | {n} používateľov",
-        "apps": "žiadne aplikácie | aplikácia | {n} aplikácií",
-        "installed_apps": "žiadne nainštalované aplikácie | nainštalovaná aplikácia | {n} nainštalovaných aplikácií",
-        "permissions": "žiadne oprávnenia | oprávnenie | {n} oprávnení"
+        "backups": "žiadne zálohy | záloha | záloh",
+        "domains": "žiadne domény | doména | domén",
+        "groups": "žiadna skupina | skupina | skupín",
+        "logs": "žiadne záznamy | záznam | záznamov",
+        "services": "žiadne služby | služba | služby",
+        "users": "žiadni používatelia | používateľ | používateľov",
+        "apps": "žiadne aplikácie | aplikácia | aplikácií",
+        "installed_apps": "žiadne nainštalované aplikácie | nainštalovaná aplikácia | nainštalovaných aplikácií",
+        "permissions": "žiadne oprávnenia | oprávnenie | oprávnení"
     },
     "items_verbose_items_left": "Zostáva {items} položiek.",
     "label": "Názov",
diff --git a/app/src/i18n/locales/tr.json b/app/src/i18n/locales/tr.json
index 482cd109e..2950c4baa 100644
--- a/app/src/i18n/locales/tr.json
+++ b/app/src/i18n/locales/tr.json
@@ -86,15 +86,15 @@
     "groups_and_permissions": "Gruplar ve izinler",
     "ignore": "Göz ardı et",
     "items": {
-        "groups": "grup yok | grup | {n} grup",
-        "domains": "alan adı yok | alan adı | {n} alan adı",
-        "installed_apps": "yüklenmiş uygulama yok | yüklenmiş uygulama | {n} yüklenmiş uygulama",
-        "permissions": "izin yok | izin | {n} izin",
-        "apps": "uygulama yok | uygulama | {n} uygulama",
-        "backups": "yedek yok | yedek | {n} yedek",
-        "logs": "günlük yok | günlük | {n} günlük",
-        "services": "servis yok | servis | {n} servis",
-        "users": "kullanıcı yok | kullanıcı | {n} kullanıcı"
+        "groups": "grup yok | grup | grup",
+        "domains": "alan adı yok | alan adı | alan adı",
+        "installed_apps": "yüklenmiş uygulama yok | yüklenmiş uygulama | yüklenmiş uygulama",
+        "permissions": "izin yok | izin | izin",
+        "apps": "uygulama yok | uygulama | uygulama",
+        "backups": "yedek yok | yedek | yedek",
+        "logs": "günlük yok | günlük | günlük",
+        "services": "servis yok | servis | servis",
+        "users": "kullanıcı yok | kullanıcı | kullanıcı"
     },
     "run_first_diagnosis": "İlk tanılamayı çalıştır",
     "begin": "Başla",
diff --git a/app/src/i18n/locales/uk.json b/app/src/i18n/locales/uk.json
index dc3539539..b11b72cd0 100644
--- a/app/src/i18n/locales/uk.json
+++ b/app/src/i18n/locales/uk.json
@@ -222,15 +222,15 @@
     "ipv6": "IPv6",
     "issues": "{count} проблем",
     "items": {
-        "apps": "немає застосунків | застосунок | {n} застосунків",
-        "backups": "немає резервних копій | резервна копія | {n} резервних копій",
-        "domains": "немає доменів | домен | {n} доменів",
-        "groups": "немає груп | група | {n} групи",
-        "installed_apps": "немає встановлених застосунків | установлений застосунок | {n} установлених застосунків",
-        "logs": "немає журналів | журнал | {n} журналів",
-        "permissions": "немає дозволів | дозвіл | {n} дозволів",
-        "services": "немає служб | служба | {n} служб",
-        "users": "немає користувачів | користувач | {n} користувачів"
+        "apps": "немає застосунків | застосунок | застосунків",
+        "backups": "немає резервних копій | резервна копія | резервних копій",
+        "domains": "немає доменів | домен | доменів",
+        "groups": "немає груп | група | групи",
+        "installed_apps": "немає встановлених застосунків | установлений застосунок | установлених застосунків",
+        "logs": "немає журналів | журнал | журналів",
+        "permissions": "немає дозволів | дозвіл | дозволів",
+        "services": "немає служб | служба | служб",
+        "users": "немає користувачів | користувач | користувачів"
     },
     "items_verbose_count": "Наявно {items}. | Наявний 1 {items}. | Наявно {items}.",
     "items_verbose_items_left": "Лишилося {items}. | Лишився 1 {items}. | Лишилося {items}.",
diff --git a/app/src/i18n/locales/zh_Hans.json b/app/src/i18n/locales/zh_Hans.json
index f76136f65..f364fef06 100644
--- a/app/src/i18n/locales/zh_Hans.json
+++ b/app/src/i18n/locales/zh_Hans.json
@@ -247,15 +247,15 @@
     },
     "ignored": "{count} 已忽略",
     "items": {
-        "installed_apps": "没有已安装应用 | 已安装应用 | {n} 个已安装应用",
-        "groups": "没有群组 | 群组 | {n} 个群组",
-        "domains": "没有域 | 域 | {n} 个域",
-        "backups": "没有备份 | 备份 | {n} 份备份",
-        "apps": "没有应用 | 应用 | {n} 个应用",
-        "users": "没有用户 | 用户 | {n} 个用户",
-        "services": "没有服务 | 服务 | {n} 个服务",
-        "permissions": "没有权限 | 权限 | {n} 个权限",
-        "logs": "没有日志 | 日志 | {n} 个日志"
+        "installed_apps": "没有已安装应用 | 已安装应用 | 个已安装应用",
+        "groups": "没有群组 | 群组 | 个群组",
+        "domains": "没有域 | 域 | 个域",
+        "backups": "没有备份 | 备份 | 份备份",
+        "apps": "没有应用 | 应用 | 个应用",
+        "users": "没有用户 | 用户 | 个用户",
+        "services": "没有服务 | 服务 | 个服务",
+        "permissions": "没有权限 | 权限 | 个权限",
+        "logs": "没有日志 | 日志 | 个日志"
     },
     "issues": "{count} 个问题",
     "label_for_manifestname": "{name} 的标签",

From 76342bbe46ce7c5c7d1f479dce2c9144660784ee Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 15 Sep 2024 22:14:37 +0200
Subject: [PATCH 266/275] fix: not translated item name in `TagsSelectizeItem`

---
 app/src/components/globals/formItems/TagsSelectizeItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index cbbd46061..ee90f910e 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -74,7 +74,7 @@ const texts = computed(() =>
 const searchI18n = computed(() => {
   const params = { items: t('items.' + props.itemsName, 0) }
   return {
-    label: t('search.for', { items: props.itemsName }),
+    label: t('search.for', { items: t('items.' + props.itemsName, 2) }),
     invalidFeedback: t('search.not_found', params, 0),
     noItems: t('items_verbose_items_left', params, 0),
   }

From 0d1384330fce6390a73679cb673b3f0d4539b386 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 16 Sep 2024 12:30:00 +0200
Subject: [PATCH 267/275] chore: bump packages versions

---
 app/package.json | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/package.json b/app/package.json
index 359734df2..0034ca397 100644
--- a/app/package.json
+++ b/app/package.json
@@ -14,37 +14,37 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@fontsource/fira-code": "^5.0.18",
-    "@fontsource/firago": "^5.0.11",
+    "@fontsource/fira-code": "^5.1.0",
+    "@fontsource/firago": "^5.1.0",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^11.0.1",
+    "@vueuse/core": "^11.1.0",
     "bootstrap": "^5.3.3",
-    "bootstrap-vue-next": "^0.24.7",
-    "date-fns": "^3.6.0",
+    "bootstrap-vue-next": "^0.24.16",
+    "date-fns": "^4.0.0",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
     "uuid": "^10.0.0",
-    "vue": "^3.4.37",
-    "vue-i18n": "^9.13.1",
-    "vue-router": "^4.4.3",
+    "vue": "^3.5.6",
+    "vue-i18n": "^10.0.1",
+    "vue-router": "^4.4.5",
     "vue-showdown": "^4.2.0"
   },
   "devDependencies": {
     "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue": "^5.1.3",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-vue": "^9.27.0",
+    "eslint-plugin-vue": "^9.28.0",
     "prettier": "^3.3.3",
-    "sass": "^1.77.8",
-    "typescript": "^5.5.4",
+    "sass": "^1.78.0",
+    "typescript": "^5.6.2",
     "unplugin-vue-components": "^0.27.4",
-    "vite": "^5.4.0",
-    "vue-tsc": "^2.0.29"
+    "vite": "^5.4.5",
+    "vue-tsc": "^2.1.6"
   },
   "browserslist": [
     "> 1%",

From 96ba9197f1dfc06d978dab92e5268d25a228f7ca Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 16 Sep 2024 12:31:58 +0200
Subject: [PATCH 268/275] chore: update yarn.lock

---
 app/yarn.lock | 647 +++++++++++++++++++++++++-------------------------
 1 file changed, 320 insertions(+), 327 deletions(-)

diff --git a/app/yarn.lock b/app/yarn.lock
index 92bebd353..46acbc00a 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -17,17 +17,17 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
   integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
 
-"@babel/parser@^7.24.7":
-  version "7.25.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.3.tgz#91fb126768d944966263f0657ab222a642b82065"
-  integrity sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==
+"@babel/parser@^7.25.3":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f"
+  integrity sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==
   dependencies:
-    "@babel/types" "^7.25.2"
+    "@babel/types" "^7.25.6"
 
-"@babel/types@^7.25.2":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.2.tgz#55fb231f7dc958cd69ea141a4c2997e819646125"
-  integrity sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==
+"@babel/types@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6"
+  integrity sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==
   dependencies:
     "@babel/helper-string-parser" "^7.24.8"
     "@babel/helper-validator-identifier" "^7.24.7"
@@ -156,9 +156,9 @@
     eslint-visitor-keys "^3.3.0"
 
 "@eslint-community/regexpp@^4.10.0", "@eslint-community/regexpp@^4.6.1":
-  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.11.0.tgz#b0ffd0312b4a3fd2d6f77237e7248a5ad3a680ae"
-  integrity sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==
+  version "4.11.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.11.1.tgz#a547badfc719eb3e5f4b556325e542fbe9d7a18f"
+  integrity sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==
 
 "@eslint/eslintrc@^2.1.4":
   version "2.1.4"
@@ -180,15 +180,15 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
-"@fontsource/fira-code@^5.0.18":
-  version "5.0.19"
-  resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-5.0.19.tgz#75a1adaa86ce968a2469db3ee5c4a5608d3ce063"
-  integrity sha512-dNQM7isP7wojw9IQQwIyrJOke+PoyTP9TSSpeo3trZHNOG1DJIEiMFMDCVerTixyfKMWgtJDEDyFCWfwyzEoEg==
+"@fontsource/fira-code@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-5.1.0.tgz#26bccb369087a5c962fa0cecba913c8a82dfb693"
+  integrity sha512-ti2XDP0qthaTDu44QawNP3PjEZIZ/cNl5VUZzvF9oYS/WY4LgmbF43IMTgTUZL33hknwFWBfmLmZCheOQmzJDg==
 
-"@fontsource/firago@^5.0.11":
-  version "5.0.11"
-  resolved "https://registry.yarnpkg.com/@fontsource/firago/-/firago-5.0.11.tgz#8fe3c8b47cc1d8148bc50c80189ed3aac8555cb7"
-  integrity sha512-XfFsLxSFMTbJTN+94yFTJyuFGmoxtykt+6rL0fj9unCeXslllirpH6KetIlbZO73NzTUmKYRvtOJdOgVbBGtaQ==
+"@fontsource/firago@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/firago/-/firago-5.1.0.tgz#f61551a62ae282515c761dbb2ed494f26f7497e7"
+  integrity sha512-ym1zCs5Zmp7J6vJ2AzU74H008bxebz53OBY2yPe+qD7+UXwu1S4bHpHYBbznu+HMxccW+JkEZg6UTyqc90V2ug==
 
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
@@ -209,26 +209,26 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
   integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
-"@intlify/core-base@9.14.0":
-  version "9.14.0"
-  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.14.0.tgz#63ce687a6560c0af6a16cb567d9d8a1ea1a5a65e"
-  integrity sha512-zJn0imh9HIsZZUtt9v8T16PeVstPv6bP2YzlrYJwoF8F30gs4brZBwW2KK6EI5WYKFi3NeqX6+UU4gniz5TkGg==
+"@intlify/core-base@10.0.1":
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-10.0.1.tgz#18ecddcd4ad2f67c0dccb7b72e60036b7b4434d0"
+  integrity sha512-6kpRGjhos95ph7QmEtP4tnWFTW102s71CLQAQwfsIGqOAcoJhzcYFpzIQ0gKXzqAIXsMD/hwM5qJ4ewqMHw3gg==
   dependencies:
-    "@intlify/message-compiler" "9.14.0"
-    "@intlify/shared" "9.14.0"
+    "@intlify/message-compiler" "10.0.1"
+    "@intlify/shared" "10.0.1"
 
-"@intlify/message-compiler@9.14.0":
-  version "9.14.0"
-  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.14.0.tgz#e767141dd12862b3c1bf02ab5fc4852792812381"
-  integrity sha512-sXNsoMI0YsipSXW8SR75drmVK56tnJHoYbPXUv2Cf9lz6FzvwsosFm6JtC1oQZI/kU+n7qx0qRrEWkeYFTgETA==
+"@intlify/message-compiler@10.0.1":
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-10.0.1.tgz#2cd25944ffece4312e4dbdd2ebf9556176aaed90"
+  integrity sha512-fPeykrcgVT5eOIlshTHiPCN8FV3AZyBOdMS3XaXzfQ6eL5wqfc29I/EdIv5YXVW5X8e/BgYeWjBC0Cuznsl/2g==
   dependencies:
-    "@intlify/shared" "9.14.0"
+    "@intlify/shared" "10.0.1"
     source-map-js "^1.0.2"
 
-"@intlify/shared@9.14.0":
-  version "9.14.0"
-  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.14.0.tgz#e8fb3693ad4171442cbe6cb8922a9b5a22ffb4ef"
-  integrity sha512-r+N8KRQL7LgN1TMTs1A2svfuAU0J94Wu9wWdJVJqYsoMMLIeJxrPjazihfHpmJqfgZq0ah3Y9Q4pgWV2O90Fyg==
+"@intlify/shared@10.0.1":
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-10.0.1.tgz#427586698d07a8658560afff1fe55c6d134207b9"
+  integrity sha512-b4h7IWdZl710DnAhET8lgfgZ4Y9A2IZx/gbli3Ec/zHtYCoPqLHmiM7kUNBrSZj7d/SSjcMMZHuz5I09x3PYZw==
 
 "@jridgewell/sourcemap-codec@^1.5.0":
   version "1.5.0"
@@ -270,85 +270,85 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
-"@rollup/rollup-android-arm-eabi@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.0.tgz#d941173f82f9b041c61b0dc1a2a91dcd06e4b31e"
-  integrity sha512-WTWD8PfoSAJ+qL87lE7votj3syLavxunWhzCnx3XFxFiI/BA/r3X7MUM8dVrH8rb2r4AiO8jJsr3ZjdaftmnfA==
-
-"@rollup/rollup-android-arm64@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.0.tgz#7e7157c8543215245ceffc445134d9e843ba51c0"
-  integrity sha512-a1sR2zSK1B4eYkiZu17ZUZhmUQcKjk2/j9Me2IDjk1GHW7LB5Z35LEzj9iJch6gtUfsnvZs1ZNyDW2oZSThrkA==
-
-"@rollup/rollup-darwin-arm64@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.0.tgz#f0a18a4fc8dc6eb1e94a51fa2adb22876f477947"
-  integrity sha512-zOnKWLgDld/svhKO5PD9ozmL6roy5OQ5T4ThvdYZLpiOhEGY+dp2NwUmxK0Ld91LrbjrvtNAE0ERBwjqhZTRAA==
-
-"@rollup/rollup-darwin-x64@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.0.tgz#34b7867613e5cc42d2b85ddc0424228cc33b43f0"
-  integrity sha512-7doS8br0xAkg48SKE2QNtMSFPFUlRdw9+votl27MvT46vo44ATBmdZdGysOevNELmZlfd+NEa0UYOA8f01WSrg==
-
-"@rollup/rollup-linux-arm-gnueabihf@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.0.tgz#422b19ff9ae02b05d3395183d1d43b38c7c8be0b"
-  integrity sha512-pWJsfQjNWNGsoCq53KjMtwdJDmh/6NubwQcz52aEwLEuvx08bzcy6tOUuawAOncPnxz/3siRtd8hiQ32G1y8VA==
-
-"@rollup/rollup-linux-arm-musleabihf@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.0.tgz#568aa29195ef6fc57ec6ed3f518923764406a8ee"
-  integrity sha512-efRIANsz3UHZrnZXuEvxS9LoCOWMGD1rweciD6uJQIx2myN3a8Im1FafZBzh7zk1RJ6oKcR16dU3UPldaKd83w==
-
-"@rollup/rollup-linux-arm64-gnu@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.0.tgz#22309c8bcba9a73114f69165c72bc94b2fbec085"
-  integrity sha512-ZrPhydkTVhyeGTW94WJ8pnl1uroqVHM3j3hjdquwAcWnmivjAwOYjTEAuEDeJvGX7xv3Z9GAvrBkEzCgHq9U1w==
-
-"@rollup/rollup-linux-arm64-musl@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.0.tgz#c93c388af6d33f082894b8a60839d7265b2b9bc5"
-  integrity sha512-cfaupqd+UEFeURmqNP2eEvXqgbSox/LHOyN9/d2pSdV8xTrjdg3NgOFJCtc1vQ/jEke1qD0IejbBfxleBPHnPw==
-
-"@rollup/rollup-linux-powerpc64le-gnu@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.0.tgz#493c5e19e395cf3c6bd860c7139c8a903dea72b4"
-  integrity sha512-ZKPan1/RvAhrUylwBXC9t7B2hXdpb/ufeu22pG2psV7RN8roOfGurEghw1ySmX/CmDDHNTDDjY3lo9hRlgtaHg==
-
-"@rollup/rollup-linux-riscv64-gnu@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.0.tgz#a2eab4346fbe5909165ce99adb935ba30c9fb444"
-  integrity sha512-H1eRaCwd5E8eS8leiS+o/NqMdljkcb1d6r2h4fKSsCXQilLKArq6WS7XBLDu80Yz+nMqHVFDquwcVrQmGr28rg==
-
-"@rollup/rollup-linux-s390x-gnu@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.0.tgz#0bc49a79db4345d78d757bb1b05e73a1b42fa5c3"
-  integrity sha512-zJ4hA+3b5tu8u7L58CCSI0A9N1vkfwPhWd/puGXwtZlsB5bTkwDNW/+JCU84+3QYmKpLi+XvHdmrlwUwDA6kqw==
-
-"@rollup/rollup-linux-x64-gnu@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.0.tgz#4fd36a6a41f3406d8693321b13d4f9b7658dd4b9"
-  integrity sha512-e2hrvElFIh6kW/UNBQK/kzqMNY5mO+67YtEh9OA65RM5IJXYTWiXjX6fjIiPaqOkBthYF1EqgiZ6OXKcQsM0hg==
-
-"@rollup/rollup-linux-x64-musl@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.0.tgz#10ebb13bd4469cbad1a5d9b073bd27ec8a886200"
-  integrity sha512-1vvmgDdUSebVGXWX2lIcgRebqfQSff0hMEkLJyakQ9JQUbLDkEaMsPTLOmyccyC6IJ/l3FZuJbmrBw/u0A0uCQ==
-
-"@rollup/rollup-win32-arm64-msvc@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.0.tgz#2fef1a90f1402258ef915ae5a94cc91a5a1d5bfc"
-  integrity sha512-s5oFkZ/hFcrlAyBTONFY1TWndfyre1wOMwU+6KCpm/iatybvrRgmZVM+vCFwxmC5ZhdlgfE0N4XorsDpi7/4XQ==
-
-"@rollup/rollup-win32-ia32-msvc@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.0.tgz#a18ad47a95c5f264defb60acdd8c27569f816fc1"
-  integrity sha512-G9+TEqRnAA6nbpqyUqgTiopmnfgnMkR3kMukFBDsiyy23LZvUCpiUwjTRx6ezYCjJODXrh52rBR9oXvm+Fp5wg==
-
-"@rollup/rollup-win32-x64-msvc@4.21.0":
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.0.tgz#20c09cf44dcb082140cc7f439dd679fe4bba3375"
-  integrity sha512-2jsCDZwtQvRhejHLfZ1JY6w6kEuEtfF9nzYsZxzSlNVKDX+DpsDJ+Rbjkm74nvg2rdx0gwBS+IMdvwJuq3S9pQ==
+"@rollup/rollup-android-arm-eabi@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.3.tgz#155c7d82c1b36c3ad84d9adf9b3cd520cba81a0f"
+  integrity sha512-MmKSfaB9GX+zXl6E8z4koOr/xU63AMVleLEa64v7R0QF/ZloMs5vcD1sHgM64GXXS1csaJutG+ddtzcueI/BLg==
+
+"@rollup/rollup-android-arm64@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.3.tgz#b94b6fa002bd94a9cbd8f9e47e23b25e5bd113ba"
+  integrity sha512-zrt8ecH07PE3sB4jPOggweBjJMzI1JG5xI2DIsUbkA+7K+Gkjys6eV7i9pOenNSDJH3eOr/jLb/PzqtmdwDq5g==
+
+"@rollup/rollup-darwin-arm64@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.3.tgz#0934126cf9cbeadfe0eb7471ab5d1517e8cd8dcc"
+  integrity sha512-P0UxIOrKNBFTQaXTxOH4RxuEBVCgEA5UTNV6Yz7z9QHnUJ7eLX9reOd/NYMO3+XZO2cco19mXTxDMXxit4R/eQ==
+
+"@rollup/rollup-darwin-x64@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.3.tgz#0ce8e1e0f349778938c7c90e4bdc730640e0a13e"
+  integrity sha512-L1M0vKGO5ASKntqtsFEjTq/fD91vAqnzeaF6sfNAy55aD+Hi2pBI5DKwCO+UNDQHWsDViJLqshxOahXyLSh3EA==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.3.tgz#5669d34775ad5d71e4f29ade99d0ff4df523afb6"
+  integrity sha512-btVgIsCjuYFKUjopPoWiDqmoUXQDiW2A4C3Mtmp5vACm7/GnyuprqIDPNczeyR5W8rTXEbkmrJux7cJmD99D2g==
+
+"@rollup/rollup-linux-arm-musleabihf@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.3.tgz#f6d1a0e1da4061370cb2f4244fbdd727c806dd88"
+  integrity sha512-zmjbSphplZlau6ZTkxd3+NMtE4UKVy7U4aVFMmHcgO5CUbw17ZP6QCgyxhzGaU/wFFdTfiojjbLG3/0p9HhAqA==
+
+"@rollup/rollup-linux-arm64-gnu@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.3.tgz#ed96a05e99743dee4d23cc4913fc6e01a0089c88"
+  integrity sha512-nSZfcZtAnQPRZmUkUQwZq2OjQciR6tEoJaZVFvLHsj0MF6QhNMg0fQ6mUOsiCUpTqxTx0/O6gX0V/nYc7LrgPw==
+
+"@rollup/rollup-linux-arm64-musl@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.3.tgz#057ea26eaa7e537a06ded617d23d57eab3cecb58"
+  integrity sha512-MnvSPGO8KJXIMGlQDYfvYS3IosFN2rKsvxRpPO2l2cum+Z3exiExLwVU+GExL96pn8IP+GdH8Tz70EpBhO0sIQ==
+
+"@rollup/rollup-linux-powerpc64le-gnu@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.3.tgz#6e6e1f9404c9bf3fbd7d51cd11cd288a9a2843aa"
+  integrity sha512-+W+p/9QNDr2vE2AXU0qIy0qQE75E8RTwTwgqS2G5CRQ11vzq0tbnfBd6brWhS9bCRjAjepJe2fvvkvS3dno+iw==
+
+"@rollup/rollup-linux-riscv64-gnu@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.3.tgz#eef1536a53f6e6658a2a778130e6b1a4a41cb439"
+  integrity sha512-yXH6K6KfqGXaxHrtr+Uoy+JpNlUlI46BKVyonGiaD74ravdnF9BUNC+vV+SIuB96hUMGShhKV693rF9QDfO6nQ==
+
+"@rollup/rollup-linux-s390x-gnu@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.3.tgz#2b28fb89ca084efaf8086f435025d96b4a966957"
+  integrity sha512-R8cwY9wcnApN/KDYWTH4gV/ypvy9yZUHlbJvfaiXSB48JO3KpwSpjOGqO4jnGkLDSk1hgjYkTbTt6Q7uvPf8eg==
+
+"@rollup/rollup-linux-x64-gnu@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.3.tgz#5226cde6c6b495b04a3392c1d2c572844e42f06b"
+  integrity sha512-kZPbX/NOPh0vhS5sI+dR8L1bU2cSO9FgxwM8r7wHzGydzfSjLRCFAT87GR5U9scj2rhzN3JPYVC7NoBbl4FZ0g==
+
+"@rollup/rollup-linux-x64-musl@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.3.tgz#2c2412982e6c2a00a2ecac6d548ebb02f0aa6ca4"
+  integrity sha512-S0Yq+xA1VEH66uiMNhijsWAafffydd2X5b77eLHfRmfLsRSpbiAWiRHV6DEpz6aOToPsgid7TI9rGd6zB1rhbg==
+
+"@rollup/rollup-win32-arm64-msvc@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.3.tgz#fbb6ef5379199e2ec0103ef32877b0985c773a55"
+  integrity sha512-9isNzeL34yquCPyerog+IMCNxKR8XYmGd0tHSV+OVx0TmE0aJOo9uw4fZfUuk2qxobP5sug6vNdZR6u7Mw7Q+Q==
+
+"@rollup/rollup-win32-ia32-msvc@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.3.tgz#d50e2082e147e24d87fe34abbf6246525ec3845a"
+  integrity sha512-nMIdKnfZfzn1Vsk+RuOvl43ONTZXoAPUUxgcU0tXooqg4YrAqzfKzVenqqk2g5efWh46/D28cKFrOzDSW28gTA==
+
+"@rollup/rollup-win32-x64-msvc@4.21.3":
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.3.tgz#4115233aa1bd5a2060214f96d8511f6247093212"
+  integrity sha512-fOvu7PCQjAj4eWDEuD8Xz5gpzFqXzGlxHZozHP4b9Jxv9APtdxL6STqztDzMLuRXEc4UpXGGhx029Xgm91QBeA==
 
 "@types/estree@1.0.5", "@types/estree@^1.0.0":
   version "1.0.5"
@@ -456,73 +456,73 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
-"@vitejs/plugin-vue@^5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.1.2.tgz#f11091e0130eca6c1ca8cfb85ee71ea53b255d31"
-  integrity sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==
+"@vitejs/plugin-vue@^5.1.3":
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.1.3.tgz#42b55c1a4d6f329aea25c5a24db51a31db31c693"
+  integrity sha512-3xbWsKEKXYlmX82aOHufFQVnkbMC/v8fLpWwh6hWOUrK5fbbtBh9Q/WWse27BFgSy2/e2c0fz5Scgya9h2GLhw==
 
-"@volar/language-core@2.4.0", "@volar/language-core@~2.4.0-alpha.18":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-2.4.0.tgz#962efc66ff9198ee2412786e99528bf77cdad100"
-  integrity sha512-FTla+khE+sYK0qJP+6hwPAAUwiNHVMph4RUXpxf/FIPKUP61NFrVZorml4mjFShnueR2y9/j8/vnh09YwVdH7A==
+"@volar/language-core@2.4.5", "@volar/language-core@~2.4.1":
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-2.4.5.tgz#af8ba724b05fc4dce2339c49662e732e9c22c897"
+  integrity sha512-F4tA0DCO5Q1F5mScHmca0umsi2ufKULAnMOVBfMsZdT4myhVl4WdKRwCaKcfOkIEuyrAVvtq1ESBdZ+rSyLVww==
   dependencies:
-    "@volar/source-map" "2.4.0"
+    "@volar/source-map" "2.4.5"
 
-"@volar/source-map@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-2.4.0.tgz#b6690f06c600eaf587bbc81b0153203e4f6db72a"
-  integrity sha512-2ceY8/NEZvN6F44TXw2qRP6AQsvCYhV2bxaBPWxV9HqIfkbRydSksTFObCF1DBDNBfKiZTS8G/4vqV6cvjdOIQ==
+"@volar/source-map@2.4.5":
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-2.4.5.tgz#81223a06321aaa067b40619189b44a9f0b7ac2d8"
+  integrity sha512-varwD7RaKE2J/Z+Zu6j3mNNJbNT394qIxXwdvz/4ao/vxOfyClZpSDtLKkwWmecinkOVos5+PWkWraelfMLfpw==
 
-"@volar/typescript@~2.4.0-alpha.18":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-2.4.0.tgz#f909d20dfe43dd846d30695f6e5467276ff4418e"
-  integrity sha512-9zx3lQWgHmVd+JRRAHUSRiEhe4TlzL7U7e6ulWXOxHH/WNYxzKwCvZD7WYWEZFdw4dHfTD9vUR0yPQO6GilCaQ==
+"@volar/typescript@~2.4.1":
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-2.4.5.tgz#1210c1e8561ac20af46348ceaf8e6e96c797063f"
+  integrity sha512-mcT1mHvLljAEtHviVcBuOyAwwMKz1ibXTi5uYtP/pf4XxoAzpdkQ+Br2IC0NPCvLCbjPZmbf3I0udndkfB1CDg==
   dependencies:
-    "@volar/language-core" "2.4.0"
+    "@volar/language-core" "2.4.5"
     path-browserify "^1.0.1"
     vscode-uri "^3.0.8"
 
-"@vue/compiler-core@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.38.tgz#326dfe3c92fa2b0f1dc9b39a948a231980253496"
-  integrity sha512-8IQOTCWnLFqfHzOGm9+P8OPSEDukgg3Huc92qSG49if/xI2SAwLHQO2qaPQbjCWPBcQoO1WYfXfTACUrWV3c5A==
+"@vue/compiler-core@3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.6.tgz#4a771c738fe745b61b963c41077af1405200db33"
+  integrity sha512-r+gNu6K4lrvaQLQGmf+1gc41p3FO2OUJyWmNqaIITaJU6YFiV5PtQSFZt8jfztYyARwqhoCayjprC7KMvT3nRA==
   dependencies:
-    "@babel/parser" "^7.24.7"
-    "@vue/shared" "3.4.38"
+    "@babel/parser" "^7.25.3"
+    "@vue/shared" "3.5.6"
     entities "^4.5.0"
     estree-walker "^2.0.2"
     source-map-js "^1.2.0"
 
-"@vue/compiler-dom@3.4.38", "@vue/compiler-dom@^3.4.0":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz#90348fac1130e0bbd408b650635cb626b3b9df06"
-  integrity sha512-Osc/c7ABsHXTsETLgykcOwIxFktHfGSUDkb05V61rocEfsFDcjDLH/IHJSNJP+/Sv9KeN2Lx1V6McZzlSb9EhQ==
+"@vue/compiler-dom@3.5.6", "@vue/compiler-dom@^3.4.0":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.6.tgz#0942c290d3a52eb396243850ec73005f669c210d"
+  integrity sha512-xRXqxDrIqK8v8sSScpistyYH0qYqxakpsIvqMD2e5sV/PXQ1mTwtXp4k42yHK06KXxKSmitop9e45Ui/3BrTEw==
   dependencies:
-    "@vue/compiler-core" "3.4.38"
-    "@vue/shared" "3.4.38"
+    "@vue/compiler-core" "3.5.6"
+    "@vue/shared" "3.5.6"
 
-"@vue/compiler-sfc@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.38.tgz#954c3f6777bbbcca28771ba59b795f12f76ef188"
-  integrity sha512-s5QfZ+9PzPh3T5H4hsQDJtI8x7zdJaew/dCGgqZ2630XdzaZ3AD8xGZfBqpT8oaD/p2eedd+pL8tD5vvt5ZYJQ==
+"@vue/compiler-sfc@3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.6.tgz#7f730002a18c7be7962741de6a40491eb59e4ad6"
+  integrity sha512-pjWJ8Kj9TDHlbF5LywjVso+BIxCY5wVOLhkEXRhuCHDxPFIeX1zaFefKs8RYoHvkSMqRWt93a0f2gNJVJixHwg==
   dependencies:
-    "@babel/parser" "^7.24.7"
-    "@vue/compiler-core" "3.4.38"
-    "@vue/compiler-dom" "3.4.38"
-    "@vue/compiler-ssr" "3.4.38"
-    "@vue/shared" "3.4.38"
+    "@babel/parser" "^7.25.3"
+    "@vue/compiler-core" "3.5.6"
+    "@vue/compiler-dom" "3.5.6"
+    "@vue/compiler-ssr" "3.5.6"
+    "@vue/shared" "3.5.6"
     estree-walker "^2.0.2"
-    magic-string "^0.30.10"
-    postcss "^8.4.40"
+    magic-string "^0.30.11"
+    postcss "^8.4.47"
     source-map-js "^1.2.0"
 
-"@vue/compiler-ssr@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.38.tgz#9ded18f6d9c8b2440039a58492cfff36fa1a7774"
-  integrity sha512-YXznKFQ8dxYpAz9zLuVvfcXhc31FSPFDcqr0kyujbOwNhlmaNvL2QfIy+RZeJgSn5Fk54CWoEUeW+NVBAogGaw==
+"@vue/compiler-ssr@3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.6.tgz#011eb621ec27c51fea50297d872b0282e6c49133"
+  integrity sha512-VpWbaZrEOCqnmqjE83xdwegtr5qO/2OPUC6veWgvNqTJ3bYysz6vY3VqMuOijubuUYPRpG3OOKIh9TD0Stxb9A==
   dependencies:
-    "@vue/compiler-dom" "3.4.38"
-    "@vue/shared" "3.4.38"
+    "@vue/compiler-dom" "3.5.6"
+    "@vue/shared" "3.5.6"
 
 "@vue/compiler-vue2@^2.7.16":
   version "2.7.16"
@@ -532,10 +532,10 @@
     de-indent "^1.0.2"
     he "^1.2.0"
 
-"@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.6.3":
-  version "6.6.3"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz#b23a588154cba8986bba82b6e1d0248bde3fd1a0"
-  integrity sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==
+"@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.6.4":
+  version "6.6.4"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
+  integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
 
 "@vue/eslint-config-typescript@^13.0.0":
   version "13.0.0"
@@ -546,12 +546,12 @@
     "@typescript-eslint/parser" "^7.1.1"
     vue-eslint-parser "^9.3.1"
 
-"@vue/language-core@2.0.29":
-  version "2.0.29"
-  resolved "https://registry.yarnpkg.com/@vue/language-core/-/language-core-2.0.29.tgz#19462d786cd7a1c21dbe575b46970a57094e0357"
-  integrity sha512-o2qz9JPjhdoVj8D2+9bDXbaI4q2uZTHQA/dbyZT4Bj1FR9viZxDJnLcKVHfxdn6wsOzRgpqIzJEEmSSvgMvDTQ==
+"@vue/language-core@2.1.6":
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/@vue/language-core/-/language-core-2.1.6.tgz#b48186bdb9b3ef2b83e1f76d5b1ac357b3a7ed94"
+  integrity sha512-MW569cSky9R/ooKMh6xa2g1D0AtRKbL56k83dzus/bx//RDJk24RHWkMzbAlXjMdDNyxAaagKPRquBIxkxlCkg==
   dependencies:
-    "@volar/language-core" "~2.4.0-alpha.18"
+    "@volar/language-core" "~2.4.1"
     "@vue/compiler-dom" "^3.4.0"
     "@vue/compiler-vue2" "^2.7.16"
     "@vue/shared" "^3.4.0"
@@ -560,43 +560,43 @@
     muggle-string "^0.4.1"
     path-browserify "^1.0.1"
 
-"@vue/reactivity@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.38.tgz#ec2d549f4b831cd03d0baabf7d77e840b8536000"
-  integrity sha512-4vl4wMMVniLsSYYeldAKzbk72+D3hUnkw9z8lDeJacTxAkXeDAP1uE9xr2+aKIN0ipOL8EG2GPouVTH6yF7Gnw==
+"@vue/reactivity@3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.6.tgz#d26fea799db554e7c1c3469be3577e0b8fd6deb6"
+  integrity sha512-shZ+KtBoHna5GyUxWfoFVBCVd7k56m6lGhk5e+J9AKjheHF6yob5eukssHRI+rzvHBiU1sWs/1ZhNbLExc5oYQ==
   dependencies:
-    "@vue/shared" "3.4.38"
+    "@vue/shared" "3.5.6"
 
-"@vue/runtime-core@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.38.tgz#bead9085e9a1c5a446e27d74ffb450f9261cf097"
-  integrity sha512-21z3wA99EABtuf+O3IhdxP0iHgkBs1vuoCAsCKLVJPEjpVqvblwBnTj42vzHRlWDCyxu9ptDm7sI2ZMcWrQqlA==
+"@vue/runtime-core@3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.6.tgz#bbf8c722d5dbf55c77841d3d76ed630a4a5a573d"
+  integrity sha512-FpFULR6+c2lI+m1fIGONLDqPQO34jxV8g6A4wBOgne8eSRHP6PQL27+kWFIx5wNhhjkO7B4rgtsHAmWv7qKvbg==
   dependencies:
-    "@vue/reactivity" "3.4.38"
-    "@vue/shared" "3.4.38"
+    "@vue/reactivity" "3.5.6"
+    "@vue/shared" "3.5.6"
 
-"@vue/runtime-dom@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.38.tgz#52678ba0b85f94400a0a9c8dd23ddef4dd65657d"
-  integrity sha512-afZzmUreU7vKwKsV17H1NDThEEmdYI+GCAK/KY1U957Ig2NATPVjCROv61R19fjZNzMmiU03n79OMnXyJVN0UA==
+"@vue/runtime-dom@3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.6.tgz#17c190bee838cd7b4f0531dafea1accb3ba6da14"
+  integrity sha512-SDPseWre45G38ENH2zXRAHL1dw/rr5qp91lS4lt/nHvMr0MhsbCbihGAWLXNB/6VfFOJe2O+RBRkXU+CJF7/sw==
   dependencies:
-    "@vue/reactivity" "3.4.38"
-    "@vue/runtime-core" "3.4.38"
-    "@vue/shared" "3.4.38"
+    "@vue/reactivity" "3.5.6"
+    "@vue/runtime-core" "3.5.6"
+    "@vue/shared" "3.5.6"
     csstype "^3.1.3"
 
-"@vue/server-renderer@3.4.38":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.38.tgz#457401ef2b0f969156702061e56915acecc9fe2c"
-  integrity sha512-NggOTr82FbPEkkUvBm4fTGcwUY8UuTsnWC/L2YZBmvaQ4C4Jl/Ao4HHTB+l7WnFCt5M/dN3l0XLuyjzswGYVCA==
+"@vue/server-renderer@3.5.6":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.6.tgz#f029aecb740c3ff6ad63dd10736875161d22dbb9"
+  integrity sha512-zivnxQnOnwEXVaT9CstJ64rZFXMS5ZkKxCjDQKiMSvUhXRzFLWZVbaBiNF4HGDqGNNsTgmjcCSmU6TB/0OOxLA==
   dependencies:
-    "@vue/compiler-ssr" "3.4.38"
-    "@vue/shared" "3.4.38"
+    "@vue/compiler-ssr" "3.5.6"
+    "@vue/shared" "3.5.6"
 
-"@vue/shared@3.4.38", "@vue/shared@^3.4.0":
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.38.tgz#552a6770098bfd556fa3e2c686c9d3b4f4cd94c2"
-  integrity sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==
+"@vue/shared@3.5.6", "@vue/shared@^3.4.0":
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.6.tgz#602b3c2dccfe612f9e2e52e861dd7db340961a4f"
+  integrity sha512-eidH0HInnL39z6wAt6SFIwBrvGOpDWsDxlw3rCgo1B+CQ1781WzQUSU3YjxgdkcJo9Q8S6LmXTkvI+cLHGkQfA==
 
 "@vue/tsconfig@^0.5.1":
   version "0.5.1"
@@ -617,25 +617,25 @@
   dependencies:
     vue-demi "^0.13.11"
 
-"@vueuse/core@^11.0.1":
-  version "11.0.1"
-  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-11.0.1.tgz#cffaf8824a1b3b3c3cbe5d7d6de21000f43fab23"
-  integrity sha512-YTrekI18WwEyP3h168Fir94G/HNC27wvXJI21Alm0sPOwvhihfkrvHIe+5PNJq+MpgWdRcsjvE/38JaoKrgZhQ==
+"@vueuse/core@^11.1.0":
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-11.1.0.tgz#a104f33c899a15f3b28d3eb7b20738501a3a5035"
+  integrity sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==
   dependencies:
     "@types/web-bluetooth" "^0.0.20"
-    "@vueuse/metadata" "11.0.1"
-    "@vueuse/shared" "11.0.1"
+    "@vueuse/metadata" "11.1.0"
+    "@vueuse/shared" "11.1.0"
     vue-demi ">=0.14.10"
 
-"@vueuse/metadata@11.0.1":
-  version "11.0.1"
-  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-11.0.1.tgz#b78fee96948896f1663c8da1f4a94839aa7627d7"
-  integrity sha512-dTFvuHFAjLYOiSd+t9Sk7xUiuL6jbfay/eX+g+jaipXXlwKur2VCqBCZX+jfu+2vROUGcUsdn3fJR9KkpadIOg==
+"@vueuse/metadata@11.1.0":
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-11.1.0.tgz#ad367d2a51d985129724425923b3cf95f0faf27b"
+  integrity sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==
 
-"@vueuse/shared@11.0.1":
-  version "11.0.1"
-  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-11.0.1.tgz#50c34d3d20a889bfa36db87fd7208be29e5448c7"
-  integrity sha512-eAPf5CQB3HR0S76HqrhjBqFYstZfiHWZq8xF9EQmobGBkrhPfErJEhr8aMNQMqd6MkENIx2pblIEfJGlHpClug==
+"@vueuse/shared@11.1.0":
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-11.1.0.tgz#3bfc3aa555c2a456c21945ec7f127d71938d12e8"
+  integrity sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==
   dependencies:
     vue-demi ">=0.14.10"
 
@@ -704,10 +704,10 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
-bootstrap-vue-next@^0.24.7:
-  version "0.24.10"
-  resolved "https://registry.yarnpkg.com/bootstrap-vue-next/-/bootstrap-vue-next-0.24.10.tgz#6afc9777fc5de68b6499a2d4a327bf145f28ba83"
-  integrity sha512-8SIb8bBWBjK3383xu32W3K4rFtxNl890GrcOykha54ZfeWRw0G4yKU+Epswqr5obbj9mBlX2cV9G9d6sI0GyvA==
+bootstrap-vue-next@^0.24.16:
+  version "0.24.16"
+  resolved "https://registry.yarnpkg.com/bootstrap-vue-next/-/bootstrap-vue-next-0.24.16.tgz#ebf7cc7675aec08558d05e3430621292b163880b"
+  integrity sha512-Imkb/nUlIAG8Hi0tn6uW2L5R6/yQ6pNHIfUlkKSJSO1BrFaGnPSMaCL1KXuQ10nxprfk3zATlUjzdtoekVZqAw==
 
 bootstrap@^5.3.3:
   version "5.3.3"
@@ -815,10 +815,10 @@ csstype@^3.1.3:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-date-fns@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
-  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
+date-fns@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-4.0.0.tgz#3a2c76d061c13439660b0524300df93617ce0880"
+  integrity sha512-6K33+I8fQ5otvHgLIvKK1xmMbLAh0pduyrx7dwMXKiGYeoWhmk6M3Zoak9n7bXHMJQlHq1yqmdGy1QxKddJjUA==
 
 de-indent@^1.0.2:
   version "1.0.2"
@@ -826,11 +826,11 @@ de-indent@^1.0.2:
   integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
 debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.6:
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.6.tgz#2ab2c38fbaffebf8aa95fdfe6d88438c7a13c52b"
-  integrity sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
+  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
   dependencies:
-    ms "2.1.2"
+    ms "^2.1.3"
 
 deep-is@^0.1.3:
   version "0.1.4"
@@ -903,17 +903,17 @@ eslint-plugin-prettier@^5.2.1:
     prettier-linter-helpers "^1.0.0"
     synckit "^0.9.1"
 
-eslint-plugin-vue@^9.27.0:
-  version "9.27.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.27.0.tgz#c22dae704a03d9ecefa81364ff89f60ce0481f94"
-  integrity sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==
+eslint-plugin-vue@^9.28.0:
+  version "9.28.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.28.0.tgz#e4412f0c1024bafd15ffeaa6f76f4c99152e2765"
+  integrity sha512-ShrihdjIhOTxs+MfWun6oJWuk+g/LAhN+CiuOl/jjkG3l0F2AuK5NMTaWqyvBgkFtpYmyks6P4603mLmhNJW8g==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
     globals "^13.24.0"
     natural-compare "^1.4.0"
     nth-check "^2.1.1"
     postcss-selector-parser "^6.0.15"
-    semver "^7.6.0"
+    semver "^7.6.3"
     vue-eslint-parser "^9.4.3"
     xml-name-validator "^4.0.0"
 
@@ -1298,7 +1298,7 @@ lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-magic-string@^0.30.10, magic-string@^0.30.11:
+magic-string@^0.30.11:
   version "0.30.11"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.11.tgz#301a6f93b3e8c2cb13ac1a7a673492c0dfd12954"
   integrity sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==
@@ -1311,9 +1311,9 @@ merge2@^1.3.0, merge2@^1.4.1:
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
 micromatch@^4.0.4:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.7.tgz#33e8190d9fe474a9895525f5618eee136d46c2e5"
-  integrity sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
   dependencies:
     braces "^3.0.3"
     picomatch "^2.3.1"
@@ -1342,10 +1342,10 @@ mlly@^1.4.2, mlly@^1.7.1:
     pkg-types "^1.1.1"
     ufo "^1.5.3"
 
-ms@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
-  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
 muggle-string@^0.4.1:
   version "0.4.1"
@@ -1444,10 +1444,10 @@ pathe@^1.1.2:
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
   integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
 
-picocolors@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
-  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+picocolors@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
+  integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
@@ -1455,9 +1455,9 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
 pkg-types@^1.0.3, pkg-types@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-1.1.3.tgz#161bb1242b21daf7795036803f28e30222e476e3"
-  integrity sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-1.2.0.tgz#d0268e894e93acff11a6279de147e83354ebd42d"
+  integrity sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==
   dependencies:
     confbox "^0.1.7"
     mlly "^1.7.1"
@@ -1471,14 +1471,14 @@ postcss-selector-parser@^6.0.15:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss@^8.4.40, postcss@^8.4.41:
-  version "8.4.41"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.41.tgz#d6104d3ba272d882fe18fc07d15dc2da62fa2681"
-  integrity sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==
+postcss@^8.4.43, postcss@^8.4.47:
+  version "8.4.47"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365"
+  integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==
   dependencies:
     nanoid "^3.3.7"
-    picocolors "^1.0.1"
-    source-map-js "^1.2.0"
+    picocolors "^1.1.0"
+    source-map-js "^1.2.1"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -1532,28 +1532,28 @@ rimraf@^3.0.2:
     glob "^7.1.3"
 
 rollup@^4.20.0:
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.21.0.tgz#28db5f5c556a5180361d35009979ccc749560b9d"
-  integrity sha512-vo+S/lfA2lMS7rZ2Qoubi6I5hwZwzXeUIctILZLbHI+laNtvhhOIon2S1JksA5UEDQ7l3vberd0fxK44lTYjbQ==
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.21.3.tgz#c64ba119e6aeb913798a6f7eef2780a0df5a0821"
+  integrity sha512-7sqRtBNnEbcBtMeRVc6VRsJMmpI+JU1z9VTvW8D4gXIYQFz0aLcsE6rRkyghZkLfEgUZgVvOG7A5CVz/VW5GIA==
   dependencies:
     "@types/estree" "1.0.5"
   optionalDependencies:
-    "@rollup/rollup-android-arm-eabi" "4.21.0"
-    "@rollup/rollup-android-arm64" "4.21.0"
-    "@rollup/rollup-darwin-arm64" "4.21.0"
-    "@rollup/rollup-darwin-x64" "4.21.0"
-    "@rollup/rollup-linux-arm-gnueabihf" "4.21.0"
-    "@rollup/rollup-linux-arm-musleabihf" "4.21.0"
-    "@rollup/rollup-linux-arm64-gnu" "4.21.0"
-    "@rollup/rollup-linux-arm64-musl" "4.21.0"
-    "@rollup/rollup-linux-powerpc64le-gnu" "4.21.0"
-    "@rollup/rollup-linux-riscv64-gnu" "4.21.0"
-    "@rollup/rollup-linux-s390x-gnu" "4.21.0"
-    "@rollup/rollup-linux-x64-gnu" "4.21.0"
-    "@rollup/rollup-linux-x64-musl" "4.21.0"
-    "@rollup/rollup-win32-arm64-msvc" "4.21.0"
-    "@rollup/rollup-win32-ia32-msvc" "4.21.0"
-    "@rollup/rollup-win32-x64-msvc" "4.21.0"
+    "@rollup/rollup-android-arm-eabi" "4.21.3"
+    "@rollup/rollup-android-arm64" "4.21.3"
+    "@rollup/rollup-darwin-arm64" "4.21.3"
+    "@rollup/rollup-darwin-x64" "4.21.3"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.21.3"
+    "@rollup/rollup-linux-arm-musleabihf" "4.21.3"
+    "@rollup/rollup-linux-arm64-gnu" "4.21.3"
+    "@rollup/rollup-linux-arm64-musl" "4.21.3"
+    "@rollup/rollup-linux-powerpc64le-gnu" "4.21.3"
+    "@rollup/rollup-linux-riscv64-gnu" "4.21.3"
+    "@rollup/rollup-linux-s390x-gnu" "4.21.3"
+    "@rollup/rollup-linux-x64-gnu" "4.21.3"
+    "@rollup/rollup-linux-x64-musl" "4.21.3"
+    "@rollup/rollup-win32-arm64-msvc" "4.21.3"
+    "@rollup/rollup-win32-ia32-msvc" "4.21.3"
+    "@rollup/rollup-win32-x64-msvc" "4.21.3"
     fsevents "~2.3.2"
 
 run-parallel@^1.1.9:
@@ -1563,16 +1563,16 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-sass@^1.77.8:
-  version "1.77.8"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.8.tgz#9f18b449ea401759ef7ec1752a16373e296b52bd"
-  integrity sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==
+sass@^1.78.0:
+  version "1.78.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.78.0.tgz#cef369b2f9dc21ea1d2cf22c979f52365da60841"
+  integrity sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-semver@^7.3.6, semver@^7.5.4, semver@^7.6.0:
+semver@^7.3.6, semver@^7.5.4, semver@^7.6.0, semver@^7.6.3:
   version "7.6.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
   integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
@@ -1608,10 +1608,10 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
-  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.2.0, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
 strip-ansi@^6.0.1:
   version "6.0.1"
@@ -1663,9 +1663,9 @@ ts-api-utils@^1.3.0:
   integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
 
 tslib@^2.6.2:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
-  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
+  integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
@@ -1679,10 +1679,10 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
-typescript@^5.5.4:
-  version "5.5.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
-  integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
+typescript@^5.6.2:
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.2.tgz#d1de67b6bef77c41823f822df8f0b3bcff60a5a0"
+  integrity sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==
 
 ufo@^1.5.3:
   version "1.5.4"
@@ -1706,13 +1706,11 @@ unplugin-vue-components@^0.27.4:
     unplugin "^1.12.1"
 
 unplugin@^1.12.1:
-  version "1.12.2"
-  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.12.2.tgz#cc85aef010614394898caccf5f17002af8a4cd6f"
-  integrity sha512-bEqQxeC7rxtxPZ3M5V4Djcc4lQqKPgGe3mAWZvxcSmX5jhGxll19NliaRzQSQPrk4xJZSGniK3puLWpRuZN7VQ==
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.14.1.tgz#c76d6155a661e43e6a897bce6b767a1ecc344c1a"
+  integrity sha512-lBlHbfSFPToDYp9pjXlUEFVxYLaue9f9T1HC+4OHlmj+HnMDdz9oZY+erXfoCe/5V/7gKUSY2jpXPb9S7f0f/w==
   dependencies:
     acorn "^8.12.1"
-    chokidar "^3.6.0"
-    webpack-sources "^3.2.3"
     webpack-virtual-modules "^0.6.2"
 
 uri-js@^4.2.2:
@@ -1732,13 +1730,13 @@ uuid@^10.0.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
   integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==
 
-vite@^5.4.0:
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.2.tgz#8acb6ec4bfab823cdfc1cb2d6c53ed311bc4e47e"
-  integrity sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==
+vite@^5.4.5:
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.5.tgz#e4ab27709de46ff29bd8db52b0c51606acba893b"
+  integrity sha512-pXqR0qtb2bTwLkev4SE3r4abCNioP3GkjvIDLlzziPpXtHgiJIjuKl+1GN6ESOT3wMjG3JTeARopj2SwYaHTOA==
   dependencies:
     esbuild "^0.21.3"
-    postcss "^8.4.41"
+    postcss "^8.4.43"
     rollup "^4.20.0"
   optionalDependencies:
     fsevents "~2.3.3"
@@ -1771,21 +1769,21 @@ vue-eslint-parser@^9.3.1, vue-eslint-parser@^9.4.3:
     lodash "^4.17.21"
     semver "^7.3.6"
 
-vue-i18n@^9.13.1:
-  version "9.14.0"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.14.0.tgz#d6f1b3d95bfc4f40e630ff9456c78ab5becfd933"
-  integrity sha512-LxmpRuCt2rI8gqU+kxeflRZMQn4D5+4M3oP3PWZdowW/ePJraHqhF7p4CuaME52mUxdw3Mmy2yAUKgfZYgCRjA==
+vue-i18n@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-10.0.1.tgz#5c67257f01dc9133513405985121fc86bbd2df84"
+  integrity sha512-SQVlSm/1S6AaG1wexvwq3ebXUrrkx75ZHD78UAs4/rYD/X3tsQxfm6ElpT4ZPegJQEgRtOJjGripqSrfqAENtg==
   dependencies:
-    "@intlify/core-base" "9.14.0"
-    "@intlify/shared" "9.14.0"
+    "@intlify/core-base" "10.0.1"
+    "@intlify/shared" "10.0.1"
     "@vue/devtools-api" "^6.5.0"
 
-vue-router@^4.4.3:
-  version "4.4.3"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.4.3.tgz#58a39dc804632bfb6d26f052aa8f6718bd130299"
-  integrity sha512-sv6wmNKx2j3aqJQDMxLFzs/u/mjA9Z5LCgy6BE0f7yFWMjrPLnS/sPNn8ARY/FXw6byV18EFutn5lTO6+UsV5A==
+vue-router@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.4.5.tgz#bdf535e4cf32414ebdea6b4b403593efdb541388"
+  integrity sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==
   dependencies:
-    "@vue/devtools-api" "^6.6.3"
+    "@vue/devtools-api" "^6.6.4"
 
 vue-showdown@^4.2.0:
   version "4.2.0"
@@ -1796,30 +1794,25 @@ vue-showdown@^4.2.0:
     showdown "^2.1.0"
     vue "^3.3.4"
 
-vue-tsc@^2.0.29:
-  version "2.0.29"
-  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-2.0.29.tgz#bf7e9605af9fadec7fd6037d242217f5c6ad2c3b"
-  integrity sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==
+vue-tsc@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-2.1.6.tgz#d93fdc617da6546674301a746fd7089ea6d4543d"
+  integrity sha512-f98dyZp5FOukcYmbFpuSCJ4Z0vHSOSmxGttZJCsFeX0M4w/Rsq0s4uKXjcSRsZqsRgQa6z7SfuO+y0HVICE57Q==
   dependencies:
-    "@volar/typescript" "~2.4.0-alpha.18"
-    "@vue/language-core" "2.0.29"
+    "@volar/typescript" "~2.4.1"
+    "@vue/language-core" "2.1.6"
     semver "^7.5.4"
 
-vue@^3.3.4, vue@^3.4.37:
-  version "3.4.38"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.38.tgz#0ccbb64ed03ef3c4ab73e540793290b18e7c4236"
-  integrity sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==
-  dependencies:
-    "@vue/compiler-dom" "3.4.38"
-    "@vue/compiler-sfc" "3.4.38"
-    "@vue/runtime-dom" "3.4.38"
-    "@vue/server-renderer" "3.4.38"
-    "@vue/shared" "3.4.38"
-
-webpack-sources@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
-  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
+vue@^3.3.4, vue@^3.5.6:
+  version "3.5.6"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.6.tgz#025b1d411627883577457797eff93e85e61ef9c1"
+  integrity sha512-zv+20E2VIYbcJOzJPUWp03NOGFhMmpCKOfSxVTmCYyYFFko48H9tmuQFzYj7tu4qX1AeXlp9DmhIP89/sSxxhw==
+  dependencies:
+    "@vue/compiler-dom" "3.5.6"
+    "@vue/compiler-sfc" "3.5.6"
+    "@vue/runtime-dom" "3.5.6"
+    "@vue/server-renderer" "3.5.6"
+    "@vue/shared" "3.5.6"
 
 webpack-virtual-modules@^0.6.2:
   version "0.6.2"

From 06a826456f9718a7ee34cae82e339d89173d79e8 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 16 Sep 2024 12:33:14 +0200
Subject: [PATCH 269/275] refactor: update date-fns locales files location

---
 app/src/i18n/helpers.ts | 2 +-
 app/vite.config.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/i18n/helpers.ts b/app/src/i18n/helpers.ts
index da6331783..ea9a443b2 100644
--- a/app/src/i18n/helpers.ts
+++ b/app/src/i18n/helpers.ts
@@ -77,6 +77,6 @@ export async function loadLocaleMessages(locale: SupportedLocales) {
 async function loadDateFnsLocale(locale: SupportedLocales) {
   const dateFnsLocaleName = supportedLocales[locale].dateFnsLocale ?? locale
   dateFnsLocale = (
-    await import(`../../node_modules/date-fns/locale/${dateFnsLocaleName}.mjs`)
+    await import(`../../node_modules/date-fns/locale/${dateFnsLocaleName}.js`)
   ).default
 }
diff --git a/app/vite.config.ts b/app/vite.config.ts
index 96e644a45..7ccb71af9 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -69,7 +69,7 @@ export default defineConfig(({ mode }) => {
             }
             // Split date-fns locales
             if (id.includes('date-fns')) {
-              const match = /.*\/date-fns\/locale\/([\w-]+)\/.*\.mjs/.exec(id)
+              const match = /.*\/date-fns\/locale\/([\w-]+)\/.*\.js/.exec(id)
               if (match) {
                 if (supportedDatefnsLocales.includes(match[1])) {
                   return `locales/${match[1]}/date-fns`

From 2658c44a1d5ec2a462914d225074a68e0161cf8b Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 16 Sep 2024 13:21:54 +0200
Subject: [PATCH 270/275] feat(Catalog): when no search results warn if
 criterias or propose to add/vote the app to the wishlist

---
 app/src/components/globals/ViewSearch.vue |   4 +-
 app/src/i18n/locales/en.json              |   2 +
 app/src/views/app/AppCatalog.vue          | 179 +++++++++++++---------
 3 files changed, 110 insertions(+), 75 deletions(-)

diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index 770625df9..2f5ab7889 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -20,7 +20,7 @@ const slots = defineSlots<{
   'top-bar-buttons': any
   top: any
   'alert-message': any
-  'forced-default'?: any
+  'forced-default'?: (props: { noItemsMessage?: string }) => any
   default: any
   bot: any
   skeleton: any
@@ -70,7 +70,7 @@ const noItemsMessage = computed(() => {
 
     <slot name="top" />
 
-    <slot name="forced-default">
+    <slot name="forced-default" v-bind="{ noItemsMessage }">
       <YAlert
         v-if="noItemsMessage"
         alert
diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index 3e0748a0a..df2dcec54 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -188,6 +188,8 @@
     "both": "Both",
     "cancel": "Cancel",
     "catalog": "Catalog",
+    "catalog_partial_search": "Try to remove all criterias to see if the app you're searching for is available.",
+    "catalog_wishlist": "Looks like the app you're searching for is not yet available in the catalog.\n You can propose it in the [apps wishlist](https://apps.yunohost.org/wishlist?search={search}) or vote for it if it is already there.",
     "certificate": "Certificate",
     "certificate_manage": "Manage SSL certificate",
     "check": "Check",
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index a8fcd0163..d0df588a9 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
+import { VueShowdown } from 'vue-showdown'
 
 import api from '@/api'
 import CardDeckFeed from '@/components/CardDeckFeed.vue'
@@ -116,6 +117,12 @@ const [search, filteredApps] = useSearch(
   },
 )
 
+const isPartialSearch = computed(() => {
+  return !(['quality', 'category', 'subtag'] as const).every(
+    (prop) => props[prop] === 'all',
+  )
+})
+
 const form = ref({ url: '' })
 const fields = {
   url: {
@@ -228,8 +235,8 @@ const onCustomInstallClick = onSubmit(async () => {
     </template>
 
     <!-- CATEGORIES CARDS -->
-    <template v-if="category === null" #forced-default>
-      <BCardGroup deck tag="ul" class="p-0 m-0">
+    <template #forced-default="{ noItemsMessage }">
+      <BCardGroup v-if="category === null" deck tag="ul" class="p-0 m-0">
         <BCard
           v-for="cat in categories.slice(1)"
           :key="cat.text"
@@ -246,81 +253,107 @@ const onCustomInstallClick = onSubmit(async () => {
           }}</BCardText>
         </BCard>
       </BCardGroup>
-    </template>
-
-    <CardDeckFeed v-if="filteredApps">
-      <BCard
-        v-for="(app, i) in filteredApps"
-        :key="app.id"
-        tag="article"
-        :aria-labelledby="`${app.id}-title`"
-        :aria-describedby="`${app.id}-desc`"
-        tabindex="0"
-        :aria-posinset="i + 1"
-        :aria-setsize="filteredApps.length"
-        no-body
-        class="app-card"
-      >
-        <BCardBody class="d-flex">
-          <BImg
-            v-if="app.logoHash"
-            class="app-logo rounded"
-            :src="`./applogos/${app.logoHash}.png`"
-          />
 
-          <div>
-            <BCardTitle :id="`${app.id}-title`" class="d-flex mb-2">
-              <BLink
-                :to="{ name: 'app-install', params: { id: app.id } }"
-                class="card-link"
-              >
-                {{ app.name }}
-              </BLink>
+      <CardDeckFeed v-else-if="filteredApps">
+        <BCard
+          v-for="(app, i) in filteredApps"
+          :key="app.id"
+          tag="article"
+          :aria-labelledby="`${app.id}-title`"
+          :aria-describedby="`${app.id}-desc`"
+          tabindex="0"
+          :aria-posinset="i + 1"
+          :aria-setsize="filteredApps.length"
+          no-body
+          class="app-card"
+        >
+          <BCardBody class="d-flex">
+            <BImg
+              v-if="app.logoHash"
+              class="app-logo rounded"
+              :src="`./applogos/${app.logoHash}.png`"
+            />
+
+            <div :id="`${app.id}-card`">
+              <BCardTitle :id="`${app.id}-title`" class="d-flex mb-2">
+                <BLink
+                  :to="{ name: 'app-install', params: { id: app.id } }"
+                  class="card-link"
+                >
+                  {{ app.name }}
+                </BLink>
 
-              <small
-                v-if="app.quality.state !== 'working' || app.highQuality"
-                class="d-flex align-items-center ms-2 position-relative"
-              >
-                <BBadge
-                  v-if="app.quality.state !== 'working'"
-                  v-b-popover.hover.bottom="
-                    $t(`app_state_${app.quality.state}_explanation`)
-                  "
-                  :variant="app.quality.variant"
+                <small
+                  v-if="app.quality.state !== 'working' || app.highQuality"
+                  class="d-flex align-items-center ms-2 position-relative"
                 >
-                  {{ $t(`app_state_${app.quality.state}`) }}
-                </BBadge>
-
-                <YIcon
-                  v-if="app.highQuality"
-                  v-b-popover.hover.bottom="
-                    $t(`app_state_highquality_explanation`)
-                  "
-                  iname="star"
-                  class="star"
-                />
-              </small>
-            </BCardTitle>
-
-            <BCardText :id="`${app.id}-desc`">
-              {{ app.description }}
-            </BCardText>
-
-            <BCardText
-              v-if="!app.maintained"
-              class="align-self-end position-relative mt-auto"
-            >
-              <span
-                v-b-popover.hover.top="$t('orphaned_details')"
-                class="alert-warning p-1"
+                  <BPopover
+                    v-if="app.quality.state !== 'working'"
+                    :click="false"
+                    strategy="fixed"
+                  >
+                    <template #target>
+                      <BBadge :variant="app.quality.variant" tabindex="0">
+                        {{ $t(`app_state_${app.quality.state}`) }}
+                      </BBadge>
+                    </template>
+
+                    {{ $t(`app_state_${app.quality.state}_explanation`) }}
+                  </BPopover>
+
+                  <BPopover
+                    v-if="app.highQuality"
+                    :click="false"
+                    strategy="fixed"
+                  >
+                    <template #target>
+                      <YIcon iname="star" class="star" tabindex="0" />
+                    </template>
+
+                    {{ $t(`app_state_highquality_explanation`) }}
+                  </BPopover>
+                </small>
+              </BCardTitle>
+
+              <BCardText :id="`${app.id}-desc`">
+                {{ app.description }}
+              </BCardText>
+
+              <BCardText
+                v-if="!app.maintained"
+                class="align-self-end position-relative mt-auto"
               >
-                <YIcon iname="warning" /> {{ $t('orphaned') }}
-              </span>
-            </BCardText>
-          </div>
-        </BCardBody>
-      </BCard>
-    </CardDeckFeed>
+                <BPopover :click="false" strategy="fixed">
+                  <template #target>
+                    <span class="alert-warning p-1">
+                      <YIcon iname="warning" /> {{ $t('orphaned') }}
+                    </span>
+                  </template>
+
+                  {{ $t('orphaned_details') }}
+                </BPopover>
+              </BCardText>
+            </div>
+          </BCardBody>
+        </BCard>
+      </CardDeckFeed>
+
+      <template v-else>
+        <YAlert
+          v-if="noItemsMessage"
+          alert
+          icon="exclamation-triangle"
+          variant="warning"
+        >
+          {{ noItemsMessage }}
+          <div v-if="isPartialSearch">{{ t('catalog_partial_search') }}</div>
+        </YAlert>
+
+        <YAlert v-if="!isPartialSearch">
+          <VueShowdown :markdown="t('catalog_wishlist', { search })" />
+        </YAlert>
+      </template>
+    </template>
 
     <template #bot>
       <!-- INSTALL CUSTOM APP -->

From e53f0e2ff7b01696ae198430ad201ef6dd91a4f1 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 16 Sep 2024 13:33:31 +0200
Subject: [PATCH 271/275] feat(AppInstall): if app lowquality or not working,
 display a message and link to its catalog page for upvote

---
 app/src/i18n/locales/en.json     |  3 ++-
 app/src/views/app/AppInstall.vue | 17 ++++++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index df2dcec54..d895472d9 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -157,7 +157,8 @@
                 }
             },
             "stop": "Cancel next app upgrades"
-        }
+        },
+        "upvote": "If you'd like to draw attention to this application, you can vote for it on its [catalog page](https://apps.yunohost.org/app/{id})."
     },
     "app_choose_category": "Choose a category",
     "app_info_access_desc": "Groups / users currently allowed to access this app:",
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index ddfa68957..52d9575b6 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -201,10 +201,10 @@ const performInstall = onSubmit(async (onError) => {
           </dl>
         </template>
 
-        <p
-          v-if="app.quality.state === 'lowquality'"
-          v-t="'app.install.problems.lowquality'"
-        />
+        <div v-if="app.quality.state === 'lowquality'">
+          <p v-t="'app.install.problems.lowquality'" />
+          <VueShowdown class="mb-3" :markdown="t('app.upvote', { id })" />
+        </div>
 
         <VueShowdown v-if="app.preInstall" :markdown="app.preInstall" />
       </YAlert>
@@ -238,12 +238,15 @@ const performInstall = onSubmit(async (onError) => {
       <YAlert v-else-if="app.hasDanger" variant="danger" class="my-4">
         <h2>{{ $t('app.install.notifs.pre.danger') }}</h2>
 
-        <p
+        <div
           v-if="
             ['inprogress', 'broken', 'thirdparty'].includes(app.quality.state)
           "
-          v-t="'app.install.problems.' + app.quality.state"
-        />
+        >
+          <p v-t="'app.install.problems.' + app.quality.state" />
+          <VueShowdown class="mb-3" :markdown="t('app.upvote', { id })" />
+        </div>
+
         <p v-if="!app.requirements.ram.pass">
           {{ $t('app.install.problems.ram', app.requirements.ram.values) }}
         </p>

From 8efa2e4e11c4cfb2e7cd692fb2873d6f21c98cf4 Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Mon, 16 Sep 2024 18:39:14 +0200
Subject: [PATCH 272/275] Update changelog for 12.0.3

---
 debian/changelog              | 17 +++++++++++++++++
 maintenance/make_changelog.sh |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/debian/changelog b/debian/changelog
index a160fb657..05a5a29ec 100644
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,3 +1,20 @@
+yunohost-admin (12.0.3) testing; urgency=low
+
+  - Epic refactoring to Vue3 and typescript ([#575](http://github.com/YunoHost/yunohost-admin/pull/575))
+  - domain/apps: improve the flow of adding a subdomain during app install: the 'domain add' view now shows an explicit option for subdomains, with the ability to auto-attempt lets encrypt cert, and be able to add such a subdomain from a modal during app install ([#579](http://github.com/YunoHost/yunohost-admin/pull/579))
+  - permissions: Ask for confirmation when trying to self-remove from the admin group ([#582](http://github.com/YunoHost/yunohost-admin/pull/582))
+  - apps: during install, display antifeature details when they are provided by the app ([#582](http://github.com/YunoHost/yunohost-admin/pull/582))
+  - apps: mention the wishlist/vote system in catalog ([#583](http://github.com/YunoHost/yunohost-admin/pull/583))
+  - general: add TOS links and acknowledgement during postinstall, dyndns registration ([#580](http://github.com/YunoHost/yunohost-admin/pull/580))
+  - dns: Make auto dns feature optional ([#581](http://github.com/YunoHost/yunohost-admin/pull/581))
+  - chore: Update JS dependencies ([#584](http://github.com/YunoHost/yunohost-admin/pull/584))
+  - i18n: fix a few strings that were only partially translatable ([#582](http://github.com/YunoHost/yunohost-admin/pull/582))
+  - i18n: remove count info in `items` (6ef1d11b)
+
+  Thanks to all contributors <3 ! (axolotle)
+
+ -- Alexandre Aubin <alex.aubin@mailoo.org>  Mon, 16 Sep 2024 18:25:57 +0200
+
 yunohost-admin (12.0.2) testing; urgency=low
 
   - config panels: fix panel help message not being displayed (7859b221)
diff --git a/maintenance/make_changelog.sh b/maintenance/make_changelog.sh
index a24ccb08c..b67c1dedd 100644
--- a/maintenance/make_changelog.sh
+++ b/maintenance/make_changelog.sh
@@ -5,7 +5,7 @@ REPO_URL=$(git remote get-url origin)
 ME=$(git config --get user.name)
 EMAIL=$(git config --get user.email)
 
-LAST_RELEASE=$(git tag --list 'debian/11.*'  --sort="v:refname" | tail -n 1)
+LAST_RELEASE=$(git tag --list 'debian/12.*'  --sort="v:refname" | tail -n 1)
 
 echo "$REPO ($VERSION) $RELEASE; urgency=low"
 echo ""

From 6dde7f1b8ceba38198a6ceb6bdcd38941f5bdf23 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 16 Sep 2024 23:20:54 +0200
Subject: [PATCH 273/275] fix: v-b-tooltip doesn't work on build, use Popover
 component instead

---
 app/src/views/domain/DomainList.vue | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index cb09ba494..4c11cb3bb 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -45,14 +45,12 @@ const [search, filteredTree] = useSearch(domainsTree, (s, node) =>
               </span>
             </BLink>
 
-            <small
-              v-if="data.name === mainDomain"
-              v-b-tooltip.hover
-              :title="$t('domain.types.main_domain')"
-              class="ms-1"
-            >
-              <YIcon iname="star" />
-            </small>
+            <BPopover v-if="data.name === mainDomain" :click="false">
+              <template #target>
+                <small class="ms-1"><YIcon iname="star" /></small>
+              </template>
+              {{ $t('domain.types.main_domain') }}
+            </BPopover>
           </h5>
         </div>
       </template>

From 0cf55c5b49b4aeffd146d4194d7d6daf602f2616 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 16 Sep 2024 23:26:02 +0200
Subject: [PATCH 274/275] fix: FormField links

---
 app/src/components/globals/FormField.vue         | 2 +-
 app/src/components/globals/FormFieldMultiple.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index fe145e6aa..135808937 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -182,7 +182,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
         <div class="d-flex">
           <BLink
             v-if="link"
-            :to="'name' in link ? link.name : undefined"
+            :to="'name' in link ? { name: link.name } : undefined"
             :href="'href' in link ? link.href : undefined"
             class="ms-auto"
           >
diff --git a/app/src/components/globals/FormFieldMultiple.vue b/app/src/components/globals/FormFieldMultiple.vue
index 6c0aee362..9eb2adec5 100644
--- a/app/src/components/globals/FormFieldMultiple.vue
+++ b/app/src/components/globals/FormFieldMultiple.vue
@@ -209,7 +209,7 @@ function updateElement(index: number, newValue: ArrInnerType<MV>) {
           <div class="d-flex">
             <BLink
               v-if="link"
-              :to="'name' in link ? link.name : undefined"
+              :to="'name' in link ? { name: link.name } : undefined"
               :href="'href' in link ? link.href : undefined"
               class="ms-auto"
             >

From b7507808e09adc4f8d1bcaae68aca4b5723f05bf Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Wed, 25 Sep 2024 20:58:11 +0200
Subject: [PATCH 275/275] Update changelog for 12.0.3.1

---
 debian/changelog | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/debian/changelog b/debian/changelog
index 05a5a29ec..5c6d87754 100644
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,3 +1,12 @@
+yunohost-admin (12.0.3.1) testing; urgency=low
+
+  - fix: blank 'domains' page / v-b-tooltip doesn't work on build, use Popover component instead (6dde7f1b)
+  - fix: FormField links (0cf55c5b)
+
+  Thanks to all contributors <3 ! (axolotle)
+
+ -- Alexandre Aubin <alex.aubin@mailoo.org>  Wed, 25 Sep 2024 20:57:31 +0200
+
 yunohost-admin (12.0.3) testing; urgency=low
 
   - Epic refactoring to Vue3 and typescript ([#575](http://github.com/YunoHost/yunohost-admin/pull/575))