thebet365/apps/player/src/views/desktop/DesktopMessagesHubShell.vue

<script setup lang="ts">
import { computed, onActivated, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import MessageListPanel from '../../components/MessageListPanel.vue';
import CustomerServicePanel from '../../components/CustomerServicePanel.vue';
import { usePlayerMessages } from '../../composables/usePlayerMessages';
import { useInboxFeature } from '../../composables/useInboxFeature';

const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const { inboxEnabled, hubTitleKey } = useInboxFeature();
const { messages, refreshUnreadCount } = usePlayerMessages();

type HubTab = 'messages' | 'support';

const activeTab = computed<HubTab>(() => {
  if (!inboxEnabled.value) return 'support';
  return route.query.tab === 'support' ? 'support' : 'messages';
});

const unreadInList = computed(() => messages.value.filter((item) => !item.isRead).length);
const isDetailRoute = computed(() => route.path.startsWith('/messages/') && route.params.id);
const showPlaceholder = computed(
  () => !isDetailRoute.value && activeTab.value === 'messages' && inboxEnabled.value,
);
const showSupportPanel = computed(() => !isDetailRoute.value && activeTab.value === 'support');

function switchTab(tab: HubTab) {
  if (!inboxEnabled.value || tab === activeTab.value) return;
  router.replace({ path: '/messages', query: tab === 'support' ? { tab: 'support' } : {} });
}

onMounted(refreshUnreadCount);
onActivated(refreshUnreadCount);
</script>

<template>
  <div class="desktop-layout-hub desktop-hub-page">
    <aside class="desktop-hub-left hub-aside">
      <nav class="hub-nav">
        <div class="hub-nav-title">{{ t(hubTitleKey) }}</div>
        <button
          v-if="inboxEnabled"
          type="button"
          class="hub-tab hover-bg"
          :class="{ active: activeTab === 'messages' }"
          @click="switchTab('messages')"
        >
          <span class="dot" />
          <span>{{ t('messages.tab_inbox') }}</span>
          <span v-if="unreadInList > 0" class="badge">{{ unreadInList }}</span>
        </button>
        <button
          type="button"
          class="hub-tab hover-bg"
          :class="{ active: activeTab === 'support' }"
          @click="switchTab('support')"
        >
          <span class="dot" />
          <span>{{ t('messages.tab_support') }}
          </span>
        </button>
      </nav>
      <MessageListPanel v-if="activeTab === 'messages' && inboxEnabled" class="hub-list" @click-message="id => $router.push('/messages/' + id)" />
    </aside>

    <main class="desktop-hub-right">
      <slot v-if="isDetailRoute" />
      <CustomerServicePanel v-else-if="showSupportPanel" class="hub-support" />
      <div v-else-if="showPlaceholder" class="hub-placeholder">
        {{ t('messages.select_hint') }}
      </div>
    </main>
  </div>
</template>

<style scoped>
.desktop-hub-page {
  flex: 1;
  min-height: 0;
}

.hub-aside {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

.hub-nav {
  flex-shrink: 0;
  padding: 10px;
  border-bottom: 1px solid var(--desktop-border);
}

.hub-nav-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px 10px;
}

.hub-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 4px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s, background 0.2s;
}

.hub-tab:hover {
  color: #fff;
}

.hub-tab.active {
  color: var(--primary-light);
  background: rgba(212, 175, 55, 0.08);
}

.hub-tab.active .dot {
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333;
  flex-shrink: 0;
}

.badge {
  margin-left: auto;
  background: rgba(255, 69, 58, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.hub-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.hub-support {
  flex: 1;
  min-height: 0;
}

.hub-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
}
</style>