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

web/src/components/sidebar/LeftSidebar.tsx

@@ -8,6 +8,16 @@ import { Badge } from "../ui/badge";
 import { SavedChatSection } from "./SavedChatSection";
 
 import { Pencil, Check, X, MailPlus, Users } from "lucide-react";
+import { toast } from "sonner";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
 
 import type {
   SavedChat,
@@ -61,8 +71,6 @@ type Props = {
   selectedCourse: string;
   availableCourses: CourseDirectoryItem[];
 
-  onInviteGroupMembers?: () => void;
-
   onRenameGroupName?: (workspaceId: string, newName: string) => Promise<void> | void;
   onRenameGroupNo?: (workspaceId: string, newNo: number) => Promise<void> | void;
 };
@@ -117,7 +125,6 @@ export function LeftSidebar(props: Props) {
     workspaces,
     selectedCourse,
     availableCourses,
-    onInviteGroupMembers,
     onRenameGroupName,
     onRenameGroupNo,
   } = props;
@@ -188,16 +195,34 @@ export function LeftSidebar(props: Props) {
     [currentWorkspaceId]
   );
 
-  // state: group name
+  // group name
   const [groupName, setGroupName] = useState<string>(wsGroupName);
   const [editingGroupName, setEditingGroupName] = useState(false);
   const [draftGroupName, setDraftGroupName] = useState<string>(wsGroupName);
 
-  // state: group no
+  // group no
   const [groupNo, setGroupNo] = useState<number>(toIntOrFallback(wsGroupNo, 1));
   const [editingGroupNo, setEditingGroupNo] = useState(false);
   const [draftGroupNo, setDraftGroupNo] = useState<string>(String(toIntOrFallback(wsGroupNo, 1)));
 
+  // Invite dialog state (restored)
+  const [inviteOpen, setInviteOpen] = useState(false);
+  const [inviteEmail, setInviteEmail] = useState("");
+
+  const handleInviteClick = () => {
+    setInviteOpen(true);
+  };
+
+  const handleSendInvite = () => {
+    if (!inviteEmail.trim()) {
+      toast.error("Please enter an email to invite");
+      return;
+    }
+    toast.success(`Invitation sent to ${inviteEmail}`);
+    setInviteEmail("");
+    setInviteOpen(false);
+  };
+
   useEffect(() => {
     const storedName =
       typeof window !== "undefined" ? window.localStorage.getItem(groupNameStorageKey) : null;
@@ -208,9 +233,10 @@ export function LeftSidebar(props: Props) {
 
     const storedNo =
       typeof window !== "undefined" ? window.localStorage.getItem(groupNoStorageKey) : null;
-    const no = storedNo && storedNo.trim()
-      ? toIntOrFallback(storedNo, toIntOrFallback(wsGroupNo, 1))
-      : toIntOrFallback(wsGroupNo, 1);
+    const no =
+      storedNo && storedNo.trim()
+        ? toIntOrFallback(storedNo, toIntOrFallback(wsGroupNo, 1))
+        : toIntOrFallback(wsGroupNo, 1);
     setGroupNo(no);
     setDraftGroupNo(String(no));
     setEditingGroupNo(false);
@@ -292,7 +318,6 @@ export function LeftSidebar(props: Props) {
           <div className="text-[30px] leading-tight font-semibold">{courseName}</div>
 
           {!isTeamSpace ? (
-            // My Space unchanged
             <div className="space-y-3">
               <div className="text-[30px] leading-tight font-semibold">
                 Group {String(groupNo)}
@@ -336,10 +361,9 @@ export function LeftSidebar(props: Props) {
               </div>
             </div>
           ) : (
-            // Team/Group Space (your requested structure)
             <div className="rounded-2xl border bg-white overflow-hidden">
               <div className="px-4 pt-4 pb-3 space-y-3">
-                {/* Line 1: group name in BLACK + pencil (editable) */}
+                {/* Line 1: group name (black) + pencil */}
                 {!editingGroupName ? (
                   <div className="flex items-center gap-2">
                     <div className="text-[18px] font-semibold text-foreground truncate">
@@ -375,7 +399,7 @@ export function LeftSidebar(props: Props) {
                   </div>
                 )}
 
-                {/* Line 2: "Group {no} (count)" where {no} is editable via pencil */}
+                {/* Line 2: Group {no}(✏️) ({count}) + Invite */}
                 <div className="flex items-center justify-between gap-3">
                   <div className="flex items-center gap-2">
                     <Users className="w-4 h-4 text-muted-foreground" />
@@ -424,7 +448,7 @@ export function LeftSidebar(props: Props) {
                     type="button"
                     variant="secondary"
                     className="h-9 px-3 text-[13px]"
-                    onClick={onInviteGroupMembers}
+                    onClick={handleInviteClick}
                   >
                     <MailPlus className="w-4 h-4 mr-2" />
                     Invite
@@ -546,6 +570,31 @@ export function LeftSidebar(props: Props) {
           </div>
         </div>
       </div>
+
+      {/* Invite Dialog (restored) */}
+      <Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
+        <DialogContent className="w-[600px] max-w-[600px] sm:max-w-[600px]" style={{ maxWidth: 600 }}>
+          <DialogHeader>
+            <DialogTitle>Invite member</DialogTitle>
+            <DialogDescription>Send a quick email invite with the team details.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <Input
+              type="email"
+              placeholder="name@example.com"
+              value={inviteEmail}
+              onChange={(e) => setInviteEmail(e.target.value)}
+            />
+            <p className="text-xs text-muted-foreground">
+              An invitation email with a join link will be sent to this address.
+            </p>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setInviteOpen(false)}>Cancel</Button>
+            <Button onClick={handleSendInvite}>Send invite</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }