Create sidebar/SavedChatSection.tsx

web/src/components/sidebar/SavedChatSection.tsx

@@ -0,0 +1,258 @@
+// web/src/components/sidebar/SavedChatSection.tsx
+import React, { useEffect, useRef, useState } from "react";
+import { MessageSquare, Trash2, Edit2, Check, X as XIcon } from "lucide-react";
+import { Card } from "../ui/card";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import type { SavedChat } from "../../App";
+
+// ================================
+// Saved Chat Item (moved from LeftSidebar, unchanged)
+// ================================
+function SavedChatItem({
+  chat,
+  onLoadChat,
+  onDeleteSavedChat,
+  onRenameSavedChat,
+}: {
+  chat: SavedChat;
+  onLoadChat: (chat: SavedChat) => void;
+  onDeleteSavedChat: (id: string) => void;
+  onRenameSavedChat?: (id: string, newTitle: string) => void;
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState(chat.title);
+  const [originalTitle, setOriginalTitle] = useState(chat.title);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const cancelButtonRef = useRef<HTMLButtonElement>(null);
+  const saveButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!isEditing) {
+      setOriginalTitle(chat.title);
+      setEditTitle(chat.title);
+    }
+  }, [chat.title, isEditing]);
+
+  const handleStartEdit = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setOriginalTitle(chat.title);
+    setEditTitle(chat.title);
+    setIsEditing(true);
+    setTimeout(() => inputRef.current?.focus(), 0);
+  };
+
+  const handleSaveEdit = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (editTitle.trim() && onRenameSavedChat) {
+      onRenameSavedChat(chat.id, editTitle.trim());
+      setIsEditing(false);
+    }
+  };
+
+  const handleCancelEdit = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setEditTitle(originalTitle);
+    setIsEditing(false);
+    inputRef.current?.blur();
+  };
+
+  const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    const relatedTarget = e.relatedTarget as HTMLElement;
+    if (
+      relatedTarget &&
+      (cancelButtonRef.current?.contains(relatedTarget) ||
+        saveButtonRef.current?.contains(relatedTarget))
+    ) {
+      return;
+    }
+    if (editTitle.trim() && editTitle !== originalTitle && onRenameSavedChat) {
+      onRenameSavedChat(chat.id, editTitle.trim());
+    }
+    setIsEditing(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (editTitle.trim() && onRenameSavedChat) {
+        onRenameSavedChat(chat.id, editTitle.trim());
+        setIsEditing(false);
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      setEditTitle(originalTitle);
+      setIsEditing(false);
+    }
+  };
+
+  return (
+    <Card
+      className="p-3 cursor-pointer hover:bg-muted/50 transition-all bg-muted/30"
+      onClick={() => !isEditing && onLoadChat(chat)}
+    >
+      <div className="flex items-start gap-2">
+        <MessageSquare className="h-3.5 w-3.5 mt-0.5 flex-shrink-0 text-muted-foreground" />
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            {isEditing ? (
+              <Input
+                ref={inputRef}
+                value={editTitle}
+                onChange={(e) => setEditTitle(e.target.value)}
+                onKeyDown={handleKeyDown}
+                onClick={(e) => e.stopPropagation()}
+                onBlur={handleInputBlur}
+                className="h-auto text-sm font-medium px-2 py-1 border border-border bg-background focus-visible:ring-2 focus-visible:ring-ring flex-1"
+                style={{ height: "auto" }}
+              />
+            ) : (
+              <h4
+                className="text-sm font-medium truncate flex-1 cursor-text"
+                onDoubleClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleStartEdit(e);
+                }}
+                onClick={(e) => e.stopPropagation()}
+                title="Double click to rename"
+              >
+                {chat.title}
+              </h4>
+            )}
+
+            <div className="flex items-center gap-1 flex-shrink-0">
+              {isEditing ? (
+                <>
+                  <Button
+                    ref={saveButtonRef}
+                    variant="ghost"
+                    size="icon"
+                    className="h-5 w-5 flex-shrink-0 hover:bg-green-500/20"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleSaveEdit(e);
+                    }}
+                    title="Save"
+                    type="button"
+                  >
+                    <Check className="h-3 w-3" />
+                  </Button>
+                  <Button
+                    ref={cancelButtonRef}
+                    variant="ghost"
+                    size="icon"
+                    className="h-5 w-5 flex-shrink-0 hover:bg-destructive/20"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleCancelEdit(e);
+                    }}
+                    title="Cancel"
+                    type="button"
+                  >
+                    <XIcon className="h-3 w-3" />
+                  </Button>
+                </>
+              ) : (
+                <>
+                  {onRenameSavedChat && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-5 w-5 flex-shrink-0 hover:bg-muted"
+                      onClick={handleStartEdit}
+                      title="Rename chat"
+                    >
+                      <Edit2 className="h-3 w-3" />
+                    </Button>
+                  )}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-5 w-5 flex-shrink-0 hover:bg-destructive/20"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDeleteSavedChat(chat.id);
+                    }}
+                    title="Delete chat"
+                  >
+                    <Trash2 className="h-3 w-3" />
+                  </Button>
+                </>
+              )}
+            </div>
+          </div>
+
+          <p className="text-xs text-muted-foreground mt-1">
+            {chat.chatMode === "ask"
+              ? "Ask"
+              : chat.chatMode === "review"
+              ? "Review"
+              : "Quiz"}{" "}
+            • {chat.timestamp.toLocaleDateString()}
+          </p>
+          <p className="text-xs text-muted-foreground/70 mt-1">
+            {chat.messages.length} message{chat.messages.length !== 1 ? "s" : ""}
+          </p>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+// ================================
+// Saved Chat Section (NEW)
+// ================================
+export function SavedChatSection({
+  isLoggedIn,
+  savedChats,
+  onLoadChat,
+  onDeleteSavedChat,
+  onRenameSavedChat,
+}: {
+  isLoggedIn: boolean;
+  savedChats: SavedChat[];
+  onLoadChat: (chat: SavedChat) => void;
+  onDeleteSavedChat: (id: string) => void;
+  onRenameSavedChat?: (id: string, newTitle: string) => void;
+}) {
+  if (!isLoggedIn) return null;
+
+  return (
+    <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+      <div className="p-4 border-b border-border flex-shrink-0">
+        <h3 className="text-base font-medium">Saved Chat</h3>
+      </div>
+
+      {/* ONLY this area scrolls */}
+      <div className="flex-1 min-h-0 panelScroll p-4">
+        {savedChats.length === 0 ? (
+          <div className="text-sm text-muted-foreground text-center py-4">
+            <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" />
+            <p>No saved chats yet</p>
+            <p className="text-xs mt-1">Save conversations to view them here</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {savedChats.map((chat) => (
+              <SavedChatItem
+                key={chat.id}
+                chat={chat}
+                onLoadChat={onLoadChat}
+                onDeleteSavedChat={onDeleteSavedChat}
+                onRenameSavedChat={onRenameSavedChat}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}