feat(player): 重构客服悬浮入口与设置抽屉，优化消息页交互

- 新增可拖拽悬浮客服按钮，支持贴边吸附与位置记忆 - 顶部栏改为设置抽屉入口，将语言/规则/登出等从个人页迁出 - 余额芯片集成用户头像，移除独立头像菜单 - 消息列表去掉冗余未读白点，统一消息页返回导航 - 补充 profile.settings 多语言文案 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-18 13:32:37 +08:00
parent fce2333322
commit 46155018ce
9 changed files with 885 additions and 181 deletions
--- a/apps/player/src/components/CashBalanceChip.vue
+++ b/apps/player/src/components/CashBalanceChip.vue
@@ -2,17 +2,26 @@
 import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { playerAvatarUrl, randomAvatarKey } from '@thebet365/shared';
+import { useAuthStore } from '../stores/auth';
 import { formatMoney } from '../utils/localeDisplay';
 import { usePlayerProfile } from '../composables/usePlayerProfile';

 const { locale, t } = useI18n();
-const { profileRaw, refreshProfile } = usePlayerProfile();
+const { profileRaw, refreshProfile, avatarUrl } = usePlayerProfile();
+const auth = useAuthStore();
 const router = useRouter();
 const open = ref(false);
 const root = ref<HTMLElement | null>(null);

 const wallet = computed(() => profileRaw.value?.wallet ?? null);

+const displayAvatarUrl = computed(() => {
+  if (avatarUrl.value) return avatarUrl.value;
+  const seed = auth.user?.username;
+  return seed ? playerAvatarUrl(randomAvatarKey(seed)) : null;
+});
+
 function amountValue(value: unknown): number {
  if (value == null) return 0;
  if (typeof value === 'number') return Number.isFinite(value) ? value : 0;
@@ -74,7 +83,11 @@ onUnmounted(() => {
        <span class="chip-label">{{ t('wallet.cash_balance') }}</span>
        <span class="chip-amount">{{ available }}</span>
      </span>
-      <span class="chevron" :class="{ open }">▾</span>
+      
+      <!-- Integrated Avatar image -->
+      <span class="chip-avatar-wrap">
+        <img v-if="displayAvatarUrl" :src="displayAvatarUrl" alt="" class="chip-avatar-img" />
+      </span>
    </button>

    <div v-if="open" class="cash-panel">
@@ -110,9 +123,9 @@ onUnmounted(() => {
 .cash-chip {
  display: flex;
  align-items: center;
-  gap: 4px;
+  gap: 10px;
  height: 36px;
-  padding: 0 10px;
+  padding: 0 6px 0 10px;
  min-width: 0;
  cursor: pointer;
  border: 1px solid var(--border);
@@ -149,15 +162,25 @@ onUnmounted(() => {
  font-variant-numeric: tabular-nums;
 }

-.chevron {
-  font-size: 10px;
-  color: var(--text-muted);
-  transition: transform 0.2s;
-  margin-left: 0;
+/* Integrated Avatar Styling */
+.chip-avatar-wrap {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-gold-soft);
+  flex-shrink: 0;
+  background: var(--bg-body);
 }

-.chevron.open {
-  transform: rotate(180deg);
+.chip-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
 }

 .cash-panel {
--- a/apps/player/src/components/MessageListPanel.vue
+++ b/apps/player/src/components/MessageListPanel.vue
@@ -122,7 +122,6 @@ onActivated(tryLoad);
          :class="{ unread: !item.isRead }"
        >
          <button type="button" class="row-body" @click="openDetail(item.id)">
-            <span class="row-dot" aria-hidden="true" />
            <span class="row-main">
              <span class="title-row">
                <span class="title">{{ messageTitle(item) }}</span>
@@ -231,19 +230,6 @@ onActivated(tryLoad);
  font-weight: 700;
 }

-.row-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: transparent;
-  flex-shrink: 0;
-}
-
-.list-row.unread .row-dot {
-  background: var(--primary);
-  box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
-}
-
 .row-main {
  flex: 1;
  min-width: 0;
--- a/apps/player/src/components/SettingsDrawer.vue
+++ b/apps/player/src/components/SettingsDrawer.vue
@@ -0,0 +1,517 @@
+<script setup lang="ts">
+import { ref, watch, onUnmounted, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAuthStore } from '../stores/auth';
+import { useAppLocale } from '../composables/useAppLocale';
+import LocaleFlag from './LocaleFlag.vue';
+
+const props = defineProps<{
+  modelValue: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+}>();
+
+const { t, locale } = useI18n();
+const router = useRouter();
+const auth = useAuthStore();
+const { locales, setLocale } = useAppLocale();
+
+const showRulesModal = ref(false);
+const showLanguageModal = ref(false);
+
+function close() {
+  emit('update:modelValue', false);
+}
+
+async function changeLocale(code: string) {
+  await setLocale(code);
+  showLanguageModal.value = false;
+}
+
+function goEdit() {
+  close();
+  router.push('/profile/edit');
+}
+
+function logout() {
+  close();
+  auth.logout();
+  router.push('/');
+}
+
+const isAnyOpen = computed(() => props.modelValue || showRulesModal.value || showLanguageModal.value);
+
+watch(
+  isAnyOpen,
+  (isOpen) => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+  }
+);
+
+onUnmounted(() => {
+  document.body.style.overflow = '';
+});
+</script>
+
+<template>
+  <div class="settings-drawer-wrapper" :class="{ open: modelValue }">
+    <div class="settings-drawer-backdrop" @click="close" />
+
+    <div class="settings-drawer-panel">
+      <!-- Header -->
+      <div class="drawer-header">
+        <h2 class="drawer-title">{{ t('profile.settings') }}</h2>
+        <button type="button" class="drawer-close-btn" @click="close" :aria-label="t('common.cancel')">
+          <svg class="close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Content -->
+      <div class="drawer-content">
+        <section class="settings-group">
+          <!-- Modify Profile -->
+          <button type="button" class="settings-cell" @click="goEdit">
+            <span class="cell-main">
+              <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                <circle cx="12" cy="8" r="3.5" />
+                <path d="M5 20c0-3.5 3.1-6 7-6s7 2.5 7 6" />
+              </svg>
+              <span class="cell-label">{{ t('profile.edit') }}</span>
+            </span>
+            <span class="cell-chevron" aria-hidden="true">›</span>
+          </button>
+
+          <!-- Betting Rules -->
+          <button type="button" class="settings-cell" @click="showRulesModal = true">
+            <span class="cell-main">
+              <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                <path d="M7 4h10v16H7z" />
+                <path d="M10 8h6M10 12h6M10 16h4" />
+              </svg>
+              <span class="cell-label">{{ t('profile.rules_title') }}</span>
+            </span>
+            <span class="cell-chevron" aria-hidden="true">›</span>
+          </button>
+
+          <!-- Language Selector -->
+          <button type="button" class="settings-cell" @click="showLanguageModal = true">
+            <span class="cell-main">
+              <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                <circle cx="12" cy="12" r="9" />
+                <path d="M3 12h18M12 3c2.5 2.8 4 6 4 9s-1.5 6.2-4 9M12 3c-2.5 2.8-4 6-4 9s1.5 6.2 4 9" />
+              </svg>
+              <span class="cell-label">{{ t('profile.language') }}</span>
+            </span>
+            <span class="cell-chevron" aria-hidden="true">›</span>
+          </button>
+        </section>
+
+        <!-- Logout Button -->
+        <button type="button" class="logout-btn" @click="logout">
+          {{ t('auth.logout') }}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Betting Rules Modal -->
+  <Teleport to="body">
+    <Transition name="modal-fade">
+      <div v-if="showRulesModal" class="modal-overlay" @click.self="showRulesModal = false">
+        <div class="modal-card">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ t('profile.rules_title') }}</h3>
+            <button type="button" class="modal-close-btn" @click="showRulesModal = false" :aria-label="t('common.cancel')">
+              <svg class="close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M18 6L6 18M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div class="modal-body rules-modal-body">
+            <p>{{ t('profile.rules_p1') }}</p>
+            <p>{{ t('profile.rules_p2') }}</p>
+            <p>{{ t('profile.rules_p3') }}</p>
+            <p>{{ t('profile.rules_p4') }}</p>
+            <p>{{ t('profile.rules_p5') }}</p>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+
+  <!-- Language Selector Modal -->
+  <Teleport to="body">
+    <Transition name="modal-fade">
+      <div v-if="showLanguageModal" class="modal-overlay" @click.self="showLanguageModal = false">
+        <div class="modal-card modal-card--small">
+          <div class="modal-header">
+            <h3 class="modal-title">{{ t('profile.language') }}</h3>
+            <button type="button" class="modal-close-btn" @click="showLanguageModal = false" :aria-label="t('common.cancel')">
+              <svg class="close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M18 6L6 18M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="lang-list">
+              <button
+                v-for="item in locales"
+                :key="item.code"
+                type="button"
+                class="lang-item"
+                :class="{ active: locale === item.code }"
+                @click="changeLocale(item.code)"
+              >
+                <div class="lang-item-main">
+                  <LocaleFlag :locale="item.code" :size="16" />
+                  <span>{{ item.label }}</span>
+                </div>
+                <svg v-if="locale === item.code" class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.settings-drawer-wrapper {
+  position: fixed;
+  inset: 0;
+  z-index: 150;
+  pointer-events: none;
+  visibility: hidden;
+  transition: visibility 0.3s ease;
+}
+
+.settings-drawer-wrapper.open {
+  pointer-events: auto;
+  visibility: visible;
+}
+
+.settings-drawer-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.settings-drawer-wrapper.open .settings-drawer-backdrop {
+  opacity: 1;
+}
+
+.settings-drawer-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 70%;
+  background: #001a33;
+  border-left: 1px solid var(--border);
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  overflow: hidden;
+}
+
+.settings-drawer-wrapper.open .settings-drawer-panel {
+  transform: translateX(0);
+}
+
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+  background: var(--dropdown-bg);
+}
+
+.drawer-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+  margin: 0;
+}
+
+.drawer-close-btn {
+  background: transparent;
+  color: var(--text-muted);
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background 0.2s, color 0.2s;
+  padding: 0;
+  cursor: pointer;
+}
+
+.drawer-close-btn:active {
+  background: var(--surface-active);
+  color: var(--text);
+}
+
+.close-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.drawer-content {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 20px;
+}
+
+.settings-group {
+  background: var(--gradient-card);
+  border: 1px solid rgba(255, 255, 255, 0.11);
+  border-radius: var(--radius);
+  overflow: hidden;
+  box-shadow: var(--shadow-card-sm);
+  margin-bottom: 24px;
+}
+
+.settings-cell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  min-height: 48px;
+  padding: 0 16px;
+  background: none;
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  cursor: pointer;
+}
+
+.settings-cell:last-child {
+  border-bottom: none;
+}
+
+.settings-cell:active {
+  background: var(--bg-hover);
+}
+
+.cell-main {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.cell-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
+.cell-label {
+  color: var(--text);
+}
+
+.cell-chevron {
+  color: var(--text-muted);
+  font-size: 20px;
+  line-height: 1;
+  font-weight: 300;
+  transition: transform 0.15s ease;
+}
+
+.logout-btn {
+  width: 100%;
+  min-height: 44px;
+  padding: 0 16px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--danger);
+  font-size: 14px;
+  font-weight: 700;
+  transition: background 0.2s;
+  cursor: pointer;
+}
+
+.logout-btn:active {
+  background: rgba(255, 69, 58, 0.08);
+}
+
+/* Modal Overlays & Cards */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
+  background: rgba(0, 0, 0, 0.72);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.modal-card {
+  width: 100%;
+  max-width: 340px;
+  background: var(--dropdown-bg, #0A2540);
+  border: 1px solid var(--border-strong);
+  border-radius: 12px;
+  padding: 20px 18px 22px;
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.modal-card--small {
+  max-width: 300px;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.modal-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--text);
+}
+
+.modal-close-btn {
+  background: transparent;
+  color: var(--text-muted);
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  padding: 0;
+  transition: background 0.2s, color 0.2s;
+  cursor: pointer;
+}
+
+.modal-close-btn:active {
+  background: var(--surface-active);
+  color: var(--text);
+}
+
+.modal-body {
+  color: var(--text);
+}
+
+.rules-modal-body {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-muted);
+  overflow-y: auto;
+  max-height: 50vh;
+  padding-right: 4px;
+}
+
+.rules-modal-body p {
+  margin: 0 0 10px;
+}
+
+.rules-modal-body p:last-child {
+  margin-bottom: 0;
+}
+
+/* Language List inside Modal */
+.lang-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.lang-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.lang-item:active {
+  background: var(--surface-active);
+}
+
+.lang-item.active {
+  border-color: var(--primary);
+  color: var(--text);
+  background: var(--surface-accent);
+}
+
+.lang-item-main {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.check-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--success, #34C759);
+}
+
+/* Modal Transitions */
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.modal-fade-enter-active .modal-card,
+.modal-fade-leave-active .modal-card {
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+
+.modal-fade-enter-from .modal-card,
+.modal-fade-leave-to .modal-card {
+  transform: scale(0.96);
+}
+</style>
--- a/apps/player/src/i18n/en-US.ts
+++ b/apps/player/src/i18n/en-US.ts
@@ -471,6 +471,7 @@ export default {
    place_failed: 'Bet failed',
  },
  profile: {
+    settings: 'Settings',
    edit: 'Edit Profile',
    language: 'Language',
    avatar: 'Avatar',
--- a/apps/player/src/i18n/ms-MY.ts
+++ b/apps/player/src/i18n/ms-MY.ts
@@ -477,6 +477,7 @@ export default {
    place_failed: 'Pertaruhan gagal',
  },
  profile: {
+    settings: 'Tetapan',
    edit: 'Edit Profil',
    language: 'Bahasa',
    avatar: 'Avatar',
--- a/apps/player/src/i18n/zh-CN.ts
+++ b/apps/player/src/i18n/zh-CN.ts
@@ -471,6 +471,7 @@ export default {
    place_failed: '下注失败',
  },
  profile: {
+    settings: '设置',
    edit: '修改资料',
    language: '语言',
    avatar: '选择头像',
--- a/apps/player/src/layouts/MainLayout.vue
+++ b/apps/player/src/layouts/MainLayout.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { RouterView, RouterLink, useRoute } from 'vue-router';
+import { RouterView, RouterLink, useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '../stores/auth';
 import { useBetSlipStore } from '../stores/betSlip';
 import CashBalanceChip from '../components/CashBalanceChip.vue';
-import UserAvatarMenu from '../components/UserAvatarMenu.vue';
 import LocaleSwitcher from '../components/LocaleSwitcher.vue';
 import { useAppLocale } from '../composables/useAppLocale';
 import AnnouncementMarquee from '../components/AnnouncementMarquee.vue';
 import BottomNavIcon from '../components/BottomNavIcon.vue';
 import BackToTopButton from '../components/BackToTopButton.vue';
+import SettingsDrawer from '../components/SettingsDrawer.vue';
 import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';

 const BetSlipDrawer = defineAsyncComponent(() => import('../components/BetSlipDrawer.vue'));
@@ -25,7 +25,167 @@ const { t, locale } = useI18n();
 const auth = useAuthStore();
 const { initFromUser } = useAppLocale();
 const route = useRoute();
+const router = useRouter();
 const slip = useBetSlipStore();
+const showSettings = ref(false);
+const floatBtnRef = ref<HTMLElement | null>(null);
+
+const btnX = ref<number | null>(null);
+const btnY = ref<number | null>(null);
+const isDragging = ref(false);
+const isDocked = ref(false);
+const dockSide = ref<'left' | 'right'>('right');
+
+let startX = 0;
+let startY = 0;
+let initialX = 0;
+let initialY = 0;
+let hasMoved = false;
+let wasDockedBeforeInteraction = false;
+
+const btnStyle = computed(() => {
+  if (btnX.value === null || btnY.value === null) {
+    return {
+      right: '16px',
+      bottom: '80px',
+    };
+  }
+  return {
+    left: `${btnX.value}px`,
+    top: `${btnY.value}px`,
+  };
+});
+
+const DOCK_OFFSET = 24;
+const SNAP_THRESHOLD = 16; // 仅当按钮贴近屏幕边缘时才吸附
+const DOCK_SNAP_THRESHOLD = 20; // px — 按钮边缘距屏幕边缘小于此值才吸附
+const FLOAT_BTN_SIZE = 48;
+const FLOAT_BTN_EDGE_INSET = 8;
+
+function undockToVisualPosition() {
+  if (!isDocked.value || btnX.value === null) return;
+  if (dockSide.value === 'right') {
+    btnX.value += DOCK_OFFSET;
+  } else {
+    btnX.value -= DOCK_OFFSET;
+  }
+  isDocked.value = false;
+}
+
+function snapToEdge(side: 'left' | 'right') {
+  const screenWidth = window.innerWidth;
+  dockSide.value = side;
+  btnX.value = side === 'left' ? FLOAT_BTN_EDGE_INSET : screenWidth - FLOAT_BTN_SIZE - FLOAT_BTN_EDGE_INSET;
+  isDocked.value = true;
+}
+
+function onPointerDown(e: PointerEvent) {
+  if (e.pointerType === 'mouse' && e.button !== 0) return;
+  if (isDragging.value) return;
+
+  const el = e.currentTarget as HTMLElement;
+  try {
+    el.setPointerCapture(e.pointerId);
+  } catch (err) {
+    // ignore
+  }
+
+  isDragging.value = true;
+  hasMoved = false;
+  wasDockedBeforeInteraction = isDocked.value;
+
+  startX = e.clientX;
+  startY = e.clientY;
+
+  // 吸附态下 transform 会把按钮推出屏幕，先还原到可见位置，否则几乎无法触发拖拽
+  undockToVisualPosition();
+
+  const btnSize = FLOAT_BTN_SIZE;
+  initialX = btnX.value !== null ? btnX.value : window.innerWidth - btnSize - 16;
+  initialY = btnY.value !== null ? btnY.value : window.innerHeight - btnSize - 80;
+
+  btnX.value = initialX;
+  btnY.value = initialY;
+}
+
+function onPointerMove(e: PointerEvent) {
+  if (!isDragging.value) return;
+
+  const dx = e.clientX - startX;
+  const dy = e.clientY - startY;
+
+  if (!hasMoved && (Math.abs(dx) > 5 || Math.abs(dy) > 5)) {
+    hasMoved = true;
+  }
+
+  if (hasMoved) {
+    const newX = initialX + dx;
+    const newY = initialY + dy;
+
+    const btnSize = 48;
+    const minX = -24;
+    const maxX = window.innerWidth - 24;
+    const minY = 60;
+    const maxY = window.innerHeight - btnSize - 60;
+
+    btnX.value = Math.max(minX, Math.min(newX, maxX));
+    btnY.value = Math.max(minY, Math.min(newY, maxY));
+  }
+}
+
+function openInboxHub() {
+  if (!auth.token) {
+    auth.showLoginPrompt(hubRoute.value);
+    return;
+  }
+
+  void router.push(hubRoute.value);
+}
+
+function onPointerUp(e: PointerEvent) {
+  if (!isDragging.value) return;
+  isDragging.value = false;
+
+  const el = e.currentTarget as HTMLElement;
+  try {
+    el.releasePointerCapture(e.pointerId);
+  } catch (err) {
+    // ignore
+  }
+
+  if (hasMoved) {
+    if (btnX.value !== null && btnY.value !== null) {
+      const screenWidth = window.innerWidth;
+      const btnSize = 48;
+      const snapThreshold = SNAP_THRESHOLD;
+
+      const distLeft = btnX.value;
+      const distRight = screenWidth - (btnX.value + btnSize);
+
+      if (distLeft <= snapThreshold) {
+        snapToEdge('left');
+      } else if (distRight <= snapThreshold) {
+        snapToEdge('right');
+      } else {
+        // Float freely in place — no folding
+        isDocked.value = false;
+      }
+    }
+  } else {
+    if (wasDockedBeforeInteraction) {
+      snapToEdge(dockSide.value);
+    }
+    openInboxHub();
+  }
+
+  if (btnX.value !== null && btnY.value !== null) {
+    localStorage.setItem('float_cs_x', String(btnX.value));
+    localStorage.setItem('float_cs_y', String(btnY.value));
+    localStorage.setItem('float_cs_side', dockSide.value);
+    localStorage.setItem('float_cs_docked', isDocked.value ? '1' : '0');
+  }
+}
+

 const isDetailPage = computed(() => {
  const p = route.path;
@@ -66,6 +226,7 @@ const { loadProfile, refreshProfile, bindProfileVisibilityRefresh } = usePlayerP
 const { startPolling, stopPolling } = useDepositNotifications();
 const { unreadCount, refreshUnreadCount, resetMessagesState } = usePlayerMessages();
 const { inboxEnabled, hubRoute, hubOpenLabelKey } = useInboxFeature();
+const showFloatCsBtn = computed(() => !route.path.startsWith('/messages'));
 const primaryAnnouncementId = computed(() => announcementItems.value[0]?.id ?? '');

 const mainRef = ref<HTMLElement | null>(null);
@@ -90,6 +251,21 @@ const balanceRefreshPaths = ['/profile', '/wallet', '/bets'];
 onMounted(() => {
  if (auth.user?.locale) void initFromUser(auth.user.locale);
  bindProfileVisibilityRefresh();
+
+  const savedX = localStorage.getItem('float_cs_x');
+  const savedY = localStorage.getItem('float_cs_y');
+  const savedSide = localStorage.getItem('float_cs_side');
+  const savedDocked = localStorage.getItem('float_cs_docked');
+  if (savedX !== null && savedY !== null) {
+    btnX.value = Number(savedX);
+    btnY.value = Number(savedY);
+  }
+  if (savedSide === 'left' || savedSide === 'right') {
+    dockSide.value = savedSide;
+  }
+  if (savedDocked !== null) {
+    isDocked.value = savedDocked === '1';
+  }
 });

 watch(
@@ -131,29 +307,20 @@ watch(
    <header v-if="showHeader" class="header">
      <img src="/logo.png" alt="TheBet365" class="logo" />
      <div class="header-actions">
-        <RouterLink
-          :to="hubRoute"
-          class="hub-btn"
-          :aria-label="inboxEnabled && unreadCount ? t('messages.unread_badge', { count: unreadCount }) : t(hubOpenLabelKey)"
-        >
-          <svg class="hub-icon" viewBox="0 0 24 24" aria-hidden="true">
-            <path
-              d="M12 3C7.03 3 3 6.58 3 11c0 2.02.9 3.86 2.38 5.24L4 21l4.2-1.02A10.8 10.8 0 0 0 12 19c4.97 0 9-3.58 9-8s-4.03-8-9-8Z"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.8"
-              stroke-linejoin="round"
-            />
-            <circle cx="9" cy="11" r="1" fill="currentColor" />
-            <circle cx="12" cy="11" r="1" fill="currentColor" />
-            <circle cx="15" cy="11" r="1" fill="currentColor" />
-          </svg>
-          <span v-if="auth.user && inboxEnabled && unreadCount > 0" class="hub-badge">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
-        </RouterLink>
-        <LocaleSwitcher />
+        <LocaleSwitcher v-if="!auth.user" />
        <template v-if="auth.user">
          <CashBalanceChip />
-          <UserAvatarMenu />
+          <button
+            type="button"
+            class="settings-trigger-btn"
+            :aria-label="t('profile.settings')"
+            @click="showSettings = true"
+          >
+            <svg class="settings-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.1a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+          </button>
        </template>
        <button v-else type="button" class="login-btn" @click="auth.showLoginPrompt(route.fullPath)">
          {{ t('auth.login') }}
@@ -208,6 +375,42 @@ watch(
    <BackToTopButton :scroll-el="mainRef" :above-nav="showBottomNav" />

    <BetSlipDrawer v-model="slip.drawerOpen" />
+    <SettingsDrawer v-model="showSettings" />
+
+    <!-- Draggable Floating Customer Service Button -->
+    <div
+      v-if="showFloatCsBtn"
+      ref="floatBtnRef"
+      class="float-cs-btn"
+      :class="{ dragging: isDragging, docked: isDocked, 'dock-left': dockSide === 'left', 'dock-right': dockSide === 'right' }"
+      :style="btnStyle"
+      @pointerdown="onPointerDown"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerUp"
+      @pointercancel="onPointerUp"
+      @touchstart.prevent
+      :aria-label="inboxEnabled && unreadCount ? t('messages.unread_badge', { count: unreadCount }) : t(hubOpenLabelKey)"
+    >
+      <svg class="cs-icon" viewBox="0 0 24 24" aria-hidden="true">
+        <path
+          d="M12 3C7.03 3 3 6.58 3 11c0 2.02.9 3.86 2.38 5.24L4 21l4.2-1.02A10.8 10.8 0 0 0 12 19c4.97 0 9-3.58 9-8s-4.03-8-9-8Z"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linejoin="round"
+        />
+        <circle cx="9" cy="11" r="1" fill="currentColor" />
+        <circle cx="12" cy="11" r="1" fill="currentColor" />
+        <circle cx="15" cy="11" r="1" fill="currentColor" />
+      </svg>
+      <span
+        v-if="auth.user && inboxEnabled && unreadCount > 0"
+        class="cs-badge"
+        :class="{ 'badge-left': dockSide === 'right', 'badge-right': dockSide === 'left' }"
+      >
+        {{ unreadCount > 99 ? '99+' : unreadCount }}
+      </span>
+    </div>
  </div>
 </template>

@@ -243,43 +446,85 @@ watch(
  min-width: 0;
 }
 .header-actions :deep(.locale-switch:not(.compact)),
-.header-actions :deep(.cash-chip),
-.header-actions :deep(.avatar-btn) {
+.header-actions :deep(.cash-chip) {
  height: var(--header-chip-h);
  box-sizing: border-box;
 }
-.header-actions :deep(.avatar-btn) {
-  width: var(--header-chip-h);
-}

-.hub-btn {
-  position: relative;
-  display: inline-flex;
+.float-cs-btn {
+  position: fixed;
+  z-index: 135;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--dropdown-bg, #0A2540);
+  border: 1px solid var(--border-strong);
+  color: var(--text);
+  display: flex;
  align-items: center;
  justify-content: center;
-  width: var(--header-chip-h, 36px);
-  height: var(--header-chip-h, 36px);
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  background: var(--bg-card);
-  color: var(--text);
-  flex-shrink: 0;
-  text-decoration: none;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
+  cursor: grab;
+  user-select: none;
+  -webkit-user-drag: none;
+  touch-action: none;
+  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
 }

-.hub-btn:active {
-  background: var(--surface-active);
+.float-cs-btn:active {
+  cursor: grabbing;
 }

-.hub-icon {
-  width: 18px;
-  height: 18px;
+.float-cs-btn.dragging {
+  transition: none;
 }

-.hub-badge {
+.float-cs-btn.docked {
+  opacity: 0.6;
+}
+
+@media (hover: hover) {
+  .float-cs-btn.docked:hover {
+    opacity: 1;
+    transform: translateX(0) !important;
+  }
+}
+
+.float-cs-btn.docked:active {
+  opacity: 1;
+  transform: translateX(0) !important;
+}
+
+.float-cs-btn.docked.dock-left {
+  transform: translateX(-24px);
+}
+
+.float-cs-btn.docked.dock-right {
+  transform: translateX(24px);
+}
+
+/* Expand touch target to bypass edge gesture intercept */
+.float-cs-btn::after {
+  content: '';
  position: absolute;
-  top: -4px;
-  right: -4px;
+  top: -12px;
+  bottom: -12px;
+  left: -24px;
+  right: -24px;
+  background: transparent;
+  border-radius: 50%;
+  pointer-events: auto;
+}
+
+.cs-icon {
+  width: 22px;
+  height: 22px;
+  pointer-events: none;
+}
+
+.cs-badge {
+  position: absolute;
+  top: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
@@ -291,6 +536,17 @@ watch(
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg-body);
+  pointer-events: none;
+}
+
+.cs-badge.badge-left {
+  left: -2px;
+  right: auto;
+}
+
+.cs-badge.badge-right {
+  right: -2px;
+  left: auto;
 }

 .login-btn {
@@ -308,6 +564,31 @@ watch(
 .login-btn:active {
  background: var(--surface-active);
 }
+
+.settings-trigger-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--header-chip-h, 36px);
+  height: var(--header-chip-h, 36px);
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text);
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: background 0.18s, border-color 0.18s;
+  padding: 0;
+}
+
+.settings-trigger-btn:active {
+  background: var(--surface-active);
+}
+
+.settings-icon {
+  width: 18px;
+  height: 18px;
+}
 .announce-strip {
  flex-shrink: 0;
  z-index: 105;
--- a/apps/player/src/views/InboxHubView.vue
+++ b/apps/player/src/views/InboxHubView.vue
@@ -107,13 +107,12 @@ onActivated(() => {

 <template>
  <div class="inbox-hub" :class="{ 'inbox-hub--tabs': inboxEnabled }">
-    <header v-if="!inboxEnabled" class="page-header">
+    <header class="page-header">
      <button type="button" class="back-btn" :aria-label="t('messages.back')" @click="goBack">‹</button>
      <h1>{{ t(hubTitleKey) }}</h1>
    </header>

    <div v-if="inboxEnabled" class="hub-top-bar">
-      <button type="button" class="hub-back-btn" :aria-label="t('messages.back')" @click="goBack">‹</button>
      <nav class="hub-tabs" role="tablist">
        <button
          type="button"
@@ -217,27 +216,10 @@ onActivated(() => {
 }

 .hub-top-bar {
-  display: flex;
-  align-items: stretch;
-  gap: 6px;
  margin: 0;
  border-bottom: 1px solid var(--border);
 }

-.hub-back-btn {
-  flex-shrink: 0;
-  align-self: center;
-  width: 32px;
-  height: 32px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-card);
-  color: var(--text);
-  font-size: 20px;
-  line-height: 1;
-  cursor: pointer;
-}
-
 .hub-tabs {
  flex: 1;
  display: flex;
--- a/apps/player/src/views/ProfileView.vue
+++ b/apps/player/src/views/ProfileView.vue
@@ -3,7 +3,6 @@ import { ref, onMounted, onActivated } from 'vue';
 import { useRouter, RouterLink } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import api from '../api';
-import LocaleFlag from '../components/LocaleFlag.vue';
 import { useAuthStore } from '../stores/auth';
 import { useAppLocale } from '../composables/useAppLocale';
 import { usePlayerProfile } from '../composables/usePlayerProfile';
@@ -12,18 +11,15 @@ import { usePullToRefresh } from '../composables/usePullToRefresh';
 import { parseCashbackApiData, sumCashbackAmount } from '../utils/cashback';
 import { sumCashbackFromStats } from '../utils/walletStats';
 import WalletBalanceCard from '../components/WalletBalanceCard.vue';
-import { useInboxFeature } from '../composables/useInboxFeature';

-const { t, locale } = useI18n();
+const { t } = useI18n();
 const router = useRouter();
 const auth = useAuthStore();
-const { locales, setLocale, initFromUser } = useAppLocale();
+const { initFromUser } = useAppLocale();
 const { profileRaw, refreshProfile } = usePlayerProfile();
-const { hubRoute } = useInboxFeature();

 const loading = ref(true);
 const error = ref(false);
-const rulesExpanded = ref(false);
 const cashbackTotal = ref('0');

 const displayAmount = ref(0);
@@ -74,15 +70,6 @@ const pullIndicatorStyle = () => ({
  height: `${pullDistance.value}px`,
  opacity: Math.min(pullDistance.value / 48, 1),
 });
-
-async function changeLocale(code: string) {
-  await setLocale(code);
-}
-
-function logout() {
-  auth.logout();
-  router.push('/');
-}
 </script>

 <template>
@@ -144,82 +131,7 @@ function logout() {
        <span class="cell-chevron" aria-hidden="true">›</span>
      </RouterLink>

-      <RouterLink :to="hubRoute" class="settings-cell settings-cell--accent-entry">
-        <span class="cell-main">
-          <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
-            <path d="M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11A2.5 2.5 0 0 1 17.5 20H6.5A2.5 2.5 0 0 1 4 17.5v-11Z" />
-            <path d="m4 7 8 5.5L20 7" />
-          </svg>
-          <span class="cell-label">{{ t('messages.title') }}</span>
-        </span>
-        <span class="cell-chevron" aria-hidden="true">›</span>
-      </RouterLink>
    </section>
-
-    <section class="settings-group settings-group--profile">
-      <RouterLink to="/profile/edit" class="settings-cell">
-        <span class="cell-main">
-          <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
-            <circle cx="12" cy="8" r="3.5" />
-            <path d="M5 20c0-3.5 3.1-6 7-6s7 2.5 7 6" />
-          </svg>
-          <span class="cell-label">{{ t('profile.edit') }}</span>
-        </span>
-        <span class="cell-chevron" aria-hidden="true">›</span>
-      </RouterLink>
-
-      <div class="rules-cell">
-        <button
-          type="button"
-          class="settings-cell rules-toggle"
-          :aria-expanded="rulesExpanded"
-          @click="rulesExpanded = !rulesExpanded"
-        >
-          <span class="cell-main">
-            <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
-              <path d="M7 4h10v16H7z" />
-              <path d="M10 8h6M10 12h6M10 16h4" />
-            </svg>
-            <span class="cell-label">{{ t('profile.rules_title') }}</span>
-          </span>
-          <span class="cell-chevron" :class="{ open: rulesExpanded }" aria-hidden="true">›</span>
-        </button>
-        <div v-show="rulesExpanded" class="rules-body">
-          <p>{{ t('profile.rules_p1') }}</p>
-          <p>{{ t('profile.rules_p2') }}</p>
-          <p>{{ t('profile.rules_p3') }}</p>
-          <p>{{ t('profile.rules_p4') }}</p>
-          <p>{{ t('profile.rules_p5') }}</p>
-        </div>
-      </div>
-
-      <div class="settings-cell settings-cell--stack">
-        <div class="cell-head">
-          <svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
-            <circle cx="12" cy="12" r="9" />
-            <path d="M3 12h18M12 3c2.5 2.8 4 6 4 9s-1.5 6.2-4 9M12 3c-2.5 2.8-4 6-4 9s1.5 6.2 4 9" />
-          </svg>
-          <span class="cell-label">{{ t('profile.language') }}</span>
-        </div>
-        <div class="lang-segment" role="group" :aria-label="t('profile.language')">
-          <button
-            v-for="item in locales"
-            :key="item.code"
-            type="button"
-            class="lang-opt"
-            :class="{ active: locale === item.code }"
-            @click="changeLocale(item.code)"
-          >
-            <LocaleFlag :locale="item.code" :size="14" />
-            <span>{{ item.label }}</span>
-          </button>
-        </div>
-      </div>
-    </section>
-
-    <button type="button" class="logout-btn" @click="logout">
-      {{ t('auth.logout') }}
-    </button>
    </template>
  </div>
 </template>