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,36 +236,45 @@ 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">
-        <AudioInputsDropdown
+        {!hasRecorded && (
-          audioDevices={props.audioDevices}
+          <>
-          setDeviceId={setDeviceId}
+            <AudioInputsDropdown
-          disabled={isRecording}
+              audioDevices={props.audioDevices}
-        />
+              setDeviceId={setDeviceId}
-        &nbsp;
+              disabled={isRecording}
-        <button
+            />
-          className="w-20"
+            &nbsp;
-          onClick={handleRecClick}
+            <button
-          data-color={isRecording ? "red" : "blue"}
+              className="w-20"
-          disabled={!deviceId}
+              onClick={handleRecClick}
-        >
+              data-color={isRecording ? "red" : "blue"}
-          {isRecording ? "Stop" : "Record"}
+              disabled={!deviceId}
-        </button>
+            >
-        &nbsp;
+              {isRecording ? "Stop" : "Record"}
-        <button
+            </button>
-          className="w-20"
+            &nbsp;
-          id="play-btn"
+          </>
-          onClick={handlePlayClick}
+        )}
-          data-color={isPlaying ? "orange" : "green"}
+
-        >
+        {hasRecorded && (
-          {isPlaying ? "Pause" : "Play"}
+          <>
-        </button>
+            <button
-        <a
+              className="w-20"
-          id="download-recording"
+              id="play-btn"
-          title="Download recording"
+              onClick={handlePlayClick}
-          className="invisible w-9 m-auto text-center cursor-pointer text-blue-300 hover:text-blue-700"
+              data-color={isPlaying ? "orange" : "green"}
-        >
+            >
-          <FontAwesomeIcon icon={faDownload} />
+              {isPlaying ? "Pause" : "Play"}
-        </a>
+            </button>
+            <a
+              id="download-recording"
+              title="Download recording"
+              className="invisible w-9 m-auto text-center cursor-pointer text-blue-300 hover:text-blue-700"
+            >
+              <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 = {