Update web/src/components/RightPanel.tsx

web/src/components/RightPanel.tsx

@@ -1,3 +1,4 @@
+// web/src/components/RightPanel.tsx
 import React, { useState } from 'react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
@@ -9,19 +10,11 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '.
 import { LogIn, LogOut, FileText, MessageSquare } from 'lucide-react';
 import type { User } from '../App';
 import { toast } from 'sonner';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  DialogFooter,
-} from './ui/dialog';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from './ui/dialog';
 
 interface RightPanelProps {
   user: User | null;
-  onLogin: (payload: { name: string; email: string }) => Promise<void> | void;
+  onLogin: (user: User) => void;
   onLogout: () => void;
   isLoggedIn: boolean;
   onClose?: () => void;
@@ -30,6 +23,10 @@ interface RightPanelProps {
   setExportResult: (result: string) => void;
   resultType: 'export' | 'quiz' | 'summary' | null;
   setResultType: (type: 'export' | 'quiz' | 'summary' | null) => void;
+
+  onExport: () => void;
+  onQuiz: () => void;
+  onSummary: () => void;
 }
 
 export function RightPanel({
@@ -38,9 +35,10 @@ export function RightPanel({
   onLogout,
   isLoggedIn,
   exportResult,
-  setExportResult,
   resultType,
-  setResultType,
+  onExport,
+  onQuiz,
+  onSummary,
 }: RightPanelProps) {
   const [showLoginForm, setShowLoginForm] = useState(false);
   const [name, setName] = useState('');
@@ -50,28 +48,22 @@ export function RightPanel({
   const [feedbackText, setFeedbackText] = useState('');
   const [feedbackCategory, setFeedbackCategory] = useState<'general' | 'bug' | 'feature'>('general');
 
-  const handleLoginClick = async () => {
+  const handleLogin = () => {
     if (!name.trim() || !email.trim()) {
       toast.error('Please fill in all fields');
       return;
     }
-    await onLogin({ name: name.trim(), email: email.trim() });
+    onLogin({ name: name.trim(), email: email.trim() });
     setShowLoginForm(false);
     setName('');
     setEmail('');
   };
 
-  const handleLogout = () => {
-    onLogout();
-    setShowLoginForm(false);
-  };
-
   const handleFeedbackSubmit = () => {
     if (!feedbackText.trim()) {
       toast.error('Please provide feedback text');
       return;
     }
-    // MVP: keep console log; next step we can POST to /api/feedback
     console.log('Feedback submitted:', feedbackText, feedbackCategory);
     setFeedbackDialogOpen(false);
     setFeedbackText('');
@@ -80,16 +72,10 @@ export function RightPanel({
 
   return (
     <div className="flex-1 overflow-auto p-4 space-y-4">
-      {/* Login Section */}
       <Card className="p-4">
         {!isLoggedIn ? (
           <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
@@ -105,24 +91,20 @@ export function RightPanel({
               <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"
-                  />
+                  <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={handleLoginClick} className="flex-1">
+                  <Button onClick={handleLogin} className="flex-1">
                     Enter
                   </Button>
                   <Button variant="outline" onClick={() => setShowLoginForm(false)}>
@@ -136,14 +118,27 @@ export function RightPanel({
           <div className="space-y-4">
             <div className="flex items-center gap-3">
               <div className="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center text-white">
-                {user?.name?.charAt(0)?.toUpperCase() ?? 'U'}
+                {user?.name?.charAt(0).toUpperCase()}
               </div>
               <div className="flex-1 min-w-0">
                 <h4 className="truncate">{user?.name}</h4>
                 <p className="text-sm text-muted-foreground truncate">{user?.email}</p>
               </div>
             </div>
-            <Button variant="destructive" onClick={handleLogout} className="w-full gap-2">
+
+            <div className="grid grid-cols-3 gap-2">
+              <Button variant="outline" onClick={onExport} className="text-xs" disabled={!isLoggedIn}>
+                Export
+              </Button>
+              <Button variant="outline" onClick={onSummary} className="text-xs" disabled={!isLoggedIn}>
+                Summary
+              </Button>
+              <Button variant="outline" onClick={onQuiz} className="text-xs" disabled={!isLoggedIn}>
+                Quiz
+              </Button>
+            </div>
+
+            <Button variant="destructive" onClick={onLogout} className="w-full gap-2">
               <LogOut className="h-4 w-4" />
               Log Out
             </Button>
@@ -153,7 +148,6 @@ export function RightPanel({
 
       <Separator />
 
-      {/* Results Section */}
       <div className="space-y-3">
         <h3>
           {resultType === 'export' && 'Exported Conversation'}
@@ -161,7 +155,6 @@ export function RightPanel({
           {resultType === 'summary' && 'Summarization'}
           {!resultType && 'Results'}
         </h3>
-
         <Card className="p-4 min-h-[200px] bg-muted/30">
           {exportResult ? (
             <div className="space-y-3">
@@ -182,7 +175,7 @@ export function RightPanel({
             </div>
           ) : (
             <div className="flex items-center justify-center h-full text-sm text-muted-foreground text-left">
-              Results (export / summary / quiz) will appear here after using the actions
+              Results (export / summary / quiz) will appear here after using the buttons above
             </div>
           )}
         </Card>
@@ -190,62 +183,56 @@ export function RightPanel({
 
       <Separator />
 
-      {/* Feedback Section */}
       <div className="space-y-3">
         <h3>Feedback</h3>
-        <Dialog open={feedbackDialogOpen} onOpenChange={setFeedbackDialogOpen}>
-          <DialogTrigger asChild>
-            <Button variant="outline" className="w-full justify-start gap-2">
-              <MessageSquare className="h-4 w-4" />
-              Provide Feedback
-            </Button>
-          </DialogTrigger>
-
-          <DialogContent className="sm:max-w-[425px]">
-            <DialogHeader>
-              <DialogTitle>Provide Feedback</DialogTitle>
-              <DialogDescription>Help us improve Clare by sharing your thoughts and suggestions.</DialogDescription>
-            </DialogHeader>
+        <Button variant="outline" className="w-full justify-start gap-2" onClick={() => setFeedbackDialogOpen(true)}>
+          <MessageSquare className="h-4 w-4" />
+          Provide Feedback
+        </Button>
+      </div>
 
-            <div className="space-y-3">
-              <div className="space-y-2">
-                <Label htmlFor="feedbackCategory">Category</Label>
-                <Select
-                  value={feedbackCategory}
-                  onValueChange={(value) => setFeedbackCategory(value as 'general' | 'bug' | 'feature')}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select a category" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="general">General Feedback</SelectItem>
-                    <SelectItem value="bug">Bug Report</SelectItem>
-                    <SelectItem value="feature">Feature Request</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
+      <Dialog open={feedbackDialogOpen} onOpenChange={setFeedbackDialogOpen}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Provide Feedback</DialogTitle>
+            <DialogDescription>Help us improve Clare by sharing your thoughts and suggestions.</DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3">
+            <div className="space-y-2">
+              <Label htmlFor="feedbackCategory">Category</Label>
+              <Select value={feedbackCategory} onValueChange={(value) => setFeedbackCategory(value as any)}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a category" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="general">General Feedback</SelectItem>
+                  <SelectItem value="bug">Bug Report</SelectItem>
+                  <SelectItem value="feature">Feature Request</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
 
-              <div className="space-y-2">
-                <Label htmlFor="feedbackText">Feedback</Label>
-                <Textarea
-                  id="feedbackText"
-                  value={feedbackText}
-                  onChange={(e) => setFeedbackText(e.target.value)}
-                  placeholder="Enter your feedback here..."
-                  className="min-h-[100px]"
-                />
-              </div>
+            <div className="space-y-2">
+              <Label htmlFor="feedbackText">Feedback</Label>
+              <Textarea
+                id="feedbackText"
+                value={feedbackText}
+                onChange={(e) => setFeedbackText(e.target.value)}
+                placeholder="Enter your feedback here..."
+                className="min-h-[100px]"
+              />
             </div>
+          </div>
 
-            <DialogFooter>
-              <Button variant="outline" onClick={() => setFeedbackDialogOpen(false)}>
-                Cancel
-              </Button>
-              <Button onClick={handleFeedbackSubmit}>Submit</Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setFeedbackDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleFeedbackSubmit}>Submit</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }