French translation + Mobile UI + minor improvements for desktop UI

www/app/styles/globals.scss

@@ -15,8 +15,15 @@ body {
 }
 
 .temp-transcription {
-  background: beige;
+  background: rgb(151 190 255);
   border-radius: 5px;
+  border: solid 1px #808080;
+  margin: 1em 0;
+}
+
+.temp-transcription h2 {
+  font-weight: bold;
+  font-size: 130%;
 }
 
 .Dropdown-placeholder {
@@ -25,3 +32,9 @@ body {
 .Dropdown-arrow {
   top: 47% !important;
 }
+
+@media (max-width: 768px) {
+  .audio-source-dropdown .Dropdown-control {
+    max-width: 90px;
+  }
+}

www/app/transcripts/dashboard.tsx

@@ -56,14 +56,10 @@ export function Dashboard({
 
   return (
     <>
-      <div className="relative h-[64svh] w-3/4 flex flex-col">
+      <div className="relative h-[60svh] w-3/4 flex flex-col">
         <div className="text-center pb-1 pt-4">
           <h1 className="text-2xl font-bold text-blue-500">Meeting Notes</h1>
         </div>
-        <div className="flex justify-between border-b-2">
-          <div className="w-1/4 font-bold">Timestamp</div>
-          <div className="w-3/4 font-bold">Topic</div>
-        </div>
 
         <ScrollToBottom
           visible={!autoscrollEnabled}
@@ -84,9 +80,11 @@ export function Dashboard({
                   setActiveTopic(activeTopic?.id == item.id ? null : item)
                 }
               >
-                <div className="w-1/4">{formatTime(item.timestamp)}</div>
+                <div className="flex justify-between items-center">
-                <div className="w-3/4 flex justify-between items-center">
+                  <span className="font-light text-slate-500 pr-1">
-                  {item.title}
+                    [{formatTime(item.timestamp)}]
+                  </span>{" "}
+                  <span className="pr-1">{item.title}</span>
                   <FontAwesomeIcon
                     className={`transform transition-transform duration-200`}
                     icon={

www/app/transcripts/finalSummary.tsx

@@ -4,7 +4,7 @@ type FinalSummaryProps = {
 
 export default function FinalSummary(props: FinalSummaryProps) {
   return (
-    <div className="min-h-[200px] overflow-y-auto mt-2 p-2 bg-white temp-transcription rounded">
+    <div className="mt-2 p-2 bg-white temp-transcription rounded">
       <h2>Final Summary</h2>
       <p>{props.text}</p>
     </div>

www/app/transcripts/recorder.tsx

@@ -235,7 +235,7 @@ 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">
+      <div className="flex my-2 mx-auto audio-source-dropdown">
         <AudioInputsDropdown
           audioDevices={props.audioDevices}
           setDeviceId={setDeviceId}

www/app/transcripts/useWebSockets.ts

@@ -17,6 +17,54 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
   const [status, setStatus] = useState<Status>({ value: "disconnected" });
 
   useEffect(() => {
+    document.onkeyup = (e) => {
+      if (e.key === "a" && process.env.NEXT_PUBLIC_ENV === "development") {
+        setTranscriptText("Lorem Ipsum");
+        setTopics([
+          {
+            id: "1",
+            timestamp: 10,
+            summary: "This is test topic 1",
+            title: "Topic 1: Introduction to Quantum Mechanics",
+            transcript:
+              "A brief overview of quantum mechanics and its principles.",
+          },
+          {
+            id: "2",
+            timestamp: 20,
+            summary: "This is test topic 2",
+            title: "Topic 2: Machine Learning Algorithms",
+            transcript:
+              "Understanding the different types of machine learning algorithms.",
+          },
+          {
+            id: "3",
+            timestamp: 30,
+            summary: "This is test topic 3",
+            title: "Topic 3: Mental Health Awareness",
+            transcript: "Ways to improve mental health and reduce stigma.",
+          },
+          {
+            id: "4",
+            timestamp: 40,
+            summary: "This is test topic 4",
+            title: "Topic 4: Basics of Productivity",
+            transcript: "Tips and tricks to increase daily productivity.",
+          },
+          {
+            id: "5",
+            timestamp: 50,
+            summary: "This is test topic 5",
+            title: "Topic 5: Future of Aviation",
+            transcript:
+              "Exploring the advancements and possibilities in aviation.",
+          },
+        ]);
+
+        setFinalSummary({ summary: "This is the final summary" });
+      }
+    };
+
     if (!transcriptId) return;
 
     const url = `${process.env.NEXT_PUBLIC_WEBSOCKET_URL}/v1/transcripts/${transcriptId}/events`;
@@ -32,7 +80,9 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
       switch (message.event) {
         case "TRANSCRIPT":
           if (message.data.text) {
-            setTranscriptText(message.data.text.trim());
+            setTranscriptText(
+              (message.data.translation ?? message.data.text ?? "").trim(),
+            );
             console.debug("TRANSCRIPT event:", message.data);
           }
           break;