Update web/src/components/LeftSidebar.tsx

web/src/components/LeftSidebar.tsx

@@ -1,573 +1,242 @@
 // web/src/components/LeftSidebar.tsx
-import React, { useEffect, useState } from "react";
-import { Label } from "./ui/label";
+import React, { useMemo, useState } from "react";
 import { Button } from "./ui/button";
-import { LogIn, Bookmark, Download, Copy } from "lucide-react";
-import { Separator } from "./ui/separator";
-import { GroupMembers } from "./GroupMembers";
-import { Card } from "./ui/card";
 import { Input } from "./ui/input";
-import type {
-  LearningMode,
-  Language,
-  SpaceType,
-  GroupMember,
-  User as UserType,
-  SavedItem,
-  SavedChat,
-} from "../App";
-import { toast } from "sonner";
-import { Document, HeadingLevel, Packer, Paragraph, TextRun } from "docx";
-import { jsPDF } from "jspdf";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog";
-import type { CourseInfo } from "../App";
-
-// ✅ extracted section
-import { SavedChatSection } from "./sidebar/SavedChatSection";
-
-interface LeftSidebarProps {
-  learningMode: LearningMode;
-  language: Language;
-  onLearningModeChange: (mode: LearningMode) => void;
-  onLanguageChange: (lang: Language) => void;
-
-  spaceType: SpaceType;
-  groupMembers: GroupMember[];
-
-  user: UserType | null;
-  onLogin: (user: UserType) => void;
-  onLogout: () => void;
-  isLoggedIn: boolean;
-  onEditProfile: () => void;
-
-  savedItems: SavedItem[];
-  recentlySavedId: string | null;
-  onUnsave: (id: string) => void;
-  onSave: (content: string, type: "export" | "quiz" | "summary") => void;
+import { Separator } from "./ui/separator";
+import { Bookmark, Trash2, Edit2, Check, X as XIcon } from "lucide-react";
+import type { SavedChat } from "../App";
 
+type Props = {
+  // existing
   savedChats: SavedChat[];
-  onLoadChat: (chat: SavedChat) => void;
-  onDeleteSavedChat: (id: string) => void;
-  onRenameSavedChat?: (id: string, newTitle: string) => void;
+  currentSavedChatId?: string | null;
+
+  onLoadSavedChat?: (chatId: string) => void;
+  onDeleteSavedChat?: (chatId: string) => void;
+
+  // ✅ NEW
+  onRenameSavedChat?: (chatId: string, title: string) => void;
+
+  // optional: you may already have these
+  className?: string;
+};
+
+function formatSavedChatTitle(chat: SavedChat) {
+  // ✅ preferred user-defined title
+  const anyChat = chat as any;
+  const t = (anyChat?.title ?? anyChat?.name ?? "").toString().trim();
+  if (t) return t;
+
+  // fallback: keep your old naming style
+  const mode = (chat as any)?.chatMode ? String((chat as any).chatMode) : "Ask";
+  const ts =
+    (chat as any)?.savedAt ||
+    (chat as any)?.timestamp ||
+    (chat as any)?.createdAt ||
+    (chat as any)?.time ||
+    null;
+
+  // attempt to print a nice date if it exists
+  try {
+    if (ts) {
+      const d = typeof ts === "string" || typeof ts === "number" ? new Date(ts) : ts;
+      const dateStr = d.toLocaleDateString();
+      return `Chat - ${mode} - ${dateStr}`;
+    }
+  } catch {
+    // ignore
+  }
 
-  currentWorkspaceId: string;
-  workspaces?: Array<{
-    id: string;
-    type: SpaceType;
-    category?: "course" | "personal";
-    courseName?: string;
-    courseInfo?: CourseInfo;
-    members?: GroupMember[];
-    isEditable?: boolean;
-    name?: string;
-  }>;
+  return `Chat - ${mode}`;
+}
 
-  selectedCourse?: string;
-  courses?: Array<{ id: string; name: string }>;
-  availableCourses?: CourseInfo[];
+function formatSavedChatSub(chat: SavedChat) {
+  const ts =
+    (chat as any)?.savedAt ||
+    (chat as any)?.timestamp ||
+    (chat as any)?.createdAt ||
+    (chat as any)?.time ||
+    null;
+
+  if (!ts) return "";
+
+  try {
+    const d = typeof ts === "string" || typeof ts === "number" ? new Date(ts) : ts;
+    return d.toLocaleString();
+  } catch {
+    return String(ts);
+  }
 }
 
 export function LeftSidebar({
-  learningMode,
-  language,
-  onLearningModeChange,
-  onLanguageChange,
-  spaceType,
-  groupMembers,
-  user,
-  onLogin,
-  onLogout,
-  isLoggedIn,
-  onEditProfile,
-  savedItems,
-  recentlySavedId,
-  onUnsave,
-  onSave,
   savedChats,
-  onLoadChat,
+  currentSavedChatId,
+  onLoadSavedChat,
   onDeleteSavedChat,
   onRenameSavedChat,
-  currentWorkspaceId,
-  workspaces = [],
-  selectedCourse,
-  courses = [],
-  availableCourses = [],
-}: LeftSidebarProps) {
-  const [showLoginForm, setShowLoginForm] = useState(false);
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-
-  const [selectedItem, setSelectedItem] = useState<SavedItem | null>(null);
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-
-  const [isDownloading, setIsDownloading] = useState(false);
-  const [copied, setCopied] = useState(false);
-
-  const [editableTitle, setEditableTitle] = useState("Untitled");
-  const [isEditingTitle, setIsEditingTitle] = useState(false);
-
-  const handleLogin = () => {
-    if (!name.trim() || !email.trim()) {
-      toast.error("Please fill in all fields");
-      return;
-    }
-    onLogin({ name: name.trim(), email: email.trim() });
-    setShowLoginForm(false);
-    setName("");
-    setEmail("");
-    toast.success(`Welcome, ${name}!`);
-  };
-
-  const handleLogout = () => {
-    onLogout();
-    setShowLoginForm(false);
-    toast.success("Logged out successfully");
+  className,
+}: Props) {
+  // rename state
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [draftTitle, setDraftTitle] = useState<string>("");
+
+  const sortedChats = useMemo(() => {
+    // newest first
+    return [...savedChats].sort((a: any, b: any) => {
+      const ta = new Date(a.savedAt || a.timestamp || a.createdAt || 0).getTime();
+      const tb = new Date(b.savedAt || b.timestamp || b.createdAt || 0).getTime();
+      return tb - ta;
+    });
+  }, [savedChats]);
+
+  const startRename = (chat: SavedChat) => {
+    const id = (chat as any).id as string;
+    setEditingId(id);
+
+    const anyChat = chat as any;
+    const existing = (anyChat?.title ?? anyChat?.name ?? "").toString();
+    setDraftTitle(existing || formatSavedChatTitle(chat));
   };
 
-  const downloadBlob = (blob: Blob, filename: string) => {
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = filename;
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    URL.revokeObjectURL(url);
+  const cancelRename = () => {
+    setEditingId(null);
+    setDraftTitle("");
   };
 
-  const formatDateStamp = (date: Date) => {
-    const yyyy = date.getFullYear();
-    const mm = String(date.getMonth() + 1).padStart(2, "0");
-    const dd = String(date.getDate()).padStart(2, "0");
-    return `${yyyy}-${mm}-${dd}`;
-  };
+  const commitRename = (chatId: string) => {
+    const next = draftTitle.trim();
+    if (!next) return;
 
-  const getDefaultFilenameBase = (item: SavedItem) => {
-    const kind = item.type === "export" ? "export" : item.type === "summary" ? "summary" : "quiz";
-    return `clare-${kind}-${formatDateStamp(item.timestamp)}`;
-  };
-
-  const handleDownloadMd = async (item: SavedItem) => {
-    try {
-      setIsDownloading(true);
-      toast.message("Preparing .md…");
-      const blob = new Blob([item.content], { type: "text/markdown;charset=utf-8" });
-      downloadBlob(blob, `${getDefaultFilenameBase(item)}.md`);
-      toast.success("Downloaded .md");
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e);
-      toast.error("Failed to download .md");
-    } finally {
-      setIsDownloading(false);
-    }
-  };
-
-  const handleDownloadDocx = async (item: SavedItem) => {
-    try {
-      setIsDownloading(true);
-      toast.message("Preparing .docx…");
-      const lines = item.content.split("\n");
-      const paragraphs: Paragraph[] = lines.map((line) => {
-        const trimmed = line.trim();
-        if (!trimmed) return new Paragraph({ text: "" });
-        if (trimmed.startsWith("### "))
-          return new Paragraph({
-            text: trimmed.replace(/^###\s+/, ""),
-            heading: HeadingLevel.HEADING_3,
-          });
-        if (trimmed.startsWith("## "))
-          return new Paragraph({
-            text: trimmed.replace(/^##\s+/, ""),
-            heading: HeadingLevel.HEADING_2,
-          });
-        if (trimmed.startsWith("# "))
-          return new Paragraph({
-            text: trimmed.replace(/^#\s+/, ""),
-            heading: HeadingLevel.HEADING_1,
-          });
-        return new Paragraph({ children: [new TextRun({ text: line })] });
-      });
-
-      const doc = new Document({ sections: [{ properties: {}, children: paragraphs }] });
-      const blob = await Packer.toBlob(doc);
-      downloadBlob(blob, `${getDefaultFilenameBase(item)}.docx`);
-      toast.success("Downloaded .docx");
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e);
-      toast.error("Failed to download .docx");
-    } finally {
-      setIsDownloading(false);
-    }
-  };
-
-  const handleDownloadPdf = async (item: SavedItem) => {
-    try {
-      setIsDownloading(true);
-      toast.message("Preparing .pdf…");
-      const doc = new jsPDF({ unit: "pt", format: "a4" });
-      const pageWidth = doc.internal.pageSize.getWidth();
-      const pageHeight = doc.internal.pageSize.getHeight();
-      const margin = 40;
-      const contentWidth = pageWidth - margin * 2;
-      const lineHeight = 16;
-
-      const lines = doc.splitTextToSize(item.content, contentWidth);
-      let y = margin;
-      lines.forEach((line) => {
-        if (y + lineHeight > pageHeight - margin) {
-          doc.addPage();
-          y = margin;
-        }
-        doc.text(line, margin, y);
-        y += lineHeight;
-      });
-
-      doc.save(`${getDefaultFilenameBase(item)}.pdf`);
-      toast.success("Downloaded .pdf");
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e);
-      toast.error("Failed to download .pdf");
-    } finally {
-      setIsDownloading(false);
-    }
-  };
-
-  const handleCopy = async (content: string) => {
-    await navigator.clipboard.writeText(content);
-    setCopied(true);
-    toast.success("Copied to clipboard!");
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const handleUnsaveItem = (id: string) => onUnsave(id);
-
-  const isItemSaved = selectedItem
-    ? savedItems.some((item) => {
-        if (selectedItem.id && item.id === selectedItem.id) return true;
-        return item.content === selectedItem.content && item.type === selectedItem.type;
-      })
-    : false;
-
-  useEffect(() => {
-    if (selectedItem && isDialogOpen) {
-      const updatedItem = savedItems.find(
-        (item) => item.content === selectedItem.content && item.type === selectedItem.type
-      );
-      if (updatedItem && updatedItem.id !== selectedItem.id) setSelectedItem(updatedItem);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [savedItems, isDialogOpen]);
-
-  const handleToggleSave = () => {
-    if (!selectedItem) return;
-
-    if (isItemSaved) {
-      const itemToUnsave = savedItems.find(
-        (item) =>
-          (selectedItem.id && item.id === selectedItem.id) ||
-          (item.content === selectedItem.content && item.type === selectedItem.type)
-      );
-      if (itemToUnsave) handleUnsaveItem(itemToUnsave.id);
-    } else {
-      onSave(selectedItem.content, selectedItem.type);
-    }
+    onRenameSavedChat?.(chatId, next);
+    setEditingId(null);
+    setDraftTitle("");
   };
 
-  const defaultCourses = [
-    { id: "course1", name: "Introduction to AI" },
-    { id: "course2", name: "Machine Learning" },
-    { id: "course3", name: "Data Structures" },
-    { id: "course4", name: "Web Development" },
-  ];
-  const coursesList = courses.length > 0 ? courses : defaultCourses;
-
-  const currentWorkspace = workspaces?.find((w) => w.id === currentWorkspaceId);
-
-  const getCourseDisplayInfo = () => {
-    if (!currentWorkspace) return null;
-
-    if (currentWorkspace.type === "group" && currentWorkspace.category === "course") {
-      if (currentWorkspace.courseInfo) {
-        return {
-          type: "course" as const,
-          name: currentWorkspace.courseInfo.name,
-          instructor: currentWorkspace.courseInfo.instructor,
-          teachingAssistant: currentWorkspace.courseInfo.teachingAssistant,
-        };
-      }
-      return {
-        type: "course" as const,
-        name: currentWorkspace.courseName || "Unknown Course",
-        instructor: { name: "Unknown", email: "" },
-        teachingAssistant: { name: "Unknown", email: "" },
-      };
-    }
-
-    if (currentWorkspace.type === "group" && currentWorkspace.category === "personal") {
-      return {
-        type: "personal" as const,
-        name: editableTitle,
-        members: currentWorkspace.members || [],
-      };
-    }
-
-    if (currentWorkspace.type === "individual") {
-      const saved = selectedCourse || localStorage.getItem("myspace_selected_course") || "course1";
-      const courseInfo = availableCourses?.find((c) => c.id === saved);
-      if (courseInfo) {
-        return {
-          type: "course" as const,
-          name: courseInfo.name,
-          instructor: courseInfo.instructor,
-          teachingAssistant: courseInfo.teachingAssistant,
-        };
-      }
-      const course = coursesList.find((c) => c.id === saved);
-      return {
-        type: "course" as const,
-        name: course?.name || saved,
-        instructor: { name: "Unknown", email: "" },
-        teachingAssistant: { name: "Unknown", email: "" },
-      };
-    }
-
-    return null;
-  };
-
-  const courseDisplayInfo = getCourseDisplayInfo();
-
   return (
-    // ✅ fills parent; NO outer scroll
-    <div className="h-full w-full min-h-0 flex flex-col overflow-hidden">
-      {/* ========== FIXED TOP (no scroll) ========== */}
-      {isLoggedIn && courseDisplayInfo && (
-        <div className="p-4 border-b border-border flex-shrink-0">
-          {courseDisplayInfo.type === "course" ? (
-            <>
-              <h3 className="text-base font-semibold mb-4">{courseDisplayInfo.name}</h3>
-              <div className="space-y-2 text-sm">
-                <div>
-                  <span className="text-muted-foreground">Instructor: </span>
-                  <a href={`mailto:${courseDisplayInfo.instructor.email}`} className="text-primary hover:underline">
-                    {courseDisplayInfo.instructor.name}
-                  </a>
-                </div>
-                <div>
-                  <span className="text-muted-foreground">TA: </span>
-                  <a
-                    href={`mailto:${courseDisplayInfo.teachingAssistant.email}`}
-                    className="text-primary hover:underline"
-                  >
-                    {courseDisplayInfo.teachingAssistant.name}
-                  </a>
-                </div>
-              </div>
-            </>
-          ) : (
-            <>
-              <div className="mb-4">
-                {isEditingTitle ? (
-                  <Input
-                    value={editableTitle}
-                    onChange={(e) => setEditableTitle(e.target.value)}
-                    onBlur={() => setIsEditingTitle(false)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") setIsEditingTitle(false);
-                    }}
-                    autoFocus
-                    className="text-base font-semibold"
-                  />
-                ) : (
-                  <h3
-                    className="text-base font-semibold cursor-pointer hover:text-primary"
-                    onClick={() => setIsEditingTitle(true)}
-                  >
-                    {editableTitle}
-                  </h3>
-                )}
-              </div>
-
-              <div className="space-y-2 text-sm">
-                <div className="text-muted-foreground mb-2">Members:</div>
-                {courseDisplayInfo.members.map((member: any, idx: number) => (
-                  <div key={member.id}>
-                    <span className="text-muted-foreground">{idx === 0 ? "Creator: " : "Member: "}</span>
-                    <a href={`mailto:${member.email}`} className="text-primary hover:underline">
-                      {member.name}
-                    </a>
-                  </div>
-                ))}
-              </div>
-            </>
-          )}
-        </div>
-      )}
-
-      {!isLoggedIn && (
-        <div className="p-4 border-b border-border flex-shrink-0">
-          <h3 className="text-base font-medium mb-4">Login</h3>
-          <Card className="p-4">
-            <div className="space-y-4">
-              <div className="flex flex-col items-center py-4">
-                <img
-                  src="https://images.unsplash.com/photo-1588912914049-d2664f76a947?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzdHVkZW50JTIwc3R1ZHlpbmclMjBpbGx1c3RyYXRpb258ZW58MXx8fHwxNzY2MDY2NjcyfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
-                  alt="Student studying"
-                  className="w-20 h-20 rounded-full object-cover mb-4"
-                />
-                <h3 className="mb-2">Welcome to Clare!</h3>
-                <p className="text-sm text-muted-foreground text-center mb-4">
-                  Log in to start your personalized learning journey
-                </p>
-              </div>
-
-              {!showLoginForm ? (
-                <Button onClick={() => setShowLoginForm(true)} className="w-full gap-2">
-                  <LogIn className="h-4 w-4" />
-                  Student Login
-                </Button>
-              ) : (
-                <div className="space-y-3">
-                  <div className="space-y-2">
-                    <Label htmlFor="name">Name</Label>
-                    <Input id="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter your name" />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="email">Email / Student ID</Label>
-                    <Input
-                      id="email"
-                      type="email"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                      placeholder="Enter your email or ID"
-                    />
-                  </div>
-                  <div className="flex gap-2">
-                    <Button onClick={handleLogin} className="flex-1">
-                      Enter
-                    </Button>
-                    <Button variant="outline" onClick={() => setShowLoginForm(false)}>
-                      Cancel
-                    </Button>
-                  </div>
-                </div>
-              )}
-            </div>
-          </Card>
-        </div>
-      )}
-
-      {spaceType === "group" && (
-        <div className="p-4 border-b border-border flex-shrink-0">
-          <GroupMembers members={groupMembers} />
-        </div>
-      )}
-
-      {/* ========== ONLY SCROLL AREA (Saved Chats) ========== */}
-      <div
-        className="flex-1 min-h-0 overflow-y-auto overscroll-contain"
-        style={{ overscrollBehavior: "contain" }}
-      >
-        {/* IMPORTANT: keep SavedChatSection as a normal block; do NOT nest another overflow-y-auto inside it */}
-        <SavedChatSection
-          isLoggedIn={isLoggedIn}
-          savedChats={savedChats}
-          onLoadChat={onLoadChat}
-          onDeleteSavedChat={onDeleteSavedChat}
-          onRenameSavedChat={onRenameSavedChat}
-        />
+    <aside className={className ?? "h-full w-full"}>
+      <div className="px-4 pt-4 pb-3 flex items-center gap-2">
+        <Bookmark className="h-4 w-4" />
+        <h3 className="font-semibold">Saved Chat</h3>
       </div>
 
-      {/* Saved Item Dialog (unchanged) */}
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogContent className="max-w-4xl max-h-[85vh] flex flex-col">
-          <DialogHeader>
-            <DialogTitle>{selectedItem?.title}</DialogTitle>
-            <DialogDescription>
-              {selectedItem?.type === "export" ? "Export" : selectedItem?.type === "quiz" ? "Quiz" : "Summary"} •{" "}
-              {selectedItem?.timestamp.toLocaleDateString()}
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="flex flex-col flex-1 min-h-0 space-y-4 mt-4">
-            {selectedItem && (
-              <>
-                <div className="flex items-center justify-end gap-2 flex-shrink-0">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    disabled={isDownloading}
-                    onClick={() => handleDownloadMd(selectedItem)}
-                    title="Download as .md"
-                    className="h-7 px-2 text-xs gap-1.5"
-                  >
-                    <Download className="h-3 w-3" />
-                    .md
-                  </Button>
+      <div className="px-4">
+        <Separator />
+      </div>
 
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    disabled={isDownloading}
-                    onClick={() => handleDownloadDocx(selectedItem)}
-                    title="Download as .docx"
-                    className="h-7 px-2 text-xs gap-1.5"
-                  >
-                    <Download className="h-3 w-3" />
-                    .docx
-                  </Button>
+      <div className="px-4 py-3 space-y-3">
+        {sortedChats.length === 0 ? (
+          <div className="text-sm text-muted-foreground">No saved chats yet.</div>
+        ) : (
+          sortedChats.map((chat) => {
+            const id = (chat as any).id as string;
+            const title = formatSavedChatTitle(chat);
+            const sub = formatSavedChatSub(chat);
+            const isActive = currentSavedChatId ? currentSavedChatId === id : false;
+            const isEditing = editingId === id;
+
+            return (
+              <div
+                key={id}
+                className={`rounded-xl border bg-card px-4 py-3 ${
+                  isActive ? "border-primary/40" : "border-border"
+                }`}
+              >
+                <div className="flex items-start justify-between gap-3">
+                  {/* left: title + time */}
+                  <div className="min-w-0 flex-1">
+                    {isEditing ? (
+                      <div className="space-y-2">
+                        <Input
+                          value={draftTitle}
+                          onChange={(e) => setDraftTitle(e.target.value)}
+                          className="h-9"
+                          autoFocus
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              e.preventDefault();
+                              commitRename(id);
+                            }
+                            if (e.key === "Escape") {
+                              e.preventDefault();
+                              cancelRename();
+                            }
+                          }}
+                        />
+                        <div className="flex items-center gap-2">
+                          <Button
+                            size="sm"
+                            className="h-8 px-2"
+                            onClick={() => commitRename(id)}
+                            disabled={!draftTitle.trim()}
+                            title="Save"
+                          >
+                            <Check className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            className="h-8 px-2"
+                            onClick={cancelRename}
+                            title="Cancel"
+                          >
+                            <XIcon className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </div>
+                    ) : (
+                      <>
+                        <button
+                          type="button"
+                          className="text-left w-full"
+                          onClick={() => onLoadSavedChat?.(id)}
+                          title="Open saved chat"
+                        >
+                          <div className="font-semibold truncate">{title}</div>
+                          {sub ? <div className="text-xs text-muted-foreground mt-1">{sub}</div> : null}
+                        </button>
+                      </>
+                    )}
+                  </div>
 
-                  {selectedItem.format === "pdf" && (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      disabled={isDownloading}
-                      onClick={() => handleDownloadPdf(selectedItem)}
-                      title="Download as .pdf"
-                      className="h-7 px-2 text-xs gap-1.5"
-                    >
-                      <Download className="h-3 w-3" />
-                      .pdf
-                    </Button>
+                  {/* right: edit + delete */}
+                  {!isEditing && (
+                    <div className="flex items-center gap-2 flex-shrink-0">
+                      {/* ✅ NEW: rename pen icon */}
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          startRename(chat);
+                        }}
+                        title="Rename"
+                      >
+                        <Edit2 className="h-4 w-4" />
+                      </Button>
+
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8 text-muted-foreground hover:text-destructive"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          onDeleteSavedChat?.(id);
+                        }}
+                        title="Delete"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
                   )}
-
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handleCopy(selectedItem.content)}
-                    disabled={isDownloading}
-                    className="h-7 px-2 text-xs gap-1.5"
-                    title="Copy"
-                  >
-                    <Copy className={`h-3 w-3 ${copied ? "text-green-600" : ""}`} />
-                  </Button>
-
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleToggleSave}
-                    disabled={isDownloading}
-                    className={`h-7 px-2 text-xs gap-1.5 ${
-                      isItemSaved ? "bg-red-50 dark:bg-red-950/20 border-red-300 dark:border-red-800" : ""
-                    }`}
-                    title={isItemSaved ? "Unsave" : "Save for later"}
-                  >
-                    <Bookmark className={`h-3 w-3 ${isItemSaved ? "fill-red-600 text-red-600" : ""}`} />
-                  </Button>
                 </div>
-
-                <Separator className="flex-shrink-0" />
-
-                <div className="text-sm whitespace-pre-wrap text-foreground overflow-y-auto flex-1 min-h-0">
-                  {selectedItem.content}
-                </div>
-              </>
-            )}
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </aside>
   );
 }