336e8308cf
- Updated the ChatWindow component to provide clearer instructions and actions when no conversation is selected, improving user guidance. - Redesigned the MenuBar to display session timeout information more effectively. - Enhanced the SearchView component with a more user-friendly country selection using a Multiselect dropdown. - Improved the UserList component to display user age and gender, enhancing user profile visibility. - Updated various views (ChatView, FaqView, FeedbackView, PartnersView, RulesView, SafetyView) to include a consistent app branding link for better navigation. These changes collectively enhance the chat interface, improve user engagement, and streamline navigation across the application.
51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<template>
|
|
<div class="menu">
|
|
<template v-if="chatStore.isLoggedIn">
|
|
<button @click="handleLeave">{{ $t('menu_leave') }}</button>
|
|
<button @click="handleSearch" :class="{ 'is-active': chatStore.currentView === 'search' }">
|
|
{{ $t('menu_search') }}
|
|
</button>
|
|
<button
|
|
@click="handleInbox"
|
|
:class="{ 'has-unread': chatStore.unreadChatsCount > 0, 'is-active': chatStore.currentView === 'inbox' }"
|
|
>
|
|
{{ $t('menu_inbox') }}<span v-if="chatStore.unreadChatsCount > 0"> ({{ chatStore.unreadChatsCount }})</span>
|
|
</button>
|
|
<button @click="handleHistory" :class="{ 'is-active': chatStore.currentView === 'history' }">
|
|
{{ $t('menu_history') }}
|
|
</button>
|
|
<span v-if="chatStore.remainingSecondsToTimeout > 0" class="menu-info-text">
|
|
{{ formatTime(chatStore.remainingSecondsToTimeout) }}
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useChatStore } from '../stores/chat';
|
|
|
|
const chatStore = useChatStore();
|
|
|
|
function handleLeave() {
|
|
chatStore.logout();
|
|
}
|
|
|
|
function handleSearch() {
|
|
chatStore.setView('search');
|
|
}
|
|
|
|
function handleInbox() {
|
|
chatStore.setView('inbox');
|
|
}
|
|
|
|
function handleHistory() {
|
|
chatStore.setView('history');
|
|
}
|
|
|
|
function formatTime(seconds) {
|
|
const minutes = Math.floor(seconds / 60);
|
|
const secs = seconds % 60;
|
|
return `${minutes}:${secs.toString().padStart(2, '0')}`;
|
|
}
|
|
</script>
|