v2

public/app.html

@@ -18,11 +18,29 @@
           <span class="spark">✨</span>
           <span>Spark<span class="gradient-text">Slop</span></span>
         </a>
-        <a href="/" class="btn btn-ghost btn-sm">← Home</a>
+        <div class="nav-right" id="nav-right">
+          <a href="/explore" class="btn btn-ghost btn-sm">🌐 Explore</a>
+          <!-- user chip injected here when signed in -->
+        </div>
       </div>
     </nav>
 
-    <main class="app-main">
+    <!-- Login gate (shown when not authenticated) -->
+    <div class="login-gate" id="login-gate" hidden>
+      <div class="login-card">
+        <span class="spark big">✨</span>
+        <h1>Sign in to Spark Slop</h1>
+        <p>Your ideas are private to your account. Sign in to continue.</p>
+        <div class="provider-buttons" id="provider-buttons"></div>
+        <p class="login-error" id="login-error" hidden></p>
+        <p class="login-note" id="login-note" hidden>
+          No login providers are configured yet. See the README to set up
+          GitHub or Google OAuth.
+        </p>
+      </div>
+    </div>
+
+    <main class="app-main" id="app-main" hidden>
       <div class="container">
         <div class="app-header">
           <div>
@@ -32,7 +50,6 @@
         </div>
 
         <div class="layout">
-          <!-- Left: new idea + list -->
           <div>
             <div class="panel" style="margin-bottom: 20px">
               <h2>New idea</h2>
@@ -67,7 +84,6 @@
             </div>
           </div>
 
-          <!-- Right: detail + notes -->
           <div class="panel" id="detail-panel">
             <div class="empty" id="detail-empty">
               <span class="big">👈</span>
@@ -79,7 +95,7 @@
     </main>
 
     <div class="toast" id="toast"></div>
-
+    <script src="/common.js"></script>
     <script src="/app.js"></script>
   </body>
 </html>