Move waveform back to the top

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

@@ -59,10 +59,24 @@ export default function TranscriptDetails(details: TranscriptDetails) {
     <>
       <Grid
         templateColumns="1fr"
-        templateRows="minmax(0, 1fr) auto"
+        templateRows="auto minmax(0, 1fr)"
         gap={4}
+        mt={4}
         mb={4}
       >
+        {waveform.waveform && mp3.media && topics.topics ? (
+          <Player
+            topics={topics?.topics}
+            useActiveTopic={useActiveTopic}
+            waveform={waveform.waveform}
+            media={mp3.media}
+            mediaDuration={transcript.response.duration}
+          />
+        ) : waveform.error ? (
+          <div>"error loading this recording"</div>
+        ) : (
+          <Skeleton h={14} />
+        )}
         <Grid
           templateColumns={{ base: "minmax(0, 1fr)", md: "repeat(2, 1fr)" }}
           templateRows={{
@@ -118,19 +132,6 @@ export default function TranscriptDetails(details: TranscriptDetails) {
             </Flex>
           )}
         </Grid>
-        {waveform.waveform && mp3.media && topics.topics ? (
-          <Player
-            topics={topics?.topics}
-            useActiveTopic={useActiveTopic}
-            waveform={waveform.waveform}
-            media={mp3.media}
-            mediaDuration={transcript.response.duration}
-          />
-        ) : waveform.error ? (
-          <div>"error loading this recording"</div>
-        ) : (
-          <Skeleton h={14} />
-        )}
       </Grid>
     </>
   );

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

@@ -31,7 +31,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
   const router = useRouter();
 
   const [status, setStatus] = useState(
-    webSockets.status.value || transcript.response?.status || "idle",
+    webSockets.status.value || transcript.response?.status || "idle"
   );
 
   useEffect(() => {
@@ -61,25 +61,11 @@ const TranscriptRecord = (details: TranscriptDetails) => {
   return (
     <Grid
       templateColumns="1fr"
-      templateRows="minmax(0, 1fr) auto"
+      templateRows="auto minmax(0, 1fr) "
       gap={4}
+      mt={4}
       mb={4}
     >
-      <Box
-        padding={4}
-        background="gray.bg"
-        borderColor={"gray.bg"}
-        borderRadius={8}
-      >
-        <TopicList
-          topics={webSockets.topics}
-          useActiveTopic={useActiveTopic}
-          autoscroll={true}
-          transcriptId={details.params.transcriptId}
-          status={status}
-          currentTranscriptText={webSockets.accumulatedText}
-        />
-      </Box>
       {status == "processing" && // todo send an event when the mp3 is ready
       webSockets.waveform &&
       webSockets.duration &&
@@ -97,6 +83,21 @@ const TranscriptRecord = (details: TranscriptDetails) => {
         // todo: only start recording animation when you get "recorded" status
         <Recorder transcriptId={details.params.transcriptId} status={status} />
       )}
+      <Box
+        padding={4}
+        background="gray.bg"
+        borderColor={"gray.bg"}
+        borderRadius={8}
+      >
+        <TopicList
+          topics={webSockets.topics}
+          useActiveTopic={useActiveTopic}
+          autoscroll={true}
+          transcriptId={details.params.transcriptId}
+          status={status}
+          currentTranscriptText={webSockets.accumulatedText}
+        />
+      </Box>
     </Grid>
   );
 };