refactor: restructure settings components and pages

- Removed individual settings components (password-policy.vue, sms.vue, smtp.vue) and integrated their functionality into the new settings page structure.
- Created a unified settings page (settings.vue) that utilizes a dialog layout for better navigation and organization.
- Implemented routing for settings options, allowing users to navigate between agents, password policy, SMTP, and SMS settings.
- Updated the password policy component to handle parameters and save functionality directly within the new settings page.
- Enhanced user experience by maintaining a consistent layout and design across all settings options.

Author: tacxou

apps/web/src/components/appbar/RightButtons.vue

@@ -4,7 +4,7 @@ div
     q-tooltip.text-body2(transition-show="scale" transition-hide="scale") {{ button.name }}
 
   q-btn(v-if="badgesValues.TO_SYNC > 0" icon="mdi-sync" square color="amber-9" size="md" :label="badgesValues.TO_SYNC +' items à Synchroniser'" @click="syncAll")
-  q-btn( icon="mdi-cog" size="md" flat @click="displaySettings")
+  q-btn( icon="mdi-cog" size="md" flat @click="$router.push('/settings/agents')" )
   q-btn( @click="toogleDark" flat size="md" icon="mdi-theme-light-dark")
   q-btn-dropdown(icon="mdi-account-circle-outline" :label="auth?.user?.displayName" round flat size="md")
     q-list

apps/web/src/components/settings/settings.vue

@@ -0,0 +1,62 @@
+<template>
+  <q-dialog :model-value="true" full-width persistent>
+    <div class="q-pa-md">
+      <q-layout view="hHh Lpr lff" container style="height: 800px" class="shadow-2 rounded-borders">
+        <q-header elevated class="bg-primary">
+          <q-toolbar>
+            <q-btn flat @click="drawer = !drawer" round dense icon="mdi-menu" />
+            <q-toolbar-title>Paramètres</q-toolbar-title>
+            <q-btn icon="mdi-close" flat round dense @click="$router.push('/')" />
+          </q-toolbar>
+        </q-header>
+        <q-drawer v-model="drawer" show-if-above :width="200" :breakpoint="500" bordered :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'">
+          <q-scroll-area class="fit">
+            <q-list>
+              <q-item clickable @click="$router.push('/settings/agents')">
+                <q-item-section avatar>
+                  <q-icon name="mdi-account" />
+                </q-item-section>
+                <q-item-section> Utilisateurs </q-item-section>
+              </q-item>
+            </q-list>
+            <q-list>
+              <q-item clickable @click="$router.push('/settings/password-policy')">
+                <q-item-section avatar>
+                  <q-icon name="mdi-form-textbox-password" />
+                </q-item-section>
+                <q-item-section> Politique de mot de passe </q-item-section>
+              </q-item>
+            </q-list>
+            <q-list>
+              <q-item clickable @click="$router.push('/settings/smtp')">
+                <q-item-section avatar>
+                  <q-icon name="mdi-mail" />
+                </q-item-section>
+                <q-item-section> Serveur SMTP </q-item-section>
+              </q-item>
+            </q-list>
+            <q-list>
+              <q-item clickable @click="$router.push('/settings/sms')">
+                <q-item-section avatar>
+                  <q-icon name="mdi-message-processing" />
+                </q-item-section>
+                <q-item-section> Serveur SMS </q-item-section>
+              </q-item>
+            </q-list>
+          </q-scroll-area>
+        </q-drawer>
+
+        <q-page-container>
+          <q-page padding :class="$q.dark.isActive ? 'bg-black' : 'bg-white'">
+            <nuxt-page></nuxt-page>
+          </q-page>
+        </q-page-container>
+      </q-layout>
+    </div>
+  </q-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const drawer = ref(false)
+</script>