Fix record page

www/app/[domain]/browse/page.tsx

@@ -216,7 +216,7 @@ export default function TranscriptBrowser() {
                       href={`/transcripts/${item.id}`}
                       noOfLines={2}
                     >
-                      {item.title || item.name || "Unamed Transcript"}
+                      {item.title || item.name || "Unnamed Transcript"}
                     </Link>
                   </Heading>
 
@@ -244,7 +244,7 @@ export default function TranscriptBrowser() {
                           <AlertDialogContent>
                             <AlertDialogHeader fontSize="lg" fontWeight="bold">
                               Delete{" "}
-                              {item.title || item.name || "Unamed Transcript"}
+                              {item.title || item.name || "Unnamed Transcript"}
                             </AlertDialogHeader>
 
                             <AlertDialogBody>

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

@@ -101,7 +101,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
             colSpan={{ base: 1, md: 2 }}
           >
             <TranscriptTitle
-              title={transcript.response.title || "Unamed Transcript"}
+              title={transcript.response.title || "Unnamed Transcript"}
               transcriptId={transcriptId}
             />
           </GridItem>

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

@@ -11,7 +11,7 @@ import { useRouter } from "next/navigation";
 import Player from "../../player";
 import useMp3 from "../../useMp3";
 import WaveformLoading from "../../waveformLoading";
-import { Box, Text, Grid } from "@chakra-ui/react";
+import { Box, Text, Grid, Heading, VStack, Flex } from "@chakra-ui/react";
 import LiveTrancription from "../../liveTranscription";
 
 type TranscriptDetails = {
@@ -78,46 +78,51 @@ const TranscriptRecord = (details: TranscriptDetails) => {
         // todo: only start recording animation when you get "recorded" status
         <Recorder transcriptId={details.params.transcriptId} status={status} />
       )}
-      <Grid
+      <VStack
-        templateColumns={{ base: "minmax(0, 1fr)", md: "repeat(2, 1fr)" }}
+        align={"left"}
-        templateRows={{
+        w="full"
-          base: "minmax(0, 1fr) minmax(0, 1fr)",
+        h="full"
-          md: "minmax(0, 1fr)",
+        mb={4}
-        }}
-        gap={2}
-        padding={4}
-        paddingBottom={0}
         background="gray.bg"
         border={"2px solid"}
         borderColor={"gray.bg"}
         borderRadius={8}
+        p="4"
       >
-        <TopicList
+        <Heading size={"lg"}>
-          topics={webSockets.topics}
+          {status === "processing" ? "Processing meeting" : "Record meeting"}
-          useActiveTopic={useActiveTopic}
+        </Heading>
-          autoscroll={true}
+
-          transcriptId={details.params.transcriptId}
+        <Flex direction={{ base: "column-reverse", md: "row" }}>
-          status={status}
+          <Box w={{ md: "50%" }}>
-          currentTranscriptText={webSockets.accumulatedText}
+            <TopicList
-        />
+              topics={webSockets.topics}
-        <Box>
+              useActiveTopic={useActiveTopic}
-          {!transcriptStarted ? (
+              autoscroll={true}
-            <Box textAlign={"center"} textColor="gray">
+              transcriptId={details.params.transcriptId}
-              <Text>
+              status={status}
-                The conversation transcript will appear here shortly after you
+              currentTranscriptText={webSockets.accumulatedText}
-                start recording.
+            />
-              </Text>
+          </Box>
-            </Box>
+          <Box w={{ md: "50%" }} h={{ base: "20%", md: "full" }}>
-          ) : (
+            {!transcriptStarted ? (
-            status === "recording" && (
+              <Box textAlign={"center"} textColor="gray">
-              <LiveTrancription
+                <Text>
-                text={webSockets.transcriptTextLive}
+                  Live transcript will appear here shortly after you'll start
-                translateText={webSockets.translateText}
+                  recording.
-              />
+                </Text>
-            )
+              </Box>
-          )}
+            ) : (
-        </Box>
+              status === "recording" && (
-      </Grid>
+                <LiveTrancription
+                  text={webSockets.transcriptTextLive}
+                  translateText={webSockets.translateText}
+                />
+              )
+            )}
+          </Box>
+        </Flex>
+      </VStack>
     </Grid>
   );
 };

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

@@ -126,18 +126,19 @@ const TranscriptCreate = () => {
                   the permission setting in your browser and refresh this page.
                 </p>
               ) : (
-                <button
+                <Button
-                  className="mt-4 bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white font-bold py-2 px-4 rounded"
+                  colorScheme="blue"
                   onClick={requestPermission}
                   disabled={permissionDenied}
                 >
                   Request Microphone Permission
-                </button>
+                </Button>
               )}
               <Button
                 colorScheme="blue"
                 onClick={send}
                 isDisabled={!permissionOk || loadingRecord || loadingUpload}
+                mt={2}
               >
                 {loadingRecord ? "Loading..." : "Record Meeting"}
               </Button>

www/app/[domain]/transcripts/topicList.tsx

@@ -108,10 +108,6 @@ export function TopicList({
     setActiveTopic(topics[topics.length - 1]);
   }, [topics]);
 
-  useEffect(() => {
-    if (activeTopic && currentTranscriptText) setActiveTopic(null);
-  }, [activeTopic, currentTranscriptText]);
-
   return (
     <Flex
       position={"relative"}
@@ -229,7 +225,7 @@ export function TopicList({
           topics.length == 0 && (
             <Box textAlign={"center"} textColor="gray">
               <Text>
-                Discussion transcript will appear here after you start
+                Full discussion transcript will appear here after you start
                 recording.
               </Text>
               <Text>

www/app/[domain]/transcripts/useWebSockets.ts

@@ -95,6 +95,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
         ];
 
         setTranscriptTextLive("Lorem Ipsum");
+        setStatus({ value: "recording" });
         setTopics([
           {
             id: "1",
@@ -198,7 +199,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
         setAccumulatedText(
           "This text is in English, and it is a pretty long sentence to test the limits. This text is in English, and it is a pretty long sentence to test the limits",
         );
-        setStatus({ value: "recording" });
+        setStatus({ value: "processing" });
         setTopics([
           {
             id: "1",

www/app/[domain]/transcripts/waveformLoading.tsx

@@ -1,11 +1,7 @@
-import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { Center, Spinner } from "@chakra-ui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default () => (
-  <div className="flex flex-grow items-center justify-center h-20">
+  <Center h={14}>
-    <FontAwesomeIcon
+    <Spinner speed="1s"></Spinner>
-      icon={faSpinner}
+  </Center>
-      className="animate-spin-slow text-gray-600 flex-grow rounded-lg md:rounded-xl h-10 w-10"
-    />
-  </div>
 );