feat: implement micro-learning generation service and UI components for interactive topic-based learning

src/pages/Dashboard.jsx

@@ -67,15 +67,15 @@ const Dashboard = () => {
         console.warn('[Dashboard] Could not load curriculum data:', e.message);
       }
 
-      setDashData({ 
-        topic, 
-        learnDone, 
-        testResult, 
-        top3, 
-        myRank, 
-        myPoints, 
-        activity, 
-        yearProgress, 
+      setDashData({
+        topic,
+        learnDone,
+        testResult,
+        top3,
+        myRank,
+        myPoints,
+        activity,
+        yearProgress,
         hasCurriculum: curriculumExists,
         theme: topic?.theme || '',
       });
@@ -178,7 +178,7 @@ const Dashboard = () => {
           <div className="flex justify-between items-start mb-4">
             <div>
               <h3 className="text-xl">Testing</h3>
-              <p className="text-fg-muted text-sm mt-1">Weekly knowledge test</p>
+              <p className="text-fg-muted text-sm mt-1">Weekly test — 5 questions</p>
             </div>
             {testResult ? <Tag variant="success">Score: {testResult.percentage}%</Tag> : <Tag variant="default">To Do</Tag>}
           </div>
@@ -207,9 +207,8 @@ const Dashboard = () => {
               ) : (
                 activity.slice(0, 5).map((act, i) => (
                   <div key={i} className="p-4 flex items-center gap-4 hover:bg-bg-warm transition-colors">
-                    <div className={`w-10 h-10 rounded-[var(--r-org)] flex items-center justify-center font-bold ${
-                      act.type === 'test' ? 'bg-accent-soft text-purple-700' : 'bg-sage text-teal-900'
-                    }`}>
+                    <div className={`w-10 h-10 rounded-[var(--r-org)] flex items-center justify-center font-bold ${act.type === 'test' ? 'bg-accent-soft text-purple-700' : 'bg-sage text-teal-900'
+                      }`}>
                       {act.type === 'test' ? 'T' : 'L'}
                     </div>
                     <div>