Update web/src/components/RightPanel.tsx

web/src/components/RightPanel.tsx

@@ -1,4 +1,3 @@
-// web/src/components/RightPanel.tsx
 import React, { useState } from 'react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
@@ -10,11 +9,18 @@ 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, DialogFooter } from './ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from './ui/dialog';
 
 interface RightPanelProps {
   user: User | null;
-  onLogin: (user: User) => void;
+  onLogin: (name: string, email: string) => void; // CHANGED
   onLogout: () => void;
   isLoggedIn: boolean;
   onClose?: () => void;
@@ -23,10 +29,6 @@ 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({
@@ -34,31 +36,35 @@ export function RightPanel({
   onLogin,
   onLogout,
   isLoggedIn,
+  onClose,
   exportResult,
+  setExportResult,
   resultType,
-  onExport,
-  onQuiz,
-  onSummary,
+  setResultType,
 }: RightPanelProps) {
   const [showLoginForm, setShowLoginForm] = useState(false);
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
-
   const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false);
   const [feedbackText, setFeedbackText] = useState('');
   const [feedbackCategory, setFeedbackCategory] = useState<'general' | 'bug' | 'feature'>('general');
 
-  const handleLogin = () => {
+  const handleLoginClick = () => {
     if (!name.trim() || !email.trim()) {
       toast.error('Please fill in all fields');
       return;
     }
-    onLogin({ name: name.trim(), email: email.trim() });
+    onLogin(name.trim(), email.trim());
     setShowLoginForm(false);
     setName('');
     setEmail('');
   };
 
+  const handleLogoutClick = () => {
+    onLogout();
+    setShowLoginForm(false);
+  };
+
   const handleFeedbackSubmit = () => {
     if (!feedbackText.trim()) {
       toast.error('Please provide feedback text');
@@ -78,7 +84,7 @@ export function RightPanel({
             <div className="flex flex-col items-center py-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
+                Log in to start your learning session
               </p>
             </div>
 
@@ -104,7 +110,7 @@ export function RightPanel({
                   />
                 </div>
                 <div className="flex gap-2">
-                  <Button onClick={handleLogin} className="flex-1">
+                  <Button onClick={handleLoginClick} className="flex-1">
                     Enter
                   </Button>
                   <Button variant="outline" onClick={() => setShowLoginForm(false)}>
@@ -123,22 +129,11 @@ export function RightPanel({
               <div className="flex-1 min-w-0">
                 <h4 className="truncate">{user?.name}</h4>
                 <p className="text-sm text-muted-foreground truncate">{user?.email}</p>
+                <p className="text-xs text-muted-foreground truncate">user_id: {user?.user_id}</p>
               </div>
             </div>
 
-            <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">
+            <Button variant="destructive" onClick={handleLogoutClick} className="w-full gap-2">
               <LogOut className="h-4 w-4" />
               Log Out
             </Button>
@@ -155,6 +150,7 @@ 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">
@@ -175,7 +171,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 buttons above
+              Results (export / summary / quiz) will appear here after actions run
             </div>
           )}
         </Card>
@@ -201,7 +197,7 @@ export function RightPanel({
           <div className="space-y-3">
             <div className="space-y-2">
               <Label htmlFor="feedbackCategory">Category</Label>
-              <Select value={feedbackCategory} onValueChange={(value) => setFeedbackCategory(value as any)}>
+              <Select value={feedbackCategory} onValueChange={(v) => setFeedbackCategory(v as any)}>
                 <SelectTrigger>
                   <SelectValue placeholder="Select a category" />
                 </SelectTrigger>