From cd151aace4323ededb352927ab181d7aee076971 Mon Sep 17 00:00:00 2001
From: RaymondVerhoef <raymondverhoef@gmail.com>
Date: Sun, 24 May 2026 23:45:26 +0200
Subject: [PATCH] feat: implement core micro-learning components and hooks for
 diverse educational formats

---
 .../micro_learning/ConceptExplainer.jsx       | 16 +++---
 .../micro_learning/FlashcardSet.jsx           | 16 +++---
 .../micro_learning/MicroLearningSelector.jsx  | 51 +++++++++----------
 .../micro_learning/ReflectionPrompt.jsx       | 28 +++++-----
 .../micro_learning/ScenarioQuiz.jsx           | 25 ++++-----
 src/hooks/useMicroLearningCompletions.js      | 16 ++----
 src/hooks/useMicroLearnings.js                |  2 +-
 7 files changed, 71 insertions(+), 83 deletions(-)

diff --git a/src/components/micro_learning/ConceptExplainer.jsx b/src/components/micro_learning/ConceptExplainer.jsx
index e798bb8..e1503ba 100644
--- a/src/components/micro_learning/ConceptExplainer.jsx
+++ b/src/components/micro_learning/ConceptExplainer.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'; // assuming some UI library, otherwise use standard divs
+import Card from '../ui/Card';
 
 export default function ConceptExplainer({ content, onComplete }) {
   const containerRef = useRef(null);
@@ -25,12 +25,12 @@ export default function ConceptExplainer({ content, onComplete }) {
   }, [onComplete]);
 
   return (
-    <Card className="w-full h-[60vh] flex flex-col">
-      <CardHeader>
-        <CardTitle>Concept Explainer</CardTitle>
-      </CardHeader>
-      <CardContent 
-        className="flex-1 overflow-y-auto prose dark:prose-invert"
+    <Card className="w-full h-[60vh] flex flex-col p-0">
+      <div className="p-6 border-b border-bg-warm">
+        <h2 className="text-xl font-bold">Concept Explainer</h2>
+      </div>
+      <div 
+        className="flex-1 overflow-y-auto p-6 prose dark:prose-invert"
         ref={containerRef}
       >
         {content?.sections?.map((section, i) => (
@@ -39,7 +39,7 @@ export default function ConceptExplainer({ content, onComplete }) {
             <div dangerouslySetInnerHTML={{ __html: section.content }} />
           </div>
         ))}
-      </CardContent>
+      </div>
     </Card>
   );
 }
diff --git a/src/components/micro_learning/FlashcardSet.jsx b/src/components/micro_learning/FlashcardSet.jsx
index 16a841c..c28fdbc 100644
--- a/src/components/micro_learning/FlashcardSet.jsx
+++ b/src/components/micro_learning/FlashcardSet.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { Card, CardContent } from '../ui/card';
-import { Button } from '../ui/button';
+import Card from '../ui/Card';
+import Button from '../ui/Button';
 
 export default function FlashcardSet({ content, onComplete }) {
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -12,12 +12,10 @@ export default function FlashcardSet({ content, onComplete }) {
   const handleFlip = () => {
     setIsFlipped(!isFlipped);
     
-    // Once flipped, mark this card as viewed
     const newViewed = new Set(viewedCards);
     newViewed.add(currentIndex);
     setViewedCards(newViewed);
 
-    // If all cards are viewed, trigger completion
     if (newViewed.size === cards.length && cards.length > 0) {
       onComplete();
     }
@@ -41,25 +39,25 @@ export default function FlashcardSet({ content, onComplete }) {
 
   return (
     <div className="w-full flex flex-col items-center space-y-6">
-      <div className="text-sm text-slate-500">
+      <div className="text-sm text-slate-500 font-medium">
         Card {currentIndex + 1} of {cards.length}
       </div>
 
       <Card 
-        className="w-full max-w-lg min-h-[300px] cursor-pointer perspective-1000 relative"
+        className="w-full max-w-lg min-h-[300px] cursor-pointer relative flex items-center justify-center p-8 hover:shadow-pill transition-all"
         onClick={handleFlip}
       >
-        <CardContent className="absolute inset-0 flex items-center justify-center p-8 text-center text-xl">
+        <div className="text-center text-xl">
           {isFlipped ? (
             <div className="prose dark:prose-invert">
               <p>{currentCard.back}</p>
             </div>
           ) : (
-            <div className="prose dark:prose-invert font-medium">
+            <div className="prose dark:prose-invert font-bold text-teal">
               <p>{currentCard.front}</p>
             </div>
           )}
-        </CardContent>
+        </div>
       </Card>
 
       <div className="text-sm text-slate-400 mt-2">
diff --git a/src/components/micro_learning/MicroLearningSelector.jsx b/src/components/micro_learning/MicroLearningSelector.jsx
index ca22bfc..4faf36c 100644
--- a/src/components/micro_learning/MicroLearningSelector.jsx
+++ b/src/components/micro_learning/MicroLearningSelector.jsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { useMicroLearnings } from '../../hooks/useMicroLearnings';
 import MicroLearningContainer from './MicroLearningContainer';
-import { Button } from '../ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
+import Button from '../ui/Button';
+import Card from '../ui/Card';
 
 const TYPE_LABELS = {
   'concept_explainer': 'Concept Explainer',
@@ -40,19 +40,21 @@ export default function MicroLearningSelector({ topicId, sessionWeek, onTopicCom
     setSelectedML(ml);
   };
 
-  if (loading) return <div className="text-slate-500">Loading learning formats...</div>;
+  if (loading) return <div className="text-slate-500 text-center py-8">Loading learning formats...</div>;
 
   if (availableMLs.length === 0) {
-    return <div className="text-slate-500">No micro learnings available for this topic yet.</div>;
+    return <div className="text-slate-500 text-center py-8">No micro learnings available for this topic yet.</div>;
   }
 
-  // If one is selected, render it
   if (selectedML) {
     return (
       <div className="space-y-4">
-        <Button variant="ghost" onClick={() => setSelectedML(null)} className="mb-4">
+        <button 
+          onClick={() => setSelectedML(null)} 
+          className="text-fg-muted hover:text-teal mb-4 text-sm font-medium"
+        >
           ← Back to selection
-        </Button>
+        </button>
         <MicroLearningContainer 
           microLearning={selectedML} 
           sessionWeek={sessionWeek} 
@@ -62,28 +64,23 @@ export default function MicroLearningSelector({ topicId, sessionWeek, onTopicCom
     );
   }
 
-  // Otherwise, show the selection menu
   return (
     <Card className="w-full">
-      <CardHeader>
-        <CardTitle>Choose a Learning Format</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {availableMLs.map((ml) => (
-            <Card 
-              key={ml.id} 
-              className="cursor-pointer hover:border-blue-500 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors"
-              onClick={() => handleSelection(ml)}
-            >
-              <CardContent className="p-6">
-                <h3 className="font-bold text-lg mb-2">{TYPE_LABELS[ml.type] || ml.type}</h3>
-                <p className="text-sm text-slate-500">{TYPE_DESCRIPTIONS[ml.type]}</p>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      </CardContent>
+      <div className="mb-6 pb-4 border-b border-bg-warm">
+        <h2 className="text-xl font-bold">Choose a Learning Format</h2>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {availableMLs.map((ml) => (
+          <div 
+            key={ml.id} 
+            className="cursor-pointer border-2 border-bg-warm rounded-[var(--r-md)] p-6 hover:border-teal hover:bg-teal/5 transition-all"
+            onClick={() => handleSelection(ml)}
+          >
+            <h3 className="font-bold text-lg mb-2 text-teal">{TYPE_LABELS[ml.type] || ml.type}</h3>
+            <p className="text-sm text-fg-muted">{TYPE_DESCRIPTIONS[ml.type]}</p>
+          </div>
+        ))}
+      </div>
     </Card>
   );
 }
diff --git a/src/components/micro_learning/ReflectionPrompt.jsx b/src/components/micro_learning/ReflectionPrompt.jsx
index 39ecd91..af12411 100644
--- a/src/components/micro_learning/ReflectionPrompt.jsx
+++ b/src/components/micro_learning/ReflectionPrompt.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
-import { Button } from '../ui/button';
+import Card from '../ui/Card';
+import Button from '../ui/Button';
 
 export default function ReflectionPrompt({ content, onComplete }) {
   const [response, setResponse] = useState('');
@@ -11,15 +11,15 @@ export default function ReflectionPrompt({ content, onComplete }) {
     if (!response.trim() || submitted) return;
     
     setSubmitted(true);
-    onComplete(); // Trigger completion when a response is submitted
+    onComplete();
   };
 
   return (
     <Card className="w-full">
-      <CardHeader>
-        <CardTitle>Reflection Prompt</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-6">
+      <div className="mb-6 pb-4 border-b border-bg-warm">
+        <h2 className="text-xl font-bold">Reflection Prompt</h2>
+      </div>
+      <div className="space-y-6">
         <div className="prose dark:prose-invert">
           <p className="text-lg font-medium">{content?.prompt}</p>
         </div>
@@ -27,7 +27,7 @@ export default function ReflectionPrompt({ content, onComplete }) {
         {!submitted ? (
           <form onSubmit={handleSubmit} className="space-y-4">
             <textarea
-              className="w-full min-h-[150px] p-4 border rounded-md resize-y focus:ring-2 focus:ring-blue-500 focus:outline-none dark:bg-slate-800 dark:border-slate-700"
+              className="w-full min-h-[150px] p-4 border rounded-[var(--r-sm)] resize-y focus:ring-2 focus:ring-teal focus:outline-none bg-bg"
               placeholder="Write your reflection here..."
               value={response}
               onChange={(e) => setResponse(e.target.value)}
@@ -36,20 +36,20 @@ export default function ReflectionPrompt({ content, onComplete }) {
           </form>
         ) : (
           <div className="space-y-6">
-            <div className="p-4 bg-slate-50 dark:bg-slate-800/50 rounded-md">
-              <h4 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-2">Your Reflection</h4>
+            <div className="p-4 bg-bg-warm rounded-[var(--r-sm)]">
+              <h4 className="text-sm font-semibold text-fg-muted uppercase tracking-wider mb-2">Your Reflection</h4>
               <p className="whitespace-pre-wrap">{response}</p>
             </div>
             
-            <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800 rounded-md">
-              <h4 className="text-sm font-semibold text-blue-800 dark:text-blue-300 uppercase tracking-wider mb-2">Model Answer</h4>
-              <div className="prose prose-blue dark:prose-invert">
+            <div className="p-4 bg-teal/5 border border-teal/20 rounded-[var(--r-sm)]">
+              <h4 className="text-sm font-semibold text-teal uppercase tracking-wider mb-2">Model Answer</h4>
+              <div className="prose dark:prose-invert">
                 <p>{content?.model_answer}</p>
               </div>
             </div>
           </div>
         )}
-      </CardContent>
+      </div>
     </Card>
   );
 }
diff --git a/src/components/micro_learning/ScenarioQuiz.jsx b/src/components/micro_learning/ScenarioQuiz.jsx
index 9ba09c4..d8e0c94 100644
--- a/src/components/micro_learning/ScenarioQuiz.jsx
+++ b/src/components/micro_learning/ScenarioQuiz.jsx
@@ -1,24 +1,24 @@
 import React, { useState } from 'react';
-import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '../ui/card';
-import { Button } from '../ui/button';
+import Card from '../ui/Card';
+import Button from '../ui/Button';
 
 export default function ScenarioQuiz({ content, onComplete }) {
   const [selectedOptionId, setSelectedOptionId] = useState(null);
   const [showExplanations, setShowExplanations] = useState(false);
 
   const handleSelect = (idx) => {
-    if (showExplanations) return; // Prevent changing after selection
+    if (showExplanations) return;
     setSelectedOptionId(idx);
     setShowExplanations(true);
-    onComplete(); // Trigger completion immediately after an option is selected
+    onComplete();
   };
 
   return (
     <Card className="w-full">
-      <CardHeader>
-        <CardTitle>Scenario Quiz</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-6">
+      <div className="mb-6 pb-4 border-b border-bg-warm">
+        <h2 className="text-xl font-bold">Scenario Quiz</h2>
+      </div>
+      <div className="space-y-6">
         <div className="prose dark:prose-invert">
           <p className="text-lg font-medium">{content?.scenario}</p>
         </div>
@@ -27,18 +27,19 @@ export default function ScenarioQuiz({ content, onComplete }) {
           {content?.options?.map((option, idx) => {
             const isSelected = selectedOptionId === idx;
             
-            // Basic styling for the option buttons
             let buttonStyle = "w-full justify-start text-left h-auto p-4 ";
             if (showExplanations) {
               if (option.isCorrect) buttonStyle += "bg-green-100 dark:bg-green-900 border-green-500 ";
               else if (isSelected && !option.isCorrect) buttonStyle += "bg-red-100 dark:bg-red-900 border-red-500 ";
               else buttonStyle += "opacity-70 ";
+            } else {
+              if (isSelected) buttonStyle += "bg-teal/10 ";
             }
 
             return (
               <div key={idx} className="space-y-2">
                 <Button 
-                  variant={isSelected ? "default" : "outline"}
+                  variant={isSelected ? "primary" : "outline"}
                   className={buttonStyle}
                   onClick={() => handleSelect(idx)}
                   disabled={showExplanations}
@@ -47,7 +48,7 @@ export default function ScenarioQuiz({ content, onComplete }) {
                 </Button>
                 
                 {showExplanations && (
-                  <div className={`p-3 rounded-md text-sm ${option.isCorrect ? 'bg-green-50 dark:bg-green-950 text-green-800 dark:text-green-200' : 'bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-300'}`}>
+                  <div className={`p-3 rounded-[var(--r-md)] text-sm ${option.isCorrect ? 'bg-green-50 text-green-800' : 'bg-slate-50 text-slate-700'}`}>
                     <span className="font-semibold">{option.isCorrect ? '✓ ' : '✗ '}</span>
                     {option.explanation}
                   </div>
@@ -56,7 +57,7 @@ export default function ScenarioQuiz({ content, onComplete }) {
             );
           })}
         </div>
-      </CardContent>
+      </div>
     </Card>
   );
 }
diff --git a/src/hooks/useMicroLearningCompletions.js b/src/hooks/useMicroLearningCompletions.js
index 2536516..63f8e19 100644
--- a/src/hooks/useMicroLearningCompletions.js
+++ b/src/hooks/useMicroLearningCompletions.js
@@ -1,19 +1,11 @@
-import pb from '../lib/pb';
-import { useAuthStore } from '../store/authStore';
+import { pb } from '../lib/pb';
 
 export function useMicroLearningCompletions() {
-  const { user } = useAuthStore?.() || { user: pb.authStore.model };
-  
-  // Note: user in PB context for team_members usually matches user_id or team_member_id.
-  // We need the team_member record. If the frontend is currently storing it in authStore, we can get it.
-
   const recordCompletion = async ({ microLearningId, topicId, type, sessionWeek }) => {
     try {
-      // Find the team_member record for the current user
-      let teamMemberId = user?.id; 
-      // If user is just the auth user, we might need to query the team_members collection
-      // but in many setups, the auth user is the team_member or there's a 1-to-1.
-      // Let's ensure we fetch team_member_id properly if needed.
+      const user = pb.authStore.model;
+      if (!user) throw new Error("No authenticated user");
+
       const teamMemberRec = await pb.collection('team_members').getFirstListItem(`user_id = "${user.id}"`);
 
       if (!teamMemberRec) {
diff --git a/src/hooks/useMicroLearnings.js b/src/hooks/useMicroLearnings.js
index 2d2da59..f0eccc9 100644
--- a/src/hooks/useMicroLearnings.js
+++ b/src/hooks/useMicroLearnings.js
@@ -1,4 +1,4 @@
-import pb from '../lib/pb';
+import { pb } from '../lib/pb';
 
 export function useMicroLearnings() {
   const getMicroLearningsByTopic = async (topicId) => {