Pass in signals to use for tab

frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx

@@ -15,6 +15,9 @@ import { GalleryModal } from "@storyteller/ui-gallery-modal";
 import { SettingsModal } from "@storyteller/ui-settings-modal";
 import { Tooltip } from "@storyteller/ui-tooltip";
 import { downloadFileFromUrl } from "@storyteller/api";
+import { TabSelector, TabItem } from "@storyteller/ui-tab-selector";
+import { Signal } from "@preact/signals-react";
+import { useSignals } from "@preact/signals-react/runtime";
 function isEditorPath(path: string) {
   if (path === "/") return true;
   if (path === "/idealenigma/") return true;
@@ -22,9 +25,18 @@ function isEditorPath(path: string) {
 }
 interface Props {
   pageName: string;
+  appTabIdSignal: Signal<string>;
+  setAppTabId: (id: string) => void;
 }
 
-export const TopBar = ({ pageName }: Props) => {
+const appTabs: TabItem[] = [
+  { id: "2D", label: "2D" },
+  { id: "3D", label: "3D" },
+];
+
+export const TopBar = ({ pageName, appTabIdSignal, setAppTabId }: Props) => {
+  useSignals();
+
   const currentLocation = getCurrentLocationWithoutParams(
     useLocation().pathname,
     useParams(),
@@ -58,6 +70,12 @@ export const TopBar = ({ pageName }: Props) => {
                 Back to Editor
               </ButtonLink>
             )}
+            <TabSelector
+              tabs={appTabs}
+              activeTab={appTabIdSignal.value}
+              disabled={false}
+              onTabChange={(tabId) => setAppTabId(tabId)}
+            />
             {/* <Button
               variant="secondary"
               icon={faChevronRight}

frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx

@@ -26,6 +26,7 @@ import { OnboardingHelper } from "./comps/OnboardingHelper";
 import { IsDesktopApp } from "@storyteller/tauri-utils";
 import { FocalLengthDisplay } from "./comps/FocalLengthDisplay/FocalLengthDisplay";
 import { DemoModal } from "@storyteller/ui-demo-modal";
+import { appTabId, setAppTabId } from "~/signals/appTab";
 
 export const PageEditor = () => {
   useSignals();
@@ -75,7 +76,11 @@ export const PageEditor = () => {
 
   return (
     <div className="w-screen">
-      <TopBar pageName="Edit Scene" />
+      <TopBar
+        pageName="Edit Scene"
+        appTabIdSignal={appTabId}
+        setAppTabId={setAppTabId}
+      />
       <OnboardingHelper />
       <div
         className="relative flex w-screen"

frontend/apps/editor3d/app/src/pages/PageEnigma/PageStyling.tsx

@@ -20,6 +20,7 @@ import { StyleSelection } from "~/pages/PageEnigma/comps/StyleSelection";
 import { StyleMoreOptions } from "~/pages/PageEnigma/comps/StyleMoreOptions/StyleMoreOptions";
 import Queue, { QueueNames } from "~/pages/PageEnigma/Queue";
 import { toTimelineActions } from "~/pages/PageEnigma/Queue/toTimelineActions";
+import { appTabId, setAppTabId } from "~/signals/appTab";
 
 export const PageStyling = () => {
   useSignals();
@@ -61,7 +62,11 @@ export const PageStyling = () => {
 
   return (
     <div className="h-screen w-screen">
-      <TopBar pageName="Stylization" />
+      <TopBar
+        pageName="Stylization"
+        appTabIdSignal={appTabId}
+        setAppTabId={setAppTabId}
+      />
       <div className="mt-4 flex flex-col items-center gap-6">
         <PreviewImages />
       </div>

frontend/apps/editor3d/app/src/signals/appTab.ts

@@ -0,0 +1,12 @@
+import { signal } from "@preact/signals-react";
+
+export const appTabId = signal("3D");
+
+export const setAppTabId = (newId: string) => {
+  if (newId != "2D" && newId != "3D") {
+    console.error("Provided app ID is not valid");
+    return;
+  }
+
+  appTabId.value = newId;
+};