120 lines
4.3 KiB
TypeScript
120 lines
4.3 KiB
TypeScript
import { useEffect } from "react";
|
|
import { qk } from "../lib/queryKeys";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
import { ChevronDown, ChevronUp, X } from "lucide-react";
|
|
import {
|
|
closeChat,
|
|
initDock,
|
|
notifyIncoming,
|
|
toggleMinimize,
|
|
useDockChats,
|
|
type DockChat,
|
|
} from "../lib/chatDock";
|
|
import { onMessage, onUnread } from "../lib/messagesSocket";
|
|
import * as e2ee from "../lib/e2ee";
|
|
import Avatar from "./ui/Avatar";
|
|
import ChatThread from "./ChatThread";
|
|
import Overlay from "./ui/Overlay";
|
|
import { IconButton } from "./ui/IconButton";
|
|
import { Pressable } from "./ui/Pressable";
|
|
import { SURFACE } from "./ui/surfaces";
|
|
|
|
// The Messenger-style floating chat dock: open conversations live here, bottom-right, across
|
|
// page navigation (state persisted per user). Always mounted (for human users) so it also owns
|
|
// the app-wide live-message subscription and restores this device's unlock state on load.
|
|
export default function ChatDock({ meId }: { meId: number }) {
|
|
const qc = useQueryClient();
|
|
const chats = useDockChats();
|
|
|
|
// Restore the per-device unlocked key and the persisted dock windows once, app-wide.
|
|
useEffect(() => {
|
|
initDock(meId);
|
|
e2ee.loadFromDevice(meId);
|
|
}, [meId]);
|
|
|
|
// Live delivery: refresh the conversation list, unread badge, and the affected thread; and
|
|
// for an INCOMING message, open or flash that partner's dock window.
|
|
useEffect(
|
|
() =>
|
|
onMessage(({ message: m, from }) => {
|
|
qc.invalidateQueries({ queryKey: qk.conversations() });
|
|
qc.invalidateQueries({ queryKey: qk.messageUnread() });
|
|
const partnerId = m.sender_id === meId ? m.recipient_id : m.sender_id;
|
|
qc.invalidateQueries({ queryKey: qk.thread(partnerId) });
|
|
// Auto-open/flash only for messages from someone else (not my own echo) and only for
|
|
// real user conversations.
|
|
if (m.kind === "user" && m.sender_id !== meId && from) {
|
|
notifyIncoming({ id: from.id, name: from.name, avatar_url: from.avatar_url });
|
|
}
|
|
}),
|
|
[qc, meId],
|
|
);
|
|
|
|
// Live badge sync: another tab/device read a thread → refresh this tab's unread count + list.
|
|
useEffect(
|
|
() =>
|
|
onUnread(() => {
|
|
qc.invalidateQueries({ queryKey: qk.messageUnread() });
|
|
qc.invalidateQueries({ queryKey: qk.conversations() });
|
|
}),
|
|
[qc],
|
|
);
|
|
|
|
if (chats.length === 0) return null;
|
|
return (
|
|
<Overlay>
|
|
<div className="fixed bottom-0 right-0 z-rail flex flex-row-reverse items-end gap-3 p-4 pointer-events-none">
|
|
{chats.map((c) => (
|
|
<ChatWindow key={c.partnerId} chat={c} meId={meId} />
|
|
))}
|
|
</div>
|
|
</Overlay>
|
|
);
|
|
}
|
|
|
|
function ChatWindow({ chat, meId }: { chat: DockChat; meId: number }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div
|
|
className={`${SURFACE.panel} pointer-events-auto relative w-80 max-w-[calc(100vw-2rem)] flex flex-col overflow-hidden`}
|
|
>
|
|
{/* One-shot attention flash on a new message; keyed by the counter so it replays each time. */}
|
|
{chat.flash > 0 && (
|
|
<div
|
|
key={chat.flash}
|
|
className="chat-flash pointer-events-none absolute inset-0 rounded-2xl z-base"
|
|
/>
|
|
)}
|
|
<div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-card/50">
|
|
<Pressable
|
|
onClick={() => toggleMinimize(chat.partnerId)}
|
|
className="flex items-center gap-2 min-w-0 flex-1"
|
|
title={chat.minimized ? t("messages.expand") : t("messages.minimize")}
|
|
>
|
|
<Avatar
|
|
src={chat.avatar}
|
|
fallback={chat.name}
|
|
className="w-7 h-7 rounded-full shrink-0 text-xs"
|
|
/>
|
|
<span className="font-semibold text-sm truncate">{chat.name}</span>
|
|
</Pressable>
|
|
<IconButton
|
|
onClick={() => toggleMinimize(chat.partnerId)}
|
|
label={chat.minimized ? t("messages.expand") : t("messages.minimize")}
|
|
>
|
|
{chat.minimized ? <ChevronUp /> : <ChevronDown />}
|
|
</IconButton>
|
|
<IconButton onClick={() => closeChat(chat.partnerId)} label={t("messages.close")}>
|
|
<X />
|
|
</IconButton>
|
|
</div>
|
|
{!chat.minimized && (
|
|
<div className="flex flex-col h-96">
|
|
<ChatThread meId={meId} partnerId={chat.partnerId} isSystem={false} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|