From 978edc8f4a9427fd1e08666e3e203fafeed2eb64 Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Sat, 6 Jun 2026 18:26:38 +0000
Subject: [PATCH] Mirror lane picker into the Account page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a "Lanes" section under Account that reuses LanePicker inline, completing
the round trip with Boundaries. Refactor LanePicker to support an `inline`
variant (bare panel vs modal) and apply changes immediately on toggle — so the
account panel needs no explicit save and the home modal now previews the nav
rail live as you pick. Selection still persists through the shared prefs store.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/LanePicker.svelte | 109 ++++++++++--------
 frontend/src/routes/account/+page.svelte      |  21 +++-
 2 files changed, 79 insertions(+), 51 deletions(-)

diff --git a/frontend/src/lib/components/LanePicker.svelte b/frontend/src/lib/components/LanePicker.svelte
index 914b20a..9da28c6 100644
--- a/frontend/src/lib/components/LanePicker.svelte
+++ b/frontend/src/lib/components/LanePicker.svelte
@@ -1,71 +1,76 @@
 <script>
   // pool: { pinned, default, groups:[{name, lanes:[{key,label,description,count?}]}] }
   // selected: array of currently-pinned lane keys (excludes the always-on 'today')
-  let { pool, selected, onsave, onclose } = $props();
+  // onsave(keys): called on every change — selection persists immediately, so the
+  //   nav rail updates live behind the modal and the account panel needs no "save".
+  // inline: render as a bare panel (account page) instead of a modal overlay.
+  let { pool, selected, onsave, onclose, inline = false } = $props();
 
-  // Work on a local copy; only commit on Done.
-  let chosen = $state(new Set(selected ?? []));
+  let chosen = $derived(new Set(selected ?? []));
+  // The pool's natural order, so the rail always reads predictably.
+  let order = $derived((pool?.groups ?? []).flatMap((g) => g.lanes.map((l) => l.key)));
 
   function toggle(key) {
-    if (chosen.has(key)) chosen.delete(key);
-    else chosen.add(key);
-    chosen = new Set(chosen); // reassign so Svelte re-renders
+    const next = new Set(chosen);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    onsave?.(order.filter((k) => next.has(k)));
   }
   function resetDefault() {
-    chosen = new Set(pool?.default ?? []);
-  }
-  function done() {
-    // Preserve each group's natural order so the rail reads predictably.
-    const order = [];
-    for (const g of pool?.groups ?? []) for (const l of g.lanes) order.push(l.key);
-    onsave?.(order.filter((k) => chosen.has(k)));
-    onclose?.();
+    onsave?.([...(pool?.default ?? [])]);
   }
   function onkey(e) {
     if (e.key === 'Escape') onclose?.();
   }
 </script>
 
+{#snippet body()}
+  <h2>Your lanes</h2>
+  <p class="sub">Pick the quick-access lanes above the feed. <strong>Today</strong> always stays — choose the rest. Changes apply right away.</p>
+
+  <div class="pinned-row">
+    <span class="chip pinned" title="Always shown">Today <span class="lock">📌</span></span>
+  </div>
+
+  {#each pool?.groups ?? [] as g (g.name)}
+    {#if g.lanes.length}
+      <div class="group">
+        <span class="label">{g.name}</span>
+        <div class="chips">
+          {#each g.lanes as l (l.key)}
+            <button
+              type="button"
+              class="chip"
+              class:on={chosen.has(l.key)}
+              title={l.description ?? ''}
+              onclick={() => toggle(l.key)}
+            >
+              {l.label}{#if l.count > 0}<small>{l.count}</small>{/if}
+            </button>
+          {/each}
+        </div>
+      </div>
+    {/if}
+  {/each}
+
+  <div class="actions">
+    <button class="reset" onclick={resetDefault}>Reset to default</button>
+    {#if !inline}<button class="primary" onclick={onclose}>Done</button>{/if}
+  </div>
+{/snippet}
+
 <svelte:window onkeydown={onkey} />
 
-<div class="overlay" onclick={onclose} role="presentation">
-  <div class="sheet rise" role="dialog" aria-modal="true" aria-label="Customize lanes" onclick={(e) => e.stopPropagation()}>
-    <button class="x" onclick={onclose} aria-label="Close">×</button>
-
-    <h2>Your lanes</h2>
-    <p class="sub">Pick the quick-access lanes above the feed. <strong>Today</strong> always stays — choose the rest.</p>
-
-    <div class="pinned-row">
-      <span class="chip pinned" title="Always shown">Today <span class="lock">📌</span></span>
-    </div>
-
-    {#each pool?.groups ?? [] as g (g.name)}
-      {#if g.lanes.length}
-        <div class="group">
-          <span class="label">{g.name}</span>
-          <div class="chips">
-            {#each g.lanes as l (l.key)}
-              <button
-                type="button"
-                class="chip"
-                class:on={chosen.has(l.key)}
-                title={l.description ?? ''}
-                onclick={() => toggle(l.key)}
-              >
-                {l.label}{#if l.count > 0}<small>{l.count}</small>{/if}
-              </button>
-            {/each}
-          </div>
-        </div>
-      {/if}
-    {/each}
-
-    <div class="actions">
-      <button class="reset" onclick={resetDefault}>Reset to default</button>
-      <button class="primary" onclick={done}>Done</button>
+{#if inline}
+  <section class="panel rise">{@render body()}</section>
+{:else}
+  <div class="overlay" onclick={onclose} role="presentation">
+    <div class="sheet rise" role="dialog" aria-modal="true" aria-label="Customize lanes" onclick={(e) => e.stopPropagation()}>
+      <button class="x" onclick={onclose} aria-label="Close">×</button>
+      {@render body()}
     </div>
   </div>
-</div>
+{/if}
 
 <style>
   .overlay {
@@ -77,6 +82,10 @@
     box-shadow: var(--shadow); width: 100%; max-width: 480px; padding: 26px 24px 20px;
     position: relative; max-height: 86vh; overflow-y: auto;
   }
+  .panel {
+    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
+    box-shadow: var(--shadow); padding: 22px 22px 18px;
+  }
   .x { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; }
   h2 { font-size: 1.4rem; margin: 0 0 6px; }
   .sub { margin: 0 0 16px; color: var(--muted); font-size: 0.92rem; }
diff --git a/frontend/src/routes/account/+page.svelte b/frontend/src/routes/account/+page.svelte
index 54da7ee..9458248 100644
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -9,6 +9,7 @@
   import { openFeedback } from '$lib/feedback.svelte.js';
   import AccountPanel from '$lib/components/AccountPanel.svelte';
   import BoundariesPanel from '$lib/components/BoundariesPanel.svelte';
+  import LanePicker from '$lib/components/LanePicker.svelte';
   import ArticleCard from '$lib/components/ArticleCard.svelte';
 
   let section = $derived($page.url.searchParams.get('section') || 'profile');
@@ -16,11 +17,13 @@
 
   let savedItems = $state([]);
   let savedReady = $state(false);
+  let lanePool = $state(null);
 
   const SECTIONS = [
     { key: 'profile', label: 'Profile' },
     { key: 'saved', label: 'Saved' },
     { key: 'history', label: 'History' },
+    { key: 'lanes', label: 'Lanes' },
     { key: 'boundaries', label: 'Boundaries' },
   ];
 
@@ -29,8 +32,17 @@
     initPrefs();
     initHistory();
     if (auth.user) loadServerHistory();
+    try { lanePool = await getJSON('/api/lanes'); } catch { lanePool = null; }
   });
 
+  let pinnedLaneKeys = $derived(
+    prefs.data.lanes?.length ? prefs.data.lanes : (lanePool?.default ?? [])
+  );
+  function saveLanes(keys) {
+    prefs.data.lanes = keys;
+    persistPrefs();
+  }
+
   // Load the saved grid when entering that section while signed in.
   $effect(() => {
     if (section === 'saved' && auth.user && !savedReady) {
@@ -64,7 +76,14 @@
   </nav>
 
   <div class="content">
-    {#if section === 'boundaries'}
+    {#if section === 'lanes'}
+      {#if lanePool}
+        <LanePicker inline pool={lanePool} selected={pinnedLaneKeys} onsave={saveLanes} />
+      {:else}
+        <p class="muted">Loading…</p>
+      {/if}
+
+    {:else if section === 'boundaries'}
       <BoundariesPanel prefs={prefs.data} onchange={persistPrefs} />
 
     {:else if section === 'history'}