use topic object instead timestamp

www/app/components/dashboard.js

@@ -78,9 +78,7 @@ export function Dashboard({
               <div
                 className="flex justify-between items-center cursor-pointer px-4"
                 onClick={() =>
-                  setActiveTopic(
-                    activeTopic == item.timestamp ? null : item.timestamp,
-                  )
+                  setActiveTopic(activeTopic?.id == item.id ? null : item)
                 }
               >
                 <div className="w-1/4">{formatTime(item.timestamp)}</div>
@@ -89,14 +87,14 @@ export function Dashboard({
                   <FontAwesomeIcon
                     className={`transform transition-transform duration-200`}
                     icon={
-                      activeTopic == item.timestamp
+                      activeTopic?.id == item.id
                         ? faChevronDown
                         : faChevronRight
                     }
                   />
                 </div>
               </div>
-              {activeTopic == item.timestamp && (
+              {activeTopic?.id == item.id && (
                 <div className="p-2 mt-2 -mb-2 bg-slate-50 rounded">
                   {item.transcript}
                 </div>

www/app/components/record.js

@@ -138,7 +138,7 @@ export default function Recorder(props) {
           });
           region.on("click", (e) => {
             e.stopPropagation();
-            setActiveTopic(region.start);
+            setActiveTopic(topic);
             wavesurfer.setTime(region.start);
           });
         }
@@ -164,7 +164,7 @@ export default function Recorder(props) {
 
   useEffect(() => {
     if (activeTopic) {
-      wavesurfer.setTime(activeTopic);
+      wavesurfer.setTime(activeTopic.timestamp);
     }
   }, [activeTopic]);