From 1a497a98e81592ce0f8f818507047da34d988b24 Mon Sep 17 00:00:00 2001
From: Timothy Cardoza <tcardoza@cardoza.construction>
Date: Fri, 27 Feb 2026 14:04:35 -0600
Subject: [PATCH] note specific navigation lock for embeding

---
 src/App.tsx                                 |   2 +-
 src/views/NotepadView.tsx                   |  27 ++-
 tasgrid-embed-example_and_instructions.html | 245 --------------------
 3 files changed, 17 insertions(+), 257 deletions(-)
 delete mode 100644 tasgrid-embed-example_and_instructions.html

diff --git a/src/App.tsx b/src/App.tsx
index 8082f56..ffc3f4d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -104,7 +104,7 @@ const App: Component = () => {
                 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} />;
+                return <NotepadView selectedNoteId={selectedNoteId()} setSelectedNoteId={setSelectedNoteId} hideNavigation={!!noteIdFromUrl} />;
               })()}
             </Show>
             <Show when={getEmbedView() === 'embed_quick_add'}>
diff --git a/src/views/NotepadView.tsx b/src/views/NotepadView.tsx
index df0f460..d50ff24 100644
--- a/src/views/NotepadView.tsx
+++ b/src/views/NotepadView.tsx
@@ -13,6 +13,7 @@ import { NotesSidebar } from "@/components/NotesSidebar";
 export const NotepadView: Component<{
     selectedNoteId: string | null;
     setSelectedNoteId: (id: string | null) => void;
+    hideNavigation?: boolean;
 }> = (props) => {
     const [isLinking, setIsLinking] = createSignal(false);
     const [linkSearchQuery, setLinkSearchQuery] = createSignal("");
@@ -131,12 +132,14 @@ export const NotepadView: Component<{
     return (
         <div class="flex flex-col md:flex-row h-full bg-background md:bg-card md:border md:border-border md:rounded-xl md:shadow-sm overflow-hidden relative">
             {/* Mobile Notes List */}
-            <div class={cn(
-                "md:hidden absolute inset-0 z-10 bg-card overflow-hidden flex flex-col h-full transition-all duration-200 ease-out",
-                props.selectedNoteId ? "opacity-0 pointer-events-none -translate-x-8" : "opacity-100 translate-x-0"
-            )}>
-                <NotesSidebar selectedNoteId={props.selectedNoteId} setSelectedNoteId={props.setSelectedNoteId} />
-            </div>
+            <Show when={!props.hideNavigation}>
+                <div class={cn(
+                    "md:hidden absolute inset-0 z-10 bg-card overflow-hidden flex flex-col h-full transition-all duration-200 ease-out",
+                    props.selectedNoteId ? "opacity-0 pointer-events-none -translate-x-8" : "opacity-100 translate-x-0"
+                )}>
+                    <NotesSidebar selectedNoteId={props.selectedNoteId} setSelectedNoteId={props.setSelectedNoteId} />
+                </div>
+            </Show>
 
             {/* Note Editor (Main Panel) */}
             <div class={cn(
@@ -156,11 +159,13 @@ export const NotepadView: Component<{
                                 {/* Editor Area */}
                                 <div class="flex-none md:flex-1 flex flex-col min-w-0 md:h-full overflow-visible md:overflow-y-auto relative p-4 md:p-6 space-y-4 md:space-y-6 scroll-smooth">
                                     {/* Mobile Back Button */}
-                                    <div class="md:hidden mt-2 md:mt-0 mb-2 md:mb-0">
-                                        <Button variant="ghost" size="sm" class="h-8 px-2 text-xs" onClick={() => props.setSelectedNoteId(null)}>
-                                            ← Back to Notes
-                                        </Button>
-                                    </div>
+                                    <Show when={!props.hideNavigation}>
+                                        <div class="md:hidden mt-2 md:mt-0 mb-2 md:mb-0">
+                                            <Button variant="ghost" size="sm" class="h-8 px-2 text-xs" onClick={() => props.setSelectedNoteId(null)}>
+                                                ← Back to Notes
+                                            </Button>
+                                        </div>
+                                    </Show>
                                     <div class="space-y-4">
                                         <div class="flex items-start justify-between gap-4">
                                             <input
diff --git a/tasgrid-embed-example_and_instructions.html b/tasgrid-embed-example_and_instructions.html
deleted file mode 100644
index 4e3ac05..0000000
--- a/tasgrid-embed-example_and_instructions.html
+++ /dev/null
@@ -1,245 +0,0 @@
-<!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>
\ No newline at end of file