diff --git a/app/.eslintrc.js b/app/.eslintrc.js
index 728ddd1a..e703f821 100644
--- a/app/.eslintrc.js
+++ b/app/.eslintrc.js
@@ -5,14 +5,22 @@ module.exports = {
     node: true,
   },
   extends: [
-    'plugin:vue/strongly-recommended',
+    'plugin:vue/vue3-recommended',
     'eslint:recommended',
+    '@vue/eslint-config-typescript',
     'plugin:prettier/recommended',
   ],
   rules: {
-    'no-unused-vars': [
+    'vue/no-v-html': 'off',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
       'warn',
-      { varsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
+      {
+        varsIgnorePattern: '^_',
+        argsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+      },
     ],
+    'no-console': ['error', { allow: ['warn', 'error'] }],
   },
 }
diff --git a/app/components.d.ts b/app/components.d.ts
new file mode 100644
index 00000000..1d1de8ad
--- /dev/null
+++ b/app/components.d.ts
@@ -0,0 +1,125 @@
+/* eslint-disable */
+// @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']
+    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']
+    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']
+    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']
+    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']
+    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']
+    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']
+    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']
+    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']
+    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']
+  }
+}
diff --git a/app/env.d.ts b/app/env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /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 b7974225..d8d163bc 100644
--- a/app/index.html
+++ b/app/index.html
@@ -22,6 +22,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/overrides.d.ts b/app/overrides.d.ts
new file mode 100644
index 00000000..fcc095a1
--- /dev/null
+++ b/app/overrides.d.ts
@@ -0,0 +1,22 @@
+import type { Skeleton } from '@/types/commons'
+import 'vue-router'
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    noAuth?: boolean
+    routerParams?: string[]
+    args: { trad?: string; param?: string }
+    breadcrumb?: string[]
+    skeleton?: (Skeleton | string)[] | Skeleton | string
+  }
+}
+
+declare module 'bootstrap-vue-next' {
+  interface BaseColorVariant {
+    best: unknown
+  }
+  interface BaseSize {
+    // `xs` size is available only for BButton
+    xs: unknown
+  }
+}
diff --git a/app/package.json b/app/package.json
index 3bbebb29..359734df 100644
--- a/app/package.json
+++ b/app/package.json
@@ -10,34 +10,41 @@
     "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": "^4.5.13",
-    "@fontsource/firago": "^4.5.3",
-    "bootstrap-vue": "^2.22.0",
-    "date-fns": "^2.29.3",
+    "@fontsource/fira-code": "^5.0.18",
+    "@fontsource/firago": "^5.0.11",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
+    "@vueuse/core": "^11.0.1",
+    "bootstrap": "^5.3.3",
+    "bootstrap-vue-next": "^0.24.7",
+    "date-fns": "^3.6.0",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
-    "vue": "^2.7.14",
-    "vue-i18n": "^8.28.2",
-    "vue-router": "^3.6.5",
-    "vue-showdown": "^2.4.1",
-    "vuelidate": "^0.7.7",
-    "vuex": "^3.6.2"
+    "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-vue2": "^2.2.0",
-    "bootstrap": "^4.6.0",
-    "eslint": "^8.36.0",
+    "@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-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.10.0",
-    "popper.js": "^1.16.0",
-    "portal-vue": "^2.1.7",
-    "prettier": "^3.2.5",
-    "sass": "^1.60.0",
-    "vite": "^4.5.3"
+    "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%",
diff --git a/app/src/App.vue b/app/src/App.vue
index 80bd7361..be09de55 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,3 +1,72 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import { useInfos } from '@/composables/useInfos'
+import { useRequests } from '@/composables/useRequests'
+import { useSettings } from '@/composables/useSettings'
+import { HistoryConsole } from '@/views/_partials'
+
+const { ssoLink, connected, yunohost, logout, onAppCreated } = useInfos()
+const { locked } = useRequests()
+const { spinner, dark } = useSettings()
+
+const ready = ref(false)
+onAppCreated().then(() => (ready.value = true))
+
+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) {
+        spinner.value = 'nyancat'
+        konamistep = 0
+      }
+    } else {
+      konamistep = 0
+    }
+  })
+
+  // April fools easter egg ;)
+  const today = new Date()
+  if (today.getDate() === 1 && today.getMonth() + 1 === 4) {
+    spinner.value = 'magikarp'
+  }
+
+  // Halloween easter egg ;)
+  if (today.getDate() === 31 && today.getMonth() + 1 === 10) {
+    spinner.value = 'spookycat'
+  }
+})
+</script>
+
 <template>
   <div id="app" class="container">
     <!-- HEADER -->
@@ -5,11 +74,10 @@
       <BNavbar>
         <BNavbarBrand
           :to="{ name: 'home' }"
-          :disabled="waiting"
-          exact
+          :disabled="locked"
           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>
@@ -17,19 +85,24 @@
           </span>
         </BNavbarBrand>
 
-        <BNavbarNav class="ml-auto">
+        <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>
 
-          <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>
@@ -39,23 +112,15 @@
     </header>
 
     <!-- MAIN -->
-    <ViewLockOverlay>
-      <YBreadcrumb />
+    <MainLayout v-if="ready" />
 
-      <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" />
-      </main>
-    </ViewLockOverlay>
+    <BModalOrchestrator />
 
     <!-- HISTORY CONSOLE -->
     <HistoryConsole />
 
     <!-- FOOTER -->
+    <div class="mt-4" />
     <footer class="py-3 mt-auto">
       <nav>
         <BNav class="justify-content-center">
@@ -84,7 +149,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>
@@ -94,106 +159,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',
-      'theme',
-      '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')
-    }
-
-    document.documentElement.setAttribute('dark-theme', this.theme) // updates the data-theme attribute
-  },
-}
-</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 {
@@ -218,34 +183,6 @@ header {
   }
 }
 
-main {
-  position: relative;
-
-  // Routes transition
-  .animated {
-    transition: all 0.15s ease-in-out;
-  }
-  .slide-left-enter,
-  .slide-right-leave-active {
-    position: absolute;
-    width: 100%;
-    top: 0;
-    transform: translate(100vw, 0);
-  }
-  .slide-left-leave-active,
-  .slide-right-enter {
-    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
@@ -255,7 +192,6 @@ main {
 footer {
   border-top: $thin-border;
   font-size: $font-size-sm;
-  margin-top: 2rem;
 
   .nav-item {
     & + .nav-item a::before {
diff --git a/app/src/api/api.js b/app/src/api/api.js
deleted file mode 100644
index e7c8e061..00000000
--- a/app/src/api/api.js
+++ /dev/null
@@ -1,238 +0,0 @@
-/**
- * API module.
- * @module api
- */
-
-import store from '@/store'
-import { openWebSocket, getResponseData, handleError } from './handlers'
-
-/**
- * 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"`).
- */
-
-/**
- * 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"
- */
-
-/**
- * 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}
- */
-export function objectToParams(
-  obj,
-  { addLocale = false } = {},
-  formData = false,
-) {
-  const urlParams = formData ? new FormData() : new URLSearchParams()
-  for (const [key, value] of Object.entries(obj)) {
-    if (Array.isArray(value)) {
-      value.forEach((v) => urlParams.append(key, v))
-    } else {
-      urlParams.append(key, value)
-    }
-  }
-  if (addLocale) {
-    urlParams.append('locale', store.getters.locale)
-  }
-  return urlParams
-}
-
-export default {
-  options: {
-    credentials: 'include',
-    mode: 'cors',
-    headers: {
-      // FIXME is it important to keep this previous `Accept` header ?
-      // 'Accept': 'application/json, text/javascript, */*; q=0.01',
-      // Auto header is :
-      // "Accept": "*/*",
-
-      'X-Requested-With': 'XMLHttpRequest',
-    },
-  },
-
-  /**
-   * Generic method to fetch the api without automatic response handling.
-   *
-   * @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.
-   */
-  async fetch(
-    method,
-    uri,
-    data = {},
-    humanKey = null,
-    { wait = true, websocket = true, initial = false, asFormData = false } = {},
-  ) {
-    // `await` because Vuex actions returns promises by default.
-    const request = await store.dispatch('INIT_REQUEST', {
-      method,
-      uri,
-      humanKey,
-      initial,
-      wait,
-      websocket,
-    })
-
-    if (websocket) {
-      await openWebSocket(request)
-    }
-
-    let options = this.options
-    if (method === 'GET') {
-      uri += `${uri.includes('?') ? '&' : '?'}locale=${store.getters.locale}`
-    } else {
-      options = {
-        ...options,
-        method,
-        body: objectToParams(data, { addLocale: true }, true),
-      }
-    }
-
-    const response = await fetch('/yunohost/api/' + uri, options)
-    const responseData = await getResponseData(response)
-    store.dispatch('END_REQUEST', { request, success: response.ok, wait })
-
-    return response.ok
-      ? responseData
-      : handleError(request, response, responseData)
-  },
-
-  /**
-   * Api multiple queries helper.
-   * 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.
-   */
-  async fetchAll(queries, { wait, initial } = {}) {
-    const results = []
-    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),
-        )
-      }
-    } finally {
-      // Stop waiting even if there is an error.
-      if (wait) store.commit('SET_WAITING', false)
-    }
-
-    return results
-  },
-
-  /**
-   * 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.
-   */
-  get(uri, data = null, humanKey = null, options = {}) {
-    options = { websocket: false, wait: false, ...options }
-    if (typeof uri === 'string')
-      return this.fetch('GET', uri, null, 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.
-   */
-  post(uri, data = {}, humanKey = null, options = {}) {
-    if (typeof uri === 'string')
-      return this.fetch('POST', uri, data, humanKey, options)
-    return store.dispatch('POST', { ...uri, data, humanKey, options })
-  },
-
-  /**
-   * 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.
-   */
-  put(uri, data = {}, humanKey = null, options = {}) {
-    if (typeof uri === 'string')
-      return this.fetch('PUT', uri, data, humanKey, options)
-    return store.dispatch('PUT', { ...uri, data, humanKey, options })
-  },
-
-  /**
-   * 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.
-   */
-  delete(uri, data = {}, humanKey = null, options = {}) {
-    if (typeof uri === 'string')
-      return this.fetch('DELETE', uri, data, humanKey, options)
-    return store.dispatch('DELETE', { ...uri, data, humanKey, options })
-  },
-
-  /**
-   * 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>}
-   */
-  tryToReconnect({ attemps = 5, delay = 2000, initialDelay = 0 } = {}) {
-    return new Promise((resolve, reject) => {
-      const api = this
-
-      function reconnect(n) {
-        store
-          .dispatch('GET_YUNOHOST_INFOS')
-          .then(resolve)
-          .catch((err) => {
-            if (err.name === 'APIUnauthorizedError') {
-              reject(err)
-            } else if (n < 1) {
-              reject(err)
-            } else {
-              setTimeout(() => reconnect(n - 1), delay)
-            }
-          })
-      }
-
-      if (initialDelay > 0) setTimeout(() => reconnect(attemps), initialDelay)
-      else reconnect(attemps)
-    })
-  },
-}
diff --git a/app/src/api/api.ts b/app/src/api/api.ts
new file mode 100644
index 00000000..f75c5a57
--- /dev/null
+++ b/app/src/api/api.ts
@@ -0,0 +1,284 @@
+import { useCache, type StorePath } from '@/composables/data'
+import { useInfos } from '@/composables/useInfos'
+import {
+  useRequests,
+  type APIRequestAction,
+  type ReconnectingArgs,
+} from '@/composables/useRequests'
+import { useSettings } from '@/composables/useSettings'
+import type { Obj } from '@/types/commons'
+import {
+  APIBadRequestError,
+  APIUnauthorizedError,
+  type APIError,
+} from './errors'
+import { getError, getResponseData, openWebSocket } from './handlers'
+
+export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'DELETE'
+
+export type HumanKey = {
+  key: string
+  [propName: string]: any
+}
+
+export type APIQuery = {
+  method?: RequestMethod
+  uri: string
+  cachePath?: StorePath
+  data?: Obj
+  humanKey?: string | HumanKey
+  showModal?: boolean
+  websocket?: boolean
+  initial?: boolean
+  asFormData?: boolean
+}
+
+export type APIErrorData = {
+  error: string
+  error_key?: string
+  log_ref?: string
+  traceback?: string
+  name?: string
+}
+
+/**
+ * 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 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: Obj,
+  { addLocale = false, formData = false } = {},
+) {
+  const urlParams = formData ? new FormData() : new URLSearchParams()
+  for (const [key, value] of Object.entries(obj)) {
+    if (Array.isArray(value)) {
+      value.forEach((v) => urlParams.append(key, v))
+    } else {
+      urlParams.append(key, value)
+    }
+  }
+  if (addLocale) {
+    const { locale } = useSettings()
+    urlParams.append('locale', locale.value)
+  }
+  return urlParams
+}
+
+export default {
+  options: {
+    credentials: 'include',
+    mode: 'cors',
+    headers: {
+      // FIXME is it important to keep this previous `Accept` header ?
+      // 'Accept': 'application/json, text/javascript, */*; q=0.01',
+      // Auto header is :
+      // "Accept": "*/*",
+
+      'X-Requested-With': 'XMLHttpRequest',
+    },
+  } as RequestInit,
+
+  /**
+   * Generic method to fetch the api.
+   *
+   * @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 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<T extends any = any>({
+    uri,
+    method = 'GET',
+    cachePath = undefined,
+    data = undefined,
+    humanKey = undefined,
+    showModal = method !== 'GET',
+    websocket = method !== 'GET',
+    initial = false,
+    asFormData = true,
+  }: APIQuery): Promise<T> {
+    const cache = cachePath ? useCache<T>(method, cachePath) : undefined
+    if (method === 'GET' && cache?.content.value !== undefined) {
+      return cache.content.value
+    }
+
+    const { locale } = useSettings()
+    const { startRequest, endRequest } = useRequests()
+
+    const request = startRequest({
+      method,
+      uri,
+      humanKey,
+      initial,
+      showModal,
+      websocket,
+    })
+    if (websocket) {
+      await openWebSocket(request as APIRequestAction)
+    }
+
+    let options = { ...this.options }
+    if (method === 'GET') {
+      uri += `${uri.includes('?') ? '&' : '?'}locale=${locale.value}`
+    } else {
+      options = {
+        ...options,
+        method,
+        body: data
+          ? objectToParams(data, { addLocale: true, formData: asFormData })
+          : null,
+      }
+    }
+
+    const response = await fetch('/yunohost/api/' + uri, options)
+
+    if (!response.ok) {
+      const errorData = await getResponseData<string | APIErrorData>(response)
+      const err = getError(request, response, errorData)
+      endRequest({
+        request,
+        success: false,
+        isFormError: err instanceof APIBadRequestError,
+      })
+      throw err
+    }
+
+    const responseData = await getResponseData<T>(response)
+    cache?.update(responseData)
+    endRequest({ request, success: true })
+
+    if (cache) return cache.content.value as T
+    return responseData
+  },
+
+  /**
+   * Api multiple queries helper.
+   * 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 queries - Array of {@link APIQuery}
+   * @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<T extends any[] = any[]>(
+    queries: APIQuery[],
+    { showModal = false, initial = true } = {},
+  ): 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 as T
+  },
+
+  /**
+   * Api get helper function.
+   *
+   * @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<T extends any = any>(
+    query: string | Omit<APIQuery, 'method' | 'data'>,
+  ): Promise<T> {
+    return this.fetch(typeof query === 'string' ? { uri: query } : query)
+  },
+
+  /**
+   * Api post helper function.
+   *
+   * @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<T extends any = any>(query: Omit<APIQuery, 'method'>): Promise<T> {
+    return this.fetch({ ...query, method: 'POST' })
+  },
+
+  /**
+   * Api put helper function.
+   *
+   * @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<T extends any = any>(query: Omit<APIQuery, 'method'>): Promise<T> {
+    return this.fetch({ ...query, method: 'PUT' })
+  },
+
+  /**
+   * Api delete helper function.
+   *
+   * @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<T extends any = any>(query: Omit<APIQuery, 'method'>): Promise<T> {
+    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
+   *
+   * @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,
+  }: ReconnectingArgs = {}) {
+    const { getYunoHostVersion } = useInfos()
+    return new Promise((resolve, reject) => {
+      function reconnect(n: number) {
+        getYunoHostVersion()
+          .then(resolve)
+          .catch((err: APIError) => {
+            if (err instanceof APIUnauthorizedError) {
+              reject(err)
+            } else if (n < 1) {
+              reject(err)
+            } else {
+              setTimeout(() => reconnect(n - 1), delay)
+            }
+          })
+      }
+      if (initialDelay > 0) setTimeout(() => reconnect(attemps), initialDelay)
+      else reconnect(attemps)
+    })
+  },
+}
diff --git a/app/src/api/errors.js b/app/src/api/errors.js
deleted file mode 100644
index 066c02d8..00000000
--- a/app/src/api/errors.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * API errors definitionss.
- * @module api/errors
- */
-
-import i18n from '@/i18n'
-
-class APIError extends Error {
-  constructor(request, { url, status, statusText }, { error }) {
-    super(
-      error
-        ? error.replaceAll('\n', '<br>')
-        : i18n.t('error_server_unexpected'),
-    )
-    const urlObj = new URL(url)
-    this.name = 'APIError'
-    this.code = status
-    this.status = statusText
-    this.method = request.method
-    this.request = request
-    this.path = urlObj.pathname + urlObj.search
-  }
-
-  log() {
-    /* eslint-disable-next-line */
-    console.error(`${this.name} (${this.code}): ${this.uri}\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'
-  }
-}
-
-// 0 — (means "the connexion has been closed" apparently)
-class APIConnexionError extends APIError {
-  constructor(method, response) {
-    super(method, response, { error: i18n.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
-    this.data = errorData
-  }
-}
-
-// 401 — Unauthorized
-class APIUnauthorizedError extends APIError {
-  constructor(method, response, errorData) {
-    super(method, response, { error: i18n.t('unauthorized') })
-    this.name = 'APIUnauthorizedError'
-  }
-}
-
-// 404 — Not Found
-class APINotFoundError extends APIError {
-  constructor(method, response, errorData) {
-    errorData.error = i18n.t('api_not_found')
-    super(method, response, errorData)
-    this.name = 'APINotFoundError'
-  }
-}
-
-// 500 — Server Internal Error
-class APIInternalError extends APIError {
-  constructor(method, response, errorData) {
-    super(method, 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.t('api_not_responding') })
-    this.name = 'APINotRespondingError'
-  }
-}
-
-// Temp factory
-const errors = {
-  [undefined]: APIError,
-  log: APIErrorLog,
-  0: APIConnexionError,
-  400: APIBadRequestError,
-  401: APIUnauthorizedError,
-  404: APINotFoundError,
-  500: APIInternalError,
-  502: APINotRespondingError,
-}
-
-export {
-  errors as default,
-  APIError,
-  APIErrorLog,
-  APIBadRequestError,
-  APIConnexionError,
-  APIInternalError,
-  APINotFoundError,
-  APINotRespondingError,
-  APIUnauthorizedError,
-}
diff --git a/app/src/api/errors.ts b/app/src/api/errors.ts
new file mode 100644
index 00000000..9b8c7d09
--- /dev/null
+++ b/app/src/api/errors.ts
@@ -0,0 +1,165 @@
+/**
+ * API errors definitionss.
+ * @module api/errors
+ */
+
+import type { APIRequest } from '@/composables/useRequests'
+import i18n from '@/i18n'
+import type { APIErrorData, RequestMethod } from './api'
+
+class APIError extends Error {
+  name = 'APIError'
+  code: number
+  status: string
+  method: RequestMethod
+  requestId: string
+  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.code = status
+    this.status = statusText
+    this.method = request.method
+    this.requestId = request.id
+    this.path = urlObj.pathname + urlObj.search
+  }
+
+  log() {
+    /* eslint-disable-next-line */
+    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 {
+  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 {
+  name = 'APIConnexionError'
+  constructor(
+    request: APIRequest,
+    response: Response,
+    _errorData: APIErrorData,
+  ) {
+    super(request, response, {
+      error: i18n.global.t('error_connection_interrupted'),
+    })
+  }
+}
+
+// 400 — Bad Request
+class APIBadRequestError extends APIError {
+  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 {
+  name = 'APIUnauthorizedError'
+
+  constructor(
+    request: APIRequest,
+    response: Response,
+    _errorData: APIErrorData,
+  ) {
+    super(request, response, { error: i18n.global.t('unauthorized') })
+  }
+}
+
+// 404 — Not Found
+class APINotFoundError extends APIError {
+  name = 'APINotFoundError'
+
+  constructor(
+    request: APIRequest,
+    response: Response,
+    errorData: APIErrorData,
+  ) {
+    errorData.error = i18n.global.t('api_not_found')
+    super(request, response, errorData)
+  }
+}
+
+// 500 — Server Internal Error
+class APIInternalError extends APIError {
+  name = 'APIInternalError'
+  traceback: string | null
+
+  constructor(
+    request: APIRequest,
+    response: Response,
+    errorData: APIErrorData,
+  ) {
+    super(request, response, errorData)
+    this.traceback = errorData.traceback || null
+  }
+}
+
+// 502 — Bad gateway (means API is down)
+class APINotRespondingError extends APIError {
+  name = 'APINotRespondingError'
+
+  constructor(
+    request: APIRequest,
+    response: Response,
+    _errorData: APIErrorData,
+  ) {
+    super(request, response, { error: i18n.global.t('api_not_responding') })
+  }
+}
+
+// Temp factory
+const errors = {
+  default: APIError,
+  log: APIErrorLog,
+  0: APIConnexionError,
+  400: APIBadRequestError,
+  401: APIUnauthorizedError,
+  404: APINotFoundError,
+  500: APIInternalError,
+  502: APINotRespondingError,
+}
+
+export {
+  APIBadRequestError,
+  APIConnexionError,
+  APIError,
+  APIErrorLog,
+  APIInternalError,
+  APINotFoundError,
+  APINotRespondingError,
+  APIUnauthorizedError,
+  errors as default,
+}
diff --git a/app/src/api/handlers.js b/app/src/api/handlers.js
deleted file mode 100644
index 2ec6d5d1..00000000
--- a/app/src/api/handlers.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * API handlers.
- * @module api/handlers
- */
-
-import store from '@/store'
-import errors, { APIError } from './errors'
-
-/**
- * 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.
- */
-export async function getResponseData(response) {
-  // FIXME the api should always return json as response
-  const responseText = await response.text()
-  try {
-    return JSON.parse(responseText)
-  } catch {
-    return responseText
-  }
-}
-
-/**
- * Opens a WebSocket connection to the server in case it sends messages.
- * Currently, the connection is closed by the server right after an API call so
- * 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.
- */
-export function openWebSocket(request) {
-  return new Promise((resolve) => {
-    const ws = new WebSocket(
-      `wss://${store.getters.host}/yunohost/api/messages`,
-    )
-    ws.onmessage = ({ data }) => {
-      store.dispatch('DISPATCH_MESSAGE', {
-        request,
-        messages: JSON.parse(data),
-      })
-    }
-    // ws.onclose = (e) => {}
-    ws.onopen = resolve
-    // Resolve also on error so the actual fetch may be called.
-    ws.onerror = resolve
-  })
-}
-
-/**
- * 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.
- */
-export async function handleError(request, response, errorData) {
-  let errorCode = response.status in errors ? response.status : undefined
-  if (typeof errorData === 'string') {
-    // FIXME API: Patching errors that are plain text or html.
-    errorData = { error: errorData }
-  }
-  if ('log_ref' in errorData) {
-    // Define a special error so it won't get caught as a `APIBadRequestError`.
-    errorCode = 'log'
-  }
-
-  // This error can be catched by a view otherwise it will be catched by the `onUnhandledAPIError` handler.
-  throw 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) {
-  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/handlers.ts b/app/src/api/handlers.ts
new file mode 100644
index 00000000..efb82103
--- /dev/null
+++ b/app/src/api/handlers.ts
@@ -0,0 +1,99 @@
+/**
+ * API handlers.
+ * @module api/handlers
+ */
+
+import errors from '@/api/errors'
+import { useInfos } from '@/composables/useInfos'
+import type { APIRequest, APIRequestAction } from '@/composables/useRequests'
+import { toEntries } from '@/helpers/commons'
+import { STATUS_VARIANT, isOkStatus } from '@/helpers/yunohostArguments'
+import type { StateStatus, Obj } from '@/types/commons'
+import type { APIErrorData } from './api'
+
+/**
+ * Try to get response content as json and if it's not as text.
+ *
+ * @param response - A fetch `Response` object.
+ * @returns Parsed response's json or response's text.
+ */
+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)
+  } catch {
+    return responseText as T
+  }
+}
+
+/**
+ * Opens a WebSocket connection to the server in case it sends messages.
+ * Currently, the connection is closed by the server right after an API call so
+ * we have to open it for every calls.
+ * Messages are dispatch to the store so it can handle them.
+ *
+ * @param request - Request info data.
+ * @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://${host.value}/yunohost/api/messages`)
+    ws.onmessage = ({ data }) => {
+      const messages: Record<StateStatus, 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 (!isOkStatus(status)) request.action[`${status}s`]++
+      })
+    }
+    // ws.onclose = (e) => {}
+    ws.onopen = resolve
+    // Resolve also on error so the actual fetch may be called.
+    ws.onerror = resolve
+  })
+}
+
+/**
+ * Handler for API errors.
+ *
+ * @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 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 }
+  }
+  if ('log_ref' in errorData) {
+    // Define a special error so it won't get caught as a `APIBadRequestError`.
+    errorCode = 'log'
+  }
+
+  // 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)
+}
diff --git a/app/src/api/index.js b/app/src/api/index.js
deleted file mode 100644
index c3f1ae7f..00000000
--- a/app/src/api/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default, objectToParams } from './api'
-export { handleError, registerGlobalErrorHandlers } from './handlers'
diff --git a/app/src/api/index.ts b/app/src/api/index.ts
new file mode 100644
index 00000000..3659bfe2
--- /dev/null
+++ b/app/src/api/index.ts
@@ -0,0 +1,2 @@
+export { default, objectToParams } from './api'
+export { getError } from './handlers'
diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
deleted file mode 100644
index aa0dc19f..00000000
--- a/app/src/components/AdressInputSelect.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <BInputGroup v-bind="$attrs">
-    <InputItem
-      :id="id"
-      :value="value.localPart"
-      :placeholder="placeholder"
-      :state="state"
-      :aria-describedby="id + 'local-part-desc'"
-      @input="onInput('localPart', $event)"
-      @blur="$parent.$emit('touch')"
-    />
-
-    <BInputGroupAppend>
-      <BInputGroupText>{{ value.separator }}</BInputGroupText>
-    </BInputGroupAppend>
-
-    <BInputGroupAppend>
-      <SelectItem
-        :value="value.domain"
-        :choices="choices"
-        :aria-describedby="id + 'domain-desc'"
-        @input="onInput('domain', $event)"
-        @blur="$parent.$emit('touch')"
-      />
-    </BInputGroupAppend>
-
-    <span
-      class="sr-only"
-      :id="id + 'local-part-desc'"
-      v-t="'address.local_part_description.' + type"
-    />
-    <span
-      class="sr-only"
-      :id="id + 'domain-desc'"
-      v-t="'address.domain_description.' + type"
-    />
-  </BInputGroup>
-</template>
-
-<script>
-export default {
-  name: 'AdressInputSelect',
-
-  inheritAttrs: false,
-
-  props: {
-    // `value` is actually passed thru the `v-model` directive
-    value: { 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, value) {
-      this.$emit('input', {
-        ...this.value,
-        [key]: value,
-      })
-    },
-  },
-}
-</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/CardCollapse.vue b/app/src/components/CardCollapse.vue
index ef647168..abbb372b 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>
@@ -9,7 +40,7 @@
             class="card-collapse-button"
           >
             {{ title }}
-            <YIcon class="ml-auto" iname="chevron-right" />
+            <YIcon class="ms-auto" iname="chevron-right" />
           </BButton>
         </h2>
       </slot>
@@ -21,36 +52,9 @@
   </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 {
+  :deep(.card-header) {
     padding: 0;
   }
 
@@ -78,7 +82,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/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index 54b157d5..6d5c37d1 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -1,86 +1,94 @@
-<script>
+<script setup lang="ts">
+import { BCardGroup } from 'bootstrap-vue-next'
+import {
+  h,
+  nextTick,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onMounted,
+  ref,
+} from 'vue'
+
 // Implementation of the feed pattern
 // https://www.w3.org/WAI/ARIA/apg/patterns/feed/
 
-export default {
-  name: 'CardDeckFeed',
+const props = withDefaults(defineProps<{ stacks?: number }>(), { stacks: 21 })
+const slots = defineSlots<{
+  default: any
+}>()
 
-  props: {
-    stacks: { type: Number, default: 21 },
-  },
+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)
 
-  data() {
-    return {
-      busy: false,
-      range: this.stacks,
-      childrenCount: this.$slots.default.length,
-    }
-  },
-
-  methods: {
-    getTopParent(prev) {
-      return prev.parentElement === this.$refs.feed
-        ? prev
-        : this.getTopParent(prev.parentElement)
-    },
-
-    onScroll() {
-      const elem = this.$refs.feed
-      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
-        })
-      }
-    },
-
-    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
-    },
-  },
-
-  mounted() {
-    window.addEventListener('scroll', this.onScroll)
-    this.$refs.feed.addEventListener('keydown', this.onKeydown)
-    this.onScroll()
-  },
-
-  beforeUpdate() {
-    const slots = this.$slots.default
-    if (this.childrenCount !== slots.length) {
-      this.range = this.stacks
-      this.childrenCount = slots.length
-    }
-  },
-
-  render(h) {
-    return h(
-      'BCardGroup',
-      {
-        attrs: { role: 'feed', 'aria-busy': this.busy.toString() },
-        props: { deck: true },
-        ref: 'feed',
-      },
-      this.$slots.default.slice(0, this.range),
-    )
-  },
-
-  beforeDestroy() {
-    window.removeEventListener('scroll', this.onScroll)
-    this.$refs.feed.removeEventListener('keydown', this.onKeydown)
-  },
+function getTopParent(prev: HTMLElement): HTMLElement {
+  return prev.parentElement === feedElem.value?.$el
+    ? prev
+    : getTopParent(prev.parentElement!)
 }
+
+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
+    })
+  }
+}
+
+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
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', onScroll)
+  feedElem.value?.$el.addEventListener('keydown', onKeydown)
+  onScroll()
+})
+
+onBeforeUpdate(() => {
+  const children = slots.default()[0].children
+  if (childrenCount.value !== children.length) {
+    range.value = props.stacks
+    childrenCount.value = children.length
+  }
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', onScroll)
+  feedElem.value?.$el.removeEventListener('keydown', 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>
+  <root />
+</template>
diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
deleted file mode 100644
index cd868fad..00000000
--- a/app/src/components/ConfigPanel.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <AbstractForm
-    v-if="panel"
-    v-bind="{
-      id: panel.id + '-form',
-      validation,
-      serverError: panel.serverError,
-    }"
-    @submit.prevent.stop="onApply"
-    :no-footer="!panel.hasApplyButton"
-  >
-    <slot name="tab-top" />
-
-    <template v-if="panel.help" #disclaimer>
-      <div class="alert alert-info" v-html="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>
-
-<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('submit', {
-        id: panelId,
-        form: this.forms[panelId],
-      })
-    },
-
-    onAction(sectionId, actionId, actionFields) {
-      const panelId = this.panel.id
-      const actionFieldsKeys = Object.keys(actionFields)
-
-      this.$emit('submit', {
-        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;
-  border-bottom: solid $border-width $gray-500;
-}
-::v-deep .panel-section:not(:last-child) {
-  margin-bottom: 3rem;
-}
-</style>
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 1ac211d6..a99e2f20 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -1,72 +1,88 @@
+<script
+  setup
+  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'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const currentRoute = useRoute()
+const props = defineProps<{
+  panel: ConfigPanel<NestedMV, MV>
+  routes: ConfigPanels<NestedMV, MV>['routes']
+  validations: FormValidation<NestedMV>
+}>()
+
+const emit = defineEmits<{
+  apply: [action?: KeyOfStr<typeof props.panel.fields>]
+}>()
+
+const slots = defineSlots<{
+  'tab-top'?: any
+  'tab-before'?: any
+  default?: any
+  'tab-after'?: any
+}>()
+
+const modelValue = defineModel<NestedMV>({ required: true })
+</script>
+
 <template>
-  <div class="config-panel">
-    <RoutableTabs
-      v-if="routes_.length > 1"
-      :routes="routes_"
-      v-bind="{ panels, forms, v: $v, ...$attrs }"
-      v-on="$listeners"
+  <BCard v-if="routes.length > 1" no-body class="config-panel">
+    <BCardHeader tag="nav">
+      <BNav card-header fill pills>
+        <BNavItem
+          v-for="route in routes"
+          :key="route.text"
+          :to="route.to"
+          :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" -->
+          <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>
-
-<script>
-import { validationMixin } from 'vuelidate'
-
-export default {
-  name: 'ConfigPanels',
-
-  inheritAttrs: false,
-
-  components: {
-    RoutableTabs: () => import('@/components/RoutableTabs.vue'),
-  },
-
-  mixins: [validationMixin],
-
-  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 },
-  },
-
-  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 829f2d3c..3ebd4715 100644
--- a/app/src/components/LazyRenderer.vue
+++ b/app/src/components/LazyRenderer.vue
@@ -1,76 +1,88 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    unrender?: boolean
+    minHeight?: number
+    renderDelay?: number
+    unrenderDelay?: number
+    rootMargin?: string
+  }>(),
+  {
+    unrender: true,
+    minHeight: 0,
+    renderDelay: 100,
+    unrenderDelay: 2000,
+    rootMargin: '300px',
+  },
+)
+
+defineSlots<{
+  default: any
+}>()
+
+const observer = ref<IntersectionObserver | null>(null)
+const render = ref(false)
+const fixedMinHeight = ref(props.minHeight)
+const rootElem = ref<HTMLDivElement | null>(null)
+
+onMounted(() => {
+  let unrenderTimer: number
+  let renderTimer: number
+
+  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 = window.setTimeout(
+          () => {
+            render.value = true
+          },
+          props.unrender ? props.renderDelay : 0,
+        )
+
+        if (!props.unrender) {
+          // Stop listening to intersections after first appearance if unrendering is not activated
+          observer.value!.disconnect()
+        }
+      } else if (props.unrender) {
+        clearTimeout(renderTimer)
+        // Hide the component after a delay if it's no longer in the viewport
+        unrenderTimer = window.setTimeout(() => {
+          fixedMinHeight.value = rootElem.value!.clientHeight
+          render.value = false
+        }, props.unrenderDelay)
+      }
+    },
+    { rootMargin: props.rootMargin },
+  )
+
+  observer.value.observe(rootElem.value!)
+})
+
+onBeforeUnmount(() => {
+  observer.value!.disconnect()
+})
+</script>
+
 <template>
-  <div class="lazy-renderer" :style="`min-height: ${fixedMinHeight}px`">
+  <div
+    ref="rootElem"
+    class="lazy-renderer"
+    :style="`min-height: ${fixedMinHeight}px`"
+  >
     <slot v-if="render" />
   </div>
 </template>
-
-<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' },
-  },
-
-  data() {
-    return {
-      observer: null,
-      render: false,
-      fixedMinHeight: this.minHeight,
-    }
-  },
-
-  mounted() {
-    let unrenderTimer
-    let renderTimer
-
-    this.observer = 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 && this.$el.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 (!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)
-        }
-      },
-      { rootMargin: this.rootMargin },
-    )
-
-    this.observer.observe(this.$el)
-  },
-
-  beforeDestroy() {
-    this.observer.disconnect()
-  },
-}
-</script>
diff --git a/app/src/components/MessageListGroup.vue b/app/src/components/MessageListGroup.vue
index 0295bf2e..6e49d278 100644
--- a/app/src/components/MessageListGroup.vue
+++ b/app/src/components/MessageListGroup.vue
@@ -1,20 +1,73 @@
+<script setup lang="ts">
+import { watchThrottled } from '@vueuse/core'
+import type { BListGroup } from 'bootstrap-vue-next'
+import { nextTick, ref } from 'vue'
+
+import type { RequestMessage } from '@/composables/useRequests'
+
+const props = withDefaults(
+  defineProps<{
+    messages: RequestMessage[]
+    fixedHeight?: boolean
+    bordered?: boolean
+    autoScroll?: boolean
+    limit?: number
+  }>(),
+  {
+    fixedHeight: false,
+    bordered: false,
+    autoScroll: false,
+    limit: undefined,
+  },
+)
+
+const rootElem = ref<InstanceType<typeof BListGroup> | null>(null)
+
+const auto = ref(props.autoScroll)
+const reducedMessages = ref<RequestMessage[]>([...props.messages])
+
+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() {
+  const elem = rootElem.value?.$el
+  elem?.scrollTo(0, elem.lastElementChild.offsetTop)
+}
+
+function onScroll() {
+  if (!props.autoScroll) return
+  const elem = rootElem.value!.$el
+  const { scrollHeight, scrollTop, clientHeight } = elem
+  auto.value = scrollHeight === scrollTop + clientHeight
+}
+</script>
 <template>
   <BListGroup
-    v-bind="$attrs"
+    ref="rootElem"
     flush
     :class="{ 'fixed-height': fixedHeight, bordered: bordered }"
     @scroll="onScroll"
   >
     <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" />
@@ -22,55 +75,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)
-    }
-  },
-}
-</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 b2f6c3eb..e94c04c0 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -1,104 +1,88 @@
+<script setup lang="ts">
+import { computed, toRefs } from 'vue'
+
+import type { APIRequest } from '@/composables/useRequests'
+import { STATUS_VARIANT } from '@/helpers/yunohostArguments'
+
+const props = defineProps<{
+  request: APIRequest
+  type: 'overlay' | 'history'
+}>()
+
+const emit = defineEmits<{ showError: [id: string] }>()
+
+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()
+})
+</script>
+
 <template>
-  <div class="query-header w-100" v-on="$listeners" v-bind="$attrs">
-    <!-- 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 ml-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 ml-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 ml-auto py-0"
-      variant="danger"
-      @click="reviewError"
-    >
-      <small v-t="'api_error.view_error'" />
-    </BButton>
+    <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 DISPLAY -->
-    <time
-      v-if="showTime"
-      :datetime="hour(request.date)"
-      :class="request.error ? 'ml-2' : 'ml-auto'"
-    >
-      {{ hour(request.date) }}
-    </time>
+      <time :datetime="hour" :class="request.err ? 'ms-2' : 'ms-auto'">
+        {{ hour }}
+      </time>
+    </template>
   </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;
-  align-items: center;
+.query-header {
   font-size: $font-size-sm;
 }
 
+.status {
+  display: inline-block;
+  border-radius: 50%;
+
+  &.history {
+    width: 0.75rem;
+    height: 0.75rem;
+    margin-right: 0.5rem;
+  }
+
+  &.overlay {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+}
+
 .error-btn {
   height: 1.25rem;
   display: flex;
@@ -107,35 +91,8 @@ div {
   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 {
-    width: 1rem;
-    height: 1rem;
-    margin-right: 0.5rem;
-  }
-}
-
 time {
-  min-width: 3.5rem;
+  min-width: 3rem;
   text-align: right;
 }
-
-.count {
-  display: flex;
-  align-items: center;
-  margin-left: 0.5rem;
-}
-
-@include media-breakpoint-down(xs) {
-  .xs-hide .request-desc {
-    display: none;
-  }
-}
 </style>
diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 1a5b493b..c7d580d6 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -1,34 +1,70 @@
+<script setup lang="ts">
+import type { TreeChildNode, AnyTreeNode } from '@/helpers/data/tree'
+
+const props = withDefaults(
+  defineProps<{
+    tree: AnyTreeNode
+    flush?: boolean
+    last?: boolean
+    toggleText?: string
+  }>(),
+  {
+    flush: false,
+    last: undefined,
+    toggleText: undefined,
+  },
+)
+
+type NodeSlot = {
+  [K in keyof TreeChildNode as TreeChildNode[K] extends Function
+    ? never
+    : K]: TreeChildNode[K]
+}
+
+defineSlots<{
+  default: (props: NodeSlot) => any
+}>()
+
+function getClasses(node: AnyTreeNode, 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">
+    <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)"
       >
-        <slot name="default" v-bind="node" />
+        <slot name="default" v-bind="node as NodeSlot" />
 
         <BButton
-          v-if="node.children"
+          v-if="node.height > 0"
           size="xs"
           variant="outline-secondary"
           :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>
+          <span class="visually-hidden">{{ toggleText }}</span>
           <YIcon iname="chevron-right" />
         </BButton>
       </BListGroupItem>
 
       <BCollapse
-        v-if="node.children"
-        :key="'collapse-' + node.id"
-        v-model="node.data.opened"
+        v-if="node.height > 0"
         :id="'collapse-' + node.id"
+        v-model="node.data.opened"
       >
         <RecursiveListGroup
           :tree="node"
@@ -36,7 +72,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>
@@ -45,31 +81,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 {
@@ -114,8 +125,13 @@ 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($body-tertiary-bg, 3%);
+
+      [data-bs-theme='dark'] & {
+        background-color: tint-color($body-tertiary-bg-dark, 3%);
+      }
     }
   }
 }
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
deleted file mode 100644
index dfeff852..00000000
--- a/app/src/components/RoutableTabs.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<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"
-          exact
-          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-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>
-  </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
deleted file mode 100644
index 243cfb7d..00000000
--- a/app/src/components/globals/AbstractForm.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <div>
-    <BCardBody>
-      <slot name="disclaimer" />
-
-      <BForm
-        :id="id"
-        :inline="inline"
-        :class="formClasses"
-        @submit.prevent="onSubmit"
-        novalidate
-      >
-        <slot name="default" />
-
-        <slot name="server-error" v-bind="{ errorFeedback }">
-          <BAlert v-if="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>
-
-<script>
-export default {
-  name: 'AbstractForm',
-
-  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.$anyError) {
-        return this.$i18n.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" scoped>
-.card-footer {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-
-  & > *:not(:first-child) {
-    margin-left: 0.5rem;
-  }
-}
-</style>
diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index 31774dc0..587d00db 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -1,74 +1,237 @@
+<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'
+
+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>] //, 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 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 { 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>
-  <YCard v-bind="$attrs" class="card-form">
+  <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>
+
+  <YCard class="card-form" v-bind="$attrs">
     <template #default>
+      <slot name="top" />
+
       <slot name="disclaimer" />
 
+      <slot name="before-form" />
+
       <BForm
         :id="id"
         :inline="inline"
         :class="formClasses"
-        @submit.prevent="onSubmit"
         novalidate
+        @submit.prevent.stop="emit('submit', $event as SubmitEvent)"
       >
-        <slot name="default" />
+        <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">
-          <BAlert
+          <YAlert
+            v-if="globalErrorFeedback !== ''"
+            alert
             variant="danger"
             class="my-3"
             icon="ban"
-            :show="errorFeedback !== ''"
           >
-            <div v-html="errorFeedback" />
-          </BAlert>
+            <div v-html="globalErrorFeedback" />
+          </YAlert>
         </slot>
       </BForm>
+
+      <slot name="after-form" />
     </template>
 
     <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>
   </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.$anyError) {
-        return this.$i18n.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)
-    },
-  },
+<style lang="scss" scoped>
+.card-title {
+  margin-bottom: 1em;
+  border-bottom: solid $border-width $gray-500;
 }
-</script>
-
-<style lang="scss"></style>
+.form-section:not(:last-child) {
+  margin-bottom: 3rem;
+}
+</style>
diff --git a/app/src/components/globals/DescriptionRow.vue b/app/src/components/globals/DescriptionRow.vue
index e7265c3d..32f53859 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) {
@@ -42,7 +49,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/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index 6cb2a0b1..2940df7c 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -1,17 +1,41 @@
+<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" />
     <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">
+        <span class="visually-hidden">
           {{ $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"
@@ -22,43 +46,36 @@
   </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)
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .explain-what {
   line-height: 1.2;
 
   .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;
 
-    ::v-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/FormField.vue b/app/src/components/globals/FormField.vue
index 4def25e6..fe145e6a 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -1,34 +1,191 @@
+<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 { useTouch } from '@/composables/form'
+import { omit } from '@/helpers/commons'
+import type {
+  AnyWritableComponents,
+  BaseItemComputedProps,
+  FormFieldProps,
+  ItemComponentToItemProps,
+} from '@/types/form'
+
+defineOptions({
+  name: 'FormField',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<FormFieldProps<C, MV>>(), {
+  append: undefined,
+  asInputGroup: false,
+  component: undefined,
+  cProps: undefined,
+  description: undefined,
+  descriptionVariant: undefined,
+  id: undefined,
+  label: undefined,
+  labelFor: undefined,
+  link: undefined,
+  prepend: undefined,
+  rules: undefined,
+
+  validation: undefined,
+})
+
+defineEmits<{
+  'update:modelValue': [value: MV]
+}>()
+
+const slots = defineSlots<{
+  default?: (
+    componentProps: ItemComponentToItemProps[C] & BaseItemComputedProps,
+  ) => any
+  description?: any
+}>()
+
+const modelValue = defineModel<MV>()
+
+const attrs = useAttrs()
+const { t } = useI18n()
+useTouch(() => props.validation)
+
+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']
+    }
+  }
+
+  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.cProps?.id || props.labelFor
+  return childId ? `${childId}-field` : undefined
+})
+
+const error = computed(() => {
+  const v = props.validation
+  if (v && v.$anyDirty) {
+    return v.$errors.length ? { errors: v.$errors, $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(() => {
+  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>')
+})
+
+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.cProps ?? ({} as ItemComponentToItemProps[C])),
+        ariaDescribedby,
+        state,
+        validation,
+      }"
+    >
       <!-- if no component was passed as slot, render a component from the props -->
       <Component
-        :is="component"
-        v-bind="props"
-        v-on="$listeners"
-        :value="value"
+        v-bind="props.cProps"
+        :is="props.component"
+        v-model="modelValue"
+        :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.cProps?.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 }" />
+      </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="ml-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>
@@ -36,7 +193,6 @@
         <VueShowdown
           v-if="description"
           :markdown="description"
-          flavor="github"
           :class="{
             ['alert p-1 px-2 alert-' + descriptionVariant]: descriptionVariant,
           }"
@@ -48,97 +204,8 @@
   </BFormGroup>
 </template>
 
-<script>
-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' },
-    value: { type: null, default: null },
-    props: { type: Object, default: () => ({}) },
-    validation: { type: Object, default: null },
-  },
-
-  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': ['font-weight-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
-    },
-
-    state() {
-      // Need to set state as null if no error, else component turn green
-      if (this.validation) {
-        return this.validation.$anyError === true ? false : null
-      }
-      return 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)
-      }
-      return ''
-    },
-  },
-
-  methods: {
-    touch(name) {
-      if (this.validation) {
-        // For fields that have multiple elements
-        if (name) {
-          this.validation[name].$touch()
-        } else {
-          this.validation.$touch()
-        }
-      }
-    },
-
-    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>
-
 <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/FormFieldMultiple.vue b/app/src/components/globals/FormFieldMultiple.vue
new file mode 100644
index 00000000..6c0aee36
--- /dev/null
+++ b/app/src/components/globals/FormFieldMultiple.vue
@@ -0,0 +1,248 @@
+<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,
+  ItemComponentToItemProps,
+} from '@/types/form'
+
+defineOptions({
+  name: 'FormField',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<
+    FormFieldProps<C, MV> & {
+      defaultValue?: () => ArrInnerType<MV>
+      addBtnText?: string
+    }
+  >(),
+  {
+    append: undefined,
+    asInputGroup: false,
+    component: undefined,
+    cProps: undefined,
+    description: undefined,
+    descriptionVariant: undefined,
+    id: undefined,
+    label: undefined,
+    labelFor: undefined,
+    link: undefined,
+    prepend: undefined,
+    rules: undefined,
+    defaultValue: undefined,
+    addBtnText: undefined,
+
+    validation: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [modelValue: MV]
+}>()
+
+const slots = defineSlots<{
+  default?: (_: {
+    componentProps: ItemComponentToItemProps[C] & BaseItemComputedProps
+    index: number
+  }) => any
+  description?: () => any
+}>()
+
+const modelValue = defineModel<MV>()
+
+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.cProps?.id ? props.cProps?.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 (
+    modelValue.value?.map((modelValue: ArrInnerType<MV>, i) => {
+      return {
+        cProps: {
+          ...(props.cProps ?? ({} as ItemComponentToItemProps[C])),
+          id: `${props.cProps?.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 = [...(modelValue.value || []), props.defaultValue!()] as MV
+  emit('update:modelValue', value)
+
+  // FIXME: Focus newly inserted form item
+}
+
+function removeElement(index: number) {
+  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 (!modelValue.value) return
+  const value = [...modelValue.value] 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">
+      <!-- @vue-expect-error -->
+      <FormField
+        v-bind="fieldProps"
+        class="w-100 mb-3"
+        @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>
+
+      <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
+      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>
+
+    <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>
diff --git a/app/src/components/globals/FormFieldReadonly.vue b/app/src/components/globals/FormFieldReadonly.vue
new file mode 100644
index 00000000..5a09ce04
--- /dev/null
+++ b/app/src/components/globals/FormFieldReadonly.vue
@@ -0,0 +1,79 @@
+<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<FormFieldReadonlyProps<C>>(), {
+  id: undefined,
+  cols: () => ({ md: 4, lg: 3 }),
+})
+
+const modelValue = defineModel<MV>()
+
+const { t } = useI18n()
+
+const cols = computed<Cols>(() => ({
+  md: 4,
+  xl: 3,
+  ...props.cols,
+}))
+
+const text = computed(() => {
+  return parseValue(modelValue.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(value)) value = t('words.none')
+  return value
+}
+</script>
+
+<template>
+  <BRow no-gutters class="description-row">
+    <BCol v-bind="cols" class="fw-bold">
+      {{ label }}
+    </BCol>
+
+    <BCol>
+      <!-- FIXME not sure about rendering html -->
+      <div v-html="text" />
+    </BCol>
+  </BRow>
+</template>
+
+<style lang="scss" scoped>
+.description-row {
+  @include media-breakpoint-up(md) {
+    margin: 1rem 0;
+  }
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+    &:not(:last-of-type) {
+      margin-bottom: 0.5rem;
+      padding-bottom: 0.5rem;
+      border-bottom: $border-width solid $card-border-color;
+    }
+  }
+}
+</style>
diff --git a/app/src/components/globals/ReadOnlyField.vue b/app/src/components/globals/ReadOnlyField.vue
deleted file mode 100644
index 39949a72..00000000
--- a/app/src/components/globals/ReadOnlyField.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <BRow no-gutters class="description-row">
-    <BCol v-bind="cols_" class="font-weight-bold">
-      {{ label }}
-    </BCol>
-
-    <BCol>
-      <!-- FIXME not sure about rendering html -->
-      <div v-html="text" />
-    </BCol>
-  </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.$i18n.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
-      }
-      if ([null, undefined, ''].includes(this.value))
-        value = this.$i18n.t('words.none')
-      return value
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.description-row {
-  @include media-breakpoint-up(md) {
-    margin: 1rem 0;
-  }
-  @include media-breakpoint-down(sm) {
-    flex-direction: column;
-    &:not(:last-of-type) {
-      margin-bottom: 0.5rem;
-      padding-bottom: 0.5rem;
-      border-bottom: $border-width solid $card-border-color;
-    }
-  }
-}
-</style>
diff --git a/app/src/components/globals/TopBar.vue b/app/src/components/globals/TopBar.vue
index 80ce5c4f..843d8758 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">
+  <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>
 
-    <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;
@@ -55,19 +42,19 @@ 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 {
       margin-bottom: 0.75rem;
 
-      ::v-deep > * {
+      :deep(> *) {
         margin-bottom: 0.25rem;
       }
     }
@@ -88,7 +75,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/ViewBase.vue b/app/src/components/globals/ViewBase.vue
deleted file mode 100644
index f1c69684..00000000
--- a/app/src/components/globals/ViewBase.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <div>
-    <TopBar v-if="hasTopBar">
-      <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" v-bind="{ loading: isLoading }" />
-
-    <BSkeletonWrapper :loading="isLoading">
-      <template #loading>
-        <slot name="skeleton">
-          <Component :is="skeleton" />
-        </slot>
-      </template>
-
-      <!-- Empty div to be able to receive multiple components -->
-      <div>
-        <slot name="default" v-bind="{ loading: isLoading }" />
-      </div>
-    </BSkeletonWrapper>
-
-    <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 d2affd53..770625df 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -1,76 +1,87 @@
-<template>
-  <ViewBase v-bind="$attrs" v-on="$listeners" :skeleton="skeleton">
-    <template v-if="hasCustomTopBar" #top-bar>
-      <slot name="top-bar" />
-    </template>
-    <template v-if="!hasCustomTopBar" #top-bar-group-left>
-      <BInputGroup class="w-100">
-        <BInputGroupPrepend is-text>
-          <YIcon iname="search" />
-        </BInputGroupPrepend>
+<script setup lang="ts" generic="T extends Obj | AnyTreeNode">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-        <BFormInput
-          id="top-bar-search"
-          :value="search"
-          @input="$emit('update:search', $event)"
-          :placeholder="
-            $t('search.for', { items: $tc('items.' + itemsName, 2) })
-          "
-          :disabled="!items"
-        />
-      </BInputGroup>
-    </template>
-    <template v-if="!hasCustomTopBar" #top-bar-group-right>
-      <slot name="top-bar-buttons" />
-    </template>
+import type { AnyTreeNode } from '@/helpers/data/tree'
+import type { Obj } from '@/types/commons'
 
-    <template #top>
-      <slot name="top" />
-    </template>
-
-    <template #default>
-      <BAlert v-if="items === null || filteredItems === null" variant="warning">
-        <slot name="alert-message">
-          <YIcon iname="exclamation-triangle" />
-          {{
-            $tc(
-              items === null ? 'items_verbose_count' : 'search.not_found',
-              0,
-              { items: $tc('items.' + itemsName, 0) },
-            )
-          }}
-        </slot>
-      </BAlert>
-
-      <slot v-else name="default" />
-    </template>
-
-    <template #bot>
-      <slot name="bot" />
-    </template>
-
-    <template #skeleton>
-      <slot name="skeleton" />
-    </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' },
+const props = withDefaults(
+  defineProps<{
+    items?: T[] | null
+    itemsName: string | null
+  }>(),
+  {
+    items: undefined,
   },
+)
 
-  computed: {
-    hasCustomTopBar() {
-      return 'top-bar' in this.$slots
-    },
-  },
-}
+const slots = defineSlots<{
+  'top-bar': any
+  'top-bar-buttons': any
+  top: any
+  'alert-message': any
+  'forced-default'?: any
+  default: any
+  bot: any
+  skeleton: any
+}>()
+
+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>
+  <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 === undefined"
+          />
+        </BInputGroup>
+      </template>
+      <template #group-right>
+        <slot name="top-bar-buttons" />
+      </template>
+    </TopBar>
+
+    <slot name="top" />
+
+    <slot name="forced-default">
+      <YAlert
+        v-if="noItemsMessage"
+        alert
+        icon="exclamation-triangle"
+        variant="warning"
+      >
+        {{ noItemsMessage }}
+      </YAlert>
+      <slot v-else name="default" />
+    </slot>
+
+    <slot name="bot" />
+  </div>
+</template>
diff --git a/app/src/components/globals/YAlert.vue b/app/src/components/globals/YAlert.vue
index 5cc9a853..0a70cf8e 100644
--- a/app/src/components/globals/YAlert.vue
+++ b/app/src/components/globals/YAlert.vue
@@ -1,36 +1,45 @@
+<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'
+
+const props = withDefaults(
+  defineProps<{
+    alert?: boolean
+    icon?: string
+    variant?: ColorVariant
+  }>(),
+  {
+    alert: false,
+    icon: undefined,
+    variant: 'info' as const,
+  },
+)
+
+const icon = computed(() => {
+  return props.icon || DEFAULT_VARIANT_ICON[props.variant]
+})
+</script>
+
 <template>
   <Component
-    v-bind="$attrs"
-    :is="alert ? 'BAlert' : 'div'"
-    :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"
   >
-    <YIcon :iname="_icon" class="mr-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" />
     </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 858708a8..bbe94984 100644
--- a/app/src/components/globals/YBreadcrumb.vue
+++ b/app/src/components/globals/YBreadcrumb.vue
@@ -1,14 +1,23 @@
+<script setup lang="ts">
+import { useInfos } from '@/composables/useInfos'
+
+const { breadcrumb, updateHtmlTitle } = useInfos()
+
+// Call this here to trigger title update at page load (with translation)
+updateHtmlTitle()
+</script>
+
 <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>
 
     <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 }}
@@ -16,18 +25,6 @@
   </BBreadcrumb>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-export default {
-  name: 'YBreadcrumb',
-
-  computed: {
-    ...mapGetters(['breadcrumb']),
-  },
-}
-</script>
-
 <style lang="scss" scoped>
 .breadcrumb {
   border: none;
diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index cbbcb101..e377507e 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -1,19 +1,62 @@
+<script setup lang="ts">
+import type { Breakpoint } from 'bootstrap-vue-next'
+import { ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    asTab?: boolean
+    noBody?: boolean
+    title?: string
+    titleTag?: string
+    icon?: string
+    collapsible?: boolean
+    collapsed?: boolean
+    buttonUnbreak?: Breakpoint
+  }>(),
+  {
+    id: 'ynh-form',
+    asTab: false,
+    noBody: false,
+    title: undefined,
+    titleTag: 'h2',
+    icon: undefined,
+    collapsible: 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']">
-    <template #header>
+  <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">
           <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>
 
         <div
-          v-if="hasButtons"
+          v-if="slots['header-buttons']"
           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,
           }"
         >
@@ -22,24 +65,24 @@
       </div>
 
       <BButton
-        v-if="collapsable"
-        @click="visible = !visible"
+        v-if="collapsible"
         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,
         }"
+        @click="visible = !visible"
       >
         <YIcon iname="chevron-right" />
-        <span class="sr-only">{{ $t('words.collapse') }}</span>
+        <span class="visually-hidden">{{ $t('words.collapse') }}</span>
       </BButton>
     </template>
 
-    <BCollapse v-if="collapsable" :visible="visible">
-      <slot v-if="'no-body' in $attrs" name="default" />
+    <BCollapse v-if="collapsible" :visible="visible">
+      <slot v-if="noBody" name="default" />
       <BCardBody v-else>
         <slot name="default" />
       </BCardBody>
@@ -48,42 +91,14 @@
       <slot name="default" />
     </template>
 
-    <template #footer v-if="'buttons' in $slots">
+    <template v-if="slots['buttons']" #footer>
       <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>
-.card-header {
+:deep(.card-header) {
   display: flex;
 
   .custom-header {
@@ -97,7 +112,7 @@ export default {
   }
 }
 
-.card-footer {
+:deep(.card-footer) {
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -106,7 +121,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/YIcon.vue b/app/src/components/globals/YIcon.vue
index 15fbcc8c..9e48cbad 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;
@@ -48,7 +47,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 5a20071e..42b175e6 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_VARIANT_ICON } from '@/helpers/yunohostArguments'
+
+const props = withDefaults(
+  defineProps<{
+    variant?: ColorVariant
+    icon?: string
+    noIcon?: boolean
+    noStatus?: boolean
+    size?: Breakpoint | 'xs'
+    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_VARIANT_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 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]" />
+      <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;
@@ -61,15 +68,15 @@ export default {
 
   @each $color, $value in $theme-colors {
     &-#{$color} {
-      color: theme-color-level($color, 6);
+      color: tint-color($value, 50%);
 
-      [dark-theme='true'] & {
-        color: theme-color-level($color, -6);
+      [data-bs-theme='light'] & {
+        color: shade-color($value, 60%);
       }
 
       .yuno-list-group-item-status {
         background-color: $value;
-        color: color-yiq($value);
+        color: color-contrast($value);
       }
     }
   }
@@ -96,9 +103,9 @@ export default {
       }
     }
 
-    .yuno-list-group-item-content {
-      color: $black;
-    }
+    // .yuno-list-group-item-content {
+    //   color: $black;
+    // }
   }
 
   &-faded > * {
diff --git a/app/src/components/globals/YListItem.vue b/app/src/components/globals/YListItem.vue
new file mode 100644
index 00000000..55371c28
--- /dev/null
+++ b/app/src/components/globals/YListItem.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    label: string
+    sublabel?: string
+    description?: string
+  }>(),
+  {
+    sublabel: undefined,
+    description: 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/components/globals/YSpinner.vue b/app/src/components/globals/YSpinner.vue
index 388e80d5..611aea49 100644
--- a/app/src/components/globals/YSpinner.vue
+++ b/app/src/components/globals/YSpinner.vue
@@ -1,19 +1,13 @@
+<script setup lang="ts">
+import { useSettings } from '@/composables/useSettings'
+
+const { spinner } = useSettings()
+</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;
@@ -25,7 +19,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/components/globals/formItems/AdressItem.vue b/app/src/components/globals/formItems/AdressItem.vue
new file mode 100644
index 00000000..b109b927
--- /dev/null
+++ b/app/src/components/globals/formItems/AdressItem.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type {
+  AdressItemProps,
+  AdressModelValue,
+  BaseItemComputedProps,
+} from '@/types/form'
+
+withDefaults(defineProps<AdressItemProps & BaseItemComputedProps>(), {
+  id: undefined,
+  name: undefined,
+  placeholder: undefined,
+  touchKey: undefined,
+  type: 'email',
+
+  state: undefined,
+  validation: undefined,
+  ariaDescribedby: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: AdressModelValue]
+}>()
+
+const model = defineModel<AdressModelValue>({ required: true })
+
+function onInput(key: 'localPart' | 'domain', value: string | null) {
+  emit('update:modelValue', {
+    ...model.value,
+    [key]: value,
+  })
+}
+</script>
+
+<template>
+  <BInputGroup v-bind="$attrs">
+    <InputItem
+      :id="`${id}-local-part`"
+      :placeholder="placeholder"
+      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
+      :id="`${id}-domain`"
+      touch-key="domain"
+      :model-value="modelValue.domain"
+      :choices="choices"
+      :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/components/globals/formItems/ButtonItem.vue b/app/src/components/globals/formItems/ButtonItem.vue
index 5bd09ad9..f104384a 100644
--- a/app/src/components/globals/formItems/ButtonItem.vue
+++ b/app/src/components/globals/formItems/ButtonItem.vue
@@ -1,39 +1,39 @@
+<script setup lang="ts">
+import { computed, toValue } from 'vue'
+
+import type { ButtonItemProps } from '@/types/form'
+
+const props = withDefaults(defineProps<ButtonItemProps>(), {
+  enabled: true,
+  icon: undefined,
+  type: 'success',
+})
+
+const emit = defineEmits<{
+  action: [value: string]
+}>()
+
+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)"
-    :disabled="!enabled"
+    :disabled="!toValue(enabled)"
     class="d-block mb-3"
+    @click="emit('action', id)"
   >
-    <YIcon :iname="icon_" class="mr-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 fa1158d3..c2c90784 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -1,30 +1,31 @@
+<script setup lang="ts">
+import type { CheckboxItemProps, BaseItemComputedProps } from '@/types/form'
+
+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,
+})
+
+const modelValue = defineModel<boolean>()
+</script>
+
 <template>
   <BFormCheckbox
-    v-model="checked"
-    v-on="$listeners"
     :id="id"
-    :aria-describedby="$parent.id + '__BV_description_'"
+    v-model="modelValue"
+    :name="name"
+    :aria-describedby="ariaDescribedby"
+    :state="state"
     switch
   >
-    {{ label || $t(labels[checked]) }}
+    {{ label || $t(labels[modelValue ? 'true' : 'false']) }}
   </BFormCheckbox>
 </template>
-
-<script>
-export default {
-  name: 'CheckboxItem',
-
-  props: {
-    value: { 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/DisplayTextItem.vue b/app/src/components/globals/formItems/DisplayTextItem.vue
index 3b85983c..ea3c1424 100644
--- a/app/src/components/globals/formItems/DisplayTextItem.vue
+++ b/app/src/components/globals/formItems/DisplayTextItem.vue
@@ -1,16 +1,13 @@
+<script setup lang="ts">
+import type { DisplayTextItemProps } from '@/types/form'
+
+withDefaults(defineProps<DisplayTextItemProps>(), {
+  id: undefined,
+})
+</script>
+
 <template>
-  <div>
+  <div :id="id">
     <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 1afde149..5e2331b5 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -1,86 +1,108 @@
-<template>
-  <BButtonGroup class="w-100">
-    <BButton
-      v-if="!this.required && this.value.file !== null"
-      @click="clearFiles"
-      variant="danger"
-    >
-      <span class="sr-only">{{ $t('delete') }}</span>
-      <YIcon iname="trash" />
-    </BButton>
+<script setup lang="ts">
+import type { BFormFile } from 'bootstrap-vue-next'
+import { computed, inject, ref } from 'vue'
 
-    <BFormFile
-      :value="value.file"
-      ref="input-file"
-      :id="id"
-      :required="required"
-      :placeholder="_placeholder"
-      :accept="accept"
-      :drop-placeholder="dropPlaceholder"
-      :state="state"
-      :browse-text="$t('words.browse')"
-      @input="onInput"
-      @blur="$parent.$emit('touch', name)"
-      @focusout.native="$parent.$emit('touch', name)"
-    />
-  </BButtonGroup>
-</template>
-
-<script>
+import { ValidationTouchSymbol } from '@/composables/form'
 import { getFileContent } from '@/helpers/commons'
+import type {
+  BaseItemComputedProps,
+  FileItemProps,
+  FileModelValue,
+} from '@/types/form'
 
-export default {
-  name: 'FileItem',
+const props = withDefaults(
+  defineProps<FileItemProps & BaseItemComputedProps>(),
+  {
+    id: undefined,
+    name: undefined,
+    placeholder: 'Choose a file or drop it here...',
+    touchKey: undefined,
+    accept: '',
+    dropPlaceholder: undefined,
 
-  props: {
-    id: { type: String, default: null },
-    value: { 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 },
-    state: { type: Boolean, default: null },
-    required: { type: Boolean, default: false },
-    name: { type: String, default: null },
+    ariaDescribedby: undefined,
+    state: undefined,
+    validation: undefined,
   },
+)
 
-  computed: {
-    _placeholder: function () {
-      return this.value.file === null ? this.placeholder : this.value.file.name
-    },
-  },
+const emit = defineEmits<{
+  'update:modelValue': [value: FileModelValue]
+}>()
 
-  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('input', value)
+const modelValue = defineModel<FileModelValue>({
+  default: () => ({ file: null }),
+})
 
-      // Asynchronously load the File content and update the value again
-      getFileContent(file).then((content) => {
-        this.$emit('input', { ...value, content })
-      })
-    },
+const touch = inject(ValidationTouchSymbol)
+const inputElem = ref<InstanceType<typeof BFormFile> | null>(null)
 
-    clearFiles() {
-      this.$refs['input-file'].reset()
-      this.$emit('input', {
-        file: null,
-        content: '',
-        current: false,
-        removed: true,
-      })
-    },
-  },
+const placeholder = computed(() => {
+  return modelValue.value.file === null
+    ? props.placeholder
+    : modelValue.value.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,
+  })
+}
+
+const required = computed(() => 'required' in (props.validation ?? {}))
 </script>
 
+<template>
+  <BInputGroup class="w-100">
+    <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
+      :id="id"
+      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')"
+      :required="required"
+      @blur="touch?.(touchKey)"
+      @focusout="touch?.(touchKey)"
+      @update:model-value="onInput"
+    />
+  </BInputGroup>
+</template>
+
 <style lang="scss" scoped>
-::v-deep .custom-file-label {
+// fix https://getbootstrap.com/docs/5.2/migration/#forms
+:deep(.custom-file-label) {
   color: $input-placeholder-color;
 
   .btn-danger + .b-form-file & {
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index 4bdb8712..f25930d4 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -1,49 +1,74 @@
+<script setup lang="ts">
+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<InputItemProps & BaseItemComputedProps>(),
+  {
+    id: undefined,
+    name: undefined,
+    placeholder: undefined,
+    touchKey: undefined,
+    autocomplete: undefined,
+    // pattern: undefined,
+    step: undefined,
+    trim: true,
+    type: 'text',
+
+    ariaDescribedby: undefined,
+    state: undefined,
+    validation: undefined,
+  },
+)
+
+const modelValue = defineModel<string | number | null>({
+  set(value) {
+    if (props.type === 'number' && typeof value === 'string') {
+      if (value === '') return ''
+      return parseInt(value)
+    }
+    return value
+  },
+})
+
+const touch = inject(ValidationTouchSymbol)
+
+const autocomplete = computed(() => {
+  const typeToAutocomplete = {
+    password: 'new-password',
+    email: 'email',
+    url: 'url',
+  } as const
+  return props.autocomplete || objectGet(typeToAutocomplete, props.type)
+})
+
+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
-    :value="value"
     :id="id"
+    v-bind="fromValidation"
+    v-model="modelValue"
+    :name="name"
     :placeholder="placeholder"
-    :type="type"
-    :state="state"
-    :required="required"
-    :min="min"
-    :max="max"
+    :autocomplete="autocomplete"
     :step="step"
     :trim="trim"
-    :autocomplete="autocomplete_"
-    v-on="$listeners"
-    @blur="$parent.$emit('touch', name)"
+    :type="type"
+    :aria-describedby="ariaDescribedby"
+    :state="state"
+    @blur="touch?.(touchKey)"
   />
 </template>
-
-<script>
-export default {
-  name: 'InputItem',
-
-  props: {
-    value: { 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 },
-  },
-
-  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 4a7d0ca2..252021e1 100644
--- a/app/src/components/globals/formItems/MarkdownItem.vue
+++ b/app/src/components/globals/formItems/MarkdownItem.vue
@@ -1,14 +1,11 @@
-<template>
-  <VueShowdown :markdown="label" flavor="github" />
-</template>
+<script setup lang="ts">
+import type { MarkdownItemProps } from '@/types/form'
 
-<script>
-export default {
-  name: 'MarkdownItem',
-
-  props: {
-    id: { type: String, default: null },
-    label: { type: String, default: null },
-  },
-}
+withDefaults(defineProps<MarkdownItemProps>(), {
+  id: undefined,
+})
 </script>
+
+<template>
+  <VueShowdown :id="id" :markdown="label" />
+</template>
diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index d1c4354e..dc6742a9 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -1,41 +1,30 @@
-<template>
-  <BAlert
-    class="d-flex flex-column flex-md-row align-items-center"
-    :variant="type"
-    show
-  >
-    <YIcon :iname="icon_" class="mr-md-3 mb-md-0 mb-2" :variant="type" />
+<script setup lang="ts">
+import { computed } from 'vue'
 
-    <VueShowdown
-      :markdown="label"
-      flavor="github"
-      tag="span"
-      class="markdown"
-    />
-  </BAlert>
-</template>
+import type { ReadOnlyAlertItemProps } from '@/types/form'
 
-<script>
-export default {
-  name: 'ReadOnlyAlertItem',
+const props = withDefaults(defineProps<ReadOnlyAlertItemProps>(), {
+  id: undefined,
+  icon: undefined,
+  type: 'success',
+})
 
-  props: {
-    id: { type: String, default: null },
-    label: { type: String, default: null },
-    type: { type: String, default: null },
-    icon: { type: String, default: null },
-  },
+const icon = computed(() => {
+  // TODO merge with `DEFAULT_VARIANT_ICON`
+  const icons = {
+    success: 'thumbs-up',
+    info: 'info',
+    warning: 'exclamation',
+    danger: 'times',
+  }
 
-  computed: {
-    icon_() {
-      const icons = {
-        success: 'thumbs-up',
-        info: 'info',
-        warning: 'exclamation',
-        danger: 'times',
-      }
-      return this.icon || icons[this.type]
-    },
-  },
-}
+  return props.icon || icons[props.type]
+})
 </script>
+
+<template>
+  <!-- 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" />
+  </YAlert>
+</template>
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index 586d48a0..2099ce10 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -1,24 +1,64 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+
+import { ValidationTouchSymbol } from '@/composables/form'
+import type { BaseItemComputedProps, SelectItemProps } from '@/types/form'
+
+const props = withDefaults(
+  defineProps<SelectItemProps & BaseItemComputedProps>(),
+  {
+    id: undefined,
+    name: undefined,
+    placeholder: undefined,
+    touchKey: undefined,
+
+    ariaDescribedby: undefined,
+    modelValue: undefined,
+    state: undefined,
+    validation: undefined,
+  },
+)
+
+defineEmits<{
+  'update:modelValue': [value: string | 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)
+
+const required = computed(() => 'required' in (props?.validation ?? {}))
+</script>
+
 <template>
   <BFormSelect
-    :value="value"
     :id="id"
+    v-model="model"
+    :name="name"
     :options="choices"
+    :aria-describedby="ariaDescribedby"
+    :state="state"
     :required="required"
-    v-on="$listeners"
-    @blur.native="$emit('blur', value)"
-  />
+    @blur="touch?.(touchKey)"
+  >
+    <template v-if="!isOptionalSelectOption" #first>
+      <BFormSelectOption value="null" :disabled="required">
+        -- {{ required ? $t('select_an_option') : $t('words.none') }} --
+      </BFormSelectOption>
+    </template>
+  </BFormSelect>
 </template>
-
-<script>
-export default {
-  name: 'SelectItem',
-
-  props: {
-    value: { type: [String, null], default: null },
-    id: { type: String, default: null },
-    choices: { type: [Array, Object], required: true },
-    required: { type: Boolean, default: false },
-    name: { type: String, default: null },
-  },
-}
-</script>
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index c212287d..ac665b2f 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -1,37 +1,47 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+
+import { ValidationTouchSymbol } from '@/composables/form'
+import type { BaseItemComputedProps, TagsItemProps } from '@/types/form'
+
+const props = withDefaults(
+  defineProps<TagsItemProps & BaseItemComputedProps>(),
+  {
+    id: undefined,
+    name: undefined,
+    placeholder: undefined,
+    touchKey: undefined,
+    limit: undefined,
+    // options: undefined,
+
+    ariaDescribedby: undefined,
+    state: undefined,
+    validation: undefined,
+  },
+)
+
+const touch = inject(ValidationTouchSymbol)
+
+const modelValue = 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
+</script>
+
 <template>
   <BFormTags
-    v-model="tags"
     :id="id"
+    v-model="modelValue"
+    :name="name"
     :placeholder="placeholder"
-    :required="required"
-    separator=" ,;"
     :limit="limit"
-    remove-on-delete
+    :aria-describedby="ariaDescribedby"
     :state="state"
-    :options="options"
-    v-on="$listeners"
-    @blur="$parent.$emit('touch', name)"
+    :required="required"
+    remove-on-delete
+    separator=" ,;"
+    @blur="touch?.(touchKey)"
   />
 </template>
-
-<script>
-export default {
-  name: 'TagsItem',
-
-  data() {
-    return {
-      tags: this.value,
-    }
-  },
-  props: {
-    value: { 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 },
-  },
-}
-</script>
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index 5d36f1b3..cbbd4606 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -1,13 +1,131 @@
+<script setup lang="ts">
+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'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<TagsSelectizeItemProps & BaseItemComputedProps>(),
+  {
+    id: undefined,
+    name: undefined,
+    placeholder: undefined,
+    touchKey: undefined,
+    auto: false,
+    disabledItems: undefined,
+    label: undefined,
+    limit: undefined,
+    noTags: false,
+    tagIcon: undefined,
+
+    ariaDescribedby: undefined,
+    state: undefined,
+    validation: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  'tag-update': [value: TagUpdateArgs]
+}>()
+
+const modelValue = 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(() => {
+  return props.options.filter((opt) => {
+    const tag = typeof opt === 'string' ? opt : opt.value
+    let filterIn =
+      modelValue.value?.indexOf(tag) === -1 &&
+      !(props.disabledItems?.includes(tag) ?? false)
+    if (filterIn && criteria.value) {
+      filterIn = tag.toLowerCase().indexOf(criteria.value) > -1
+    }
+    return filterIn
+  })
+})
+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 {
+    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
+})
+
+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(tag)
+  }
+}
+
+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(tag)
+  }
+}
+
+function onDropdownKeydown(e: KeyboardEvent) {
+  // 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()
+  }
+}
+
+// FIXME call touch somewhere?
+</script>
+
 <template>
   <div class="tags-selectize">
     <BFormTags
       v-bind="$attrs"
-      v-on="$listeners"
-      :value="value"
       :id="id"
+      v-model="modelValue"
+      :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
@@ -20,22 +138,22 @@
             class="list-inline-item"
           >
             <BFormTag
-              @remove="onRemoveTag({ option: tag, removeTag })"
               :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>
 
         <BDropdown
-          ref="dropdown"
+          ref="dropdownElem"
           variant="outline-dark"
           block
           menu-class="w-100"
-          @keydown.native="onDropdownKeydown"
+          @keydown="onDropdownKeydown"
         >
           <template #button-content>
             <YIcon iname="search-plus" /> {{ label }}
@@ -44,26 +162,23 @@
           <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="
-                  $tc('search.not_found', 0, {
-                    items: $tc('items.' + itemsName, 0),
-                  })
-                "
+                :invalid-feedback="searchI18n.invalidFeedback"
                 :state="searchState"
                 :disabled="disabled"
                 class="mb-0"
               >
                 <BFormInput
-                  ref="search-input"
-                  v-model="search"
                   :id="id + '-search-input'"
-                  type="search"
-                  size="sm"
+                  ref="searchElem"
+                  v-model="search"
                   autocomplete="off"
+                  size="sm"
+                  type="search"
+                  @click.stop
                 />
               </BFormGroup>
             </BDropdownForm>
@@ -71,19 +186,15 @@
           </BDropdownGroup>
 
           <BDropdownItemButton
-            v-for="option in availableOptions"
-            :key="option"
-            @click="onAddTag({ option, addTag })"
+            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" />
-            {{
-              $tc('items_verbose_items_left', 0, {
-                items: $tc('items.' + itemsName, 0),
-              })
-            }}
+            {{ searchI18n.noItems }}
           </BDropdownText>
         </BDropdown>
       </template>
@@ -91,92 +202,8 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'TagsSelectizeItem',
-
-  inheritAttrs: false,
-
-  props: {
-    value: { 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.value.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.lastElementChild
-      ) {
-        this.$refs['search-input'].focus()
-      }
-    },
-  },
-}
-</script>
-
 <style lang="scss" scoped>
-::v-deep .dropdown-menu {
+:deep(.dropdown-menu) {
   max-height: 300px;
   overflow-y: auto;
   padding-top: 0;
@@ -185,7 +212,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/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index ef408891..68fbf3cc 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -1,28 +1,46 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+
+import { ValidationTouchSymbol } from '@/composables/form'
+import type { BaseItemComputedProps, TextAreaItemProps } from '@/types/form'
+
+const props = withDefaults(
+  defineProps<TextAreaItemProps & BaseItemComputedProps>(),
+  {
+    id: undefined,
+    name: undefined,
+    placeholder: undefined,
+    touchKey: undefined,
+    // type: 'text',
+
+    ariaDescribedby: undefined,
+    modelValue: undefined,
+    state: undefined,
+    validation: undefined,
+  },
+)
+
+defineEmits<{
+  'update:modelValue': [value: string | null]
+}>()
+
+const modelValue = defineModel<string>()
+
+const touch = inject(ValidationTouchSymbol)
+
+const required = computed(() => 'required' in (props?.validation ?? {}))
+</script>
+
 <template>
   <BFormTextarea
-    :value="value"
     :id="id"
+    v-model="modelValue"
+    :name="name"
     :placeholder="placeholder"
-    :required="required"
+    :aria-describedby="ariaDescribedby"
     :state="state"
+    :required="required"
     rows="4"
-    v-on="$listeners"
-    @blur="$parent.$emit('touch', name)"
+    @blur="touch?.(touchKey)"
   />
 </template>
-
-<script>
-export default {
-  name: 'TextAreaItem',
-
-  props: {
-    value: { 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 },
-  },
-}
-</script>
diff --git a/app/src/components/globals/skeletons/AppCatalogSkeleton.vue b/app/src/components/globals/skeletons/AppCatalogSkeleton.vue
new file mode 100644
index 00000000..9bc44bd9
--- /dev/null
+++ b/app/src/components/globals/skeletons/AppCatalogSkeleton.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { randint } from '@/helpers/commons'
+</script>
+
+<template>
+  <BSkeletonWrapper button search>
+    <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>
+  </BSkeletonWrapper>
+</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/components/globals/skeletons/BSkeleton.vue b/app/src/components/globals/skeletons/BSkeleton.vue
new file mode 100644
index 00000000..d8a023e7
--- /dev/null
+++ b/app/src/components/globals/skeletons/BSkeleton.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ height?: string; width?: string }>(), {
+  height: '26px',
+  width: '100%',
+})
+</script>
+
+<template>
+  <div :style="{ height, width }" class="b-skeleton" />
+</template>
+
+<style scoped lang="scss">
+.b-skeleton {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--bs-secondary-bg);
+  cursor: wait;
+
+  height: $font-size-base;
+  margin-bottom: map-get($spacers, 1);
+
+  @if $enable-rounded {
+    border-radius: 0.25rem;
+  }
+}
+</style>
diff --git a/app/src/components/globals/skeletons/BSkeletonWrapper.vue b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
new file mode 100644
index 00000000..e579b41b
--- /dev/null
+++ b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ button: boolean; search: boolean }>(), {
+  button: false,
+  search: false,
+})
+
+defineSlots<{
+  default: any
+}>()
+</script>
+
+<template>
+  <div class="y-skeleton-wrapper">
+    <div class="visually-hidden">
+      {{ $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>
+</template>
+
+<style scoped lang="scss">
+.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/CardButtonsSkeleton.vue b/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
deleted file mode 100644
index cd05d93b..00000000
--- a/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<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>
-
-<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 9205a225..16ab7944 100644
--- a/app/src/components/globals/skeletons/CardFormSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardFormSkeleton.vue
@@ -1,64 +1,56 @@
-<template>
-  <BCard>
-    <template #header>
-      <BSkeleton width="30%" height="36px" class="m-0" />
-    </template>
-
-    <template v-for="count in itemCount">
-      <BRow :key="count" :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
-            class="w100 d-flex justify-content-between"
-            v-if="count % 2 === 0"
-          >
-            <BSkeleton width="100%" height="38px" />
-
-            <BSkeleton width="38px" height="38px" class="ml-2" />
-          </div>
-
-          <BSkeleton v-else width="100%" height="38px" />
-
-          <BSkeleton :width="randint(15, 35) + '%'" height="19px" />
-        </BCol>
-      </BRow>
-
-      <hr :key="count + '-hr'" />
-    </template>
-
-    <template #footer>
-      <div class="d-flex justify-content-end w-100">
-        <BSkeleton width="100px" height="38px" />
-      </div>
-    </template>
-  </BCard>
-</template>
-
-<script>
+<script setup lang="ts">
 import { randint } from '@/helpers/commons'
+import type { Cols } from '@/types/commons'
 
-export default {
-  name: 'CardFormSkeleton',
-
-  props: {
-    itemCount: { type: Number, default: 5 },
-    cols: {
-      type: [Object, null],
-      default() {
-        return { md: 4, lg: 2 }
-      },
-    },
-  },
-
-  methods: { randint },
-}
+withDefaults(defineProps<{ itemCount?: number; cols: Cols }>(), {
+  itemCount: 5,
+  cols: () => ({ md: 4, lg: 2 }),
+})
 </script>
+
+<template>
+  <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 7a5435ae..f60a5cef 100644
--- a/app/src/components/globals/skeletons/CardInfoSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
@@ -1,30 +1,24 @@
-<template>
-  <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>
-</template>
-
-<script>
+<script setup lang="ts">
 import { randint } from '@/helpers/commons'
 
-export default {
-  name: 'CardInfoSkeleton',
-
-  props: {
-    itemCount: { type: Number, default: 5 },
-  },
-
-  methods: { randint },
-}
+withDefaults(defineProps<{ itemCount: number }>(), { itemCount: 5 })
 </script>
+
+<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>
+  </BSkeletonWrapper>
+</template>
diff --git a/app/src/components/globals/skeletons/CardListSkeleton.vue b/app/src/components/globals/skeletons/CardListSkeleton.vue
index 0726603b..c388d69c 100644
--- a/app/src/components/globals/skeletons/CardListSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardListSkeleton.vue
@@ -1,34 +1,31 @@
-<template>
-  <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="mr-3"
-          />
-        </div>
-        <BSkeleton :width="randint(30, 80) + '%'" height="24px" class="m-0" />
-      </BListGroupItem>
-    </BListGroup>
-  </BCard>
-</template>
-
-<script>
+<script setup lang="ts">
 import { randint } from '@/helpers/commons'
 
-export default {
-  name: 'CardListSkeleton',
-
-  props: {
-    itemCount: { type: Number, default: 5 },
-  },
-
-  methods: { randint },
-}
+withDefaults(defineProps<{ itemCount: number; search: boolean }>(), {
+  itemCount: 5,
+  search: false,
+})
 </script>
+
+<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>
+  </BSkeletonWrapper>
+</template>
diff --git a/app/src/components/globals/skeletons/ListGroupSkeleton.vue b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
index 0f638d3e..2e325bf6 100644
--- a/app/src/components/globals/skeletons/ListGroupSkeleton.vue
+++ b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
@@ -1,22 +1,19 @@
-<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>
-</template>
-
-<script>
+<script setup lang="ts">
 import { randint } from '@/helpers/commons'
 
-export default {
-  name: 'ListGroupSkeleton',
-
-  props: {
-    itemCount: { type: Number, default: 5 },
-  },
-
-  methods: { randint },
-}
+withDefaults(
+  defineProps<{ itemCount: number; button: boolean; search: boolean }>(),
+  { itemCount: 5, button: true, search: true },
+)
 </script>
+
+<template>
+  <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
new file mode 100644
index 00000000..730fa78c
--- /dev/null
+++ b/app/src/components/layouts/MainLayout.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+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 {
+  ModalError,
+  ModalReconnecting,
+  ModalWaiting,
+  ModalWarning,
+} from '@/components/modals'
+import { useInfos } from '@/composables/useInfos'
+import { useRequests } from '@/composables/useRequests'
+import { useSettings } from '@/composables/useSettings'
+import type { CustomRoute, Skeleton, VueClass } from '@/types/commons'
+
+const { t } = useI18n()
+const router = useRouter()
+const { routerKey } = useInfos()
+const { reconnecting, currentRequest, dismissModal } = useRequests()
+const { transitions, transitionName, dark } = useSettings()
+
+const RootView = createReusableTemplate<{
+  Component: VNode
+  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]
+  return skeletons.map((skeleton) =>
+    typeof skeleton === 'string' ? { is: skeleton } : skeleton,
+  )
+})
+
+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>
+          <template v-for="({ is, ...props }, i) in skeletons" :key="i">
+            <Component :is="is" v-bind="props" :class="{ 'mt-3': i !== 0 }" />
+          </template>
+        </template>
+      </Suspense>
+
+      <template v-if="modalComponent" #overlay>
+        <Component :is="modalComponent.is" v-bind="modalComponent.props" />
+      </template>
+    </BOverlay>
+  </RootView.define>
+
+  <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>
+        <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
+        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/components/modals/ModalError.vue b/app/src/components/modals/ModalError.vue
new file mode 100644
index 00000000..7a7dd531
--- /dev/null
+++ b/app/src/components/modals/ModalError.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+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>
+  <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>
diff --git a/app/src/components/modals/ModalOverlay.vue b/app/src/components/modals/ModalOverlay.vue
new file mode 100644
index 00000000..7630063e
--- /dev/null
+++ b/app/src/components/modals/ModalOverlay.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { APIRequest } from '@/composables/useRequests'
+
+withDefaults(
+  defineProps<{
+    request: APIRequest
+    hideFooter?: boolean
+  }>(),
+  {
+    hideFooter: true,
+  },
+)
+
+const emit = defineEmits<{
+  dismiss: [value: boolean]
+}>()
+
+defineSlots<{
+  default(props: Record<string, any>): any
+  footer(props: Record<string, any>): any
+}>()
+</script>
+
+<template>
+  <BModal
+    :model-value="true"
+    class="modal-overlay"
+    centered
+    hide-backdrop
+    no-close-on-backdrop
+    no-close-on-esc
+    :hide-footer="hideFooter"
+    no-fade
+  >
+    <template #header>
+      <QueryHeader type="overlay" :request="request" tabindex="0" />
+    </template>
+
+    <slot name="default" />
+
+    <template #footer>
+      <slot name="footer">
+        <BButton
+          v-t="'ok'"
+          variant="light"
+          size="sm"
+          @click="emit('dismiss', true)"
+        />
+      </slot>
+    </template>
+  </BModal>
+</template>
+
+<style lang="scss">
+.modal-overlay {
+  .modal-header {
+    padding: 0.5rem 0.75rem;
+  }
+  &-status {
+    display: inline-block;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+}
+</style>
diff --git a/app/src/components/modals/ModalReconnecting.vue b/app/src/components/modals/ModalReconnecting.vue
new file mode 100644
index 00000000..3f15e7c8
--- /dev/null
+++ b/app/src/components/modals/ModalReconnecting.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue'
+
+import api from '@/api'
+import ModalOverlay from '@/components/modals/ModalOverlay.vue'
+import type { APIRequest, ReconnectingArgs } from '@/composables/useRequests'
+import LoginView from '@/views/LoginView.vue'
+
+const props = defineProps<{
+  reconnecting: ReconnectingArgs
+}>()
+
+const emit = defineEmits<{
+  dismiss: [value: boolean]
+}>()
+
+const request = reactive<{
+  humanRoute: APIRequest['humanRoute']
+  status: APIRequest['status']
+  subStatus?: 'expired' | 'failed'
+}>({
+  status: 'pending',
+  humanRoute: 'reconnecting',
+})
+
+function tryToReconnect() {
+  request.status = 'pending'
+  request.subStatus = undefined
+  api
+    .tryToReconnect(props.reconnecting)
+    .then(() => {
+      emit('dismiss', true)
+    })
+    .catch((err) => {
+      if (err.name === 'APIUnauthorizedError') {
+        request.status = 'success'
+        request.subStatus = 'expired'
+      } else {
+        request.status = 'error'
+        request.subStatus = 'failed'
+      }
+    })
+}
+
+onMounted(() => {
+  tryToReconnect()
+})
+</script>
+
+<template>
+  <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="request.status === 'pending'">
+      <YSpinner class="mb-4" />
+
+      <YAlert
+        v-if="!!reconnecting.origin"
+        v-t="'api.reconnecting.reason.' + reconnecting.origin"
+        :variant="reconnecting.origin === 'unknown' ? 'warning' : 'info'"
+      />
+    </template>
+
+    <template v-if="request.subStatus === 'failed'">
+      <YAlert variant="danger">
+        <MarkdownItem :label="$t('api.reconnecting.failed')" />
+      </YAlert>
+    </template>
+    <template v-if="request.subStatus === 'failed'" #footer>
+      <BButton v-t="'retry'" variant="light" @click="tryToReconnect()" />
+    </template>
+
+    <template v-if="request.subStatus === 'expired'">
+      <YAlert v-t="'api.reconnecting.success'" variant="success" />
+
+      <LoginView force-reload />
+    </template>
+  </ModalOverlay>
+</template>
diff --git a/app/src/components/modals/ModalWaiting.vue b/app/src/components/modals/ModalWaiting.vue
new file mode 100644
index 00000000..8549b82b
--- /dev/null
+++ b/app/src/components/modals/ModalWaiting.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import ModalOverlay from '@/components/modals/ModalOverlay.vue'
+import type { APIRequest } from '@/composables/useRequests'
+
+const props = defineProps<{
+  request: APIRequest
+}>()
+
+const messages = computed(() => {
+  const messages = props.request.action?.messages
+  return messages?.length ? messages : null
+})
+
+const progress = computed(() => {
+  const progress = props.request.action?.progress
+  if (!progress) return null
+  return {
+    values: progress,
+    max: progress.reduce((sum, value) => sum + value, 0),
+  }
+})
+</script>
+
+<template>
+  <ModalOverlay :request="request">
+    <h5
+      v-t="messages || progress ? 'api.processing' : 'api_waiting'"
+      class="text-center mt-4"
+    />
+
+    <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>
+    <YSpinner v-else class="my-4" />
+
+    <MessageListGroup
+      v-if="messages"
+      auto-scroll
+      bordered
+      fixed-height
+      :limit="100"
+      :messages="messages"
+    />
+  </ModalOverlay>
+</template>
diff --git a/app/src/components/modals/ModalWarning.vue b/app/src/components/modals/ModalWarning.vue
new file mode 100644
index 00000000..bb6af0ae
--- /dev/null
+++ b/app/src/components/modals/ModalWarning.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import ModalOverlay from '@/components/modals/ModalOverlay.vue'
+import type { APIRequest } from '@/composables/useRequests'
+
+const props = defineProps<{
+  request: APIRequest
+}>()
+
+// FIXME probably doesn't need a computed here
+const warningMessage = computed(() => {
+  const messages = props.request.action!.messages
+  return messages[messages.length - 1]
+})
+</script>
+
+<template>
+  <ModalOverlay
+    :request="request"
+    footer-variant="warning"
+    body-variant="warning"
+    :hide-footer="false"
+  >
+    <div v-html="warningMessage.text" />
+  </ModalOverlay>
+</template>
diff --git a/app/src/components/modals/index.ts b/app/src/components/modals/index.ts
new file mode 100644
index 00000000..0da6d6d3
--- /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/composables/configPanels.ts b/app/src/composables/configPanels.ts
new file mode 100644
index 00000000..f2639404
--- /dev/null
+++ b/app/src/composables/configPanels.ts
@@ -0,0 +1,479 @@
+import evaluate from 'simple-evaluate'
+import type {
+  ComputedRef,
+  MaybeRefOrGetter,
+  Ref,
+  WritableComputedRef,
+} from 'vue'
+import { computed, ref, toValue, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { APIBadRequestError, APIError } from '@/api/errors'
+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,
+  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 cProps can be be any display item props
+    // but this is not type safe.
+    const cProps = {
+      label: formatI18nField(option.ask),
+      id: option.id,
+    } as MergeUnion<AnyDisplayItemProps>
+    const field: FormFieldDisplay<typeof component> = {
+      component,
+      visible,
+      cProps,
+      rules: undefined,
+    }
+
+    if (isIn(['button', 'alert'], option)) {
+      cProps.type = option.style
+      cProps.icon = option.icon
+      if (option.type === 'button') {
+        cProps.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 cProps can be be any writable item props
+    // but this is not type safe.
+    const cProps = {
+      id: option.id,
+      placeholder: option.example,
+    } as MergeUnion<AnyWritableItemProps>
+    const rules: FormField['rules'] = {}
+    const field: FormField<typeof component> = {
+      component,
+      label: formatI18nField(option.ask),
+      rules: option.readonly ? undefined : rules,
+      visible,
+      description: formatI18nField(option.help),
+    }
+
+    // We don't care about component props in case of readonly
+    if (option.readonly) {
+      return { ...field, readonly: true } as FormFieldReadonly<typeof component>
+    } else {
+      field.cProps = cProps
+    }
+
+    const t = i18n.global.t
+
+    if (isIn(ANY_INPUT_OPTION_TYPE, option)) {
+      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)
+        cProps.placeholder = '••••••••••••'
+      } else if (isIn(['number', 'range'], option)) {
+        rules.numValue = validators.integer
+        cProps.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)) {
+      cProps.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)) {
+      // cProps.limit = option.limit  // FIXME limit is not defined in core?
+      cProps.placeholder = option.placeholder
+      cProps.tagIcon = option.icon
+
+      if ('tags-select' === option.type) {
+        cProps.options = option.choices
+        cProps.auto = true
+        cProps.itemsName = ''
+        cProps.label = option.placeholder
+      }
+    } else if ('boolean' === option.type) {
+      // FIXME
+      // cProps.choices = option.choices
+    }
+
+    if ('file' === option.type) {
+      cProps.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
+ */
+export 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 } = 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<
+      KeyOfStr<FormFieldDict<NestedMV>>
+    >((option) => option.id)
+
+    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 | 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
+    return 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] = Object.values(ctx[key]).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
+    }
+  })
+}
+
+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 formatForm(form, { removeNullish: true })
+
+    onPanelApply({ panelId, data, action }, onErrorFn)
+  }
+
+  return {
+    form,
+    panel,
+    routes: config.routes,
+    v,
+    onPanelApply: onBeforePanelApply,
+  }
+}
diff --git a/app/src/composables/data.ts b/app/src/composables/data.ts
new file mode 100644
index 00000000..c0b69cc8
--- /dev/null
+++ b/app/src/composables/data.ts
@@ -0,0 +1,266 @@
+import { createGlobalState } from '@vueuse/core'
+import { computed, reactive, ref, toValue, type MaybeRefOrGetter } from 'vue'
+
+import type { RequestMethod } from '@/api/api'
+import { isEmptyValue, 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'
+import { useSettings } from './useSettings'
+
+function getNoDataMessage(key: DataKeys) {
+  return `No data in cache: you should query '${key}' before.`
+}
+
+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
+      } else if (method === 'DELETE') {
+        delete userDetails.value[param]
+        delete users.value[param]
+      }
+    } else if (key === 'permissions') {
+      if (method === 'GET') {
+        permissions.value = payload.permissions
+      } else if (method === 'PUT' && param) {
+        permissions.value[param] = payload
+      }
+    } 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]
+      }
+    } 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]
+        }
+      }
+    } else if (key === 'mainDomain' && method === 'PUT' && param) {
+      mainDomain.value = param
+    } 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}`,
+      )
+    }
+  }
+
+  return {
+    users,
+    userDetails,
+    groups,
+    permissions,
+
+    mainDomain,
+    domains,
+    domainDetails,
+
+    update,
+  }
+})
+
+export function useUsersAndGroups(username?: MaybeRefOrGetter<string>) {
+  const { users, userDetails } = useData()
+  return {
+    users: computed(() => {
+      const users_ = Object.values(users.value)
+      if (!users_.length) throw new Error(getNoDataMessage('users'))
+      return users_
+    }),
+    usernames: computed(() => {
+      const usersnames = Object.keys(users.value)
+      if (!usersnames.length) throw new Error(getNoDataMessage('users'))
+      return usersnames
+    }),
+    user: computed(() => {
+      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: domains_, domainDetails } = useData()
+
+  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
+        // 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,
+    )
+  })
+
+  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 {
+    maybeMainDomain: mainDomain,
+    mainDomain: computed(() => {
+      if (!mainDomain.value) throw new Error(getNoDataMessage('mainDomain'))
+      return mainDomain.value
+    }),
+    domain: computed(() => {
+      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) => ({
+        value: domain,
+        text: domain === mainDomain.value ? domain + ' ★' : domain,
+      }))
+    }),
+    orderedDomains,
+    domainsTree: computed(() => {
+      const domains = orderedDomains.value
+      const dataset = reactive(
+        domains.map((domain) => ({
+          // data to build a hierarchy
+          name: domain,
+          parent: getParentDomain(domain, domains),
+          // utility data that will be used by `RecursiveListGroup` component
+          to: { name: 'domain-info', params: { name: domain } },
+          opened: true,
+        })),
+      )
+      return stratify(dataset)
+    }),
+  }
+}
+
+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(/\.(.*)/s) as
+    | [StoreKeys, undefined]
+    | [StoreKeysParam, string]
+  const data = useData()
+  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')
+      }
+      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) => {
+      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)
+      }
+    },
+  }
+}
+
+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/composables/form.ts b/app/src/composables/form.ts
new file mode 100644
index 00000000..68cb19ae
--- /dev/null
+++ b/app/src/composables/form.ts
@@ -0,0 +1,185 @@
+// eslint-disable-next-line vue/prefer-import-from-vue
+import { isFunction } from '@vue/shared'
+import type {
+  BaseValidation,
+  ServerErrors,
+  Validation,
+  ValidationArgs,
+} from '@vuelidate/core'
+import useVuelidate from '@vuelidate/core'
+import { watchImmediate } from '@vueuse/core'
+import type {
+  ComputedRef,
+  InjectionKey,
+  MaybeRefOrGetter,
+  Ref,
+  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'
+
+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]) {
+        v[key].$touch()
+        clear?.(v[key].$path)
+      } else {
+        v.$touch()
+        clear?.(v.$path)
+      }
+    }
+  }
+  provide(ValidationTouchSymbol, touch)
+  const clear = inject(clearServerErrorsSymbol)
+
+  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> | WritableComputedRef<MV>, fields: FFD | (() => FFD)) {
+  const serverErrors = reactive<ServerErrors>({})
+  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,
+    { 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.form.$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
+  }
+}
+
+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
+    }, {})
+  })
+}
+
+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/composables/useAutoModal.ts b/app/src/composables/useAutoModal.ts
new file mode 100644
index 00000000..5ff0fb58
--- /dev/null
+++ b/app/src/composables/useAutoModal.ts
@@ -0,0 +1,45 @@
+import type { OrchestratedModal } from 'bootstrap-vue-next'
+import { BModal, useModalController } from 'bootstrap-vue-next'
+import { h } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { VueShowdown } from 'vue-showdown'
+
+export function useAutoModal() {
+  const { t } = useI18n()
+  const { confirm, show } = useModalController()
+
+  return function (
+    message: string,
+    props_: OrchestratedModal = {},
+    { markdown = false, cancelable = true } = {},
+  ) {
+    const props: OrchestratedModal = {
+      okTitle: t('ok'),
+      cancelTitle: t('cancel'),
+      centered: true,
+      okOnly: !cancelable,
+      ...(markdown
+        ? { headerVariant: 'warning' }
+        : {
+            hideHeader: true,
+            bodyVariant: 'warning',
+            bodyClass: ['fw-bold', 'rounded-top'],
+          }),
+      ...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/composables/useInfos.ts b/app/src/composables/useInfos.ts
new file mode 100644
index 00000000..f42bb542
--- /dev/null
+++ b/app/src/composables/useInfos.ts
@@ -0,0 +1,219 @@
+import { createGlobalState, useLocalStorage } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import type {
+  RouteLocationNormalized,
+  RouteLocationNormalizedLoaded,
+  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 { useDomains } from './data'
+import { useRequests, type ReconnectingArgs } from './useRequests'
+
+type BreadcrumbRoutes = {
+  name: RouteRecordNameGeneric
+  params: RouteParamsGeneric
+  args: RouteMeta['args']
+}
+
+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.
+  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()
+
+  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 breadcrumbRoutes = ref<BreadcrumbRoutes[]>([])
+
+  const breadcrumb = computed(() => {
+    return breadcrumbRoutes.value.map((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: route.name,
+        params: to.params,
+        args: route.meta.args || {},
+      }
+    })
+
+    updateHtmlTitle()
+  })
+
+  // 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)
+      }
+      throw err
+    }
+  }
+
+  async function onAppCreated() {
+    await _checkInstall()
+
+    if (!installed.value) {
+      router.push({ name: 'post-install' })
+    } else {
+      await _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: 'domains' })
+  }
+
+  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?: 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
+    // 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 updateHtmlTitle() {
+    // Display a simplified breadcrumb as the document title.
+    document.title = `${htmlTitle.value} | ${i18n.global.t('yunohost_admin')}`
+  }
+
+  return {
+    host,
+    installed,
+    connected,
+    yunohost,
+    routerKey,
+    breadcrumb,
+    ssoLink,
+    onAppCreated,
+    getYunoHostVersion,
+    onLogout,
+    login,
+    logout,
+    tryToReconnect,
+    updateHtmlTitle,
+    updateRouterKey,
+  }
+})
diff --git a/app/src/composables/useRequests.ts b/app/src/composables/useRequests.ts
new file mode 100644
index 00000000..5bca09e4
--- /dev/null
+++ b/app/src/composables/useRequests.ts
@@ -0,0 +1,209 @@
+import { createGlobalState } from '@vueuse/core'
+import { v4 as uuid } from 'uuid'
+import { computed, reactive, ref, shallowRef } from 'vue'
+import { useRouter } from 'vue-router'
+
+import type { APIQuery, RequestMethod } from '@/api/api'
+import { APIErrorLog, type APIError } from '@/api/errors'
+import { isObjectLiteral } from '@/helpers/commons'
+import i18n from '@/i18n'
+import type { StateVariant } from '@/types/commons'
+import { useInfos } from './useInfos'
+
+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
+  showModalTimeout?: number
+}
+type APIActionProps = {
+  messages: RequestMessage[]
+  errors: number
+  warnings: number
+  progress?: number[]
+}
+
+export type APIRequestAction = APIRequest & {
+  action: APIActionProps
+}
+
+export type RequestMessage = {
+  text: string
+  variant: StateVariant
+}
+
+export type ReconnectingArgs = {
+  attemps?: number
+  origin?: string
+  initialDelay?: number
+  delay?: number
+}
+
+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)
+  })
+  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) {
+      request.showModalTimeout = window.setTimeout(() => {
+        // Display the waiting modal only if the request takes some time.
+        if (r.status === 'pending') {
+          r.showModal = true
+        }
+      }, 300) as unknown as number
+    }
+
+    return r
+  }
+
+  function endRequest({
+    request,
+    success,
+    isFormError = false,
+  }: {
+    request: APIRequest
+    success: boolean
+    isFormError?: boolean
+  }) {
+    let status: RequestStatus = success ? 'success' : 'error'
+    let hideModal = success || isFormError
+
+    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'
+    }
+
+    if (request.showModalTimeout) {
+      // Clear the timeout to avoid delayed modal to show up
+      clearTimeout(request.showModalTimeout)
+      delete request.showModalTimeout
+    }
+
+    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)
+  }
+
+  function handleAPIError(err: APIError) {
+    err.log()
+    if (err.code === 401) {
+      // Unauthorized
+      useInfos().onLogout()
+    } 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,
+    currentRequest,
+    reconnecting,
+    locked,
+    startRequest,
+    endRequest,
+    handleAPIError,
+    dismissModal,
+    showModal,
+  }
+})
diff --git a/app/src/composables/useSearch.ts b/app/src/composables/useSearch.ts
new file mode 100644
index 00000000..dbe8f47b
--- /dev/null
+++ b/app/src/composables/useSearch.ts
@@ -0,0 +1,50 @@
+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> | ComputedRef<T>,
+  filterFn: (search: string, item: V, index: number, arr: T) => boolean,
+  {
+    externalSearch,
+    filterIfNoSearch = false,
+    filterAllFn,
+  }: {
+    filterAllFn?: (search: string, items: T) => boolean | undefined
+    filterIfNoSearch?: boolean
+    externalSearch?: Ref<string> | WritableComputedRef<string>
+  } = {},
+): [search: Ref<string>, filteredItems: ComputedRef<T | undefined | null>] {
+  const search = isRef(externalSearch)
+    ? externalSearch
+    : ref(toValue(externalSearch) ?? '')
+
+  const filteredItems = computed(() => {
+    const items_ = toValue(items)
+    const s = toValue(search.value).toLowerCase()
+    if (!items_.length) 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/composables/useSettings.ts b/app/src/composables/useSettings.ts
new file mode 100644
index 00000000..93798919
--- /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/commons.js b/app/src/helpers/commons.js
deleted file mode 100644
index a39d474a..00000000
--- a/app/src/helpers/commons.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * 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}
- */
-export function timeout(promise, delay) {
-  return new Promise((resolve, reject) => {
-    // FIXME reject(new Error('api_not_responding')) for post-install
-    setTimeout(() => reject, delay)
-    promise.then(resolve, reject)
-  })
-}
-
-/**
- * Check if passed value is an object literal.
- *
- * @param {*} value - Anything.
- * @return {Boolean}
- */
-export function isObjectLiteral(value) {
-  return (
-    value !== null &&
-    value !== undefined &&
-    Object.is(value.constructor, Object)
-  )
-}
-
-/**
- * Check if value is "empty" (`null`, `undefined`, `''`, `[]`, '{}').
- * Note: `0` is not considered "empty" in that helper.
- *
- * @param {*} value - Anything.
- * @return {Boolean}
- */
-export function isEmptyValue(value) {
-  if (typeof value === 'number') return false
-  return !value || value.length === 0 || Object.keys(value).length === 0
-}
-
-/**
- * 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}
- */
-export function flattenObjectLiteral(obj, flattened = {}) {
-  function flatten(objLit) {
-    for (const key in objLit) {
-      const value = objLit[key]
-      if (isObjectLiteral(value)) {
-        flatten(value)
-      } else {
-        flattened[key] = value
-      }
-    }
-  }
-  flatten(obj)
-  return flattened
-}
-
-/**
- * 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}
- */
-export function filterObject(obj, filter) {
-  return Object.fromEntries(
-    Object.entries(obj).filter((...args) => filter(...args)),
-  )
-}
-
-/**
- * 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 = []) {
-  return arr1.filter((item) => !arr2.includes(item))
-}
-
-/**
- * Returns a new string with escaped HTML (`&<>"'` replaced by entities).
- *
- * @param {String} unsafe
- * @return {String}
- */
-export function escapeHtml(unsafe) {
-  return unsafe
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;')
-}
-
-/**
- * Returns a random integer between `min` and `max`.
- *
- * @param {Number} min
- * @param {Number} max
- * @return {Number}
- */
-export function randint(min, max) {
-  return Math.floor(Math.random() * (max - min + 1)) + min
-}
-
-/**
- * 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>}
- */
-export function getFileContent(file, { base64 = false } = {}) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onerror = reject
-    reader.onload = () => resolve(reader.result)
-
-    if (base64) {
-      reader.readAsDataURL(file)
-    } else {
-      reader.readAsText(file)
-    }
-  })
-}
diff --git a/app/src/helpers/commons.ts b/app/src/helpers/commons.ts
new file mode 100644
index 00000000..e987213b
--- /dev/null
+++ b/app/src/helpers/commons.ts
@@ -0,0 +1,182 @@
+import i18n from '@/i18n'
+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 - A promise (like a fetch call).
+ * @param delay - delay after which the promise is rejected
+ */
+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)
+    promise.then(resolve, reject)
+  })
+}
+
+/**
+ * Check if passed value is an object literal.
+ *
+ * @param value - Anything.
+ */
+export function isObjectLiteral(value: any): value is Obj {
+  return (
+    value !== null &&
+    value !== undefined &&
+    Object.is(value.constructor, Object)
+  )
+}
+
+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.
+ *
+ * @param value - Anything.
+ */
+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
+  )
+}
+
+/**
+ * Returns an new Object filtered with passed filter function.
+ * Each entry `[key, value]` will be forwarded to the `filter` function.
+ *
+ * @param obj - object to filter.
+ * @param filter - the filter function to call for each entry.
+ */
+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)),
+  )
+}
+
+/**
+ * Returns an new array containing items that are in first array but not in the other.
+ */
+export function arrayDiff<T extends string>(
+  arr1: T[] = [],
+  arr2: T[] = [],
+): T[] {
+  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).
+ *
+ * @param unsafe - string to escape
+ */
+export function escapeHtml(unsafe: string) {
+  return unsafe
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+/**
+ * Returns a random integer between `min` and `max`.
+ *
+ * @param min - min possible value
+ * @param max - max possible value
+ */
+export function randint(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+/**
+ * Returns a File content.
+ *
+ * @param file -
+ * @param base64 - returns a base64 representation of the file.
+ */
+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 as string)
+
+    if (base64) {
+      reader.readAsDataURL(file)
+    } else {
+      reader.readAsText(file)
+    }
+  })
+}
+
+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)[]>(
+  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/helpers/data/tree.js b/app/src/helpers/data/tree.ts
similarity index 51%
rename from app/src/helpers/data/tree.js
rename to app/src/helpers/data/tree.ts
index d78f8d73..8c503fc0 100644
--- a/app/src/helpers/data/tree.js
+++ 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,117 @@ 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
       }
     })
   }
+
+  get length(): number {
+    return this.children.length
+  }
 }
 
+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 +190,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/helpers/filters/date.js b/app/src/helpers/filters/date.js
deleted file mode 100644
index 69907ee5..00000000
--- a/app/src/helpers/filters/date.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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 readableDate(date, isTimestamp = false) {
-  return format(new Date(isTimestamp ? date * 1000 : date), 'PPPpp', { locale })
-}
diff --git a/app/src/helpers/filters/date.ts b/app/src/helpers/filters/date.ts
new file mode 100644
index 00000000..32d829c1
--- /dev/null
+++ b/app/src/helpers/filters/date.ts
@@ -0,0 +1,21 @@
+import { formatDistanceToNow } from 'date-fns/formatDistanceToNow'
+import { format } from 'date-fns/format'
+
+import { dateFnsLocale as locale } from '@/i18n/helpers'
+
+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: 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.js b/app/src/helpers/filters/human.js
deleted file mode 100644
index eb95dbc1..00000000
--- a/app/src/helpers/filters/human.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export function humanSize(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]
-}
-
-export function humanPermissionName(text) {
-  return text
-    .split('.')[1]
-    .replace('_', ' ')
-    .replace(/\w\S*/g, (part) => {
-      return part.charAt(0).toUpperCase() + part.substr(1).toLowerCase()
-    })
-}
diff --git a/app/src/helpers/filters/human.ts b/app/src/helpers/filters/human.ts
new file mode 100644
index 00000000..91344597
--- /dev/null
+++ b/app/src/helpers/filters/human.ts
@@ -0,0 +1,16 @@
+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 = Math.floor(Math.log(b) / Math.log(1024))
+  return (b / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i]
+}
+
+export function humanPermissionName(text: string) {
+  return text
+    .split('.')[1]
+    .replace('_', ' ')
+    .replace(/\w\S*/g, (part) => {
+      return part.charAt(0).toUpperCase() + part.substr(1).toLowerCase()
+    })
+}
diff --git a/app/src/helpers/validators/customValidators.js b/app/src/helpers/validators/customValidators.ts
similarity index 79%
rename from app/src/helpers/validators/customValidators.js
rename to app/src/helpers/validators/customValidators.ts
index 12dffb8e..77a9f315 100644
--- a/app/src/helpers/validators/customValidators.js
+++ b/app/src/helpers/validators/customValidators.ts
@@ -1,70 +1,60 @@
-import { helpers } from 'vuelidate/lib/validators'
+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 =
   '\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: string) => {
+  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: string) => {
+  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) =>
-  helpers.withParams(
-    { type: 'includes', value: item },
-    (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) =>
-    items ? !helpers.req(item) || !items.includes(item) : true,
-  )(item)
+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
+  })
 
 export {
   alphalownumdot_,
@@ -75,7 +65,6 @@ export {
   emailForwardLocalPart,
   emailLocalPart,
   appRepoUrl,
-  includes,
   name,
   unique,
 }
diff --git a/app/src/helpers/validators/index.js b/app/src/helpers/validators/index.ts
similarity index 85%
rename from app/src/helpers/validators/index.js
rename to app/src/helpers/validators/index.ts
index 41708c0c..76a53e70 100644
--- a/app/src/helpers/validators/index.js
+++ b/app/src/helpers/validators/index.ts
@@ -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
deleted file mode 100644
index aa518b6f..00000000
--- a/app/src/helpers/yunohostArguments.js
+++ /dev/null
@@ -1,563 +0,0 @@
-import i18n from '@/i18n'
-import store from '@/store'
-import evaluate from 'simple-evaluate'
-import * as validators from '@/helpers/validators'
-import {
-  isObjectLiteral,
-  isEmptyValue,
-  flattenObjectLiteral,
-  getFileContent,
-} from '@/helpers/commons'
-
-const NO_VALUE_FIELDS = [
-  'ReadOnlyField',
-  'ReadOnlyAlertItem',
-  'MarkdownItem',
-  'DisplayTextItem',
-  'ButtonItem',
-]
-
-export const DEFAULT_STATUS_ICON = {
-  [null]: null,
-  danger: 'times',
-  error: 'times',
-  info: 'info',
-  success: 'check',
-  warning: 'warning',
-}
-
-/**
- * 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}
- */
-export function formatI18nField(field) {
-  if (typeof field === 'string') return field
-  const { locale, fallbackLocale } = store.state
-  return field ? 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}
- */
-export function sizeToM(sizeStr) {
-  const unit = sizeStr.slice(-1)
-  const value = sizeStr.slice(0, -1)
-  if (unit === 'M') return parseInt(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)
-  if (unit === 'T') return Math.ceil(value * 1024 * 1024)
-}
-
-/**
- * Returns a formatted address element to be used by AdressInputSelect component.
- *
- * @param {String} address - A string representing an adress (subdomain or email)
- * @return {Object} - `{ localPart, separator, domain }`.
- */
-export function adressToFormValue(address) {
-  const separator = address.includes('@') ? '@' : '.'
-  const [localPart, domain] = address.split(separator)
-  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
-  const validation = {}
-  const error = { message: null }
-  arg.ask = formatI18nField(arg.ask)
-  const field = {
-    is: arg.readonly ? 'ReadOnlyField' : '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.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.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.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'
-  } else if (arg.type === undefined) {
-      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) {
-      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.regex(
-      formatI18nField(arg.pattern.error),
-      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
-  }
-
-  // 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.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,
-    error,
-  }
-}
-
-/**
- * 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 = {}
-  const errors = {}
-
-  for (const arg of args) {
-    const { value, field, validation, error } = 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(
-        '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, errors }
-}
-
-export function formatYunoHostConfigPanels(data) {
-  const result = {
-    panels: [],
-    forms: {},
-    validations: {},
-    errors: {},
-  }
-
-  for (const { id: panelId, name, help, sections } of data.panels) {
-    const panel = {
-      id: panelId,
-      sections: [],
-      serverError: '',
-      hasApplyButton: false,
-    }
-    result.forms[panelId] = {}
-    result.validations[panelId] = {}
-    result.errors[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, errors } = 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)
-
-      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
- * objects must be merged to define the final sent form.
- *
- * 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 {*}
- */
-export function formatFormDataValue(value, key = null) {
-  if (Array.isArray(value)) {
-    return Promise.all(value.map((value_) => formatFormDataValue(value_))).then(
-      (resolvedValues) => ({ [key]: resolvedValues }),
-    )
-  }
-
-  let result = value
-  if (typeof value === 'boolean') result = value ? 1 : 0
-  if (isObjectLiteral(value) && 'file' in value) {
-    // File has to be deleted
-    if (value.removed) result = ''
-    // File has not changed (will not be sent)
-    else if (value.current || value.file === null) result = null
-    else {
-      return getFileContent(value.file, { base64: true }).then((content) => {
-        return {
-          [key]: content.replace(/data:[^;]*;base64,/, ''),
-          [key + '[name]']: value.file.name,
-        }
-      })
-    }
-  } else if (isObjectLiteral(value) && 'separator' in value) {
-    result = Object.values(value).join('')
-  }
-
-  // Returns a resolved Promise for non async values
-  return Promise.resolve(key ? { [key]: result } : result)
-}
-
-/**
- * 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 }), {})
-  })
-}
-
-/**
- * Format a form produced by a vue view to be sent to the server.
- *
- * @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.
- */
-export async function formatFormData(
-  formData,
-  {
-    extract = null,
-    flatten = false,
-    removeEmpty = true,
-    removeNull = false,
-  } = {},
-) {
-  const output = {
-    data: {},
-    extracted: {},
-  }
-
-  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
-    }
-  }
-
-  const { data, extracted } = output
-  return extract ? { data, ...extracted } : data
-}
diff --git a/app/src/helpers/yunohostArguments.ts b/app/src/helpers/yunohostArguments.ts
new file mode 100644
index 00000000..e545e16a
--- /dev/null
+++ b/app/src/helpers/yunohostArguments.ts
@@ -0,0 +1,256 @@
+import { toValue, type MaybeRef } from 'vue'
+
+import { useSettings } from '@/composables/useSettings'
+import {
+  getFileContent,
+  isEmptyValue,
+  isObjectLiteral,
+  toEntries,
+} from '@/helpers/commons'
+import type {
+  ArrInnerType,
+  Obj,
+  StateStatus,
+  Translation,
+} from '@/types/commons'
+import type { AdressModelValue, FileModelValue } from '@/types/form'
+import { isAdressModelValue, isFileModelValue } from '@/types/form'
+
+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',
+  danger: 'times',
+  warning: 'warning',
+  info: 'info',
+  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
+
+/**
+ * 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 field - A field value containing a translation object or string
+ * @return translated field or empty string
+ */
+export function formatI18nField(field?: Translation): string {
+  if (!field) return ''
+  if (typeof field === 'string') return field
+  const { locale, fallbackLocale } = useSettings()
+  return field[locale.value] || field[fallbackLocale.value] || field.en || ''
+}
+
+/**
+ * Returns a string size declaration to a M value.
+ *
+ * @param size - A size declared like '500M' or '56k'
+ * @return a number in M
+ */
+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)
+  if (unit === 'T') return Math.ceil(value * 1024 * 1024)
+}
+
+/**
+ * Returns an address as AdressModelValue to be used by AdressItem component.
+ *
+ * @param address - A string representing an adress (subdomain or email)
+ * @return Parsed address as `AdressModelValue`
+ */
+export function formatAdress(address: string): AdressModelValue {
+  const separator = address.includes('@') ? '@' : '.'
+  const [localPart, domain] = address.split(separator)
+  return { localPart, separator, domain }
+}
+
+// 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 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 - Any {@link PossibleFormValues}
+ * @return Promise that resolves the formated value
+ */
+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
+
+  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) formated = ''
+    // File has not changed (will not be sent)
+    else if (value.current || value.file === null) formated = null
+    else {
+      const filename = value.file.name
+      formated = await getFileContent(value.file, { base64: true }).then(
+        (content) => {
+          return {
+            content: content.replace(/data:[^;]*;base64,/, ''),
+            filename,
+          }
+        },
+      )
+    }
+  } else if (isAdressModelValue(value)) {
+    formated = Object.values(value).join('')
+  }
+
+  return formated
+}
+
+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 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 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 function formatForm<
+  T extends Obj<PossibleFormValues>,
+  R extends { [k in keyof T]: Awaited<FormValueReturnType<T[k]>> },
+>(
+  form: MaybeRef<T>,
+  { removeEmpty }: { removeEmpty: boolean },
+): 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 }: { removeNullish: boolean },
+): 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]>>[]],
+  )
+
+  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))
+        )
+      })
+    }
+    // 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
diff --git a/app/src/i18n/helpers.js b/app/src/i18n/helpers.js
deleted file mode 100644
index cd0b7117..00000000
--- a/app/src/i18n/helpers.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import store from '@/store'
-import i18n from '@/i18n'
-import supportedLocales from './supportedLocales'
-
-let dateFnsLocale
-const loadedLanguages = []
-
-/**
- * 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
-  if (locale && fallbackLocale) return [locale, fallbackLocale]
-
-  const navigatorLocales = navigator.languages || [navigator.language]
-  const defaultLocales = []
-  const supported = Object.keys(supportedLocales)
-  for (const locale of navigatorLocales) {
-    if (supported.includes(locale) && !defaultLocales.includes(locale)) {
-      defaultLocales.push(locale)
-    } else {
-      const lang = locale.split('-')[0]
-      if (supported.includes(lang) && !defaultLocales.includes(lang)) {
-        defaultLocales.push(lang)
-      }
-    }
-    if (defaultLocales.length === 2) break
-  }
-
-  return defaultLocales
-}
-
-function updateDocumentLocale(locale) {
-  document.documentElement.lang = locale
-  // FIXME can't currently change document direction easily since bootstrap still doesn't handle rtl.
-  // document.dir = locale === 'ar' ? 'rtl' : 'ltr'
-}
-
-/**
- * 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
-  })
-}
-
-/**
- * Loads a date-fns locale object
- */
-async function loadDateFnsLocale(locale) {
-  const dateFnsLocaleName = supportedLocales[locale].dateFnsLocale || locale
-  dateFnsLocale = (
-    await import(
-      `../../node_modules/date-fns/esm/locale/${dateFnsLocaleName}/index.js`
-    )
-  ).default
-}
-
-/**
- * Initialize all locales
- */
-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,
-}
diff --git a/app/src/i18n/helpers.ts b/app/src/i18n/helpers.ts
new file mode 100644
index 00000000..da633178
--- /dev/null
+++ b/app/src/i18n/helpers.ts
@@ -0,0 +1,82 @@
+import i18n from '@/i18n'
+import { nextTick } from 'vue'
+
+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.
+ */
+export function getDefaultLocales() {
+  const navigatorLocales = navigator.languages || [navigator.language]
+  const defaultLocales: SupportedLocales[] = []
+
+  for (const locale of navigatorLocales) {
+    if (isSupportedLocale(locale) && !defaultLocales.includes(locale)) {
+      defaultLocales.push(locale)
+    } else {
+      const lang = locale.split('-')[0]
+      if (isSupportedLocale(lang) && !defaultLocales.includes(lang)) {
+        defaultLocales.push(lang)
+      }
+    }
+    if (defaultLocales.length === 2) break
+  }
+
+  return defaultLocales as [SupportedLocales, SupportedLocales]
+}
+
+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
+    await loadDateFnsLocale(locale)
+  }
+
+  // Preload 'en' locales as it is the hard fallback
+  if (locale !== 'en' && !i18n.global.availableLocales.includes('en')) {
+    loadLocaleMessages('en')
+  }
+
+  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: SupportedLocales) {
+  if (!i18n.global.availableLocales.includes(locale)) {
+    await loadLocaleMessages(locale)
+  }
+  i18n.global.fallbackLocale.value = [locale, 'en']
+}
+
+/**
+ * Loads a translation file and adds its content to the i18n plugin `messages`.
+ *
+ * @return Promise that resolve the given locale string
+ */
+export async function loadLocaleMessages(locale: SupportedLocales) {
+  // 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()
+}
+
+/**
+ * Loads a date-fns locale object
+ */
+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/index.js b/app/src/i18n/index.js
deleted file mode 100644
index f575be80..00000000
--- a/app/src/i18n/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * i18n plugin module.
- * @module i18n
- */
-
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
-
-// Plugin Initialization
-Vue.use(VueI18n)
-
-export default new VueI18n({})
diff --git a/app/src/i18n/index.ts b/app/src/i18n/index.ts
new file mode 100644
index 00000000..fa6e965e
--- /dev/null
+++ b/app/src/i18n/index.ts
@@ -0,0 +1,10 @@
+/**
+ * i18n plugin module.
+ * @module i18n
+ */
+
+import { createI18n } from 'vue-i18n'
+
+export default createI18n({
+  legacy: false,
+})
diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index e8542309..d9773dcd 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",
diff --git a/app/src/i18n/supportedLocales.js b/app/src/i18n/supportedLocales.ts
similarity index 80%
rename from app/src/i18n/supportedLocales.js
rename to app/src/i18n/supportedLocales.ts
index 5574fc7b..2da0bf11 100644
--- a/app/src/i18n/supportedLocales.js
+++ 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/main.js b/app/src/main.js
deleted file mode 100644
index 7230e309..00000000
--- a/app/src/main.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-import BootstrapVue from 'bootstrap-vue'
-import VueShowdown from 'vue-showdown'
-
-import store from './store'
-import router from './router'
-import i18n from './i18n'
-
-import { registerGlobalErrorHandlers } from './api'
-import { initDefaultLocales } from './i18n/helpers'
-
-Vue.config.productionTip = false
-
-// Styles are imported in `src/App.vue` <style>
-Vue.use(BootstrapVue, {
-  BSkeleton: { animation: 'none' },
-  BAlert: { show: true },
-  BBadge: { pill: true },
-})
-
-Vue.use(VueShowdown, {
-  options: {
-    emoji: true,
-  },
-})
-
-// 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) {
-  return this.$bvModal.msgBoxConfirm(message, {
-    okTitle: this.$i18n.t('ok'),
-    cancelTitle: this.$i18n.t('cancel'),
-    bodyBgVariant: 'warning',
-    centered: true,
-    bodyClass: [
-      'font-weight-bold',
-      'rounded-top',
-      store.state.theme ? 'text-white' : 'text-black',
-    ],
-    ...props,
-  })
-}
-
-Vue.prototype.$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.$i18n.t('yes'),
-    cancelTitle: this.$i18n.t('cancel'),
-    headerBgVariant: 'warning',
-    headerClass: store.state.theme ? 'text-white' : 'text-black',
-    centered: true,
-    ...props,
-  })
-}
-
-// Register global components
-const globalComponentsModules = import.meta.glob(
-  ['@/components/globals/*.vue', '@/components/globals/*/*.vue'],
-  { eager: true },
-)
-Object.values(globalComponentsModules).forEach((module) => {
-  const component = module.default
-  Vue.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')
-})
diff --git a/app/src/main.ts b/app/src/main.ts
new file mode 100644
index 00000000..8f238788
--- /dev/null
+++ b/app/src/main.ts
@@ -0,0 +1,67 @@
+import { watchOnce } from '@vueuse/core'
+import { createBootstrap } from 'bootstrap-vue-next'
+import { createApp, type Component } from 'vue'
+import { VueShowdownPlugin } from 'vue-showdown'
+
+import App from './App.vue'
+import { APIError } from './api/errors'
+import { useRequests } from './composables/useRequests'
+import { useSettings } from './composables/useSettings'
+import i18n from './i18n'
+import router from './router'
+
+import '@/scss/main.scss'
+
+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(router)
+app.use(i18n)
+
+app.use(createBootstrap())
+
+app.use(VueShowdownPlugin, {
+  flavor: 'github',
+  options: {
+    emoji: true,
+  },
+})
+
+// Register global components
+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',
+    // })
+    // @ts-expect-error
+    app.component(component.__name || component.name, component)
+  },
+)
+
+// Load default locales translations files then mount the app
+watchOnce(useSettings().localesLoaded, () => app.mount('#app'))
diff --git a/app/src/router/index.js b/app/src/router/index.js
deleted file mode 100644
index dcb54734..00000000
--- a/app/src/router/index.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import Vue from 'vue'
-import VueRouter 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,
-  routes,
-
-  scrollBehavior(to, from, savedPosition) {
-    // Mimics the native scroll behavior of the browser.
-    // This allows the user to find his way back to the scroll level of the previous/next route.
-
-    // 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) {
-      return new Promise((resolve) => {
-        setTimeout(() => resolve(savedPosition), 0)
-      })
-    } else {
-      return savedPosition || { x: 0, y: 0 }
-    }
-  },
-})
-
-router.beforeEach((to, from, next) => {
-  if (store.getters.transitions && from.name !== null) {
-    store.dispatch('UPDATE_TRANSITION_NAME', { to, from })
-  }
-
-  if (store.getters.error) {
-    store.dispatch('DISMISS_ERROR', true)
-  }
-
-  if (to.name === 'post-install' && store.getters.installed) {
-    return next('/')
-  }
-  // Allow if connected or route is not protected
-  if (store.getters.connected || to.meta.noAuth) {
-    next()
-  } else {
-    store.dispatch('DISCONNECT', to)
-  }
-})
-
-router.afterEach((to, from) => {
-  store.dispatch('UPDATE_ROUTER_KEY', { to, from })
-  store.dispatch('UPDATE_BREADCRUMB', { to, from })
-})
-
-export default router
diff --git a/app/src/router/index.ts b/app/src/router/index.ts
new file mode 100644
index 00000000..a449597a
--- /dev/null
+++ b/app/src/router/index.ts
@@ -0,0 +1,54 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+
+import { useInfos } from '@/composables/useInfos'
+import { useRequests } from '@/composables/useRequests'
+import { useSettings } from '@/composables/useSettings'
+import routes from './routes'
+
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
+  routes,
+
+  scrollBehavior(to, from, savedPosition) {
+    // Mimics the native scroll behavior of the browser.
+    // This allows the user to find his way back to the scroll level of the previous/next route.
+
+    // 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
+    const { transitions } = useSettings()
+    if (transitions.value && savedPosition) {
+      return new Promise((resolve) => {
+        setTimeout(() => resolve(savedPosition), 0)
+      })
+    } else {
+      return savedPosition || { left: 0, top: 0 }
+    }
+  },
+})
+
+router.beforeEach((to, from, next) => {
+  const { transitions, updateTransitionName } = useSettings()
+  if (transitions.value && from.name !== null) {
+    updateTransitionName({ to, from })
+  }
+
+  const { currentRequest, dismissModal } = useRequests()
+  if (currentRequest.value?.err) {
+    // In case an error is still present after code route change
+    dismissModal(currentRequest.value.id)
+  }
+
+  const { installed, connected, onLogout } = useInfos()
+  if (to.name === 'post-install' && installed.value) {
+    return next('/')
+  }
+  // Allow if connected or route is not protected
+  if (connected.value || to.meta.noAuth) {
+    next()
+  } else {
+    onLogout(to)
+  }
+})
+
+export default router
diff --git a/app/src/router/routes.js b/app/src/router/routes.ts
similarity index 79%
rename from app/src/router/routes.js
rename to app/src/router/routes.ts
index dadfb423..36d3e44c 100644
--- a/app/src/router/routes.js
+++ 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: '/',
@@ -55,6 +51,7 @@ const routes = [
     meta: {
       args: { trad: 'users' },
       breadcrumb: ['user-list'],
+      skeleton: 'ListGroupSkeleton',
     },
   },
   {
@@ -64,6 +61,7 @@ const routes = [
     meta: {
       args: { trad: 'users_new' },
       breadcrumb: ['user-list', 'user-create'],
+      skeleton: 'CardFormSkeleton',
     },
   },
   {
@@ -84,6 +82,7 @@ const routes = [
     meta: {
       args: { param: 'name' },
       breadcrumb: ['user-list', 'user-info'],
+      skeleton: 'CardInfoSkeleton',
     },
   },
   {
@@ -94,6 +93,7 @@ const routes = [
     meta: {
       args: { param: 'name', trad: 'user_username_edit' },
       breadcrumb: ['user-list', 'user-info', 'user-edit'],
+      skeleton: 'CardFormSkeleton',
     },
   },
 
@@ -107,6 +107,7 @@ const routes = [
     meta: {
       args: { trad: 'groups_and_permissions' },
       breadcrumb: ['user-list', 'group-list'],
+      skeleton: 'CardFormSkeleton',
     },
   },
   {
@@ -129,6 +130,7 @@ const routes = [
     meta: {
       args: { trad: 'domains' },
       breadcrumb: ['domain-list'],
+      skeleton: 'ListGroupSkeleton',
     },
   },
   {
@@ -138,25 +140,20 @@ const routes = [
     meta: {
       args: { trad: 'domain_add' },
       breadcrumb: ['domain-list', 'domain-add'],
+      skeleton: 'CardFormSkeleton',
     },
   },
   {
-    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'],
+      skeleton: 'CardListSkeleton',
+    },
   },
 
   /* ───────╮
@@ -169,6 +166,7 @@ const routes = [
     meta: {
       args: { trad: 'applications' },
       breadcrumb: ['app-list'],
+      skeleton: 'ListGroupSkeleton',
     },
   },
   {
@@ -179,6 +177,7 @@ const routes = [
     meta: {
       args: { trad: 'catalog' },
       breadcrumb: ['app-list', 'app-catalog'],
+      skeleton: 'AppCatalogSkeleton',
     },
   },
   {
@@ -189,6 +188,7 @@ const routes = [
     meta: {
       args: { trad: 'install_name', param: 'id' },
       breadcrumb: ['app-list', 'app-catalog', 'app-install'],
+      skeleton: ['CardInfoSkeleton', { is: 'CardFormSkeleton', cols: null }],
     },
   },
   {
@@ -199,25 +199,20 @@ const routes = [
     meta: {
       args: { trad: 'install_name', param: 'id' },
       breadcrumb: ['app-list', 'app-catalog', 'app-install-custom'],
+      skeleton: ['CardInfoSkeleton', { is: 'CardFormSkeleton', cols: null }],
     },
   },
   {
-    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'],
+      skeleton: [{ is: 'CardInfoSkeleton', itemCount: 8 }, 'CardFormSkeleton'],
+    },
   },
 
   /* ────────────────╮
@@ -230,6 +225,7 @@ const routes = [
     meta: {
       args: { trad: 'system_update' },
       breadcrumb: ['update'],
+      skeleton: 'CardListSkeleton',
     },
   },
 
@@ -243,6 +239,7 @@ const routes = [
     meta: {
       args: { trad: 'services' },
       breadcrumb: ['tool-list', 'service-list'],
+      skeleton: { is: 'ListGroupSkeleton', button: false },
     },
   },
   {
@@ -253,6 +250,7 @@ const routes = [
     meta: {
       args: { param: 'name' },
       breadcrumb: ['tool-list', 'service-list', 'service-info'],
+      skeleton: ['CardInfoSkeleton', 'CardInfoSkeleton'],
     },
   },
 
@@ -275,16 +273,18 @@ const routes = [
     meta: {
       args: { trad: 'logs' },
       breadcrumb: ['tool-list', 'tool-logs'],
+      skeleton: { is: 'CardListSkeleton', search: true },
     },
   },
   {
     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', 'CardInfoSkeleton'],
     },
   },
   {
@@ -294,6 +294,10 @@ const routes = [
     meta: {
       args: { trad: 'migrations' },
       breadcrumb: ['tool-list', 'tool-migrations'],
+      skeleton: [
+        { is: 'CardListSkeleton', itemCount: 3 },
+        { is: 'CardListSkeleton', itemCount: 3 },
+      ],
     },
   },
   {
@@ -303,6 +307,7 @@ const routes = [
     meta: {
       args: { trad: 'firewall' },
       breadcrumb: ['tool-list', 'tool-firewall'],
+      skeleton: 'CardFormSkeleton',
     },
   },
   {
@@ -315,21 +320,16 @@ 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'],
+      skeleton: 'CardFormSkeleton',
+    },
   },
   {
     name: 'tool-power',
@@ -351,6 +351,7 @@ const routes = [
     meta: {
       args: { trad: 'diagnosis' },
       breadcrumb: ['diagnosis'],
+      skeleton: ['CardListSkeleton', 'CardListSkeleton', 'CardListSkeleton'],
     },
   },
 
@@ -374,6 +375,7 @@ const routes = [
     meta: {
       args: { param: 'id' },
       breadcrumb: ['backup', 'backup-list'],
+      skeleton: 'ListGroupSkeleton',
     },
   },
   {
@@ -384,6 +386,7 @@ const routes = [
     meta: {
       args: { param: 'name' },
       breadcrumb: ['backup', 'backup-list', 'backup-info'],
+      skeleton: [{ is: 'CardInfoSkeleton', itemCount: 4 }, 'CardListSkeleton'],
     },
   },
   {
@@ -394,6 +397,7 @@ const routes = [
     meta: {
       args: { trad: 'backup_create' },
       breadcrumb: ['backup', 'backup-list', 'backup-create'],
+      skeleton: 'CardListSkeleton',
     },
   },
 ]
diff --git a/app/src/scss/_functions-override.scss b/app/src/scss/_functions-override.scss
deleted file mode 100644
index 08cf131a..00000000
--- 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 05cb003c..63399daa 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -25,54 +25,81 @@
 // For exemple, turning rounding of elements off, the bases colors, etc.
 // $enable-rounded: false;
 
-$font-size-base: 0.9rem;
-$font-weight-bold: 500;
+@import '~bootstrap/scss/functions.scss';
 
-$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);
+$prefix: bs-;
 
-$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);
+$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: #cf76fc;
+$pink: #e93f8e;
+$red: #fd6666;
+$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;
+// Custom
+$best: $purple;
 
 $theme-colors: (
-  'best': $purple,
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'danger': $danger,
+  'light': $light,
+  'dark': $dark,
+  'best': $best,
 );
 
-$yiq-contrasted-threshold: var(--yiq-contrasted-threshold);
+// $min-contrast-ratio: 7;
 
-$alert-bg-level: -10;
-$alert-border-level: -9;
-$alert-color-level: 5;
+$spacer: 1rem;
 
-$list-group-item-bg-level: -11;
-$list-group-item-color-level: 6;
+$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: 400;
+$font-weight-semibold: 500;
+$font-weight-bold: 500;
+
+$headings-font-weight: 500;
+
+$font-size-base: 0.9rem;
 
 // Set fonts
 $font-family-sans-serif:
@@ -89,47 +116,76 @@ $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;
 $h4-font-size: $font-size-base * 1.25;
 $h5-font-size: $font-size-base * 1.1;
 
-$alert-padding-x: 1rem;
+$list-group-item-padding-y: $spacer * 0.75;
+$modal-md: 600px;
 
-$card-spacer-y: 0.6rem;
-$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'
-);
+$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/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';
 
-$hr-border-color: $gray-200;
+// 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, 30%),
+);
+// 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';
 
 $list-group-action-color: $gray-800;
 
@@ -155,6 +211,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/font.scss b/app/src/scss/font.scss
index bcc4f427..40182877 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';
-  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')
-      format('woff');
-  font-weight: 400;
   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:
+    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;
 }
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 6ed444d9..ba1b4661 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,121 +36,48 @@
 @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';
+// FIXME modals doesn't appears if we import the scss
+@import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
 
 // Import fonts
 @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
 
+: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;
 }
@@ -175,14 +99,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;
+    }
   }
 }
 
@@ -192,11 +121,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;
@@ -205,6 +139,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 {
@@ -215,7 +172,7 @@ body {
     }
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     flex-direction: column;
 
     &:not(:last-of-type) {
@@ -265,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
@@ -290,14 +249,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;
 
@@ -335,6 +294,11 @@ code {
   background: $gray-300;
   padding: 0.15rem 0.25rem;
   border-radius: $border-radius;
+
+  [data-bs-theme='dark'] & {
+    background-color: $gray-800;
+    color: $gray-400;
+  }
 }
 
 pre code {
@@ -346,6 +310,10 @@ pre code {
   padding: 1rem;
   background-color: $light;
   overflow: auto;
+
+  [data-bs-theme='dark'] & {
+    background-color: $dark;
+  }
 }
 
 .unselectable {
diff --git a/app/src/store/data.js b/app/src/store/data.js
deleted file mode 100644
index 9edbd216..00000000
--- a/app/src/store/data.js
+++ /dev/null
@@ -1,311 +0,0 @@
-import Vue from 'vue'
-
-import api from '@/api'
-import { isEmptyValue } from '@/helpers/commons'
-import { stratify } from '@/helpers/data/tree'
-
-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))
-  }
-
-  return 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]) {
-      Vue.set(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]) {
-      Vue.delete(state.domains_details, name)
-      if (state.domains) {
-        Vue.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 = {}
-      Vue.set(state.users, user.username, user)
-    },
-
-    SET_USERS_DETAILS(state, [username, userData]) {
-      Vue.set(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])
-        }
-      }
-    },
-
-    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]) {
-      Vue.delete(state.users_details, username)
-      if (state.users) {
-        Vue.delete(state.users, username)
-        if (Object.keys(state.users).length === 0) {
-          state.users = null
-        }
-      }
-    },
-
-    SET_GROUPS(state, [groups]) {
-      state.groups = groups
-    },
-
-    ADD_GROUPS(state, [{ name }]) {
-      if (state.groups !== undefined) {
-        Vue.set(state.groups, name, { members: [], permissions: [] })
-      }
-    },
-
-    UPDATE_GROUPS(state, [data, { groupName }]) {
-      Vue.set(state.groups, groupName, data)
-    },
-
-    DEL_GROUPS(state, [groupname]) {
-      Vue.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)
-      }
-    },
-  },
-
-  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
-        }
-      }
-    },
-  },
-
-  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,
-
-    orderedDomains: (state) => {
-      if (!state.domains) return
-
-      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()]
-        }),
-      )
-
-      return state.domains.sort(
-        (a, b) => splittedDomains[a] > splittedDomains[b],
-      )
-    },
-
-    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
-      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,
-      }))
-      return stratify(dataset)
-    },
-
-    domain: (state) => (name) => state.domains_details[name],
-
-    highestDomainParentName: (state, getters) => (name) => {
-      return getParentDomain(name, getters.orderedDomains, true)
-    },
-
-    mainDomain: (state) => state.main_domain,
-
-    domainsAsChoices: (state) => {
-      const mainDomain = state.main_domain
-      return state.domains.map((domain) => {
-        return {
-          value: domain,
-          text: domain === mainDomain ? domain + ' ★' : domain,
-        }
-      })
-    },
-  },
-}
diff --git a/app/src/store/index.js b/app/src/store/index.js
deleted file mode 100644
index ea7adddf..00000000
--- a/app/src/store/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-import info from './info'
-import settings from './settings'
-import data from './data'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  state: settings.state,
-  mutations: settings.mutations,
-  actions: settings.actions,
-  getters: settings.getters,
-  modules: {
-    info,
-    data,
-  },
-})
diff --git a/app/src/store/info.js b/app/src/store/info.js
deleted file mode 100644
index 5bc5ce3f..00000000
--- a/app/src/store/info.js
+++ /dev/null
@@ -1,433 +0,0 @@
-import Vue from 'vue'
-import router from '@/router'
-import i18n from '@/i18n'
-import api from '@/api'
-import { timeout, isEmptyValue, isObjectLiteral } from '@/helpers/commons'
-
-export default {
-  state: {
-    host: window.location.host, // String
-    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`
-    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
-  },
-
-  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_WAITING(state, boolean) {
-      state.waiting = boolean
-    },
-
-    SET_RECONNECTING(state, args) {
-      state.reconnecting = args
-    },
-
-    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, { request, key, value }) {
-      // This rely on data persistance and reactivity.
-      Vue.set(request, 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, { request }) {
-      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
-      request.messages = request.messages.concat(messages)
-      request.warnings += warnings
-      request.errors += errors
-    },
-
-    SET_ERROR(state, request) {
-      if (request) {
-        state.error = request
-      } else {
-        state.error = null
-      }
-    },
-
-    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 = router.currentRoute) {
-      dispatch('RESET_CONNECTED')
-      if (router.currentRoute.name === 'login') return
-      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 }
-            : {},
-      })
-    },
-
-    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 = {}) {
-      // 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)
-    },
-
-    GET_YUNOHOST_INFOS({ commit }) {
-      return api.get('versions').then((versions) => {
-        commit('SET_YUNOHOST_INFOS', versions.yunohost)
-      })
-    },
-
-    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.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)
-      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'
-        ) {
-          request.showWarningMessage = true
-        }
-        status = 'warning'
-      }
-
-      commit('UPDATE_REQUEST', { request, key: 'status', value: status })
-      if (wait && !request.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
-        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
-        Vue.set(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)
-      Vue.delete(request, 'showWarningMessage')
-    },
-
-    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.t(trad, { [param]: to.params[param] })
-        } else if (trad) {
-          text = i18n.t(trad)
-        } else {
-          text = to.params[param]
-        }
-        return { name: route.name, text }
-      }
-
-      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(' / ')
-      }
-
-      // Display a simplified breadcrumb as the document title.
-      document.title = `${getTitle(breadcrumb)} | ${i18n.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,
-    error: (state) => state.error,
-    waiting: (state) => state.waiting,
-    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]
-    },
-    routerKey: (state) => state.routerKey,
-    breadcrumb: (state) => state.breadcrumb,
-    transitionName: (state) => state.transitionName,
-    ssoLink: (state, getters) => {
-      return `//${getters.mainDomain ?? state.host}/yunohost/sso`
-    },
-  },
-}
diff --git a/app/src/store/settings.js b/app/src/store/settings.js
deleted file mode 100644
index a67e98d0..00000000
--- a/app/src/store/settings.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Settings module store.
- * @module store/settings
- */
-
-import i18n from '@/i18n'
-import {
-  loadLocaleMessages,
-  updateDocumentLocale,
-  loadDateFnsLocale,
-} 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',
-    theme: localStorage.getItem('theme') === 'true',
-    experimental: localStorage.getItem('experimental') === 'true',
-    spinner: 'pacman',
-    supportedLocales,
-  },
-
-  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_THEME(state, boolean) {
-      localStorage.setItem('theme', boolean)
-      state.theme = boolean
-      document.documentElement.setAttribute('dark-theme', boolean)
-    },
-  },
-
-  actions: {
-    UPDATE_LOCALE({ commit }, locale) {
-      loadLocaleMessages(locale).then(() => {
-        updateDocumentLocale(locale)
-        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(() => {
-        commit('SET_FALLBACKLOCALE', locale)
-        i18n.fallbackLocale = [locale, 'en']
-      })
-    },
-
-    UPDATE_THEME({ commit }, theme) {
-      commit('SET_THEME', theme)
-    },
-  },
-
-  getters: {
-    locale: (state) => state.locale,
-    fallbackLocale: (state) => state.fallbackLocale,
-    cache: (state) => state.cache,
-    transitions: (state) => state.transitions,
-    theme: (state) => state.theme,
-    experimental: (state) => state.experimental,
-    spinner: (state) => state.spinner,
-
-    availableLocales: (state) => {
-      return Object.entries(state.supportedLocales).map(
-        ([locale, { name }]) => {
-          return { value: locale, text: name }
-        },
-      )
-    },
-  },
-}
diff --git a/app/src/types/commons.ts b/app/src/types/commons.ts
new file mode 100644
index 00000000..27aa7df9
--- /dev/null
+++ b/app/src/types/commons.ts
@@ -0,0 +1,44 @@
+import type { Breakpoint } from 'bootstrap-vue-next'
+import type { RouteLocationNamedRaw, RouteLocationNormalized } 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' // prettier-ignore
+export type Cols = Partial<Record<Breakpoint, boolean | ColsNumbers | 'auto'>>
+
+// CUSTOM
+
+export type Skeleton = { is: string } & Obj
+export type CustomRoute = {
+  to: RouteLocationNamedRaw
+  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'
+export type StateStatus = 'success' | 'info' | 'warning' | 'error'
+
+// HELPERS
+
+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 00000000..1ef788b0
--- /dev/null
+++ b/app/src/types/configPanels.ts
@@ -0,0 +1,80 @@
+import type { ComputedRef, 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 | ComputedRef<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/api.ts b/app/src/types/core/api.ts
new file mode 100644
index 00000000..f860e216
--- /dev/null
+++ b/app/src/types/core/api.ts
@@ -0,0 +1,332 @@
+import type { Obj, Translation } from '@/types/commons'
+import type { Permission } from '@/types/core/data'
+import type { AnyOption } from '@/types/core/options'
+
+// 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
+}
+
+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[]
+  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
+  }[]
+}
+
+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
+}
+
+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
+}
+
+export type BackupList = {
+  archives: Obj<{
+    path: string
+    created_at: string
+    description: string
+    size: number
+  }>
+}
+
+// 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[]>
+export type ServiceList = Obj<ServiceInfo>
+
+// 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
+  }[]
+}
+
+// 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
+  }
+}
+
+// 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
+  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[]
+}
+
+// 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[]
+}
+
+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 = {
+  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/types/core/data.ts b/app/src/types/core/data.ts
new file mode 100644
index 00000000..63097c7e
--- /dev/null
+++ b/app/src/types/core/data.ts
@@ -0,0 +1,46 @@
+import type { StateVariant } from '@/types/commons'
+
+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: 'selfsigned' | 'letsencrypt' | 'other'
+    validity: number
+    style: Exclude<StateVariant, 'info'>
+    summary: string // enum
+    ACME_eligible: boolean
+  }
+  registrar: string // or null ?
+  apps: { name: string; id: string; path: string }[]
+  main: boolean
+  topest_parent: string | null
+}
diff --git a/app/src/types/core/options.ts b/app/src/types/core/options.ts
new file mode 100644
index 00000000..fc5ab4f6
--- /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> = 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
new file mode 100644
index 00000000..ca11ae66
--- /dev/null
+++ b/app/src/types/form.ts
@@ -0,0 +1,331 @@
+import type {
+  BaseValidation,
+  ValidationArgs,
+  ValidationRuleCollection,
+} from '@vuelidate/core'
+import type { ComputedRef } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+import { isObjectLiteral } from '@/helpers/commons'
+import type { ArrInnerType, Cols, Obj, StateVariant } from '@/types/commons'
+
+type StateValidation = false | null
+export type Choice = string | { text: string; value: string }
+type Choices = Choice[]
+
+export type TagUpdateArgs = {
+  action: 'add' | 'remove'
+  tag: string
+  applyFn: (tag: string) => void
+}
+
+// DISPLAY
+
+type BaseDisplayItemProps = {
+  label: string
+  id?: string
+}
+
+export type ButtonItemProps = BaseDisplayItemProps & {
+  id: string
+  enabled?: boolean | ComputedRef<boolean>
+  icon?: string
+  type?: StateVariant
+}
+
+export type DisplayTextItemProps = BaseDisplayItemProps
+
+export type MarkdownItemProps = BaseDisplayItemProps
+
+export type ReadOnlyAlertItemProps = BaseDisplayItemProps & {
+  icon?: string
+  type?: StateVariant
+}
+
+// WRITABLE
+
+type BaseWritableItemProps = {
+  id?: string
+  name?: string
+  placeholder?: string
+  touchKey?: string
+  disabled?: boolean
+}
+
+export type BaseItemComputedProps = {
+  ariaDescribedby?: string | string[]
+  state?: StateValidation
+  validation?: BaseValidation
+}
+
+export type AdressItemProps = BaseWritableItemProps & {
+  choices: Choices
+  type?: 'domain' | 'email'
+}
+export type AdressModelValue = {
+  localPart: string | null
+  separator: string
+  domain: string | null
+}
+
+export type CheckboxItemProps = BaseWritableItemProps & {
+  label?: string
+  labels?: { true: string; false: string }
+  // FIXME unused?
+  // choices: Choices
+}
+
+export type FileItemProps = BaseWritableItemProps & {
+  accept?: string | string[]
+  dropPlaceholder?: string
+}
+export type FileModelValue = {
+  file: File | null
+  content?: string | null
+  current?: boolean
+  removed?: boolean
+}
+
+export type InputItemProps = BaseWritableItemProps & {
+  autocomplete?:
+    | 'off'
+    | 'on'
+    | 'name'
+    | 'email'
+    | 'username'
+    | 'new-password'
+    | 'current-password'
+    | 'url'
+  // pattern?: object
+  // choices?: Choices FIXME rm ?
+  step?: number
+  trim?: boolean
+  type?:
+    | 'color'
+    | 'date'
+    // | 'datetime-local'
+    | 'email'
+    | 'number'
+    | 'password'
+    | 'range'
+    // | 'search'
+    | 'text'
+    | 'time'
+    | 'url'
+}
+
+export type SelectItemProps = BaseWritableItemProps & {
+  choices: Choices
+}
+
+export type TagsItemProps = BaseWritableItemProps & {
+  limit?: number
+  // FIXME no options on BFormTags?
+  // options?: string[]
+}
+
+export type TagsSelectizeItemProps = BaseWritableItemProps & {
+  itemsName: string
+  options: Choices
+  auto?: boolean
+  disabledItems?: string[]
+  label: string
+  limit?: number
+  noTags?: boolean
+  tagIcon?: string
+}
+
+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 = [
+  'AdressItem',
+  'CheckboxItem',
+  'FileItem',
+  'InputItem',
+  'SelectItem',
+  'TagsItem',
+  '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,
+  )
+}
+
+export function isNonWritableComponent(
+  field:
+    | FormField<AnyWritableComponents>
+    | FormField
+    | FormFieldReadonly
+    | FormFieldDisplay,
+): field is FormFieldDisplay | FormFieldReadonly {
+  return isDisplayComponent(field) || !!field.readonly
+}
+
+export type ItemComponentToItemProps = {
+  // DISPLAY
+  ButtonItem: ButtonItemProps
+  DisplayTextItem: DisplayTextItemProps
+  MarkdownItem: MarkdownItemProps
+  ReadOnlyAlertItem: ReadOnlyAlertItemProps
+  // 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 = {
+  validation?: BaseValidation
+}
+
+type BaseFormField<C extends AnyItemComponents> = {
+  component?: C
+  cProps?: ItemComponentToItemProps[C]
+  hr?: boolean
+  id?: string
+  label?: string
+  readonly?: boolean
+  visible?: boolean | ComputedRef<boolean>
+}
+
+export type FormField<
+  C extends AnyWritableComponents = AnyWritableComponents,
+  MV extends any = any,
+> = BaseFormField<C> & {
+  append?: string
+  asInputGroup?: boolean
+  cProps?: ItemComponentToItemProps[C]
+  description?: string
+  descriptionVariant?: StateVariant
+  labelFor?: string
+  link?:
+    | { text: string; name: RouteLocationRaw }
+    | { text: string; href: string }
+  rules?: FormFieldRules<MV>
+  prepend?: string
+  readonly?: false
+}
+
+export type FormFieldReadonly<
+  C extends AnyWritableComponents = AnyWritableComponents,
+> = BaseFormField<C> & {
+  label: string
+  cols?: Cols
+  readonly: true
+  rules?: undefined
+}
+
+export type FormFieldDisplay<
+  C extends AnyDisplayComponents = AnyDisplayComponents,
+> = {
+  component?: C
+  cProps?: ItemComponentToItemProps[C]
+  visible?: boolean | ComputedRef<boolean>
+  hr?: boolean
+  readonly?: true
+  rules?: undefined
+}
+
+export type FormFieldProps<
+  C extends AnyWritableComponents,
+  MV extends any,
+> = Omit<FormField<C, MV>, 'hr' | 'visible' | 'readonly'> &
+  BaseFormFieldComputedProps
+
+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
+    ?
+        | FormField<AnyWritableComponents, T[k]>
+        | FormFieldReadonly<AnyWritableComponents>
+    :
+        | FormField<AnyWritableComponents>
+        | FormFieldReadonly<AnyWritableComponents>
+        | FormFieldDisplay<AnyDisplayComponents>
+}
+
+// Type to check if object satisfies specified Field and Item
+export type FieldProps<
+  C extends AnyItemComponents = AnyItemComponents,
+  MV extends any = never,
+> = C extends AnyWritableComponents
+  ?
+      | (FormField<C, MV> & { component: C })
+      | (FormFieldReadonly<C> & { component: C })
+  : C extends AnyDisplayComponents
+    ? FormFieldDisplay<C> & { component: 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
+}
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index ae303438..f8c1d67a 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">
@@ -6,40 +22,10 @@
         :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>
 </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;
-}
-</style>
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index 1dcb4f98..28078841 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -1,111 +1,95 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter, type LocationQueryValue } from 'vue-router'
+
+import { useForm } from '@/composables/form'
+import { useInfos } from '@/composables/useInfos'
+import { alphalownumdot_, minLength, required } from '@/helpers/validators'
+import type { FieldProps, FormFieldDict } from '@/types/form'
+
+const props = withDefaults(
+  defineProps<{
+    forceReload?: boolean
+  }>(),
+  {
+    forceReload: false,
+  },
+)
+
+const { t } = useI18n()
+const router = useRouter()
+const { login, installed } = useInfos()
+
+type Form = typeof form.value
+const form = ref({
+  username: '',
+  password: '',
+})
+const fields = {
+  username: {
+    component: 'InputItem',
+    label: t('user_username'),
+    rules: { required, alphalownumdot_ },
+    cProps: {
+      id: 'username',
+      autocomplete: 'username',
+    },
+  } satisfies FieldProps<'InputItem', Form['username']>,
+
+  password: {
+    component: 'InputItem',
+    label: t('password'),
+    rules: { required, passwordLenght: minLength(4) },
+    cProps: {
+      id: 'password',
+      type: 'password',
+      autocomplete: 'current-password',
+    },
+  } satisfies FieldProps<'InputItem', Form['password']>,
+} satisfies FormFieldDict<Form>
+
+const { v, onSubmit } = useForm(form, fields)
+
+const onLogin = onSubmit((onError) => {
+  const { username, password } = form.value
+  const credentials = [username, password].join(':')
+  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) => 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.form.username"
-    />
-
-    <!-- ADMIN PASSWORD -->
-    <FormField
-      v-bind="fields.password"
-      v-model="form.password"
-      :validation="$v.form.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') }}
+        {{ t('login') }}
       </BButton>
     </template>
   </CardForm>
 </template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
-import { alphalownumdot_, required, minLength } from '@/helpers/validators'
-
-export default {
-  name: 'LoginView',
-
-  mixins: [validationMixin],
-
-  props: {
-    forceReload: { type: Boolean, default: false },
-  },
-
-  data() {
-    return {
-      serverError: '',
-      form: {
-        username: '',
-        password: '',
-      },
-      fields: {
-        username: {
-          label: this.$i18n.t('user_username'),
-          props: {
-            id: 'username',
-            autocomplete: 'username',
-          },
-        },
-        password: {
-          label: this.$i18n.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.query.redirect || { name: 'home' },
-            )
-          }
-        })
-        .catch((err) => {
-          if (err.name !== 'APIUnauthorizedError') throw err
-          this.serverError = this.$i18n.t('wrong_password_or_username')
-        })
-    },
-  },
-}
-</script>
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 560cbf53..fc170a3a 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -1,3 +1,151 @@
+<script setup lang="ts">
+import router from '@/router'
+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 { useInfos } from '@/composables/useInfos'
+import {
+  alphalownumdot_,
+  minLength,
+  name,
+  required,
+  sameAs,
+} from '@/helpers/validators'
+import { formatForm } 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 { installed } = useInfos()
+
+if (installed.value) {
+  router.push({ name: 'home' })
+}
+
+type Steps = 'start' | 'domain' | 'user' | 'rootfsspace-error' | 'login'
+const step = ref<Steps>('start')
+const serverError = ref('')
+const domain = ref('')
+const dyndns_recovery_password = ref<string | undefined>()
+
+type Form = typeof form.value
+const form = ref({
+  username: '',
+  fullname: '',
+  password: '',
+  confirmation: '',
+})
+const fields = {
+  alert: {
+    component: 'ReadOnlyAlertItem',
+    cProps: { label: t('postinstall.user.first_user_help'), type: 'info' },
+  } satisfies FieldProps<'ReadOnlyAlertItem'>,
+
+  username: {
+    component: 'InputItem',
+    label: t('user_username'),
+    rules: { required, alphalownumdot_ },
+    cProps: { id: 'username', placeholder: t('placeholder.username') },
+  } satisfies FieldProps<'InputItem', Form['username']>,
+
+  fullname: {
+    component: 'InputItem',
+    label: t('user_fullname'),
+    rules: { required, name },
+    cProps: { 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) },
+    cProps: { id: 'password', placeholder: '••••••••', type: 'password' },
+  } satisfies FieldProps<'InputItem', Form['password']>,
+
+  confirmation: reactive({
+    component: 'InputItem',
+    label: t('password_confirmation'),
+    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)
+
+function goToStep(step_: Steps) {
+  serverError.value = ''
+  step.value = step_
+}
+
+function setDomain(data: {
+  domain: string
+  dyndns_recovery_password?: string
+}) {
+  domain.value = data.domain
+  dyndns_recovery_password.value = data.dyndns_recovery_password
+  goToStep('user')
+}
+
+const setUser = onSubmit(async () => {
+  const confirmed = await modalConfirm(
+    t('confirm_postinstall', { domain: domain.value }),
+  )
+  if (!confirmed) return
+  performPostInstall()
+})
+
+async function performPostInstall(force = false) {
+  const { username, fullname, password } = form.value
+  const data = await formatForm(
+    {
+      domain: domain.value,
+      dyndns_recovery_password: dyndns_recovery_password.value,
+      username,
+      fullname,
+      password,
+    },
+    { removeEmpty: true },
+  )
+
+  api
+    .post({
+      uri: 'postinstall' + (force ? '?force_diskspace' : ''),
+      data,
+      humanKey: { key: 'postinstall' },
+    })
+    .then(() => {
+      // Display success message and allow the user to login
+      goToStep('login')
+    })
+    .catch((err) => {
+      const hasWordsInError = (words: string[]) =>
+        words.some((word) => (err.key || err.message).includes(word))
+      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 {
+        step.value = 'user'
+        serverErrors.global = [err.message]
+      }
+    })
+}
+</script>
+
 <template>
   <div class="post-install">
     <!-- START STEP -->
@@ -20,17 +168,18 @@
     <!-- DOMAIN SETUP STEP -->
     <template v-else-if="step === 'domain'">
       <DomainForm
+        :domains="[]"
         :title="$t('postinstall_set_domain')"
         :submit-text="$t('next')"
         :server-error="serverError"
         @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>
@@ -38,28 +187,16 @@
     <!-- 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, name) in fields"
-          :key="name"
-          v-bind="field"
-          v-model="user[name]"
-          :validation="$v.user[name]"
-        />
-      </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>
@@ -87,146 +224,3 @@
     </template>
   </div>
 </template>
-
-<script>
-import { validationMixin } from 'vuelidate'
-
-import api from '@/api'
-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',
-
-  mixins: [validationMixin],
-
-  components: {
-    DomainForm,
-    LoginView,
-  },
-
-  data() {
-    return {
-      step: 'start',
-      serverError: '',
-      domain: undefined,
-      dyndns_recovery_password: '',
-      user: {
-        username: '',
-        fullname: '',
-        password: '',
-        confirmation: '',
-      },
-
-      fields: {
-        username: {
-          label: this.$i18n.t('user_username'),
-          props: {
-            id: 'username',
-            placeholder: this.$i18n.t('placeholder.username'),
-          },
-        },
-
-        fullname: {
-          label: this.$i18n.t('user_fullname'),
-          props: {
-            id: 'fullname',
-            placeholder: this.$i18n.t('placeholder.fullname'),
-          },
-        },
-
-        password: {
-          label: this.$i18n.t('password'),
-          description: this.$i18n.t('good_practices_about_admin_password'),
-          descriptionVariant: 'warning',
-          props: { id: 'password', placeholder: '••••••••', type: 'password' },
-        },
-
-        confirmation: {
-          label: this.$i18n.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.$askConfirmation(
-        this.$i18n.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('password') },
-      },
-    }
-  },
-}
-</script>
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index a67530eb..0c4d27dd 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -1,11 +1,189 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useForm } from '@/composables/form'
+import {
+  domain,
+  dynDomain,
+  minLength,
+  required,
+  sameAs,
+} from '@/helpers/validators'
+import { formatFormValue } from '@/helpers/yunohostArguments'
+import type { AdressModelValue, FieldProps, FormFieldDict } from '@/types/form'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    domains: string[]
+    title: string
+    submitText?: string
+    serverError?: string
+  }>(),
+  {
+    submitText: undefined,
+    serverError: undefined,
+  },
+)
+const emit = defineEmits<{
+  submit: [data: { domain: string; dyndns_recovery_password?: 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) => {
+    return dynDomains.some((dynDomain) => domain.includes(dynDomain))
+  })
+})
+
+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 fields = {
+  domain: reactive({
+    component: 'InputItem',
+    label: t('domain_name'),
+    rules: computed(() => {
+      return selected.value === 'domain' ? { required, domain } : undefined
+    }),
+    cProps: {
+      id: 'domain',
+      placeholder: t('placeholder.domain'),
+    },
+  }) satisfies FieldProps<'InputItem', Form['domain']>,
+
+  dynDomain: reactive({
+    component: 'AdressItem',
+    label: t('domain_name'),
+    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']>,
+
+  dynDomainPassword: reactive({
+    component: 'InputItem',
+    label: t('domain.add.dyn_dns_password'),
+    description: t('domain.add.dyn_dns_password_desc'),
+    rules: computed(() => {
+      return selected.value === 'dynDomain'
+        ? { required, passwordLenght: minLength(8) }
+        : undefined
+    }),
+    cProps: {
+      id: 'dyn-dns-password',
+      placeholder: '••••••••',
+      type: 'password',
+    },
+  }) satisfies FieldProps<'InputItem', Form['dynDomainPassword']>,
+
+  dynDomainPasswordConfirmation: reactive({
+    component: 'InputItem',
+    label: t('password_confirmation'),
+    rules: computed(() => ({
+      passwordMatch: sameAs(form.value.dynDomainPassword),
+    })),
+    cProps: {
+      id: 'dyn-dns-password-confirmation',
+      placeholder: '••••••••',
+      type: 'password',
+    },
+  }) satisfies FieldProps<'InputItem', Form['dynDomainPasswordConfirmation']>,
+
+  localDomain: reactive({
+    component: 'AdressItem',
+    label: t('domain_name'),
+    rules: computed(() =>
+      selected.value === 'localDomain'
+        ? { localPart: { required, dynDomain }, domain: { required } }
+        : undefined,
+    ),
+    cProps: {
+      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'
+})
+
+const dynDomainIsVisible = computed(() => {
+  return selected.value === 'dynDomain'
+})
+
+const localDomainIsVisible = computed(() => {
+  return selected.value === 'localDomain'
+})
+
+const onDomainAdd = onSubmit(async () => {
+  const domainType = selected.value
+  if (!domainType) return
+  const domain = await formatFormValue(form.value[domainType])
+
+  emit('submit', {
+    domain,
+    dyndns_recovery_password:
+      domainType === 'dynDomain' ? form.value.dynDomainPassword : undefined,
+  })
+})
+</script>
+
 <template>
   <CardForm
     :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" />
@@ -23,17 +201,16 @@
       {{ $t('domain.add.from_registrar') }}
     </BFormRadio>
 
-    <BCollapse id="collapse-domain" :visible.sync="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="pl-1" v-html="$t('domain.add.from_registrar_desc')" />
+        <span class="ps-1" v-html="$t('domain.add.from_registrar_desc')" />
       </p>
 
       <FormField
         v-bind="fields.domain"
         v-model="form.domain"
-        :validation="$v.form.domain"
-        class="mt-3"
+        :validation="v.form.domain"
       />
     </BCollapse>
 
@@ -50,34 +227,21 @@
       {{ $t('domain.add.from_yunohost') }}
     </BFormRadio>
 
-    <BCollapse id="collapse-dynDomain" :visible.sync="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="pl-1" v-html="$t('domain.add.from_yunohost_desc')" />
+        <span class="ps-1" v-html="$t('domain.add.from_yunohost_desc')" />
       </p>
 
       <FormField
-        v-bind="fields.dynDomain"
-        :validation="$v.form.dynDomain"
-        class="mt-3"
-      >
-        <template #default="{ self }">
-          <AdressInputSelect v-bind="self" v-model="form.dynDomain" />
-        </template>
-      </FormField>
-
-      <FormField
-        v-bind="fields.dynDomainPassword"
-        :validation="$v.form.dynDomainPassword"
-        v-model="form.dynDomainPassword"
-      />
-
-      <FormField
-        v-bind="fields.dynDomainPasswordConfirmation"
-        :validation="$v.form.dynDomainPasswordConfirmation"
-        v-model="form.dynDomainPasswordConfirmation"
+        v-for="key in dynKeys"
+        :key="key"
+        v-bind="fields[key]"
+        v-model="form[key]"
+        :validation="v.form[key]"
       />
     </BCollapse>
+
     <div
       v-if="dynDnsForbiden"
       class="alert alert-warning mt-2"
@@ -95,177 +259,17 @@
       {{ $t('domain.add.from_local') }}
     </BFormRadio>
 
-    <BCollapse id="collapse-localDomain" :visible.sync="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="pl-1" v-html="$t('domain.add.from_local_desc')" />
+        <span class="ps-1" v-html="$t('domain.add.from_local_desc')" />
       </p>
 
       <FormField
         v-bind="fields.localDomain"
-        :validation="$v.form.localDomain"
-        class="mt-3"
-      >
-        <template #default="{ self }">
-          <AdressInputSelect v-bind="self" v-model="form.localDomain" />
-        </template>
-      </FormField>
+        v-model="form.localDomain"
+        :validation="v.form.localDomain"
+      />
     </BCollapse>
   </CardForm>
 </template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
-
-import AdressInputSelect from '@/components/AdressInputSelect.vue'
-import { formatFormData } from '@/helpers/yunohostArguments'
-import {
-  required,
-  domain,
-  dynDomain,
-  minLength,
-  sameAs,
-} from '@/helpers/validators'
-
-export default {
-  name: 'DomainForm',
-
-  props: {
-    title: { type: String, required: true },
-    submitText: { type: String, default: null },
-    serverError: { type: String, default: '' },
-  },
-
-  data() {
-    return {
-      selected: '',
-
-      form: {
-        domain: '',
-        dynDomain: { localPart: '', separator: '.', domain: 'nohost.me' },
-        dynDomainPassword: '',
-        dynDomainPasswordConfirmation: '',
-        localDomain: { localPart: '', separator: '.', domain: 'local' },
-      },
-
-      fields: {
-        domain: {
-          label: this.$i18n.t('domain_name'),
-          props: {
-            id: 'domain',
-            placeholder: this.$i18n.t('placeholder.domain'),
-          },
-        },
-
-        dynDomain: {
-          label: this.$i18n.t('domain_name'),
-          props: {
-            id: 'dyn-domain',
-            placeholder: this.$i18n.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'),
-          props: {
-            id: 'dyn-dns-password',
-            placeholder: '••••••••',
-            type: 'password',
-          },
-        },
-
-        dynDomainPasswordConfirmation: {
-          label: this.$i18n.t('password_confirmation'),
-          props: {
-            id: 'dyn-dns-password-confirmation',
-            placeholder: '••••••••',
-            type: 'password',
-          },
-        },
-
-        localDomain: {
-          label: this.$i18n.t('domain_name'),
-          props: {
-            id: 'dyn-domain',
-            placeholder: this.$i18n.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'
-    }
-  },
-
-  mixins: [validationMixin],
-
-  components: {
-    AdressInputSelect,
-  },
-}
-</script>
diff --git a/app/src/views/_partials/ErrorDisplay.vue b/app/src/views/_partials/ErrorDisplay.vue
deleted file mode 100644
index fd11eea0..00000000
--- a/app/src/views/_partials/ErrorDisplay.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<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 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>
-</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 {
-  color: $black;
-}
-</style>
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index 022fc0d0..00b209e9 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -1,21 +1,131 @@
+<script setup lang="ts">
+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 { 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)
+
+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 - 7
+  // Can't use `scrollIntoView()` here since it will also scroll in the main content.
+  historyElem.value!.$el.scrollTop = actionCard.offsetTop - headerOffset
+}
+
+async function onLastActionClick() {
+  if (!open.value) {
+    open.value = true
+    await nextTick()
+  }
+  const hElem = historyElem.value!.$el
+  const lastActionCard = hElem.lastElementChild as HTMLElement
+  const lastCollapsable = lastActionCard.querySelector('.collapse')
+
+  if (lastCollapsable && !lastCollapsable.classList.contains('show')) {
+    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
+    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!.$el
+  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 = window.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"
       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 font-weight-bold">
+        <span class="d-none d-sm-inline fw-bold ms-1">
           {{ $t('history.title') }}
         </span>
       </h5>
@@ -25,7 +135,7 @@
         v-if="lastAction"
         size="sm"
         pill
-        class="ml-auto py-0"
+        class="ms-auto me-2 py-0"
         :variant="open ? 'light' : 'best'"
         @click.prevent="onLastActionClick"
         @keyup.enter.space.prevent="onLastActionClick"
@@ -35,199 +145,51 @@
       <QueryHeader
         v-if="lastAction"
         :request="lastAction"
-        class="w-auto ml-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="history">
-        <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-left-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 : false
-              "
-              :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>
 
-<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 {
-  margin-top: 0;
-}
-
 .card-header {
   padding: $tooltip-padding-y $tooltip-padding-x;
 }
 
 #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);
@@ -247,7 +209,7 @@ export default {
     align-items: center;
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     margin-left: -15px;
     width: calc(100% + 30px);
 
@@ -258,7 +220,7 @@ export default {
 }
 
 // Hacky disable of collapse animation
-.collapsing {
+:deep(.collapsing) {
   transition: none !important;
   height: auto !important;
   display: block !important;
@@ -273,14 +235,12 @@ export default {
     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] {
diff --git a/app/src/views/_partials/ReconnectingDisplay.vue b/app/src/views/_partials/ReconnectingDisplay.vue
deleted file mode 100644
index 65e94c4a..00000000
--- a/app/src/views/_partials/ReconnectingDisplay.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <!-- This card receives style from `ViewLockOverlay` if used inside it -->
-  <BCardBody>
-    <BCardTitle class="text-center my-4" v-t="'api.reconnecting.title'" />
-
-    <template v-if="status === 'reconnecting'">
-      <YSpinner class="mb-4" />
-
-      <BAlert
-        v-if="origin"
-        v-t="'api.reconnecting.reason.' + origin"
-        :variant="origin === 'unknow' ? 'warning' : 'info'"
-      />
-    </template>
-
-    <template v-if="status === 'failed'">
-      <BAlert variant="danger">
-        <MarkdownItem :label="$t('api.reconnecting.failed')" />
-      </BAlert>
-
-      <div class="d-flex justify-content-end">
-        <BButton
-          variant="success"
-          v-t="'retry'"
-          class="ml-auto"
-          @click="tryToReconnect()"
-        />
-      </div>
-    </template>
-
-    <template v-if="status === 'expired'">
-      <BAlert variant="success" v-t="'api.reconnecting.session_expired'" />
-
-      <LoginView force-reload />
-    </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
deleted file mode 100644
index 87bc7535..00000000
--- a/app/src/views/_partials/ViewLockOverlay.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <BOverlay
-    variant="white"
-    opacity="0.75"
-    no-center
-    :show="waiting || reconnecting || error !== null"
-  >
-    <slot name="default" />
-
-    <template #overlay>
-      <BCard no-body class="card-overlay">
-        <BCardHeader header-bg-variant="white">
-          <QueryHeader :request="error || currentRequest" status-size="lg" />
-        </BCardHeader>
-
-        <Component :is="component.name" :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']),
-
-    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 {
-  position: sticky;
-  top: 10vh;
-  margin: 0 5%;
-
-  @include media-breakpoint-up(md) {
-    margin: 0 10%;
-  }
-  @include media-breakpoint-up(lg) {
-    margin: 0 15%;
-  }
-
-  ::v-deep {
-    .card-body {
-      padding: 1.5rem;
-      padding-bottom: 0;
-      max-height: 60vh;
-      overflow-y: auto;
-
-      & > :last-child {
-        margin-bottom: 1.5rem;
-      }
-    }
-
-    .card-footer {
-      padding: 0.5rem 0.75rem;
-      display: flex;
-      justify-content: flex-end;
-    }
-  }
-
-  .card-header {
-    padding: 0.5rem 0.75rem;
-  }
-}
-</style>
diff --git a/app/src/views/_partials/WaitingDisplay.vue b/app/src/views/_partials/WaitingDisplay.vue
deleted file mode 100644
index baee407d..00000000
--- a/app/src/views/_partials/WaitingDisplay.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <!-- This card receives style from `ViewLockOverlay` if used inside it -->
-  <BCardBody>
-    <BCardTitle
-      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">
-      <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"
-      bordered
-      fixed-height
-      auto-scroll
-      :limit="100"
-    />
-  </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
deleted file mode 100644
index 62360d18..00000000
--- a/app/src/views/_partials/WarningDisplay.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<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>
-
-<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;
-  margin-bottom: 0;
-}
-</style>
diff --git a/app/src/views/_partials/index.js b/app/src/views/_partials/index.js
deleted file mode 100644
index 53764915..00000000
--- a/app/src/views/_partials/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-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'
diff --git a/app/src/views/_partials/index.ts b/app/src/views/_partials/index.ts
new file mode 100644
index 00000000..bcb3181a
--- /dev/null
+++ b/app/src/views/_partials/index.ts
@@ -0,0 +1,2 @@
+export { default as HistoryConsole } from './HistoryConsole.vue'
+export { default as DomainForm } from './DomainForm.vue'
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index cc7f9afe..a8fcd016 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -1,95 +1,254 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import api from '@/api'
+import CardDeckFeed from '@/components/CardDeckFeed.vue'
+import { useForm, useFormQuery } from '@/composables/form'
+import { useAutoModal } from '@/composables/useAutoModal'
+import { useSearch } from '@/composables/useSearch'
+import { pick } from '@/helpers/commons'
+import { appRepoUrl, required } from '@/helpers/validators'
+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?: 'all' | 'highQuality' | 'decentQuality' | 'working'
+    category?: 'all' | string | null
+    subtag?: 'all' | 'others' | string
+  }>(),
+  {
+    search: '',
+    quality: 'decentQuality',
+    category: null,
+    subtag: 'all',
+  },
+)
+
+const { t } = useI18n()
+const router = useRouter()
+const modalConfirm = useAutoModal()
+
+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 [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(s)) return true
+    return false
+  },
+  {
+    externalSearch,
+    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: {
+    component: 'InputItem',
+    label: t('url'),
+    rules: { required, appRepoUrl },
+    cProps: {
+      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: 'highQuality', text: t('only_highquality_apps') },
+  {
+    value: 'decentQuality',
+    text: t('only_decent_quality_apps'),
+  },
+  { value: 'working', text: t('only_working_apps') },
+  { value: 'all', text: t('all_apps') },
+]
+
+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.length) {
+      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
+})
+
+// INSTALL CUSTOM APP
+const onCustomInstallClick = onSubmit(async () => {
+  const confirmed = await modalConfirm(t('confirm_install_custom_app'))
+  if (!confirmed) return
+
+  const url = form.value.url
+  router.push({
+    name: 'app-install-custom',
+    params: { id: url.endsWith('/') ? url : url + '/' },
+  })
+})
+</script>
+
 <template>
-  <ViewSearch
-    :items="apps"
-    :filtered-items="filteredApps"
-    items-name="apps"
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-  >
+  <ViewSearch :items="filteredApps" items-name="apps">
     <template #top-bar>
       <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: $tc('items.apps', 2) })"
-            :value="search"
-            @input="updateQuery('search', $event)"
+            v-model="search"
+            :placeholder="$t('search.for', { items: $t('items.apps', 2) })"
           />
-          <BInputGroupAppend>
-            <BFormSelect
-              :value="quality"
-              :options="qualityOptions"
-              @change="updateQuery('quality', $event)"
-            />
-          </BInputGroupAppend>
+
+          <BFormSelect v-model="quality" :options="qualityOptions" />
         </BInputGroup>
 
         <!-- CATEGORY SELECT -->
         <BInputGroup class="mt-3">
-          <BInputGroupPrepend is-text>
+          <BInputGroupText>
             <YIcon iname="filter" />
-          </BInputGroupPrepend>
-          <BFormSelect
-            :value="category"
-            :options="categories"
-            @change="updateQuery('category', $event)"
-          />
-          <BInputGroupAppend>
-            <BButton
-              variant="primary"
-              :disabled="category === null"
-              @click="updateQuery('category', null)"
-            >
-              {{ $t('app_show_categories') }}
-            </BButton>
-          </BInputGroupAppend>
+          </BInputGroupText>
+
+          <BFormSelect v-model="category" :options="categories" />
+
+          <BButton
+            variant="primary"
+            :disabled="category === null"
+            @click="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"
+            v-model="subtag"
             name="subtags"
-            :checked="subtag"
             :options="subtags"
-            @change="updateQuery('subtag', $event)"
             buttons
             button-variant="outline-secondary"
           />
+
           <BFormSelect
             id="subtags-select"
-            :value="subtag"
+            v-model="subtag"
             :options="subtags"
-            @change="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="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"
@@ -104,9 +263,9 @@
       >
         <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>
@@ -115,37 +274,36 @@
                 :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"
-                class="d-flex align-items-center ml-2 position-relative"
+                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
@@ -153,8 +311,8 @@
               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>
@@ -167,12 +325,14 @@
     <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">
@@ -180,252 +340,11 @@
             {{ $t('confirm_install_custom_app') }}
           </div>
         </template>
-
-        <!-- URL -->
-        <FormField
-          v-bind="customInstall.field"
-          v-model="customInstall.url"
-          :validation="$v.customInstall.url"
-        />
       </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="mr-2 ml-auto" />
-            <BSkeleton
-              :width="randint(30, 70) + '%'"
-              height="30px"
-              class="mr-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>
 
-<script>
-import { validationMixin } from 'vuelidate'
-
-import CardDeckFeed from '@/components/CardDeckFeed.vue'
-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' },
-  },
-
-  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.$i18n.t('only_highquality_apps') },
-        {
-          value: 'decent_quality',
-          text: this.$i18n.t('only_decent_quality_apps'),
-        },
-        { value: 'working', text: this.$i18n.t('only_working_apps') },
-        { value: 'all', text: this.$i18n.t('all_apps') },
-      ],
-      categories: [
-        { text: this.$i18n.t('app_choose_category'), value: null },
-        { text: this.$i18n.t('all_apps'), value: 'all', icon: 'search' },
-        // The rest is filled from api data
-      ],
-
-      // Custom install form
-      customInstall: {
-        field: {
-          label: this.$i18n.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.$i18n.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' })
-          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.$askConfirmation(
-          this.$i18n.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.$askConfirmation(
-        this.$i18n.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,
-  },
-
-  mixins: [validationMixin],
-}
-</script>
-
 <style lang="scss" scoped>
 #view-top-bar {
   margin-bottom: 2rem;
@@ -455,33 +374,32 @@ export default {
 }
 
 .card-deck {
-  padding: 0;
-  margin-bottom: 0;
-
-  > * {
-    margin-bottom: 2rem;
+  .card {
     flex-basis: 100%;
+    outline: none;
 
     @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);
     }
-  }
 
-  .card {
     &:hover {
       color: $white;
       background-color: $dark;
       border-color: $dark;
     }
+    &:focus {
+      box-shadow: 0 0 0 $btn-focus-width rgba($dark, 0.5);
+    }
 
-    .card-link {
+    :deep(.card-link) {
       color: inherit;
+      text-decoration: none;
 
       &::after {
         content: '';
@@ -510,7 +428,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/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index ef2295e2..bc78afcf 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -1,17 +1,250 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import api, { objectToParams } from '@/api'
+import { type APIError } from '@/api/errors'
+import ConfigPanelsComponent from '@/components/ConfigPanels.vue'
+import { formatConfigPanels, useConfigPanels } from '@/composables/configPanels'
+import { useDomains } from '@/composables/data'
+import { useArrayRule, useForm } from '@/composables/form'
+import { useAutoModal } from '@/composables/useAutoModal'
+import { isEmptyValue, joinOrNull, pick, toEntries } from '@/helpers/commons'
+import { humanPermissionName } from '@/helpers/filters/human'
+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
+  tabId?: string
+}>()
+
+const { t } = useI18n()
+const router = useRouter()
+const modalConfirm = useAutoModal()
+
+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' },
+  ])
+  .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 { 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: 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']))
+    }
+
+    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 },
+      }),
+      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)]
+              })
+            : [],
+        },
+        admin: [
+          ['admin', formatI18nField(ADMIN)],
+          ...Object.keys(doc)
+            .sort()
+            .map((key) => [
+              key.charAt(0) + key.slice(1).toLowerCase(),
+              formatI18nField(doc[key]),
+            ]),
+        ].filter((doc) => doc[1]),
+      },
+      isWebapp: app_.is_webapp,
+      isDefault: ref(app_.is_default),
+      supportsChangeUrl: app_.supports_change_url,
+      supportsPurge: app_.supports_purge,
+      permissions,
+    }
+
+    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)
+      },
+    )
+  : 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)
+
+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: {
+        label: data.label,
+        show_tile: data.show_tile ? 'True' : 'False',
+      },
+      humanKey: {
+        key: 'apps.change_label',
+        prevName: app.label,
+        nextName: data.label,
+      },
+    })
+    // 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.value.url!
+  api
+    .put({
+      uri: `apps/${props.id}/changeurl`,
+      data: { domain, path: '/' + path },
+      humanKey: { key: 'apps.change_url', name: app.label },
+    })
+    // Refetch because some content of this page relies on the url
+    .then(() => api.refetch())
+}
+
+async function setAsDefaultDomain(undo = false) {
+  const confirmed = await modalConfirm(t('confirm_app_default'))
+  if (!confirmed) return
+
+  api
+    .put({
+      uri: `apps/${props.id}/default${undo ? '?undo' : ''}`,
+      humanKey: {
+        key: 'apps.set_default',
+        name: app.label,
+        domain: app.domain,
+      },
+    })
+    .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.label },
+    })
+    // FIXME no need to refetch i guess, filter the reactive notifs?
+    .then(() => api.refetch())
+}
+
+async function uninstall() {
+  const data = purge.value === true ? { purge: 1 } : {}
+  api
+    .delete({
+      uri: 'apps/' + props.id,
+      data,
+      humanKey: { key: 'apps.uninstall', name: app.label },
+    })
+    .then(() => {
+      router.push({ name: 'app-list' })
+    })
+}
+</script>
+
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    :loading="loading"
-    ref="view"
-  >
+  <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"
     >
@@ -20,7 +253,7 @@
         <BButton
           variant="primary"
           size="sm"
-          class="ml-auto mr-2"
+          class="ms-auto me-2"
           @click="dismissNotification('post_install')"
         >
           <YIcon iname="check" />
@@ -32,18 +265,12 @@
         v-for="[name, notif] in app.doc.notifications.postInstall"
         :key="name"
         :markdown="notif"
-        flavor="github"
         :options="{ headerLevelStart: 4 }"
       />
     </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"
     >
@@ -52,7 +279,7 @@
         <BButton
           variant="primary"
           size="sm"
-          class="ml-auto mr-2"
+          class="ms-auto me-2"
           @click="dismissNotification('post_upgrade')"
         >
           <YIcon iname="check" />
@@ -64,12 +291,11 @@
         v-for="[name, notif] in app.doc.notifications.postUpgrade"
         :key="name"
         :markdown="notif"
-        flavor="github"
         :options="{ headerLevelStart: 4 }"
       />
     </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" />
@@ -85,17 +311,17 @@
           :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') }}
         </BButton>
 
         <BButton
-          v-b-modal.uninstall-modal
           id="uninstall"
+          v-b-modal.uninstall-modal
           variant="danger"
-          :class="{ 'ml-auto': !app.url }"
+          :class="{ 'ms-auto': !app.url }"
         >
           <YIcon iname="trash-o" />
           {{ $t('uninstall') }}
@@ -118,23 +344,30 @@
         </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">
+    <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" @submit="onConfigSubmit">
+    <ConfigPanelsComponent
+      v-if="config"
+      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'" #tab-top>
+      <template v-if="tabId === 'operations'" #default>
         <!-- 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"
@@ -144,29 +377,28 @@
             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"
                 />
-                <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
+                  v-t="'save'"
+                  variant="info"
+                  @click="changeLabel(perm.name, i)"
+                />
               </BInputGroup>
             </template>
 
@@ -184,17 +416,15 @@
         <BFormGroup
           :label="$t('app_info_access_desc')"
           label-for="permissions"
-          label-class="font-weight-bold"
+          label-class="fw-bold"
           label-cols-lg="0"
         >
-          {{
-            allowedGroups.length > 0 ? allowedGroups.join(', ') : $t('nobody')
-          }}
+          {{ app.allowedGroups }}
           <BButton
             size="sm"
             :to="{ name: 'group-list' }"
             variant="info"
-            class="ml-2"
+            class="ms-2"
           >
             <YIcon iname="key-modern" />
             {{ $t('groups_and_permissions_manage') }}
@@ -203,53 +433,46 @@
         <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-class="font-weight-bold"
-          v-if="app.is_webapp"
+          :label-cols="0"
+          label-class="fw-bold"
         >
-          <BInputGroup v-if="app.supports_change_url">
-            <BInputGroupPrepend is-text> https:// </BInputGroupPrepend>
+          <BInputGroup v-if="app.supportsChangeUrl && form.url">
+            <BInputGroupText>https://</BInputGroupText>
 
-            <BInputGroupPrepend class="flex-grow-1">
-              <BFormSelect v-model="form.url.domain" :options="domains" />
-            </BInputGroupPrepend>
-
-            <BInputGroupPrepend is-text> / </BInputGroupPrepend>
-
-            <BFormInput
-              id="input-url"
-              v-model="form.url.path"
-              class="flex-grow-3"
+            <BFormSelect
+              v-model="form.url.domain"
+              :options="domainsAsChoices"
             />
 
-            <BInputGroupAppend>
-              <BButton @click="changeUrl" variant="info" v-t="'save'" />
-            </BInputGroupAppend>
+            <BInputGroupText>/</BInputGroupText>
+
+            <BFormInput v-model="form.url.path" class="flex-grow-3" />
+
+            <BButton v-t="'save'" variant="info" @click="changeUrl" />
           </BInputGroup>
 
           <div v-else class="alert alert-warning">
             <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="font-weight-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"
               variant="success"
+              @click="setAsDefaultDomain(false)"
             >
               <YIcon iname="star" /> {{ $t('app_make_default') }}
             </BButton>
@@ -257,441 +480,48 @@
 
           <template v-else>
             <BButton
-              @click="setAsDefaultDomain(true)"
               id="main-domain"
               variant="warning"
+              @click="setAsDefaultDomain(true)"
             >
               <YIcon iname="star" /> {{ $t('app_make_not_default') }}
             </BButton>
           </template>
-        </BFormGroup>
+        </FormField>
       </template>
-    </ConfigPanels>
+    </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>
-            <YIcon iname="book" class="mr-2" />
+            <YIcon iname="book" class="me-2" />
             {{ name === 'admin' ? $t('app.doc.admin.title') : name }}
           </template>
-          <VueShowdown :markdown="content" flavor="github" />
+          <VueShowdown :markdown="content" />
         </BTab>
       </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="mr-1" />
-            {{ $t('app.links.' + key) }}
-          </BLink>
-        </YListGroupItem>
-      </BListGroup>
-    </YCard>
+    <AppIntegrationAndLinks :integration="app.integration" :links="app.links" />
 
     <BModal
-      v-if="app"
       id="uninstall-modal"
+      centered
       :title="$t('confirm_uninstall', { name: id })"
-      header-bg-variant="warning"
-      :body-class="{ 'd-none': !app.supports_purge }"
-      body-bg-variant=""
+      header-variant="warning"
+      :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>
 
-<script>
-import { mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
-
-import api, { objectToParams } from '@/api'
-import { humanPermissionName } from '@/helpers/filters/human'
-import { 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 },
-  },
-
-  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.$i18n.t('operations'),
-          },
-        ],
-        validations: {},
-      },
-      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: { 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.$i18n.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.$i18n.t('words.separator'),
-            )
-          : null,
-        description: DESCRIPTION
-          ? formatI18nField(DESCRIPTION)
-          : app.description,
-        integration:
-          app.manifest.packaging_format >= 2
-            ? {
-                archs: Array.isArray(archs)
-                  ? archs.join(this.$i18n.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) {
-            this.config.errors[id][err.data.name].message = err.message
-          } else this.$set(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.$askConfirmation(
-        this.$i18n.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.$askConfirmation(
-        this.$i18n.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' })
-        })
-    },
-  },
-
-  mixins: [validationMixin],
-}
-</script>
-
 <style lang="scss" scoped>
 select {
   border-top-right-radius: 0;
@@ -710,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/AppInstall.vue b/app/src/views/app/AppInstall.vue
index b668a2ea..ff91b820 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -1,5 +1,140 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import api, { objectToParams } from '@/api'
+import { formatOptions } from '@/composables/configPanels'
+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 {
+  formatAppIntegration,
+  formatAppLinks,
+  formatAppNotifs,
+  formatAppQuality,
+} from '@/views/app/appData'
+import AppIntegrationAndLinks from './_AppIntegrationAndLinks.vue'
+
+const props = defineProps<{
+  id: string
+}>()
+
+const { t } = useI18n()
+const router = useRouter()
+const modalConfirm = useAutoModal()
+
+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 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 { 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 { 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 }),
+    )
+    if (!confirmed) return
+  }
+
+  const { label, ...args } = await formatForm(form, { removeNullish: true })
+  const data = {
+    app: props.id,
+    label,
+    args: Object.entries(args).length ? objectToParams(args) : undefined,
+  }
+
+  api
+    .post({
+      uri: 'apps',
+      data,
+      humanKey: { key: 'apps.install', name: app.name },
+    })
+    .then(async (response: { notifications: Obj<string> }) => {
+      const postInstall = formatAppNotifs(response.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.name,
+            }),
+          },
+          { markdown: true, cancelable: false },
+        )
+      }
+      router.push({ name: 'app-list' })
+    })
+    .catch(onError)
+})
+</script>
+
 <template>
-  <ViewBase :queries="queries" @queries-response="onQueriesResponse">
+  <div>
     <template v-if="app">
       <section class="border rounded p-3 mb-4">
         <div class="d-md-flex align-items-center mb-4">
@@ -12,7 +147,7 @@
             :href="app.demo"
             target="_blank"
             variant="primary"
-            class="ml-auto"
+            class="ms-auto"
           >
             <YIcon iname="external-link" />
             {{ $t('app.install.try_demo') }}
@@ -27,7 +162,7 @@
           </template>
         </p>
 
-        <VueShowdown :markdown="app.description" flavor="github" />
+        <VueShowdown :markdown="app.description" />
 
         <BImg
           v-if="app.screenshot"
@@ -38,64 +173,10 @@
         />
       </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="mr-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>
@@ -105,7 +186,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">
@@ -120,11 +201,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
@@ -167,8 +244,8 @@
         </p>
 
         <CheckboxItem
-          v-model="force"
           id="force-install"
+          v-model="force"
           :label="$t('app.install.problems.ignore')"
         />
       </YAlert>
@@ -176,263 +253,29 @@
       <!-- INSTALL FORM -->
       <CardForm
         v-if="app.canInstall || force"
+        v-model="form"
+        :fields="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"
-            :is="field.is"
-            v-bind="field.props"
-            v-model="form[fname]"
-            :validation="$v.form[fname]"
-            :key="fname"
-          />
-        </template>
-      </CardForm>
+        :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 v-else-if="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>
-
-    <template #skeleton>
-      <CardInfoSkeleton />
-      <CardFormSkeleton :cols="null" />
-    </template>
-  </ViewBase>
+    </YAlert>
+  </div>
 </template>
 
-<script>
-import { validationMixin } from 'vuelidate'
-
-import api, { objectToParams } from '@/api'
-import {
-  formatYunoHostArguments,
-  formatI18nField,
-  formatFormData,
-} from '@/helpers/yunohostArguments'
-import CardCollapse from '@/components/CardCollapse.vue'
-
-export default {
-  name: 'AppInstall',
-
-  mixins: [validationMixin],
-
-  components: {
-    CardCollapse,
-  },
-
-  props: {
-    id: { type: String, required: true },
-  },
-
-  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.$i18n.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.$i18n.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.$askConfirmation(
-          this.$i18n.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.$i18n.t('app.install.notifs.post.alert') +
-              '\n\n' +
-              postInstall
-            await this.$askMdConfirmation(
-              message,
-              {
-                title: this.$i18n.t('app.install.notifs.post.title', {
-                  name: this.app.name,
-                }),
-                okTitle: this.$i18n.t('ok'),
-              },
-              true,
-            )
-          }
-          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 e699ac42..8b7e68c7 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -1,11 +1,30 @@
+<script setup lang="ts">
+import api from '@/api'
+import { useSearch } from '@/composables/useSearch'
+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>
   <ViewSearch
-    :search.sync="search"
+    v-model="search"
     items-name="installed_apps"
-    :items="apps"
-    :filtered-items="filteredApps"
-    :queries="queries"
-    @queries-response="onQueriesResponse"
+    :items="filteredApps"
   >
     <template #top-bar-buttons>
       <BButton variant="success" :to="{ name: 'app-catalog' }">
@@ -15,66 +34,14 @@
     </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 pr-0"
-      >
-        <div>
-          <h5 class="font-weight-bold">
-            {{ label }}
-            <small class="text-secondary">{{ id }}</small>
-          </h5>
-          <p class="m-0">
-            {{ description }}
-          </p>
-        </div>
-
-        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
-      </BListGroupItem>
+        :label="label"
+        :sublabel="id"
+        :description="description"
+      />
     </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/app/_AppIntegrationAndLinks.vue b/app/src/views/app/_AppIntegrationAndLinks.vue
new file mode 100644
index 00000000..c573994a
--- /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')"
+    collapsible
+    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')"
+    collapsible
+    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
new file mode 100644
index 00000000..ba04c4ef
--- /dev/null
+++ b/app/src/views/app/appData.ts
@@ -0,0 +1,66 @@
+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',
+    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] }
+}
+
+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>
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index 38c6cda8..4d124b0f 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -1,212 +1,131 @@
+<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import api from '@/api'
+import { fromEntries } from '@/helpers/commons'
+import type { BackupAppList, BackupHooksList } from '@/types/core/api'
+import { formatBackupSystem, parseBackupForm } from './backupData'
+
+const props = defineProps<{
+  id: string
+}>()
+
+const router = useRouter()
+
+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
+  })
+
+const selected = ref([...Object.keys(system), ...Object.keys(apps)])
+
+function toggleSelected(select: boolean, type: 'system' | 'apps') {
+  const keys = Object.keys(type === 'system' ? system : apps)
+  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 = 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
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    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"
+      >
+        <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="ml-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="ml-2"
-              />
-            </div>
-          </BListGroupItem>
-
-          <!-- SYSTEM ITEMS -->
-          <BListGroupItem
-            v-for="(item, partName) in system"
-            :key="partName"
-            class="d-flex justify-content-between align-items-center pr-0"
-          >
-            <div class="mr-2">
-              <h5 class="font-weight-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="ml-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="ml-2"
-              />
-            </div>
-          </BListGroupItem>
-
-          <!-- APPS ITEMS -->
-          <BListGroupItem
-            v-for="(item, appName) in apps"
-            :key="appName"
-            class="d-flex justify-content-between align-items-center pr-0"
-          >
-            <div class="mr-2">
-              <h5 class="font-weight-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>
 
       <!-- SUBMIT -->
       <template #buttons>
         <BButton
-          @click="createBackup"
           v-t="'backup_action'"
           variant="success"
           :disabled="selected.length === 0"
+          @click="createBackup"
         />
       </template>
     </YCard>
-  </ViewBase>
+  </div>
 </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.$i18n.t('hook_' + hook)
-        } else {
-          data[groupId] = {
-            name: this.$i18n.t('hook_' + groupId),
-            value: [hook],
-            description: this.$i18n.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 891fec74..e2859463 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -1,33 +1,131 @@
+<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 { useInfos } from '@/composables/useInfos'
+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
+  name: string
+}>()
+
+const { t } = useI18n()
+const router = useRouter()
+const modalConfirm = useAutoModal()
+
+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,
+      },
+    }
+  })
+
+const allKeys = [...Object.keys(apps), ...Object.keys(system)]
+const selected = ref(allKeys)
+
+const hasBackupData = computed(() => {
+  return !isEmptyValue(system) || !isEmptyValue(apps)
+})
+
+function toggleSelected(select = true) {
+  selected.value = select ? allKeys : []
+}
+
+async function restoreBackup() {
+  const confirmed = await modalConfirm(
+    t('confirm_restore', { name: props.name }),
+  )
+  if (!confirmed) return
+
+  const data = parseBackupForm(selected.value, system)
+  api
+    .put({
+      uri: `backups/${props.name}/restore`,
+      // FIXME force?
+      data: { ...data, force: '' },
+      humanKey: { key: 'backups.restore', name: props.name },
+    })
+    .then(() => {
+      // FIXME back to backup list or home ?
+    })
+    .catch((err: APIError) => {
+      if (!(err instanceof APIBadRequestError)) throw err
+      modalConfirm(
+        err.message,
+        { title: t('error'), bodyVariant: 'danger' },
+        { cancelable: false },
+      )
+    })
+}
+
+async function deleteBackup() {
+  const confirmed = await modalConfirm(
+    t('confirm_delete', { name: props.name }),
+  )
+  if (!confirmed) return
+
+  api
+    .delete({
+      uri: 'backups/' + props.name,
+      humanKey: { key: 'backups.delete', name: props.name },
+    })
+    .then(() => {
+      router.push({ name: 'backup-list', params: { id: props.id } })
+    })
+}
+
+function downloadBackup() {
+  const { host } = useInfos()
+  window.open(
+    `https://${host.value}/yunohost/api/backups/${props.name}/download`,
+    '_blank',
+  )
+}
+</script>
+
 <template>
-  <ViewBase :queries="queries" @queries-response="onQueriesResponse">
+  <div>
     <!-- BACKUP INFO -->
     <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>
 
       <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>
 
@@ -41,24 +139,24 @@
     >
       <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"
@@ -68,12 +166,12 @@
           <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">
-              <h5 class="font-weight-bold">
-                {{ item.name }}
-                <small class="text-secondary" v-if="item.size">
+            <div class="me-2">
+              <h5>
+                <span class="fw-bold">{{ item.name }}</span>
+                <small v-if="item.size" class="ms-1 text-secondary">
                   ({{ humanSize(item.size) }})
                 </small>
               </h5>
@@ -89,12 +187,12 @@
           <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">
-              <h5 class="font-weight-bold">
-                {{ item.name }}
-                <small class="text-secondary">
+            <div class="me-2">
+              <h5>
+                <span class="fw-bold">{{ item.name }}</span>
+                <small class="ms-1 text-secondary">
                   {{ appName }} ({{ humanSize(item.size) }})
                 </small>
               </h5>
@@ -104,12 +202,6 @@
             <BFormCheckbox :value="appName" :aria-label="$t('check')" />
           </BListGroupItem>
         </BListGroup>
-
-        <BFormInvalidFeedback id="backup-restore-feedback" :state="isValid">
-          <BAlert variant="danger" class="mb-0">
-            {{ error }}
-          </BAlert>
-        </BFormInvalidFeedback>
       </BFormCheckboxGroup>
 
       <div v-else class="alert alert-warning mb-0">
@@ -119,158 +211,13 @@
       <!-- 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>
-
-    <template #skeleton>
-      <CardInfoSkeleton :item-count="4" />
-      <CardListSkeleton />
-    </template>
-  </ViewBase>
+  </div>
 </template>
-
-<script>
-import api from '@/api'
-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 },
-  },
-
-  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.$i18n.t('hook_' + hook)
-          data[groupId].size += size
-        } else {
-          data[groupId] = {
-            name: this.$i18n.t('hook_' + groupId),
-            value: [hook],
-            description: this.$i18n.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.$askConfirmation(
-        this.$i18n.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.$askConfirmation(
-        this.$i18n.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 5389b086..fd03a7cc 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -1,85 +1,52 @@
-<template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    skeleton="ListGroupSkeleton"
-  >
-    <template #top>
-      <TopBar
-        :button="{
-          text: $t('backup_new'),
-          icon: 'plus',
-          to: { name: 'backup-create' },
-        }"
-      />
-    </template>
+<script setup lang="ts">
+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'
 
-    <BAlert v-if="!archives" variant="warning">
-      <YIcon iname="exclamation-triangle" />
-      {{ $tc('items_verbose_count', 0, { items: $tc('items.backups', 0) }) }}
-    </BAlert>
+defineProps<{
+  id: string
+}>()
+
+const archives = await api
+  .get<BackupList>({ uri: 'backups?with_info', initial: true })
+  .then((data) => {
+    return toEntries(data.archives)
+      .map(([name, archive]) => ({ ...archive, name }))
+      .reverse()
+  })
+</script>
+
+<template>
+  <div>
+    <TopBar
+      :button="{
+        text: $t('backup_new'),
+        icon: 'plus',
+        to: { name: 'backup-create' },
+      }"
+    />
+
+    <YAlert
+      v-if="!archives.length"
+      alert
+      icon="exclamation-triangle"
+      variant="warning"
+    >
+      {{ $t('items_verbose_count', { items: $t('items.backups', 0) }, 0) }}
+    </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 pr-0"
-      >
-        <div>
-          <h5 class="font-weight-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 ml-auto" />
-      </BListGroupItem>
+        :label="distanceToNow(created_at)"
+        :sublabel="`${name} (${humanSize(size)})`"
+        :description="path"
+      />
     </BListGroup>
-  </ViewBase>
+  </div>
 </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 f94a5f8b..d1f5da8b 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 } }"
-        class="d-flex justify-content-between align-items-center pr-0"
+        :to="{ name: 'backup-list', params: { id: 'local' } }"
+        class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
-          <h5 class="font-weight-bold">
-            {{ name }}
-            <small class="text-secondary">{{ id }}</small>
+          <h5 class="fw-bold">
+            {{ $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 ml-auto" />
+        <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.$i18n.t('local_archives'),
-          uri: '/home/yunohost.backup/',
-        },
-      ],
-    }
-  },
-}
-</script>
diff --git a/app/src/views/backup/backupData.ts b/app/src/views/backup/backupData.ts
new file mode 100644
index 00000000..30e488ef
--- /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
+}
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 58549cee..efa0c403 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -1,35 +1,127 @@
-<template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    queries-wait
-    ref="view"
-  >
-    <template #top-bar-group-right>
-      <BButton @click="shareLogs" variant="success">
-        <YIcon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
-      </BButton>
-    </template>
+<script setup lang="ts">
+import { reactive } from 'vue'
 
-    <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') }}
+import api from '@/api'
+import { distanceToNow } from '@/helpers/filters/date'
+import { STATUS_VARIANT, isOkStatus } from '@/helpers/yunohostArguments'
+import type { StateStatus } from '@/types/commons'
+import type { Diagnosis } from '@/types/core/api'
+
+const reports = await api
+  .fetchAll<[null, Diagnosis | null]>([
+    {
+      method: 'PUT',
+      uri: 'diagnosis/run?except_if_never_ran_yet',
+      humanKey: 'diagnosis.run',
+    },
+    { uri: 'diagnosis?full' },
+  ])
+  .then(([_, diagnosis]) => {
+    if (!diagnosis) return null
+
+    return diagnosis.reports.map((report) => {
+      const badges = reactive({
+        warnings: 0,
+        errors: 0,
+        ignoreds: 0,
+      })
+
+      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`]++
+
+          return { ...item, status, issue, variant }
+        }),
+      )
+      return {
+        ...report,
+        badges,
+        items,
+        noIssues: badges.warnings + badges.errors === 0,
+      }
+    })
+  })
+
+type Report = Exclude<typeof reports, null>[number]
+
+function runDiagnosis(report?: { id: string; description: string }) {
+  const id = report?.id
+  api
+    .put({
+      uri: 'diagnosis/run' + (id ? '?force' : ''),
+      data: id ? { categories: [id] } : {},
+      humanKey: {
+        key: 'diagnosis.run' + (id ? '_specific' : ''),
+        description: report?.description,
+      },
+    })
+    .then(() => api.refetch())
+}
+
+function toggleIgnoreIssue(
+  action: 'ignore' | 'unignore',
+  report: Report,
+  item: Report['items'][number],
+) {
+  const filterArgs = [report.id].concat(
+    Object.entries(item.meta).map((entries) => entries.join('=')),
+  )
+
+  api
+    .put({
+      uri: 'diagnosis/' + action,
+      data: { filter: filterArgs },
+      humanKey: `diagnosis.${action}.${item.status}`,
+    })
+    .then(() => {
+      item.ignored = action === 'ignore'
+      const count = item.ignored ? 1 : -1
+      report.badges.ignoreds += count
+      if (!isOkStatus(item.status)) {
+        report.badges[`${item.status}s`] -= count
+      }
+    })
+}
+
+function shareLogs() {
+  api.get('diagnosis?share').then(({ url }) => {
+    window.open(url, '_blank')
+  })
+}
+</script>
+
+<template>
+  <div>
+    <TopBar>
+      <template #group-right>
+        <BButton variant="success" @click="shareLogs">
+          <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
       v-for="report in reports"
       :key="report.id"
-      collapsable
+      collapsible
       :collapsed="report.noIssues"
       no-body
       button-unbreak="lg"
@@ -41,22 +133,22 @@
         <div class="">
           <BBadge
             v-if="report.noIssues"
-            variant="success"
             v-t="'everything_good'"
+            variant="success"
           />
           <BBadge
-            v-if="report.errors"
+            v-if="report.badges.errors"
+            v-t="{ path: 'issues', args: { count: report.badges.errors } }"
             variant="danger"
-            v-t="{ path: 'issues', args: { count: report.errors } }"
           />
           <BBadge
-            v-if="report.warnings"
+            v-if="report.badges.warnings"
+            v-t="{ path: 'warnings', args: { count: report.badges.warnings } }"
             variant="warning"
-            v-t="{ path: 'warnings', args: { count: report.warnings } }"
           />
           <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>
@@ -82,13 +174,12 @@
           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">
-            <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"
@@ -107,10 +198,10 @@
 
               <BButton
                 v-if="item.details"
+                v-b-toggle="`collapse-${report.id}-item-${i}`"
                 size="sm"
                 variant="outline-dark"
-                class="ml-lg-2 mt-2 mt-lg-0"
-                v-b-toggle="`collapse-${report.id}-item-${i}`"
+                class="ms-lg-2 mt-2 mt-lg-0"
               >
                 <YIcon iname="level-down" /> {{ $t('details') }}
               </BButton>
@@ -121,7 +212,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"
@@ -132,124 +223,9 @@
         </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>
 
-<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(['theme']),
-  },
-
-  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) {
-            item.variant = 'light'
-            report.ignoreds++
-          } else if (status === 'warning') {
-            item.issue = true
-            report.warnings++
-          } else if (status === 'error') {
-            item.variant = 'danger'
-            item.issue = true
-            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']--
-          } else {
-            report.ignoreds--
-          }
-          this.formatReportItem(report, item)
-        })
-    },
-
-    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 745a81ad..56eae2a5 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -1,43 +1,43 @@
-<template>
-  <ViewBase :queries="queries" skeleton="CardFormSkeleton">
-    <DomainForm
-      :title="$t('domain_add')"
-      :server-error="serverError"
-      @submit="onSubmit"
-      :submit-text="$t('add')"
-    />
-  </ViewBase>
-</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 
-<script>
 import api from '@/api'
+import { APIBadRequestError, type APIError } from '@/api/errors'
+import { useDomains } from '@/composables/data'
 import { DomainForm } from '@/views/_partials'
 
-export default {
-  name: 'DomainAdd',
+const router = useRouter()
 
-  data() {
-    return {
-      queries: [['GET', { uri: 'domains' }]],
-      serverError: '',
-    }
-  },
+await api.fetch({ uri: 'domains', cachePath: 'domains' })
 
-  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
-        })
-    },
-  },
+const { domains } = useDomains()
+const serverError = ref('')
 
-  components: { DomainForm },
+function onSubmit(data: { domain: string; dyndns_recovery_password?: string }) {
+  api
+    .post({
+      uri: 'domains',
+      cachePath: `domains.${data.domain}`,
+      data,
+      humanKey: { key: 'domains.add', name: data.domain },
+    })
+    .then(() => {
+      router.push({ name: 'domain-list' })
+    })
+    .catch((err: APIError) => {
+      if (!(err instanceof APIBadRequestError)) throw err
+      serverError.value = err.message
+    })
 }
 </script>
+
+<template>
+  <DomainForm
+    :domains="domains"
+    :title="$t('domain_add')"
+    :server-error="serverError"
+    :submit-text="$t('add')"
+    @submit="onSubmit"
+  />
+</template>
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index 4ac881aa..7ba9bee3 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -1,10 +1,134 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
+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
+}>()
+
+const { t } = useI18n()
+const modalConfirm = useAutoModal()
+
+const dnsConfig = await api.get<string>({
+  uri: `domains/${props.name}/dns/suggest`,
+  initial: true,
+})
+
+const showAutoConfigCard = ref(true)
+const showManualConfigCard = ref(false)
+const dnsChanges = ref<DNSChanges[] | null>(null)
+const dnsErrors = ref<DNSError[]>([])
+const dnsZone = ref<DNSRecord[] | null>(null)
+const force = ref<boolean | null>(null)
+
+getDnsChanges()
+// FIXME other Suspense? get types
+function getDnsChanges() {
+  return api
+    .post({
+      uri: `domains/${props.name}/dns/push?dry_run`,
+      showModal: true,
+      websocket: false,
+    })
+    .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)
+      }
+
+      function addSpace(str: string, len: number, prepend: boolean = false) {
+        return (prepend ? str : '') + ' '.repeat(len - str.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
+        })
+      }
+
+      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
+    })
+    .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
+      }
+    })
+}
+
+async function pushDnsChanges() {
+  if (force.value) {
+    const confirmed = await modalConfirm(t('domain.dns.push_force_confirm'))
+    if (!confirmed) return
+  }
+
+  api
+    .post({
+      uri: `domains/${props.name}/dns/push${force.value ? '?force' : ''}`,
+      humanKey: { key: 'domains.push_dns_changes', name: props.name },
+    })
+    .then(async (responseData: Obj<string[]>) => {
+      await getDnsChanges()
+      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
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    :loading="loading"
-    skeleton="CardInfoSkeleton"
-  >
+  <div>
     <section v-if="showAutoConfigCard" class="panel-section">
       <BCardTitle title-tag="h3">
         {{ $t('domain.dns.auto_config') }}
@@ -19,9 +143,9 @@
       <!-- 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 }}
@@ -48,7 +172,7 @@
               :title="
                 managed_by_yunohost === false && force !== true
                   ? $t('domain.dns.auto_config_ignored')
-                  : null
+                  : undefined
               "
             >
               <YIcon :iname="icon" :class="'text-' + variant" />
@@ -75,7 +199,7 @@
       />
 
       <!-- 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"
@@ -140,148 +264,9 @@
 
       <pre class="log">{{ dnsConfig }}</pre>
     </section>
-  </ViewBase>
+  </div>
 </template>
 
-<script>
-import api from '@/api'
-import { isEmptyValue } from '@/helpers/commons'
-
-export default {
-  name: 'DomainDns',
-
-  props: {
-    name: { type: String, required: true },
-  },
-
-  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.$askConfirmation(
-          this.$i18n.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 7edf6090..643e3b4c 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -1,13 +1,127 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+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'
+import { useAutoModal } from '@/composables/useAutoModal'
+import type { CoreConfigPanels } from '@/types/core/options'
+import DomainDns from '@/views/domain/DomainDns.vue'
+
+const props = defineProps<{
+  name: string
+  tabId?: string
+}>()
+
+const { t } = useI18n()
+const router = useRouter()
+const modalConfirm = useAutoModal()
+
+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` },
+  ])
+  .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 unsubscribeDomainFromDyndns = ref(false)
+
+const cert = computed(() => {
+  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],
+  }
+})
+
+const isMainDynDomain = computed(() => {
+  return (
+    domain.value.registrar === 'yunohost' && props.name.split('.').length === 3
+  )
+})
+
+async function deleteDomain() {
+  const data =
+    isMainDynDomain.value && !unsubscribeDomainFromDyndns.value
+      ? { ignore_dyndns: 1 }
+      : {}
+
+  api
+    .delete({
+      uri: `domains/${props.name}`,
+      cachePath: `domains.${props.name}`,
+      data,
+      humanKey: {
+        key: 'domains.delete',
+        name: props.name,
+      },
+    })
+    .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() {
+  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 },
+  })
+}
+</script>
+
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    ref="view"
-    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"
@@ -21,18 +135,14 @@
 
       <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') }}
@@ -48,12 +158,12 @@
 
       <!-- 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">
           ({{
             $t('domain.cert.valid_for', {
-              days: $tc('day_validity', cert.validity),
+              days: $t('day_validity', cert.validity),
             })
           }})
         </span>
@@ -83,10 +193,10 @@
             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"
+              class="py-0 fw-bold"
               variant="outline-dark"
               :to="{ name: 'app-info', params: { id: app.id } }"
             >
@@ -98,7 +208,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>
@@ -108,20 +218,25 @@
       </DescriptionRow>
     </YCard>
 
-    <ConfigPanels v-if="config.panels" v-bind="config" @submit="onConfigSubmit">
-      <template v-if="currentTab === 'dns'" #tab-after>
+    <ConfigPanelsComponent
+      v-model="config.form.value"
+      :panel="config.panel.value"
+      :validations="config.v.value"
+      :routes="config.routes"
+      @apply="config.onPanelApply"
+    >
+      <template v-if="tabId === 'dns'" #tab-after>
         <DomainDns :name="name" />
       </template>
-    </ConfigPanels>
+    </ConfigPanelsComponent>
 
     <BModal
-      v-if="domain"
       id="delete-modal"
-      :title="$t('confirm_delete', { name: this.name })"
+      centered
+      :title="$t('confirm_delete', { name: props.name })"
+      header-variant="warning"
+      :body-class="{ 'd-none': !isMainDynDomain }"
       @ok="deleteDomain"
-      header-bg-variant="warning"
-      body-class=""
-      body-bg-variant=""
     >
       <BFormGroup v-if="isMainDynDomain">
         <BFormCheckbox v-model="unsubscribeDomainFromDyndns">
@@ -129,166 +244,9 @@
         </BFormCheckbox>
       </BFormGroup>
     </BModal>
-  </ViewBase>
+  </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import api, { objectToParams } from '@/api'
-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 },
-  },
-
-  data() {
-    return {
-      queries: [
-        ['GET', { uri: 'domains', storeKey: 'domains' }],
-        [
-          'GET',
-          { uri: 'domains', storeKey: 'domains_details', param: this.name },
-        ],
-        ['GET', `domains/${this.name}/config?full`],
-      ],
-      config: {},
-      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) {
-            this.config.errors[id][err.data.name].message = err.message
-          } else this.$set(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.$askConfirmation(
-        this.$i18n.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 4c123e78..cb09ba49 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -1,12 +1,24 @@
+<script setup lang="ts">
+import api from '@/api'
+import RecursiveListGroup from '@/components/RecursiveListGroup.vue'
+import { useDomains } from '@/composables/data'
+import { useSearch } from '@/composables/useSearch'
+
+await api.fetch({ uri: 'domains', cachePath: 'domains' })
+
+const { mainDomain, domainsTree } = useDomains()
+
+const [search, filteredTree] = useSearch(domainsTree, (s, node) =>
+  node.id.includes(s),
+)
+</script>
+
 <template>
   <ViewSearch
     id="domain-list"
-    :search.sync="search"
-    :items="domains"
+    v-model="search"
+    :items="filteredTree ? filteredTree.children : filteredTree"
     items-name="domains"
-    :queries="queries"
-    :filtered-items="hasFilteredItems"
-    @queries-response="onQueriesResponse"
   >
     <template #top-bar-buttons>
       <BButton variant="success" :to="{ name: 'domain-add' }">
@@ -16,27 +28,28 @@
     </template>
 
     <RecursiveListGroup
-      :tree="tree"
+      v-if="filteredTree"
+      :tree="filteredTree"
       :toggle-text="$t('domain.toggle_subdomains')"
       class="mb-5"
     >
       <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, '') }}
+              <span class="fw-bold">
+                {{ data.name.replace(parent.data?.name ?? '', '') }}
               </span>
-              <span v-if="parent" class="text-secondary">
+              <span v-if="parent?.data" class="text-secondary">
                 {{ parent.data.name }}
               </span>
             </BLink>
 
             <small
               v-if="data.name === mainDomain"
-              :title="$t('domain.types.main_domain')"
-              class="ml-1"
               v-b-tooltip.hover
+              :title="$t('domain.types.main_domain')"
+              class="ms-1"
             >
               <YIcon iname="star" />
             </small>
@@ -46,52 +59,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: '',
-      domainsTree: undefined,
-    }
-  },
-
-  computed: {
-    ...mapGetters(['domains', 'mainDomain']),
-
-    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
-    },
-  },
-
-  methods: {
-    onQueriesResponse() {
-      // Add the tree to `data` to make it reactive
-      this.domainsTree = this.$store.getters.domainsTree
-    },
-  },
-}
-</script>
diff --git a/app/src/views/group/GroupCreate.vue b/app/src/views/group/GroupCreate.vue
index c1dc6109..60e0ea43 100644
--- a/app/src/views/group/GroupCreate.vue
+++ b/app/src/views/group/GroupCreate.vue
@@ -1,69 +1,54 @@
-<template>
-  <CardForm
-    :title="$t('group_new')"
-    icon="users"
-    :validation="$v"
-    :server-error="serverError"
-    @submit.prevent="onSubmit"
-  >
-    <!-- GROUP NAME -->
-    <FormField
-      v-bind="groupname"
-      v-model="form.groupname"
-      :validation="$v.form.groupname"
-    />
-  </CardForm>
-</template>
-
-<script>
-import { validationMixin } from 'vuelidate'
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 
 import api from '@/api'
-import { required, alphalownumdot_ } from '@/helpers/validators'
+import { useForm } from '@/composables/form'
+import { alphalownumdot_, required } from '@/helpers/validators'
+import type { FieldProps, FormFieldDict } from '@/types/form'
 
-export default {
-  name: 'GroupCreate',
+const { t } = useI18n()
+const router = useRouter()
 
-  data() {
-    return {
-      form: {
-        groupname: '',
-      },
-      serverError: '',
-      groupname: {
-        label: this.$i18n.t('group_name'),
-        description: this.$i18n.t('group_format_name_help'),
-        props: {
-          id: 'groupname',
-          placeholder: this.$i18n.t('placeholder.groupname'),
-        },
-      },
-    }
-  },
-
-  validations: {
-    form: {
-      groupname: { required, alphalownumdot_ },
+const form = ref({ groupname: '' })
+const fields = {
+  groupname: {
+    component: 'InputItem',
+    label: t('group_name'),
+    description: t('group_format_name_help'),
+    rules: { required, alphalownumdot_ },
+    cProps: {
+      id: 'groupname',
+      placeholder: t('placeholder.groupname'),
     },
-  },
+  } satisfies FieldProps<'InputItem', string>,
+} satisfies FormFieldDict<typeof form.value>
 
-  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
-        })
-    },
-  },
+const { v, onSubmit } = useForm(form, fields)
 
-  mixins: [validationMixin],
-}
+const onAddGroup = onSubmit((onError) => {
+  api
+    .post({
+      uri: 'users/groups',
+      cachePath: 'groups',
+      data: form,
+      humanKey: { key: 'groups.create', name: form.value.groupname },
+    })
+    .then(() => {
+      router.push({ name: 'group-list' })
+    })
+    .catch(onError)
+})
 </script>
+
+<template>
+  <CardForm
+    v-model="form"
+    icon="users"
+    :fields="fields"
+    :title="$t('group_new')"
+    :validations="v"
+    @submit.prevent="onAddGroup"
+  />
+</template>
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 03d14f80..328a299f 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -1,11 +1,160 @@
+<script setup lang="ts">
+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 { useSearch } from '@/composables/useSearch'
+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 {
+  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' },
+  ])
+  .then(([users, groups, permsDict]) => {
+    type DGroup = Group & {
+      members: string[]
+      name: string
+      isSpecial?: boolean
+      disabledItems?: string[]
+    }
+    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),
+    }
+
+    function isSpecialGroup(
+      name: string,
+    ): name is 'visitors' | 'all_users' | 'admins' {
+      return ['visitors', 'all_users', 'admins'].includes(name)
+    }
+
+    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],
+        }
+
+        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)
+        }
+
+        return g
+      },
+      { primaryGroups: [] as DGroup[], userGroups: {} as Obj<DGroup> },
+    )
+
+    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(
+  { 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, perm }),
+    )
+    if (!confirmed) return
+  }
+
+  api
+    .put({
+      uri: `users/permissions/${perm}/${action}/${name}`,
+      cachePath: `permissions.${perm}`,
+      humanKey: { key: `permissions.${action}`, perm, name },
+    })
+    .then(() => applyFn(perm))
+}
+
+function onUserChanged(
+  { tag: user, action, applyFn }: TagUpdateArgs,
+  name: string,
+) {
+  api
+    .put({
+      uri: `users/groups/${name}/${action}/${user}`,
+      cachePath: `groups.${name}`,
+      humanKey: { key: `groups.${action}`, user, name },
+    })
+    .then(() => applyFn(user))
+}
+
+async function deleteGroup(name: string) {
+  const confirmed = await modalConfirm(t('confirm_delete', { name }))
+  if (!confirmed) return
+
+  api
+    .delete({
+      uri: `users/groups/${name}`,
+      cachePath: `groups.${name}`,
+      humanKey: { key: 'groups.delete', name },
+    })
+    .then(() => {
+      primaryGroups.value = primaryGroups.value.filter(
+        (group) => group.name !== name,
+      )
+    })
+}
+</script>
+
 <template>
   <ViewSearch
+    v-model="search"
+    :items="filteredGroups"
     items-name="groups"
-    :search.sync="search"
-    :items="primaryGroups"
-    :filtered-items="filteredGroups"
-    :queries="queries"
-    @queries-response="onQueriesResponse"
     skeleton="CardFormSkeleton"
   >
     <template #top-bar-buttons>
@@ -16,13 +165,13 @@
 
     <!-- PRIMARY GROUPS CARDS -->
     <YCard
-      v-for="(group, groupName) in filteredGroups"
-      :key="groupName"
-      collapsable
+      v-for="group in filteredGroups"
+      :key="group.name"
+      collapsible
       :title="
         group.isSpecial
-          ? $t('group_' + groupName)
-          : `${$t('group')} '${groupName}'`
+          ? $t('group_' + group.name)
+          : `${$t('group')} '${group.name}'`
       "
       icon="group"
     >
@@ -30,9 +179,9 @@
         <!-- DELETE GROUP -->
         <BButton
           v-if="!group.isSpecial"
-          @click="deleteGroup(groupName)"
           size="sm"
           variant="danger"
+          @click="deleteGroup(group.name)"
         >
           <YIcon iname="trash-o" /> {{ $t('delete') }}
         </BButton>
@@ -42,28 +191,27 @@
         <BCol md="3" lg="2">
           <strong>{{ $t('users') }}</strong>
         </BCol>
-
         <BCol>
           <template v-if="group.isSpecial">
-            <p class="text-primary">
+            <p class="text-primary-emphasis">
               <YIcon iname="info-circle" />
-              {{ $t('group_explain_' + groupName) }}
+              {{ $t('group_explain_' + group.name) }}
             </p>
-            <p class="text-primary" v-if="groupName === 'visitors'">
+            <p v-if="group.name === 'visitors'" class="text-primary-emphasis">
               <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
+              :id="group.name + '-users'"
               v-model="group.members"
-              :options="usersOptions"
-              :id="groupName + '-users'"
+              :options="userOptions"
               :label="$t('group_add_member')"
               tag-icon="user"
               items-name="users"
-              @tag-update="onUserChanged({ ...$event, groupName })"
+              @tag-update="onUserChanged($event, group.name)"
             />
           </template>
         </BCol>
@@ -76,261 +224,55 @@
         </BCol>
         <BCol>
           <TagsSelectizeItem
+            :id="group.name + '-perms'"
             v-model="group.permissions"
-            :options="permissionsOptions"
-            :id="groupName + '-perms'"
+            :options="permissionOptions"
             :label="$t('group_add_permission')"
             tag-icon="key-modern"
             items-name="permissions"
-            @tag-update="onPermissionChanged({ ...$event, groupName })"
             :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"
-    >
-      <template v-for="(userName, index) in activeUserGroups">
-        <BRow :key="userName">
+    <YCard collipsable :title="$t('group_specific_permissions')" icon="group">
+      <template v-for="userName in activeUserGroups" :key="userName">
+        <BRow>
           <BCol md="3" lg="2">
             <YIcon iname="user" /> <strong>{{ userName }}</strong>
           </BCol>
 
           <BCol>
             <TagsSelectizeItem
-              v-model="userGroups[userName].permissions"
-              :options="permissionsOptions"
               :id="userName + '-perms'"
+              v-model="userGroups[userName].permissions"
+              :options="permissionOptions"
               :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>
-        <hr :key="index" />
+        <hr />
       </template>
 
       <TagsSelectizeItem
-        v-model="activeUserGroups"
-        :options="usersOptions"
         id="user-groups"
+        v-model="activeUserGroups"
+        auto
+        :options="userOptions"
         :label="$t('group_add_member')"
         no-tags
         items-name="users"
-        @tag-update="onSpecificUserAdded"
       />
     </YCard>
   </ViewSearch>
 </template>
 
-<script>
-import Vue from 'vue'
-
-import api from '@/api'
-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,
-  },
-
-  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.$askConfirmation(
-          this.$i18n.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.$askConfirmation(
-        this.$i18n.t('confirm_delete', { name: groupName }),
-      )
-      if (!confirmed) return
-
-      api
-        .delete(
-          { uri: 'users/groups', param: groupName, storeKey: 'groups' },
-          {},
-          { key: 'groups.delete', name: groupName },
-        )
-        .then(() => {
-          Vue.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 eaf08c8f..df672e8b 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -1,31 +1,104 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
+import { distanceToNow } from '@/helpers/filters/date'
+import type { ServiceInfo, ServiceLogs } from '@/types/core/api'
+
+const props = defineProps<{ name: string }>()
+
+const { t } = useI18n()
+const modalConfirm = useAutoModal()
+
+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 }),
+  )
+  if (!confirmed) return
+
+  api
+    .put({
+      uri: `services/${props.name}/${action}`,
+      humanKey: { key: `services.${action}`, name: props.name },
+    })
+    .then(() => api.refetch())
+}
+
+function shareLogs() {
+  const logsContent = logs
+    .map(({ filename, content }) => {
+      return `LOGFILE: ${filename}\n${content}`
+    })
+    .join('\n\n')
+
+  fetch('https://paste.yunohost.org/documents', {
+    method: 'POST',
+    body: logsContent,
+  })
+    .then((response) => {
+      if (response.ok) return response.json()
+      else console.error('error', response)
+      // FIXME flash error
+    })
+    .then(({ key }) => {
+      window.open(`https://paste.yunohost.org/${key}`, '_blank')
+    })
+}
+</script>
+
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    ref="view"
-    skeleton="CardInfoSkeleton"
-  >
+  <div>
     <!-- INFO CARD -->
     <YCard :title="name" icon="info-circle" button-unbreak="sm">
       <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>
@@ -47,7 +120,7 @@
               <YIcon :iname="value === 'running' ? 'check-circle' : 'times'" />
               {{ $t(value) }}
             </span>
-            {{ $t('since') }} {{ distanceToNow(uptime) }}
+            {{ $t('since') }} {{ upOrDownTime }}
           </template>
 
           <span
@@ -70,108 +143,17 @@
         </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>
+  </div>
 </template>
 
-<script>
-import api from '@/api'
-import { distanceToNow } from '@/helpers/filters/date'
-
-export default {
-  name: 'ServiceInfo',
-
-  props: {
-    name: { type: String, required: true },
-  },
-
-  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.$askConfirmation(
-        this.$i18n.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 9702aac7..ac38c12b 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -1,15 +1,45 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import api from '@/api'
+import { useSearch } from '@/composables/useSearch'
+import { distanceToNow } from '@/helpers/filters/date'
+import type { ServiceList } from '@/types/core/api'
+
+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 [search, filteredServices] = useSearch(services, (s, service) => {
+  return service.name.toLowerCase().includes(s)
+})
+</script>
+
 <template>
   <ViewSearch
     id="service-list"
-    :search.sync="search"
-    :items="services"
-    :filtered-items="filteredServices"
+    v-model="search"
+    :items="filteredServices"
     items-name="services"
-    :queries="queries"
-    @queries-response="onQueriesResponse"
   >
     <BListGroup>
-      <BListGroupItem
+      <YListItem
         v-for="{
           name,
           description,
@@ -18,75 +48,21 @@
         } in filteredServices"
         :key="name"
         :to="{ name: 'service-info', params: { name } }"
-        class="d-flex justify-content-between align-items-center pr-0"
+        :label="name"
+        :sublabel="description"
       >
-        <div>
-          <h5 class="font-weight-bold">
-            {{ name }}
-            <small class="text-secondary">{{ description }}</small>
-          </h5>
-          <p class="m-0">
-            <span
-              :class="status === 'running' ? 'text-success' : 'text-danger'"
-            >
-              <YIcon :iname="status === 'running' ? 'check-circle' : 'times'" />
-              {{ $t(status) }}
-            </span>
-            {{ $t('since') }} {{ distanceToNow(last_state_change) }}
-          </p>
-        </div>
-
-        <YIcon iname="chevron-right" class="lg fs-sm ml-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>
 
-<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(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 57724f79..6e73273e 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -1,16 +1,219 @@
+<script setup lang="ts">
+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 { 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 { 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'
+  port: string | number
+  connection: 'ipv4' | 'ipv6'
+  protocol: 'TCP' | 'UDP' | 'Both'
+}
+const form = ref<Form>({
+  action: 'allow',
+  port: '',
+  connection: 'ipv4',
+  protocol: 'TCP',
+})
+const fields = {
+  action: {
+    asInputGroup: true,
+    component: 'SelectItem',
+    label: t('action'),
+    rules: { required },
+    cProps: {
+      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) },
+    cProps: { id: 'input-port', placeholder: '0', type: 'number' },
+  } satisfies FieldProps<'InputItem', Form['action']>,
+
+  connection: {
+    asInputGroup: true,
+    component: 'SelectItem',
+    label: t('connection'),
+    rules: { required },
+    cProps: {
+      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 },
+    cProps: {
+      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)
+
+async function togglePort({
+  action,
+  port,
+  protocol,
+  connection,
+}: Form): Promise<boolean> {
+  const confirmed = await modalConfirm(
+    t('confirm_firewall_' + action, {
+      port,
+      protocol,
+      connection,
+    }),
+  )
+  if (!confirmed) return false
+
+  const actionTrad = t({ allow: 'open', disallow: 'close' }[action])
+  return api
+    .put({
+      uri: `firewall/${protocol}/${action}/${port}?${connection}_only`,
+      humanKey: {
+        key: 'firewall.ports',
+        protocol,
+        action: actionTrad,
+        port,
+        connection,
+      },
+      showModal: false,
+    })
+    .then(() => true)
+}
+
+async function toggleUpnp() {
+  const action = upnpEnabled.value ? 'disable' : 'enable'
+  const confirmed = await modalConfirm(t('confirm_upnp_' + action))
+  if (!confirmed) return
+
+  api
+    .put({
+      uri: 'firewall/upnp/' + action,
+      humanKey: { key: 'firewall.upnp', action: t(action) },
+    })
+    .then(() => {
+      // FIXME Couldn't test when it works.
+      api.refetch()
+    })
+    .catch((err: APIError) => {
+      if (!(err instanceof APIBadRequestError)) throw err
+      upnpError.value = err.message
+    })
+}
+
+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((confirmed) => {
+    // Revert change on cancel
+    if (!confirmed) {
+      protocols_.forEach((protocol) => {
+        protocols[protocol][index][connection] = !value
+      })
+    }
+  })
+}
+
+function onFormPortToggling() {
+  togglePort(form.value).then((confirmed) => {
+    // TODO: update data instead of refetch?
+    if (confirmed) api.refetch()
+  })
+}
+</script>
+
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    ref="view"
-    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="fields" :items="items" small striped responsive>
+        <BTable :fields="tableFields" :items="items" small striped responsive>
           <!-- PORT CELL -->
           <template #cell(port)="data">
             {{ data.value }}
@@ -20,23 +223,22 @@
           <template #cell()="data">
             <BFormCheckbox
               v-if="data.field.key !== 'uPnP'"
-              class="on-off-switch"
-              v-model="data.value"
+              :model-value="data.value as boolean"
               switch
-              @change="
+              @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,
                 )
               "
             >
               <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>
@@ -54,45 +256,15 @@
 
     <!-- OPERATIONS -->
     <CardForm
-      :title="$t('operations')"
+      v-model="form"
+      :fields="fields"
       icon="cogs"
-      :validation="$v"
-      :server-error="serverError"
-      @submit.prevent="onFormPortToggling"
       inline
-      form-classes="d-flex justify-content-between align-items-start"
-    >
-      <BInputGroup :prepend="$t('action')">
-        <BFormSelect v-model="form.action" :options="actionChoices" />
-      </BInputGroup>
-
-      <FormField :validation="$v.form.port">
-        <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>
+      :title="$t('operations')"
+      :validations="v"
+      form-classes="d-flex flex-column flex-lg-row gap-3 justify-content-between align-items-start"
+      @submit.prevent="onFormPortToggling"
+    />
 
     <!-- UPnP -->
     <YCard
@@ -108,226 +280,42 @@
 
       <template #buttons>
         <BButton
-          @click="toggleUpnp"
           :variant="!upnpEnabled ? 'success' : 'danger'"
+          @click="toggleUpnp"
         >
           {{ $t(!upnpEnabled ? 'enable' : 'disable') }}
         </BButton>
       </template>
     </YCard>
-  </ViewBase>
+  </div>
 </template>
 
-<script>
-import { validationMixin } from 'vuelidate'
-
-import api from '@/api'
-import { required, integer, between } from '@/helpers/validators'
-
-export default {
-  name: 'ToolFirewall',
-
-  data() {
-    return {
-      queries: [['GET', '/firewall?raw']],
-      serverError: '',
-
-      // 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') },
-      ],
-      protocols: undefined,
-      portToToggle: undefined,
-
-      // Ports form data
-      actionChoices: [
-        { value: 'allow', text: this.$i18n.t('open') },
-        { value: 'disallow', text: this.$i18n.t('close') },
-      ],
-      connectionChoices: [
-        { value: 'ipv4', text: this.$i18n.t('ipv4') },
-        { value: 'ipv6', text: this.$i18n.t('ipv6') },
-      ],
-      protocolChoices: [
-        { value: 'TCP', text: this.$i18n.t('tcp') },
-        { value: 'UDP', text: this.$i18n.t('udp') },
-        { value: 'Both', text: this.$i18n.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.$askConfirmation(
-        this.$i18n.t('confirm_firewall_' + action, {
-          port,
-          protocol,
-          connection,
-        }),
-      )
-      if (!confirmed) {
-        return Promise.resolve(confirmed)
-      }
-
-      const actionTrad = this.$i18n.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.$askConfirmation(
-        this.$i18n.t('confirm_upnp_' + action),
-      )
-      if (!confirmed) return
-
-      api
-        .put(
-          'firewall/upnp/' + action,
-          {},
-          { key: 'firewall.upnp', action: this.$i18n.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.$set(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)
-          }
-        },
-      )
-    },
-
-    onFormPortToggling(e) {
-      this.togglePort(this.form).then((toggled) => {
-        if (toggled) this.$refs.view.fetchQueries()
-      })
-    },
-  },
-
-  mixins: [validationMixin],
-}
-</script>
-
 <style lang="scss" scoped>
-::v-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 {
+      &: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;
       }
-      &::after {
-        background-color: $white;
+    }
+
+    input:focus ~ .custom-control-label,
+    &:hover {
+      span {
+        visibility: visible;
       }
     }
-  }
-
-  input:focus ~ .custom-control-label,
-  &:hover {
     span {
-      visibility: visible;
-    }
-  }
-  span {
-    visibility: hidden;
-    @include media-breakpoint-down(xs) {
-      display: none;
-    }
-  }
-}
-
-::v-deep form {
-  margin-bottom: -1rem;
-
-  & > * {
-    margin-bottom: 1rem;
-  }
-
-  @include media-breakpoint-down(xs) {
-    fieldset {
-      width: 100%;
+      visibility: hidden;
+      @include media-breakpoint-down(sm) {
+        display: none;
+      }
     }
   }
 }
diff --git a/app/src/views/tool/ToolList.vue b/app/src/views/tool/ToolList.vue
index 8c4cead2..dbcf9fe5 100644
--- a/app/src/views/tool/ToolList.vue
+++ b/app/src/views/tool/ToolList.vue
@@ -1,4 +1,31 @@
-<!-- FIXME make a component shared with HomeView.vue ? -->
+<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>
+
 <template>
   <BListGroup class="menu-list">
     <BListGroupItem
@@ -6,45 +33,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>
-
-<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 2a4e0fd6..b67ae4fb 100644
--- a/app/src/views/tool/ToolLog.vue
+++ b/app/src/views/tool/ToolLog.vue
@@ -1,43 +1,108 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+import api, { objectToParams } from '@/api'
+import { escapeHtml } from '@/helpers/commons'
+import { readableDate } from '@/helpers/filters/date'
+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,
+    })}`,
+  })
+  .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')
+    const { started_at, ended_at, error, suboperations } = log.metadata
+    return {
+      description: log.description,
+      logs,
+      moreLogsAvailable: log.logs.length === props.n,
+      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
+    .get({
+      uri: `logs/${props.name}/share`,
+      humanKey: { key: 'share_logs', name: props.name },
+      websocket: true,
+    })
+    .then(({ url }) => {
+      window.open(url, '_blank')
+    })
+}
+</script>
+
 <template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    ref="view"
-    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>
+      <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>
-          <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 } }"
+          <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">
@@ -48,115 +113,25 @@
     <!-- 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>
 
       <BButton
         v-if="moreLogsAvailable"
-        variant="white"
         class="w-100 rounded-0"
-        @click="$refs.view.fetchQueries()"
+        @click="router.replace({ params: { n: props.n * 10 } })"
       >
         <YIcon iname="plus" /> {{ $t('logs_more') }}
       </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>
 
     <p class="w-100 px-5 py-2 mb-0" v-html="$t('text_selection_is_disabled')" />
-  </ViewBase>
+  </div>
 </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 c1874d8f..56fb7ad6 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -1,74 +1,44 @@
+<script setup lang="ts">
+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 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 [search, filteredOperations] = useSearch(operations, (s, op) => {
+  return op.description.toLowerCase().includes(s)
+})
+</script>
+
 <template>
-  <ViewSearch
-    :search.sync="search"
-    :items="operations"
-    :filtered-items="filteredOperations"
-    items-name="logs"
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    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="mr-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>
     </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 643a966e..8e12a963 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -1,8 +1,69 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
+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 { 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),
+    }
+  })
+
+function runMigrations() {
+  // 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(() => api.refetch())
+  }
+}
+
+async function skipMigration(id: string) {
+  const confirmed = await modalConfirm(t('confirm_migrations_skip'))
+  if (!confirmed) return
+  api
+    .put({
+      uri: '/migrations/' + id,
+      data: { skip: '', targets: id },
+      humanKey: 'migration.skip',
+    })
+    .then(() => api.refetch())
+}
+</script>
+
 <template>
-  <ViewBase :queries="queries" @queries-response="onQueriesResponse" ref="view">
+  <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>
@@ -22,8 +83,13 @@
           <div class="d-flex align-items-center">
             {{ number }}. {{ description }}
 
-            <div class="ml-auto">
-              <BButton @click="skipMigration(id)" size="sm" variant="warning">
+            <div class="ms-auto">
+              <BButton
+                size="sm"
+                variant="warning"
+                class="d-flex align-items-center ms-2"
+                @click="skipMigration(id)"
+              >
                 <YIcon iname="close" /> {{ $t('skip') }}
               </BButton>
             </div>
@@ -35,17 +101,16 @@
 
             <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"
               :id="'checkbox-feedback-' + number"
+              :state="false"
             >
               {{ $t('migrations_disclaimer_not_checked') }}
             </BFormInvalidFeedback>
@@ -58,7 +123,7 @@
     <YCard
       :title="$t('migrations_done')"
       icon="cogs"
-      collapsable
+      collapsible
       collapsed
       no-body
     >
@@ -68,84 +133,11 @@
         </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>
       </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>
-
-<script>
-import api from '@/api'
-
-// FIXME not tested with pending migrations (disclaimer and stuff)
-export default {
-  name: 'ToolMigrations',
-
-  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.$set(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.$askConfirmation(
-        this.$i18n.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 0443f043..a4fd509a 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -1,3 +1,25 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
+import { useInfos } from '@/composables/useInfos'
+
+const { t } = useI18n()
+const modalConfirm = useAutoModal()
+const { tryToReconnect } = useInfos()
+
+async function triggerAction(action: 'reboot' | 'shutdown') {
+  const confirmed = await modalConfirm(t('confirm_reboot_action_' + action))
+  if (!confirmed) return
+
+  api.put({ uri: action + '?force', humanKey: action }).then(() => {
+    const delay = action === 'reboot' ? 4000 : 10000
+    tryToReconnect({ attemps: Infinity, origin: action, delay })
+  })
+}
+</script>
+
 <template>
   <YCard :title="$t('operations')" icon="wrench">
     <!-- REBOOT -->
@@ -8,7 +30,7 @@
       :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>
@@ -23,39 +45,12 @@
       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>
     </BFormGroup>
   </YCard>
 </template>
-
-<script>
-import api from '@/api'
-
-export default {
-  name: 'ToolPower',
-
-  methods: {
-    async triggerAction(action) {
-      const confirmed = await this.$askConfirmation(
-        this.$i18n.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 71897e04..35d006a2 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -1,71 +1,39 @@
-<template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    ref="view"
-    skeleton="CardFormSkeleton"
-  >
-    <ConfigPanels
-      v-if="config.panels"
-      v-bind="config"
-      @submit="onConfigSubmit"
-    />
-  </ViewBase>
-</template>
-
-<script>
+<script setup lang="ts">
 import api, { objectToParams } from '@/api'
-import {
-  formatFormData,
-  formatYunoHostConfigPanels,
-} from '@/helpers/yunohostArguments'
-import ConfigPanels from '@/components/ConfigPanels.vue'
+import ConfigPanelsComponent from '@/components/ConfigPanels.vue'
+import { formatConfigPanels, useConfigPanels } from '@/composables/configPanels'
+import type { CoreConfigPanels } from '@/types/core/options'
 
-export default {
-  name: 'ToolSettingsConfig',
+const props = defineProps<{ tabId?: string }>()
 
-  components: {
-    ConfigPanels,
-  },
+const coreConfig = await api.get<CoreConfigPanels>({
+  uri: 'settings?full',
+  initial: true,
+})
 
-  props: {},
-
-  data() {
-    return {
-      queries: [['GET', 'settings?full']],
-      config: {},
-    }
-  },
-
-  methods: {
-    onQueriesResponse(config) {
-      this.config = formatYunoHostConfigPanels(config)
-    },
-
-    async onConfigSubmit({ id, form }) {
-      const args = await formatFormData(form, {
-        removeEmpty: false,
-        removeNull: true,
+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 },
       })
-
-      // 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) {
-            this.config.errors[id][err.data.name].message = err.message
-          } else this.$set(panel, 'serverError', err.message)
-        })
-    },
+      .then(() => api.refetch())
+      .catch(onError)
   },
-}
+)
 </script>
+
+<template>
+  <ConfigPanelsComponent
+    v-model="form"
+    :panel="panel"
+    :validations="v"
+    :routes="routes"
+    @apply="onPanelApply"
+  />
+</template>
diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index f3359f6d..b2ba1869 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/app/src/views/tool/ToolWebadmin.vue
@@ -1,101 +1,82 @@
-<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>
-  </CardForm>
-</template>
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-<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] = {
-      get() {
-        return this.$store.getters[prop]
-      },
-      set(value) {
-        const key =
-          (action === 'commit' ? 'SET_' : 'UPDATE_') + prop.toUpperCase()
-        this.$store[action](key, value)
-      },
-    }
-    return obj
-  }, {})
+import { useSettings } from '@/composables/useSettings'
+import { getKeys, pick } from '@/helpers/commons'
+import type { FormField } from '@/types/form'
+
+const { t } = useI18n()
+// Computed `t` to get on the fly lang change in this view
+const ct = (key: string) => computed(() => t(key))
+
+const settings = useSettings()
+
+const fields = {
+  locale: reactive({
+    component: 'SelectItem',
+    label: ct('tools_webadmin.language'),
+    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'),
+    cProps: {
+      id: 'fallback-locale',
+      choices: settings.availableLocales,
+    },
+  }) as FormField<'SelectItem', string>,
+
+  cache: reactive({
+    component: 'CheckboxItem',
+    id: 'cache',
+    label: ct('tools_webadmin.cache'),
+    description: ct('tools_webadmin.cache_description'),
+    cProps: { labels: { true: 'enabled', false: 'disabled' } },
+  }) as FormField<'CheckboxItem', boolean>,
+
+  transitions: reactive({
+    component: 'CheckboxItem',
+    id: 'transitions',
+    label: ct('tools_webadmin.transitions'),
+    cProps: { labels: { true: 'enabled', false: 'disabled' } },
+  }) as FormField<'CheckboxItem', boolean>,
+
+  dark: reactive({
+    component: 'CheckboxItem',
+    id: 'theme',
+    label: ct('tools_webadmin.theme'),
+    cProps: { labels: { true: '🌙', false: '☀️' } },
+  }) as FormField<'CheckboxItem', boolean>,
+
+  experimental: reactive({
+    component: 'CheckboxItem',
+    id: 'experimental',
+    label: ct('tools_webadmin.experimental'),
+    description: ct('tools_webadmin.experimental_description'),
+    // Available in dev mode only
+    visible: import.meta.env.DEV,
+    cProps: { labels: { true: 'enabled', false: 'disabled' } },
+  }) as FormField<'CheckboxItem', boolean>,
 }
+const form = ref(pick(settings, getKeys(fields)))
 
-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.$i18n.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',
-          ),
-          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'),
-          component: 'CheckboxItem',
-          props: { labels: { true: 'enabled', false: 'disabled' } },
-        },
-
-        transitions: {
-          id: 'transitions',
-          label: this.$i18n.t('tools_webadmin.transitions'),
-          component: 'CheckboxItem',
-          props: { labels: { true: 'enabled', false: 'disabled' } },
-        },
-
-        theme: {
-          id: 'theme',
-          label: this.$i18n.t('tools_webadmin.theme'),
-          component: 'CheckboxItem',
-          props: { labels: { true: '🌙', false: '☀️' } },
-        },
-
-        // experimental: added in `created()`
-      },
-    }
-  },
-
-  computed: {
-    // Those are set/get computed properties
-    ...mapStoreGetSet(['locale', 'fallbackLocale', 'theme'], '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.$i18n.t('tools_webadmin.experimental'),
-        description: this.$i18n.t('tools_webadmin.experimental_description'),
-        component: 'CheckboxItem',
-        props: { labels: { true: 'enabled', false: 'disabled' } },
-      }
-    }
-  },
-}
+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')"
+    icon="cog"
+    no-footer
+    hr
+  />
+</template>
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 8b15fc37..7a5c48fe 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -1,10 +1,99 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import api from '@/api'
+import CardCollapse from '@/components/CardCollapse.vue'
+import { useAutoModal } from '@/composables/useAutoModal'
+import { useInfos } from '@/composables/useInfos'
+import type { SystemUpdate } from '@/types/core/api'
+import { formatAppNotifs } from '../app/appData'
+
+const { t } = useI18n()
+const { tryToReconnect } = useInfos()
+const modalConfirm = useAutoModal()
+
+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?: 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: formatAppNotifs(app.notifications.PRE_UPGRADE),
+  }))
+  preUpgrade.value = { apps: apps_, hasNotifs: apps_.some((app) => app.notif) }
+}
+
+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_) {
+    const continue_ = await api
+      .put({
+        uri: `apps/${app.id}/upgrade`,
+        humanKey: { key: 'upgrade.app', app: app.name },
+      })
+      .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)
+
+        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 true
+        }
+      })
+    if (!continue_) break
+  }
+}
+
+async function performSystemUpgrade() {
+  const confirmed = await modalConfirm(t('confirm_update_system'))
+  if (!confirmed) return
+
+  api.put({ uri: 'upgrade/system', humanKey: 'upgrade.system' }).then(() => {
+    if (system.value.some(({ name }) => name.includes('yunohost'))) {
+      tryToReconnect({
+        attemps: 1,
+        origin: 'upgrade_system',
+        initialDelay: 2000,
+      })
+    }
+    system.value = []
+  })
+}
+</script>
+
 <template>
-  <ViewBase
-    :queries="queries"
-    queries-wait
-    @queries-response="onQueriesResponse"
-    skeleton="CardListSkeleton"
-  >
+  <div>
     <!-- MIGRATIONS WARN -->
     <YAlert v-if="pendingMigrations" variant="warning" alert>
       <span v-html="$t('pending_migrations')" />
@@ -17,7 +106,7 @@
 
     <!-- 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"
@@ -31,17 +120,17 @@
         </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'"
+          variant="success"
           @click="performSystemUpgrade()"
         />
       </template>
@@ -49,7 +138,7 @@
 
     <!-- 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"
@@ -64,38 +153,41 @@
           </h5>
 
           <BButton
+            v-t="'system_upgrade_btn'"
             variant="success"
             size="sm"
-            v-t="'system_upgrade_btn'"
             @click="confirmAppsUpgrade(id)"
           />
         </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'"
+          variant="success"
           @click="confirmAppsUpgrade()"
         />
       </template>
     </YCard>
 
     <BModal
+      v-if="preUpgrade"
       id="apps-pre-upgrade"
+      centered
+      :model-value="true"
       :title="$t('app.upgrade.confirm.title')"
-      header-bg-variant="warning"
-      :header-class="theme ? 'text-white' : '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))"
+      @hide="preUpgrade = undefined"
     >
       <h3>
         {{ $t('app.upgrade.confirm.apps') }}
@@ -118,16 +210,15 @@
         <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
           >
             <BCardBody>
               <VueShowdown
                 :markdown="notif"
-                flavor="github"
                 :options="{ headerLevelStart: 6 }"
               />
             </BCardBody>
@@ -135,142 +226,9 @@
         </div>
       </div>
     </BModal>
-  </ViewBase>
+  </div>
 </template>
 
-<script>
-import api from '@/api'
-import { mapGetters } from 'vuex'
-
-import CardCollapse from '@/components/CardCollapse.vue'
-
-export default {
-  name: 'SystemUpdate',
-
-  components: {
-    CardCollapse,
-  },
-
-  data() {
-    return {
-      queries: [['PUT', 'update/all', {}, 'update']],
-      // API data
-      system: undefined,
-      apps: undefined,
-      importantYunohostUpgrade: undefined,
-      pendingMigrations: undefined,
-      preUpgrade: {
-        apps: [],
-        notifs: [],
-      },
-    }
-  },
-
-  computed: {
-    ...mapGetters(['theme']),
-  },
-
-  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.$bvModal.show('apps-pre-upgrade')
-    },
-
-    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.$i18n.t('app.upgrade.notifs.post.alert') +
-                '\n\n' +
-                postMessage
-              return this.$askMdConfirmation(
-                message,
-                {
-                  title: this.$i18n.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'),
-                },
-                isLast,
-              )
-            } else {
-              return Promise.resolve(true)
-            }
-          })
-        if (!continue_) break
-      }
-
-      if (!this.apps.length) {
-        this.apps = null
-      }
-    },
-
-    async performSystemUpgrade() {
-      const confirmed = await this.$askConfirmation(
-        this.$i18n.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 2f3675f1..df34c15e 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -1,203 +1,143 @@
-<template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    skeleton="CardFormSkeleton"
-  >
-    <CardForm
-      :title="$t('users_new')"
-      icon="user-plus"
-      :validation="$v"
-      :server-error="serverError"
-      @submit.prevent="onSubmit"
-    >
-      <!-- USER NAME -->
-      <FormField
-        v-bind="fields.username"
-        v-model="form.username"
-        :validation="$v.form.username"
-      />
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 
-      <!-- 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>
-            <BInputGroupAppend>
-              <BInputGroupText
-                id="local-part"
-                tag="label"
-                class="border-right-0"
-              >
-                {{ form.username }}@
-              </BInputGroupText>
-            </BInputGroupAppend>
-
-            <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"
-      />
-    </CardForm>
-  </ViewBase>
-</template>
-
-<script>
 import api from '@/api'
-import { mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
-
-import { formatFormData } from '@/helpers/yunohostArguments'
+import { useDomains, useUsersAndGroups } from '@/composables/data'
+import { useForm } from '@/composables/form'
 import {
   alphalownumdot_,
-  unique,
-  required,
   minLength,
   name,
+  required,
   sameAs,
+  unique,
 } from '@/helpers/validators'
+import { formatForm } from '@/helpers/yunohostArguments'
+import type { FieldProps, FormFieldDict } from '@/types/form'
 
-export default {
-  name: 'UserCreate',
+const { t } = useI18n()
+const router = useRouter()
 
-  data() {
-    return {
-      queries: [
-        ['GET', { uri: 'users' }],
-        ['GET', { uri: 'domains' }],
-      ],
+await api.fetchAll([
+  { uri: 'users', cachePath: 'users' },
+  { uri: 'domains', cachePath: 'domains' },
+])
 
-      form: {
-        username: '',
-        fullname: '',
-        domain: '',
-        password: '',
-        confirmation: '',
-      },
+const { usernames } = useUsersAndGroups()
+const { domainsAsChoices, mainDomain } = useDomains()
 
-      serverError: '',
-
-      fields: {
-        username: {
-          label: this.$i18n.t('user_username'),
-          props: {
-            id: 'username',
-            placeholder: this.$i18n.t('placeholder.username'),
-          },
-        },
-
-        fullname: {
-          label: this.$i18n.t('user_fullname'),
-          props: {
-            id: 'fullname',
-            placeholder: this.$i18n.t('placeholder.fullname'),
-          },
-        },
-
-        domain: {
-          id: 'mail',
-          label: this.$i18n.t('user_email'),
-          description: this.$i18n.t('tip_about_user_email'),
-          descriptionVariant: 'info',
-          props: { choices: [] },
-        },
-
-        password: {
-          label: this.$i18n.t('password'),
-          description: this.$i18n.t('good_practices_about_user_password'),
-          descriptionVariant: 'warning',
-          props: {
-            id: 'password',
-            placeholder: '••••••••',
-            type: 'password',
-          },
-        },
-
-        confirmation: {
-          label: this.$i18n.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('password') },
-      },
-    }
-  },
-
-  methods: {
-    onQueriesResponse() {
-      this.fields.domain.props.choices = this.domainsAsChoices
-      this.form.domain = this.mainDomain
+type Form = typeof form.value
+const form = ref({
+  username: '',
+  fullname: '',
+  domain: mainDomain.value,
+  password: '',
+  confirmation: '',
+})
+const fields = {
+  username: reactive({
+    component: 'InputItem',
+    label: t('user_username'),
+    rules: computed(() => ({
+      required,
+      alphalownumdot_,
+      notInUsers: unique(usernames),
+    })),
+    cProps: {
+      id: 'username',
+      placeholder: t('placeholder.username'),
     },
+  }) satisfies FieldProps<'InputItem', Form['username']>,
 
-    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
-        })
+  fullname: {
+    component: 'InputItem',
+    hr: true,
+    label: t('user_fullname'),
+    rules: { required, name },
+    cProps: {
+      id: 'fullname',
+      placeholder: t('placeholder.fullname'),
     },
-  },
+  } satisfies FieldProps<'InputItem', Form['fullname']>,
 
-  mixins: [validationMixin],
-}
+  domain: reactive({
+    component: 'SelectItem',
+    hr: true,
+    id: 'mail',
+    label: t('user_email'),
+    description: t('tip_about_user_email'),
+    descriptionVariant: 'info',
+    rules: { required },
+    cProps: { choices: 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) },
+    cProps: {
+      id: 'password',
+      placeholder: '••••••••',
+      type: 'password',
+    },
+  } satisfies FieldProps<'InputItem', Form['password']>,
+
+  confirmation: reactive({
+    component: 'InputItem',
+    label: t('password_confirmation'),
+    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 } = useForm(form, fields)
+
+const onUserCreate = onSubmit(async (onError) => {
+  const data = await formatForm(form)
+  api
+    .post({
+      uri: 'users',
+      cachePath: 'users',
+      data,
+      humanKey: { key: 'users.create', name: form.value.username },
+    })
+    .then(() => {
+      router.push({ name: 'user-list' })
+    })
+    .catch(onError)
+})
 </script>
 
-<style lang="scss" scoped>
-.custom-select {
-  flex-basis: 40%;
-}
-</style>
+<template>
+  <div>
+    <CardForm
+      v-model="form"
+      icon="user-plus"
+      :fields="fields"
+      :title="$t('users_new')"
+      :validations="v"
+      @submit.prevent="onUserCreate"
+    >
+      <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>
+  </div>
+</template>
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index aea68a3f..cdab2fe3 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -1,357 +1,268 @@
-<template>
-  <ViewBase
-    :queries="queries"
-    @queries-response="onQueriesResponse"
-    skeleton="CardFormSkeleton"
-  >
-    <CardForm
-      :title="$t('user_username_edit', { name })"
-      icon="user"
-      :validation="$v"
-      :server-error="serverError"
-      @submit.prevent="onSubmit"
-    >
-      <!-- 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 }">
-          <AdressInputSelect 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.$each[i]"
-          >
-            <template #default="{ self }">
-              <AdressInputSelect 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="sr-only">{{ $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]"
-            :id="'mail-forward' + i"
-            :validation="$v.form.mail_forward.$each[i]"
-          />
-
-          <BButton variant="danger" @click="removeEmailField('forward', i)">
-            <YIcon :title="$t('delete')" iname="trash-o" />
-            <span class="sr-only">{{ $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"
-      />
-    </CardForm>
-  </ViewBase>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 
 import api from '@/api'
-import { arrayDiff } from '@/helpers/commons'
+import { useDomains, useUsersAndGroups } from '@/composables/data'
+import { useArrayRule, useForm } from '@/composables/form'
+import { arrayDiff, getKeys } from '@/helpers/commons'
 import {
-  sizeToM,
-  adressToFormValue,
-  formatFormData,
-} from '@/helpers/yunohostArguments'
-import {
-  name,
-  required,
-  minLength,
-  emailLocalPart,
-  sameAs,
-  integer,
-  minValue,
   emailForward,
+  emailLocalPart,
+  integer,
+  minLength,
+  minValue,
+  name as nameValidator,
+  required,
+  sameAs,
 } from '@/helpers/validators'
+import { formatAdress, formatForm, sizeToM } from '@/helpers/yunohostArguments'
+import type { UserDetails } from '@/types/core/data'
+import type { FieldProps, FormFieldDict } from '@/types/form'
 
-import AdressInputSelect from '@/components/AdressInputSelect.vue'
+const props = defineProps<{
+  name: string
+}>()
 
-export default {
-  name: 'UserEdit',
-
-  props: {
-    name: { type: String, required: true },
+const { t } = useI18n()
+const router = useRouter()
+await api.fetchAll([
+  {
+    uri: `users/${props.name}`,
+    cachePath: `userDetails.${props.name}`,
   },
+  { uri: 'domains', cachePath: 'domains' },
+])
 
-  data() {
-    return {
-      queries: [
-        ['GET', { uri: 'users', param: this.name, storeKey: 'users_details' }],
-        ['GET', { uri: '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
 
-      form: {
-        fullname: '',
-        mail: { localPart: '', separator: '@', domain: '' },
-        mailbox_quota: '',
-        mail_aliases: [],
-        mail_forward: [],
-        change_password: '',
-        confirmation: '',
-      },
+type Form = typeof form.value
+const form = ref({
+  username: props.name,
+  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: '',
+})
+const fields = reactive({
+  username: {
+    component: 'InputItem',
+    label: t('user_username'),
+    cProps: { id: 'username', disabled: true },
+  } satisfies FieldProps<'InputItem', Form['username']>,
 
-      serverError: '',
+  fullname: {
+    component: 'InputItem',
+    label: t('user_fullname'),
+    rules: { required, nameValidator },
+    cProps: {
+      id: 'fullname',
+      placeholder: t('placeholder.fullname'),
+    },
+  } satisfies FieldProps<'InputItem', Form['fullname']>,
 
-      fields: {
-        username: {
-          label: this.$i18n.t('user_username'),
-          value: this.name,
-          props: { id: 'username', disabled: true },
-        },
+  mail: reactive({
+    component: 'AdressItem',
+    label: t('user_email'),
+    rules: {
+      localPart: { required, email: emailLocalPart },
+      domain: { required },
+    },
+    cProps: { id: 'mail', choices: domainsAsChoices },
+  }) satisfies FieldProps<'AdressItem', Form['mail']>,
 
-        fullname: {
-          label: this.$i18n.t('user_fullname'),
-          props: {
-            id: 'fullname',
-            placeholder: this.$i18n.t('placeholder.fullname'),
-          },
-        },
+  mailbox_quota: {
+    append: 'M',
+    component: 'InputItem',
+    label: t('user_mailbox_quota'),
+    description: t('mailbox_quota_description'),
+    // example: t('mailbox_quota_example'),
+    rules: { integer, minValue: minValue(0) },
+    cProps: {
+      id: 'mailbox-quota',
+      placeholder: t('mailbox_quota_placeholder'),
+      type: 'number',
+    },
+  } satisfies FieldProps<'InputItem', Form['mailbox_quota']>,
 
-        mail: {
-          label: this.$i18n.t('user_email'),
-          props: { id: 'mail', choices: [] },
-        },
+  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'),
+      choices: domainsAsChoices,
+    },
+  }) satisfies FieldProps<'AdressItem', Form['mail_aliases']>,
 
-        mailbox_quota: {
-          label: this.$i18n.t('user_mailbox_quota'),
-          description: this.$i18n.t('mailbox_quota_description'),
-          example: this.$i18n.t('mailbox_quota_example'),
-          props: {
-            id: 'mailbox-quota',
-            placeholder: this.$i18n.t('mailbox_quota_placeholder'),
-          },
-        },
+  mail_forward: reactive({
+    component: 'InputItem',
+    label: t('user_emailforward'),
+    id: 'mail_forward',
+    rules: useArrayRule(() => form.value.mail_forward, {
+      required,
+      emailForward,
+    }),
+    cProps: {
+      placeholder: t('user_new_forward'),
+      type: 'email',
+    },
+  }) satisfies FieldProps<'InputItem', Form['mail_forward']>,
 
-        mail_aliases: {
-          props: {
-            placeholder: this.$i18n.t('placeholder.username'),
-            choices: [],
-          },
-        },
+  change_password: {
+    component: 'InputItem',
+    label: t('password'),
+    description: t('good_practices_about_user_password'),
+    descriptionVariant: 'warning',
+    rules: { passwordLenght: minLength(8) },
+    cProps: {
+      id: 'change_password',
+      type: 'password',
+      placeholder: '••••••••',
+      autocomplete: 'new-password',
+    },
+  } satisfies FieldProps<'InputItem', Form['change_password']>,
 
-        mail_forward: {
-          props: {
-            placeholder: this.$i18n.t('user_new_forward'),
-            type: 'email',
-          },
-        },
+  confirmation: reactive({
+    component: 'InputItem',
+    label: t('password_confirmation'),
+    rules: computed(() => ({
+      passwordMatch: sameAs(form.value.change_password),
+    })),
+    cProps: {
+      id: 'confirmation',
+      type: 'password',
+      placeholder: '••••••••',
+      autocomplete: 'new-password',
+    },
+  }) satisfies FieldProps<'InputItem', Form['confirmation']>,
+} satisfies FormFieldDict<Form>)
 
-        change_password: {
-          label: this.$i18n.t('password'),
-          description: this.$i18n.t('good_practices_about_user_password'),
-          descriptionVariant: 'warning',
-          props: {
-            id: 'change_password',
-            type: 'password',
-            placeholder: '••••••••',
-            autocomplete: 'new-password',
-          },
-        },
+const { v, onSubmit } = useForm(form, fields)
 
-        confirmation: {
-          label: this.$i18n.t('password_confirmation'),
-          props: {
-            id: 'confirmation',
-            type: 'password',
-            placeholder: '••••••••',
-            autocomplete: 'new-password',
-          },
-        },
-      },
+const onUserEdit = onSubmit(async (onError, serverErrors) => {
+  const {
+    username: _,
+    confirmation: __,
+    ...formData
+  } = await formatForm(form, {
+    removeEmpty: true,
+  })
+  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 = 0
+  }
+
+  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
+  }
+
+  getKeys(formData).forEach((key) => {
+    if (key === 'mail_aliases' || key === 'mail_forward') return
+    if (key === 'mailbox_quota') {
+      if (formData[key] !== mailboxQuota) {
+        data[key] = formData[key]! > 0 ? formData[key] + 'M' : 'No quota'
+      }
+    } else if (key === 'change_password') {
+      data.change_password = formData[key]
+    } else if (formData[key] !== user.value[key]) {
+      data[key] = formData[key]
     }
-  },
+  })
 
-  computed: mapGetters(['user', 'domainsAsChoices', 'mainDomain']),
+  if (Object.keys(data).length === 0) {
+    serverErrors.global = [t('error_modify_something')]
+    return
+  }
 
-  validations: {
-    form: {
-      fullname: { required, name },
-      mail: {
-        localPart: { required, email: emailLocalPart },
-      },
-      mailbox_quota: { integer, minValue: minValue(0) },
-      mail_aliases: {
-        $each: {
-          localPart: { required, email: emailLocalPart },
-        },
-      },
-      mail_forward: {
-        $each: { required, emailForward },
-      },
-      change_password: { passwordLenght: minLength(8) },
-      confirmation: { passwordMatch: sameAs('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'].slice() // 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 = ''
-      }
-
-      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.$i18n.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 }
-          : '',
-      )
-      // 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)
-    },
-  },
-
-  mixins: [validationMixin],
-  components: { AdressInputSelect },
-}
+  api
+    .put({
+      uri: `users/${props.name}`,
+      cachePath: `userDetails.${props.name}`,
+      data,
+      humanKey: { key: 'users.update', name: props.name },
+    })
+    .then(() => {
+      router.push({ name: 'user-info', params: { name: props.name } })
+    })
+    .catch(onError)
+})
 </script>
 
+<template>
+  <div>
+    <CardForm
+      v-model="form"
+      icon="user"
+      :fields="fields"
+      :title="$t('user_username_edit', { name })"
+      :validations="v"
+      @submit.prevent="onUserEdit"
+    >
+      <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>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .mail-list {
   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/UserImport.vue b/app/src/views/user/UserImport.vue
index 3f2238d3..c3c410ee 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -1,118 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import api from '@/api'
+import { resetCache } from '@/composables/data'
+import { useForm } from '@/composables/form'
+import { useAutoModal } from '@/composables/useAutoModal'
+import { required } from '@/helpers/validators'
+import { formatForm } from '@/helpers/yunohostArguments'
+import type { FieldProps, FileModelValue, FormFieldDict } from '@/types/form'
+
+const { t } = useI18n()
+const router = useRouter()
+const modalConfirm = useAutoModal()
+
+type Form = typeof form.value
+const form = ref({
+  csvfile: { file: null } as FileModelValue,
+  update: false,
+  delete: false,
+})
+const fields = {
+  csvfile: {
+    component: 'FileItem',
+    label: t('users_import_csv_file'),
+    description: t('users_import_csv_file_desc'),
+    rules: { file: required },
+    cProps: {
+      id: 'csvfile',
+      accept: 'text/csv',
+      placeholder: t('placeholder.file'),
+    },
+  } satisfies FieldProps<'FileItem', Form['csvfile']>,
+
+  update: {
+    label: t('users_import_update'),
+    description: t('users_import_update_desc'),
+    component: 'CheckboxItem',
+    cProps: { id: 'update' },
+  } satisfies FieldProps<'CheckboxItem', Form['update']>,
+
+  delete: {
+    component: 'CheckboxItem',
+    label: t('users_import_delete'),
+    description: t('users_import_delete_desc'),
+    cProps: { id: 'delete' },
+  } satisfies FieldProps<'CheckboxItem', Form['delete']>,
+} satisfies FormFieldDict<Form>
+
+const { v, onSubmit } = useForm(form, fields)
+
+const onUserImport = onSubmit(async (onError) => {
+  if (form.value.delete) {
+    const confirmed = await modalConfirm(
+      t('users_import_confirm_destructive'),
+      { okTitle: t('users_import_delete_others') },
+    )
+    if (!confirmed) return
+  }
+
+  const requestArgs = { ...form.value } as Partial<Form>
+  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.
+      resetCache(['users', 'userDetails', 'groups', 'permissions'])
+      router.push({ name: 'user-list' })
+    })
+    .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>
-
-<script>
-import api from '@/api'
-import { validationMixin } from 'vuelidate'
-
-import { formatFormData } from '@/helpers/yunohostArguments'
-import { required } from '@/helpers/validators'
-
-export default {
-  name: 'UserImport',
-
-  data() {
-    return {
-      form: {
-        csvfile: { file: null },
-        update: false,
-        delete: false,
-      },
-
-      serverError: '',
-
-      fields: {
-        csvfile: {
-          label: this.$i18n.t('users_import_csv_file'),
-          description: this.$i18n.t('users_import_csv_file_desc'),
-          component: 'FileItem',
-          props: {
-            id: 'csvfile',
-            accept: 'text/csv',
-            placeholder: this.$i18n.t('placeholder.file'),
-          },
-        },
-
-        update: {
-          label: this.$i18n.t('users_import_update'),
-          description: this.$i18n.t('users_import_update_desc'),
-          component: 'CheckboxItem',
-          props: {
-            id: 'update',
-          },
-        },
-
-        delete: {
-          label: this.$i18n.t('users_import_delete'),
-          description: this.$i18n.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.$askConfirmation(
-          this.$i18n.t('users_import_confirm_destructive'),
-          { okTitle: this.$i18n.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
-        })
-    },
-  },
-
-  mixins: [validationMixin],
-}
-</script>
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index 2929cfd4..f40d6c3e 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -1,6 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import api from '@/api'
+import { useUsersAndGroups } from '@/composables/data'
+
+const props = defineProps<{ name: string }>()
+
+const router = useRouter()
+
+await api.get({
+  uri: `users/${props.name}`,
+  cachePath: `userDetails.${props.name}`,
+})
+
+const { user } = useUsersAndGroups(() => props.name)
+const purge = ref(false)
+
+function deleteUser() {
+  const data = purge.value ? { purge: '' } : {}
+  api
+    .delete({
+      uri: `users/${props.name}`,
+      cachePath: `userDetails.${props.name}`,
+      data,
+      humanKey: { 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">
+  <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" />
 
@@ -9,14 +43,14 @@
             <BCol>
               <strong>{{ $t('user_username') }}</strong>
             </BCol>
-            <BCol>{{ user.username }}</BCol>
+            <BCol>{{ name }}</BCol>
           </BRow>
 
           <BRow>
             <BCol>
               <strong>{{ $t('user_email') }}</strong>
             </BCol>
-            <BCol class="font-italic">
+            <BCol class="fst-italic">
               {{ user.mail }}
             </BCol>
           </BRow>
@@ -63,11 +97,11 @@
 
       <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'">
@@ -80,15 +114,14 @@
     <BModal
       v-if="user"
       id="delete-modal"
-      :title="$t('confirm_delete', { name: user.username })"
+      centered
+      :title="$t('confirm_delete', { name })"
+      header-variant="warning"
       @ok="deleteUser"
-      header-bg-variant="warning"
-      body-class=""
-      body-bg-variant=""
     >
       <BFormGroup>
         <BFormCheckbox v-model="purge">
-          {{ $t('purge_user_data_checkbox', { name: user.username }) }}
+          {{ $t('purge_user_data_checkbox', { name }) }}
         </BFormCheckbox>
 
         <template #description>
@@ -99,51 +132,9 @@
         </template>
       </BFormGroup>
     </BModal>
-  </ViewBase>
+  </div>
 </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 4fd56f4c..40e7e5cf 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -1,11 +1,29 @@
+<script setup lang="ts">
+import api from '@/api'
+import { useUsersAndGroups } from '@/composables/data'
+import { useInfos } from '@/composables/useInfos'
+import { useSearch } from '@/composables/useSearch'
+
+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(
+  users,
+  (s, user) =>
+    user.username.toLowerCase().includes(s) || user.groups.includes(s),
+)
+
+function downloadExport() {
+  const { host } = useInfos()
+  window.open(`https://${host.value}/yunohost/api/users/export`, '_blank')
+}
+</script>
+
 <template>
-  <ViewSearch
-    :search.sync="search"
-    :items="users"
-    :filtered-items="filteredUsers"
-    items-name="users"
-    :queries="queries"
-  >
+  <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') }}
@@ -31,67 +49,14 @@
     </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 pr-0"
-      >
-        <div>
-          <h5 class="font-weight-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 ml-auto" />
-      </BListGroupItem>
+        :label="user.username"
+        :sublabel="user.fullname"
+        :description="user.mail"
+      />
     </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>
diff --git a/app/tsconfig.json b/app/tsconfig.json
new file mode 100644
index 00000000..d2a0565f
--- /dev/null
+++ b/app/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "noErrorTruncation": true,
+    "lib": ["es2021", "dom"],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["vite/client"]
+  }
+}
diff --git a/app/vite.config.js b/app/vite.config.js
deleted file mode 100644
index ec1ead65..00000000
--- a/app/vite.config.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import { fileURLToPath, URL } from 'url'
-import { defineConfig, loadEnv } from 'vite'
-import fs from 'fs'
-import vue from '@vitejs/plugin-vue2'
-
-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.
-  const env = loadEnv(mode, process.cwd())
-
-  const config = {
-    define: {
-      // fake process.env for some deps
-      'process.env': {},
-    },
-    resolve: {
-      alias: [
-        // this is required for the SCSS modules imports with `~` (node_modules)
-        { find: /^~(.*)$/, replacement: '$1' },
-        {
-          find: '@',
-          replacement: fileURLToPath(new URL('./src', import.meta.url)),
-        },
-      ],
-    },
-    css: {
-      preprocessorOptions: {
-        scss: {
-          // To auto inject scss variables into componentns scope
-          additionalData: `
-            @import "@/scss/_variables.scss";
-          `,
-        },
-      },
-    },
-    plugins: [vue()],
-    build: {
-      rollupOptions: {
-        output: {
-          manualChunks: (id) => {
-            // Circular import problems, this will merge vue/vuex/etc. and api together
-            if (!id.includes('node_modules') && id.includes('api/')) {
-              return 'core'
-            }
-          },
-        },
-      },
-    },
-  }
-
-  if (mode === 'production') {
-    return {
-      ...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,
-          },
-        },
-      },
-    }
-  }
-})
diff --git a/app/vite.config.ts b/app/vite.config.ts
new file mode 100644
index 00000000..96e644a4
--- /dev/null
+++ b/app/vite.config.ts
@@ -0,0 +1,125 @@
+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 'bootstrap-vue-next'
+
+import supportedLocales from './src/i18n/supportedLocales'
+
+const supportedDatefnsLocales = Object.entries(supportedLocales).map(
+  ([locale, { dateFnsLocale }]) => {
+    return dateFnsLocale || locale
+  },
+)
+
+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())
+
+  const config = {
+    define: {
+      // fake process.env for some deps
+      'process.env': {},
+    },
+    resolve: {
+      alias: [
+        // this is required for the SCSS modules imports with `~` (node_modules)
+        {
+          find: /^~(.*)$/,
+          replacement: fileURLToPath(
+            new URL('./node_modules/$1', import.meta.url),
+          ),
+        },
+        {
+          find: '@',
+          replacement: fileURLToPath(new URL('./src', import.meta.url)),
+        },
+      ],
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          // To auto inject scss variables into componentns scope
+          additionalData: `
+            @import "@/scss/_variables.scss";
+          `,
+        },
+      },
+    },
+    plugins: [
+      createVuePlugin(),
+      Components({
+        resolvers: [BootstrapVueNextResolver()],
+      }),
+    ],
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: (id: string) => {
+            // Circular import problems, this will merge core deps and api together
+            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\/locale\/([\w-]+)\/.*\.mjs/.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'
+              }
+            }
+          },
+        },
+      },
+    },
+  }
+
+  if (mode === 'production') {
+    return {
+      ...config,
+      base: '/yunohost/admin',
+    }
+  }
+  // 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,
+        },
+      },
+    },
+  }
+})
diff --git a/app/yarn.lock b/app/yarn.lock
index 800c7a22..92bebd35 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -2,132 +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.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/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/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/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==
+"@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:
-    regenerator-runtime "^0.14.0"
+    "@babel/types" "^7.25.2"
 
-"@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==
+"@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/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/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-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/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/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/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/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/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/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/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/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/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/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/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/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/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-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-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-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-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-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-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-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-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-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-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-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-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-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/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/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/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/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/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/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/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/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/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/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/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-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==
+"@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"
@@ -136,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"
@@ -161,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@^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==
+"@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/firago@^4.5.3":
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/@fontsource/firago/-/firago-4.5.3.tgz#ba0c15105b20e161b7a31675697865851fc6175a"
-  integrity sha512-Kn6FBi6MGNPYwzVKUtgyWGUj0zV18El263ieZi8A7TM2LPKsfzON5ENeKfjyTKfYErkjg9ktwiNP3SLsEOSBNQ==
+"@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"
@@ -186,9 +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.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.14.0"
+    "@intlify/shared" "9.14.0"
+
+"@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.14.0"
+    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==
+
+"@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"
@@ -198,12 +243,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,50 +256,398 @@
     "@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.1.0":
+  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.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"
+  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/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-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.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-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==
+"@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.5"
-    postcss "^8.4.14"
-    source-map "^0.6.1"
-  optionalDependencies:
-    prettier "^1.18.2 || ^2.0.0"
+    "@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==
+
+"@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:
+    "@volar/language-core" "2.4.0"
+    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==
+  dependencies:
+    "@babel/parser" "^7.24.7"
+    "@vue/shared" "3.4.38"
+    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==
+  dependencies:
+    "@vue/compiler-core" "3.4.38"
+    "@vue/shared" "3.4.38"
+
+"@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.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.38"
+
+"@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.38"
+    "@vue/shared" "3.4.38"
+
+"@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/reactivity" "3.4.38"
+    "@vue/runtime-core" "3.4.38"
+    "@vue/shared" "3.4.38"
+    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==
+  dependencies:
+    "@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/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"
+  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@^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" "11.0.1"
+    "@vueuse/shared" "11.0.1"
+    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/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.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.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"
@@ -266,23 +659,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"
@@ -303,36 +684,35 @@ 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"
   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==
-  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"
+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@^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,24 +722,26 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-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==
+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:
-    fill-range "^7.0.1"
+    balanced-match "^1.0.0"
+
+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.1.1"
 
 callsites@^3.0.0:
   version "3.1.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 +749,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.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 +764,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,25 +771,30 @@ 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==
+
+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==
 
-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==
+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"
@@ -439,35 +810,40 @@ 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.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"
 
-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"
   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"
@@ -475,38 +851,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.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/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.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"
@@ -518,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.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.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:
@@ -552,7 +930,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==
@@ -606,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"
 
@@ -624,6 +1002,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 +1022,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.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==
+  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"
@@ -663,20 +1057,13 @@ 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"
 
-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 +1096,23 @@ 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==
-
 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 +1120,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"
@@ -750,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"
@@ -767,15 +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==
 
-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==
+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, 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"
@@ -815,11 +1214,6 @@ is-extglob@^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 +1273,13 @@ 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==
+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:
-    p-locate "^3.0.0"
-    path-exists "^3.0.0"
+    mlly "^1.4.2"
+    pkg-types "^1.0.3"
 
 locate-path@^6.0.0:
   version "6.0.0"
@@ -904,12 +1298,25 @@ 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==
+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:
-    yallist "^4.0.0"
+    "@jridgewell/sourcemap-codec" "^1.5.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.7"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.7.tgz#33e8190d9fe474a9895525f5618eee136d46c2e5"
+  integrity sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
 
 minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
@@ -918,11 +1325,33 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+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"
@@ -933,13 +1362,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"
@@ -960,23 +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"
-
-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"
+    word-wrap "^1.2.5"
 
 p-limit@^3.0.2:
   version "3.1.0"
@@ -985,13 +1400,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 +1407,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,10 +1414,10 @@ 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-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"
@@ -1031,42 +1434,51 @@ path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-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==
+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==
 
-picomatch@^2.0.4, picomatch@^2.2.1:
+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==
 
-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==
+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.15"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535"
-  integrity sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==
+  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.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.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"
-    source-map-js "^1.0.2"
+    picocolors "^1.0.1"
+    source-map-js "^1.2.0"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -1080,15 +1492,10 @@ 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"
-  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"
@@ -1107,21 +1514,6 @@ 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"
@@ -1139,11 +1531,29 @@ 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.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.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:
@@ -1153,26 +1563,19 @@ 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.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"
-
-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==
+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"
@@ -1186,12 +1589,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 +1603,15 @@ 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==
+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@^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,10 +1632,10 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-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"
@@ -1258,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"
@@ -1265,15 +1657,15 @@ 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==
+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"
@@ -1287,6 +1679,42 @@ 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==
+
+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:
+    "@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.2"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -1299,21 +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@^4.5.3:
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.3.tgz#d88a4529ea58bae97294c7e2e6f0eab39a50fb1a"
-  integrity sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==
-  dependencies:
-    esbuild "^0.18.10"
-    postcss "^8.4.27"
-    rollup "^3.27.1"
-  optionalDependencies:
-    fsevents "~2.3.2"
+uuid@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
+  integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==
 
-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==
+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.21.3"
+    postcss "^8.4.41"
+    rollup "^4.20.0"
+  optionalDependencies:
+    fsevents "~2.3.3"
+
+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.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"
@@ -1323,63 +1771,60 @@ 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.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:
-    showdown "^1.9.0"
+    "@intlify/core-base" "9.14.0"
+    "@intlify/shared" "9.14.0"
+    "@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.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/compiler-sfc" "2.7.16"
-    csstype "^3.1.0"
+    "@vue/devtools-api" "^6.6.3"
 
-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==
-
-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==
-
-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==
+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:
-    tr46 "~0.0.3"
-    webidl-conversions "^3.0.0"
+    "@types/showdown" "^2.0.1"
+    showdown "^2.1.0"
+    vue "^3.3.4"
 
-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==
+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:
+    "@volar/typescript" "~2.4.0-alpha.18"
+    "@vue/language-core" "2.0.29"
+    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==
+
+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"
@@ -1388,14 +1833,10 @@ 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"
+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"
@@ -1407,41 +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==
 
-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"