Update web/src/App.tsx

web/src/App.tsx

@@ -1,5 +1,5 @@
 // web/src/App.tsx
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useMemo } from "react";
 import { Header } from "./components/Header";
 import { LeftSidebar } from "./components/LeftSidebar";
 import { ChatArea } from "./components/ChatArea";
@@ -15,6 +15,16 @@ import { toast } from "sonner";
 // ✅ backend API bindings
 import { apiChat, apiUpload, apiMemoryline } from "./lib/api";
 
+// ✅ NEW: review-star logic
+import {
+  type ReviewStarState,
+  type ReviewEventType,
+  markReviewActive,
+  normalizeToday,
+  starOpacity,
+  energyPct,
+} from "./lib/reviewStar";
+
 export interface Message {
   id: string;
   role: "user" | "assistant";
@@ -204,9 +214,7 @@ function App() {
 
     const hasUserMessages = currentMessages.some((msg) => msg.role === "user");
     const expectedWelcomeId = chatMode === "ask" ? "1" : chatMode === "review" ? "review-1" : "quiz-1";
-    const hasWelcomeMessage = currentMessages.some(
-      (msg) => msg.id === expectedWelcomeId && msg.role === "assistant"
-    );
+    const hasWelcomeMessage = currentMessages.some((msg) => msg.id === expectedWelcomeId && msg.role === "assistant");
     const modeChanged = prevChatModeRef.current !== chatMode;
 
     if ((modeChanged || currentMessages.length === 0 || !hasWelcomeMessage) && !hasUserMessages) {
@@ -378,6 +386,35 @@ function App() {
     })();
   }, [user]);
 
+  // =========================
+  // ✅ Review Star (按天) state
+  // scope：默认按 workspace 统计（你也可以改成 currentCourseId）
+  // =========================
+  const reviewStarKey = useMemo(() => {
+    if (!user) return "";
+    return `review_star::${user.email}::${currentWorkspaceId}`;
+  }, [user, currentWorkspaceId]);
+
+  const [reviewStarState, setReviewStarState] = useState<ReviewStarState | null>(null);
+
+  // 进入 Review tab 或 workspace 切换时：normalize（跨天归零 todayCount -> 星星自动变暗）
+  useEffect(() => {
+    if (!user || !reviewStarKey) return;
+    if (chatMode !== "review") return;
+
+    const next = normalizeToday(reviewStarKey);
+    setReviewStarState(next);
+  }, [chatMode, reviewStarKey, user]);
+
+  const handleReviewActivity = (event: ReviewEventType) => {
+    if (!user || !reviewStarKey) return;
+    const next = markReviewActive(reviewStarKey, event);
+    setReviewStarState(next);
+  };
+
+  const reviewStarOpacity = starOpacity(reviewStarState);
+  const reviewEnergyPct = energyPct(reviewStarState);
+
   const generateQuizQuestion = () => {
     const questions: Array<{
       type: "multiple-choice" | "fill-in-blank" | "open-ended";
@@ -879,13 +916,10 @@ function App() {
     return <Onboarding user={user} onComplete={handleOnboardingComplete} onSkip={handleOnboardingSkip} />;
 
   return (
-    // ✅ Use fixed inset-0 instead of h-screen to avoid mobile/OS viewport quirks and ensure true viewport lock.
     <div className="fixed inset-0 w-full bg-background overflow-hidden">
       <Toaster />
 
-      {/* App vertical layout: header + (optional) banner + main */}
       <div className="flex h-full min-h-0 min-w-0 flex-col overflow-hidden">
-        {/* Header (never scrolls) */}
         <div className="flex-shrink-0">
           <Header
             user={user}
@@ -902,6 +936,13 @@ function App() {
             onLogout={() => setUser(null)}
             availableCourses={availableCourses}
             onUserUpdate={setUser}
+            reviewStarOpacity={reviewStarOpacity}
+            reviewEnergyPct={reviewEnergyPct}
+            onStarClick={() => {
+              setChatMode("review");
+              setShowReviewBanner(false);
+              localStorage.setItem("reviewBannerDismissed", "true");
+            }}
           />
         </div>
 
@@ -909,16 +950,13 @@ function App() {
           <ProfileEditor user={user} onSave={setUser} onClose={() => setShowProfileEditor(false)} />
         )}
 
-        {/* Review banner (never scrolls) */}
         {showReviewBanner && (
           <div className="flex-shrink-0 w-full bg-background border-b border-border relative z-50">
             <ReviewBanner onReview={handleReviewClick} onDismiss={handleDismissReviewBanner} />
           </div>
         )}
 
-        {/* Main row: ONLY children scroll; never this container */}
         <div className="flex flex-1 min-h-0 min-w-0 overflow-hidden relative">
-          {/* Left panel open button (desktop) */}
           {!leftPanelVisible && (
             <Button
               variant="secondary"
@@ -932,12 +970,10 @@ function App() {
             </Button>
           )}
 
-          {/* Mobile overlay */}
           {leftSidebarOpen && (
             <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setLeftSidebarOpen(false)} />
           )}
 
-          {/* Desktop left panel */}
           {leftPanelVisible ? (
             <aside className="hidden lg:flex w-80 h-full min-h-0 min-w-0 bg-card border-r border-border overflow-hidden relative flex-col">
               <Button
@@ -951,7 +987,6 @@ function App() {
                 <ChevronLeft className="h-3 w-3" />
               </Button>
 
-              {/* IMPORTANT: do not add overflow-y here; let LeftSidebar decide its internal scrolling */}
               <div className="flex-1 min-h-0 min-w-0 overflow-hidden">
                 <LeftSidebar
                   learningMode={learningMode}
@@ -982,7 +1017,6 @@ function App() {
             </aside>
           ) : null}
 
-          {/* Mobile left drawer: height derives from viewport, not from header */}
           <aside
             className={[
               "fixed lg:hidden z-50",
@@ -1029,7 +1063,6 @@ function App() {
             </div>
           </aside>
 
-          {/* Chat column: must be flex-col + min-h-0 + overflow-hidden so ChatArea can manage internal scroll */}
           <main className="flex flex-1 min-w-0 min-h-0 overflow-hidden flex-col">
             <div className="flex-1 min-h-0 min-w-0 overflow-hidden">
               <ChatArea
@@ -1069,6 +1102,7 @@ function App() {
                 onCourseChange={setCurrentCourseId}
                 availableCourses={availableCourses}
                 showReviewBanner={showReviewBanner}
+                onReviewActivity={handleReviewActivity}
               />
             </div>
           </main>