Update web/src/components/LeftSidebar.tsx

web/src/components/LeftSidebar.tsx

@@ -4,62 +4,63 @@ import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { Separator } from "./ui/separator";
 import { Bookmark, Trash2, Edit2, Check, X as XIcon } from "lucide-react";
-import type { SavedChat } from "../App";
+
+import type {
+  LearningMode,
+  Language,
+  SpaceType,
+  GroupMember,
+  User as UserType,
+  SavedItem,
+  SavedChat,
+  Workspace,
+  CourseInfo,
+} from "../App";
 
 type Props = {
-  // existing
+  // ===== App.tsx currently passes these =====
+  learningMode: LearningMode;
+  language: Language;
+  onLearningModeChange: (mode: LearningMode) => void;
+  onLanguageChange: (lang: Language) => void;
+
+  spaceType: SpaceType;
+  groupMembers: GroupMember[];
+
+  user: UserType | null;
+  onLogin: (u: UserType | null) => void;
+  onLogout: () => void;
+  isLoggedIn: boolean;
+
+  onEditProfile: () => void;
+
+  savedItems: SavedItem[];
+  recentlySavedId: string | null;
+  onUnsave: (id: string) => void;
+  onSave: (
+    content: string,
+    type: "export" | "quiz" | "summary",
+    saveAsChat?: boolean,
+    format?: "pdf" | "text",
+    workspaceId?: string
+  ) => void;
+
   savedChats: SavedChat[];
-  currentSavedChatId?: string | null;
+  onLoadChat: (chat: SavedChat) => void;
+  onDeleteSavedChat: (id: string) => void;
 
-  onLoadSavedChat?: (chatId: string) => void;
-  onDeleteSavedChat?: (chatId: string) => void;
+  // ✅ NEW in your App.tsx already
+  onRenameSavedChat: (id: string, newTitle: string) => void;
 
-  // ✅ NEW
-  onRenameSavedChat?: (chatId: string, title: string) => void;
+  currentWorkspaceId: string;
+  workspaces: Workspace[];
 
-  // optional: you may already have these
-  className?: string;
+  selectedCourse: string;
+  availableCourses: CourseInfo[];
 };
 
-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
-  }
-
-  return `Chat - ${mode}`;
-}
-
-function formatSavedChatSub(chat: SavedChat) {
-  const ts =
-    (chat as any)?.savedAt ||
-    (chat as any)?.timestamp ||
-    (chat as any)?.createdAt ||
-    (chat as any)?.time ||
-    null;
-
+function formatSub(ts: any) {
   if (!ts) return "";
-
   try {
     const d = typeof ts === "string" || typeof ts === "number" ? new Date(ts) : ts;
     return d.toLocaleString();
@@ -68,34 +69,30 @@ function formatSavedChatSub(chat: SavedChat) {
   }
 }
 
-export function LeftSidebar({
-  savedChats,
-  currentSavedChatId,
-  onLoadSavedChat,
-  onDeleteSavedChat,
-  onRenameSavedChat,
-  className,
-}: Props) {
-  // rename state
+export function LeftSidebar(props: Props) {
+  const {
+    savedChats,
+    onLoadChat,
+    onDeleteSavedChat,
+    onRenameSavedChat,
+  } = 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();
+      const ta = new Date(a.timestamp || a.savedAt || a.createdAt || 0).getTime();
+      const tb = new Date(b.timestamp || b.savedAt || 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));
+    setEditingId(chat.id);
+    setDraftTitle((chat.title || "").trim() || "Untitled chat");
   };
 
   const cancelRename = () => {
@@ -106,43 +103,41 @@ export function LeftSidebar({
   const commitRename = (chatId: string) => {
     const next = draftTitle.trim();
     if (!next) return;
-
-    onRenameSavedChat?.(chatId, next);
+    onRenameSavedChat(chatId, next);
     setEditingId(null);
     setDraftTitle("");
   };
 
   return (
-    <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 className="h-full w-full flex flex-col min-h-0">
+      {/* You can keep other sections above; here we keep minimal structure */}
+      <div className="flex-shrink-0 px-4 pt-4 pb-3">
+        <div className="flex items-center gap-2">
+          <Bookmark className="h-4 w-4" />
+          <h3 className="font-semibold">Saved Chat</h3>
+        </div>
       </div>
 
-      <div className="px-4">
+      <div className="px-4 flex-shrink-0">
         <Separator />
       </div>
 
-      <div className="px-4 py-3 space-y-3">
+      {/* list */}
+      <div className="flex-1 min-h-0 overflow-y-auto 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;
+            const isEditing = editingId === chat.id;
+            const sub = formatSub(chat.timestamp);
 
             return (
               <div
-                key={id}
-                className={`rounded-xl border bg-card px-4 py-3 ${
-                  isActive ? "border-primary/40" : "border-border"
-                }`}
+                key={chat.id}
+                className="rounded-xl border border-border bg-card px-4 py-3"
               >
                 <div className="flex items-start justify-between gap-3">
-                  {/* left: title + time */}
+                  {/* left */}
                   <div className="min-w-0 flex-1">
                     {isEditing ? (
                       <div className="space-y-2">
@@ -154,7 +149,7 @@ export function LeftSidebar({
                           onKeyDown={(e) => {
                             if (e.key === "Enter") {
                               e.preventDefault();
-                              commitRename(id);
+                              commitRename(chat.id);
                             }
                             if (e.key === "Escape") {
                               e.preventDefault();
@@ -166,7 +161,7 @@ export function LeftSidebar({
                           <Button
                             size="sm"
                             className="h-8 px-2"
-                            onClick={() => commitRename(id)}
+                            onClick={() => commitRename(chat.id)}
                             disabled={!draftTitle.trim()}
                             title="Save"
                           >
@@ -184,24 +179,25 @@ export function LeftSidebar({
                         </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>
-                      </>
+                      <button
+                        type="button"
+                        className="text-left w-full"
+                        onClick={() => onLoadChat(chat)}
+                        title="Open saved chat"
+                      >
+                        <div className="font-semibold truncate">{chat.title || "Untitled chat"}</div>
+                        {sub ? (
+                          <div className="text-xs text-muted-foreground mt-1">
+                            {sub}
+                          </div>
+                        ) : null}
+                      </button>
                     )}
                   </div>
 
-                  {/* right: edit + delete */}
+                  {/* right: ✏️ then 🗑️ */}
                   {!isEditing && (
                     <div className="flex items-center gap-2 flex-shrink-0">
-                      {/* ✅ NEW: rename pen icon */}
                       <Button
                         variant="ghost"
                         size="icon"
@@ -223,7 +219,7 @@ export function LeftSidebar({
                         onClick={(e) => {
                           e.preventDefault();
                           e.stopPropagation();
-                          onDeleteSavedChat?.(id);
+                          onDeleteSavedChat(chat.id);
                         }}
                         title="Delete"
                       >
@@ -237,6 +233,9 @@ export function LeftSidebar({
           })
         )}
       </div>
-    </aside>
+
+      {/* Optional footer placeholder (keeps layout stable) */}
+      <div className="flex-shrink-0 px-4 pb-4" />
+    </div>
   );
 }