kashkool ver 1

src/App.vue

@@ -84,15 +84,24 @@
         <div class="home_appear_fade_in_up mt-2">نسخه جدید منتشر شد!</div>
       </div>
     </van-dialog>
-    <a v-if="config.config?.name === 'garoosi'" href="https://ble.ir/garoosigallery" target="_blank"
-       id="support-button">
-      <div class="bg-green-100 text-green-800  flex gap-2 p-2 rounded-lg mr-2">
+    <div
+      v-if="showSupportButton && !showSplash"
+      id="support-button"
+      class="draggable-support-button"
+      :class="{ 'is-dragging': supportDragging }"
+      :style="supportButtonStyle"
+      @pointerdown="onSupportPointerDown"
+      @pointermove="onSupportPointerMove"
+      @pointerup="handleSupportPointerUp"
+      @pointercancel="onSupportPointerCancel"
+    >
+      <div class="bg-green-100 text-green-800 flex gap-2 p-2 rounded-lg">
         <span>پشتیبانی</span>
-        <div  class="w-5">
-          <img src="/src/assets/img/support.png" alt=""/>
+        <div class="w-5">
+          <img src="/logo-montzar.png" alt="" draggable="false" />
         </div>
       </div>
-    </a>
+    </div>
   </div>
   <div
     v-if="!showSplash"
@@ -126,6 +135,12 @@ import {useConfigStore} from "@/store/configStore";
 import {getProjectFontFamily, getProjectLoginLogo, getProjectSplashBackground, getProjectBrandRed, hasCustomLoginLogoLayout, isBoursecuProject} from "@/utils/config";
 import {ConfigProvider as AConfigProvider} from 'ant-design-vue'
 import BasicIcon from "@/components/BasicPacks/BasicIcon.vue";
+import {
+  buildSupportMessengerUrl,
+  loadSupportMessengerFromSettings,
+  supportMessengerSettings,
+} from '@/utils/supportMessenger'
+import {useDraggableFloatingButton} from '@/utils/useDraggableFloatingButton'
 
 const {offlineReady, needRefresh, updateServiceWorker} = useRegisterSW()
 const config = useConfigStore()
@@ -139,6 +154,44 @@ const splashIndicator = computed(() => h(LoadingOutlined, {
 const showSplash = ref(true)
 const popVisible = ref(false)
 
+const GAROOSI_SUPPORT_URL = 'https://ble.ir/garoosigallery'
+
+const supportLink = computed(() => {
+  if (config.config?.name === 'garoosi') {
+    return GAROOSI_SUPPORT_URL
+  }
+  return buildSupportMessengerUrl(
+    supportMessengerSettings.value.messenger,
+    supportMessengerSettings.value.messengerId
+  )
+})
+
+const showSupportButton = computed(() => !!supportLink.value)
+
+const {
+  dragging: supportDragging,
+  fabStyle: supportButtonStyle,
+  handlePointerDown: onSupportPointerDown,
+  handlePointerMove: onSupportPointerMove,
+  handlePointerUp: supportPointerUp,
+  handlePointerCancel: onSupportPointerCancel
+} = useDraggableFloatingButton('khaneghi_support_button_position', {
+  width: 110,
+  height: 44,
+  defaultBottomOffset: 120
+})
+
+function openSupportLink() {
+  if (!supportLink.value) return
+  window.open(supportLink.value, '_blank', 'noopener,noreferrer')
+}
+
+function handleSupportPointerUp(event: PointerEvent) {
+  if (supportPointerUp(event)) {
+    openSupportLink()
+  }
+}
+
 const antTheme = computed(() => {
   if (!config.config?.color) return null
 
@@ -164,6 +217,7 @@ const antTheme = computed(() => {
 
 onMounted(async () => {
   await config.getConfigData()
+  await loadSupportMessengerFromSettings()
   console.log(config?.config?.color)
   checkVersion()
   setTimeout(() => {
@@ -235,18 +289,20 @@ function update() {
 
 #support-button {
   position: fixed;
-  bottom: calc(80px + var(--app-credit-footer-offset, 28px) + 12px);
-  right: 20px;
-  width: 70px;
-  height: 70px;
-  //border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  //box-shadow: 0 4px 10px rgba(0,0,0,0.3);
-  cursor: pointer;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
   z-index: 9999;
+  cursor: grab;
+  user-select: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-radius: 0.5rem;
+
+  &.is-dragging {
+    cursor: grabbing;
+    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
+  }
+
+  img {
+    pointer-events: none;
+  }
 }
 
 @media screen and (min-width: 426px) {