@hearthlog/shell 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hearthlog/shell",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Hearthlog's application shell: layout and navigation, the log panel and history, the calendar, sync status, and the pages the host serves",
   "license": "AGPL-3.0-only",
   "repository": {
@@ -33,10 +33,10 @@
     "@tanstack/svelte-table": "^9.2.4",
     "bits-ui": "^2.19.3",
     "date-fns": "^4.4.0",
-    "@hearthlog/czech": "0.2.0",
-    "@hearthlog/runtime": "0.2.0",
-    "@hearthlog/contracts": "0.2.0",
-    "@hearthlog/ui": "0.2.0"
+    "@hearthlog/runtime": "0.3.0",
+    "@hearthlog/ui": "0.3.0",
+    "@hearthlog/contracts": "0.3.0",
+    "@hearthlog/czech": "0.3.0"
   },
   "peerDependencies": {
     "svelte": "^5.57.1",

package/src/app.template.html

@@ -137,7 +137,7 @@
             })();
         </script>
         <style>
-            :root{--boot-bg:var(--stor-bg);--boot-border:var(--stor-border);--boot-sidebar-width:var(--stor-sidebar-width,224px);--boot-sidebar-margin:12px;--boot-sidebar-radius:20px}
+            :root{--boot-bg:var(--stor-bg);--boot-border:var(--stor-border);--boot-sidebar-width:var(--stor-sidebar-width,224px);--boot-sidebar-margin:0px;--boot-sidebar-radius:0px;--boot-page-margin:12px;--boot-page-radius:20px}
             html[data-sidebar-collapsed="true"]{--boot-sidebar-width:80px}html,body{margin:0;min-width:320px;background:var(--boot-bg)}
             /* Shared with NavBar: branding must keep the same geometry before and after mount. */
             :root{--stor-font-sans:'Inter Variable',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--stor-font-mono:'Fira Code Variable',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace}
@@ -147,6 +147,8 @@
             .stor-wordmark{white-space:nowrap}.stor-wordmark .stor-mark{margin:0 .03em}
             #stor-boot-shell{position:fixed;inset:0;z-index:9998;background:var(--boot-bg);font:14px/1.5 var(--stor-font-sans);color:var(--stor-ink)}
             .stor-boot-sidebar{position:absolute;left:var(--boot-sidebar-margin);top:var(--boot-sidebar-margin);bottom:var(--boot-sidebar-margin);width:var(--boot-sidebar-width);background:var(--stor-sidebar);border:0;border-radius:var(--boot-sidebar-radius);box-shadow:var(--stor-sidebar-shadow);box-sizing:border-box;overflow:hidden}
+            /* The page panel beside the sidebar, as Layout draws it from the rail up. */
+            .stor-boot-page{position:absolute;left:calc(var(--boot-sidebar-width) + 2 * var(--boot-sidebar-margin));top:var(--boot-page-margin);right:var(--boot-page-margin);bottom:var(--boot-page-margin);border-radius:var(--boot-page-radius);background:var(--stor-surface);box-shadow:var(--stor-elevation-1)}
             .stor-boot-brandbar{height:72px;display:flex;gap:12px;align-items:center;padding:0 14px;box-sizing:border-box}
             html[data-sidebar-collapsed="true"] .stor-boot-brandbar{justify-content:center;padding:0 8px}
             .stor-boot-mark{display:none}
@@ -162,7 +164,7 @@
             html[data-stor-shell="mac"]:not([data-sidebar-collapsed="true"]) .stor-boot-brandbar{height:52px;padding-left:76px}
             /* The Mac sidebar shows no brand; the bar stays to hold the drag space under the window controls. */
             html[data-stor-shell="mac"] .stor-boot-brandbar>*{display:none}
-            @media(max-width:767px){.stor-brand-logo{font-size:28px}.stor-boot-sidebar{display:none}.stor-boot-mobile-head{display:flex;align-items:center;box-sizing:border-box;height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0;background:var(--stor-bg)}.stor-boot-mobile-nav{display:block;position:absolute;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));height:64px;background:var(--stor-surface-raised);border-radius:24px;box-shadow:var(--stor-shadow-md)}.stor-boot-recovery{left:16px;right:16px;bottom:84px}}
+            @media(max-width:767px){.stor-brand-logo{font-size:28px}.stor-boot-sidebar,.stor-boot-page{display:none}.stor-boot-mobile-head{display:flex;align-items:center;box-sizing:border-box;height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0;background:var(--stor-bg)}.stor-boot-mobile-nav{display:block;position:absolute;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));height:64px;background:var(--stor-surface-raised);border-radius:24px;box-shadow:var(--stor-shadow-md)}.stor-boot-recovery{left:16px;right:16px;bottom:84px}}
             @media(max-width:359px){.stor-boot-mobile-title{display:none}}@media(min-width:360px){.stor-boot-mobile-head .stor-brand-logo{display:none}}
         </style>
         %sveltekit.head%
@@ -170,6 +172,7 @@
     <body data-sveltekit-preload-code="hover">
         <div id="stor-boot-shell" inert aria-hidden="true">
             <aside class="stor-boot-sidebar"><div class="stor-boot-brandbar"><span class="stor-boot-title stor-brand-title">%%BRAND_WORDMARK%%</span><span class="stor-boot-mark stor-brand-logo"><span class="stor-mark"></span></span></div></aside>
+            <div class="stor-boot-page"></div>
             <div class="stor-boot-mobile-head"><span class="stor-brand-logo"><span class="stor-mark"></span></span><span class="stor-brand-title stor-boot-mobile-title">%%BRAND_WORDMARK%%</span></div>
             <div class="stor-boot-mobile-nav"></div>
             <section class="stor-boot-recovery" aria-labelledby="stor-boot-recovery-title">

package/src/components/calendar/calendar-attention.ts

@@ -0,0 +1,15 @@
+import { differenceInCalendarDays, format, parseISO } from 'date-fns';
+import type { AttentionContribution } from '@hearthlog/contracts';
+import { queryDatabase } from '@hearthlog/runtime/db/read-repositories.js';
+
+/** The calendar's own figure in the sidebar: the next pinned date, the one its page counts down to. */
+export const calendarAttention: AttentionContribution = {
+    async figures({ today }) {
+        const [next] = await queryDatabase((repositories) => repositories.calendar.getUpcomingPinnedCalendarEvents(today, 1));
+        if (!next) return [];
+        const date = parseISO(next.event_date);
+        const days = differenceInCalendarDays(date, parseISO(today));
+        const text = days === 0 ? 'Today' : days === 1 ? 'Tomorrow' : format(date, days < 7 ? 'EEE d' : 'd MMM');
+        return [{ id: 'calendar', text, label: `next pinned: ${next.title}, ${format(date, 'EEEE d MMMM')}` }];
+    },
+};

package/src/components/layout/LastChangeBar.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    import { untrack } from "svelte";
+    import { page } from "$app/state";
+    import { navigateHistory } from "@hearthlog/runtime/history/navigation.js";
+    import IconCheck from "~icons/mdi/check-circle-outline";
+    import IconUndo from "~icons/mdi/undo-variant";
+    import IconClose from "~icons/mdi/close";
+    import { lastChange } from "./last-change.svelte.js";
+
+    let { collapsed, logId }: {
+        /** The rail is in place, so the bar centres over the narrower offset. */
+        collapsed: boolean;
+        logId: string | null;
+    } = $props();
+
+    $effect(() => lastChange.start());
+
+    // A change belongs to its log; switching logs takes it away.
+    $effect(() => {
+        void logId;
+        untrack(() => lastChange.dismiss());
+    });
+
+    // It stays while you work on the same page and leaves after two moves to other pages.
+    let moves = 0;
+    $effect(() => {
+        void lastChange.current?.batchId;
+        moves = 0;
+    });
+    $effect(() => {
+        void page.url.pathname;
+        untrack(() => {
+            if (lastChange.current && ++moves >= 2) lastChange.dismiss();
+        });
+    });
+
+    const change = $derived(lastChange.current);
+    const message = $derived.by(() => {
+        if (!change) return "";
+        if (change.state === "undoing") return "Undoing…";
+        if (change.state === "undone") return `Undid “${change.label}”.`;
+        if (change.state === "failed") return "Could not undo this change. Open History to review it.";
+        return `${change.label}.`;
+    });
+
+    function openHistory(): void {
+        const url = new URL(window.location.href);
+        url.searchParams.set("logPanel", "activity");
+        navigateHistory(url);
+        lastChange.dismiss();
+    }
+</script>
+
+{#if change}
+    <!-- From 1024px toasts stack at the bottom right, so the bar starts at the panel's left and stops short of them. -->
+    <div class="pointer-events-none fixed bottom-6 right-3 z-[var(--stor-layer-toast)] hidden justify-center md:flex lg:right-[calc(24rem+40px)] lg:justify-start lg:pl-6 {collapsed ? 'md:left-20' : 'md:left-20 lg:left-[var(--stor-sidebar-width)]'}">
+        <div class="stor-last-change pointer-events-auto" role="status" data-state={change.state}>
+            {#if change.state === "undone"}
+                <IconUndo class="h-[18px] w-[18px] shrink-0 text-[var(--stor-muted-text)]" aria-hidden="true" />
+            {:else}
+                <IconCheck class="h-[18px] w-[18px] shrink-0 text-[var(--stor-positive)]" aria-hidden="true" />
+            {/if}
+            <span class="min-w-0 flex-1 truncate">{message}</span>
+            {#if change.reversal && (change.state === "saved" || change.state === "undoing")}
+                <button type="button" class="stor-last-change-action" disabled={change.state === "undoing"} onclick={() => void lastChange.undo()}>Undo</button>
+            {/if}
+            <button type="button" class="stor-last-change-action stor-last-change-quiet" onclick={openHistory}>History</button>
+            <button type="button" class="stor-last-change-close" aria-label="Dismiss" onclick={() => lastChange.dismiss()}>
+                <IconClose class="h-4 w-4" aria-hidden="true" />
+            </button>
+        </div>
+    </div>
+{/if}

package/src/components/layout/NavBar.svelte

@@ -11,6 +11,7 @@
         type SyncPhase,
     } from "@hearthlog/runtime/store/sync-state.js";
     import { navIndicator } from "./nav-indicator.js";
+    import { placeHref, placeTitle, recentPlaces } from "./recent-places.svelte.js";
     import SidebarResizer from "./SidebarResizer.svelte";
     import NavItem from "./NavItem.svelte";
     import NavFlyout from "./NavFlyout.svelte";
@@ -224,11 +225,63 @@
         syncPhase === "syncing",
     );
 
+    function pathMatches(pathname: string, path: string): boolean {
+        if (path === "/") return pathname === "/";
+        return pathname === path || pathname.startsWith(`${path}/`);
+    }
+
     function isActive(path: string): boolean {
-        if (path === "/") return page.url.pathname === "/";
-        return page.url.pathname === path || page.url.pathname.startsWith(`${path}/`);
+        return pathMatches(page.url.pathname, path);
+    }
+
+    // ---------------------------------------------------------------- recently
+    /** The place in view, once its title settles: pages name it in `<title>` after their data loads. */
+    function rememberPlace(): void {
+        // An error page is no place to return to.
+        if (page.error) return;
+        const url = new URL(window.location.href);
+        const link = navLinks.find((candidate) => (candidate.matchPaths ?? [candidate.path]).some((path) => pathMatches(url.pathname, path)));
+        if (!link) return;
+        const title = placeTitle(document.title, link.label, tenant.title);
+        if (title) recentPlaces.record({ href: placeHref(url), title, section: link.id });
     }
 
+    let rememberTimer: ReturnType<typeof setTimeout> | undefined;
+    function settlePlace(): void {
+        clearTimeout(rememberTimer);
+        rememberTimer = setTimeout(rememberPlace, 700);
+    }
+
+    // The log's list opens with its data; a title change or a move to another address records the place.
+    $effect(() => {
+        if (!dataReady || !currentLogId) return;
+        recentPlaces.open(tenant.id, currentLogId);
+        const titles = new MutationObserver(settlePlace);
+        titles.observe(document.head, { subtree: true, childList: true, characterData: true });
+        settlePlace();
+        return () => {
+            clearTimeout(rememberTimer);
+            titles.disconnect();
+        };
+    });
+
+    $effect(() => {
+        void page.url.href;
+        if (dataReady && currentLogId) settlePlace();
+    });
+
+    /** Up to four places outside the section in view, each with its section's icon. */
+    const recentShown = $derived.by(() => {
+        const here = navLinks.find(isLinkActive)?.id ?? null;
+        return recentPlaces.places
+            .filter((place) => place.section !== here)
+            .flatMap((place) => {
+                const link = navLinks.find((candidate) => candidate.id === place.section);
+                return link ? [{ ...place, icon: link.icon, sectionLabel: link.label }] : [];
+            })
+            .slice(0, 4);
+    });
+
     function isLinkActive(link: NavLink): boolean {
         return (link.matchPaths ?? [link.path]).some(isActive);
     }
@@ -319,7 +372,7 @@
 </script>
 
 <aside
-    class="fixed left-3 top-3 bottom-3 z-50 hidden flex-col rounded-[20px] bg-[var(--stor-sidebar)] shadow-[var(--stor-sidebar-shadow)] transition-[width] duration-150 ease-out motion-reduce:transition-none md:flex {collapsed
+    class="fixed left-0 top-0 bottom-0 z-50 hidden flex-col bg-[var(--stor-sidebar)] transition-[width] duration-150 ease-out motion-reduce:transition-none md:flex {collapsed
         ? 'w-20'
         : 'w-[var(--stor-sidebar-width)]'}"
     data-testid="desktop-sidebar"
@@ -354,8 +407,10 @@
                     {#each group.links as link}
                         {@const active = isLinkActive(link)}
                         {@const badge = attention.badge(link.id)}
+                        {@const figure = attention.figure(link.id)}
                         {#if !collapsed}
-                            <div>
+                            <!-- The current section is one raised card: its row and its open sub-pages. -->
+                            <div data-nav-section data-active={active ? '' : undefined}>
                                 <!-- The count sits on the sub-page that holds the work while the section is open. -->
                                 <NavItem
                                     href={linkHref(link.path)}
@@ -364,6 +419,7 @@
                                     {active}
                                     {collapsed}
                                     {badge}
+                                    {figure}
                                     showCount={!(active && link.children)}
                                 />
                                 {#if link.children}
@@ -374,15 +430,18 @@
                                                 {#each link.children as child}
                                                     {@const childActive = active && isChildActive(link, child)}
                                                     {@const childBadge = child.badgeId ? attention.badge(child.badgeId) : null}
+                                                    {@const childFigure = childBadge ? null : attention.figure(child.id)}
                                                     <li><a
                                                         href={childHref(link, child)}
                                                         class="stor-nav-child {childActive ? 'stor-nav-child-active' : ''}"
                                                         aria-current={childActive ? "page" : undefined}
-                                                        aria-label={childBadge ? `${child.label}, ${childBadge.label}` : undefined}
+                                                        aria-label={childBadge || childFigure ? [child.label, childBadge?.label ?? childFigure?.label].join(', ') : undefined}
                                                     >
-                                                        <span class="min-w-0 flex-1 truncate">{child.label}</span>
+                                                        <span class="min-w-0 truncate {childFigure ? 'flex-none' : 'flex-1'}">{child.label}</span>
                                                         {#if childBadge}
                                                             <span class="stor-nav-badge {childBadge.tone === 'negative' ? 'stor-nav-badge-negative' : 'stor-nav-badge-warning'}" aria-hidden="true">{childBadge.count}</span>
+                                                        {:else if childFigure}
+                                                            <span class="stor-nav-figure" aria-hidden="true">{childFigure.text}</span>
                                                         {/if}
                                                     </a></li>
                                                 {/each}
@@ -396,22 +455,24 @@
                             <NavFlyout
                                 label={link.label}
                                 {badge}
+                                {figure}
                                 items={link.children.map((child) => ({
                                     child,
                                     href: childHref(link, child),
                                     active: active && isChildActive(link, child),
                                     badge: child.badgeId ? attention.badge(child.badgeId) : null,
+                                    figure: attention.figure(child.id),
                                 }))}
                             >
                                 {#snippet trigger()}
-                                    <NavItem href={linkHref(link.path)} icon={link.icon} label={link.label} {active} {collapsed} {badge} />
+                                    <NavItem href={linkHref(link.path)} icon={link.icon} label={link.label} {active} {collapsed} {badge} {figure} />
                                 {/snippet}
                             </NavFlyout>
                         {:else}
                             <!-- Rail: a section without pages names itself in a tooltip. -->
-                            <Tooltip content={badge ? `${link.label} · ${badge.label}` : link.label} side="right" delayDuration={150}>
+                            <Tooltip content={[link.label, badge?.label, figure?.label].filter(Boolean).join(' · ')} side="right" delayDuration={150}>
                                 {#snippet trigger({ props })}
-                                    <NavItem {...props} href={linkHref(link.path)} icon={link.icon} label={link.label} {active} {collapsed} {badge} />
+                                    <NavItem {...props} href={linkHref(link.path)} icon={link.icon} label={link.label} {active} {collapsed} {badge} {figure} />
                                 {/snippet}
                             </Tooltip>
                         {/if}
@@ -421,6 +482,25 @@
         {/each}
     </nav>
 
+    {#if !collapsed && recentShown.length > 0}
+        <!-- Where this device was lately in this log, outside the section in view. -->
+        <section class="shrink-0 px-3 pb-2" aria-label="Recently">
+            <p class="px-3 pb-1.5 pt-1 text-[10.5px] font-semibold uppercase tracking-[0.1em] text-[var(--stor-muted-text)]">Recently</p>
+            <ul class="flex flex-col gap-px">
+                {#each recentShown as place (place.href)}
+                    {@const Icon = place.icon}
+                    <li><a href={place.href} class="stor-recent-place" aria-label={`${place.title}, ${place.sectionLabel}`}>
+                        <Icon class="h-4 w-4 shrink-0 text-[var(--stor-muted-text)]" />
+                        <span class="flex min-w-0 flex-col leading-tight" aria-hidden="true">
+                            <span class="truncate text-[13px] font-medium text-[var(--stor-ink)]">{place.title}</span>
+                            <span class="truncate text-[11.5px] text-[var(--stor-muted-text)]">{place.sectionLabel}</span>
+                        </span>
+                    </a></li>
+                {/each}
+            </ul>
+        </section>
+    {/if}
+
     <!-- Places sit above the line; the log, its sync state and the account sit below it. -->
     <div class="shrink-0 border-t border-[var(--stor-border)] {collapsed ? 'flex flex-col items-center gap-0.5 px-2 py-2.5' : 'space-y-0.5 px-2.5 py-2'}">
         <LogStatusChip

package/src/components/layout/NavFlyout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
+    import type { NavFigure } from '@hearthlog/contracts';
     import type { NavChild } from '@hearthlog/contracts/features/navigation';
     import type { AttentionTone } from '@hearthlog/runtime/store/attention.svelte.js';
 
@@ -9,17 +10,21 @@
         href: string;
         active: boolean;
         badge: Badge | null;
+        figure: NavFigure | null;
     }
 
     let {
         label,
         badge,
+        figure = null,
         items,
         trigger,
     }: {
         label: string;
         /** The section's own badge, named in the flyout header. */
         badge: Badge | null;
+        /** The section's live figure, shown in the header while nothing is overdue. */
+        figure?: NavFigure | null;
         items: Item[];
         /** The section link. It stays the real navigation target; the flyout only adds shortcuts. */
         trigger: Snippet;
@@ -111,6 +116,8 @@
             <span class="min-w-0 truncate">{label}</span>
             {#if badge}
                 <span class="stor-nav-badge {badge.tone === 'negative' ? 'stor-nav-badge-negative' : 'stor-nav-badge-warning'} shrink-0">{badge.count} overdue</span>
+            {:else if figure}
+                <span class="stor-nav-figure" title={figure.label}>{figure.text}</span>
             {/if}
         </div>
         <ul>
@@ -119,11 +126,13 @@
                     href={item.href}
                     class="stor-nav-child {item.active ? 'stor-nav-child-active' : ''}"
                     aria-current={item.active ? 'page' : undefined}
-                    aria-label={item.badge ? `${item.child.label}, ${item.badge.label}` : undefined}
+                    aria-label={item.badge || item.figure ? [item.child.label, item.badge?.label ?? item.figure?.label].join(', ') : undefined}
                 >
-                    <span class="min-w-0 flex-1 truncate">{item.child.label}</span>
+                    <span class="min-w-0 truncate {!item.badge && item.figure ? 'flex-none' : 'flex-1'}">{item.child.label}</span>
                     {#if item.badge}
                         <span class="stor-nav-badge {item.badge.tone === 'negative' ? 'stor-nav-badge-negative' : 'stor-nav-badge-warning'}" aria-hidden="true">{item.badge.count}</span>
+                    {:else if item.figure}
+                        <span class="stor-nav-figure" aria-hidden="true">{item.figure.text}</span>
                     {/if}
                 </a></li>
             {/each}

package/src/components/layout/NavItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Component } from 'svelte';
     import type { HTMLAnchorAttributes } from 'svelte/elements';
+    import type { NavFigure } from '@hearthlog/contracts';
     import type { AttentionTone } from '@hearthlog/runtime/store/attention.svelte.js';
 
     interface Props extends Omit<HTMLAnchorAttributes, 'class' | 'children'> {
@@ -12,9 +13,14 @@
         badge: { count: number; tone: AttentionTone; label: string } | null;
         /** The count sits on the sub-page while a section is open, so the section hides it then. */
         showCount?: boolean;
+        /** The section's live figure, muted beside the label; a shown count takes its place. */
+        figure?: NavFigure | null;
     }
 
-    let { icon: Icon, label, active, collapsed, badge, showCount = true, ...rest }: Props = $props();
+    let { icon: Icon, label, active, collapsed, badge, showCount = true, figure = null, ...rest }: Props = $props();
+
+    const countShown = $derived(!!badge && (collapsed || showCount));
+    const figureShown = $derived(!!figure && !collapsed && !countShown);
 </script>
 
 <!-- `rest` may carry tooltip props; the anchor is never a button, so its type is dropped. -->
@@ -26,11 +32,12 @@
         ? 'stor-nav-selected font-semibold text-[var(--stor-ink)]'
         : 'font-medium text-[var(--stor-muted-text)] hover:bg-[var(--stor-nav-hover)] hover:text-[var(--stor-ink)]'}"
     aria-current={active ? 'page' : undefined}
-    aria-label={badge ? `${label}, ${badge.label}` : label}
+    aria-label={[label, badge?.label, figure?.label].filter(Boolean).join(', ')}
 >
     <Icon class="h-[18px] w-[18px] shrink-0" />
-    {#if !collapsed}<span class="min-w-0 flex-1 truncate">{label}</span>{/if}
-    {#if badge && (collapsed || showCount)}
+    {#if !collapsed}<span class="min-w-0 truncate {figureShown ? 'flex-none' : 'flex-1'}">{label}</span>{/if}
+    {#if figureShown}<span class="stor-nav-figure" aria-hidden="true">{figure?.text}</span>{/if}
+    {#if countShown && badge}
         <span class="stor-nav-badge {badge.tone === 'negative' ? 'stor-nav-badge-negative' : 'stor-nav-badge-warning'} {collapsed ? 'stor-nav-badge-dot' : ''}" aria-hidden="true">{collapsed ? '' : badge.count}</span>
     {/if}
 </a>

package/src/components/layout/last-change.svelte.ts

@@ -0,0 +1,80 @@
+import { executeLocalCommand, onLocalCommandCommitted } from '@hearthlog/runtime/commands/index.js';
+import { undoEvents, undoTargets, type UndoTarget } from '@hearthlog/runtime/commands/undo.js';
+import { queryDatabase } from '@hearthlog/runtime/db/read-repositories.js';
+import type { ExtendedAppEvent } from '@hearthlog/runtime/event/types.js';
+import { refreshPageData } from '@hearthlog/runtime/runtime/refresh.js';
+import { SYNC_INVALIDATION_TARGETS } from '@hearthlog/runtime/store/sync-invalidation.js';
+
+const LIFETIME_MS = 10 * 60_000;
+
+export interface LastChange {
+    batchId: string;
+    /** As Log history names the action ("Added Albert Vinohrady"). */
+    label: string;
+    /** The records whose removal reverses it, when it only added standard records; null otherwise. */
+    reversal: UndoTarget[] | null;
+    state: 'saved' | 'undoing' | 'undone' | 'failed';
+}
+
+async function actionLabel(eventIds: readonly string[]): Promise<string> {
+    try {
+        const [latest] = await queryDatabase((repositories) => repositories.history.list({ limit: 1 }));
+        if (latest?.kind === 'action' && eventIds.includes(latest.id)) return latest.label;
+    } catch {
+        // The label is a courtesy; the change itself is saved.
+    }
+    return 'Saved your change';
+}
+
+/** The latest change made in this tab, offered back for undo until the person moves on. */
+class LastChangeStore {
+    current = $state<LastChange | null>(null);
+    #undoing = false;
+    #timer: ReturnType<typeof setTimeout> | undefined;
+
+    /** Follows this tab's commits; returns the teardown. */
+    start(): () => void {
+        const stop = onLocalCommandCommitted((result, events) => {
+            // The undo's own removals are not a new change to offer back.
+            if (this.#undoing) return;
+            void this.#show(result.batchId, result.eventIds, events);
+        });
+        return () => {
+            stop();
+            this.dismiss();
+        };
+    }
+
+    async #show(batchId: string, eventIds: readonly string[], events: readonly ExtendedAppEvent[]): Promise<void> {
+        const reversal = undoTargets(events);
+        const label = await actionLabel(eventIds);
+        this.current = { batchId, label, reversal, state: 'saved' };
+        clearTimeout(this.#timer);
+        this.#timer = setTimeout(() => this.dismiss(), LIFETIME_MS);
+    }
+
+    dismiss(): void {
+        clearTimeout(this.#timer);
+        this.current = null;
+    }
+
+    async undo(): Promise<void> {
+        const change = this.current;
+        if (!change?.reversal || change.state !== 'saved') return;
+        this.current = { ...change, state: 'undoing' };
+        this.#undoing = true;
+        try {
+            // One submission per undone action, so a repeated click cannot remove twice.
+            await executeLocalCommand(undoEvents(change.reversal), { submissionId: `undo:${change.batchId}` });
+            if (this.current?.batchId === change.batchId) this.current = { ...change, state: 'undone' };
+        } catch {
+            if (this.current?.batchId === change.batchId) this.current = { ...change, state: 'failed' };
+            return;
+        } finally {
+            this.#undoing = false;
+        }
+        await refreshPageData(...SYNC_INVALIDATION_TARGETS);
+    }
+}
+
+export const lastChange = new LastChangeStore();

package/src/components/layout/nav-indicator.ts

@@ -31,10 +31,11 @@ function boxIn(el: HTMLElement, nav: HTMLElement): Box {
  * `tabIndicator`.
  *
  * Measures the selected top-level link (`a[data-nav-link]` with
- * `aria-current`) and glides a raised pill to it. The pill keeps following the
- * row while a sub-list above it opens or closes, so it lands on the row's
- * resting position rather than where the row was when the page changed. The
- * selected link keeps its own background until the pill is placed, and reduced
+ * `aria-current`), or the `[data-nav-section]` card around it in the expanded
+ * sidebar, and glides a raised pill to it. The pill keeps following the row
+ * while a sub-list opens or closes, so it lands on the row's resting position
+ * and size rather than where the row was when the page changed. The selected
+ * section keeps its own background until the pill is placed, and reduced
  * motion snaps.
  *
  * Usage: `{@attach navIndicator}` on the positioned `<nav>` that holds the links.
@@ -68,7 +69,8 @@ export function navIndicator(nav: HTMLElement): () => void {
             nav.classList.remove('stor-nav-sliding');
             return;
         }
-        const target = boxIn(selected, nav);
+        // The expanded sidebar raises the whole section, so the pill wraps its open sub-pages too.
+        const target = boxIn(selected.closest<HTMLElement>('[data-nav-section]') ?? selected, nav);
         if (!shown || reducedMotion.matches) {
             shown = target;
         } else {

package/src/components/layout/recent-places.svelte.ts

@@ -0,0 +1,84 @@
+import { HISTORY_PARAMS } from '@hearthlog/runtime/history/url.js';
+
+/** A place worth returning to: a month, a sub-page, a record. */
+export interface RecentPlace {
+    href: string;
+    title: string;
+    /** The navigation destination it belongs to. */
+    section: string;
+    at: number;
+}
+
+const LIMIT = 12;
+
+function storageKey(siteId: string, logId: string): string {
+    return `stor:recent-places:${siteId}:${logId}`;
+}
+
+function isPlace(value: unknown): value is RecentPlace {
+    const place = value as RecentPlace;
+    return typeof place?.href === 'string' && typeof place.title === 'string' && typeof place.section === 'string' && typeof place.at === 'number';
+}
+
+function read(key: string): RecentPlace[] {
+    try {
+        const stored: unknown = JSON.parse(localStorage.getItem(key) ?? '[]');
+        return Array.isArray(stored) ? stored.filter(isPlace).slice(0, LIMIT) : [];
+    } catch {
+        return [];
+    }
+}
+
+/**
+ * The places this device opened in the current log, newest first. They stay on the device (browser storage, never
+ * synced) and per log, so switching logs shows that log's places. Advisory: unreadable storage means an empty list.
+ */
+class RecentPlaces {
+    places = $state<RecentPlace[]>([]);
+    #key: string | null = null;
+
+    /** Loads the list of a log; a no-op while it is already open. */
+    open(siteId: string, logId: string): void {
+        const key = storageKey(siteId, logId);
+        if (key === this.#key) return;
+        this.#key = key;
+        this.places = read(key);
+    }
+
+    /** Moves a place to the front; one entry per title within a section, so a month or a record appears once. */
+    record(place: Omit<RecentPlace, 'at'>): void {
+        if (!this.#key) return;
+        if (this.places[0]?.href === place.href && this.places[0].title === place.title) return;
+        const next = [
+            { ...place, at: Date.now() },
+            ...this.places.filter((entry) => entry.title !== place.title || entry.section !== place.section),
+        ].slice(0, LIMIT);
+        this.places = next;
+        try {
+            localStorage.setItem(this.#key, JSON.stringify(next));
+        } catch {
+            // Storage full or blocked: the list still holds for this tab.
+        }
+    }
+}
+
+export const recentPlaces = new RecentPlaces();
+
+/** The address to return to, without one-shot editor params (`new…`) or the log panel's state. */
+export function placeHref(url: URL): string {
+    const clean = new URL(url);
+    for (const name of [...clean.searchParams.keys()]) {
+        if (name.startsWith('new') || (HISTORY_PARAMS as readonly string[]).includes(name)) clean.searchParams.delete(name);
+    }
+    return clean.pathname + clean.search;
+}
+
+/**
+ * The place's name from the document title ("October 2026 | Finance | Household" names "October 2026"), or null for
+ * a page named only by its section or the site, which the navigation already lists.
+ */
+export function placeTitle(documentTitle: string, sectionLabel: string, siteTitle: string): string | null {
+    const title = documentTitle.split(' | ')[0]?.trim() ?? '';
+    if (!title || title === sectionLabel || title === siteTitle) return null;
+    return title;
+}

package/src/pages/layout/Layout.svelte

@@ -16,6 +16,7 @@
     import { localStoreStatus } from "@hearthlog/runtime/store/local-store.svelte.js";
     import { logs } from "@hearthlog/runtime/store/logs.svelte.js";
     import NavBar from "@hearthlog/shell/components/layout/NavBar.svelte";
+    import LastChangeBar from "@hearthlog/shell/components/layout/LastChangeBar.svelte";
     import { SIDEBAR_WIDTH_KEY, readSidebarWidth } from "@hearthlog/shell/components/layout/sidebar-size.js";
     import LogCreateDrawer from "@hearthlog/shell/components/layout/LogCreateDrawer.svelte";
     import NotificationCenter from "@hearthlog/ui/components/NotificationCenter.svelte";
@@ -29,7 +30,8 @@
     import { offlineReadiness } from "@hearthlog/runtime/store/offline-readiness.svelte.js";
     import { featureForPath, ENTITIES_PATH } from "@hearthlog/contracts/features/registry";
     import { attention } from "@hearthlog/runtime/store/attention.svelte.js";
-    import { tenant } from "@hearthlog/contracts/tenant/config";
+    import { isFeatureEnabled, tenant } from "@hearthlog/contracts/tenant/config";
+    import { calendarAttention } from "@hearthlog/shell/components/calendar/calendar-attention.js";
     import { createAndActivateLog, prepareForkFiles } from "@hearthlog/runtime/log-management.js";
     import { SYNC_INVALIDATION_TARGETS } from "@hearthlog/runtime/store/sync-invalidation.js";
     import { beginReadTargetTransition, failReadTargetTransition } from "@hearthlog/runtime/runtime/read-coordinator.js";
@@ -104,10 +106,10 @@
         return kept ? kept.path : page.url.pathname;
     });
 
-    // Navigation badges and native reminders come from the composed modules.
+    // Navigation badges, figures and native reminders come from the composed modules, plus the calendar's own figure.
     // `startup` is the host's composed module list and never changes for a running page.
     // svelte-ignore state_referenced_locally
-    attention.configure(startup.attentionContributions);
+    attention.configure([...(isFeatureEnabled("calendar") ? [calendarAttention] : []), ...startup.attentionContributions]);
 
     onMount(() => initializeAppearance(tenant.id));
 
@@ -531,8 +533,8 @@
 <div
     data-stor-root
     class="flex h-dvh w-full flex-col bg-[var(--stor-bg)] transition-[padding] duration-150 ease-out motion-reduce:transition-none {sidebarCollapsed
-        ? 'md:pl-[104px]'
-        : 'lg:pl-[calc(var(--stor-sidebar-width)+24px)]'}"
+        ? 'md:pl-20'
+        : 'lg:pl-[var(--stor-sidebar-width)]'}"
 >
     <NavBar
         userEmail={userEmail}
@@ -578,6 +580,7 @@
             <button class="mt-2 block font-semibold underline" onclick={() => window.location.reload()}>Retry loading</button>
         </aside>
     {/if}
+    <LastChangeBar collapsed={sidebarCollapsed} logId={eventLogFilename.value} />
     <NotificationCenter />
     <LogCreateDrawer
         show={createLogDrawerOpen}

package/src/styles/shell.css

@@ -3,11 +3,17 @@
     .stor-native-field:focus { border-color: var(--stor-focus); box-shadow: 0 0 0 2px var(--stor-selected); }
     .stor-native-field:disabled { cursor: not-allowed; color: var(--stor-muted-text); }
     @media (min-width: 640px) { .stor-native-field { min-height: 36px; font-size: 14px; } }
-    /* Navigation: the current destination is a raised pill, the same selection as tabs. */
+    /* Navigation: the current destination is a raised pill, the same selection as tabs. In the expanded
+       sidebar the pill is a card around the whole section, its row and its open sub-pages. */
     :root { --stor-nav-hover: color-mix(in srgb, var(--stor-ink) 5%, transparent); }
     /* The pill glides between rows (navIndicator). The selected row keeps its own look until the pill is placed. */
-    .stor-nav-indicator { position: absolute; z-index: 0; left: 0; top: 0; border-radius: 10px; opacity: 0; pointer-events: none; will-change: transform; }
+    .stor-nav-indicator { position: absolute; z-index: 0; left: 0; top: 0; border-radius: 12px; opacity: 0; pointer-events: none; will-change: transform; }
     .stor-nav-sliding .stor-nav-indicator { opacity: 1; }
+    [data-nav-section] { position: relative; border-radius: 12px; }
+    [data-nav-section][data-active] { background: var(--stor-surface-raised); box-shadow: var(--stor-elevation-2); }
+    [data-nav-section] .stor-nav-selected, .stor-nav-sliding [data-nav-section][data-active] { background: transparent; box-shadow: none; }
+    /* A section's live figure: muted, right-aligned, and the first thing to truncate when the sidebar is narrow. */
+    .stor-nav-figure { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 12px; font-weight: 500; color: var(--stor-muted-text); font-variant-numeric: tabular-nums; }
     .stor-nav-badge { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 650; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
     .stor-nav-badge-negative { background: var(--stor-negative-soft); color: var(--stor-negative); }
     .stor-nav-badge-warning { background: var(--stor-warning-soft); color: var(--stor-warning); }
@@ -19,6 +25,19 @@
     .stor-nav-sub[data-open] { grid-template-rows: 1fr; }
     .stor-nav-sub-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 200ms; }
     .stor-nav-sub[data-open] > .stor-nav-sub-in { visibility: visible; transition-delay: 0s; }
+    /* Recently: two-line rows whose icons sit in the navigation's icon column. */
+    .stor-recent-place { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 3px 10px 3px 13px; border-radius: 10px; transition: background-color 120ms; }
+    .stor-recent-place:hover { background: var(--stor-nav-hover); }
+    .stor-recent-place:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--stor-focus); }
+    /* Last change: one quiet bar over the bottom of the page panel, offering Undo for what this tab just saved. */
+    .stor-last-change { display: flex; align-items: center; gap: 8px; width: min(560px, 100%); min-height: 48px; box-sizing: border-box; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--stor-surface-overlay); box-shadow: var(--stor-elevation-3); font-size: 13.5px; color: var(--stor-ink); }
+    .stor-last-change-action { flex: none; min-height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--stor-accent-text); transition: background-color 120ms; }
+    .stor-last-change-action:hover:not(:disabled) { background: var(--stor-nav-hover); }
+    .stor-last-change-action:disabled { opacity: 0.55; }
+    .stor-last-change-quiet { font-weight: 500; color: var(--stor-muted-text); }
+    .stor-last-change-close { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--stor-muted-text); }
+    .stor-last-change-close:hover { background: var(--stor-nav-hover); color: var(--stor-ink); }
+    .stor-last-change :is(button):focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--stor-focus); }
     /* Rail flyout: a section's pages beside the rail, opened by hover or keyboard focus (NavFlyout). */
     .stor-nav-fly { position: fixed; z-index: 60; width: 13rem; padding: 8px; border-radius: 16px; background: var(--stor-surface-overlay); box-shadow: var(--stor-elevation-3); opacity: 0; visibility: hidden; transform: translateX(-4px); transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms; }
     .stor-nav-fly[data-open] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@@ -28,16 +47,15 @@
     .stor-nav-fly-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 8px; font-size: 13px; font-weight: 600; color: var(--stor-ink); }
     .stor-nav-fly .stor-nav-child { height: 32px; padding: 0 8px; }
     .stor-nav-fly .stor-nav-child-active { padding-left: 14px; }
-    .stor-nav-fly .stor-nav-child-active::before { left: 0; top: 8px; bottom: 8px; }
-    .stor-nav-children { position: relative; display: flex; flex-direction: column; gap: 1px; margin: 2px 0 0 21px; padding-left: 12px; }
-    .stor-nav-children::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1.5px; border-radius: 2px; background: var(--stor-border); }
-    .stor-nav-child { position: relative; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--stor-muted-text); transition: color 120ms, background-color 120ms; }
+    .stor-nav-fly .stor-nav-child-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--stor-ink); }
+    /* Sub-pages line up with the section's label inside its card (row padding 12px + 18px icon + 10px gap). */
+    .stor-nav-children { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0 0 6px; }
+    .stor-nav-child { position: relative; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 40px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--stor-muted-text); transition: color 120ms, background-color 120ms; }
     .stor-nav-child:hover { color: var(--stor-ink); background: var(--stor-nav-hover); }
     .stor-nav-child:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--stor-focus); }
     .stor-nav-child .stor-nav-badge { min-width: 18px; height: 16px; padding: 0 5px; font-size: 10px; line-height: 16px; }
     /* Selection is ink, so red keeps meaning late work. */
     .stor-nav-child-active { color: var(--stor-ink); font-weight: 600; }
-    .stor-nav-child-active::before { content: ""; position: absolute; left: -13.25px; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--stor-ink); }
     .stor-dock-badge { position: absolute; top: -3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; font-size: 9.5px; font-weight: 700; line-height: 16px; text-align: center; color: var(--stor-negative-text); box-shadow: 0 0 0 2px var(--stor-surface-raised); }
     .stor-dock-badge-negative { background: var(--stor-negative); }
     .stor-dock-badge-warning { background: var(--stor-warning); color: var(--stor-surface); }
@@ -79,7 +97,23 @@
 
 .stor-mobile-header { background: var(--stor-bg); box-shadow: var(--stor-header-shadow); }
 
-[data-testid="desktop-sidebar"] { border-radius: 20px; box-shadow: var(--stor-sidebar-shadow); }
+/* From the rail up the sidebar sits on the canvas and the page is one raised panel beside it.
+   Inside the panel the canvas is the panel's own surface, so sticky headers and fades match it,
+   and panels step down from white cards to outlined sections. */
+
+:root { --stor-page-shadow: var(--stor-elevation-1); }
+
+@media (min-width: 768px) {
+    [data-stor-main] {
+        --stor-bg: var(--stor-surface);
+        --stor-elevation-1: 0 0 0 1px color-mix(in srgb, var(--stor-border) 70%, transparent);
+        --stor-panel-shadow: var(--stor-elevation-1);
+        margin: 12px 12px 12px 0;
+        border-radius: var(--stor-panel-radius);
+        background: var(--stor-surface);
+        box-shadow: var(--stor-page-shadow);
+    }
+}
 
 body:has([data-stor-drawer]) .stor-mobile-action,
 body:has([data-stor-drawer]) .stor-mobile-fab { visibility: hidden; }
@@ -207,7 +241,6 @@ html[data-stor-shell="mac"] [data-stor-root] {
 
 html[data-stor-shell="mac"] [data-testid="desktop-sidebar"] {
     background: color-mix(in srgb, var(--stor-sidebar) var(--stor-shell-sidebar-tint), transparent);
-    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--stor-ink) 9%, transparent), var(--stor-sidebar-shadow);
 }
 
 html[data-stor-shell="mac"] .stor-lights { display: block; flex: none; width: var(--stor-shell-lights); height: 14px; }
@@ -254,7 +287,7 @@ html[data-stor-shell="ios"] .stor-mobile-nav {
 
 /* iPad shows the rail from 768px: clear the status bar, which the edge-to-edge page now sits under. */
 
-html[data-stor-shell="ios"] [data-testid="desktop-sidebar"] { top: calc(12px + env(safe-area-inset-top, 0px)); }
+html[data-stor-shell="ios"] [data-testid="desktop-sidebar"] { top: env(safe-area-inset-top, 0px); }
 
 html[data-stor-shell="ios"] [data-stor-main] { padding-top: var(--stor-mobile-header-height); }