Refactor with note-input and more tabs lifecycle hooks

apps/desktop2/src/components/main/body/index.tsx

@@ -12,7 +12,6 @@ import { id } from "../../../utils";
 import { ChatFloatingButton } from "../../chat";
 import { TabContentCalendar, TabItemCalendar } from "./calendars";
 import { TabContentContact, TabItemContact } from "./contacts";
-import { TabContentDaily, TabItemDaily } from "./daily";
 import { TabContentEvent, TabItemEvent } from "./events";
 import { TabContentFolder, TabItemFolder } from "./folders";
 import { TabContentHuman, TabItemHuman } from "./humans";
@@ -236,17 +235,6 @@ function TabItem(
       />
     );
   }
-  if (tab.type === "daily") {
-    return (
-      <TabItemDaily
-        tab={tab}
-        handleCloseThis={handleClose}
-        handleSelectThis={handleSelect}
-        handleCloseOthers={handleCloseOthers}
-        handleCloseAll={handleCloseAll}
-      />
-    );
-  }
 
   if (tab.type === "calendars") {
     return (
@@ -287,9 +275,6 @@ function Content({ tab }: { tab: Tab }) {
   if (tab.type === "humans") {
     return <TabContentHuman tab={tab} />;
   }
-  if (tab.type === "daily") {
-    return <TabContentDaily tab={tab} />;
-  }
 
   if (tab.type === "calendars") {
     return <TabContentCalendar tab={tab} />;

apps/desktop2/src/components/main/body/sessions/index.tsx

@@ -1,19 +1,24 @@
 import { StickyNoteIcon } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 
-import NoteEditor from "@hypr/tiptap/editor";
 import { AudioPlayerProvider } from "../../../../contexts/audio-player";
 import * as persisted from "../../../../store/tinybase/persisted";
 import { rowIdfromTab, type Tab } from "../../../../store/zustand/tabs";
 import { type TabItem, TabItemBase } from "../shared";
 import { FloatingActionButtonn } from "./floating-action";
-import { InnerHeader } from "./inner-header";
+import { NoteInput } from "./note-input";
 import { OuterHeader } from "./outer-header";
 import { AudioPlayer } from "./player";
 import { TitleInput } from "./title-input";
 
 export const TabItemNote: TabItem = (
-  { tab, handleCloseThis, handleSelectThis, handleCloseOthers, handleCloseAll },
+  {
+    tab,
+    handleCloseThis,
+    handleSelectThis,
+    handleCloseOthers,
+    handleCloseAll,
+  },
 ) => {
   const title = persisted.UI.useCell("sessions", rowIdfromTab(tab), "title", persisted.STORE_ID);
 
@@ -35,11 +40,6 @@ export function TabContentNote({ tab }: { tab: Tab }) {
   const sessionRow = persisted.UI.useRow("sessions", sessionId, persisted.STORE_ID);
   const [showAudioPlayer, setShowAudioPlayer] = useState(false);
 
-  const editorKey = useMemo(
-    () => `session-${sessionId}-raw`,
-    [sessionId],
-  );
-
   const handleEditTitle = persisted.UI.useSetRowCallback(
     "sessions",
     sessionId,
@@ -48,14 +48,6 @@ export function TabContentNote({ tab }: { tab: Tab }) {
     persisted.STORE_ID,
   );
 
-  const handleEditRawMd = persisted.UI.useSetRowCallback(
-    "sessions",
-    sessionId,
-    (input: string, _store) => ({ ...sessionRow, raw_md: input }),
-    [sessionRow],
-    persisted.STORE_ID,
-  );
-
   const handleRegenerate = (templateId: string | null) => {
     console.log("Regenerate clicked:", templateId);
   };
@@ -76,29 +68,9 @@ export function TabContentNote({ tab }: { tab: Tab }) {
           <TitleInput
             editable={true}
             value={sessionRow.title ?? ""}
-            onChange={(e) => handleEditTitle(e.target.value)}
-          />
-          <InnerHeader
-            tab={tab}
-            onVisibilityChange={() => {}}
-            isCurrentlyRecording={false}
-            shouldShowTab={true}
-            shouldShowEnhancedTab={false}
+            onChange={handleEditTitle}
           />
-          <div className="py-1"></div>
-          <div className="flex-1 overflow-auto">
-            <NoteEditor
-              key={editorKey}
-              initialContent={sessionRow.raw_md ?? ""}
-              handleChange={(e) => handleEditRawMd(e)}
-              mentionConfig={{
-                trigger: "@",
-                handleSearch: async () => {
-                  return [];
-                },
-              }}
-            />
-          </div>
+          <NoteInput tab={tab} />
           <FloatingActionButtonn onRegenerate={handleRegenerate} />
         </div>
         {showAudioPlayer && <AudioPlayer />}

apps/desktop2/src/components/main/body/sessions/note-input/enhanced.tsx

@@ -0,0 +1,29 @@
+import NoteEditor from "@hypr/tiptap/editor";
+
+import * as persisted from "../../../../../store/tinybase/persisted";
+
+export function EnhancedEditor({ sessionId }: { sessionId: string }) {
+  const value = persisted.UI.useCell("sessions", sessionId, "enhanced_md", persisted.STORE_ID);
+
+  const handleEnhancedChange = persisted.UI.useSetPartialRowCallback(
+    "sessions",
+    sessionId,
+    (input: string) => ({ enhanced_md: input }),
+    [],
+    persisted.STORE_ID,
+  );
+
+  return (
+    <NoteEditor
+      key={`session-${sessionId}-enhanced`}
+      initialContent={value ?? ""}
+      handleChange={handleEnhancedChange}
+      mentionConfig={{
+        trigger: "@",
+        handleSearch: async () => {
+          return [];
+        },
+      }}
+    />
+  );
+}

apps/desktop2/src/components/main/body/sessions/note-input/index.tsx

@@ -0,0 +1,57 @@
+import { cn } from "@hypr/ui/lib/utils";
+import { type Tab, useTabs } from "../../../../../store/zustand/tabs";
+import { EnhancedEditor } from "./enhanced";
+import { RawEditor } from "./raw";
+import { TranscriptEditorWrapper } from "./transcript";
+
+type EditorView = "raw" | "enhanced" | "transcript";
+
+const EDITOR_TABS = [
+  { view: "enhanced" as const, label: "Summary" },
+  { view: "raw" as const, label: "Memos" },
+  { view: "transcript" as const, label: "Transcript" },
+];
+
+export function NoteInput({ tab }: { tab: Tab }) {
+  const { updateSessionTabState } = useTabs();
+
+  const handleTabChange = (view: EditorView) => {
+    updateSessionTabState(tab, { editor: view });
+  };
+
+  if (tab.type !== "sessions") {
+    return null;
+  }
+
+  const sessionId = tab.id;
+  const currentTab = tab.state.editor ?? "raw";
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="bg-white border-b border-neutral-100">
+        <div className="flex">
+          {EDITOR_TABS.map(({ view, label }) => (
+            <button
+              key={view}
+              onClick={() => handleTabChange(view)}
+              className={cn([
+                "relative px-3 py-2 text-xs font-medium transition-all duration-200 border-b-2 -mb-px flex items-center gap-1.5",
+                currentTab === view
+                  ? ["text-neutral-900", "border-neutral-900"]
+                  : ["text-neutral-600", "border-transparent", "hover:text-neutral-800"],
+              ])}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto mt-1">
+        {currentTab === "enhanced" && <EnhancedEditor sessionId={sessionId} />}
+        {currentTab === "raw" && <RawEditor sessionId={sessionId} />}
+        {currentTab === "transcript" && <TranscriptEditorWrapper sessionId={sessionId} />}
+      </div>
+    </div>
+  );
+}