adding embed routes for testing

src/components/EmbedAuthWrapper.tsx

@@ -0,0 +1,51 @@
+import { type Component, type JSX, onMount, onCleanup, createSignal, Show } from "solid-js";
+import { pb } from "@/lib/pocketbase";
+import { initStore } from "@/store";
+
+interface EmbedAuthWrapperProps {
+    children: JSX.Element;
+}
+
+export const EmbedAuthWrapper: Component<EmbedAuthWrapperProps> = (props) => {
+    const [isHydrated, setIsHydrated] = createSignal(pb.authStore.isValid);
+
+    const handleMessage = (event: MessageEvent) => {
+        // You might want to add origin validation here if you know the sibling app domains
+        // if (event.origin !== "https://sibling-app.com") return;
+
+        const { data } = event;
+        if (data?.type === "TASGRID_AUTH" && data.token) {
+            console.log("Received TasGrid auth payload via postMessage");
+
+            // Hydrate PocketBase auth store
+            pb.authStore.save(data.token, data.user || null);
+
+            // Re-initialize store with new auth context
+            initStore().then(() => {
+                setIsHydrated(true);
+            });
+        }
+    };
+
+    onMount(() => {
+        window.addEventListener("message", handleMessage);
+    });
+
+    onCleanup(() => {
+        window.removeEventListener("message", handleMessage);
+    });
+
+    return (
+        <Show
+            when={isHydrated()}
+            fallback={
+                <div class="flex flex-col items-center justify-center h-full space-y-4">
+                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+                    <p class="text-sm text-muted-foreground">Waiting for authentication...</p>
+                </div>
+            }
+        >
+            {props.children}
+        </Show>
+    );
+};

src/components/EmbedLayout.tsx

@@ -0,0 +1,17 @@
+import { type Component, type JSX } from "solid-js";
+
+interface EmbedLayoutProps {
+    children: JSX.Element;
+}
+
+export const EmbedLayout: Component<EmbedLayoutProps> = (props) => {
+    return (
+        <div class="flex h-screen w-full min-w-0 bg-background overflow-hidden relative font-sans antialiased text-foreground">
+            <main class="flex-1 min-w-0 overflow-y-auto overflow-x-hidden relative scroll-smooth bg-background">
+                <div class="w-full h-full mx-auto p-4">
+                    {props.children}
+                </div>
+            </main>
+        </div>
+    );
+};