1405/04/27

-

src/App.vue

@@ -67,8 +67,8 @@
     <SupportMessengerPicker
       v-model:open="supportPickerOpen"
       :entries="supportMessengerEntries"
-      :anchor-el="supportButtonEl"
-      @select="openSupportMessengerEntry"
+      :anchor-el="pickerAnchorEl"
+      @select="openMessengerEntry"
     />
 
     <VersionUpdateModal />
@@ -84,13 +84,8 @@ import img_topGradiant from '@/views/login/assets/img/gr_top_white.svg'
 import img_pattern from '@/views/login/assets/img/pattern.svg'
 import { LoadingOutlined } from '@ant-design/icons-vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import {
-  loadSupportMessengerFromSettings,
-  openSupportMessengerEntry,
-  resolveSupportMessengerEntries,
-  supportMessengerPickerOpen,
-  supportMessengerSettings,
-} from '@/utils/supportMessenger'
+import { useSupportMessenger } from '@/composables/useSupportMessenger'
+import { loadSupportMessengerFromSettings } from '@/utils/supportMessenger'
 import SupportMessengerPicker from '@/components/SupportMessengerPicker.vue'
 import { useDraggableFloatingButton } from '@/utils/useDraggableFloatingButton'
 import { useApplyDesktopLayoutClass } from '@/layouts/composables/useAppLayout'
@@ -113,42 +108,27 @@ const showSplash = ref(true)
 
 useApplyDesktopLayoutClass()
 
+const {
+  supportPickerOpen,
+  supportPickerAnchor,
+  supportMessengerEntries,
+  messengerMeta,
+  hasMessengerLink: showSupportButton,
+  openMessengerEntry,
+  openSupportMessenger,
+} = useSupportMessenger()
+
 const supportButtonEl = ref<HTMLElement | null>(null)
-const supportPickerOpen = supportMessengerPickerOpen
+const pickerAnchorEl = computed(() => supportPickerAnchor.value ?? supportButtonEl.value)
 
-const supportMessengerEntries = computed(() =>
-  resolveSupportMessengerEntries(supportMessengerSettings.value),
-)
-
-const showSupportButton = computed(() => supportMessengerEntries.value.length > 0)
-
-const primaryEntry = computed(() => supportMessengerEntries.value[0] ?? null)
-
-const supportIcon = computed(() => primaryEntry.value?.icon ?? 'vuesax-linear:messages-2')
+const supportIcon = computed(() => messengerMeta.value.icon)
 
 const supportAccentColor = computed(() =>
-  (primaryEntry.value?.accent ?? colors.primary) || '#334155',
+  (messengerMeta.value.accent !== '#334155'
+    ? messengerMeta.value.accent
+    : colors.primary) || '#334155',
 )
 
-let supportPickerOpenedAt = 0
-
-function openSupportLink() {
-  const entries = supportMessengerEntries.value
-  if (entries.length === 0) return
-  if (entries.length === 1) {
-    void openSupportMessengerEntry(entries[0])
-    return
-  }
-  const now = Date.now()
-  if (supportPickerOpen.value) {
-    if (now - supportPickerOpenedAt < 450) return
-    supportPickerOpen.value = false
-    return
-  }
-  supportPickerOpen.value = true
-  supportPickerOpenedAt = now
-}
-
 const {
   dragging: supportDragging,
   fabStyle: supportButtonStyle,
@@ -163,15 +143,11 @@ const {
   defaultRightOffset: 16,
 })
 
-function openSupportLinkHandler() {
-  openSupportLink()
-}
-
 function handleSupportPointerUp(event: PointerEvent) {
   const clicked = supportPointerUp(event)
   if (!clicked) return
   event.stopPropagation()
-  openSupportLinkHandler()
+  void openSupportMessenger(supportButtonEl.value)
 }
 
 onMounted(async () => {