chore: renamed SettingsModal to Settings and moved it to AppSidebar

frontend/src/App.vue

@@ -2,13 +2,11 @@
   <Layout v-if="session().isLoggedIn">
     <router-view />
   </Layout>
-  <SettingsModal />
   <Dialogs />
   <Toasts />
 </template>
 
 <script setup>
-import SettingsModal from '@/components/Settings/SettingsModal.vue'
 import { Dialogs } from '@/utils/dialogs'
 import { sessionStore as session } from '@/stores/session'
 import { Toasts } from 'frappe-ui'

frontend/src/components/Layouts/AppSidebar.vue

@@ -96,6 +96,7 @@
       </SidebarLink>
     </div>
     <Notifications />
+    <Settings />
   </div>
 </template>
 
@@ -115,9 +116,10 @@ import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import NotificationsIcon from '@/components/Icons/NotificationsIcon.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import Notifications from '@/components/Notifications.vue'
+import Settings from '@/components/Settings/Settings.vue'
 import { viewsStore } from '@/stores/views'
 import { notificationsStore } from '@/stores/notifications'
-import { showSettingsModal, activeSettingsPage } from '@/composables/settings'
+import { showSettings, activeSettingsPage } from '@/composables/settings'
 import { FeatherIcon, TrialBanner } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
 import { computed, h } from 'vue'
@@ -233,7 +235,7 @@ function getIcon(routeName, icon) {
 }
 
 function showBillingSettingPage() {
-  showSettingsModal.value = true
+  showSettings.value = true
   activeSettingsPage.value = 'Billing'
 }
 </script>

frontend/src/components/Settings/Settings.vue

@@ -1,6 +1,6 @@
 <template>
   <Dialog
-    v-model="showSettingsModal"
+    v-model="showSettings"
     :options="{ size: '5xl' }"
     @close="activeSettingsPage = ''"
   >
@@ -55,7 +55,7 @@ import TwilioSettings from '@/components/Settings/TwilioSettings.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import {
   isWhatsappInstalled,
-  showSettingsModal,
+  showSettings,
   activeSettingsPage,
 } from '@/composables/settings'
 import { Dialog, Plans, Billing } from 'frappe-ui'

frontend/src/components/UserDropdown.vue

@@ -51,9 +51,9 @@ import CRMLogo from '@/components/Icons/CRMLogo.vue'
 import Apps from '@/components/Apps.vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/users'
-import { showSettingsModal } from '@/composables/settings'
+import { showSettings } from '@/composables/settings'
 import { Dropdown } from 'frappe-ui'
-import { computed, ref, markRaw} from 'vue'
+import { computed, ref, markRaw } from 'vue'
 
 const props = defineProps({
   isCollapsed: {
@@ -94,7 +94,7 @@ let dropdownOptions = ref([
       {
         icon: 'settings',
         label: computed(() => __('Settings')),
-        onClick: () => (showSettingsModal.value = true),
+        onClick: () => (showSettings.value = true),
       },
       {
         icon: 'log-out',

frontend/src/composables/settings.js

@@ -34,5 +34,5 @@ export const mobileSidebarOpened = ref(false)
 
 export const isMobileView = computed(() => window.innerWidth < 768)
 
-export const showSettingsModal = ref(false)
-export const activeSettingsPage = ref('')
+export const showSettings = ref(false)
+export const activeSettingsPage = ref('')