Fixes discussed during call w/ Mathieu

www/app/styles/globals.scss

@@ -35,6 +35,6 @@ body {
 
 @media (max-width: 768px) {
   .audio-source-dropdown .Dropdown-control {
-    max-width: 90px;
+    max-width: 200px;
   }
 }

www/app/transcripts/dashboard.tsx

@@ -103,7 +103,11 @@ export function Dashboard({
             </div>
           ))}
           {topics.length === 0 && (
-            <div className="text-center text-gray-500">No topics yet</div>
+            <div className="text-center text-gray-500">
+              Discussion topics will appear here after you start recording. It
+              may take up to 5 minutes of conversation for the first topic to
+              appear.
+            </div>
           )}
         </div>
 

www/app/transcripts/new/page.tsx

@@ -26,7 +26,7 @@ const App = () => {
   }, []);
 
   const api = getApi();
-  const transcript = useTranscript();
+  const transcript = useTranscript(api);
   const webRTC = useWebRTC(stream, transcript.response?.id, api);
   const webSockets = useWebSockets(transcript.response?.id);
   const {

www/app/transcripts/recorder.tsx

@@ -58,6 +58,7 @@ export default function Recorder(props: RecorderProps) {
   const [wavesurfer, setWavesurfer] = useState<WaveSurfer | null>(null);
   const [record, setRecord] = useState<RecordPlugin | null>(null);
   const [isRecording, setIsRecording] = useState<boolean>(false);
+  const [hasRecorded, setHasRecorded] = useState<boolean>(false);
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const [deviceId, setDeviceId] = useState<string | null>(null);
   const [currentTime, setCurrentTime] = useState<number>(0);
@@ -210,8 +211,7 @@ export default function Recorder(props: RecorderProps) {
       props.onStop();
       record.stopRecording();
       setIsRecording(false);
-      const playBtn = document.getElementById("play-btn");
+      setHasRecorded(true);
-      if (playBtn) playBtn.removeAttribute("disabled");
     } else {
       const stream = await props.getAudioStream(deviceId);
       props.setStream(stream);
@@ -236,6 +236,8 @@ export default function Recorder(props: RecorderProps) {
   return (
     <div className="relative flex flex-col items-center justify-center max-w-[75vw] w-full">
       <div className="flex my-2 mx-auto audio-source-dropdown">
+        {!hasRecorded && (
+          <>
             <AudioInputsDropdown
               audioDevices={props.audioDevices}
               setDeviceId={setDeviceId}
@@ -251,6 +253,11 @@ export default function Recorder(props: RecorderProps) {
               {isRecording ? "Stop" : "Record"}
             </button>
             &nbsp;
+          </>
+        )}
+
+        {hasRecorded && (
+          <>
             <button
               className="w-20"
               id="play-btn"
@@ -266,6 +273,8 @@ export default function Recorder(props: RecorderProps) {
             >
               <FontAwesomeIcon icon={faDownload} />
             </a>
+          </>
+        )}
       </div>
       <div ref={waveformRef} className="w-full shadow-xl rounded-2xl"></div>
       <div className="absolute bottom-0 right-2 text-xs text-black">

www/app/transcripts/useTranscript.ts

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { DefaultApi, V1TranscriptsCreateRequest } from "../api/apis/DefaultApi";
-import { Configuration } from "../api/runtime";
 import { GetTranscript } from "../api";
 import getApi from "../lib/getApi";
 
@@ -11,13 +10,11 @@ type UseTranscript = {
   createTranscript: () => void;
 };
 
-const useTranscript = (): UseTranscript => {
+const useTranscript = (api: DefaultApi): UseTranscript => {
   const [response, setResponse] = useState<GetTranscript | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
 
-  const api = getApi();
-
   const createTranscript = () => {
     setLoading(true);
     const requestParameters: V1TranscriptsCreateRequest = {