Mirror lane picker into the Account page

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>
This commit is contained in:
jay
2026-06-06 18:26:38 +00:00
parent 722bcf6317
commit 978edc8f4a
2 changed files with 79 additions and 51 deletions
+20 -1
View File
@@ -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'}