peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(notifications): Mark all read waits for the fresh list, is not offered where it cannot act, and a row says it is unread

Browse Source 
The mask over a stale read lifted when the write settled, before the refetch landed, and the band took the rows back. A band holding only what asks by its kind (an access-requests nudge) left the button enabled with nothing to do. The unread dot was only drawn: the spoken label now says it, apart from the name Back finds the row by, and follows the row while it holds the focus.
This commit is contained in:
peter
2026-10-29 00:38:34 +01:00
parent 947efaba6e
commit fa271a31b9
6 changed files with 144 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/modules/notifications/NotificationsPanel.order.dom.test.tsx
+92
View File
@@ -49,6 +49,7 @@ vi.mock("../../components/ui/PageShell", async (importOriginal) => ({
}));
import NotificationsPanel from "./NotificationsPanel";
import { focusNavItem } from "../../lib/listNav";
// The server list goes through the real live query, so an optimistic patch of its cache is seen.
beforeEach(() => {
@@ -256,6 +257,61 @@ describe("NotificationsPanel · order", () => {
expect(listUnder("inbox.sectionRecent")).toEqual(["Ready 1"]);
});
it("the rows stay out of the band until the read after the write has landed", async () => {
// The write settling is not the list being fresh: a refetch over the network takes a moment,
// and until it lands the cache still holds what the read before the commit said.
let commit!: () => void;
vi.spyOn(api, "markAllNotificationsRead").mockImplementation(
() => new Promise((resolve) => (commit = () => resolve({ ok: true } as never))),
);
h.server = [server(1, 1 * H, false)];
h.client = [];
const { qc } = mount();
await loaded();
fireEvent.click(screen.getByRole("button", { name: "inbox.markAllRead" }));
await waitFor(() => expect(api.markAllNotificationsRead).toHaveBeenCalled());
void qc.invalidateQueries({ queryKey: ["notifications"] });
await waitFor(() =>
expect(qc.getQueryData<{ items: AppNotification[] }>(["notifications"])?.items[0]?.read).toBe(
false,
),
);
let land!: () => void;
vi.mocked(api.notifications).mockImplementation(
() =>
new Promise((resolve) => {
land = () => resolve({ items: [server(1, 1 * H, true)], total: 1 });
}),
);
await act(async () => commit());
await act(() => new Promise((r) => setTimeout(r, 30)));
expect(screen.queryByText(/inbox\.sectionNeedsYou/)).toBeNull();
await act(async () => land());
await waitFor(() => expect(listUnder("inbox.sectionRecent")).toEqual(["Ready 1"]));
expect(screen.queryByText(/inbox\.sectionNeedsYou/)).toBeNull();
});
it("does not offer Mark all read for a band that only holds what asks by its kind", async () => {
// An access-requests nudge stays up for as long as requests wait: the gesture cannot empty
// that band, and a button that does nothing when pressed is not offered.
h.server = [server(1, 1 * H, true)];
h.client = [
client(9, 5 * 60 * 1000, {
level: "warning",
title: "common.accessRequestsTitle",
message: "1 pending",
meta: { kind: "access-requests" },
}),
];
mount();
await loaded();
expect(screen.getByText("inbox.sectionNeedsYou:1")).toBeTruthy();
const button = screen.getByRole("button", { name: "inbox.markAllRead" });
expect(button.hasAttribute("disabled") || button.getAttribute("aria-disabled") === "true").toBe(
true,
);
});
it("a refused Mark all read brings the rows back at once, not at the next poll", async () => {
vi.spyOn(api, "markAllNotificationsRead").mockRejectedValue(new Error("offline"));
h.server = [server(1, 1 * H, false)];
@@ -270,6 +326,42 @@ describe("NotificationsPanel · order", () => {
await waitFor(() => expect(listUnder("inbox.sectionNeedsYou:1")).toEqual(["Ready 1"]));
});
it("says a row is unread while the keyboard is on it; its name for Back stays the same", async () => {
// The unread dot is only drawn: a read row held in Needs you sounded the same as an unread one.
vi.spyOn(api, "markNotificationRead").mockResolvedValue({ ok: true } as never);
h.server = [server(1, 1 * H, false), server(2, 2 * H, true)];
h.client = [];
mount();
await loaded();
const spoken = (text: string) => {
const row = screen.getByText(text).closest<HTMLElement>("[data-nav-index]")!;
act(() => focusNavItem(row.closest("section")!, Number(row.getAttribute("data-nav-index"))));
return [
document.activeElement?.getAttribute("aria-label"),
row.getAttribute("data-nav-name"),
];
};
expect(spoken("Ready 1")).toEqual(["inbox.unreadName", "inbox.downloadDone.title: Ready 1"]);
expect(spoken("Ready 2")).toEqual([
"inbox.downloadDone.title: Ready 2",
"inbox.downloadDone.title: Ready 2",
]);
// Marked read from its button, the row takes the focus before it reads read: what it is called
// follows once it does.
const row = screen.getByText("Ready 1").closest<HTMLElement>("[data-nav-index]")!;
const button = within(row).getByRole("button", { name: "inbox.markRead" });
button.focus();
h.server = [server(1, 1 * H, true), server(2, 2 * H, true)];
fireEvent.click(button);
await waitFor(() =>
expect(within(row).queryByRole("button", { name: "inbox.markRead" })).toBeNull(),
);
expect(document.activeElement).toBe(row);
await waitFor(() =>
expect(row.getAttribute("aria-label")).toBe("inbox.downloadDone.title: Ready 1"),
);
});
it("names each row by what it is about, so two of one kind tell apart", async () => {
// A screen reader hears the name while the keyboard is on the row, and Back finds the row it
// left by it: "Download ready" alone was every download's name.
frontend/src/modules/notifications/NotificationsPanel.tsx
+21 -7
View File
@@ -43,7 +43,7 @@ import {
type VideoWatchedMeta,
} from "../../lib/notifications";
import { channelYouTubeUrl, formatDate } from "../../lib/format";
import { entryKey, keyOf, orderInbox, type InboxEntry } from "../../lib/inboxOrder";
import { clientAsks, entryKey, keyOf, orderInbox, type InboxEntry } from "../../lib/inboxOrder";
import { Button } from "../../components/ui/Button";
import { IconButton } from "../../components/ui/IconButton";
import { Pressable } from "../../components/ui/Pressable";
@@ -128,7 +128,13 @@ export default function NotificationsPanel() {
mutationFn: api.markAllNotificationsRead,
// Settled, not only succeeded: a refused write brings the rows back unread at once, rather than
// leaving them read until the next poll moves them under the reader.
onSettled: refresh,
// And it settles once the read after it has landed: until then the cache holds what a read
// before the commit said, and the band would take those rows back the moment the mask below lifts.
onSettled: () =>
Promise.all([
qc.invalidateQueries({ queryKey: qk.notifications() }),
qc.invalidateQueries({ queryKey: qk.notifUnread() }),
]),
meta: { failTitle: "errors.writeFailed.notifReadAll" },
});
const dismissMut = useMutation({
@@ -154,8 +160,12 @@ export default function NotificationsPanel() {
const serverUnread = serverItems.some((n) => !n.read);
const hasAny = serverItems.length > 0 || clientItems.length > 0;
// A band of rows already read still offers the gesture that empties it.
const canMarkAll = serverUnread || clientUnread > 0 || order.needsYou.length > 0;
// A band of rows already read still offers the gesture that empties it — but not one that only
// holds what asks by its kind (an access-requests nudge): pressing it would change nothing.
const canMarkAll =
serverUnread ||
clientUnread > 0 ||
order.needsYou.some((e) => e.src === "server" || !clientAsks(e.n));
function markAll() {
markAllClientRead();
@@ -688,11 +698,15 @@ function NotificationRow({
title = t(DONE_TITLE[d.kind ?? ""] ?? "inbox.downloadDone.title");
body = d.title || n.body;
}
// Named by what it is about, not its kind alone: every "Download ready" read the same to a screen
// reader, and Back could not tell the row it was opened from by its name.
const name = body ? `${title}: ${body}` : title;
return (
<div
// Named by what it is about, not its kind alone: every "Download ready" read the same to a
// screen reader, and Back could not tell the row it was opened from by its name.
{...navItemAttrs(navIndex, body ? `${title}: ${body}` : title)}
// The unread state is spoken too (the dot is only drawn), apart from the name Back finds it by.
{...navItemAttrs(navIndex, name, {
label: n.read ? undefined : t("inbox.unreadName", { name }),
})}
{...rowProps}
className={`${SURFACE.card} group p-3.5 flex items-start gap-3 transition ${
n.read ? "opacity-70" : ""