save current topic and small styling

www/app/[domain]/transcripts/[transcriptId]/correct/page.tsx

@@ -51,7 +51,7 @@ export default function TranscriptCorrect({
 
   return (
     <div className="h-full grid grid-cols-2 gap-4">
-      <div className="flex flex-col h-full">
+      <div className="flex flex-col h-full ">
         <TopicHeader
           stateCurrentTopic={stateCurrentTopic}
           transcriptId={transcriptId}

www/app/[domain]/transcripts/[transcriptId]/correct/topicHeader.tsx

@@ -23,9 +23,20 @@ export default function TopicHeader({
 
   useEffect(() => {
     if (!topics.loading && !currentTopic) {
-      setCurrentTopic(topics?.topics?.at(0));
+      const sessionTopic = window.localStorage.getItem(
+        transcriptId + "correct",
+      );
+      console.log(sessionTopic, window.localStorage);
+      if (sessionTopic && topics?.topics?.find((t) => t.id == sessionTopic)) {
+        setCurrentTopic(topics?.topics?.find((t) => t.id == sessionTopic));
+        console.log("he", sessionTopic, !!sessionTopic);
+      } else {
+        setCurrentTopic(topics?.topics?.at(0));
+        console.log("hi");
+      }
     }
   }, [topics.loading]);
+  // console.log(currentTopic)
 
   const number = topics.topics?.findIndex(
     (topic) => topic.id == currentTopic?.id,
@@ -43,6 +54,13 @@ export default function TopicHeader({
     canGoNext && setCurrentTopic(topics.topics?.at(number + 1));
   };
 
+  useEffect(() => {
+    console.log(currentTopic?.id);
+
+    currentTopic?.id &&
+      window.localStorage.setItem(transcriptId + "correct", currentTopic?.id);
+  }, [currentTopic?.id]);
+
   const keyHandler = (e) => {
     if (e.key == "ArrowLeft") {
       onPrev();

www/app/[domain]/transcripts/[transcriptId]/correct/topicWords.tsx

@@ -150,17 +150,18 @@ const topicWords = ({
     participants.response
   ) {
     return (
-      <div onMouseUp={onMouseUp} className="p-5 h-full w-full">
+      <div onMouseUp={onMouseUp} className="p-5 h-full w-full overflow-scroll">
         {topicWithWords.response.wordsPerSpeaker.map(
           (speakerWithWords, index) => (
-            <p key={index}>
+            <p key={index} className="mb-2 last:mb-0">
               <span
                 data-speaker={speakerWithWords.speaker}
-                className={
+                className={`
-                  selectedText == speakerWithWords.speaker
+                  font-semibold ${
-                    ? "bg-yellow-200"
+                    selectedText == speakerWithWords.speaker
-                    : ""
+                      ? "bg-yellow-200"
-                }
+                      : ""
+                  }`}
               >
                 {getSpeakerName(speakerWithWords.speaker)}&nbsp;:&nbsp;
               </span>