siftlode/frontend/src/components/ChatDock.tsx

import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useQueryClient } from "@tanstack/react-query";
import { ChevronDown, ChevronUp, X } from "lucide-react";
import { closeChat, toggleMinimize, useDockChats, type DockChat } from "../lib/chatDock";
import { useUnlocked } from "../lib/messaging";
import { onMessage } from "../lib/messagesSocket";
import * as e2ee from "../lib/e2ee";
import Avatar from "./Avatar";
import ChatThread from "./ChatThread";

// The Messenger-style floating chat dock: open conversations live here, bottom-right, across
// page navigation. 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();
  const unlocked = useUnlocked();

  // Restore the per-device unlocked key once, app-wide.
  useEffect(() => {
    e2ee.loadFromDevice(meId);
  }, [meId]);

  // Live delivery: any pushed message refreshes the conversation list, unread badge, and the
  // affected thread (re-decrypts). Drives both the dock and the Messages page.
  useEffect(
    () =>
      onMessage((m) => {
        qc.invalidateQueries({ queryKey: ["conversations"] });
        qc.invalidateQueries({ queryKey: ["message-unread"] });
        const partner = m.sender_id === meId ? m.recipient_id : m.sender_id;
        qc.invalidateQueries({ queryKey: ["thread", partner] });
      }),
    [qc, meId]
  );

  if (chats.length === 0) return null;
  return (
    <div className="fixed bottom-0 right-0 z-40 flex flex-row-reverse items-end gap-3 p-4 pointer-events-none">
      {chats.map((c) => (
        <ChatWindow key={c.partnerId} chat={c} meId={meId} unlocked={unlocked} />
      ))}
    </div>
  );
}

function ChatWindow({ chat, meId, unlocked }: { chat: DockChat; meId: number; unlocked: boolean }) {
  const { t } = useTranslation();
  return (
    <div className="pointer-events-auto w-80 max-w-[calc(100vw-2rem)] glass rounded-2xl shadow-2xl flex flex-col overflow-hidden">
      <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-card/50">
        <button
          onClick={() => toggleMinimize(chat.partnerId)}
          className="flex items-center gap-2 min-w-0 flex-1 text-left"
          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>
        </button>
        <button
          onClick={() => toggleMinimize(chat.partnerId)}
          className="shrink-0 p-1 rounded-md text-muted hover:text-fg hover:bg-bg transition"
          aria-label={chat.minimized ? t("messages.expand") : t("messages.minimize")}
        >
          {chat.minimized ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
        </button>
        <button
          onClick={() => closeChat(chat.partnerId)}
          className="shrink-0 p-1 rounded-md text-muted hover:text-fg hover:bg-bg transition"
          aria-label={t("messages.close")}
        >
          <X className="w-4 h-4" />
        </button>
      </div>
      {!chat.minimized && (
        <div className="flex flex-col h-96">
          <ChatThread meId={meId} partnerId={chat.partnerId} isSystem={false} unlocked={unlocked} />
        </div>
      )}
    </div>
  );
}