transcript editor analytics + new design (#1490)

* minor fixes

* ran tests

* more analytics

* ran tests

* coderabbit

* ran tests

Author: duckduckhero

apps/desktop/src/components/command-palette.tsx

@@ -319,8 +319,8 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
       const style = document.createElement("style");
       style.textContent = `
         [role="dialog"][aria-modal="true"] {
-          width: 800px !important;
-          max-width: 90vw !important;
+          width: 590px !important;
+          max-width: 80vw !important;
         }
       `;
       document.head.appendChild(style);

apps/desktop/src/components/editor-area/note-header/listen-button.tsx

@@ -18,6 +18,7 @@ import { z } from "zod";
 import SoundIndicator from "@/components/sound-indicator";
 import { useHypr } from "@/contexts";
 import { useEnhancePendingState } from "@/hooks/enhance-pending";
+import { commands as analyticsCommands } from "@hypr/plugin-analytics";
 import { commands as dbCommands } from "@hypr/plugin-db";
 import { commands as listenerCommands } from "@hypr/plugin-listener";
 import { commands as localSttCommands } from "@hypr/plugin-local-stt";
@@ -49,7 +50,7 @@ const showConsentNotification = () => {
 };
 
 export default function ListenButton({ sessionId, isCompact = false }: { sessionId: string; isCompact?: boolean }) {
-  const { onboardingSessionId } = useHypr();
+  const { onboardingSessionId, userId } = useHypr();
   const isOnboarding = sessionId === onboardingSessionId;
 
   const ongoingSessionStatus = useOngoingSession((s) => s.status);
@@ -100,6 +101,14 @@ export default function ListenButton({ sessionId, isCompact = false }: { session
       if (isOnboarding) {
         listenerCommands.setMicMuted(true);
       }
+
+      if (!isOnboarding && userId) {
+        analyticsCommands.event({
+          event: "recording_start_session",
+          distinct_id: userId,
+          properties: { session_id: sessionId },
+        });
+      }
     }
   };
 
@@ -234,6 +243,7 @@ function WhenInactiveAndMeetingEndedOnboarding({ disabled, onClick }: { disabled
 }
 
 function WhenActive({ sessionId }: { sessionId: string }) {
+  const { userId } = useHypr();
   const ongoingSessionId = useOngoingSession((s) => s.sessionId);
   const ongoingSessionStore = useOngoingSession((s) => ({
     stop: s.stop,
@@ -249,6 +259,14 @@ function WhenActive({ sessionId }: { sessionId: string }) {
     if (sessionWords.length === 0) {
       sonnerToast.dismiss("recording-consent-reminder");
     }
+
+    if (userId) {
+      analyticsCommands.event({
+        event: "recording_stop_session",
+        distinct_id: userId,
+        properties: { session_id: sessionId },
+      });
+    }
   };
 
   return (

apps/desktop/src/components/right-panel/views/transcript-view.tsx

@@ -9,7 +9,6 @@ import {
   ChevronDownIcon,
   ClipboardIcon,
   CopyIcon,
-  PencilIcon,
   TextSearchIcon,
   UploadIcon,
 } from "lucide-react";
@@ -18,6 +17,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ParticipantList } from "@/components/editor-area/note-header/chips/participants-chip";
 import { useHypr } from "@/contexts";
 import { useContainerWidth } from "@/hooks/use-container-width";
+import { commands as analyticsCommands } from "@hypr/plugin-analytics";
 import { commands as dbCommands, Human, Word2 } from "@hypr/plugin-db";
 import { commands as miscCommands } from "@hypr/plugin-misc";
 import TranscriptEditor, {
@@ -94,6 +94,7 @@ function RenderInMeeting({ words }: { words: Word2[] }) {
 }
 
 function RenderNotInMeeting({ sessionId, words }: { sessionId: string; words: Word2[] }) {
+  const { userId } = useHypr();
   const queryClient = useQueryClient();
 
   const [editable, setEditable] = useState(false);
@@ -169,11 +170,18 @@ function RenderNotInMeeting({ sessionId, words }: { sessionId: string; words: Wo
             });
           }
         });
+      } else {
+        if (userId) {
+          analyticsCommands.event({
+            event: "transcript_toggle_edit",
+            distinct_id: userId,
+          });
+        }
       }
 
       return !v;
     });
-  }, [editorWords]);
+  }, [editorWords, userId]);
 
   const handleUpdate = (words: Word2[]) => {
     setEditorWords(words);
@@ -214,14 +222,14 @@ function RenderNotInMeeting({ sessionId, words }: { sessionId: string; words: Wo
   const EditToggle = () => {
     return (
       <Button
-        className="w-6 h-6"
+        className="px-2 py-0.5 h-6 bg-neutral-50 hover:bg-neutral-100 border border-neutral-200"
         variant="ghost"
-        size="icon"
+        size="sm"
         onClick={handeToggleEdit}
       >
-        {editable
-          ? <CheckIcon size={12} className="text-neutral-600" />
-          : <PencilIcon size={12} className="text-neutral-600" />}
+        <span className="text-2xs text-neutral-600 font-normal">
+          {editable ? "Save" : "Edit"}
+        </span>
       </Button>
     );
   };
@@ -231,7 +239,9 @@ function RenderNotInMeeting({ sessionId, words }: { sessionId: string; words: Wo
       <header className="flex items-center justify-between w-full px-4 py-1 my-1 border-b">
         <div className="flex items-center">
           <h2 className="text-sm font-semibold text-neutral-900">Transcript</h2>
-          <EditToggle />
+          <div className="ml-2">
+            <EditToggle />
+          </div>
         </div>
         <div className="not-draggable flex items-center">
           <Button
@@ -517,6 +527,13 @@ const MemoizedSpeakerSelector = memo(({
                   onClick={() => {
                     onSpeakerChange(candidate, speakerRange);
                     setIsOpen(false);
+
+                    if (userId) {
+                      analyticsCommands.event({
+                        event: "transcript_speaker_change",
+                        distinct_id: userId,
+                      });
+                    }
                   }}
                 >
                   Apply Speaker Change

apps/desktop/src/locales/en/messages.po

@@ -219,9 +219,9 @@ msgstr "(Optional)"
 #. placeholder {0}: disabled ? "Wait..." : "Play again"
 #. placeholder {0}: disabled ? "Wait..." : "Play video"
 #. placeholder {0}: disabled ? "Wait..." : isHovered ? (isCompact ? "Resume" : "Resume") : (isCompact ? "Ended" : "Ended")
-#: src/components/editor-area/note-header/listen-button.tsx:187
-#: src/components/editor-area/note-header/listen-button.tsx:211
-#: src/components/editor-area/note-header/listen-button.tsx:231
+#: src/components/editor-area/note-header/listen-button.tsx:196
+#: src/components/editor-area/note-header/listen-button.tsx:220
+#: src/components/editor-area/note-header/listen-button.tsx:240
 #: src/components/settings/views/templates.tsx:253
 msgid "{0}"
 msgstr "{0}"
@@ -1082,11 +1082,11 @@ msgstr "Spoken languages"
 msgid "Start automatically at login"
 msgstr "Start automatically at login"
 
-#: src/components/editor-area/note-header/listen-button.tsx:158
+#: src/components/editor-area/note-header/listen-button.tsx:167
 msgid "Start recording"
 msgstr "Start recording"
 
-#: src/components/editor-area/note-header/listen-button.tsx:367
+#: src/components/editor-area/note-header/listen-button.tsx:385
 msgid "Stop"
 msgstr "Stop"
 

apps/desktop/src/locales/ko/messages.po

@@ -219,9 +219,9 @@ msgstr ""
 #. placeholder {0}: disabled ? "Wait..." : "Play again"
 #. placeholder {0}: disabled ? "Wait..." : "Play video"
 #. placeholder {0}: disabled ? "Wait..." : isHovered ? (isCompact ? "Resume" : "Resume") : (isCompact ? "Ended" : "Ended")
-#: src/components/editor-area/note-header/listen-button.tsx:187
-#: src/components/editor-area/note-header/listen-button.tsx:211
-#: src/components/editor-area/note-header/listen-button.tsx:231
+#: src/components/editor-area/note-header/listen-button.tsx:196
+#: src/components/editor-area/note-header/listen-button.tsx:220
+#: src/components/editor-area/note-header/listen-button.tsx:240
 #: src/components/settings/views/templates.tsx:253
 msgid "{0}"
 msgstr ""
@@ -1077,11 +1077,11 @@ msgstr ""
 msgid "Start automatically at login"
 msgstr ""
 
-#: src/components/editor-area/note-header/listen-button.tsx:158
+#: src/components/editor-area/note-header/listen-button.tsx:167
 msgid "Start recording"
 msgstr ""
 
-#: src/components/editor-area/note-header/listen-button.tsx:367
+#: src/components/editor-area/note-header/listen-button.tsx:385
 msgid "Stop"
 msgstr ""