Update web/src/components/sidebar/SavedChatSection.tsx

web/src/components/sidebar/SavedChatSection.tsx

@@ -1,215 +1,10 @@
-// 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 React from "react";
 import { Card } from "../ui/card";
 import { Button } from "../ui/button";
-import { Input } from "../ui/input";
+import { Separator } from "../ui/separator";
+import { Bookmark, Trash2 } from "lucide-react";
 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,
@@ -226,29 +21,54 @@ export function SavedChatSection({
   if (!isLoggedIn) return null;
 
   return (
+    // ✅ Eat remaining height in LeftSidebar
     <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>
+      {/* fixed header */}
+      <div className="px-4 py-3 flex-shrink-0">
+        <div className="flex items-center gap-2">
+          <Bookmark className="h-4 w-4" />
+          <div className="font-semibold">Saved Chat</div>
+        </div>
       </div>
 
-      {/* ONLY this area scrolls */}
-      <div className="flex-1 min-h-0 panelScroll p-4">
+      <Separator className="flex-shrink-0" />
+
+      {/* ✅ ONLY THIS SCROLLS */}
+      <div className="flex-1 min-h-0 overflow-y-auto px-4 py-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>
+          <Card className="p-8 text-center">
+            <div className="text-sm text-muted-foreground">No saved chats yet</div>
+            <div className="text-xs text-muted-foreground mt-1">
+              Save conversations to view them here
+            </div>
+          </Card>
         ) : (
           <div className="space-y-2">
             {savedChats.map((chat) => (
-              <SavedChatItem
-                key={chat.id}
-                chat={chat}
-                onLoadChat={onLoadChat}
-                onDeleteSavedChat={onDeleteSavedChat}
-                onRenameSavedChat={onRenameSavedChat}
-              />
+              <Card key={chat.id} className="p-3">
+                <div className="flex items-start justify-between gap-2">
+                  <button
+                    type="button"
+                    onClick={() => onLoadChat(chat)}
+                    className="text-left flex-1"
+                  >
+                    <div className="text-sm font-medium leading-5">{chat.title}</div>
+                    <div className="text-xs text-muted-foreground mt-1">
+                      {chat.timestamp.toLocaleString()}
+                    </div>
+                  </button>
+
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8"
+                    onClick={() => onDeleteSavedChat(chat.id)}
+                    title="Delete"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </Card>
             ))}
           </div>
         )}