From 115c4fc60c7c3e5fa6874d4f0c14cb998c8a85b3 Mon Sep 17 00:00:00 2001
From: Tanish Manku <-h>
Date: Wed, 19 Mar 2025 23:58:53 -0700
Subject: [PATCH] Add a generation mode UI component

---
 .../GenerationRootComponent.tsx               | 24 +++++++++++++++++
 .../realtime/src/app/pages/main/index.tsx     | 27 +++++++++++++++++--
 .../features/ToolbarTopLeft/index.tsx         |  3 ++-
 .../realtime/src/signals/uiEvents/appMode.ts  |  2 +-
 4 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 frontend/realtime/src/GenerationRootComponent/GenerationRootComponent.tsx

diff --git a/frontend/realtime/src/GenerationRootComponent/GenerationRootComponent.tsx b/frontend/realtime/src/GenerationRootComponent/GenerationRootComponent.tsx
new file mode 100644
index 0000000000..65107cfcde
--- /dev/null
+++ b/frontend/realtime/src/GenerationRootComponent/GenerationRootComponent.tsx
@@ -0,0 +1,24 @@
+import { faSparkles } from "@fortawesome/pro-solid-svg-icons";
+import { Button } from "~/components/ui";
+import { useRenderCounter } from "~/hooks/useRenderCounter";
+
+export const GenerationRootComponent = () => {
+  // This is a hook that will log the number of times the component has rerendered
+  // Let's make sure we only log once
+  useRenderCounter("GenerationRootComponent");
+
+  return (
+    <>
+        <div className="fixed flex flex-col items-center justify-center w-full h-full gap-y-32">
+            <div className="flex flex-col items-center justify-center">
+            <span className="text-9xl font-bold">Generate Image</span>
+            <span className="text-3xl pt-2">Imagine, Describe, Generate.</span>
+            </div>
+            <div className="glass p-3 rounded-xl flex w-1/2 border-ui-panel border-2">
+                <input type="text" placeholder="Describe what you want to see..." className="flex-1 text-lg rounded-md bg-transparent focus:outline-none" />
+                <Button icon={faSparkles} variant="primary" className="text-lg">Generate</Button>
+            </div>
+        </div>
+    </>
+  );
+};
diff --git a/frontend/realtime/src/app/pages/main/index.tsx b/frontend/realtime/src/app/pages/main/index.tsx
index 268921ba9b..a4caeb7ac8 100644
--- a/frontend/realtime/src/app/pages/main/index.tsx
+++ b/frontend/realtime/src/app/pages/main/index.tsx
@@ -10,6 +10,9 @@ import { KonvaRootComponent } from "~/KonvaRootComponent";
 import { ToolbarTopLeft } from "~/components/features/ToolbarTopLeft";
 import { ToolbarTopRight } from "~/components/features/ToolbarTopRight";
 import { ToolbarTopCenter } from "~/components/features/ToolbarTopCenter";
+import { appMode } from "~/signals";
+import { useSignals } from "@preact/signals-react/runtime";
+import { GenerationRootComponent } from "~/GenerationRootComponent/GenerationRootComponent";
 
 export const Main = withProtectionRoute(() => {
   // This is a hook that will log the number of times the component has rerendered
@@ -19,12 +22,32 @@ export const Main = withProtectionRoute(() => {
   if (import.meta.env.DEV && sceneToken === "debug") {
     sceneToken = "m_p8nkry6m5j22w586xyex0w4a4pznbx";
   }
-  return (
-    <div className="fixed grid h-full w-full grid-cols-12 grid-rows-12">
+
+  useSignals();
+
+  const appModeValue = appMode.value;
+  let childView;
+
+  switch (appModeValue) {
+    case "edit":
+      break;
+    case "generate":
+      childView = <GenerationRootComponent />;
+      break;
+    case "image":
+    default:
+      childView = 
       <KonvaRootComponent
         sceneToken={sceneToken}
         className="col-span-12 col-start-1 row-span-12 row-start-1"
       />
+
+      break;
+  }
+  
+  return (
+    <div className="fixed grid h-full w-full grid-cols-12 grid-rows-12">
+      {childView}
       <div className="absolute top-0 w-full p-3.5">
         <div className="relative flex w-full">
           <div className="absolute left-0">
diff --git a/frontend/realtime/src/components/features/ToolbarTopLeft/index.tsx b/frontend/realtime/src/components/features/ToolbarTopLeft/index.tsx
index 068dabced0..da63828bf7 100644
--- a/frontend/realtime/src/components/features/ToolbarTopLeft/index.tsx
+++ b/frontend/realtime/src/components/features/ToolbarTopLeft/index.tsx
@@ -14,12 +14,13 @@ export const ToolbarTopLeft = () => {
   const tabs: TabItem[] = [
     { id: "image", label: "Image" },
     { id: "edit", label: "Edit" },
+    { id: "generate", label: "Generate" },
     // { id: "video", label: "Video" },
   ];
 
   const handleTabChange = (tabId: string) => {
     // Update the global signal
-    dispatchUiEvents.changeAppMode(tabId as "image" | "edit");
+    dispatchUiEvents.changeAppMode(tabId as "image" | "edit" | "generate");
   };
 
   console.log(appMode.value);
diff --git a/frontend/realtime/src/signals/uiEvents/appMode.ts b/frontend/realtime/src/signals/uiEvents/appMode.ts
index e2b721e6e1..4d15fb4a37 100644
--- a/frontend/realtime/src/signals/uiEvents/appMode.ts
+++ b/frontend/realtime/src/signals/uiEvents/appMode.ts
@@ -3,7 +3,7 @@ import { signal, effect } from "@preact/signals-core";
 // this is to control the app mode - BFlat
 
 // Define the app mode types
-export type AppModeType = "image" | "edit";
+export type AppModeType = "image" | "edit" | "generate";
 
 // Create a signal for the current app mode
 export const appMode = signal<AppModeType>("image");