Add a generation mode UI component

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>
+    </>
+  );
+};

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">

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);

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");