From fdd8f8850d6f39e797779c7faaaca56bf433dfff Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sun, 13 Apr 2025 20:32:13 +0200
Subject: [PATCH] add user settings

---
 lib/Controller/AdminSettingController.php     |   8 +-
 lib/Controller/PersonalSettingController.php  |  78 ++++--
 src/admin.js                                  |   2 +-
 src/components/settings/AdminSaveButton.vue   |  90 ++++++
 src/components/settings/TableLabel.vue        |  11 +-
 src/components/settings/TableRow.vue          |  21 +-
 src/components/settings/UserSaveButton.vue    |  97 +++++++
 .../settings/form/FormAppPicker.vue           |   2 +-
 src/components/settings/form/FormAppSort.vue  |   2 +-
 src/components/settings/form/FormCatSort.vue  |   5 +-
 src/menus/SimpleSideMenu.vue                  |   4 +
 src/pages/AdminSettings.vue                   |  60 ++--
 src/pages/UserSettings.vue                    | 171 +++++++++++
 src/scss/admin.scss                           |  24 +-
 src/scss/menu.scss                            |   5 -
 src/store/config.js                           |  28 +-
 src/user.js                                   |  32 +++
 templates/settings/personal-form.php          | 249 +---------------
 templates/settings/personal-form.php.bk       | 265 ++++++++++++++++++
 webpack.config.js                             |   1 +
 20 files changed, 839 insertions(+), 316 deletions(-)
 create mode 100644 src/components/settings/AdminSaveButton.vue
 create mode 100644 src/components/settings/UserSaveButton.vue
 create mode 100644 src/pages/UserSettings.vue
 create mode 100644 src/user.js
 create mode 100644 templates/settings/personal-form.php.bk

diff --git a/lib/Controller/AdminSettingController.php b/lib/Controller/AdminSettingController.php
index a70b0f3..e9ba8f9 100644
--- a/lib/Controller/AdminSettingController.php
+++ b/lib/Controller/AdminSettingController.php
@@ -98,7 +98,6 @@ class AdminSettingController extends Controller
             'add-logo-link',
             'show-settings',
             'loader-enabled',
-            'top-menu-mouse-over-hidden-label',
             'always-displayed',
             'enabled',
             'force',
@@ -139,7 +138,6 @@ class AdminSettingController extends Controller
             'add-logo-link' => '1',
             'show-settings' => '0',
             'loader-enabled' => '1',
-            'top-menu-mouse-over-hidden-label' => '0',
             'always-displayed' => '0',
             'enabled' => '1',
             'force' => '0',
@@ -207,6 +205,12 @@ class AdminSettingController extends Controller
             }
         }
 
+        foreach ($defaults as $key => $default) {
+            if (!array_key_exists($key, $config)) {
+                $config[$key] = $default;
+            }
+        }
+
         $config['langs'] = $this->langRepository->getUsedLangs();
 
         return new JSONResponse($config);
diff --git a/lib/Controller/PersonalSettingController.php b/lib/Controller/PersonalSettingController.php
index e7d00c7..9b63576 100644
--- a/lib/Controller/PersonalSettingController.php
+++ b/lib/Controller/PersonalSettingController.php
@@ -25,6 +25,7 @@ use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\Attribute\FrontpageRoute;
 use OCP\AppFramework\Http\Attribute\NoAdminRequired;
 use OCP\AppFramework\Http\Attribute\NoCSRFRequired;
+use OCP\AppFramework\Http\JSONResponse;
 use OCP\IConfig;
 use OCP\IRequest;
 use OCP\IUserSession;
@@ -43,7 +44,7 @@ class PersonalSettingController extends Controller
 
     #[NoCSRFRequired]
     #[NoAdminRequired]
-    #[FrontpageRoute(verb: 'POST', url: '/personalSetting/valueSet')]
+    #[FrontpageRoute(verb: 'POST', url: '/user/valueSet')]
     public function valueSet($name, $value): array
     {
         $doSave = false;
@@ -65,22 +66,7 @@ class PersonalSettingController extends Controller
             }
         }
 
-        if ('target-blank-apps' === $name) {
-            $doSave = true;
-            $data = json_decode($value, true);
-
-            if (!is_array($data)) {
-                $doSave = false;
-            } else {
-                foreach ($data as $v) {
-                    if (!is_string($v)) {
-                        $doSave = false;
-                    }
-                }
-            }
-        }
-
-        if (in_array($name, ['top-menu-apps', 'top-side-menu-apps', 'apps-order'])) {
+        if (in_array($name, ['target-blank-apps', 'top-menu-apps', 'top-side-menu-apps', 'apps-order'])) {
             $doSave = true;
             $data = json_decode($value, true);
 
@@ -110,4 +96,62 @@ class PersonalSettingController extends Controller
 
         return [];
     }
+
+    #[NoCSRFRequired]
+    #[FrontpageRoute(verb: 'GET', url: '/user/config')]
+    public function configuration(): JSONResponse
+    {
+        $user = $this->userSession->getUser();
+        $keys = $this->config->getUserKeys($user->getUid(), Application::APP_ID);
+
+        $booleans = [
+            'enabled',
+        ];
+
+        $arrays = [
+            'apps-order',
+            'target-blank-apps',
+            'top-menu-apps',
+            'top-side-menu-apps',
+        ];
+
+        $integers = [
+            'target-blank-mode',
+        ];
+
+        $defaults = [
+            'enabled' => '1',
+            'target-blank-mode' => '1',
+            'apps-order' => '[]',
+            'target-blank-apps' => '[]',
+            'top-menu-apps' => '[]',
+            'top-side-menu-apps' => '[]',
+        ];
+
+        $config = [];
+
+        foreach ($keys as $key) {
+            if (!isset($defaults[$key])) {
+                continue;
+            }
+
+            if (in_array($key, $booleans)) {
+                $config[$key] = $this->configProxy->getUserValueBool($user, $key, $defaults[$key]);
+            } elseif (in_array($key, $arrays)) {
+                $config[$key] = $this->configProxy->getUserValueArray($user, $key, $defaults[$key]);
+            } elseif (in_array($key, $integers)) {
+                $config[$key] = $this->configProxy->getUserValueInt($user, $key, $defaults[$key]);
+            } else {
+                $config[$key] = $this->configProxy->getUserValue($user, $key, $defaults[$key]);
+            }
+        }
+
+        foreach ($defaults as $key => $default) {
+            if (!array_key_exists($key, $config)) {
+                $config[$key] = $default;
+            }
+        }
+
+        return new JSONResponse($config);
+    }
 }
diff --git a/src/admin.js b/src/admin.js
index 1749f6f..06cdbe5 100644
--- a/src/admin.js
+++ b/src/admin.js
@@ -21,7 +21,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { waitContainer } from './lib/dom.js'
 
-import AdminSettings from './pages/AdminSettings.vue'
+import AdminSettings from './pages/AdminSettings'
 
 waitContainer('#side-menu-admin-settings').then((selector) => {
   const pinia = createPinia()
diff --git a/src/components/settings/AdminSaveButton.vue b/src/components/settings/AdminSaveButton.vue
new file mode 100644
index 0000000..6209dce
--- /dev/null
+++ b/src/components/settings/AdminSaveButton.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="side-menu-setting-save">
+    <NcButton
+      variant="success"
+      @click="save"
+      >
+        <template v-if="!loading">
+          {{ t('side_menu', 'Save') }}
+        </template>
+        <NcLoadingIcon v-else />
+    </NcButton>
+
+    <div v-if="error" id="error">
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#error {
+  padding-top: 10px;
+  color: red;
+}
+</style>
+
+<script setup>
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import { ref } from 'vue'
+
+const loading = ref(false)
+const error = ref(null)
+const { config } = defineProps({
+  config: {
+    type: Object,
+    required: true,
+  },
+})
+
+const filterConfig = (value) => {
+  const result = {}
+
+  for (let key in value) {
+    if (['cache-categories', 'cache', 'langs', 'enabled'].includes(key) === false) {
+      result[key] = value[key]
+    }
+  }
+
+  return result
+}
+
+const save = async () => {
+  const data = filterConfig(config)
+  const size = Object.keys(data).length
+  let counter = 0
+
+  loading.value = true
+  error.value = null
+
+  const update = () => {
+    ++counter;
+
+    if (counter === size) {
+      loading.value = false
+
+      if (!error.value) {
+        location.reload()
+      }
+    }
+  }
+
+  for (let key in data) {
+    let value = data[key]
+
+    if (Array.isArray(value) || typeof(value) === 'object') {
+      value = JSON.stringify(value)
+    } else if (typeof(value) === 'boolean') {
+      value = value ? 1 : 0
+    }
+
+    OCP.AppConfig.setValue('side_menu', key, value, {
+      success() {
+        update()
+      },
+      error() {
+        error.value = `Error while saving ${key}`
+        update()
+      }
+    })
+  }
+}
+</script>
diff --git a/src/components/settings/TableLabel.vue b/src/components/settings/TableLabel.vue
index 2c3a215..e808fa1 100644
--- a/src/components/settings/TableLabel.vue
+++ b/src/components/settings/TableLabel.vue
@@ -27,7 +27,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
     <template v-if="help">
       <br />
-      <em>{{ help }}</em>
+      <em>{{ t('side_menu', help) }}</em>
+    </template>
+    <template v-if="help2">
+      <br />
+      <em>{{ t('side_menu', help2) }}</em>
     </template>
   </div>
 </template>
@@ -58,5 +62,10 @@ const { short, label } = defineProps({
     required: false,
     default: null,
   },
+  help2: {
+    type: [String, null],
+    required: false,
+    default: null,
+  },
 })
 </script>
diff --git a/src/components/settings/TableRow.vue b/src/components/settings/TableRow.vue
index ac757fc..06c77fa 100644
--- a/src/components/settings/TableRow.vue
+++ b/src/components/settings/TableRow.vue
@@ -15,7 +15,26 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div class="side-menu-setting-row">
+  <div
+    class="side-menu-setting-row"
+    :class="{'side-menu-setting-row--disabled': disabled }"
+  >
     <slot></slot>
   </div>
 </template>
+
+<style scoped>
+.disabled {
+  display: block;
+}
+</style>
+
+<script setup>
+const { disabled } = defineProps({
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
+})
+</script>
diff --git a/src/components/settings/UserSaveButton.vue b/src/components/settings/UserSaveButton.vue
new file mode 100644
index 0000000..7e764d7
--- /dev/null
+++ b/src/components/settings/UserSaveButton.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="side-menu-setting-save">
+    <NcButton
+      variant="success"
+      @click="save"
+      >
+        <template v-if="!loading">
+          {{ t('side_menu', 'Save') }}
+        </template>
+        <NcLoadingIcon v-else />
+    </NcButton>
+
+    <div v-if="error" id="error">
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#error {
+  padding-top: 10px;
+  color: red;
+}
+</style>
+
+<script setup>
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import { ref } from 'vue'
+
+const loading = ref(false)
+const error = ref(null)
+const { config } = defineProps({
+  config: {
+    type: Object,
+    required: true,
+  },
+})
+
+const filterConfig = (value) => {
+  const result = {}
+
+  for (let key in value) {
+    result[key] = value[key]
+  }
+
+  return result
+}
+
+const save = async () => {
+  const data = filterConfig(config)
+  const size = Object.keys(data).length
+  const url = OC.generateUrl('/apps/side_menu/user/valueSet')
+
+  let counter = 0
+
+  loading.value = true
+  error.value = null
+
+  const update = () => {
+    ++counter;
+
+    if (counter === size) {
+      loading.value = false
+
+      if (!error.value) {
+        location.reload()
+      }
+    }
+  }
+
+  for (let key in data) {
+    let value = data[key]
+    let formData = []
+
+    if (Array.isArray(value) || typeof(value) === 'object') {
+      value = JSON.stringify(value)
+    } else if (typeof(value) === 'boolean') {
+      value = value ? 1 : 0
+    }
+
+    formData.push('name=' + encodeURIComponent(key))
+    formData.push('value=' + encodeURIComponent(value))
+
+    fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: formData.join('&'),
+    })
+      .then(update)
+      .catch(() => {
+        error.value = `Error while saving ${key}`
+        update()
+      })
+  }
+}
+</script>
diff --git a/src/components/settings/form/FormAppPicker.vue b/src/components/settings/form/FormAppPicker.vue
index ae18aaa..8cda708 100644
--- a/src/components/settings/form/FormAppPicker.vue
+++ b/src/components/settings/form/FormAppPicker.vue
@@ -74,7 +74,7 @@ const closeModal = () => {
 }
 
 onMounted(async () => {
-  apps.value = await navStore.getApps()
+  apps.value = await navStore.getCoreApps()
 })
 </script>
 
diff --git a/src/components/settings/form/FormAppSort.vue b/src/components/settings/form/FormAppSort.vue
index 3d2a3ed..9429c82 100644
--- a/src/components/settings/form/FormAppSort.vue
+++ b/src/components/settings/form/FormAppSort.vue
@@ -104,7 +104,7 @@ const update = () => {
 }
 
 onMounted(async () => {
-  const items = await navStore.getApps()
+  const items = await navStore.getCoreApps()
 
   window.setTimeout(() => {
     setApps(items)
diff --git a/src/components/settings/form/FormCatSort.vue b/src/components/settings/form/FormCatSort.vue
index ded9f04..4d92650 100644
--- a/src/components/settings/form/FormCatSort.vue
+++ b/src/components/settings/form/FormCatSort.vue
@@ -35,10 +35,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         @end="update"
       >
         <template #item="{ element }">
-          <div class="draggable">
+          <div class="draggable" v-if="element.name !== ''">
             <span class="arrow">⇅</span>
-            <span v-if="element.name !== ''">{{ element.name }}</span>
-            <span v-else>{{ t('side_menu', 'Other') }}</span>
+            {{ element.name }}
           </div>
         </template>
       </draggable>
diff --git a/src/menus/SimpleSideMenu.vue b/src/menus/SimpleSideMenu.vue
index 793c321..d1b58f7 100644
--- a/src/menus/SimpleSideMenu.vue
+++ b/src/menus/SimpleSideMenu.vue
@@ -123,6 +123,8 @@ watch(
 function getFiltredAndSortedApps(items, order, topMenuApps, topSideMenuApps) {
   const data = []
 
+  console.log(order)
+
   items.forEach((item) => {
     if (topMenuApps.includes(item.id) && !topSideMenuApps.includes(item.id)) {
       return
@@ -139,6 +141,8 @@ function getFiltredAndSortedApps(items, order, topMenuApps, topSideMenuApps) {
     data.push(item)
   })
 
+  console.log(data)
+
   return data.sort((a, b) => {
     return a.order < b.order ? -1 : 1
   })
diff --git a/src/pages/AdminSettings.vue b/src/pages/AdminSettings.vue
index c0d9898..f2b31a5 100644
--- a/src/pages/AdminSettings.vue
+++ b/src/pages/AdminSettings.vue
@@ -46,7 +46,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             />
           </TableValue>
         </TableRow>
-        <TableRow>
+        <TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
           <TableLabel
             label="Display the logo"
             :middle="true"
@@ -55,7 +55,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <FormYesNo v-model="config['display-logo']" />
           </TableValue>
         </TableRow>
-        <TableRow>
+        <TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
           <TableLabel
             label="Use the avatar instead of the logo"
             :middle="true"
@@ -64,7 +64,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <FormYesNo v-model="config['use-avatar']" />
           </TableValue>
         </TableRow>
-        <TableRow>
+        <TableRow :disabled="config['big-menu'] || config['always-displayed'] || config['side-with-categories']">
           <TableLabel
             label="The logo is a link to the default app"
             :middle="true"
@@ -100,6 +100,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <FormSize v-model="config['size-text']" />
           </TableValue>
         </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
 
       <TableContainer :class="sectionClass('topMenu')">
@@ -143,6 +144,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             />
           </TableValue>
         </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
 
       <TableContainer :class="sectionClass('apps')">
@@ -175,12 +177,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <FormAppSort v-model="config['apps-order']" />
           </TableValue>
         </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
 
       <TableContainer :class="sectionClass('cats')">
         <SectionTitle label="Categories" />
 
-        <TableRow>
+        <TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
           <TableLabel
             label="Order by"
             :middle="true"
@@ -190,13 +193,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
               v-model="config['categories-order-type']"
               :options="[
                 { id: 'default', label: 'Name' },
-                { id: 'custom', label: 'Customed' },
+                { id: 'custom', label: 'Custom' },
               ]"
             />
           </TableValue>
         </TableRow>
-
-        <TableRow>
+        <TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
+          <TableLabel
+            label="Customize sorting"
+            :middle="true"
+          />
+          <TableValue>
+            <FormCatSort v-model="config['categories-order']" />
+          </TableValue>
+        </TableRow>
+        <TableRow :disabled="!(config['big-menu'] || config['always-displayed'] || config['side-with-categories'])">
           <TableLabel
             label="Customize application categories"
             :top="true"
@@ -213,15 +224,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           </TableValue>
         </TableRow>
 
-        <TableRow>
-          <TableLabel
-            label="Customize sorting"
-            :middle="true"
-          />
-          <TableValue>
-            <FormCatSort v-model="config['categories-order']" />
-          </TableValue>
-        </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
 
       <TableContainer :class="sectionClass('opener')">
@@ -272,13 +275,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <TableRow>
           <TableLabel
             label="Open the menu when the mouse is hover the opener (automatically disabled on touch screens)"
-            help="This is the automatic behavior when the menu is always displayed."
             :middle="true"
           />
           <TableValue>
             <FormYesNo v-model="config['opener-hover']" />
           </TableValue>
         </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
 
       <TableContainer :class="sectionClass('colors')">
@@ -415,9 +418,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             />
           </TableValue>
         </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
 
       <TableContainer :class="sectionClass('global')">
+        <p class="side-menu-tips">
+            <em>{{ t('side_menu', 'Use the shortcut Ctrl+o to open and to hide the side menu. Use tab key to navigate.') }}</em>
+        </p>
+
         <SectionTitle label="Global" />
 
         <TableRow>
@@ -450,6 +458,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <FormYesNo v-model="config['loader-enabled']" />
           </TableValue>
         </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
 
       <TableContainer :class="sectionClass('support')">
@@ -557,6 +566,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             </NcModal>
           </TableValue>
         </TableRow>
+        <AdminSaveButton :config="config" />
       </TableContainer>
     </NcAppContent>
   </NcContent>
@@ -572,6 +582,7 @@ import TableRow from '../components/settings/TableRow'
 import TableLabel from '../components/settings/TableLabel'
 import TableValue from '../components/settings/TableValue'
 import SectionTitle from '../components/settings/SectionTitle'
+import AdminSaveButton from '../components/settings/AdminSaveButton'
 import FormRange from '../components/settings/form/FormRange'
 import FormColorPicker from '../components/settings/form/FormColorPicker'
 import FormOpener from '../components/settings/form/FormOpener'
@@ -587,11 +598,11 @@ import FormAppCategory from '../components/settings/form/FormAppCategory'
 const menu = [
   { label: 'Global', section: 'global' },
   { label: 'Panel', section: 'panel' },
-  { label: 'Top menu', section: 'topMenu' },
   { label: 'Colors', section: 'colors' },
   { label: 'Opener', section: 'opener' },
   { label: 'Applications', section: 'apps' },
   { label: 'Categories', section: 'cats' },
+  { label: 'Top menu', section: 'topMenu' },
   { label: 'Support', section: 'support' },
 ]
 
@@ -599,9 +610,11 @@ const config = ref(null)
 const showConfig = ref(false)
 const configCopied = ref(false)
 const configStore = useConfigStore()
-const section = ref(menu[0].section)
+const section = ref(null)
 
 const setSection = (value) => {
+  sessionStorage.setItem('side_menu_section', value)
+
   section.value = value
 }
 
@@ -629,7 +642,7 @@ const filterConfig = (value) => {
   const result = {}
 
   for (let key in value) {
-    if (['cache-categories', 'cache'].includes(key) === false) {
+    if (['cache-categories', 'cache', 'langs', 'enabled'].includes(key) === false) {
       result[key] = value[key]
     }
   }
@@ -639,6 +652,8 @@ const filterConfig = (value) => {
 
 onMounted(async () => {
   config.value = await configStore.getAppConfig()
+
+  setSection(sessionStorage.getItem('side_menu_section') ?? menu[0].section)
 })
 </script>
 
@@ -670,4 +685,9 @@ onMounted(async () => {
   display: inline-block;
   margin-right: 5px;
 }
+
+.save {
+  display: block;
+  float: right
+}
 </style>
diff --git a/src/pages/UserSettings.vue b/src/pages/UserSettings.vue
new file mode 100644
index 0000000..987979a
--- /dev/null
+++ b/src/pages/UserSettings.vue
@@ -0,0 +1,171 @@
+<!--
+@license GNU AGPL version 3 or any later version
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+<template>
+  <NcContent
+    v-if="config"
+    app-name="side_menu"
+  >
+    <NcAppContent class="side-menu-setting-app" v-if="config['force']">
+      <TableContainer>
+        <TableLabel label="You do not have permission to change the settings." />
+      </TableContainer>
+    </NcAppContent>
+    <NcAppContent v-else class="side-menu-setting-app side-menu-setting-app--user">
+      <TableContainer>
+        <SectionTitle label="Menu" />
+
+        <TableRow>
+          <TableLabel
+            label="Enable the custom menu"
+            :middle="true"
+          />
+          <TableValue>
+            <FormYesNo v-model="config['enabled']" />
+          </TableValue>
+        </TableRow>
+        <TableRow>
+          <TableLabel
+            label="Applications kept in the top menu"
+            help="If there is no selection then the global configuration is applied."
+            :middle="true"
+          />
+          <TableValue>
+            <FormAppPicker v-model="config['top-menu-apps']" />
+          </TableValue>
+        </TableRow>
+        <TableRow>
+          <TableLabel
+            label="Applications kept in the top menu but also shown in side menu"
+            help="These applications must be selected in the previous option."
+            help2="If there is no selection then the global configuration is applied"
+            :middle="true"
+          />
+          <TableValue>
+            <FormAppPicker v-model="config['top-side-menu-apps']" />
+          </TableValue>
+        </TableRow>
+        <TableRow>
+          <TableLabel
+            label="Open apps in new tab"
+            :middle="true"
+          />
+          <TableValue>
+            <FormSelect v-model="config['target-blank-mode']" :options="[
+              {id: 1, label: 'Use the global setting'},
+              {id: 2, label: 'Use my selection'},
+            ]" />
+            <FormAppPicker v-if="config['target-blank-mode'] === 2" v-model="config['target-blank-apps']" />
+          </TableValue>
+        </TableRow>
+        <TableRow>
+          <TableLabel
+            label="Customize sorting"
+            :top="true"
+          />
+          <TableValue>
+            <FormAppSort v-model="config['apps-order']" />
+          </TableValue>
+        </TableRow>
+      </TableContainer>
+
+       <TableContainer>
+        <SectionTitle label="Support" />
+
+        <TableRow>
+          <TableLabel
+            label="You like this app and you want to support me?"
+            :middle="true"
+          />
+          <TableValue>
+            <a
+              target="_blank"
+              href="https://www.buymeacoffee.com/deblan"
+              rel="noopener"
+            >
+              <NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton>
+            </a>
+          </TableValue>
+        </TableRow>
+
+        <UserSaveButton :config="config" />
+      </TableContainer>
+    </NcAppContent>
+  </NcContent>
+</template>
+
+<script setup>
+import { NcContent, NcAppContent, NcButton } from '@nextcloud/vue'
+import { ref, onMounted } from 'vue'
+import { useConfigStore } from '../store/config.js'
+
+import TableContainer from '../components/settings/TableContainer'
+import TableRow from '../components/settings/TableRow'
+import TableLabel from '../components/settings/TableLabel'
+import TableValue from '../components/settings/TableValue'
+import SectionTitle from '../components/settings/SectionTitle'
+import UserSaveButton from '../components/settings/UserSaveButton'
+import FormYesNo from '../components/settings/form/FormYesNo'
+import FormAppPicker from '../components/settings/form/FormAppPicker'
+import FormAppSort from '../components/settings/form/FormAppSort'
+import FormSelect from '../components/settings/form/FormSelect'
+
+const config = ref(null)
+const configStore = useConfigStore()
+
+const trans = (value) => {
+  return t('side_menu', value)
+}
+
+onMounted(async () => {
+  config.value = await configStore.getUserConfig()
+})
+</script>
+
+<style scoped>
+.hidden {
+  display: none;
+}
+
+.button-inline button {
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.config {
+  width: 100%;
+  height: 30vh;
+}
+
+.modal__content {
+  padding: 20px;
+}
+
+.modal__footer {
+  margin-top: 20px;
+  text-align: right;
+}
+
+.modal__footer button {
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.save {
+  display: block;
+  float: right
+}
+</style>
diff --git a/src/scss/admin.scss b/src/scss/admin.scss
index 4438837..8a050d7 100644
--- a/src/scss/admin.scss
+++ b/src/scss/admin.scss
@@ -120,16 +120,10 @@
 .side-menu-setting-row {
   display: table;
   margin-bottom: 10px;
-}
 
-.side-menu-setting-row code {
-  margin-left: 2px;
-  margin-bottom: 1px;
-  padding: 3px 10px;
-  border-radius: 5px;
-  display: inline-block;
-  right: 2px;
-  border: 1px solid var(--color-border-dark);
+  &--disabled {
+    opacity: 0.5;
+  }
 }
 
 .side-menu-setting-label {
@@ -256,6 +250,10 @@
 
 .side-menu-setting-app {
   display: flex;
+
+  &--user {
+    display: block;
+  }
 }
 
 .side-menu-setting {
@@ -264,3 +262,11 @@
   flex-direction: column;
   gap: 6px;
 }
+
+.side-menu-setting-save {
+  margin-top: 30px;
+}
+
+.side-menu-tips {
+  margin-bottom: 15px;
+}
diff --git a/src/scss/menu.scss b/src/scss/menu.scss
index 6d92c24..d362658 100644
--- a/src/scss/menu.scss
+++ b/src/scss/menu.scss
@@ -76,11 +76,6 @@
       padding: 10px 0;
     }
   }
-
-  &.side-menu-big,
-  &.side-menu-with-categories {
-    height: auto;
-  }
 }
 
 #header {
diff --git a/src/store/config.js b/src/store/config.js
index 3454202..744c23d 100644
--- a/src/store/config.js
+++ b/src/store/config.js
@@ -21,31 +21,37 @@ import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 
 export const useConfigStore = defineStore('config', () => {
-  const config = ref(null)
-  const appConfig = ref(null)
+  let config = null
+  let appConfig = null
+  let userConfig = null
 
   async function getConfig() {
-    if (config.value !== null) {
-      return config.value
+    if (config === null) {
+      config = await axios.get(generateUrl('/apps/side_menu/js/config')).then((response) => response.data)
     }
 
-    config.value = await axios.get(generateUrl('/apps/side_menu/js/config')).then((response) => response.data)
-
-    return config.value
+    return config
   }
 
   async function getAppConfig() {
-    if (appConfig.value !== null) {
-      return appConfig.value
+    if (appConfig === null) {
+      appConfig = await axios.get(generateUrl('/apps/side_menu/admin/config')).then((response) => response.data)
     }
 
-    appConfig.value = await axios.get(generateUrl('/apps/side_menu/admin/config')).then((response) => response.data)
+    return appConfig
+  }
 
-    return appConfig.value
+  async function getUserConfig() {
+    if (userConfig === null) {
+      userConfig = await axios.get(generateUrl('/apps/side_menu/user/config')).then((response) => response.data)
+    }
+
+    return userConfig
   }
 
   return {
     getConfig,
     getAppConfig,
+    getUserConfig,
   }
 })
diff --git a/src/user.js b/src/user.js
new file mode 100644
index 0000000..0f4b27a
--- /dev/null
+++ b/src/user.js
@@ -0,0 +1,32 @@
+/**
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import './scss/admin.scss'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { waitContainer } from './lib/dom.js'
+
+import UserSettings from './pages/UserSettings'
+
+waitContainer('#side-menu-user-settings').then((selector) => {
+  const pinia = createPinia()
+  const app = createApp(UserSettings)
+  app.use(pinia)
+  app.mixin({ methods: { t, n } })
+  app.mount(selector)
+})
diff --git a/templates/settings/personal-form.php b/templates/settings/personal-form.php
index 793feec..e2ff8e4 100644
--- a/templates/settings/personal-form.php
+++ b/templates/settings/personal-form.php
@@ -16,250 +16,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-vendor_script('side_menu', 'html5sortable.min');
-script('side_menu', 'admin');
-style('side_menu', 'admin');
+use OCP\IURLGenerator;
+use OCP\IConfig;
+use OCA\SideMenu\AppInfo\Application;
 
-$choicesYesNo = [
-    'No' => '0',
-    'Yes' => '1',
-];
-
-
-$labelShowHideApps = 'Show and hide the list of applications';
-$labelReset = 'Reset to default';
+script('side_menu', 'side_menu-user');
 ?>
-<div id="side-menu-section">
-    <?php if ($_['force']): ?>
-        <div class="section">
-            <h2>
-                <?php p($l->t('Menu')); ?>
-            </h2>
 
-            <p>
-                <em><?php echo $l->t('You do not have permission to change the settings.'); ?></em>
-            </p>
-        </div>
-    <?php else: ?>
-        <div class="section">
-            <p>
-                <em><?php echo $l->t('Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to navigate.'); ?></em>
-            </p>
-
-            <div class="side-menu-setting-table">
-                <div class="side-menu-setting-row">
-                    <div class="side-menu-setting-label">
-                        <?php p($l->t('Enable the custom menu')); ?>
-                    </div>
-                    <div class="side-menu-setting-form">
-                        <select id="side-menu-enabled" name="enabled" class="side-menu-setting" data-personal>
-                            <?php foreach ($choicesYesNo as $label => $value): ?>
-                                <option value="<?php echo $value ?>" <?php if ($value === $_['enabled']): ?>selected<?php endif; ?>>
-                                    <?php echo $l->t($label); ?>
-                                </option>
-                            <?php endforeach; ?>
-                        </select>
-                    </div>
-                </div>
-            </div>
-
-            <div class="side-menu-setting-table">
-                <div class="side-menu-setting-row">
-                    <div class="side-menu-setting-label">
-                        <?php p($l->t('Open apps in new tab')); ?>
-                    </div>
-                    <div class="side-menu-setting-form">
-                        <?php $choices = [
-                            'Use the global setting' => '1',
-                            'Use my selection' => '2',
-                        ]; ?>
-
-                        <select id="side-menu-loader-enabled" name="target-blank-mode" class="side-menu-setting" data-personal>
-                            <?php foreach ($choices as $label => $value): ?>
-                                <option value="<?php echo $value ?>" <?php if ($value === $_['target-blank-mode']): ?>selected<?php endif; ?>>
-                                    <?php echo $l->t($label);  ?>
-                                </option>
-                            <?php endforeach; ?>
-                        </select>
-
-                        <p>
-                            <a class="side-menu-toggler" data-target="#target-blank-apps" href="#_">
-                                🖱️ <?php p($l->t($labelShowHideApps)); ?>
-                            </a>
-                        </p>
-
-                        <div class="side-menu-setting" data-name="target-blank-apps" id="target-blank-apps" data-personal data-checkbox style="display: none">
-                            <ul class="side-menu-setting-list">
-                                <?php foreach ($_['apps'] as $app): ?>
-                                    <li class="side-menu-setting-list-item">
-                                        <input
-                                            type="checkbox"
-                                            name="target-blank-apps[]"
-                                            value="<?php echo $app['id'] ?>"
-                                            id="target-blank-app-<?php echo $app['id'] ?>"
-                                            <?php if (in_array($app['id'], $_['target-blank-apps'])): ?>checked<?php endif; ?>
-                                        />
-
-                                        <label for="target-blank-app-<?php echo $app['id'] ?>">
-                                            <?php echo p($l->t($app['name'])); ?>
-                                        </label>
-                                    </li>
-                                <?php endforeach; ?>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="section">
-            <h2>
-                <?php p($l->t('Top menu')); ?>
-            </h2>
-
-            <div class="side-menu-setting-table">
-                <div class="side-menu-setting-row">
-                    <div class="side-menu-setting-label">
-                        <?php p($l->t('Applications kept in the top menu')); ?>
-                        <p>
-                            <em>
-                                <?php p($l->t('If there is no selection then the global configuration is applied.')); ?>
-                            </em>
-                        </p>
-                    </div>
-                    <div class="side-menu-setting-form">
-                        <p>
-                            <a class="side-menu-toggler" data-target="#top-menu-apps" href="#_">
-                                🖱️ <?php p($l->t($labelShowHideApps)); ?>
-                            </a>
-                        </p>
-
-                        <div class="side-menu-setting" data-name="top-menu-apps" data-checkbox data-personal id="top-menu-apps" style="display: none">
-                            <ul class="side-menu-setting-list">
-                                <?php foreach ($_['apps'] as $app): ?>
-                                    <li class="side-menu-setting-list-item">
-                                        <input
-                                            type="checkbox"
-                                            name="top-menu-apps[]"
-                                            value="<?php echo $app['id'] ?>"
-                                            id="top-menu-app-<?php echo $app['id'] ?>"
-                                            <?php if (in_array($app['id'], $_['top-menu-apps'])): ?>checked<?php endif; ?>
-                                        />
-
-                                        <label for="top-menu-app-<?php echo $app['id'] ?>">
-                                            <?php echo $app['name'] ?>
-                                        </label>
-                                    </li>
-                                <?php endforeach; ?>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="side-menu-setting-table">
-                <div class="side-menu-setting-row">
-                    <div class="side-menu-setting-label">
-                        <?php p($l->t('Applications kept in the top menu but also shown in side menu')); ?>
-                        <p>
-                            <em>
-                                <?php p($l->t('These applications must be selected in the previous option.')); ?><br>
-                                <?php p($l->t('If there is no selection then the global configuration is applied.')); ?>
-                            </em>
-                        </p>
-                    </div>
-                    <div class="side-menu-setting-form">
-                        <p>
-                            <a class="side-menu-toggler" data-target="#top-side-menu-apps" href="#_">
-                                🖱️ <?php p($l->t($labelShowHideApps)); ?>
-                            </a>
-                        </p>
-
-                        <div class="side-menu-setting" data-name="top-side-menu-apps" data-checkbox data-personal id="top-side-menu-apps" style="display: none">
-                            <ul class="side-menu-setting-list">
-                                <?php foreach ($_['apps'] as $app): ?>
-                                    <li class="side-menu-setting-list-item">
-                                        <input
-                                            type="checkbox"
-                                            name="top-side-menu-apps[]"
-                                            value="<?php echo $app['id'] ?>"
-                                            id="top-side-menu-app-<?php echo $app['id'] ?>"
-                                            <?php if (in_array($app['id'], $_['top-side-menu-apps'])): ?>checked<?php endif; ?>
-                                        />
-
-                                        <label for="top-side-menu-app-<?php echo $app['id'] ?>">
-                                            <?php echo $app['name'] ?>
-                                        </label>
-                                    </li>
-                                <?php endforeach; ?>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="section">
-            <h2>
-                <?php p($l->t('Applications')); ?>
-            </h2>
-
-            <div class="side-menu-setting-table">
-                <div class="side-menu-setting-row">
-                    <div class="side-menu-setting-label">
-                        <?php p($l->t('Customize sorting')); ?>
-                    </div>
-                    <div class="side-menu-setting-form">
-                        <a class="side-menu-toggler" data-target="#apps-order-list" href="#_">
-                            🖱️ <?php p($l->t($labelShowHideApps)); ?>
-                        </a>
-
-                        <div class="theme-undo icon icon-history btn-reset btn-reset--down" data-toggle="tooltip" data-original-title="<?php echo p($l->t($labelReset)); ?>" data-reset="<?php echo htmlentities(json_encode([
-                            'side-menu-apps-order' => '[]',
-                        ])) ?>"></div>
-
-                        <div id="apps-order-list" style="display: none">
-                            <ul class="side-menu-setting-list">
-                                <?php foreach ($_['ordered-apps'] as $key => $app): ?>
-                                    <li data-id="<?php echo $app['id']; ?>" class="side-menu-setting-list-item">
-                                        <span class="arrow">
-                                            ⇅
-                                        </span>
-
-                                        <?php echo p($l->t($app['name'])); ?>
-                                    </li>
-                                <?php endforeach; ?>
-                            </ul>
-                        </div>
-
-                        <input type="hidden" value='<?php echo json_encode($_['apps-order']) ?>' name="apps-order" class="side-menu-setting" id="side-menu-apps-order" data-personal>
-                    </div>
-                </div>
-            </div>
-        </div>
-    <?php endif ?>
-
-    <div class="section">
-        <?php if (!$_['force']): ?>
-            <button id="side-menu-save" class="btn btn-info" arial-label="<?php p($l->t('Save')); ?>">
-                <?php p($l->t('Save')); ?>
-                <progress max="100" value="0" id="side-menu-save-progress"></progress>
-            </button>
-
-            <span id="side-menu-message" class="msg"></span>
-
-            <div style="height: 30px"></div>
-        <?php endif ?>
-
-        <div>
-            <span for="side-menu-opener">
-                <?php p($l->t('You like this app and you want to support me?')); ?>
-
-                <a style="margin-left: 10px" target="_blank" href="https://www.buymeacoffee.com/deblan" rel="noopener">
-                    <button arial-label="<?php p($l->t('Buy me a coffee ☕')); ?>">
-                        <?php p($l->t('Buy me a coffee ☕')); ?>
-                    </button>
-                </a>
-            </span>
-        </div>
-    </div>
-</div>
+<div id="side-menu-user-settings"></div>
diff --git a/templates/settings/personal-form.php.bk b/templates/settings/personal-form.php.bk
new file mode 100644
index 0000000..793feec
--- /dev/null
+++ b/templates/settings/personal-form.php.bk
@@ -0,0 +1,265 @@
+<?php
+/**
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+vendor_script('side_menu', 'html5sortable.min');
+script('side_menu', 'admin');
+style('side_menu', 'admin');
+
+$choicesYesNo = [
+    'No' => '0',
+    'Yes' => '1',
+];
+
+
+$labelShowHideApps = 'Show and hide the list of applications';
+$labelReset = 'Reset to default';
+?>
+<div id="side-menu-section">
+    <?php if ($_['force']): ?>
+        <div class="section">
+            <h2>
+                <?php p($l->t('Menu')); ?>
+            </h2>
+
+            <p>
+                <em><?php echo $l->t('You do not have permission to change the settings.'); ?></em>
+            </p>
+        </div>
+    <?php else: ?>
+        <div class="section">
+            <p>
+                <em><?php echo $l->t('Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to navigate.'); ?></em>
+            </p>
+
+            <div class="side-menu-setting-table">
+                <div class="side-menu-setting-row">
+                    <div class="side-menu-setting-label">
+                        <?php p($l->t('Enable the custom menu')); ?>
+                    </div>
+                    <div class="side-menu-setting-form">
+                        <select id="side-menu-enabled" name="enabled" class="side-menu-setting" data-personal>
+                            <?php foreach ($choicesYesNo as $label => $value): ?>
+                                <option value="<?php echo $value ?>" <?php if ($value === $_['enabled']): ?>selected<?php endif; ?>>
+                                    <?php echo $l->t($label); ?>
+                                </option>
+                            <?php endforeach; ?>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <div class="side-menu-setting-table">
+                <div class="side-menu-setting-row">
+                    <div class="side-menu-setting-label">
+                        <?php p($l->t('Open apps in new tab')); ?>
+                    </div>
+                    <div class="side-menu-setting-form">
+                        <?php $choices = [
+                            'Use the global setting' => '1',
+                            'Use my selection' => '2',
+                        ]; ?>
+
+                        <select id="side-menu-loader-enabled" name="target-blank-mode" class="side-menu-setting" data-personal>
+                            <?php foreach ($choices as $label => $value): ?>
+                                <option value="<?php echo $value ?>" <?php if ($value === $_['target-blank-mode']): ?>selected<?php endif; ?>>
+                                    <?php echo $l->t($label);  ?>
+                                </option>
+                            <?php endforeach; ?>
+                        </select>
+
+                        <p>
+                            <a class="side-menu-toggler" data-target="#target-blank-apps" href="#_">
+                                🖱️ <?php p($l->t($labelShowHideApps)); ?>
+                            </a>
+                        </p>
+
+                        <div class="side-menu-setting" data-name="target-blank-apps" id="target-blank-apps" data-personal data-checkbox style="display: none">
+                            <ul class="side-menu-setting-list">
+                                <?php foreach ($_['apps'] as $app): ?>
+                                    <li class="side-menu-setting-list-item">
+                                        <input
+                                            type="checkbox"
+                                            name="target-blank-apps[]"
+                                            value="<?php echo $app['id'] ?>"
+                                            id="target-blank-app-<?php echo $app['id'] ?>"
+                                            <?php if (in_array($app['id'], $_['target-blank-apps'])): ?>checked<?php endif; ?>
+                                        />
+
+                                        <label for="target-blank-app-<?php echo $app['id'] ?>">
+                                            <?php echo p($l->t($app['name'])); ?>
+                                        </label>
+                                    </li>
+                                <?php endforeach; ?>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="section">
+            <h2>
+                <?php p($l->t('Top menu')); ?>
+            </h2>
+
+            <div class="side-menu-setting-table">
+                <div class="side-menu-setting-row">
+                    <div class="side-menu-setting-label">
+                        <?php p($l->t('Applications kept in the top menu')); ?>
+                        <p>
+                            <em>
+                                <?php p($l->t('If there is no selection then the global configuration is applied.')); ?>
+                            </em>
+                        </p>
+                    </div>
+                    <div class="side-menu-setting-form">
+                        <p>
+                            <a class="side-menu-toggler" data-target="#top-menu-apps" href="#_">
+                                🖱️ <?php p($l->t($labelShowHideApps)); ?>
+                            </a>
+                        </p>
+
+                        <div class="side-menu-setting" data-name="top-menu-apps" data-checkbox data-personal id="top-menu-apps" style="display: none">
+                            <ul class="side-menu-setting-list">
+                                <?php foreach ($_['apps'] as $app): ?>
+                                    <li class="side-menu-setting-list-item">
+                                        <input
+                                            type="checkbox"
+                                            name="top-menu-apps[]"
+                                            value="<?php echo $app['id'] ?>"
+                                            id="top-menu-app-<?php echo $app['id'] ?>"
+                                            <?php if (in_array($app['id'], $_['top-menu-apps'])): ?>checked<?php endif; ?>
+                                        />
+
+                                        <label for="top-menu-app-<?php echo $app['id'] ?>">
+                                            <?php echo $app['name'] ?>
+                                        </label>
+                                    </li>
+                                <?php endforeach; ?>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="side-menu-setting-table">
+                <div class="side-menu-setting-row">
+                    <div class="side-menu-setting-label">
+                        <?php p($l->t('Applications kept in the top menu but also shown in side menu')); ?>
+                        <p>
+                            <em>
+                                <?php p($l->t('These applications must be selected in the previous option.')); ?><br>
+                                <?php p($l->t('If there is no selection then the global configuration is applied.')); ?>
+                            </em>
+                        </p>
+                    </div>
+                    <div class="side-menu-setting-form">
+                        <p>
+                            <a class="side-menu-toggler" data-target="#top-side-menu-apps" href="#_">
+                                🖱️ <?php p($l->t($labelShowHideApps)); ?>
+                            </a>
+                        </p>
+
+                        <div class="side-menu-setting" data-name="top-side-menu-apps" data-checkbox data-personal id="top-side-menu-apps" style="display: none">
+                            <ul class="side-menu-setting-list">
+                                <?php foreach ($_['apps'] as $app): ?>
+                                    <li class="side-menu-setting-list-item">
+                                        <input
+                                            type="checkbox"
+                                            name="top-side-menu-apps[]"
+                                            value="<?php echo $app['id'] ?>"
+                                            id="top-side-menu-app-<?php echo $app['id'] ?>"
+                                            <?php if (in_array($app['id'], $_['top-side-menu-apps'])): ?>checked<?php endif; ?>
+                                        />
+
+                                        <label for="top-side-menu-app-<?php echo $app['id'] ?>">
+                                            <?php echo $app['name'] ?>
+                                        </label>
+                                    </li>
+                                <?php endforeach; ?>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="section">
+            <h2>
+                <?php p($l->t('Applications')); ?>
+            </h2>
+
+            <div class="side-menu-setting-table">
+                <div class="side-menu-setting-row">
+                    <div class="side-menu-setting-label">
+                        <?php p($l->t('Customize sorting')); ?>
+                    </div>
+                    <div class="side-menu-setting-form">
+                        <a class="side-menu-toggler" data-target="#apps-order-list" href="#_">
+                            🖱️ <?php p($l->t($labelShowHideApps)); ?>
+                        </a>
+
+                        <div class="theme-undo icon icon-history btn-reset btn-reset--down" data-toggle="tooltip" data-original-title="<?php echo p($l->t($labelReset)); ?>" data-reset="<?php echo htmlentities(json_encode([
+                            'side-menu-apps-order' => '[]',
+                        ])) ?>"></div>
+
+                        <div id="apps-order-list" style="display: none">
+                            <ul class="side-menu-setting-list">
+                                <?php foreach ($_['ordered-apps'] as $key => $app): ?>
+                                    <li data-id="<?php echo $app['id']; ?>" class="side-menu-setting-list-item">
+                                        <span class="arrow">
+                                            ⇅
+                                        </span>
+
+                                        <?php echo p($l->t($app['name'])); ?>
+                                    </li>
+                                <?php endforeach; ?>
+                            </ul>
+                        </div>
+
+                        <input type="hidden" value='<?php echo json_encode($_['apps-order']) ?>' name="apps-order" class="side-menu-setting" id="side-menu-apps-order" data-personal>
+                    </div>
+                </div>
+            </div>
+        </div>
+    <?php endif ?>
+
+    <div class="section">
+        <?php if (!$_['force']): ?>
+            <button id="side-menu-save" class="btn btn-info" arial-label="<?php p($l->t('Save')); ?>">
+                <?php p($l->t('Save')); ?>
+                <progress max="100" value="0" id="side-menu-save-progress"></progress>
+            </button>
+
+            <span id="side-menu-message" class="msg"></span>
+
+            <div style="height: 30px"></div>
+        <?php endif ?>
+
+        <div>
+            <span for="side-menu-opener">
+                <?php p($l->t('You like this app and you want to support me?')); ?>
+
+                <a style="margin-left: 10px" target="_blank" href="https://www.buymeacoffee.com/deblan" rel="noopener">
+                    <button arial-label="<?php p($l->t('Buy me a coffee ☕')); ?>">
+                        <?php p($l->t('Buy me a coffee ☕')); ?>
+                    </button>
+                </a>
+            </span>
+        </div>
+    </div>
+</div>
diff --git a/webpack.config.js b/webpack.config.js
index db0a2c5..d9876e8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,6 +17,7 @@ module.exports = {
   entry: {
     menu: path.resolve(path.join('src', 'menu.js')),
     admin: path.resolve(path.join('src', 'admin.js')),
+    user: path.resolve(path.join('src', 'user.js')),
   },
   output: {
     path: path.resolve('./js'),