fixed bad commit and reverted prior to create note. Also added note id linking for iframe

2026-02-27 13:53:08 -06:00
parent ef935ac37b
commit b59e2c2187
4 changed files with 272 additions and 109 deletions
@@ -101,7 +101,9 @@ const App: Component = () => {
          <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={getEmbedView() === 'embed_notes'}>
              {(() => {
-                const [selectedNoteId, setSelectedNoteId] = createSignal<string | null>(null);
+                const searchParams = new URLSearchParams(window.location.search);
+                const noteIdFromUrl = searchParams.get('noteId');
+                const [selectedNoteId, setSelectedNoteId] = createSignal<string | null>(noteIdFromUrl);
                return <NotepadView selectedNoteId={selectedNoteId()} setSelectedNoteId={setSelectedNoteId} />;
              })()}
            </Show>
@@ -5,52 +5,18 @@ interface EmbedAuthWrapperProps {
    children: JSX.Element;
 }

-import { NOTES_COLLECTION } from "@/lib/constants";
-
 export const EmbedAuthWrapper: Component<EmbedAuthWrapperProps> = (props) => {
    const [isHydrated, setIsHydrated] = createSignal(pb.authStore.isValid);

-    const handleMessage = async (event: MessageEvent) => {
+    const handleMessage = (event: MessageEvent) => {
        const { data } = event;
        console.log('[DEBUG] EmbedAuthWrapper received message:', data?.type);
-
        if (data?.type === "TASGRID_AUTH" && data.token) {
            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);
            setIsHydrated(true);
        }
-
-        if (data?.type === "TASGRID_CREATE_NOTE") {
-            const currentUserId = pb.authStore.model?.id;
-            if (!currentUserId) {
-                console.warn("[DEBUG] Rejecting note creation: Not authenticated");
-                return;
-            }
-
-            try {
-                const noteData = data.note || {};
-                const result = await pb.collection(NOTES_COLLECTION).create({
-                    title: noteData.title || "New Note",
-                    content: noteData.content || "",
-                    tags: noteData.tags || [],
-                    isPrivate: noteData.isPrivate === true,
-                    user: currentUserId,
-                });
-
-                console.log("[DEBUG] Note created via API:", result.id);
-
-                // Respond back to parent
-                if (window.parent !== window) {
-                    window.parent.postMessage({
-                        type: "TASGRID_NOTE_CREATED",
-                        noteId: result.id,
-                        title: result.title
-                    }, "*");
-                }
-            } catch (e) {
-                console.error("Failed to create note via API", e);
-            }
-        }
    };

    onMount(() => {
@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TasGrid Parent App Simulator</title>
+    <style>
+        body {
+            font-family: system-ui;
+            padding: 20px;
+            background: #f4f4f5;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .container {
+            display: flex;
+            gap: 20px;
+            margin-top: 20px;
+        }
+
+        .iframe-container {
+            flex: 1;
+            border: 1px solid #ddd;
+            background: white;
+            border-radius: 8px;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            height: 600px;
+        }
+
+        .controls {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            border: 1px solid #ddd;
+            margin-bottom: 20px;
+        }
+
+        .login-form {
+            display: grid;
+            gap: 10px;
+            max-width: 400px;
+        }
+
+        .login-form input {
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+
+        .login-form button {
+            padding: 10px;
+            background: #007bff;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: bold;
+        }
+
+        .login-form button:hover {
+            background: #0056b3;
+        }
+
+        .status {
+            margin-top: 10px;
+            padding: 10px;
+            border-radius: 4px;
+            display: none;
+        }
+
+        .status.success {
+            background: #d4edda;
+            color: #155724;
+            display: block;
+        }
+
+        .status.error {
+            background: #f8d7da;
+            color: #721c24;
+            display: block;
+        }
+
+        iframe {
+            border: none;
+            width: 100%;
+            height: 100%;
+        }
+
+        button.send-manual {
+            padding: 8px 16px;
+            cursor: pointer;
+            margin-top: 10px;
+        }
+
+        input.manual-token {
+            padding: 8px;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        h1 {
+            margin-top: 0;
+        }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/pocketbase/dist/pocketbase.umd.js"></script>
+</head>
+
+<body>
+    <h1>TasGrid Parent App Simulator</h1>
+
+    <div class="controls">
+        <div id="login-section">
+            <h3>Login to Parent Application</h3>
+            <p>This simulates the parent application authenticating with the shared backend.</p>
+            <div class="login-form">
+                <input type="email" id="email" placeholder="Email" value="">
+                <input type="password" id="password" placeholder="Password" value="">
+                <button onclick="login()">Login & Sync Iframes</button>
+            </div>
+            <div id="status" class="status"></div>
+        </div>
+
+        <div id="manual-section" style="margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px;">
+            <p style="font-size: 13px; color: #666;">Or send a token manually:</p>
+            <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">
+        <div class="iframe-container">
+            <div
+                style="padding: 10px; background: #eee; border-bottom: 1px solid #ddd; font-weight: bold; font-size: 12px; display: flex; justify-content: space-between;">
+                <span>Notes Embed</span>
+                <code style="font-size: 10px;">/embed/notes</code>
+            </div>
+            <iframe id="notes-iframe" src="http://localhost:4000/embed/notes"></iframe>
+        </div>
+
+        <div class="iframe-container">
+            <div
+                style="padding: 10px; background: #eee; border-bottom: 1px solid #ddd; font-weight: bold; font-size: 12px; display: flex; justify-content: space-between;">
+                <span>Quick Add Embed</span>
+                <code style="font-size: 10px;">/embed/quick-add</code>
+            </div>
+            <iframe id="quick-add-iframe" src="http://localhost:4000/embed/quick-add"></iframe>
+        </div>
+    </div>
+
+    <script>
+        const pb = new PocketBase('https://pocketbase.ccllc.pro');
+        const statusEl = document.getElementById('status');
+
+        async function login() {
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+
+            statusEl.className = 'status';
+            statusEl.textContent = 'Logging in...';
+            statusEl.style.display = 'block';
+
+            try {
+                const authData = await pb.collection('users').authWithPassword(email, password);
+
+                statusEl.className = 'status success';
+                statusEl.textContent = `Logged in as ${authData.record.email}! Syncing iframes...`;
+
+                // Automatically send auth to iframes
+                sendAuth(pb.authStore.token, authData.record);
+            } catch (err) {
+                statusEl.className = 'status error';
+                statusEl.textContent = 'Login failed: ' + err.message;
+            }
+        }
+
+        function sendAuthFromInput() {
+            const token = document.getElementById('token').value;
+            if (!token) {
+                alert("Please enter a token first");
+                return;
+            }
+            sendAuth(token, null);
+        }
+
+        function sendAuth(token, user) {
+            const payload = {
+                type: "TASGRID_AUTH",
+                token: token,
+                user: user
+            };
+
+            const notesIframe = document.getElementById('notes-iframe').contentWindow;
+            const quickAddIframe = document.getElementById('quick-add-iframe').contentWindow;
+
+            console.log("Sending auth to iframes...", payload);
+            notesIframe.postMessage(payload, "*");
+            quickAddIframe.postMessage(payload, "*");
+        }
+
+        // Handle case where user refreshed but is still logged in to the parent
+        window.addEventListener('load', () => {
+            if (pb.authStore.isValid && pb.authStore.model) {
+                document.getElementById('email').value = pb.authStore.model.email || "";
+                statusEl.className = 'status success';
+                statusEl.textContent = 'Session restored. Click login or send manual token to sync.';
+                statusEl.style.display = 'block';
+            }
+        });
+    </script>
+</body>
+
+</html>
@@ -124,21 +124,15 @@
            <div id="status" class="status"></div>
        </div>

-        <div id="api-section" style="margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px;">
-            <h3>Note Creation API</h3>
-            <div style="display: flex; gap: 10px; align-items: center;">
-                <button class="send-manual" onclick="createNote()"
-                    style="margin-top: 0; background: #28a745; color: white; border: none; border-radius: 4px; padding: 10px 15px; font-weight: bold; cursor: pointer;">Create
-                    Sample Note</button>
-                <div id="api-status" style="font-size: 12px; color: #666;"></div>
-            </div>
-            <div id="api-result"
-                style="margin-top: 10px; font-family: monospace; font-size: 11px; background: #eee; padding: 10px; border-radius: 4px; display: none; word-break: break-all;">
-            </div>
+        <div id="manual-section" style="margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px;">
+            <p style="font-size: 13px; color: #666;"><strong>Test Deep Linking:</strong></p>
+            <div style="display: flex; gap: 10px; margin-bottom: 10px;">
+                <input type="text" id="note-id-input" style="flex: 1; padding: 8px;"
+                    placeholder="Paste Note ID here...">
+                <button onclick="loadSpecificNote()" style="padding: 8px 16px; cursor: pointer;">Load Note</button>
            </div>

-        <div id="manual-section" style="margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px;">
-            <p style="font-size: 13px; color: #666;">Or send a token manually:</p>
+            <p style="font-size: 13px; color: #666; margin-top: 20px;"><strong>Manual Auth:</strong></p>
            <input type="text" id="token" class="manual-token" placeholder="Paste PB Token here...">
            <button class="send-manual" onclick="sendAuthFromInput()">Send Manual Token</button>
        </div>
@@ -151,6 +145,7 @@
                    <p><strong>1. Available Routes:</strong></p>
                    <ul>
                        <li><code>/embed/notes</code>: Renders the full notepad/editor.</li>
+                        <li><code>/embed/notes?noteId=XXX</code>: Renders a specific note directly.</li>
                        <li><code>/embed/quick-add</code>: Renders a standalone task creation form.</li>
                    </ul>

@@ -165,28 +160,9 @@ iframe.contentWindow.postMessage({
  user: { /* optional PB user record */ }
 }, "*");</pre>

-                    <p><strong>4. Note Creation API (TASGRID_CREATE_NOTE):</strong></p>
-                    <p>Trigger note creation from the parent app. TasGrid will respond with
-                        <code>TASGRID_NOTE_CREATED</code>.</p>
-                    <pre
-                        style="background: #f8f9fa; padding: 15px; border-radius: 4px; border: 1px solid #e9ecef; overflow-x: auto;">
-// Request
-iframe.contentWindow.postMessage({
-  type: "TASGRID_CREATE_NOTE",
-  note: {
-    title: "Project Alpha",
-    content: "Initial requirements...",
-    tags: ["Project", "2024"],
-    isPrivate: false
-  }
-}, "*");
-
-// Response Listener
-window.addEventListener("message", (event) => {
-  if (event.data.type === "TASGRID_NOTE_CREATED") {
-    console.log("New Note ID:", event.data.noteId);
-  }
-});</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>
@@ -216,6 +192,16 @@ window.addEventListener("message", (event) => {
        const pb = new PocketBase('https://pocketbase.ccllc.pro');
        const statusEl = document.getElementById('status');

+        function loadSpecificNote() {
+            const id = document.getElementById('note-id-input').value.trim();
+            const iframe = document.getElementById('notes-iframe');
+            if (id) {
+                iframe.src = `http://localhost:4000/embed/notes?noteId=${id}`;
+            } else {
+                iframe.src = `http://localhost:4000/embed/notes`;
+            }
+        }
+
        async function login() {
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
@@ -262,42 +248,6 @@ window.addEventListener("message", (event) => {
            quickAddIframe.postMessage(payload, "*");
        }

-        async function createNote() {
-            const apiStatus = document.getElementById('api-status');
-            const apiResult = document.getElementById('api-result');
-
-            apiStatus.textContent = "Sending creation request...";
-            apiResult.style.display = 'none';
-
-            const payload = {
-                type: "TASGRID_CREATE_NOTE",
-                note: {
-                    title: "Test Note from Parent " + new Date().toLocaleTimeString(),
-                    content: "This note was created automatically via the postMessage API.",
-                    tags: ["API-TEST", "SISTER-APP"],
-                    isPrivate: false
-                }
-            };
-
-            // We can send to either iframe since EmbedAuthWrapper handles it globally for all embedded views
-            document.getElementById('notes-iframe').contentWindow.postMessage(payload, "*");
-        }
-
-        // Listen for responses
-        window.addEventListener("message", (event) => {
-            const { data } = event;
-            console.log("Parent received message:", data);
-
-            if (data.type === "TASGRID_NOTE_CREATED") {
-                const apiStatus = document.getElementById('api-status');
-                const apiResult = document.getElementById('api-result');
-
-                apiStatus.innerHTML = `<span style="color: green; font-weight: bold;">Note Created! ID: ${data.noteId}</span>`;
-                apiResult.textContent = JSON.stringify(data, null, 2);
-                apiResult.style.display = 'block';
-            }
-        });
-
        // Handle case where user refreshed but is still logged in to the parent
        window.addEventListener('load', () => {
            if (pb.authStore.isValid && pb.authStore.model) {