Update web/src/components/Header.tsx

web/src/components/Header.tsx

@@ -1,23 +1,31 @@
-import React, { useState } from 'react';
-import { Button } from './ui/button';
-import { Menu, Sun, Moon, Languages, ChevronDown, LogOut, Plus, X, User, Edit, Star } from 'lucide-react';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
+// web/src/components/Header.tsx
+import React, { useState } from "react";
+import { Button } from "./ui/button";
+import { Menu, Sun, Moon, Languages, ChevronDown, LogOut, Plus, X, Edit, Star } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
   DropdownMenuSeparator,
-} from './ui/dropdown-menu';
-import clareAvatar from '../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png';
-import type { Workspace, CourseInfo } from '../App';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from './ui/dialog';
-import { Input } from './ui/input';
-import { Label } from './ui/label';
-import { RadioGroup, RadioGroupItem } from './ui/radio-group';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
-import { toast } from 'sonner';
-import { ProfileEditor } from './ProfileEditor';
+} from "./ui/dropdown-menu";
+import clareAvatar from "../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png";
+import type { Workspace, CourseInfo } from "../App";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "./ui/dialog";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { toast } from "sonner";
+import { ProfileEditor } from "./ProfileEditor";
+
+type UserType = {
+  name: string;
+  email: string;
+};
+
+type Language = "auto" | "en" | "zh";
 
 interface HeaderProps {
   user: UserType | null;
@@ -32,21 +40,19 @@ interface HeaderProps {
   onWorkspaceChange: (workspaceId: string) => void;
   onCreateWorkspace?: (payload: {
     name: string;
-    category: 'course' | 'personal';
+    category: "course" | "personal";
     courseId?: string;
     invites: string[];
   }) => void;
   onLogout: () => void;
   availableCourses?: CourseInfo[];
   onUserUpdate?: (user: UserType) => void;
-}
-
-type UserType = {
-  name: string;
-  email: string;
-};
 
-type Language = 'auto' | 'en' | 'zh';
+  // ✅ NEW: controlled review-star display + click behavior
+  reviewStarOpacity?: number; // 0..1
+  reviewEnergyPct?: number;   // 0..100
+  onStarClick?: () => void;   // recommended: switch to Review
+}
 
 export function Header({
   user,
@@ -63,125 +69,96 @@ export function Header({
   onCreateWorkspace,
   availableCourses = [],
   onUserUpdate,
+  reviewStarOpacity,
+  reviewEnergyPct,
+  onStarClick,
 }: HeaderProps) {
   const [showProfileEditor, setShowProfileEditor] = useState(false);
-  // Star brightness levels: 0-10 (11 levels), 0 = 100%, 10 = 0%
-  const [starBrightness, setStarBrightness] = useState(0);
-  const languageLabels = {
-    auto: 'Auto',
-    en: 'English',
-    zh: '简体中文',
-  };
 
   const [createOpen, setCreateOpen] = useState(false);
-  const [workspaceName, setWorkspaceName] = useState('');
-  const [category, setCategory] = useState<'course' | 'personal'>('course');
-  const [courseId, setCourseId] = useState('');
-  const [inviteEmail, setInviteEmail] = useState('');
+  const [workspaceName, setWorkspaceName] = useState("");
+  const [category, setCategory] = useState<"course" | "personal">("course");
+  const [courseId, setCourseId] = useState("");
+  const [inviteEmail, setInviteEmail] = useState("");
   const [invites, setInvites] = useState<string[]>([]);
 
+  const opacity = typeof reviewStarOpacity === "number" ? reviewStarOpacity : 0.15;
+  const energy = typeof reviewEnergyPct === "number" ? reviewEnergyPct : Math.round(opacity * 100);
+
+  const getStarStyle = () => {
+    if (energy <= 0) {
+      return { fill: "transparent", stroke: "white", strokeWidth: 1.5, strokeDasharray: "2 2" };
+    }
+    if (energy >= 60) return { fill: "#fbbf24", stroke: "#fbbf24", strokeWidth: 0 };
+    if (energy >= 25) return { fill: "#fcd34d", stroke: "#fcd34d", strokeWidth: 0 };
+    return { fill: "#fde68a", stroke: "#fde68a", strokeWidth: 0 };
+  };
+
   const addInvite = () => {
     const email = inviteEmail.trim();
     if (!email) return;
     if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      toast.error('Please enter a valid email');
+      toast.error("Please enter a valid email");
       return;
     }
     if (invites.includes(email)) return;
-    setInvites(prev => [...prev, email]);
-    setInviteEmail('');
+    setInvites((prev) => [...prev, email]);
+    setInviteEmail("");
   };
 
   const removeInvite = (email: string) => {
-    setInvites(prev => prev.filter(e => e !== email));
-  };
-
-  const handleStarClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    // Cycle through brightness levels: 0 -> 1 -> ... -> 10 -> 0
-    setStarBrightness((prev) => (prev + 1) % 11);
-  };
-
-  const getStarOpacity = () => {
-    // 11 levels: 0 = 100% (1.0), 10 = 0% (0.0)
-    return 1 - (starBrightness / 10);
-  };
-
-  const getEnergyValue = () => {
-    // Energy value: 0 = 100%, 1 = 90%, ..., 10 = 0%
-    return 100 - (starBrightness * 10);
-  };
-
-  const getStarColor = () => {
-    // Color transitions from gold (100%) to gray/white (0%)
-    if (starBrightness === 10) {
-      return { fill: 'transparent', stroke: 'white', strokeWidth: 1.5, strokeDasharray: '2 2' };
-    }
-    // Interpolate from gold (#fbbf24) to lighter gold/gray
-    const energy = getEnergyValue();
-    if (energy >= 50) {
-      // High energy: bright gold
-      return { fill: '#fbbf24', stroke: '#fbbf24', strokeWidth: 0 };
-    } else if (energy >= 20) {
-      // Medium energy: lighter gold
-      return { fill: '#fcd34d', stroke: '#fcd34d', strokeWidth: 0 };
-    } else {
-      // Low energy: very light gold/gray
-      return { fill: '#fde68a', stroke: '#fde68a', strokeWidth: 0 };
-    }
+    setInvites((prev) => prev.filter((e) => e !== email));
   };
 
   const handleCreate = () => {
     if (!workspaceName.trim()) {
-      toast.error('Please enter a workspace name');
+      toast.error("Please enter a workspace name");
       return;
     }
-    if (category === 'course' && !courseId) {
-      toast.error('Please select a course');
+    if (category === "course" && !courseId) {
+      toast.error("Please select a course");
       return;
     }
     if (invites.length === 0) {
-      toast.error('Please add at least one member');
+      toast.error("Please add at least one member");
       return;
     }
-    
-    // Call the create function
+
     onCreateWorkspace?.({
       name: workspaceName.trim(),
       category,
       courseId: courseId || undefined,
       invites,
     });
-    
-    // Reset form and close dialog
-    setWorkspaceName('');
-    setCourseId('');
-    setCategory('course');
+
+    setWorkspaceName("");
+    setCourseId("");
+    setCategory("course");
     setInvites([]);
-    setInviteEmail('');
+    setInviteEmail("");
     setCreateOpen(false);
   };
 
   return (
     <header className="h-16 border-b border-border bg-card px-4 lg:px-6 flex items-center justify-between sticky top-0 z-[100]">
       <div className="flex items-center gap-4">
-        <Button
-          variant="ghost"
-          size="icon"
-          className="lg:hidden"
-          onClick={onMenuClick}
-        >
+        <Button variant="ghost" size="icon" className="lg:hidden" onClick={onMenuClick}>
           <Menu className="h-5 w-5" />
         </Button>
-        
+
         <div className="flex items-center gap-3">
           <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center">
             <img src={clareAvatar} alt="Clare AI" className="w-full h-full object-cover" />
           </div>
           <div>
-            <h1 className="text-lg sm:text-xl tracking-tight" style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, letterSpacing: '-0.02em' }}>
-              Clare <span className="text-sm font-bold text-muted-foreground hidden sm:inline ml-2">Your Personalized AI Tutor</span>
+            <h1
+              className="text-lg sm:text-xl tracking-tight"
+              style={{ fontFamily: "Inter, sans-serif", fontWeight: 600, letterSpacing: "-0.02em" }}
+            >
+              Clare{" "}
+              <span className="text-sm font-bold text-muted-foreground hidden sm:inline ml-2">
+                Your Personalized AI Tutor
+              </span>
             </h1>
             <p className="text-xs text-muted-foreground hidden sm:block">
               Personalized guidance, review, and intelligent reinforcement
@@ -193,226 +170,202 @@ export function Header({
       <div className="flex items-center gap-2">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              aria-label="Change language"
-            >
+            <Button variant="ghost" size="icon" aria-label="Change language">
               <Languages className="h-5 w-5" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => onLanguageChange('auto')}>
-              {language === 'auto' && '✓ '}Auto
+            <DropdownMenuItem onClick={() => onLanguageChange("auto")}>
+              {language === "auto" && "✓ "}Auto
             </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => onLanguageChange('en')}>
-              {language === 'en' && '✓ '}English
+            <DropdownMenuItem onClick={() => onLanguageChange("en")}>
+              {language === "en" && "✓ "}English
             </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => onLanguageChange('zh')}>
-              {language === 'zh' && '✓ '}简体中文
+            <DropdownMenuItem onClick={() => onLanguageChange("zh")}>
+              {language === "zh" && "✓ "}简体中文
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
-        
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={onToggleDarkMode}
-          aria-label="Toggle dark mode"
-        >
+
+        <Button variant="ghost" size="icon" onClick={onToggleDarkMode} aria-label="Toggle dark mode">
           {isDarkMode ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
         </Button>
-        
+
         {user && currentWorkspace ? (
           <>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                className="gap-2 pl-2 pr-3"
-                aria-label="Switch workspace"
-              >
-                <img 
-                  src={currentWorkspace.avatar} 
-                  alt={currentWorkspace.name}
-                  className="w-6 h-6 rounded-full object-cover"
-                />
-                <span className="hidden sm:inline max-w-[120px] truncate">{currentWorkspace.name}</span>
-                <ChevronDown className="h-4 w-4 opacity-50" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="min-w-[14rem]">
-              {workspaces.map((workspace) => (
-                <DropdownMenuItem 
-                  key={workspace.id}
-                  onClick={() => onWorkspaceChange(workspace.id)}
-                  className={`gap-3 ${currentWorkspace.id === workspace.id ? 'bg-accent' : ''}`}
-                >
-                  <img 
-                    src={workspace.avatar} 
-                    alt={workspace.name}
-                    className="w-6 h-6 rounded-full object-cover flex-shrink-0"
-                  />
-                  <span className="truncate">{workspace.name}</span>
-                  {currentWorkspace.id === workspace.id && (
-                    <span className="ml-auto text-primary">✓</span>
-                  )}
-                </DropdownMenuItem>
-              ))}
-              <DropdownMenuSeparator />
-              <DropdownMenuItem className="gap-2" onClick={() => setCreateOpen(true)}>
-                <Plus className="h-4 w-4" />
-                <span>New Group Workspace</span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          
-          {/* Profile Avatar Button */}
-          <div className="relative inline-block">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="rounded-full"
-                  aria-label="User profile"
-                >
-                  <img 
-                    src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`}
-                    alt={user.name}
-                    className="w-8 h-8 rounded-full object-cover"
+                <Button variant="outline" className="gap-2 pl-2 pr-3" aria-label="Switch workspace">
+                  <img
+                    src={currentWorkspace.avatar}
+                    alt={currentWorkspace.name}
+                    className="w-6 h-6 rounded-full object-cover"
                   />
+                  <span className="hidden sm:inline max-w-[120px] truncate">{currentWorkspace.name}</span>
+                  <ChevronDown className="h-4 w-4 opacity-50" />
                 </Button>
               </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56">
-              <div className="px-2 py-1.5">
-                <div className="flex items-center justify-between gap-2">
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium truncate">{user.name}</p>
-                    <p className="text-xs text-muted-foreground truncate">ID: {user.email.split('@')[0] || user.email}</p>
-                  </div>
-                  <div className="flex items-center gap-2 flex-shrink-0">
-                  {starBrightness === 10 ? (
-                    <Star
-                      className="w-4 h-4"
-                      style={{
-                        fill: 'transparent',
-                        stroke: 'white',
-                        strokeWidth: 1.5,
-                        strokeDasharray: '2 2',
-                        opacity: 0.6
-                      }}
+
+              <DropdownMenuContent align="end" className="min-w-[14rem]">
+                {workspaces.map((workspace) => (
+                  <DropdownMenuItem
+                    key={workspace.id}
+                    onClick={() => onWorkspaceChange(workspace.id)}
+                    className={`gap-3 ${currentWorkspace.id === workspace.id ? "bg-accent" : ""}`}
+                  >
+                    <img
+                      src={workspace.avatar}
+                      alt={workspace.name}
+                      className="w-6 h-6 rounded-full object-cover flex-shrink-0"
                     />
-                  ) : (
-                    <Star
-                      className="w-4 h-4"
-                      style={{
-                        ...getStarColor(),
-                        opacity: getStarOpacity(),
-                        filter: starBrightness === 0 ? 'drop-shadow(0 0 2px rgba(251, 191, 36, 0.8))' : 'none'
-                      }}
+                    <span className="truncate">{workspace.name}</span>
+                    {currentWorkspace.id === workspace.id && <span className="ml-auto text-primary">✓</span>}
+                  </DropdownMenuItem>
+                ))}
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="gap-2" onClick={() => setCreateOpen(true)}>
+                  <Plus className="h-4 w-4" />
+                  <span>New Group Workspace</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            {/* Profile Avatar Button */}
+            <div className="relative inline-block">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="icon" className="rounded-full" aria-label="User profile">
+                    <img
+                      src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(user.email)}`}
+                      alt={user.name}
+                      className="w-8 h-8 rounded-full object-cover"
                     />
-                  )}
-                    <div className="flex flex-col items-end">
-                      <span className="text-xs font-medium">{getEnergyValue()}%</span>
-                      <div className="w-12 h-1.5 bg-muted rounded-full overflow-hidden">
-                        <div 
-                          className="h-full bg-gradient-to-r from-amber-400 to-yellow-500 transition-all duration-300"
-                          style={{ width: `${getEnergyValue()}%` }}
+                  </Button>
+                </DropdownMenuTrigger>
+
+                <DropdownMenuContent align="end" className="w-56">
+                  <div className="px-2 py-1.5">
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium truncate">{user.name}</p>
+                        <p className="text-xs text-muted-foreground truncate">
+                          ID: {user.email.split("@")[0] || user.email}
+                        </p>
+                      </div>
+
+                      <div className="flex items-center gap-2 flex-shrink-0">
+                        <Star
+                          className="w-4 h-4"
+                          style={{
+                            ...getStarStyle(),
+                            opacity,
+                            filter: energy >= 85 ? "drop-shadow(0 0 2px rgba(251, 191, 36, 0.8))" : "none",
+                          }}
                         />
+                        <div className="flex flex-col items-end">
+                          <span className="text-xs font-medium">{energy}%</span>
+                          <div className="w-12 h-1.5 bg-muted rounded-full overflow-hidden">
+                            <div
+                              className="h-full bg-gradient-to-r from-amber-400 to-yellow-500 transition-all duration-300"
+                              style={{ width: `${energy}%` }}
+                            />
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              </div>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem onClick={() => setShowProfileEditor(true)}>
-                <Edit className="h-4 w-4 mr-2" />
-                Edit Profile
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem onClick={onLogout} className="text-destructive focus:text-destructive">
-                <LogOut className="h-4 w-4 mr-2" />
-                Log out
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          {/* Star badge in top-right corner of avatar - positioned outside, not overlapping */}
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  className="absolute cursor-pointer z-20 pointer-events-auto bg-transparent border-0 p-0"
-                    style={{ 
-                      top: '-8px',
-                      right: '-16px',
-                      opacity: starBrightness === 10 ? 0.6 : 1,
-                      transition: 'opacity 0.3s ease-in-out',
-                      filter: starBrightness === 0 ? 'drop-shadow(0 0 4px rgba(251, 191, 36, 0.8)) drop-shadow(0 0 8px rgba(251, 191, 36, 0.4))' : 'none'
-                    }}
-                  onClick={handleStarClick}
-                >
-                  {starBrightness === 10 ? (
-                    <Star
-                      className="w-5 h-5"
+
+                  <DropdownMenuSeparator />
+
+                  <DropdownMenuItem onClick={() => setShowProfileEditor(true)}>
+                    <Edit className="h-4 w-4 mr-2" />
+                    Edit Profile
+                  </DropdownMenuItem>
+
+                  <DropdownMenuSeparator />
+
+                  <DropdownMenuItem onClick={onLogout} className="text-destructive focus:text-destructive">
+                    <LogOut className="h-4 w-4 mr-2" />
+                    Log out
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              {/* Star badge in top-right corner of avatar */}
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      className="absolute cursor-pointer z-20 pointer-events-auto bg-transparent border-0 p-0"
                       style={{
-                        fill: 'transparent',
-                        stroke: 'white',
-                        strokeWidth: 1.5,
-                        strokeDasharray: '2 2'
+                        top: "-8px",
+                        right: "-16px",
+                        opacity,
+                        transition: "opacity 0.3s ease-in-out",
+                        filter: energy >= 85
+                          ? "drop-shadow(0 0 4px rgba(251, 191, 36, 0.8)) drop-shadow(0 0 8px rgba(251, 191, 36, 0.4))"
+                          : "none",
                       }}
-                    />
-                  ) : (
-                    <Star
-                      className="w-5 h-5"
-                      style={{
-                        ...getStarColor(),
-                        opacity: getStarOpacity(),
-                        filter: starBrightness === 0 ? 'drop-shadow(0 0 2px rgba(251, 191, 36, 1))' : 'none'
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onStarClick?.();
                       }}
-                    />
-                  )}
-                </button>
-              </TooltipTrigger>
-                <TooltipContent 
-                  className="z-[200] border border-amber-300/30 shadow-md"
-                  style={{ 
-                    zIndex: 200,
-                    backgroundColor: 'rgba(251, 191, 36, 0.95)',
-                    color: 'rgb(28, 25, 23)'
-                  }}
-                  sideOffset={5}
-                >
-                  <div className="space-y-1">
-                    <p className="text-sm font-medium">Energy: {getEnergyValue()}%</p>
-                    <div className="w-32 h-2 bg-muted rounded-full overflow-hidden">
-                      <div 
-                        className="h-full bg-gradient-to-r from-amber-400 to-yellow-500 transition-all duration-300"
-                        style={{ width: `${getEnergyValue()}%` }}
+                      aria-label="Review energy"
+                      title="Review energy"
+                    >
+                      <Star
+                        className="w-5 h-5"
+                        style={{
+                          ...getStarStyle(),
+                          opacity,
+                          filter: energy >= 85 ? "drop-shadow(0 0 2px rgba(251, 191, 36, 1))" : "none",
+                        }}
                       />
+                    </button>
+                  </TooltipTrigger>
+
+                  <TooltipContent
+                    className="z-[200] border border-amber-300/30 shadow-md"
+                    style={{
+                      zIndex: 200,
+                      backgroundColor: "rgba(251, 191, 36, 0.95)",
+                      color: "rgb(28, 25, 23)",
+                    }}
+                    sideOffset={5}
+                  >
+                    <div className="space-y-1">
+                      <p className="text-sm font-medium">Energy: {energy}%</p>
+                      <div className="w-32 h-2 bg-muted rounded-full overflow-hidden">
+                        <div
+                          className="h-full bg-gradient-to-r from-amber-400 to-yellow-500 transition-all duration-300"
+                          style={{ width: `${energy}%` }}
+                        />
+                      </div>
+                      <p className="text-xs opacity-80">Enter Review and complete at least 1 action today to recharge.</p>
                     </div>
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          </div>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
           </>
         ) : null}
       </div>
+
       {/* Create Group Workspace Dialog */}
       <Dialog open={createOpen} onOpenChange={setCreateOpen}>
-        <DialogContent 
-          className="w-[600px] max-w-[600px] sm:max-w-[600px] z-[1001] pointer-events-auto" 
-          style={{ width: 600, maxWidth: 600, zIndex: 1001 }} 
+        <DialogContent
+          className="w-[600px] max-w-[600px] sm:max-w-[600px] z-[1001] pointer-events-auto"
+          style={{ width: 600, maxWidth: 600, zIndex: 1001 }}
           overlayClassName="!z-[99]"
-          overlayStyle={{ 
-            top: '64px', 
-            left: 0, 
-            right: 0, 
-            bottom: 0, 
+          overlayStyle={{
+            top: "64px",
+            left: 0,
+            right: 0,
+            bottom: 0,
             zIndex: 99,
-            position: 'fixed'
+            position: "fixed",
           }}
           onPointerDownOutside={(e) => e.preventDefault()}
           onInteractOutside={(e) => e.preventDefault()}
@@ -420,14 +373,25 @@ export function Header({
           <DialogHeader>
             <DialogTitle>Create Group Workspace</DialogTitle>
           </DialogHeader>
+
           <div className="space-y-6">
             <div className="space-y-2">
               <Label htmlFor="ws-name">Workspace Name</Label>
-              <Input id="ws-name" value={workspaceName} onChange={e => setWorkspaceName(e.target.value)} placeholder="e.g., CS 101 Study Group" />
+              <Input
+                id="ws-name"
+                value={workspaceName}
+                onChange={(e) => setWorkspaceName(e.target.value)}
+                placeholder="e.g., CS 101 Study Group"
+              />
             </div>
+
             <div className="space-y-2">
               <Label>Category</Label>
-              <RadioGroup value={category} onValueChange={(val) => setCategory(val as 'course' | 'personal')} className="flex gap-4">
+              <RadioGroup
+                value={category}
+                onValueChange={(val) => setCategory(val as "course" | "personal")}
+                className="flex gap-4"
+              >
                 <div className="flex items-center space-x-2">
                   <RadioGroupItem id="cat-course" value="course" />
                   <Label htmlFor="cat-course">Course</Label>
@@ -438,7 +402,8 @@ export function Header({
                 </div>
               </RadioGroup>
             </div>
-            {category === 'course' && (
+
+            {category === "course" && (
               <div className="space-y-2">
                 <Label htmlFor="course-select">Course Name</Label>
                 <Select value={courseId} onValueChange={setCourseId}>
@@ -455,18 +420,38 @@ export function Header({
                 </Select>
               </div>
             )}
+
             <div className="space-y-2">
               <Label>Invite Members (emails)</Label>
               <div className="flex gap-2">
-                <Input value={inviteEmail} onChange={e => setInviteEmail(e.target.value)} placeholder="Enter email and click Add" onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addInvite(); } }} />
-                <Button variant="secondary" onClick={addInvite}>Add</Button>
+                <Input
+                  value={inviteEmail}
+                  onChange={(e) => setInviteEmail(e.target.value)}
+                  placeholder="Enter email and click Add"
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      addInvite();
+                    }
+                  }}
+                />
+                <Button variant="secondary" onClick={addInvite}>
+                  Add
+                </Button>
               </div>
+
               {invites.length > 0 && (
                 <div className="flex flex-wrap gap-2">
-                  {invites.map(email => (
+                  {invites.map((email) => (
                     <span key={email} className="inline-flex items-center px-2 py-1 rounded-full bg-muted text-sm">
                       {email}
-                      <Button variant="ghost" size="icon" className="h-4 w-4 ml-1" onClick={() => removeInvite(email)} aria-label={`Remove ${email}`}>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-4 w-4 ml-1"
+                        onClick={() => removeInvite(email)}
+                        aria-label={`Remove ${email}`}
+                      >
                         <X className="h-3 w-3" />
                       </Button>
                     </span>
@@ -475,8 +460,11 @@ export function Header({
               )}
             </div>
           </div>
+
           <DialogFooter>
-            <Button variant="outline" onClick={() => setCreateOpen(false)}>Cancel</Button>
+            <Button variant="outline" onClick={() => setCreateOpen(false)}>
+              Cancel
+            </Button>
             <Button onClick={handleCreate}>Create</Button>
           </DialogFooter>
         </DialogContent>
@@ -487,9 +475,7 @@ export function Header({
         <ProfileEditor
           user={user}
           onSave={(updatedUser) => {
-            if (onUserUpdate) {
-              onUserUpdate(updatedUser);
-            }
+            if (onUserUpdate) onUserUpdate(updatedUser);
             setShowProfileEditor(false);
           }}
           onClose={() => setShowProfileEditor(false)}
@@ -497,4 +483,4 @@ export function Header({
       )}
     </header>
   );
-}
+}