add action buttons in transcript editor

Author: yujonglee

apps/desktop/src/routes/__root.tsx

@@ -46,9 +46,7 @@ function Component() {
   }, [navigate]);
 
   useEffect(() => {
-    scan({
-      enabled: true,
-    });
+    scan({ enabled: false });
   }, []);
 
   return (

apps/desktop/src/routes/app.transcript.$id.tsx

@@ -1,24 +1,36 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { PencilIcon } from "lucide-react";
 import { useRef } from "react";
 
 import { commands as dbCommands } from "@hypr/plugin-db";
+import { commands as windowsCommands } from "@hypr/plugin-windows";
+import { Button } from "@hypr/ui/components/ui/button";
 import TranscriptEditor from "@hypr/tiptap/transcript";
 
 export const Route = createFileRoute("/app/transcript/$id")({
   component: Component,
   loader: async ({ params: { id }, context: { onboardingSessionId } }) => {
+    const session = await dbCommands.getSession({ id }).then((v) => v!);
     const timeline = onboardingSessionId
       ? await dbCommands.getTimelineViewOnboarding()
       : await dbCommands.getTimelineView(id);
 
-    return { timeline };
+    return { session, timeline };
   },
 });
 
 function Component() {
-  const { timeline } = Route.useLoaderData();
+  const { session, timeline } = Route.useLoaderData();
   const editorRef = useRef(null);
 
+  const handleSave = () => {
+    windowsCommands.windowDestroy({ type: "transcript", value: session.id });
+  };
+
+  const handleCancel = () => {
+    windowsCommands.windowDestroy({ type: "transcript", value: session.id });
+  };
+
   const content = {
     type: "doc",
     content: [
@@ -34,11 +46,36 @@ function Component() {
   };
 
   return (
-    <div className="p-12">
-      <TranscriptEditor
-        ref={editorRef}
-        initialContent={content}
-      />
+    <div className="h-full flex flex-col">
+      <div className="absolute top-3 left-0 right-0 flex justify-center items-center h-4 px-4">
+        <h1 className="text-md font-light flex items-center gap-2">
+          <PencilIcon className="w-3 h-3" />
+          <span>{session.title}</span>
+        </h1>
+        <div className="absolute right-3 flex items-center gap-2">
+          <Button 
+            onClick={handleCancel} 
+            variant="ghost" 
+            size="sm"
+          >
+            Cancel
+          </Button>
+          <Button 
+            onClick={handleSave} 
+            size="sm"
+          >
+            Save
+          </Button>
+        </div>
+      </div>
+      <div className="p-6 pt-10 flex-1 flex flex-col overflow-hidden">
+        <div className="h-full overflow-auto">
+          <TranscriptEditor
+            ref={editorRef}
+            initialContent={content}
+          />
+        </div>
+      </div>
     </div>
   );
 }

packages/tiptap/src/transcript/index.tsx

@@ -56,8 +56,10 @@ const TranscriptEditor = forwardRef<{ editor: TiptapEditor | null }, TranscriptE
     }, [editor, initialContent]);
 
     return (
-      <div role="textbox">
-        <EditorContent editor={editor} />
+      <div role="textbox" className="h-full flex flex-col overflow-hidden">
+        <div className="flex-1 overflow-y-auto">
+          <EditorContent editor={editor} className="h-full" />
+        </div>
       </div>
     );
   },