freezmo/components/chat/HistoryPanel.tsx

"use client";

import { AnimatePresence, motion } from "framer-motion";
import { useAppReducedMotion as useReducedMotion } from "@/lib/motion-pref";
import { useEffect, useState } from "react";

import { CheckCircleIcon, PencilIcon, PlusIcon, XIcon } from "@/components/icons";
import { Button } from "@/components/ui";
import { useI18n } from "@/lib/i18n";
import { springSheet } from "@/lib/motion";
import { conversationMatches } from "@/lib/chat";
import type { ChatConversation } from "@/lib/schemas";
import { cn, formatDate } from "@/lib/utils";

type HistoryProps = {
  conversations: ChatConversation[];
  currentId: string | null;
  query: string;
  onQueryChange: (value: string) => void;
  onOpen: (id: string) => void;
  onRename: (id: string, title: string) => void;
  onDelete: (conversation: ChatConversation) => void;
  onNew: () => void;
};

/** The conversation list: a column on desktop, a sheet on phones. */
export function ChatHistoryList({
  conversations,
  currentId,
  query,
  onQueryChange,
  onOpen,
  onRename,
  onDelete,
  onNew,
}: HistoryProps) {
  const { t } = useI18n();
  const [renaming, setRenaming] = useState<string | null>(null);
  const [draft, setDraft] = useState("");

  const visible = conversations.filter((conversation) =>
    conversationMatches(conversation.title, conversation.messages, query),
  );

  const startRename = (conversation: ChatConversation) => {
    setRenaming(conversation.id);
    setDraft(conversation.title);
  };

  const commit = () => {
    if (renaming) onRename(renaming, draft);
    setRenaming(null);
  };

  return (
    <div className="flex min-h-0 flex-1 flex-col gap-2">
      <div className="flex items-center gap-2 px-1">
        <input
          type="search"
          value={query}
          onChange={(event) => onQueryChange(event.target.value)}
          placeholder={t("chat.searchChats")}
          aria-label={t("chat.searchChats")}
          className="min-w-0 flex-1 rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-2.5 py-2 text-[16px] text-[var(--text)] outline-none transition placeholder:text-[var(--text-subtle)] focus:border-accent-400/60 sm:text-[13px]"
        />
        <Button size="sm" variant="secondary" className="touch-target shrink-0" onClick={onNew} aria-label={t("chat.new")}>
          <PlusIcon className="size-4" />
          <span className="hidden sm:inline">{t("chat.new")}</span>
        </Button>
      </div>

      {visible.length === 0 ? (
        <p className="px-2 py-8 text-center text-[12.5px] text-[var(--text-subtle)]">
          {query ? t("chat.noResults") : t("chat.noHistory")}
        </p>
      ) : (
        <ul className="thin-scroll min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain px-1 pb-2">
          {visible.map((conversation) => {
            const active = conversation.id === currentId;
            return (
              <li key={conversation.id}>
                {renaming === conversation.id ? (
                  <form
                    onSubmit={(event) => {
                      event.preventDefault();
                      commit();
                    }}
                    className="flex items-center gap-1 px-1 py-1"
                  >
                    <input
                      autoFocus
                      value={draft}
                      onChange={(event) => setDraft(event.target.value)}
                      onKeyDown={(event) => {
                        if (event.key === "Escape") setRenaming(null);
                      }}
                      aria-label={t("common.rename")}
                      className="min-w-0 flex-1 rounded-lg border border-[var(--hairline)] bg-[var(--surface-strong)] px-2 py-1.5 text-[16px] text-[var(--text)] outline-none sm:text-[13px]"
                    />
                    <button
                      type="submit"
                      aria-label={t("common.save")}
                      className="grid size-9 shrink-0 place-items-center rounded-lg text-emerald-600 transition hover:bg-[var(--hover)] dark:text-emerald-300"
                    >
                      <CheckCircleIcon className="size-4" />
                    </button>
                    <button
                      type="button"
                      onClick={() => setRenaming(null)}
                      aria-label={t("common.cancel")}
                      className="grid size-9 shrink-0 place-items-center rounded-lg text-[var(--text-subtle)] transition hover:bg-[var(--hover)]"
                    >
                      <XIcon className="size-4" />
                    </button>
                  </form>
                ) : (
                  <div className="flex items-center gap-1">
                    <button
                      type="button"
                      onClick={() => onOpen(conversation.id)}
                      aria-current={active ? "true" : undefined}
                      className={cn(
                        "min-w-0 flex-1 rounded-xl px-2.5 py-2 text-left transition",
                        active ? "bg-[var(--nav-active-bg)]" : "hover:bg-[var(--hover)]",
                      )}
                    >
                      <span className="block truncate text-[13px] font-medium text-[var(--text)]">
                        {conversation.title || t("chat.untitled")}
                      </span>
                      <span className="block text-[11px] text-[var(--text-subtle)]">
                        {formatDate(conversation.updatedAt)}
                      </span>
                    </button>
                    <button
                      type="button"
                      onClick={() => startRename(conversation)}
                      aria-label={t("common.rename")}
                      title={t("common.rename")}
                      className="grid size-9 shrink-0 place-items-center rounded-lg text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
                    >
                      <PencilIcon className="size-3.5" />
                    </button>
                    <button
                      type="button"
                      onClick={() => onDelete(conversation)}
                      aria-label={t("chat.deleteChat")}
                      title={t("chat.deleteChat")}
                      className="grid size-9 shrink-0 place-items-center rounded-lg text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-rose-500"
                    >
                      <XIcon className="size-3.5" />
                    </button>
                  </div>
                )}
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}

/** Phone sheet wrapper around the list (drag/backdrop close, spring). */
export function HistorySheet({ open, onClose, ...props }: HistoryProps & { open: boolean; onClose: () => void }) {
  const { t } = useI18n();
  const reduceMotion = useReducedMotion();

  useEffect(() => {
    if (!open) return;
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  return (
    <AnimatePresence>
      {open ? (
        <div className="fixed inset-0 z-50" role="dialog" aria-modal="true" aria-label={t("chat.history")}>
          <motion.button
            type="button"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={reduceMotion ? { duration: 0 } : undefined}
            className="absolute inset-0 bg-black/45"
            aria-label={t("common.close")}
            onClick={onClose}
          />
          <motion.div
            initial={reduceMotion ? { opacity: 0 } : { y: "100%" }}
            animate={reduceMotion ? { opacity: 1 } : { y: 0 }}
            exit={reduceMotion ? { opacity: 0 } : { y: "100%" }}
            transition={reduceMotion ? { duration: 0 } : springSheet}
            className="glass-panel glass-sheet absolute inset-x-0 bottom-0 flex max-h-[80dvh] flex-col rounded-b-none px-3 pb-safe pt-2"
          >
            <div className="sheet-grabber mx-auto" aria-hidden />
            <h2 className="px-1 pb-2 pt-2 text-[15px] font-semibold text-[var(--text)]">{t("chat.history")}</h2>
            <ChatHistoryList {...props} />
          </motion.div>
        </div>
      ) : null}
    </AnimatePresence>
  );
}