@supersuit/suggest-a-change 0.1.12 → 0.1.13

package/CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog
 
-## Unreleased
+## 0.1.13 (2026-10-21)
+
+- **Old news is no longer toasted on every open.** The page load's one toast went to the newest move the person had not opened, however long ago it happened, so opening the app a day later replayed the same news each time. The phone now keeps what the last page load already had as news (`#view:noticed`, beside the seen record and cleared with it): only a move that is new since that load is toasted, and an older one keeps the dot and the New mark until it is opened. The first load on this release behaves as before. New in `seen.ts`: `fresh(store, id, moves)`.
+- **A toast is a small pill at the bottom, not a bar over the top of the page.** `.sac-toasts` anchored to the top safe area and each `.sac-toast` spanned the width, so the suggestion news shown when an app opened sat over the host's own header and first row. Toasts now sit above the bottom safe area, as wide as their words (up to 24rem), in a smaller type, with a drawn × so they read as dismissable; a tap still dismisses. Styling only: no API or `Words` change. Test: package.test.mjs, red against the old stylesheet.
 
 ## 0.1.12 (2026-10-19)
 

package/README.md

@@ -75,7 +75,7 @@ The four diagnostics are the app's version, the time, the screen size and the ph
 
 **Telling the person in the app, with no setup.** The entry asks `mine()` once when it mounts and compares each report's status with the one this account last opened (kept on the phone beside the cached views, per app and account, and cleared on sign-out). A report that has since been started or ended (`TOLD`) shows a dot on the entry, says New on its row in My suggestions, and the newest such move gets one toast per page load in the module's words (`words.text.movedToast`, given the status's own word and, on `not-now`, the reason: "Your suggestion: Done", "Your suggestion: Not now. too big for now"). Opening the report clears it. A report this phone sees for the first time is recorded silently, so an app taking this release does not announce every old report. The list's `not-now` rows carry their one-line `note` for this. Out of the app, the server's `tellSubmitter` does the telling (below).
 
-**When the entry sits in a menu.** A host that shows the entry inside a menu that stays closed (a three-dot menu, often remounting its rows on every open) would never show the dot, and the toast would be drawn inside the closed menu. Mount `<SuggestNews>` once at the app's root, always mounted: it asks `mine()` when it mounts, shows the page load's one toast with no entry on screen, and keeps the outbox moving. Put the dot on the menu's own trigger with `useSuggestNews(adapters)`, which returns `{ moved }`, and `<SuggestDot>`, which draws the entry's dot (nothing when `moved` is 0). The trigger needs `position: relative`; the class `sac-dot-host` does it. The toast is once per page load and account however many times the entry mounts, whichever of these asks first. The entry in the menu keeps its own dot.
+**When the entry sits in a menu.** A host that shows the entry inside a menu that stays closed (a three-dot menu, often remounting its rows on every open) would never show the dot, and the toast would be drawn inside the closed menu. Mount `<SuggestNews>` once at the app's root, always mounted: it asks `mine()` when it mounts, shows the page load's one toast with no entry on screen, and keeps the outbox moving. Put the dot on the menu's own trigger with `useSuggestNews(adapters)`, which returns `{ moved }`, and `<SuggestDot>`, which draws the entry's dot (nothing when `moved` is 0). The trigger needs `position: relative`; the class `sac-dot-host` does it. The toast is once per page load and account however many times the entry mounts, whichever of these asks first, and only for a move the previous page load had not already seen: older news keeps the dot and the New mark without a toast. The entry in the menu keeps its own dot.
 
 ```tsx
 import { SuggestDot, SuggestEntry, SuggestNews, useSuggestNews } from "@supersuit/suggest-a-change/client";

package/dist/client/entry.js

@@ -5,7 +5,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // shows the sheet. `<ReportProblem>` is the same control for an error screen, already filled in.
 import { useEffect, useState } from 'react';
 import { useRuntime } from './runtime.js';
-import { firstToastThisOpen, moved, onSeen } from './seen.js';
+import { firstToastThisOpen, fresh, moved, onSeen } from './seen.js';
 import { SuggestSheet } from './sheet.js';
 import { toast, Toasts } from './toast.js';
 import { useClearOnSignOut } from './view-cache.js';
@@ -17,7 +17,7 @@ export function KeepSending({ adapters }) {
     return null;
 }
 // THE NEWS: once per mount, asks the app for this person's reports and compares each with what they last opened. A move
-// since then is counted (the dot), and the newest one gets the page load's one toast, whichever of the entry or a
+// since then is counted (the dot), and the newest one the last page load had not already seen gets the page load's one toast, whichever of the entry or a
 // root-mounted SuggestNews asks first (the guard is per page load and account, in seen.ts). Opening a report anywhere
 // recounts. `toasted` says this mount showed the toast, so a standalone entry knows to draw a toast host for it.
 function useNews(adapters, rt) {
@@ -56,10 +56,14 @@ function useNews(adapters, rt) {
             if (!live || !rows || !now || now.account !== rt.who.account)
                 return;
             const m = await count();
-            if (!live || !m?.length || !firstToastThisOpen(id))
+            if (!live || !m)
+                return;
+            // Only a move the last page load had not already seen is toasted; an older one keeps just the dot.
+            const f = await fresh(rt.store, id, m);
+            if (!f.length || !firstToastThisOpen(id))
                 return;
             const at = (x) => rows.find((r) => r.id === x)?.at ?? 0;
-            const top = [...m].sort((a, b) => at(b.id) - at(a.id))[0];
+            const top = [...f].sort((a, b) => at(b.id) - at(a.id))[0];
             const note = top.status === 'not-now' ? rows.find((r) => r.id === top.id)?.note : undefined;
             setToasted(true);
             toast({ id: `sac-moved-${top.id}`, text: S.movedToast(statusWords(top.status, adapters.words.owner), typeof note === 'string' && note ? note : undefined), ms: 6000 });

package/dist/client/seen.d.ts

@@ -21,4 +21,16 @@ export declare function moved(store: Store, id: Id, rows: {
     status: string;
 }[]>;
 export declare function firstToastThisOpen(id: Id): boolean;
+/** WHAT THE LAST PAGE LOAD ALREADY SAW. The moves (report and status) that were already news the last time the app was
+ *  loaded, so a move the person was told about, or could have been, is not toasted again on the next load; it keeps
+ *  only the dot and the New mark until they open it. Returns the moves in `m` that are new since then, and records `m`
+ *  as what this load saw. With no record yet (the first load on this release) every move is fresh, as before. */
+export declare const noticedKey: (id: Id) => string;
+export declare function fresh(store: Store, id: Id, m: {
+    id: string;
+    status: string;
+}[]): Promise<{
+    id: string;
+    status: string;
+}[]>;
 export {};

package/dist/client/seen.js

@@ -70,3 +70,24 @@ export function firstToastThisOpen(id) {
     toasted.add(k);
     return true;
 }
+/** WHAT THE LAST PAGE LOAD ALREADY SAW. The moves (report and status) that were already news the last time the app was
+ *  loaded, so a move the person was told about, or could have been, is not toasted again on the next load; it keeps
+ *  only the dot and the New mark until they open it. Returns the moves in `m` that are new since then, and records `m`
+ *  as what this load saw. With no record yet (the first load on this release) every move is fresh, as before. */
+export const noticedKey = (id) => `${draftKey(id)}#view:noticed`;
+export function fresh(store, id, m) {
+    return serial(noticedKey(id), async () => {
+        const had = await readCache(store, noticedKey(id));
+        const before = had && typeof had === 'object' ? had : {};
+        const out = m.filter((r) => before[r.id] !== r.status);
+        const now = { ...before };
+        for (const r of m)
+            now[r.id] = r.status;
+        // A report no longer moved (opened, or gone) drops out, so the record stays the size of the dot.
+        for (const k of Object.keys(now))
+            if (!m.some((r) => r.id === k))
+                delete now[k];
+        await writeCache(store, noticedKey(id), now);
+        return out;
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/suggest-a-change",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "The report format and flow behind a Suggest a change button: what a report is, who acts at each step, the screens, and the check every app runs. The contract has zero dependencies.",
   "type": "module",
   "bin": {

package/src/client/entry.tsx

@@ -5,7 +5,7 @@
 import { useEffect, useState, type AriaRole, type ReactNode } from 'react'
 import type { Adapters } from './adapters.ts'
 import { useRuntime, type Runtime } from './runtime.ts'
-import { firstToastThisOpen, moved, onSeen } from './seen.ts'
+import { firstToastThisOpen, fresh, moved, onSeen } from './seen.ts'
 import { SuggestSheet } from './sheet.tsx'
 import { toast, Toasts } from './toast.tsx'
 import { useClearOnSignOut } from './view-cache.ts'
@@ -19,7 +19,7 @@ export function KeepSending({ adapters }: { adapters: Adapters }) {
 }
 
 // THE NEWS: once per mount, asks the app for this person's reports and compares each with what they last opened. A move
-// since then is counted (the dot), and the newest one gets the page load's one toast, whichever of the entry or a
+// since then is counted (the dot), and the newest one the last page load had not already seen gets the page load's one toast, whichever of the entry or a
 // root-mounted SuggestNews asks first (the guard is per page load and account, in seen.ts). Opening a report anywhere
 // recounts. `toasted` says this mount showed the toast, so a standalone entry knows to draw a toast host for it.
 function useNews(adapters: Adapters, rt: Runtime | null): { moved: number; toasted: boolean } {
@@ -44,9 +44,12 @@ function useNews(adapters: Adapters, rt: Runtime | null): { moved: number; toast
       try { now = await adapters.identity() } catch { now = null }
       if (!live || !rows || !now || now.account !== rt.who.account) return
       const m = await count()
-      if (!live || !m?.length || !firstToastThisOpen(id)) return
+      if (!live || !m) return
+      // Only a move the last page load had not already seen is toasted; an older one keeps just the dot.
+      const f = await fresh(rt.store, id, m)
+      if (!f.length || !firstToastThisOpen(id)) return
       const at = (x: string) => rows!.find((r) => r.id === x)?.at ?? 0
-      const top = [...m].sort((a, b) => at(b.id) - at(a.id))[0]
+      const top = [...f].sort((a, b) => at(b.id) - at(a.id))[0]
       const note = top.status === 'not-now' ? rows.find((r) => r.id === top.id)?.note : undefined
       setToasted(true)
       toast({ id: `sac-moved-${top.id}`, text: S.movedToast(statusWords(top.status, adapters.words.owner), typeof note === 'string' && note ? note : undefined), ms: 6000 })

package/src/client/seen.ts

@@ -70,3 +70,22 @@ export function firstToastThisOpen(id: Id): boolean {
   toasted.add(k)
   return true
 }
+
+/** WHAT THE LAST PAGE LOAD ALREADY SAW. The moves (report and status) that were already news the last time the app was
+ *  loaded, so a move the person was told about, or could have been, is not toasted again on the next load; it keeps
+ *  only the dot and the New mark until they open it. Returns the moves in `m` that are new since then, and records `m`
+ *  as what this load saw. With no record yet (the first load on this release) every move is fresh, as before. */
+export const noticedKey = (id: Id) => `${draftKey(id)}#view:noticed`
+export function fresh(store: Store, id: Id, m: { id: string; status: string }[]): Promise<{ id: string; status: string }[]> {
+  return serial(noticedKey(id), async () => {
+    const had = await readCache<Seen>(store, noticedKey(id))
+    const before = had && typeof had === 'object' ? had : {}
+    const out = m.filter((r) => before[r.id] !== r.status)
+    const now: Seen = { ...before }
+    for (const r of m) now[r.id] = r.status
+    // A report no longer moved (opened, or gone) drops out, so the record stays the size of the dot.
+    for (const k of Object.keys(now)) if (!m.some((r) => r.id === k)) delete now[k]
+    await writeCache(store, noticedKey(id), now)
+    return out
+  })
+}

package/src/client/styles.css

@@ -63,8 +63,12 @@
 .sac-step[data-state="now"] { border-color: var(--sac-accent); color: var(--sac-fg); font-weight: 600; }
 .sac-step-detail { display: block; font-weight: 400; font-size: 0.85rem; }
 .sac-words { white-space: pre-wrap; overflow-wrap: anywhere; }
-.sac-toasts { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 8px); z-index: calc(var(--sac-z) + 1); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
-.sac-toast { pointer-events: auto; font: inherit; width: 100%; max-width: 28rem; text-align: left; padding: 12px 16px; border-radius: var(--sac-radius); border: 1px solid var(--sac-border); background: var(--sac-bg); color: var(--sac-fg); }
+/* Toasts sit small at the bottom edge, never over the top of the host's page: the top is where an app opens onto
+   its own content, and a full-width bar there reads as the app's header. Each is a pill as wide as its words, with a
+   drawn x so it reads as dismissable (the whole pill is the button). */
+.sac-toasts { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: calc(var(--sac-z) + 1); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 16px; pointer-events: none; }
+.sac-toast { pointer-events: auto; font: inherit; font-size: 0.875rem; line-height: 1.3; width: auto; max-width: min(100%, 24rem); text-align: left; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--sac-border); background: var(--sac-bg); color: var(--sac-fg); display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
+.sac-toast::after { content: "\00d7"; color: var(--sac-muted); font-size: 1rem; line-height: 1; }
 .sac-toast[data-tone="warn"] { background: var(--sac-fg); color: var(--sac-bg); }
 .sac-entry-why { margin-left: 8px; color: var(--sac-muted); font-size: 0.9rem; }
 .sac-sheet :focus-visible, .sac-entry:focus-visible, .sac-button:focus-visible, .sac-record:focus-visible, .sac-row-button:focus-visible { outline: 3px solid var(--sac-focus); outline-offset: 2px; }