Listening preview and some more patches

src/components/ExamEditor/Exercises/TrueFalse/index.tsx

@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Card, CardContent } from '@/components/ui/card';
 import {
     MdAdd,
-    MdEdit,
-    MdEditOff,
 } from 'react-icons/md';
 import Alert, { AlertItem } from '../Shared/Alert';
 import { ReadingPart, TrueFalseExercise } from '@/interfaces/exam';
@@ -18,6 +15,7 @@ import validateTrueFalseQuestions from './validation';
 import setEditingAlert from '../Shared/setEditingAlert';
 import { DragEndEvent } from '@dnd-kit/core';
 import { handleTrueFalseReorder } from '@/stores/examEditor/reorder/local';
+import PromptEdit from '../Shared/PromptEdit';
 
 const TrueFalse: React.FC<{ exercise: TrueFalseExercise, sectionId: number }> = ({ exercise, sectionId }) => {
     const { currentModule, dispatch } = useExamEditorStore();
@@ -28,7 +26,6 @@ const TrueFalse: React.FC<{ exercise: TrueFalseExercise, sectionId: number }> =
     const section = state as ReadingPart;
 
     const [local, setLocal] = useState(exercise);
-    const [editingPrompt, setEditingPrompt] = useState(false);
 
     const [alerts, setAlerts] = useState<AlertItem[]>([]);
 
@@ -134,36 +131,10 @@ const TrueFalse: React.FC<{ exercise: TrueFalseExercise, sectionId: number }> =
                 handleDiscard={handleDiscard}
             />
             {alerts.length > 0 && <Alert className="mb-6" alerts={alerts} />}
-            <Card className="mb-6">
-                <CardContent className="p-4">
-                    <div className="flex justify-between items-start gap-4">
-                        {editingPrompt ? (
-                            <textarea
-                                className="flex-1 p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none min-h-[100px]"
-                                value={local.prompt}
-                                onChange={(e) => updateLocal({ ...local, prompt: e.target.value })}
-                                onBlur={() => setEditingPrompt(false)}
-                                autoFocus
-                            />
-                        ) : (
-                            <div className="flex-1">
-                                <h3 className="font-medium text-gray-800 mb-2">Question/Instructions displayed to the student:</h3>
-                                <p className="text-gray-600">{local.prompt}</p>
-                            </div>
-                        )}
-                        <button
-                            onClick={() => setEditingPrompt(!editingPrompt)}
-                            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-                        >
-                            {editingPrompt ?
-                                <MdEditOff size={20} className="text-gray-500" /> :
-                                <MdEdit size={20} className="text-gray-500" />
-                            }
-                        </button>
-                    </div>
-                </CardContent>
-            </Card>
-
+            <PromptEdit
+                value={local.prompt}
+                onChange={(text) => updateLocal({ ...local, prompt: text })}
+            />
             <div className="space-y-4">
                 <QuestionsList
                     ids={local.questions.map(q => q.id)}