From 2c97c665ee719c79b1d6d758f9b392a87eefea93 Mon Sep 17 00:00:00 2001
From: Gram Liu <gram.liu226@gmail.com>
Date: Mon, 27 Nov 2023 23:01:29 -0800
Subject: [PATCH] Add page header to output pane

---
 apps/web/app/page.tsx                       | 44 +++++++++++++++++----
 packages/ui/src/components/canvas/index.tsx |  4 +-
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index a0ae60f..d925980 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Editor } from "@tldraw/tldraw";
+import { Editor, TLPageId } from "@tldraw/tldraw";
 import "@tldraw/tldraw/tldraw.css";
 import {
   Button,
@@ -16,7 +16,7 @@ import IconLabel from "@ui/components/icon-label";
 import NextJsIcon from "@ui/icons/nextjs";
 import clsx from "clsx";
 import { GitBranchIcon, GithubIcon } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { CopyBlock, nord } from "react-code-blocks";
 import { convertEditorToCode } from "~/lib/editorToCode";
 
@@ -45,6 +45,26 @@ export default function IndexPage() {
   const [loading, setLoading] = useState<boolean>(false);
   const { toast } = useToast();
 
+  const [pageId, setPageId] = useState<TLPageId>();
+  const [page, setPage] = useState<string>("");
+
+  // Update page ID to trigger secondary effect
+  useEffect(() => {
+    if (editor != null) {
+      setPageId(editor.getCurrentPageId());
+    }
+  }, [editor]);
+
+  // Update page name in output pane
+  useEffect(() => {
+    if (pageId != null && editor != null) {
+      const page = editor.getPage(pageId);
+      if (page != null) {
+        setPage(page.name);
+      }
+    }
+  }, [pageId, editor]);
+
   return (
     <main className="h-full w-full flex flex-col p-5 pl-10 pt-10">
       <h1 className="text-3xl font-bold">Web Spinner</h1>
@@ -58,7 +78,12 @@ export default function IndexPage() {
       <section className="p-4 grid grid-cols-2 items-center justify-center">
         {/* Editor */}
         <div className="h-[70vh] w-[40vw] self-center justify-self-center bg-gray-100 rounded-md">
-          <Canvas setEditor={setEditor} />
+          <Canvas
+            setEditor={setEditor}
+            onPageChanged={(newPageId) => {
+              setPageId(newPageId);
+            }}
+          />
         </div>
         {/* Output */}
         <div
@@ -71,11 +96,14 @@ export default function IndexPage() {
             defaultValue="preview"
             className="w-full h-full grid grid-rows-[auto_1fr]"
           >
-            <TabsList className="justify-start">
-              <TabsTrigger value="preview">Preview</TabsTrigger>
-              <TabsTrigger value="code_standalone">
-                Code (Standalone)
-              </TabsTrigger>
+            <TabsList className="justify-between">
+              <div className="pl-4">{page}</div>
+              <div>
+                <TabsTrigger value="preview">Preview</TabsTrigger>
+                <TabsTrigger value="code_standalone">
+                  Code (Standalone)
+                </TabsTrigger>
+              </div>
             </TabsList>
             {loading ? (
               <SkeletonPlaceholder />
diff --git a/packages/ui/src/components/canvas/index.tsx b/packages/ui/src/components/canvas/index.tsx
index 083a7be..de7abc2 100644
--- a/packages/ui/src/components/canvas/index.tsx
+++ b/packages/ui/src/components/canvas/index.tsx
@@ -1,11 +1,11 @@
 "use client";
-import { Editor, Tldraw } from "@tldraw/tldraw";
+import { Editor, TLPageId, Tldraw } from "@tldraw/tldraw";
 import "@tldraw/tldraw/tldraw.css";
 import { Dispatch, SetStateAction, useCallback } from "react";
 import initialState from "./initial-state.json";
 
 interface CanvasProps {
-  onPageChanged?: (newPageId: string, oldPageId: string) => void;
+  onPageChanged?: (newPageId: TLPageId, oldPageId: TLPageId) => void;
   setEditor?: Dispatch<SetStateAction<Editor>>;
 }