Implement live last message update

This commit is contained in:
2025-10-17 15:52:12 +03:00
Unverified
parent dd946e7466
commit a92f91d791
14 changed files with 518 additions and 258 deletions
+14 -29
View File
@@ -1,11 +1,21 @@
import { useAppState } from "@/pages/chat/state";
import { useAppState, type ChatTabs } from "@/pages/chat/state";
import { UnifiedChatsList } from "./UnifiedChatsList";
import type { FormEvent } from "react";
import type { Tabs } from "mdui/components/tabs";
export function ChatTabs() {
const { chat, setActiveTab, switchToPublicChat } = useAppState();
const { chat, setActiveTab } = useAppState();
function handleChange(e: FormEvent<Tabs> & CustomEvent<{ value: string }>) {
setActiveTab(e.detail.value as ChatTabs);
}
return (
<div className="chat-tabs">
<mdui-tabs value={chat.activeTab} full-width onChange={(e: any) => setActiveTab(e.detail.value)}>
<mdui-tabs
value={chat.activeTab}
full-width
onChange={handleChange}>
<mdui-tab value="chats">
Чаты
</mdui-tab>
@@ -15,37 +25,12 @@ export function ChatTabs() {
<mdui-tab value="contacts">
Контакты
</mdui-tab>
<mdui-tab value="dms">
ЛС
</mdui-tab>
<mdui-tab-panel slot="panel" value="chats">
<mdui-list>
<mdui-list-item
headline="Общий чат"
description="Вы: Последнее сообщение"
id="chat-list-chat-1"
onClick={async () => await switchToPublicChat("Общий чат")}
style={{ cursor: "pointer" }}
>
<img src="./src/resources/images/default-avatar.png" alt="" slot="icon" />
</mdui-list-item>
<mdui-list-item
headline="Общий чат 2"
description="Вы: Последнее сообщение"
id="chat-list-chat-2"
onClick={async () => await switchToPublicChat("Общий чат 2")}
style={{ cursor: "pointer" }}
>
<img src="./src/resources/images/default-avatar.png" alt="" slot="icon" />
</mdui-list-item>
</mdui-list>
<UnifiedChatsList />
</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="channels">Скоро будет...</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="contacts">Скоро будет...</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="dms">
<mdui-list id="dm-users"></mdui-list>
</mdui-tab-panel>
</mdui-tabs>
</div>
);