FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-22 19:15:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Simplify chats list

Browse Source
This commit is contained in:
denis0001-dev
2025-11-07 16:58:39 +03:00
Unverified
parent af530abf6c
commit 370b57f2c9
4 changed files with 107 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/chat/css/left-panel.module.scss
+5 -39
View File
@@ -74,45 +74,11 @@
}
}
.chatTabs {
margin-top: 5px;
width: 100%;
height: calc(100% - 80px);
display: flex;
flex-direction: column;
min-height: 0; // prevent flex collapse when inner overflows
--mdui-color-surface: $color-dark-surface-container;
--mdui-color-surface-variant: transparent;
img {
width: 45px;
height: 45px;
border-radius: 20%;
object-fit: cover;
}
mdui-tabs {
height: 100%;
display: flex;
flex-direction: column;
min-height: 0; // enable inner panel to scroll
}
mdui-tab-panel[active] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0; // critical to avoid collapsing
overflow: auto;
}
mdui-list {
flex: 1;
min-height: 0; // allow scroll area to size correctly
overflow-y: auto;
padding: 0;
margin: 0;
}
.unifiedChatsList {
flex: 1;
min-height: 0; // allow scroll area to size correctly
overflow-y: auto;
margin-top: 10px;
}
// Search container
frontend/src/pages/chat/ui/left/ChatTabs.tsx
-33
View File
@@ -1,33 +0,0 @@
import { useAppState, type ChatTabs } from "@/pages/chat/state";
import { UnifiedChatsList } from "./UnifiedChatsList";
import { MaterialTab, MaterialTabPanel, MaterialTabs } from "@/utils/material";
import styles from "@/pages/chat/css/left-panel.module.scss";
export function ChatTabs() {
const { chat, setActiveTab } = useAppState();
return (
<div className={styles.chatTabs}>
<MaterialTabs
value={chat.activeTab}
full-width
onChange={(e) => setActiveTab(e.target.value as ChatTabs)}>
<MaterialTab value="chats">
Чаты
</MaterialTab>
<MaterialTab value="channels">
Каналы
</MaterialTab>
<MaterialTab value="contacts">
Контакты
</MaterialTab>
<MaterialTabPanel slot="panel" value="chats">
<UnifiedChatsList />
</MaterialTabPanel>
<MaterialTabPanel slot="panel" value="channels">Скоро будет...</MaterialTabPanel>
<MaterialTabPanel slot="panel" value="contacts">Скоро будет...</MaterialTabPanel>
</MaterialTabs>
</div>
);
}
frontend/src/pages/chat/ui/left/LeftPanel.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { useAppState } from "@/pages/chat/state";
import { useState } from "react";
import { SettingsDialog } from "./settings/SettingsDialog";
import { UsernameSearch } from "./UsernameSearch";
import { ChatTabs } from "./ChatTabs";
import { UnifiedChatsList } from "./UnifiedChatsList";
import { ChatHeader } from "./ChatHeader";
import { MaterialBottomAppBar, MaterialFab, MaterialIconButton } from "@/utils/material";
import styles from "@/pages/chat/css/left-panel.module.scss";
@@ -35,7 +35,7 @@ export function LeftPanel() {
<div className={styles.searchContainer}>
<UsernameSearch />
</div>
<ChatTabs />
<UnifiedChatsList />
<BottomAppBar />
</div>
);
frontend/src/pages/chat/ui/left/UnifiedChatsList.tsx
+100 -141
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, useCallback } from "react";
import { useState, useEffect, useCallback, useMemo } from "react";
import { useAppState } from "@/pages/chat/state";
import { useDM, type DMUser } from "@/pages/chat/hooks/useDM";
import { API_BASE_URL } from "@/core/config";
@@ -36,18 +36,17 @@ interface DMConversation {
type ChatItem = PublicChat | DMConversation;
const PUBLIC_CHAT: PublicChat = {
id: "general",
name: "Общий чат",
type: "public"
};
export function UnifiedChatsList() {
const { user, switchToPublicChat, switchToDM, chat } = useAppState();
const { dmUsers, isLoadingUsers, loadUsers } = useDM();
const [publicChats] = useState<PublicChat[]>([
{ id: "general", name: "Общий чат", type: "public" },
{ id: "general2", name: "Общий чат 2", type: "public" }
]);
const [lastMessages, setLastMessages] = useState<Record<string, Message | undefined>>({});
const [allChats, setAllChats] = useState<ChatItem[]>([]);
// Load public chat last messages
const loadLastMessages = useCallback(async () => {
if (!user.authToken) return;
@@ -58,13 +57,9 @@ export function UnifiedChatsList() {
if (response.ok) {
const data = await response.json();
if (data.messages && data.messages.length > 0) {
if (data.messages?.length > 0) {
const lastMessage = data.messages[data.messages.length - 1];
setLastMessages({
general: lastMessage,
general2: lastMessage
});
setLastMessages({ general: lastMessage });
}
}
} catch (error) {
@@ -72,7 +67,6 @@ export function UnifiedChatsList() {
}
}, [user.authToken]);
// Load DM users when chats tab is active
useEffect(() => {
if (chat.activeTab === "chats") {
loadUsers();
@@ -80,79 +74,56 @@ export function UnifiedChatsList() {
}
}, [chat.activeTab, loadUsers, loadLastMessages]);
// Combine public chats and DMs into one list
useEffect(() => {
const publicChatItems: ChatItem[] = publicChats.map(chat => ({
...chat,
lastMessage: lastMessages[chat.id]
}));
const allChats = useMemo<ChatItem[]>(() => {
return [
...dmUsers.map((user: DMUser) => ({
...user,
userId: user.id,
type: "dm" as const
})),
{
...PUBLIC_CHAT,
lastMessage: lastMessages[PUBLIC_CHAT.id]
}
];
}, [lastMessages, dmUsers]);
const dmChatItems: ChatItem[] = dmUsers.map((user: DMUser) => ({
id: user.id,
userId: user.id, // Add userId field
username: user.username,
display_name: user.display_name,
profile_picture: user.profile_picture,
online: user.online,
type: "dm" as const,
lastMessage: user.lastMessage,
unreadCount: user.unreadCount,
publicKey: user.publicKey
}));
// Combine and sort by last message timestamp (DMs first, then public chats)
const combined = [...dmChatItems, ...publicChatItems];
setAllChats(combined);
}, [publicChats, lastMessages, dmUsers]);
// WebSocket listener for public chat message updates
useEffect(() => {
if (!websocket) return;
const handleWebSocketMessage = (e: MessageEvent) => {
function handleWebSocketMessage(e: MessageEvent) {
try {
const msg = JSON.parse(e.data);
if (msg.type === "newMessage") {
const newMessage = msg.data as Message;
// Update all public chats with the new message
setLastMessages(prev => {
const updated = { ...prev };
publicChats.forEach(chat => {
updated[chat.id] = newMessage;
});
return updated;
});
setLastMessages(prev => ({
...prev,
[PUBLIC_CHAT.id]: newMessage
}));
} else if (msg.type === "messageEdited") {
const editedMessage = msg.data as Message;
// Update only if the edited message is the current last message
setLastMessages(prev => {
const updated = { ...prev };
publicChats.forEach(chat => {
if (updated[chat.id]?.id === editedMessage.id) {
updated[chat.id] = editedMessage;
}
});
return updated;
if (prev[PUBLIC_CHAT.id]?.id === editedMessage.id) {
return {
...prev,
[PUBLIC_CHAT.id]: editedMessage
};
}
return prev;
});
} else if (msg.type === "messageDeleted") {
const deletedMessageId = msg.data?.message_id;
let needsReload = false;
setLastMessages(prev => {
const updated = { ...prev };
publicChats.forEach(chat => {
if (updated[chat.id]?.id === deletedMessageId) {
updated[chat.id] = undefined;
needsReload = true;
}
});
return updated;
if (prev[PUBLIC_CHAT.id]?.id === deletedMessageId) {
loadLastMessages();
return {
...prev,
[PUBLIC_CHAT.id]: undefined
};
}
return prev;
});
if (needsReload) {
loadLastMessages();
}
}
} catch (error) {
console.error("Failed to handle WebSocket message in UnifiedChatsList:", error);
@@ -161,45 +132,33 @@ export function UnifiedChatsList() {
websocket.addEventListener("message", handleWebSocketMessage);
return () => websocket.removeEventListener("message", handleWebSocketMessage);
}, [publicChats, loadLastMessages]);
}, [loadLastMessages]);
// Subscribe to online status for all DM users
useEffect(() => {
const dmUsers = allChats.filter(chat => chat.type === "dm") as DMConversation[];
// Subscribe to all DM users
dmUsers.forEach(dmUser => {
onlineStatusManager.subscribe(dmUser.id);
});
// Cleanup function to unsubscribe from all users
return () => {
dmUsers.forEach(dmUser => {
onlineStatusManager.unsubscribe(dmUser.id);
});
};
}, [allChats]);
}, [dmUsers]);
function formatPublicChatMessage(chatId: string): string {
const lastMessage = lastMessages[chatId];
if (!lastMessage) {
return "";
}
if (!lastMessage) return "";
const isCurrentUser = lastMessage.user_id === user.currentUser?.id;
const prefix = isCurrentUser ? "Вы: " : `${lastMessage.username}: `;
const maxContentLength = 50 - prefix.length;
const content = lastMessage.content.length > maxContentLength
? lastMessage.content.substring(0, maxContentLength) + "..."
const maxLength = 50 - prefix.length;
const content = lastMessage.content.length > maxLength
? lastMessage.content.substring(0, maxLength) + "..."
: lastMessage.content;
return prefix + content;
}
async function handlePublicChatClick(chatName: string) {
await switchToPublicChat(chatName);
}
};
async function handleDMClick(dmConversation: DMConversation) {
if (!dmConversation.publicKey) {
@@ -207,12 +166,11 @@ export function UnifiedChatsList() {
if (!authToken) return;
const publicKey = await fetchUserPublicKey(dmConversation.id, authToken);
if (publicKey) {
dmConversation.publicKey = publicKey;
} else {
if (!publicKey) {
console.error("Failed to get public key for user:", dmConversation.id);
return;
}
dmConversation.publicKey = publicKey;
}
await switchToDM({
@@ -222,26 +180,27 @@ export function UnifiedChatsList() {
profilePicture: dmConversation.profile_picture,
online: dmConversation.online || false
});
}
};
if (isLoadingUsers) {
return <MaterialCircularProgress />;
}
return (
<MaterialList>
<MaterialList className={styles.unifiedChatsList}>
{allChats.map((chat) => {
if (chat.type === "public") {
const formattedMessage = formatPublicChatMessage(chat.id);
return (
<MaterialListItem
key={`public-${chat.id}`}
headline={chat.name}
onClick={() => handlePublicChatClick(chat.name)}
onClick={() => switchToPublicChat(chat.name)}
style={{ cursor: "pointer" }}
>
{formatPublicChatMessage(chat.id) && (
{formattedMessage && (
<span slot="description" className={styles.listDescription}>
{formatPublicChatMessage(chat.id)}
{formattedMessage}
</span>
)}
<img
@@ -257,50 +216,50 @@ export function UnifiedChatsList() {
/>
</MaterialListItem>
);
} else {
return (
<MaterialListItem
key={`dm-${chat.id}`}
headline={chat.display_name}
onClick={() => handleDMClick(chat)}
style={{ cursor: "pointer" }}
>
<div slot="headline" className="dm-list-headline">
{chat.display_name}
<StatusBadge
verified={chat.verified || false}
userId={chat.userId}
size="small"
/>
</div>
<span slot="description" className={styles.listDescription}>
{chat.lastMessage || "Нет сообщений"}
</span>
<div slot="icon" style={{ position: "relative", width: "40px", height: "40px", display: "inline-block" }}>
<img
src={chat.profile_picture || defaultAvatar}
alt={chat.display_name}
style={{
width: "40px",
height: "40px",
borderRadius: "50%",
objectFit: "cover",
display: "block"
}}
onError={(e) => {
e.target.src = defaultAvatar;
}}
/>
<OnlineIndicator userId={chat.id} />
</div>
{chat.unreadCount > 0 && (
<MaterialBadge slot="end-icon">
{chat.unreadCount}
</MaterialBadge>
)}
</MaterialListItem>
);
}
return (
<MaterialListItem
key={`dm-${chat.id}`}
headline={chat.display_name}
onClick={() => handleDMClick(chat)}
style={{ cursor: "pointer" }}
>
<div slot="headline" className="dm-list-headline">
{chat.display_name}
<StatusBadge
verified={chat.verified || false}
userId={chat.userId}
size="small"
/>
</div>
<span slot="description" className={styles.listDescription}>
{chat.lastMessage || "Нет сообщений"}
</span>
<div slot="icon" style={{ position: "relative", width: "40px", height: "40px", display: "inline-block" }}>
<img
src={chat.profile_picture || defaultAvatar}
alt={chat.display_name}
style={{
width: "40px",
height: "40px",
borderRadius: "50%",
objectFit: "cover",
display: "block"
}}
onError={(e) => {
e.target.src = defaultAvatar;
}}
/>
<OnlineIndicator userId={chat.id} />
</div>
{chat.unreadCount > 0 && (
<MaterialBadge slot="end-icon">
{chat.unreadCount}
</MaterialBadge>
)}
</MaterialListItem>
);
})}
</MaterialList>
);