feat(journal-entries): implemented journal entry editor & document blocks

apps/web/package.json

@@ -44,6 +44,7 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "@t3-oss/env-nextjs": "^0.13.6",
     "@tanstack/react-query": "^5.80.7",
+    "@tanstack/react-query-devtools": "^5.80.7",
     "@tanstack/react-virtual": "^3.13.12",
     "@trpc/client": "^11.4.0",
     "@trpc/server": "^11.4.0",

apps/web/src/ai/mastra/tools/semantic-journal-search.ts

@@ -6,8 +6,6 @@ export const semanticJournalSearch = createTool({
   description:
     "Search the journal for entries that are semantically similar to a query",
   execute: async ({ context }) => {
-    console.debug("[semanticJournalSearch] context 👀", context);
-
     const results = await api.journal.getRelevantEntries({
       limit: context.limit,
       query: context.query,
@@ -17,7 +15,6 @@ export const semanticJournalSearch = createTool({
     return results.map((result) => ({
       content: result.embedding.chunk_markdown_text,
       date: result.journal_entry.date,
-      id: result.journal_entry.id,
       link: `/journal/${result.journal_entry.date}`,
       similarity: result.similarity,
     }));
@@ -35,7 +32,7 @@ export const semanticJournalSearch = createTool({
     z.object({
       content: z.string(),
       date: z.string(),
-      id: z.string(),
+      link: z.string(),
       similarity: z.number(),
     }),
   ),

apps/web/src/ai/mastra/tools/semantic-page-search.ts

@@ -6,9 +6,7 @@ export const semanticPageSearch = createTool({
   description:
     "Search the pages for all entries that are semantically similar to a query. Returns multiple relevant results from different pages that should all be analyzed and synthesized.",
   execute: async ({ context }) => {
-    console.debug("[semanticPageSearch] context 👀", context);
-
-    const result = await api.pages.getRelevantPageChunks({
+    const result = await api.pages.getRelevantPages({
       limit: context.limit,
       query: context.query,
       threshold: context.threshold,

apps/web/src/ai/mastra/tools/temporal-journal-search.ts

@@ -1,21 +1,35 @@
+import { ServerBlockNoteEditor } from "@blocknote/server-util";
 import { createTool } from "@mastra/core/tools";
+import { MDocument } from "@mastra/rag";
 import { z } from "zod";
+import { schema } from "~/components/editor/block-schema";
 import { api } from "~/trpc/server";
 
 export const temporalJournalSearch = createTool({
   description: "Search the journal for entries between two dates",
   execute: async ({ context }) => {
-    console.debug("[temporalJournalSearch] context 👀", context);
-
     const results = await api.journal.getBetween({
       from: context.from,
       to: context.to,
     });
 
-    return results.map((result) => ({
-      ...result,
-      link: `/journal/${result.date}`,
-    }));
+    return await Promise.all(
+      results.map(async (result) => {
+        const editor = ServerBlockNoteEditor.create({
+          schema,
+        });
+        const markdown = result.document
+          ? await editor.blocksToMarkdownLossy(result.document)
+          : "";
+        const mDocument = MDocument.fromMarkdown(markdown);
+        return {
+          content: mDocument.getText().join("\n"),
+          date: result.date,
+          id: result.id,
+          link: `/journal/${result.date}`,
+        };
+      }),
+    );
   },
   id: "temporal-journal-search",
   inputSchema: z.object({
@@ -35,6 +49,7 @@ export const temporalJournalSearch = createTool({
       content: z.string(),
       date: z.string(),
       id: z.string(),
+      link: z.string(),
     }),
   ),
 });

apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-page-item.tsx

@@ -38,7 +38,7 @@ export function AppSidebarPageItem(props: AppSidebarPageItemProps) {
           </Link>
           {!!page && (
             <DeletePageButton
-              className="hover:!bg-transparent hover:!text-destructive opacity-0 transition-opacity duration-200 group-hover/page-item:opacity-100"
+              className="!text-destructive !bg-transparent !pr-0 hidden group-hover/page-item:block"
               page={page}
             />
           )}

apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-pages.tsx

@@ -29,7 +29,7 @@ export const AppSidebarPages = (props: AppSidebarPagesProps) => {
   const { state, setOpen } = useSidebar();
 
   const { data: pages } = useQuery({
-    ...trpc.pages.getAll.queryOptions(),
+    ...trpc.pages.getByUser.queryOptions(),
     initialData: props.pages,
   });
 
@@ -62,7 +62,7 @@ export const AppSidebarPages = (props: AppSidebarPagesProps) => {
         </SidebarMenuButton>
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <SidebarMenuSub>
+        <SidebarMenuSub className="mr-0 pr-0">
           <CreatePageButton />
           {pages?.map((page) => (
             <AppSidebarPageItem key={page.id} page={page} />

apps/web/src/app/(app)/@appSidebar/_components/create-page-button.tsx

@@ -36,7 +36,7 @@ export function CreatePageButton() {
           onSuccess: (newPage) => {
             // Optimistically update the pages list
             queryClient.setQueryData(
-              trpc.pages.getAll.queryOptions().queryKey,
+              trpc.pages.getByUser.queryOptions().queryKey,
               (oldPages: Page[] | undefined) => {
                 if (!oldPages) return [newPage];
                 return [newPage, ...oldPages];

apps/web/src/app/(app)/@appSidebar/_components/delete-page-button.tsx

@@ -55,7 +55,7 @@ export function DeletePageButton({ page, className }: DeletePageButtonProps) {
 
             // Optimistically update the pages list
             queryClient.setQueryData(
-              trpc.pages.getAll.queryOptions().queryKey,
+              trpc.pages.getByUser.queryOptions().queryKey,
               (oldPages: Page[] | undefined) => {
                 if (!oldPages) return [];
                 return oldPages.filter((p) => p.id !== page.id);

apps/web/src/app/(app)/@appSidebar/default.tsx

@@ -15,7 +15,7 @@ import { AppSidebarUser } from "./_components/app-sidebar-user";
 import { AppSidebarUserSkeleton } from "./_components/app-sidebar-user-skeleton";
 
 async function SuspendedAppSidebarPages() {
-  const pages = await api.pages.getAll();
+  const pages = await api.pages.getByUser();
   return <AppSidebarPages pages={pages} />;
 }
 

apps/web/src/app/(app)/@header/_components/header-search-modal.tsx

@@ -31,7 +31,7 @@ import { useTRPC } from "~/trpc/react";
 const MIN_QUERY_LENGTH = 2;
 const DEFAULT_THRESHOLD = 0.25;
 const DEFAULT_LIMIT = 10;
-const DEFAULT_DEBOUNCE_TIME = 500;
+const DEFAULT_DEBOUNCE_TIME = 150;
 
 type HeaderSearchButtonProps = React.ComponentProps<typeof Dialog> & {
   children: React.ReactNode;

apps/web/src/app/(app)/@header/default.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { HeaderThemeToggle } from "~/app/(app)/@header/_components/header-theme-toggle";
 import { SidebarTrigger } from "~/components/ui/sidebar";
 import { HeaderCurrentDate } from "./_components/header-current-date";
@@ -11,7 +12,9 @@ export default function JournalHeader() {
         <SidebarTrigger />
         <div className="flex w-full items-center justify-between gap-x-2">
           <div className="min-w-0 flex-1">
-            <HeaderCurrentDate />
+            <Link href="/journal">
+              <HeaderCurrentDate />
+            </Link>
           </div>
           <HeaderSearchButton>
             <HeaderSearchTrigger />

apps/web/src/app/(app)/journal/[date]/page.tsx

@@ -1,12 +1,14 @@
 import { notFound } from "next/navigation";
 import { Suspense } from "react";
 import { api } from "~/trpc/server";
+import { JournalEntryEditor } from "../_components/journal-entry-editor";
 import {
   JournalEntryContent,
   JournalEntryHeader,
-  JournalEntryProvider,
-  JournalEntryTextArea,
-} from "../_components/journal-entry";
+  JournalEntryLink,
+  JournalEntryWrapper,
+} from "../_components/journal-entry-primitives";
+import { JournalEntryProvider } from "../_components/journal-entry-provider";
 import { JournalEntrySkeleton } from "../_components/journal-entry-skeleton";
 
 export default async function Page({
@@ -21,34 +23,36 @@ export default async function Page({
     </Suspense>
   );
 }
-async function SuspendedJournalEntry({ date }: { date: string }) {
-  const entry = await api.journal.getByDate({ date });
-
-  if (!entry) {
-    notFound();
-  }
 
+function JournalEntryFallback({ date }: { date: string }) {
   return (
     <JournalEntryProvider
-      className="mx-auto h-full max-w-4xl px-4 py-8 md:px-8"
-      entry={entry}
+      className="mx-auto min-h-full max-w-5xl px-13.5 py-8"
+      entry={{ date }}
     >
-      <JournalEntryHeader forceDate />
-      <JournalEntryContent>
-        <JournalEntryTextArea autoFocus />
-      </JournalEntryContent>
+      <JournalEntryHeader className="mb-6" />
+      <JournalEntrySkeleton hasHeader={false} hasContent={true} />
     </JournalEntryProvider>
   );
 }
 
-function JournalEntryFallback({ date }: { date: string }) {
+async function SuspendedJournalEntry({ date }: { date: string }) {
+  const entry = await api.journal.getByDate({ date });
+
+  if (!entry) {
+    notFound();
+  }
+
   return (
-    <JournalEntryProvider
-      className="mx-auto min-h-full max-w-4xl px-4 py-8 md:px-8"
-      entry={{ date }}
-    >
-      <JournalEntryHeader className="mb-2" forceDate />
-      <JournalEntrySkeleton hasHeader={false} hasContent={true} />
+    <JournalEntryProvider entry={entry}>
+      <JournalEntryWrapper className="mx-auto max-w-5xl pt-8 pb-20">
+        <JournalEntryLink>
+          <JournalEntryHeader className="px-13.5" />
+        </JournalEntryLink>
+        <JournalEntryContent>
+          <JournalEntryEditor />
+        </JournalEntryContent>
+      </JournalEntryWrapper>
     </JournalEntryProvider>
   );
 }

apps/web/src/app/(app)/journal/_components/journal-entry-editor.dynamic.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const DynamicJournalEntryEditor = dynamic(
+  () => import("./journal-entry-editor").then((mod) => mod.JournalEntryEditor),
+  {
+    ssr: false,
+  },
+);

apps/web/src/app/(app)/journal/_components/journal-entry-editor.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import type { BlockTransaction, TimelineEntry } from "@acme/api";
+import { useMutation } from "@tanstack/react-query";
+import { useRef } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { BlockEditor } from "~/components/editor/block-editor";
+import { useTRPC } from "~/trpc/react";
+import { useJournalEntry } from "./journal-entry-provider";
+
+const DEFAULT_DEBOUNCE_TIME = 150;
+
+type PageEditorProps = {
+  debounceTime?: number;
+  onCreate?: (newEntry: TimelineEntry) => void;
+};
+
+export function JournalEntryEditor({
+  debounceTime = DEFAULT_DEBOUNCE_TIME,
+  onCreate,
+}: PageEditorProps) {
+  const trpc = useTRPC();
+  const pendingChangesRef = useRef<BlockTransaction[]>([]);
+  const { initialBlocks, documentId, date } = useJournalEntry();
+
+  const { mutate, isPending } = useMutation({
+    ...trpc.journal.saveTransactions.mutationOptions({}),
+    // ! TODO: When the mutation fails we need to revert the changes to the editor just like Notion does.
+    // ! To do this we can use `onError` and `editor.undo()`, without calling the transactions. We might have to get creative.
+    // ! Maybe we can refetch the blocks after an error instead of `undo`?
+    onSuccess: (data) => {
+      if (pendingChangesRef.current.length > 0) {
+        debouncedMutate();
+      }
+      if (!documentId && data) {
+        onCreate?.(data);
+      }
+    },
+  });
+
+  const debouncedMutate = useDebouncedCallback(() => {
+    if (isPending) return;
+    const transactions = pendingChangesRef.current;
+    pendingChangesRef.current = [];
+    mutate({ date, document_id: documentId, transactions });
+  }, debounceTime);
+
+  function handleEditorChange(transactions: BlockTransaction[]) {
+    pendingChangesRef.current.push(...transactions);
+
+    debouncedMutate();
+  }
+
+  return (
+    <BlockEditor initialBlocks={initialBlocks} onChange={handleEditorChange} />
+  );
+}

apps/web/src/app/(app)/journal/_components/journal-entry-primitives.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import Link from "next/link";
+import type { ComponentProps } from "react";
+import { cn } from "~/components/utils";
+import { useJournalEntry } from "./journal-entry-provider";
+
+type JournalEntryWrapperProps = ComponentProps<"div">;
+
+export function JournalEntryWrapper({
+  className,
+  children,
+  ...rest
+}: JournalEntryWrapperProps) {
+  const { isToday } = useJournalEntry();
+
+  return (
+    <div
+      className={cn(isToday && "min-h-96 md:min-h-124", className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function JournalEntryLink({ className, ...rest }: ComponentProps<"a">) {
+  const { date } = useJournalEntry();
+
+  return (
+    <Link
+      className={cn("text-muted-foreground", className)}
+      href={`/journal/${date}`}
+      {...rest}
+    />
+  );
+}
+
+type JournalEntryHeaderProps = Omit<ComponentProps<"div">, "children"> & {
+  forceDate?: boolean;
+};
+
+export function JournalEntryHeader({
+  className,
+  forceDate = false,
+  ...rest
+}: JournalEntryHeaderProps) {
+  const { formattedDate, isToday } = useJournalEntry();
+
+  return (
+    <div className={cn("mb-6", className)} {...rest}>
+      <h2 className="font-semibold text-5xl text-muted-foreground">
+        {isToday && !forceDate ? "Today" : formattedDate}
+      </h2>
+    </div>
+  );
+}
+
+type JournalEntryContentProps = ComponentProps<"div">;
+
+export function JournalEntryContent({
+  className,
+  children,
+  ...rest
+}: JournalEntryContentProps) {
+  return (
+    <div className={cn("flex items-start gap-2", className)} {...rest}>
+      <div className="min-w-0 flex-1">{children}</div>
+    </div>
+  );
+}