0205352ae9
- Updated styles in style.css to improve overall design consistency and introduced CSS variables for better theming. - Refined ChatWindow.vue with improved no-conversation styling and adjusted image borders for a cleaner look. - Enhanced HistoryView.vue and InboxView.vue with new panel styles for better user experience and readability. - Revamped LoginForm.vue to provide a more engaging user interface with a landing page layout and cookie-based profile persistence. - Improved MenuBar.vue and SearchView.vue with active state indicators and refined item displays for better navigation. - Added logout functionality in chat store and server routes to manage user sessions effectively. - Introduced a new mockup view route for design previews. These changes collectively enhance the user experience and visual appeal of the application.
45 lines
1.2 KiB
Vue
45 lines
1.2 KiB
Vue
<template>
|
|
<div class="user-list">
|
|
<h3 v-if="chatStore.isLoggedIn">
|
|
{{ $t('logged_in_count', [chatStore.users.length]) }}
|
|
</h3>
|
|
|
|
<div v-if="chatStore.isLoggedIn" class="user-list-scroll">
|
|
<button
|
|
v-for="user in chatStore.users"
|
|
:key="user.sessionId"
|
|
:class="[
|
|
'user-item',
|
|
`gender-${user.gender}`,
|
|
{ 'is-active': chatStore.currentConversation === user.userName }
|
|
]"
|
|
@click="selectUser(user.userName)"
|
|
>
|
|
<img
|
|
v-if="user.isoCountryCode"
|
|
:src="`/static/flags/${user.isoCountryCode}.png`"
|
|
:alt="user.country"
|
|
class="flag-icon"
|
|
/>
|
|
<span class="user-main">
|
|
<span class="user-name">{{ user.userName }}</span>
|
|
<span class="user-country">{{ user.isoCountryCode || '' }}</span>
|
|
</span>
|
|
<span class="user-meta">{{ user.age }} · {{ user.gender }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useChatStore } from '../stores/chat';
|
|
|
|
const chatStore = useChatStore();
|
|
|
|
function selectUser(userName) {
|
|
if (userName !== chatStore.userName) {
|
|
chatStore.requestConversation(userName);
|
|
}
|
|
}
|
|
</script>
|