added profile pictures to messages and improved chat page layout
This commit is contained in:
BIN
src/assets/default-avatar.png
Normal file
BIN
src/assets/default-avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -19,6 +19,7 @@ body,
|
||||
:root {
|
||||
--bg: #0f1116;
|
||||
--panel: #171922;
|
||||
--panel-accent: #12141B;
|
||||
--text: #e6e6eb;
|
||||
--muted: #9aa0aa;
|
||||
--accent: #f27aa3;
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
<template>
|
||||
<InvitePeopleModal v-if="showInviteModal" :room_uuid=props.uuid @close="showInviteModal = false" />
|
||||
<InvitePeopleModal v-if="showInviteModal" :room_uuid=props.uuid @close="showInviteModal = false" />
|
||||
|
||||
<div v-if="uuid === 'none'" class="no-room">
|
||||
<div class="empty-state">
|
||||
<i class="fa-solid fa-comments"></i>
|
||||
<p>{{ $t('chat-no-room') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="chat-container">
|
||||
<!-- <h2 class="room-name">{{ currentRoom?.name }}</h2> -->
|
||||
|
||||
<div class="messages-container" ref="messageListRef" @scroll="handleScroll">
|
||||
<MessageList :messages="messages" />
|
||||
<div v-if="uuid === 'none'" class="no-room">
|
||||
<div class="empty-state">
|
||||
<i class="fa-solid fa-comments"></i>
|
||||
<p>{{ $t('chat-no-room') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<button v-if="isOwner && !currentRoom?.global" class="invite-btn" @click="showInviteModal = true"
|
||||
:title="$t('chat-invite-title')">
|
||||
<i class="fa-solid fa-users"></i>
|
||||
</button>
|
||||
<div v-else class="chat-container">
|
||||
<h2 class="room-name">{{ currentRoom?.name }}</h2>
|
||||
|
||||
<MessageInput ref="messageInputRef" @send="onSend" />
|
||||
<div class="messages-container" ref="messageListRef" @scroll="handleScroll">
|
||||
<MessageList :messages="messages" />
|
||||
</div>
|
||||
|
||||
<div class="input-container">
|
||||
<button v-if="isOwner && !currentRoom?.global" class="invite-btn" @click="showInviteModal = true"
|
||||
:title="$t('chat-invite-title')">
|
||||
<i class="fa-solid fa-users"></i>
|
||||
</button>
|
||||
|
||||
<MessageInput ref="messageInputRef" @send="onSend" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -52,220 +52,222 @@ const showInviteModal = ref(false);
|
||||
let socket: WebSocket | null = null;
|
||||
|
||||
const isOwner = computed(() => {
|
||||
if (!currentUser.value || !currentRoom.value) return false;
|
||||
return currentUser.value.uuid === currentRoom.value.owner_uuid;
|
||||
if (!currentUser.value || !currentRoom.value) return false;
|
||||
return currentUser.value.uuid === currentRoom.value.owner_uuid;
|
||||
});
|
||||
|
||||
async function initializeRoom() {
|
||||
if (socket) { await socket.disconnect(); socket = null; }
|
||||
if (socket) { await socket.disconnect(); socket = null; }
|
||||
|
||||
messages.value = [];
|
||||
hasMore.value = true;
|
||||
currentRoom.value = null;
|
||||
messages.value = [];
|
||||
hasMore.value = true;
|
||||
currentRoom.value = null;
|
||||
|
||||
if (props.uuid === 'none') return;
|
||||
if (props.uuid === 'none') return;
|
||||
|
||||
try {
|
||||
const [msgs, roomInfo, auth] = await Promise.all([
|
||||
fetchMessages(props.uuid, undefined, 40), // Load first 40
|
||||
fetchRoomInfo(props.uuid),
|
||||
getAuthData()
|
||||
]);
|
||||
try {
|
||||
const [msgs, roomInfo, auth] = await Promise.all([
|
||||
fetchMessages(props.uuid, undefined, 40), // Load first 40
|
||||
fetchRoomInfo(props.uuid),
|
||||
getAuthData()
|
||||
]);
|
||||
|
||||
messages.value = msgs;
|
||||
currentRoom.value = roomInfo;
|
||||
currentUser.value = auth.user;
|
||||
if (msgs.length < 40) hasMore.value = false;
|
||||
console.log("First message payload:", msgs[0]);
|
||||
|
||||
await nextTick();
|
||||
scrollToBottom();
|
||||
messages.value = msgs;
|
||||
currentRoom.value = roomInfo;
|
||||
currentUser.value = auth.user;
|
||||
if (msgs.length < 40) hasMore.value = false;
|
||||
|
||||
const wsToken = await getWsToken(props.uuid);
|
||||
const url = `${API_WS}/rooms/${props.uuid}?token=${wsToken}`;
|
||||
socket = await WebSocket.connect(url);
|
||||
await nextTick();
|
||||
scrollToBottom();
|
||||
|
||||
socket.addListener((msg) => {
|
||||
if (msg.type === 'Text') {
|
||||
const data: Message = JSON.parse(msg.data);
|
||||
if (!messages.value.some(m => m.uuid === data.uuid)) {
|
||||
messages.value.push(data);
|
||||
nextTick().then(scrollToBottomIfAtEnd);
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Room initialization failed:", err);
|
||||
}
|
||||
const wsToken = await getWsToken(props.uuid);
|
||||
const url = `${API_WS}/rooms/${props.uuid}?token=${wsToken}`;
|
||||
socket = await WebSocket.connect(url);
|
||||
|
||||
socket.addListener((msg) => {
|
||||
if (msg.type === 'Text') {
|
||||
const data: Message = JSON.parse(msg.data);
|
||||
if (!messages.value.some(m => m.uuid === data.uuid)) {
|
||||
messages.value.push(data);
|
||||
nextTick().then(scrollToBottomIfAtEnd);
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Room initialization failed:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleScroll() {
|
||||
const el = messageListRef.value;
|
||||
if (!el) return;
|
||||
const el = messageListRef.value;
|
||||
if (!el) return;
|
||||
|
||||
// If user scrolls to the top, is not already loading, and there's more data
|
||||
if (el.scrollTop < 50 && !isLoadingMore.value && hasMore.value) {
|
||||
await loadMore();
|
||||
}
|
||||
// If user scrolls to the top, is not already loading, and there's more data
|
||||
if (el.scrollTop < 50 && !isLoadingMore.value && hasMore.value) {
|
||||
await loadMore();
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMore() {
|
||||
if (messages.value.length === 0) return;
|
||||
if (messages.value.length === 0) return;
|
||||
|
||||
isLoadingMore.value = true;
|
||||
const oldestMsgUuid = messages.value[0].uuid;
|
||||
isLoadingMore.value = true;
|
||||
const oldestMsgUuid = messages.value[0].uuid;
|
||||
|
||||
try {
|
||||
const olderMsgs = await fetchMessages(props.uuid, oldestMsgUuid, 30);
|
||||
try {
|
||||
const olderMsgs = await fetchMessages(props.uuid, oldestMsgUuid, 30);
|
||||
|
||||
if (olderMsgs.length === 0) {
|
||||
hasMore.value = false;
|
||||
return;
|
||||
if (olderMsgs.length === 0) {
|
||||
hasMore.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Capture height before adding messages to maintain scroll position
|
||||
const el = messageListRef.value;
|
||||
const previousScrollHeight = el?.scrollHeight || 0;
|
||||
|
||||
messages.value = [...olderMsgs, ...messages.value];
|
||||
|
||||
await nextTick();
|
||||
|
||||
// Restore scroll position so the view doesn't jump
|
||||
if (el) {
|
||||
el.scrollTop = el.scrollHeight - previousScrollHeight;
|
||||
}
|
||||
|
||||
if (olderMsgs.length < 30) hasMore.value = false;
|
||||
} catch (err) {
|
||||
console.error("Failed to load more messages:", err);
|
||||
} finally {
|
||||
isLoadingMore.value = false;
|
||||
}
|
||||
|
||||
// Capture height before adding messages to maintain scroll position
|
||||
const el = messageListRef.value;
|
||||
const previousScrollHeight = el?.scrollHeight || 0;
|
||||
|
||||
messages.value = [...olderMsgs, ...messages.value];
|
||||
|
||||
await nextTick();
|
||||
|
||||
// Restore scroll position so the view doesn't jump
|
||||
if (el) {
|
||||
el.scrollTop = el.scrollHeight - previousScrollHeight;
|
||||
}
|
||||
|
||||
if (olderMsgs.length < 30) hasMore.value = false;
|
||||
} catch (err) {
|
||||
console.error("Failed to load more messages:", err);
|
||||
} finally {
|
||||
isLoadingMore.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToBottom() {
|
||||
if (messageListRef.value) {
|
||||
messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
|
||||
}
|
||||
if (messageListRef.value) {
|
||||
messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
// Only scroll to bottom for new messages if the user is already near the bottom
|
||||
function scrollToBottomIfAtEnd() {
|
||||
const el = messageListRef.value;
|
||||
if (!el) return;
|
||||
const threshold = 150;
|
||||
const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
|
||||
if (isAtBottom) scrollToBottom();
|
||||
const el = messageListRef.value;
|
||||
if (!el) return;
|
||||
const threshold = 150;
|
||||
const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
|
||||
if (isAtBottom) scrollToBottom();
|
||||
}
|
||||
|
||||
|
||||
|
||||
const handleGlobalKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
const active = document.activeElement?.tagName.toLowerCase();
|
||||
const isTyping = active === 'input' || active === 'textarea';
|
||||
if (!isTyping && messageInputRef.value) {
|
||||
event.preventDefault();
|
||||
messageInputRef.value.focus();
|
||||
if (event.key === 'Enter') {
|
||||
const active = document.activeElement?.tagName.toLowerCase();
|
||||
const isTyping = active === 'input' || active === 'textarea';
|
||||
if (!isTyping && messageInputRef.value) {
|
||||
event.preventDefault();
|
||||
messageInputRef.value.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
async function onSend(content: string) {
|
||||
if (props.uuid === 'none') return;
|
||||
await sendMessage(props.uuid, content);
|
||||
if (props.uuid === 'none') return;
|
||||
await sendMessage(props.uuid, content);
|
||||
}
|
||||
|
||||
watch(() => props.uuid, () => {
|
||||
initializeRoom();
|
||||
initializeRoom();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
initializeRoom();
|
||||
window.addEventListener('keydown', handleGlobalKeyDown);
|
||||
initializeRoom();
|
||||
window.addEventListener('keydown', handleGlobalKeyDown);
|
||||
});
|
||||
|
||||
onUnmounted(async () => {
|
||||
if (socket) {
|
||||
await socket.disconnect();
|
||||
}
|
||||
window.removeEventListener('keydown', handleGlobalKeyDown);
|
||||
if (socket) {
|
||||
await socket.disconnect();
|
||||
}
|
||||
window.removeEventListener('keydown', handleGlobalKeyDown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1.5rem;
|
||||
scroll-behavior: auto;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1.5rem;
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-end;
|
||||
padding: 10px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-end;
|
||||
padding: 10px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* Ensure the MessageInput component expands to fill the width */
|
||||
:deep(.input-container > *:last-child) {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* .room-name { */
|
||||
/* margin: 15px 0; */
|
||||
/* text-align: center; */
|
||||
/* } */
|
||||
.room-name {
|
||||
margin: 15px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-more {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.invite-btn {
|
||||
margin: 0;
|
||||
padding: 18px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--radius);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 18px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--radius);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.no-room {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--muted);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.3;
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.3;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,49 +1,125 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li v-for="(m, i) in messages" :key="i" class="message" :class="{ 'is-me': m.sender_uuid === currentUserUuid }">
|
||||
<div class="sender-info">
|
||||
<img :src="getAvatar(m.sender_uuid)" @error="handleAvatarError" class="sender-avatar" />
|
||||
<div class="sender">{{ m.sender }}</div>
|
||||
<span class="timestamp">{{ m.sent_at }}</span>
|
||||
</div>
|
||||
<div class="message-content">{{ m.content }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import type { Message } from '../types'
|
||||
import { getAvatar } from '../api/account.ts'
|
||||
import defaultAvatar from '../assets/default-avatar.png'
|
||||
import { getAuthData } from '../authStore';
|
||||
|
||||
defineProps<{ messages: Message[] }>()
|
||||
|
||||
const currentUserUuid = ref<string | null>(null)
|
||||
|
||||
onMounted(async () => {
|
||||
const auth = await getAuthData()
|
||||
if (auth.user) {
|
||||
currentUserUuid.value = auth.user.uuid
|
||||
}
|
||||
})
|
||||
|
||||
const handleAvatarError = (event: Event) => {
|
||||
const img = event.target as HTMLImageElement;
|
||||
img.src = defaultAvatar;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul>
|
||||
<li v-for="(m, i) in messages" :key="i" class="message">
|
||||
<div class="sender">{{ m.sender }} <span class="timestamp">{{ m.sent_at }}</span></div>
|
||||
<div class="message-content">{{ m.content }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 0.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
padding: 10px;
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
/* gap: 0.5rem; */
|
||||
background: var(--panel-accent);
|
||||
padding: 0;
|
||||
max-width: 80%;
|
||||
width: fit-content;
|
||||
align-self: flex-start;
|
||||
/* border: 1px solid var(--border); */
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.sender-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
/* border: 1px solid var(--border); */
|
||||
border-bottom: 1px solid var(--border);
|
||||
/* border-radius: var(--radius) var(--radius) 0 0; */
|
||||
/* background-color: rgba(255, 255, 255, 0.02); */
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.sender-avatar {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.message.is-me {
|
||||
align-self: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message.is-me .sender-info {
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.message.is-me .message-content {
|
||||
text-align: right;
|
||||
padding-right: 1rem;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.sender {
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
/* flex: 1; */
|
||||
}
|
||||
|
||||
.sender .timestamp {
|
||||
font-weight: normal;
|
||||
opacity: 0.7;
|
||||
font-size: 0.85rem;
|
||||
margin-left: 0.5rem;
|
||||
.timestamp {
|
||||
font-weight: normal;
|
||||
opacity: 0.7;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
padding-left: 1rem;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
padding-left: 1rem;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<template>
|
||||
<div class="room-list">
|
||||
<header class="rooms-header">
|
||||
<h2>{{ $t('chat-room-list-title') }}</h2>
|
||||
<button class="create-btn" @click="showCreate = true" :title="$t('chat-create-title')">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
</button>
|
||||
</header>
|
||||
<div class="room-list">
|
||||
<header class="rooms-header">
|
||||
<h2>{{ $t('chat-room-list-title') }}</h2>
|
||||
<button class="create-btn" @click="showCreate = true" :title="$t('chat-create-title')">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<Teleport to="body">
|
||||
<CreateRoomModal v-if="showCreate" @close="showCreate = false" @created="rooms.push($event)" />
|
||||
</Teleport>
|
||||
<Teleport to="body">
|
||||
<CreateRoomModal v-if="showCreate" @close="showCreate = false" @created="rooms.push($event)" />
|
||||
</Teleport>
|
||||
|
||||
<div class="scroll-area">
|
||||
<router-link v-for="room in rooms" :key="room.uuid" :to="`/rooms/${room.uuid}`" class="btn room-item"
|
||||
:class="{ active: route.params.uuid === room.uuid }" @click="emit('select-room')">
|
||||
<div class="room-info">
|
||||
<span class="room-name">{{ room.name }}</span>
|
||||
<span class="room-owner">{{ $t('chat-room-owner', { owner: room.owner_name }) }}</span>
|
||||
<div class="scroll-area">
|
||||
<router-link v-for="room in rooms" :key="room.uuid" :to="`/rooms/${room.uuid}`" class="btn room-item"
|
||||
:class="{ active: route.params.uuid === room.uuid }" @click="emit('select-room')">
|
||||
<div class="room-info">
|
||||
<span class="room-name">{{ room.name }}</span>
|
||||
<span class="room-owner">{{ $t('chat-room-owner', { owner: room.owner_name }) }}</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -37,93 +37,94 @@ const rooms = ref<Room[]>([]);
|
||||
const emit = defineEmits(['select-room']);
|
||||
|
||||
onMounted(async () => {
|
||||
rooms.value = await fetchRooms();
|
||||
rooms.value = await fetchRooms();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.room-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.rooms-header {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.rooms-header h2 {
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
margin-left: 38px;
|
||||
/* font-size: 1rem; */
|
||||
margin: 0;
|
||||
margin-left: 45px;
|
||||
}
|
||||
|
||||
.scroll-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.room-item {
|
||||
display: block;
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: var(--muted);
|
||||
transition: all 0.2s;
|
||||
display: block;
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: var(--muted);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.room-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.room-item.active {
|
||||
background: var(--accent);
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
/* border: 1px solid var(--border); */
|
||||
background: var(--panel-accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.room-item.active .room-owner {
|
||||
color: rgba(0, 0, 0, 1);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.room-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.room-name {
|
||||
font-weight: 500;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.room-owner {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.6;
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.create-btn {
|
||||
margin: 0;
|
||||
padding: 18px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--radius);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 18px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--radius);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.create-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,21 +1,22 @@
|
||||
<template>
|
||||
<div class="chat-layout">
|
||||
<button class="menu-toggle" :class="{ 'sidebar-closed': !isSidebarOpen }" @click="isSidebarOpen = !isSidebarOpen">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</button>
|
||||
<div class="chat-layout">
|
||||
<button class="menu-toggle" :class="{ 'sidebar-closed': !isSidebarOpen }"
|
||||
@click="isSidebarOpen = !isSidebarOpen">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</button>
|
||||
|
||||
<aside class="sidebar" :class="{ 'is-open': isSidebarOpen }">
|
||||
<div class="sidebar-content">
|
||||
<RoomList @select-room="handleRoomSelection" />
|
||||
</div>
|
||||
</aside>
|
||||
<aside class="sidebar" :class="{ 'is-open': isSidebarOpen }">
|
||||
<div class="sidebar-content">
|
||||
<RoomList @select-room="handleRoomSelection" />
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div v-if="isSidebarOpen" class="sidebar-overlay" @click="isSidebarOpen = false"></div>
|
||||
<div v-if="isSidebarOpen" class="sidebar-overlay" @click="isSidebarOpen = false"></div>
|
||||
|
||||
<main class="chat-window-container" :class="{ 'sidebar-is-open': isSidebarOpen }">
|
||||
<ChatWindow :uuid="uuid" />
|
||||
</main>
|
||||
</div>
|
||||
<main class="chat-window-container" :class="{ 'sidebar-is-open': isSidebarOpen }">
|
||||
<ChatWindow :uuid="uuid" />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -27,117 +28,117 @@ defineProps<{ uuid: string }>();
|
||||
const isSidebarOpen = ref(true);
|
||||
|
||||
const handleRoomSelection = () => {
|
||||
if (window.innerWidth <= 720) {
|
||||
isSidebarOpen.value = false;
|
||||
}
|
||||
if (window.innerWidth <= 720) {
|
||||
isSidebarOpen.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-layout {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 300px;
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--panel);
|
||||
transition: width 0.3s ease, transform 0.3s ease;
|
||||
z-index: 20;
|
||||
overflow: hidden;
|
||||
width: 300px;
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--panel);
|
||||
transition: width 0.3s ease, transform 0.3s ease;
|
||||
z-index: 20;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar:not(.is-open) {
|
||||
width: 0;
|
||||
border-right: none;
|
||||
width: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chat-window-container {
|
||||
flex: 1;
|
||||
padding-left: 38px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
transition: all 0.3s ease;
|
||||
flex: 1;
|
||||
/* padding-left: 38px; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 15px;
|
||||
z-index: 30;
|
||||
background: var(--panel);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: left 0.3s ease;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
z-index: 30;
|
||||
background: var(--panel);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: left 0.3s ease;
|
||||
}
|
||||
|
||||
.menu-toggle.sidebar-closed {
|
||||
left: 15px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.menu-toggle i {
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
@media (min-width: 721px) {
|
||||
.chat-window-container.sidebar-is-open {
|
||||
padding-left: 0;
|
||||
}
|
||||
.chat-window-container.sidebar-is-open {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 280px;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 280px;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.sidebar.is-open {
|
||||
transform: translateX(0);
|
||||
width: 280px;
|
||||
}
|
||||
.sidebar.is-open {
|
||||
transform: translateX(0);
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.sidebar:not(.is-open) {
|
||||
width: 280px;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.sidebar:not(.is-open) {
|
||||
width: 280px;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
width: 280px;
|
||||
}
|
||||
.sidebar-content {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.sidebar-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 15;
|
||||
}
|
||||
.sidebar-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.menu-toggle:hover i {
|
||||
color: var(--muted);
|
||||
}
|
||||
.menu-toggle:hover i {
|
||||
color: var(--muted);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,48 +1,49 @@
|
||||
<template>
|
||||
<div class="settings-page">
|
||||
<h1>{{ $t('settings-title') }}</h1>
|
||||
<div class="settings-page">
|
||||
<h1>{{ $t('settings-title') }}</h1>
|
||||
|
||||
<UpdateAccountModal v-if="showUpdateModal" :user="user" @close="showUpdateModal = false" @updated="fetchUserData" />
|
||||
<UploadAvatarModal v-if="showAvatarModal" @close="showAvatarModal = false" @updated="fetchUserData" />
|
||||
<UpdateAccountModal v-if="showUpdateModal" :user="user" @close="showUpdateModal = false"
|
||||
@updated="fetchUserData" />
|
||||
<UploadAvatarModal v-if="showAvatarModal" @close="showAvatarModal = false" @updated="fetchUserData" />
|
||||
|
||||
<h2>{{ $t('settings-account') }}</h2>
|
||||
<div v-if="user" class="info-card">
|
||||
<div class="avatar-display">
|
||||
<img :src="user.avatar_url || '/tauri.svg'" class="avatar-img" />
|
||||
<h2>{{ $t('settings-account') }}</h2>
|
||||
<div v-if="user" class="info-card">
|
||||
<div class="avatar-display">
|
||||
<img :src="user.avatar_url || '/tauri.svg'" class="avatar-img" />
|
||||
|
||||
<button class="update-btn" @click="showAvatarModal = true">
|
||||
{{ $t('settings-upload-avatar-btn') || 'Change Avatar' }}
|
||||
</button>
|
||||
</div>
|
||||
<button class="update-btn" @click="showAvatarModal = true">
|
||||
{{ $t('settings-upload-avatar-btn') || 'Change Avatar' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="info-display">
|
||||
<div class="left">
|
||||
<p><strong>{{ $t('settings-label-username') }}</strong> {{ user.username }}</p>
|
||||
<p><strong>{{ $t('settings-label-email') }}</strong> {{ user.email }}</p>
|
||||
<div class="info-display">
|
||||
<div class="left">
|
||||
<p><strong>{{ $t('settings-label-username') }}</strong> {{ user.username }}</p>
|
||||
<p><strong>{{ $t('settings-label-email') }}</strong> {{ user.email }}</p>
|
||||
</div>
|
||||
|
||||
<button class="update-btn" @click="showUpdateModal = true">{{ $t('settings-update-btn') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="loading-state">
|
||||
<p>{{ $t('settings-loading') }}</p>
|
||||
</div>
|
||||
|
||||
<button class="update-btn" @click="showUpdateModal = true">{{ $t('settings-update-btn') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="loading-state">
|
||||
<p>{{ $t('settings-loading') }}</p>
|
||||
</div>
|
||||
<h2>{{ $t('settings-language') }}</h2>
|
||||
<div class="input-group">
|
||||
<div class="lang-grid">
|
||||
<button v-for="lang in languages" :key="lang.code" class="lang-btn"
|
||||
:class="{ active: currentLang === lang.code }" @click="changeLanguage(lang.code)">
|
||||
{{ lang.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>{{ $t('settings-language') }}</h2>
|
||||
<div class="input-group">
|
||||
<div class="lang-grid">
|
||||
<button v-for="lang in languages" :key="lang.code" class="lang-btn"
|
||||
:class="{ active: currentLang === lang.code }" @click="changeLanguage(lang.code)">
|
||||
{{ lang.name }}
|
||||
<button class="logout-btn" @click="logout">
|
||||
<i class="fa-solid fa-right-from-bracket"></i>
|
||||
<span>{{ $t('settings-logout-btn') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="logout-btn" @click="logout">
|
||||
<i class="fa-solid fa-right-from-bracket"></i>
|
||||
<span>{{ $t('settings-logout-btn') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -67,80 +68,80 @@ const currentLang = ref('')
|
||||
const languages = computed(() => getSupportedLanguagesMetadata())
|
||||
|
||||
async function fetchUserData() {
|
||||
try {
|
||||
const auth = await getAuthData()
|
||||
user.value = auth.user
|
||||
} catch (err) {
|
||||
console.error("Failed to load user data:", err)
|
||||
}
|
||||
try {
|
||||
const auth = await getAuthData()
|
||||
user.value = auth.user
|
||||
} catch (err) {
|
||||
console.error("Failed to load user data:", err)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const pref = await getLocalePreference()
|
||||
// Synchronize the UI state with the actual active language
|
||||
currentLang.value = pref || (navigator.language.split('-')[0])
|
||||
const pref = await getLocalePreference()
|
||||
// Synchronize the UI state with the actual active language
|
||||
currentLang.value = pref || (navigator.language.split('-')[0])
|
||||
|
||||
fetchUserData()
|
||||
fetchUserData()
|
||||
})
|
||||
|
||||
async function changeLanguage(code: string) {
|
||||
const actual = setLanguage(code)
|
||||
currentLang.value = actual
|
||||
await saveLocalePreference(actual)
|
||||
const actual = setLanguage(code)
|
||||
currentLang.value = actual
|
||||
await saveLocalePreference(actual)
|
||||
}
|
||||
|
||||
function logout() {
|
||||
authLogout()
|
||||
router.push('/login')
|
||||
authLogout()
|
||||
router.push('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settings-page {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
gap: 1rem;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
gap: 1rem;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.avatar-display,
|
||||
.info-display {
|
||||
display: flex;
|
||||
/* border: 1px solid var(--border); */
|
||||
/* border-radius: var(--radius); */
|
||||
/* background-color: rgba(255, 255, 255, 0.02); */
|
||||
/* padding: 1rem; */
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
/* border: 1px solid var(--border); */
|
||||
/* border-radius: var(--radius); */
|
||||
/* background-color: rgba(255, 255, 255, 0.02); */
|
||||
/* padding: 1rem; */
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--border);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--border);
|
||||
}
|
||||
|
||||
/* .update-btn { */
|
||||
@@ -150,63 +151,63 @@ h2 {
|
||||
/* } */
|
||||
|
||||
.lang-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.lang-btn {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lang-btn.active {
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
border-color: var(--accent);
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 30px;
|
||||
padding: 10px 20px;
|
||||
color: var(--text);
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--error);
|
||||
border-radius: var(--radius);
|
||||
width: fit-content;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 30px;
|
||||
padding: 10px 20px;
|
||||
color: var(--text);
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--error);
|
||||
border-radius: var(--radius);
|
||||
width: fit-content;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
color: rgba(255, 80, 80, 0.8);
|
||||
color: rgba(255, 80, 80, 0.8);
|
||||
}
|
||||
|
||||
.logout-btn:hover i {
|
||||
color: rgba(255, 80, 80, 0.8);
|
||||
color: rgba(255, 80, 80, 0.8);
|
||||
}
|
||||
|
||||
.logout-btn i {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
|
||||
.avatar-display,
|
||||
.info-display {
|
||||
justify-content: center;
|
||||
}
|
||||
.avatar-display,
|
||||
.info-display {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
57
src/types.ts
57
src/types.ts
@@ -1,51 +1,52 @@
|
||||
export interface User {
|
||||
uuid: string
|
||||
username: string
|
||||
email: string
|
||||
avatar_url: string
|
||||
uuid: string
|
||||
username: string
|
||||
email: string
|
||||
avatar_url: string
|
||||
}
|
||||
|
||||
export interface LoginResponse {
|
||||
uuid: string
|
||||
username: string
|
||||
email: string
|
||||
token: string
|
||||
uuid: string
|
||||
username: string
|
||||
email: string
|
||||
token: string
|
||||
}
|
||||
|
||||
export interface UpdateUserResponse {
|
||||
username: string
|
||||
email: string
|
||||
username: string
|
||||
email: string
|
||||
}
|
||||
|
||||
export interface Room {
|
||||
uuid: string
|
||||
owner_name: string
|
||||
owner_uuid: string
|
||||
name: string
|
||||
global: boolean
|
||||
uuid: string
|
||||
owner_name: string
|
||||
owner_uuid: string
|
||||
name: string
|
||||
global: boolean
|
||||
}
|
||||
|
||||
export interface Message {
|
||||
uuid: string
|
||||
sender: string
|
||||
message_type: 'text'
|
||||
content: string
|
||||
sent_at: string
|
||||
uuid: string
|
||||
sender: string
|
||||
sender_uuid: string
|
||||
message_type: 'text'
|
||||
content: string
|
||||
sent_at: string
|
||||
}
|
||||
|
||||
export interface Friend {
|
||||
uuid: string
|
||||
username: string
|
||||
uuid: string
|
||||
username: string
|
||||
}
|
||||
|
||||
export interface FriendRequest {
|
||||
sender_uuid: string
|
||||
sender_username: string
|
||||
sender_uuid: string
|
||||
sender_username: string
|
||||
}
|
||||
|
||||
export interface RoomInvite {
|
||||
room_uuid: string
|
||||
room_name: string
|
||||
sender_uuid: string
|
||||
sender_username: string
|
||||
room_uuid: string
|
||||
room_name: string
|
||||
sender_uuid: string
|
||||
sender_username: string
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user