microphone switch and design improvements

www/app/transcripts/new/page.tsx

@@ -17,8 +17,6 @@ const TranscriptCreate = () => {
   const [stream, setStream] = useState<MediaStream | null>(null);
   const [disconnected, setDisconnected] = useState<boolean>(false);
   const useActiveTopic = useState<Topic | null>(null);
-  const [deviceId, setDeviceId] = useState<string | null>(null);
-  const [recordStarted, setRecordStarted] = useState(false);
 
   useEffect(() => {
     if (process.env.NEXT_PUBLIC_ENV === "development") {
@@ -43,17 +41,6 @@ const TranscriptCreate = () => {
     getAudioStream,
   } = useAudioDevice();
 
-  const getCurrentStream = async () => {
-    setRecordStarted(true);
-    return deviceId ? await getAudioStream(deviceId) : null;
-  };
-
-  useEffect(() => {
-    if (audioDevices.length > 0) {
-      setDeviceId[audioDevices[0].value];
-    }
-  }, [audioDevices]);
-
   return (
     <>
       {permissionOk ? (
@@ -65,60 +52,74 @@ const TranscriptCreate = () => {
               setStream(null);
             }}
             topics={webSockets.topics}
-            getAudioStream={getCurrentStream}
+            getAudioStream={getAudioStream}
             useActiveTopic={useActiveTopic}
             isPastMeeting={false}
+            audioDevices={audioDevices}
           />
+
           <div className="grid grid-cols-1 lg:grid-cols-2 grid-rows-2 lg:grid-rows-1 gap-2 lg:gap-4 h-full">
             <TopicList
               topics={webSockets.topics}
               useActiveTopic={useActiveTopic}
             />
-            <div className="h-full flex flex-col">
-              <section className="mb-2">
-                <AudioInputsDropdown
-                  setDeviceId={setDeviceId}
-                  audioDevices={audioDevices}
-                  disabled={recordStarted}
-                />
-              </section>
-              <section className="w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center">
-                <div className="py-2 h-auto">
-                  <LiveTrancription text={webSockets.transcriptText} />
-                </div>
-              </section>
-            </div>
-
-            {disconnected && <DisconnectedIndicator />}
+            <section className="w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center">
+              <div className="py-2 h-auto">
+                <LiveTrancription text={webSockets.transcriptText} />
+              </div>
+            </section>
           </div>
+
+          {disconnected && <DisconnectedIndicator />}
         </>
       ) : (
         <>
-          <div className="flex flex-col w-full items-center justify-center px-6 py-8 mt-8 rounded-xl">
-            <h1 className="text-2xl font-bold">Audio Permissions</h1>
-            {loading ? (
-              <p className="text-gray-500 text-center mt-5">
-                Checking permission...
+          <div></div>
+          <section className="flex flex-col w-full h-full items-center justify-evenly p-4 md:px-6 md:py-8">
+            <div className="flex flex-col max-w-2xl items-center justify-center">
+              <h1 className="text-2xl font-bold mb-2">Reflector</h1>
+              <p className="self-start">
+                Meet Monadical's own Reflector, your audio ally for hassle-free
+                insights.
               </p>
-            ) : (
-              <>
-                <p className="text-gray-500 text-center mt-5">
-                  Reflector needs access to your microphone to work.
-                  <br />
-                  {permissionDenied
-                    ? "Please reset microphone permissions to continue."
-                    : "Please grant permission to continue."}
-                </p>
-                <button
-                  className="mt-4 bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded m-auto"
-                  onClick={requestPermission}
-                  disabled={permissionDenied}
-                >
-                  {permissionDenied ? "Access denied" : "Grant Permission"}
-                </button>
-              </>
-            )}
-          </div>
+              <p className="mb-4 md:text-justify">
+                With real-time transcriptions, translations, and summaries,
+                Reflector captures and categorizes the details of your meetings
+                and events, all while keeping your data locked down tight on
+                your own infrastructure. Forget the scribbled notes, endless
+                recordings, or third-party apps. Discover Reflector, a powerful
+                new way to elevate knowledge management and accessibility for
+                all.
+              </p>
+            </div>
+            <div>
+              <div className="flex flex-col max-w-2xl items-center justify-center">
+                <h2 className="text-2xl font-bold  mb-2">Audio Permissions</h2>
+                {loading ? (
+                  <p className="text-gray-500 text-center">
+                    Checking permission...
+                  </p>
+                ) : (
+                  <>
+                    <p className="text-gray-500 text-center">
+                      Reflector needs access to your microphone to work.
+                      <br />
+                      {permissionDenied
+                        ? "Please reset microphone permissions to continue."
+                        : "Please grant permission to continue."}
+                    </p>
+                    <button
+                      className="mt-4 bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded m-auto"
+                      onClick={requestPermission}
+                      disabled={permissionDenied}
+                    >
+                      {permissionDenied ? "Access denied" : "Grant Permission"}
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+          </section>
         </>
       )}
     </>