yusiboyz/platform
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: brain layout — sidebar + content as flex siblings, no page wrapper

Browse Source 
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>
This commit is contained in:
Yusuf Suleman
2026-04-01 21:17:14 -05:00
parent e982b10db5
commit 5689ee1f6a
1 changed files with 32 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
View File

@@ -324,49 +324,6 @@
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">
<!-- Second sidebar (like Reader) -->
@@ -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">
@@ -521,9 +507,6 @@
</div><!-- .brain-content -->
</div><!-- .brain-layout -->
</div>
</div>
<!-- ═══ PDF/Image full-screen viewer ═══ -->
{#if selectedItem && (selectedItem.type === 'pdf' || selectedItem.type === 'image')}
<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -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 {