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

Improve DMs UI

Browse Source
This commit is contained in:
denis0001-dev
2025-08-25 22:10:50 +03:00
Unverified
parent 2151a0b4a1
commit 5b301f0707
6 changed files with 198 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+6
View File
@@ -417,6 +417,12 @@
<span class="stat-value last-seen"></span>
</div>
</div>
<div class="profile-actions">
<mdui-button id="dm-button" variant="filled" style="display: none;">
<span class="material-symbols">chat</span>
Send Message
</mdui-button>
</div>
</div>
</div>
</mdui-dialog>
frontend/src/chat/contextMenu.ts
+8 -1
View File
@@ -85,8 +85,15 @@ export function show(message: Message, x: number, y: number): void {
const isAuthor = message.username === currentUser?.username;
const isOwner = currentUser?.admin;
// Check if we're in a DM conversation
const isInDm = document.querySelector('.chat-tabs mdui-tab[value="dms"]')?.getAttribute('active') === 'true';
// Show edit only for own messages
editItem.style.display = isAuthor ? 'flex' : 'none';
deleteItem.style.display = (isAuthor || isOwner) ? 'flex' : 'none';
// Show delete for own messages, admin on any message, or in DMs for any message
const canDelete = isAuthor || isOwner || isInDm;
deleteItem.style.display = canDelete ? 'flex' : 'none';
// Position the menu properly
menu.style.display = 'block';
frontend/src/chat/dm.ts
+96 -27
View File
@@ -1,12 +1,12 @@
import { API_BASE_URL } from "../core/config";
import { authToken, getAuthHeaders } from "../auth/api";
import { authToken, getAuthHeaders, currentUser } from "../auth/api";
import { DmPanel } from "./panel";
import { ecdhSharedSecret, deriveWrappingKey } from "../crypto/asymmetric";
import { importAesGcmKey, aesGcmEncrypt, aesGcmDecrypt } from "../crypto/symmetric";
import { randomBytes } from "../crypto/kdf";
import { getCurrentKeys } from "../auth/crypto";
import { request, websocket } from "../websocket";
import type { FetchDMResponse, SendDMRequest, WebSocketMessage } from "../core/types";
import type { FetchDMResponse, SendDMRequest, WebSocketMessage, User } from "../core/types";
import type { Tabs } from "mdui/components/tabs";
import { b64, ub64 } from "../utils/utils";
@@ -88,9 +88,48 @@ async function loadUsers() {
const data = await res.json();
const list = document.getElementById("dm-users")!;
list.innerHTML = "";
(data.users || []).forEach((u: any) => {
(data.users || []).forEach((u: User) => {
const item = document.createElement("mdui-list-item");
// Add avatar
const avatar = document.createElement("img");
avatar.src = u.profile_picture || "./src/resources/images/default-avatar.png";
avatar.alt = u.username;
avatar.slot = "icon";
avatar.style.width = "40px";
avatar.style.height = "40px";
avatar.style.borderRadius = "50%";
avatar.style.objectFit = "cover";
// Handle avatar load error
avatar.addEventListener("error", () => {
avatar.src = "./src/resources/images/default-avatar.png";
});
item.appendChild(avatar);
// Set headline (username)
item.setAttribute("headline", u.username);
// Add last message placeholder (will be loaded lazily)
const lastMessageEl = document.createElement("div");
lastMessageEl.slot = "supporting-text";
lastMessageEl.textContent = "Loading...";
lastMessageEl.style.fontSize = "12px";
lastMessageEl.style.color = "var(--mdui-color-on-surface-variant)";
item.appendChild(lastMessageEl);
// Load last message when element becomes visible
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
loadLastMessage(u.id, lastMessageEl);
observer.unobserve(entry.target);
}
});
});
observer.observe(item);
item.addEventListener("click", async () => {
activeDm = { userId: u.id, username: u.username, publicKey: null };
if (!dmPanel) {
@@ -133,7 +172,7 @@ async function loadUsers() {
},
async () => {
// Load DM history for the active conversation
if (!activeDm?.publicKey) return;
if (!activeDm?.publicKey || !dmPanel) return;
const response = await fetch(`${API_BASE_URL}/dm/history/${activeDm.userId}`, {
headers: getAuthHeaders(true)
});
@@ -145,17 +184,16 @@ async function loadUsers() {
for (const env of messages) {
try {
const text = await decryptDm(env, activeDm.publicKey);
const div = document.createElement("div");
const isAuthor = env.senderId !== activeDm.userId;
div.className = `message ${isAuthor ? "sent" : "received"}`;
const inner = document.createElement("div");
inner.className = "message-inner";
const content = document.createElement("div");
content.className = "message-content";
content.textContent = text;
inner.appendChild(content);
div.appendChild(inner);
container.appendChild(div);
const username = isAuthor ? (currentUser?.username || "Unknown") : (activeDm.username || "Unknown");
dmPanel.appendMessageWithId({
id: env.id,
content: text,
username: username,
timestamp: env.timestamp,
is_read: false,
is_edited: false
});
} catch {}
}
container.scrollTop = container.scrollHeight;
@@ -163,9 +201,18 @@ async function loadUsers() {
}
);
}
dmPanel.setOtherUser(u.username);
dmPanel.setTitle(u.username);
dmPanel.clearMessages();
dmPanel.activate();
// Add profile click functionality to chat header
const chatHeaderAvatar = document.querySelector('.chat-header-avatar') as HTMLElement;
if (chatHeaderAvatar) {
chatHeaderAvatar.style.cursor = 'pointer';
chatHeaderAvatar.onclick = () => dmPanel?.onProfileClicked();
}
const resPk = await fetch(`${API_BASE_URL}/crypto/public-key/of/${u.id}`, { headers: getAuthHeaders(true) });
if (resPk.ok) {
const pkData = await resPk.json();
@@ -176,6 +223,30 @@ async function loadUsers() {
});
}
async function loadLastMessage(userId: number, element: HTMLElement): Promise<void> {
try {
const response = await fetch(`${API_BASE_URL}/dm/history/${userId}?limit=1`, {
headers: getAuthHeaders(true)
});
if (response.ok) {
const data = await response.json();
const messages: DmEnvelope[] = data.messages || [];
if (messages.length > 0) {
const lastMessage = messages[messages.length - 1];
// For now, just show "Last message" since we can't decrypt without the public key
// In a real implementation, you'd need to store the public key or decrypt here
element.textContent = "Last message";
} else {
element.textContent = "No messages yet";
}
} else {
element.textContent = "No messages yet";
}
} catch (error) {
element.textContent = "No messages yet";
}
}
function init() {
const tabs = document.querySelector(".chat-tabs mdui-tabs") as Tabs;
const dmTab = tabs?.querySelector('mdui-tab[value="dms"]')!;
@@ -203,19 +274,17 @@ websocket.addEventListener("message", async (e) => {
if (msg.type === "dmNew" && activeDm && (msg.data.senderId === activeDm.userId || msg.data.recipientId === activeDm.userId)) {
const plaintext = await decryptDm(msg.data, activeDm.publicKey!);
const container = document.getElementById("chat-messages")!;
const div = document.createElement("div");
const isAuthor = msg.data.senderId !== activeDm.userId;
div.className = `message ${isAuthor ? "sent" : "received"}`;
const inner = document.createElement("div");
inner.className = "message-inner";
const content = document.createElement("div");
content.className = "message-content";
content.textContent = plaintext;
inner.appendChild(content);
div.appendChild(inner);
container.appendChild(div);
container.scrollTop = container.scrollHeight;
if (dmPanel) {
const isAuthor = msg.data.senderId !== activeDm.userId;
dmPanel.appendMessageWithId({
id: msg.data.id,
content: plaintext,
username: isAuthor ? (currentUser?.username || "Unknown") : (activeDm.username || "Unknown"),
timestamp: msg.data.timestamp,
is_read: false,
is_edited: false
});
}
}
} catch {}
});
frontend/src/chat/panel.ts
+50 -1
View File
@@ -1,7 +1,9 @@
import { authToken, currentUser } from "../auth/api";
import type { WebSocketMessage } from "../core/types";
import type { Message, WebSocketMessage } from "../core/types";
import { request } from "../websocket";
import { loadMessages } from "./chat";
import { show as showContextMenu } from "./contextMenu";
import { show as showProfileDialog } from "./profileDialog";
const titleEl = document.getElementById("chat-name")!;
const messages = document.getElementById("chat-messages")!;
@@ -43,6 +45,7 @@ export abstract class ChatPanelController {
protected abstract onSubmit(text: string): void | Promise<void>;
protected abstract loadMessages(): void | Promise<void>;
public abstract onProfileClicked(): void;
static mountOnce(): void {
if (this.mounted) return;
@@ -79,23 +82,69 @@ export class PublicChatPanel extends ChatPanelController {
protected loadMessages(): void {
return loadMessages();
}
public onProfileClicked(): void {
// Public chat doesn't have a specific profile to show
}
}
export class DmPanel extends ChatPanelController {
private sender: (text: string) => Promise<void>;
private loader: () => Promise<void> | void;
private otherUsername: string | null = null;
constructor(sender: (text: string) => Promise<void>, loader: () => Promise<void> | void) {
super();
this.sender = sender;
this.loader = loader;
}
setOtherUser(username: string): void {
this.otherUsername = username;
}
protected async onSubmit(text: string): Promise<void> {
this.appendSimple(text, true);
await this.sender(text);
}
protected loadMessages(): void | Promise<void> {
return this.loader();
}
public onProfileClicked(): void {
if (this.otherUsername) {
// Import and show the profile dialog
showProfileDialog(this.otherUsername!);
}
}
appendMessageWithId(message: Message): void {
const div = document.createElement("div");
const isAuthor = message.username === currentUser?.username;
div.className = `message ${isAuthor ? "sent" : "received"}`;
div.setAttribute("data-message-id", message.id.toString());
div.setAttribute("data-timestamp", message.timestamp);
const inner = document.createElement("div");
inner.className = "message-inner";
const content = document.createElement("div");
content.className = "message-content";
content.textContent = message.content;
inner.appendChild(content);
div.appendChild(inner);
// Add context menu support
div.addEventListener("contextmenu", (e) => {
e.preventDefault();
showContextMenu(message, e.clientX, e.clientY);
});
messages.appendChild(div);
messages.scrollTop = messages.scrollHeight;
}
}
ChatPanelController.mountOnce();
frontend/src/chat/profileDialog.ts
+36 -1
View File
@@ -9,7 +9,7 @@ import { getAuthHeaders, currentUser } from "../auth/api";
import { API_BASE_URL } from "../core/config";
import type { UserProfile } from "../core/types";
import { showError, showSuccess } from "../utils/notification";
import { formatTime, id } from "../utils/utils";
import { delay, formatTime, id } from "../utils/utils";
import defaultAvatar from "../resources/images/default-avatar.png";
import type { Dialog } from "mdui/components/dialog";
import type { TextField } from "mdui/components/text-field";
@@ -36,6 +36,41 @@ function bindEvents(): void {
editBioBtn?.addEventListener('click', () => startEditBio());
saveBioBtn?.addEventListener('click', () => saveBio());
cancelBioBtn?.addEventListener('click', () => cancelEditBio());
// DM button event
const dmButton = dialog?.querySelector('#dm-button');
dmButton?.addEventListener('click', () => startDm());
}
/**
* Starts a direct message conversation
* @private
*/
async function startDm(): Promise<void> {
if (!currentProfile || isOwnProfile) return;
// Hide the profile dialog
hide();
// Switch to DMs tab
const tabs = document.querySelector('.chat-tabs mdui-tabs') as any;
if (tabs) {
tabs.value = 'dms';
}
// Find and click on the user in the DM users list
await delay(100);
const dmUsersList = document.getElementById("dm-users");
if (dmUsersList) {
const userItems = dmUsersList.querySelectorAll('mdui-list-item');
for (const item of userItems) {
const headline = item.getAttribute('headline');
if (headline === currentProfile?.username) {
(item as HTMLElement).click();
break;
}
}
}
}
/**
frontend/src/core/types.d.ts
Vendored
+1
View File
@@ -85,6 +85,7 @@ export interface User {
username: string;
admin?: boolean;
bio?: string;
profile_picture: string;
}
/**