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';
@@ -20,7 +21,7 @@ import {
 
 interface RightPanelProps {
   user: User | null;
-  onLogin: (name: string, email: string) => void;
+  onLogin: (name: string, emailOrId: string) => void;
   onLogout: () => void;
   isLoggedIn: boolean;
   onClose?: () => void;
@@ -30,7 +31,7 @@ interface RightPanelProps {
   resultType: 'export' | 'quiz' | 'summary' | null;
   setResultType: (type: 'export' | 'quiz' | 'summary' | null) => void;
 
-  // ✅ 新增：右侧面板里的三个 action 按钮
+  // ✅ Actions buttons callbacks (来自 App.tsx)
   onExport: () => void;
   onQuiz: () => void;
   onSummary: () => void;
@@ -41,7 +42,6 @@ export function RightPanel({
   onLogin,
   onLogout,
   isLoggedIn,
-  onClose,
   exportResult,
   setExportResult,
   resultType,
@@ -52,21 +52,21 @@ export function RightPanel({
 }: RightPanelProps) {
   const [showLoginForm, setShowLoginForm] = useState(false);
   const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
+  const [emailOrId, setEmailOrId] = useState('');
 
   const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false);
   const [feedbackText, setFeedbackText] = useState('');
   const [feedbackCategory, setFeedbackCategory] = useState<'general' | 'bug' | 'feature'>('general');
 
   const handleLoginClick = () => {
-    if (!name.trim() || !email.trim()) {
+    if (!name.trim() || !emailOrId.trim()) {
       toast.error('Please fill in all fields');
       return;
     }
-    onLogin(name.trim(), email.trim());
+    onLogin(name.trim(), emailOrId.trim());
     setShowLoginForm(false);
     setName('');
-    setEmail('');
+    setEmailOrId('');
   };
 
   const handleLogoutClick = () => {
@@ -87,7 +87,7 @@ export function RightPanel({
 
   return (
     <div className="flex-1 overflow-auto p-4 space-y-4">
-      {/* ===== Login Card ===== */}
+      {/* Account */}
       <Card className="p-4">
         {!isLoggedIn ? (
           <div className="space-y-4">
@@ -115,11 +115,11 @@ export function RightPanel({
                   />
                 </div>
                 <div className="space-y-2">
-                  <Label htmlFor="email">Email / Student ID</Label>
+                  <Label htmlFor="emailOrId">Email / Student ID</Label>
                   <Input
-                    id="email"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
+                    id="emailOrId"
+                    value={emailOrId}
+                    onChange={(e) => setEmailOrId(e.target.value)}
                     placeholder="Enter your email or ID"
                   />
                 </div>
@@ -155,55 +155,49 @@ export function RightPanel({
         )}
       </Card>
 
-      {/* ✅ 这里加三按钮：在 login 下面、Results 上面 */}
-      <Card className="p-4 space-y-2">
-        <h3 className="text-sm font-medium">Actions</h3>
+      {/* ✅ Actions：三按钮并排（同宽） */}
+      <Card className="p-4 space-y-3">
+        <div className="flex items-center justify-between">
+          <h3>Actions</h3>
+        </div>
 
+        {/* 关键：grid-cols-3 + 每个 Button w-full */}
         <div className="grid grid-cols-3 gap-2">
           <Button
             variant="outline"
-            className="gap-2"
+            className="w-full h-10 px-0"
             onClick={onExport}
             disabled={!isLoggedIn}
-            title="Export Conversation"
+            title="Export"
           >
             <Download className="h-4 w-4" />
-            <span className="hidden xl:inline">Export</span>
           </Button>
 
           <Button
             variant="outline"
-            className="gap-2"
+            className="w-full h-10 px-0"
             onClick={onQuiz}
             disabled={!isLoggedIn}
-            title="Micro-Quiz"
+            title="Quiz"
           >
             <ClipboardList className="h-4 w-4" />
-            <span className="hidden xl:inline">Quiz</span>
           </Button>
 
           <Button
             variant="outline"
-            className="gap-2"
+            className="w-full h-10 px-0"
             onClick={onSummary}
             disabled={!isLoggedIn}
-            title="Summarization"
+            title="Summary"
           >
             <Sparkles className="h-4 w-4" />
-            <span className="hidden xl:inline">Summary</span>
           </Button>
         </div>
-
-        {!isLoggedIn && (
-          <p className="text-xs text-muted-foreground mt-1">
-            Log in to enable export / quiz / summary.
-          </p>
-        )}
       </Card>
 
       <Separator />
 
-      {/* ===== Results ===== */}
+      {/* Results */}
       <div className="space-y-3">
         <h3>
           {resultType === 'export' && 'Exported Conversation'}
@@ -240,7 +234,7 @@ export function RightPanel({
 
       <Separator />
 
-      {/* ===== Feedback ===== */}
+      {/* Feedback */}
       <div className="space-y-3">
         <h3>Feedback</h3>
         <Button
@@ -257,9 +251,7 @@ export function RightPanel({
         <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
             <DialogTitle>Provide Feedback</DialogTitle>
-            <DialogDescription>
-              Help us improve Clare by sharing your thoughts and suggestions.
-            </DialogDescription>
+            <DialogDescription>Help us improve Clare by sharing your thoughts and suggestions.</DialogDescription>
           </DialogHeader>
 
           <div className="space-y-3">