refactor: use settings store to load dropdown items

frontend/src/components/UserDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dropdown :options="dropdownItems.doc || []" v-bind="$attrs">
+  <Dropdown :options="dropdownItems" v-bind="$attrs">
     <template v-slot="{ open }">
       <button
         class="flex h-12 items-center rounded-md py-2 duration-300 ease-in-out"
@@ -51,8 +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 { getSettings } from '@/stores/settings'
 import { showSettings } from '@/composables/settings'
-import { createDocumentResource, Dropdown } from 'frappe-ui'
+import { Dropdown } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
 import { computed, markRaw, onMounted } from 'vue'
 
@@ -63,6 +64,7 @@ const props = defineProps({
   },
 })
 
+const { settings } = getSettings()
 const { logout } = sessionStore()
 const { getUser } = usersStore()
 
@@ -70,46 +72,45 @@ const user = computed(() => getUser() || {})
 
 const theme = useStorage('theme', 'light')
 
-const dropdownItems = createDocumentResource({
-  doctype: 'FCRM Settings',
-  name: 'FCRM Settings',
-  fields: ['dropdown_items'],
-  auto: true,
-  transform: (data) => {
-    let items = data.dropdown_items
+const dropdownItems = computed(() => {
+  if (!settings.value?.dropdown_items) return []
 
-    let _dropdownItems = [
-      {
-        group: 'Dropdown Items',
+  let items = settings.value.dropdown_items
+
+  let _dropdownItems = [
+    {
+      group: 'Dropdown Items',
+      hideLabel: true,
+      items: [],
+    },
+  ]
+
+  items.forEach((item) => {
+    if (item.hidden) return
+    if (item.type !== 'Separator') {
+      _dropdownItems[_dropdownItems.length - 1].items.push(
+        dropdownItemObj(item),
+      )
+    } else {
+      _dropdownItems.push({
+        group: '',
         hideLabel: true,
         items: [],
-      },
-    ]
+      })
+    }
+  })
 
-    items.forEach((item) => {
-      if (item.hidden) return
-      if (item.type !== 'Separator') {
-        _dropdownItems[_dropdownItems.length - 1].items.push(
-          dropdownItemObj(item),
-        )
-      } else {
-        _dropdownItems.push({
-          group: '',
-          hideLabel: true,
-          items: [],
-        })
-      }
-    })
-
-    return _dropdownItems
-  },
+  return _dropdownItems
 })
 
 function dropdownItemObj(item) {
   let openInNewWindow = item.open_in_new_window
 
   let icon = item.icon || 'external-link'
-  item.icon = icon.startsWith('<svg') ? markRaw({ template: icon }) : icon
+  if (typeof icon === 'string' && icon.startsWith('<svg')) {
+    icon = markRaw({ template: icon })
+  }
+  item.icon = icon
 
   if (item.is_standard) {
     return getStandardItem(item)
@@ -142,7 +143,7 @@ function getStandardItem(item) {
       }
     case 'toggle_theme':
       return {
-        icon: computed(() => (theme.value === 'dark' ? 'sun' : item.icon)),
+        icon: theme.value === 'dark' ? 'sun' : item.icon,
         label: __(item.label),
         onClick: toggleTheme,
       }