From 5689ee1f6a8866400ad2e7c127e28989c4b169cc Mon Sep 17 00:00:00 2001
From: Yusuf Suleman <yusuf@quadjourney.com>
Date: Wed, 1 Apr 2026 21:17:14 -0500
Subject: [PATCH] =?UTF-8?q?fix:=20brain=20layout=20=E2=80=94=20sidebar=20+?=
 =?UTF-8?q?=20content=20as=20flex=20siblings,=20no=20page=20wrapper?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Template restructured to match Reader pattern:
brain-layout (flex) > brain-sidebar (248px) + brain-content (flex:1)
Hero and capture bar moved inside brain-content.
Removed page/app-surface wrappers.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../lib/pages/brain/AtelierBrainPage.svelte   | 82 ++++++++-----------
 1 file changed, 32 insertions(+), 50 deletions(-)

diff --git a/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte b/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
index 8e8795f..1c8589c 100644
--- a/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
+++ b/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
@@ -324,50 +324,7 @@
   onDestroy(stopPolling);
 </script>
 
-<div class="page">
-  <div class="app-surface">
-
-    <!-- ═══ Hero ═══ -->
-    <section class="brain-command reveal">
-      <div class="command-copy">
-        <div class="command-label">Second brain</div>
-        <h1>Brain</h1>
-        <p>Save anything. Links, notes, files. AI classifies everything automatically so you can find it later without thinking about where to put it.</p>
-      </div>
-      <div class="command-actions">
-        <div class="command-kicker">Collection</div>
-        <div class="command-stats">{total} saved · {sidebarFolders.length} folders</div>
-      </div>
-    </section>
-
-    <!-- ═══ Capture bar ═══ -->
-    <section class="capture-card reveal">
-      <div class="capture-wrap">
-        <svg class="capture-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-        <input
-          class="capture-input"
-          placeholder="Paste a URL or type a note to save..."
-          bind:value={captureInput}
-          onkeydown={handleCaptureKey}
-          disabled={capturing}
-        />
-        <button class="upload-btn" onclick={() => fileInput?.click()} disabled={uploading} title="Upload file">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-        </button>
-        {#if captureInput.trim()}
-          <button class="capture-btn" onclick={capture} disabled={capturing}>
-            {capturing ? 'Saving...' : 'Save'}
-          </button>
-        {/if}
-      </div>
-      <input bind:this={fileInput} type="file" class="hidden-input" accept=".pdf,.png,.jpg,.jpeg,.gif,.webp,.txt,.md,.csv" onchange={uploadFile} multiple />
-      {#if uploading}
-        <div class="upload-status">Uploading...</div>
-      {/if}
-    </section>
-
-    <!-- ═══ Sidebar + Main layout ═══ -->
-    <div class="brain-layout">
+<div class="brain-layout">
 
       <!-- Second sidebar (like Reader) -->
       <aside class="brain-sidebar">
@@ -408,6 +365,35 @@
 
       <!-- Main content -->
       <div class="brain-content">
+        <!-- Hero -->
+        <section class="brain-command reveal">
+          <div class="command-copy">
+            <div class="command-label">Second brain</div>
+            <h1>Brain</h1>
+            <p>Save anything. Links, notes, files. AI classifies everything automatically.</p>
+          </div>
+          <div class="command-actions">
+            <div class="command-kicker">Collection</div>
+            <div class="command-stats">{total} saved</div>
+          </div>
+        </section>
+
+        <!-- Capture bar -->
+        <section class="capture-card reveal">
+          <div class="capture-wrap">
+            <svg class="capture-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+            <input class="capture-input" placeholder="Paste a URL or type a note to save..." bind:value={captureInput} onkeydown={handleCaptureKey} disabled={capturing} />
+            <button class="upload-btn" onclick={() => fileInput?.click()} disabled={uploading} title="Upload file">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+            </button>
+            {#if captureInput.trim()}
+              <button class="capture-btn" onclick={capture} disabled={capturing}>{capturing ? 'Saving...' : 'Save'}</button>
+            {/if}
+          </div>
+          <input bind:this={fileInput} type="file" class="hidden-input" accept=".pdf,.png,.jpg,.jpeg,.gif,.webp,.txt,.md,.csv" onchange={uploadFile} multiple />
+          {#if uploading}<div class="upload-status">Uploading...</div>{/if}
+        </section>
+
         <!-- Active filter indicator -->
         {#if activeFolder || activeTag}
         <div class="active-filter">
@@ -519,10 +505,7 @@
     {/if}
 
       </div><!-- .brain-content -->
-    </div><!-- .brain-layout -->
-
-  </div>
-</div>
+</div><!-- .brain-layout -->
 
 <!-- ═══ PDF/Image full-screen viewer ═══ -->
 {#if selectedItem && (selectedItem.type === 'pdf' || selectedItem.type === 'image')}
@@ -674,8 +657,7 @@
 {/if}
 
 <style>
-  .page { padding-top: 0; }
-  .app-surface { max-width: 1360px; }
+  /* No .page wrapper — brain-layout is the root */
 
   /* ═══ Command hero ═══ */
   .brain-command {