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,20 +78,23 @@ const TranscriptRecord = (details: TranscriptDetails) => {
         // todo: only start recording animation when you get "recorded" status
         <Recorder transcriptId={details.params.transcriptId} status={status} />
       )}
-      <Grid
-        templateColumns={{ base: "minmax(0, 1fr)", md: "repeat(2, 1fr)" }}
-        templateRows={{
-          base: "minmax(0, 1fr) minmax(0, 1fr)",
-          md: "minmax(0, 1fr)",
-        }}
-        gap={2}
-        padding={4}
-        paddingBottom={0}
+      <VStack
+        align={"left"}
+        w="full"
+        h="full"
+        mb={4}
         background="gray.bg"
         border={"2px solid"}
         borderColor={"gray.bg"}
         borderRadius={8}
+        p="4"
       >
+        <Heading size={"lg"}>
+          {status === "processing" ? "Processing meeting" : "Record meeting"}
+        </Heading>
+
+        <Flex direction={{ base: "column-reverse", md: "row" }}>
+          <Box w={{ md: "50%" }}>
             <TopicList
               topics={webSockets.topics}
               useActiveTopic={useActiveTopic}
@@ -100,12 +103,13 @@ const TranscriptRecord = (details: TranscriptDetails) => {
               status={status}
               currentTranscriptText={webSockets.accumulatedText}
             />
-        <Box>
+          </Box>
+          <Box w={{ md: "50%" }} h={{ base: "20%", md: "full" }}>
             {!transcriptStarted ? (
               <Box textAlign={"center"} textColor="gray">
                 <Text>
-                The conversation transcript will appear here shortly after you
-                start recording.
+                  Live transcript will appear here shortly after you'll start
+                  recording.
                 </Text>
               </Box>
             ) : (
@@ -117,7 +121,8 @@ const TranscriptRecord = (details: TranscriptDetails) => {
               )
             )}
           </Box>
-      </Grid>
+        </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
-                  className="mt-4 bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white font-bold py-2 px-4 rounded"
+                <Button
+                  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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Center, Spinner } from "@chakra-ui/react";
 
 export default () => (
-  <div className="flex flex-grow items-center justify-center h-20">
-    <FontAwesomeIcon
-      icon={faSpinner}
-      className="animate-spin-slow text-gray-600 flex-grow rounded-lg md:rounded-xl h-10 w-10"
-    />
-  </div>
+  <Center h={14}>
+    <Spinner speed="1s"></Spinner>
+  </Center>
 );