Merge origin/modular into feature/responsive-layout-refactor.

Keep the responsive layout refactor while bringing in modular updates for support UI, pricing, categories, and config loading.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/App.vue

@@ -71,15 +71,23 @@
         <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">
-        <span>پشتیبانی</span>
-        <div  class="w-5">
-          <img src="/src/assets/img/support.png" alt=""/>
-        </div>
+    <div
+      v-if="showSupportButton && !showSplash"
+      id="support-button"
+      class="draggable-support-button"
+      :class="{ 'is-dragging': supportDragging }"
+      :style="supportButtonStyle"
+      title="پشتیبانی"
+      @pointerdown="onSupportPointerDown"
+      @pointermove="onSupportPointerMove"
+      @pointerup="handleSupportPointerUp"
+      @pointercancel="onSupportPointerCancel"
+    >
+      <div class="support-button-inner" :style="{ '--support-accent': supportAccentColor }">
+        <BasicIcon :icon="supportIcon" size="18" class="support-button-icon" />
+        <span class="support-button-label">پشتیبانی</span>
       </div>
-    </a>
+    </div>
   </div>
   <div
     v-if="!showSplash"
@@ -114,6 +122,12 @@ import {getProjectFontFamily, getProjectLoginLogo, getProjectSplashBackground, g
 import {ConfigProvider as AConfigProvider} from 'ant-design-vue'
 import BasicIcon from "@/components/BasicPacks/BasicIcon.vue";
 import { useApplyDesktopLayoutClass } from '@/layouts/composables/useAppLayout'
+import {
+  buildSupportMessengerUrl,
+  loadSupportMessengerFromSettings,
+  supportMessengerSettings,
+} from '@/utils/supportMessenger'
+import {useDraggableFloatingButton} from '@/utils/useDraggableFloatingButton'
 
 useApplyDesktopLayoutClass()
 
@@ -129,6 +143,78 @@ 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 supportIcon = computed(() => {
+  const messenger = (supportMessengerSettings.value.messenger ?? '').toLowerCase()
+  switch (messenger) {
+    case 'whatsapp':
+      return 'vuesax-linear:whatsapp'
+    case 'telegram':
+      return 'vuesax-linear:send-2'
+    case 'bale':
+      return 'vuesax-linear:messages-2'
+    default:
+      return 'vuesax-linear:messages-2'
+  }
+})
+
+const supportAccentColor = computed(() => {
+  const messenger = (supportMessengerSettings.value.messenger ?? '').toLowerCase()
+  switch (messenger) {
+    case 'whatsapp':
+      return '#22c55e'
+    case 'telegram':
+      return '#0ea5e9'
+    case 'bale':
+      return '#16a34a'
+    case 'rubika':
+      return '#7c3aed'
+    case 'eitaa':
+      return '#f59e0b'
+    case 'soroush':
+      return '#2563eb'
+    default:
+      return config.config?.color || '#334155'
+  }
+})
+
+const {
+  dragging: supportDragging,
+  fabStyle: supportButtonStyle,
+  handlePointerDown: onSupportPointerDown,
+  handlePointerMove: onSupportPointerMove,
+  handlePointerUp: supportPointerUp,
+  handlePointerCancel: onSupportPointerCancel
+} = useDraggableFloatingButton('khaneghi_support_button_position', {
+  width: 118,
+  height: 42,
+  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
 
@@ -154,6 +240,7 @@ const antTheme = computed(() => {
 
 onMounted(async () => {
   await config.getConfigData()
+  await loadSupportMessengerFromSettings()
   console.log(config?.config?.color)
   checkVersion()
   setTimeout(() => {
@@ -242,18 +329,49 @@ 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;
+  border-radius: 9999px;
+
+  &.is-dragging {
+    cursor: grabbing;
+  }
+}
+
+.support-button-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 14px 9px 12px;
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 9999px;
+  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
+  color: #1e293b;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  direction: rtl;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+
+  .support-button-icon {
+    color: var(--support-accent, #334155);
+    flex-shrink: 0;
+  }
+
+  .support-button-label {
+    white-space: nowrap;
+  }
+}
+
+#support-button:not(.is-dragging):hover .support-button-inner {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
+}
+
+#support-button.is-dragging .support-button-inner {
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
 }
 
 @media screen and (min-width: 426px) and (max-width: 767.98px) {