feat(theme-2): sync inbox/announcements/presence/deposit from main

apps/player/src/components/CustomerServicePanel.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { buildCustomerServiceUrl } from '../config/customerService';
+import { useAuthStore } from '../stores/auth';
+import { usePlayerProfile } from '../composables/usePlayerProfile';
+
+const { t } = useI18n();
+const auth = useAuthStore();
+const { profileRaw, avatarUrl } = usePlayerProfile();
+
+const iframeSrc = computed(() => {
+  const visitor = auth.user
+    ? {
+        name:
+          profileRaw.value?.username ||
+          profileRaw.value?.preferences?.phone ||
+          auth.user.username ||
+          '',
+        avatar: avatarUrl.value
+          ? new URL(avatarUrl.value, window.location.origin).href
+          : '',
+        id: String(profileRaw.value?.id ?? auth.user.id ?? ''),
+      }
+    : null;
+
+  return buildCustomerServiceUrl(t('support.connecting'), visitor);
+});
+</script>
+
+<template>
+  <div class="cs-panel">
+    <iframe
+      :key="iframeSrc"
+      class="cs-frame"
+      :src="iframeSrc"
+      :title="t('support.title')"
+      allow="microphone; camera; clipboard-read; clipboard-write"
+    />
+  </div>
+</template>
+
+<style scoped>
+.cs-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  margin: 0 -16px;
+  background: var(--bg-body);
+}
+
+.cs-frame {
+  flex: 1;
+  width: 100%;
+  min-height: calc(100dvh - 140px);
+  border: 0;
+  background: #fff;
+}
+</style>