updating iframe auth handling

src/App.tsx

@@ -26,6 +26,7 @@ const App: Component = () => {
 
   onMount(() => {
     const removeListener = pb.authStore.onChange((token) => {
+      console.log('[DEBUG] pb.authStore.onChange fired, token present:', !!token);
       setIsAuthenticated(!!token);
       if (token) {
         initStore();
@@ -56,13 +57,22 @@ const App: Component = () => {
     });
   });
 
-  // Determine if we are in an embed route
-  const isEmbed = () => window.location.pathname.startsWith('/embed/');
-  const embedView = () => {
+  // Determine if we are in an embed route (check both path and hash for compatibility)
+  const isEmbed = () => {
     const path = window.location.pathname;
-    if (path.includes('/notes')) return 'embed_notes';
-    if (path.includes('/quick-add')) return 'embed_quick_add';
-    return null;
+    const hash = window.location.hash;
+    const res = path.startsWith('/embed/') || hash.startsWith('#/embed/');
+    console.log('[DEBUG] isEmbed check:', { res, path, hash, href: window.location.href });
+    return res;
+  };
+
+  const getEmbedView = () => {
+    const fullPath = window.location.pathname + window.location.hash;
+    let view = null;
+    if (fullPath.includes('/notes')) view = 'embed_notes';
+    else if (fullPath.includes('/quick-add')) view = 'embed_quick_add';
+    console.log('[DEBUG] getEmbedView detected:', view, 'Full URL context:', fullPath);
+    return view;
   };
 
   return (
@@ -89,10 +99,10 @@ const App: Component = () => {
       <EmbedAuthWrapper>
         <EmbedLayout>
           <Suspense fallback={<div class="flex items-center justify-center h-full"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div></div>}>
-            <Show when={embedView() === "embed_notes"}>
+            <Show when={getEmbedView() === "embed_notes"}>
               <EmbedNotesView />
             </Show>
-            <Show when={embedView() === "embed_quick_add"}>
+            <Show when={getEmbedView() === "embed_quick_add"}>
               <EmbedQuickAddView />
             </Show>
           </Suspense>

src/components/EmbedAuthWrapper.tsx

@@ -1,6 +1,5 @@
 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;
@@ -10,24 +9,18 @@ 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;
+        console.log('[DEBUG] EmbedAuthWrapper received message:', data?.type);
         if (data?.type === "TASGRID_AUTH" && data.token) {
-            console.log("Received TasGrid auth payload via postMessage");
-
-            // Hydrate PocketBase auth store
+            console.log("[DEBUG] Received TasGrid auth payload, hydrating...");
+            // Save triggers pb.authStore.onChange, which App.tsx is already listening to and calling initStore()
             pb.authStore.save(data.token, data.user || null);
-
-            // Re-initialize store with new auth context
-            initStore().then(() => {
-                setIsHydrated(true);
-            });
+            setIsHydrated(true);
         }
     };
 
     onMount(() => {
+        console.log('[DEBUG] EmbedAuthWrapper mounted. Initial isHydrated:', isHydrated());
         window.addEventListener("message", handleMessage);
     });
 

test-embed.html

@@ -129,6 +129,35 @@
             <input type="text" id="token" class="manual-token" placeholder="Paste PB Token here...">
             <button class="send-manual" onclick="sendAuthFromInput()">Send Manual Token</button>
         </div>
+
+        <div id="docs-section" style="margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px;">
+            <details>
+                <summary style="cursor: pointer; font-weight: bold; color: #007bff;">Developer Integration Guide
+                </summary>
+                <div style="font-size: 14px; line-height: 1.6; margin-top: 15px;">
+                    <p><strong>1. Available Routes:</strong></p>
+                    <ul>
+                        <li><code>/embed/notes</code>: Renders the full notepad/editor.</li>
+                        <li><code>/embed/quick-add</code>: Renders a standalone task creation form.</li>
+                    </ul>
+
+                    <p><strong>2. Authentication Protocol:</strong></p>
+                    <p>The parent application must send a <code>postMessage</code> to the iframe immediately after the
+                        iframe loads (or whenever auth state changes).</p>
+                    <pre
+                        style="background: #f8f9fa; padding: 15px; border-radius: 4px; border: 1px solid #e9ecef; overflow-x: auto;">
+iframe.contentWindow.postMessage({
+  type: "TASGRID_AUTH",
+  token: "YOUR_POCKETBASE_TOKEN",
+  user: { /* optional PB user record */ }
+}, "*");</pre>
+
+                    <p><strong>3. Responsiveness:</strong></p>
+                    <p>Both routes are designed to be fluid. Ensure your iframe container has defined dimensions; the
+                        content will expand to fill it.</p>
+                </div>
+            </details>
+        </div>
     </div>
 
     <div class="container">
@@ -138,7 +167,7 @@
                 <span>Notes Embed</span>
                 <code style="font-size: 10px;">/embed/notes</code>
             </div>
-            <iframe id="notes-iframe" src="http://localhost:5173/embed/notes"></iframe>
+            <iframe id="notes-iframe" src="http://localhost:4000/embed/notes"></iframe>
         </div>
 
         <div class="iframe-container">
@@ -147,7 +176,7 @@
                 <span>Quick Add Embed</span>
                 <code style="font-size: 10px;">/embed/quick-add</code>
             </div>
-            <iframe id="quick-add-iframe" src="http://localhost:5173/embed/quick-add"></iframe>
+            <iframe id="quick-add-iframe" src="http://localhost:4000/embed/quick-add"></iframe>
         </div>
     </div>