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

apps/player/src/views/HomeView.vue

@@ -1,21 +1,38 @@
 <script setup lang="ts">
-import { onActivated } from 'vue';
+import { onActivated, computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import emptyMatchesImg from '../assets/images/empty-matches.svg';
+import vsImg from '../assets/images/vs.png';
 import cardBg from '../assets/images/card-bg.webp';
 import BannerCarousel from '../components/BannerCarousel.vue';
-import VsBadge from '../components/VsBadge.vue';
 import { usePlayerHome } from '../composables/usePlayerHome';
 import TeamEmblem from '../components/TeamEmblem.vue';
 import GoldSpinner from '../components/GoldSpinner.vue';
 import { usePullToRefresh } from '../composables/usePullToRefresh';
 import { formatLocalMatchDateTime } from '@thebet365/shared';
+import type { PlayerHomeMatch } from '../composables/usePlayerHome';
+
+type HotTab = 'hot' | 'upcoming';
 
 const matchCardBg = `url(${cardBg})`;
 const { t, locale } = useI18n();
 const router = useRouter();
-const { banners, hotMatches, loading, load } = usePlayerHome();
+const { banners, hotMatches, upcomingMatches, loading, load, announcementItems } = usePlayerHome();
+const activeTab = ref<HotTab>('hot');
+
+const bannerFallbackTo = computed(() => {
+  const id = announcementItems.value[0]?.id;
+  return id ? `/announcements/${id}` : '/announcements';
+});
+
+const displayedMatches = computed<PlayerHomeMatch[]>(() =>
+  activeTab.value === 'hot' ? hotMatches.value : upcomingMatches.value,
+);
+
+const emptyMessage = computed(() =>
+  activeTab.value === 'hot' ? t('home.no_matches') : t('home.upcoming_empty'),
+);
 
 const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
   onRefresh: async () => { await load(true); },
@@ -47,14 +64,35 @@ function formatKickoff(startTime: string) {
       <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
     </div>
 
-    <BannerCarousel :banners="banners" />
+    <BannerCarousel :banners="banners" :fallback-to="bannerFallbackTo" />
 
-    <h2 class="section-title">{{ t('home.hot_matches') }}</h2>
-    <div class="match-card-list">
+    <div class="hot-tabs" role="tablist" :aria-label="t('home.hot_matches')">
+      <button
+        type="button"
+        role="tab"
+        class="hot-tab"
+        :class="{ active: activeTab === 'hot' }"
+        :aria-selected="activeTab === 'hot'"
+        @click="activeTab = 'hot'"
+      >
+        {{ t('home.hot_tab') }}
+      </button>
+      <button
+        type="button"
+        role="tab"
+        class="hot-tab"
+        :class="{ active: activeTab === 'upcoming' }"
+        :aria-selected="activeTab === 'upcoming'"
+        @click="activeTab = 'upcoming'"
+      >
+        {{ t('home.upcoming_tab') }}
+      </button>
+    </div>
     <div
-      v-for="(match, index) in hotMatches"
+      v-for="(match, index) in displayedMatches"
       :key="match.id"
       class="match-card"
+      :class="{ 'match-card--live-anim': activeTab === 'hot' && index < 3 }"
       @click="goMatch(match.id)"
     >
       <div class="match-info">
@@ -68,7 +106,31 @@ function formatKickoff(startTime: string) {
           :team-name="match.homeTeamName"
           :logo-url="match.homeTeamLogoUrl"
         />
-        <VsBadge size="md" />
+        <div class="vs-arena">
+          <svg class="hz-lightning" viewBox="0 0 72 28" aria-hidden="true">
+            <defs>
+              <linearGradient :id="`hzBoltGrad-${match.id}`" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stop-color="#5eb8ff" stop-opacity="0.2" />
+                <stop offset="35%" stop-color="#b8ecff" stop-opacity="1" />
+                <stop offset="50%" stop-color="#ffffff" stop-opacity="1" />
+                <stop offset="65%" stop-color="#ffd080" stop-opacity="1" />
+                <stop offset="100%" stop-color="#ff9040" stop-opacity="0.2" />
+              </linearGradient>
+            </defs>
+            <path
+              class="hz-path hz-path-main"
+              :stroke="`url(#hzBoltGrad-${match.id})`"
+              d="M1 14 H16 L20 5 L24 23 L28 9 L32 14 H40 L44 6 L48 22 L52 12 L56 14 H71"
+            />
+            <path
+              class="hz-path hz-path-sub"
+              :stroke="`url(#hzBoltGrad-${match.id})`"
+              d="M3 19 H14 L18 15 L22 19 H50 L54 16 L58 19 H69"
+            />
+          </svg>
+          <span class="hz-beam" aria-hidden="true" />
+          <img :src="vsImg" alt="" class="vs-img" />
+        </div>
         <TeamEmblem
           size="md"
           :team-code="match.awayTeamCode"
@@ -77,11 +139,10 @@ function formatKickoff(startTime: string) {
         />
       </div>
     </div>
-    </div>
 
-    <div v-if="!loading && !hotMatches.length" class="empty">
+    <div v-if="!loading && !displayedMatches.length" class="empty">
       <img :src="emptyMatchesImg" alt="" class="empty-icon" />
-      <p>{{ t('home.no_matches') }}</p>
+      <p>{{ emptyMessage }}</p>
     </div>
   </div>
 </template>
@@ -95,15 +156,34 @@ function formatKickoff(startTime: string) {
   transition: height 0.15s ease;
 }
 
-.section-title {
-  margin-top: var(--space-section);
-  margin-bottom: var(--space-section);
+.hot-tabs {
+  display: flex;
+  gap: 8px;
+  margin: 14px 0;
 }
 
-.match-card-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-section);
+.hot-tab {
+  flex: 1;
+  min-height: 36px;
+  padding: 0 12px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 600;
+  transition: background 0.2s, border-color 0.2s, color 0.2s;
+}
+
+.hot-tab.active {
+  font-weight: 700;
+  background: var(--surface-active);
+  border-color: var(--primary);
+  color: var(--text);
+}
+
+.hot-tab:active {
+  opacity: 0.92;
 }
 
 .match-card {
@@ -113,7 +193,7 @@ function formatKickoff(startTime: string) {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  margin-bottom: 0;
+  margin-bottom: 12px;
   padding: 14px 16px;
   min-height: 72px;
   border: 1px solid var(--border);
@@ -152,10 +232,10 @@ function formatKickoff(startTime: string) {
 }
 
 .match-teams {
-  font-weight: 600;
+  font-weight: 800;
   margin-bottom: 8px;
-  font-size: 15px;
-  line-height: 1.35;
+  font-size: 16px;
+  line-height: 1.3;
 }
 
 .match-time {
@@ -172,6 +252,189 @@ function formatKickoff(startTime: string) {
   max-width: 46%;
 }
 
+.vs-arena {
+  position: relative;
+  flex-shrink: 0;
+  width: 64px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hz-lightning {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.hz-path {
+  fill: none;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  filter: drop-shadow(0 0 4px rgba(120, 210, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 180, 80, 0.55));
+  opacity: 0;
+}
+
+.match-card--live-anim .hz-path-main {
+  animation: hz-strike-main 2.6s ease-in-out infinite;
+}
+
+.match-card--live-anim .hz-path-sub {
+  stroke-width: 1.6;
+  animation: hz-strike-sub 2.6s ease-in-out infinite;
+  animation-delay: 0.12s;
+}
+
+.match-card--live-anim .hz-beam {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 2px;
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 1;
+  background: linear-gradient(
+    90deg,
+    rgba(94, 184, 255, 0) 0%,
+    rgba(184, 236, 255, 0.95) 28%,
+    #fff 50%,
+    rgba(255, 208, 128, 0.95) 72%,
+    rgba(255, 144, 64, 0) 100%
+  );
+  opacity: 0;
+  filter: blur(0.4px);
+  animation: hz-beam-flash 2.6s ease-in-out infinite;
+}
+
+.hz-beam {
+  display: none;
+}
+
+.vs-img {
+  position: relative;
+  z-index: 0;
+  width: 48px;
+  height: auto;
+  object-fit: contain;
+  filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.35));
+}
+
+.match-card--live-anim .vs-img {
+  animation: vs-glow 2.4s ease-in-out infinite;
+}
+
+@keyframes hz-strike-main {
+  0%,
+  72%,
+  100% {
+    opacity: 0;
+  }
+
+  74% {
+    opacity: 1;
+  }
+
+  75% {
+    opacity: 0.25;
+  }
+
+  76% {
+    opacity: 0.95;
+  }
+
+  78% {
+    opacity: 0;
+  }
+}
+
+@keyframes hz-strike-sub {
+  0%,
+  74%,
+  100% {
+    opacity: 0;
+  }
+
+  76% {
+    opacity: 0.85;
+  }
+
+  77% {
+    opacity: 0.2;
+  }
+
+  78% {
+    opacity: 0.7;
+  }
+
+  80% {
+    opacity: 0;
+  }
+}
+
+@keyframes hz-beam-flash {
+  0%,
+  71%,
+  100% {
+    opacity: 0;
+    transform: translateY(-50%) scaleX(0.6);
+  }
+
+  73% {
+    opacity: 0.85;
+    transform: translateY(-50%) scaleX(1);
+  }
+
+  75% {
+    opacity: 0.15;
+    transform: translateY(-50%) scaleX(0.95);
+  }
+
+  76% {
+    opacity: 0.75;
+    transform: translateY(-50%) scaleX(1);
+  }
+
+  78% {
+    opacity: 0;
+    transform: translateY(-50%) scaleX(1.05);
+  }
+}
+
+@keyframes vs-glow {
+  0%,
+  100% {
+    opacity: 0.82;
+    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
+  }
+
+  50% {
+    opacity: 1;
+    filter:
+      drop-shadow(0 0 3px rgba(255, 230, 140, 0.7))
+      drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vs-img {
+    animation: none;
+    filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.35));
+  }
+
+  .hz-path,
+  .hz-beam {
+    animation: none;
+    opacity: 0;
+  }
+}
+
 .empty {
   text-align: center;
   color: var(--text-muted);