codeText(child as DOMNode)).join("");
+}
+
+function codeLanguage(node: Element): string | undefined {
+ const classes = node.attribs.class ?? "";
+ if (/(?:^|\s)(?:no-highlight|nohighlight)(?:\s|$)/i.test(classes))
+ return "text";
+ return (
+ /(?:^|\s)lang(?:uage)?-([\w+-]+)/i.exec(classes)?.[1]?.toLowerCase() ??
+ node.attribs["data-language"]?.toLowerCase()
+ );
+}
+
+function ReaderCodeBlock({
+ code,
+ language,
+ id,
+ dir,
+ label,
+}: {
+ code: string;
+ language?: string;
+ id?: string;
+ dir?: string;
+ label?: string;
+}) {
+ const [highlighted, setHighlighted] = useState<{
+ code: string;
+ language?: string;
+ html: string | null;
+ }>();
+
+ useEffect(() => {
+ let active = true;
+ let cancel = () => {};
+ if (!canHighlightCode(code, language)) return;
+ // Load only for articles with code. The plain block is readable immediately.
+ void import("./highlightCodeClient")
+ .then(({ requestCodeHighlight }) => {
+ if (active)
+ cancel = requestCodeHighlight(code, language, (html) => {
+ setHighlighted({ code, language, html });
+ });
+ })
+ .catch(() => {
+ /* Keep plain text when offline or a chunk cannot load. */
+ });
+ return () => {
+ active = false;
+ cancel();
+ };
+ }, [code, language]);
+
+ const html =
+ highlighted?.code === code && highlighted.language === language
+ ? highlighted.html
+ : null;
+ const content = useMemo(() => (html ? parse(html) : code), [html, code]);
+
+ return (
+
+ {content}
+
+ );
+}
+
+export function replaceReaderCodeBlock(node: DOMNode) {
+ if (!(node instanceof Element) || node.name !== "pre") return;
+ const code = node.children.find(
+ (child) => child instanceof Element && child.name === "code",
+ );
+ return (
+
+ );
+}
diff --git a/apps/app/src/components/content-reader/codeHighlightingPolicy.ts b/apps/app/src/components/content-reader/codeHighlightingPolicy.ts
new file mode 100644
index 000000000..e920151af
--- /dev/null
+++ b/apps/app/src/components/content-reader/codeHighlightingPolicy.ts
@@ -0,0 +1,7 @@
+export function canHighlightCode(code: string, language?: string): boolean {
+ return (
+ Boolean(code.trim()) &&
+ code.length <= (language ? 20_000 : 5_000) &&
+ !/^(?:text|plain|plaintext|none)$/.test(language ?? "")
+ );
+}
diff --git a/apps/app/src/components/content-reader/highlightCode.ts b/apps/app/src/components/content-reader/highlightCode.ts
new file mode 100644
index 000000000..5c95b6b88
--- /dev/null
+++ b/apps/app/src/components/content-reader/highlightCode.ts
@@ -0,0 +1,57 @@
+import hljs from "highlight.js/lib/core";
+import bash from "highlight.js/lib/languages/bash";
+import css from "highlight.js/lib/languages/css";
+import go from "highlight.js/lib/languages/go";
+import java from "highlight.js/lib/languages/java";
+import javascript from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+import python from "highlight.js/lib/languages/python";
+import rust from "highlight.js/lib/languages/rust";
+import sql from "highlight.js/lib/languages/sql";
+import typescript from "highlight.js/lib/languages/typescript";
+import xml from "highlight.js/lib/languages/xml";
+import yaml from "highlight.js/lib/languages/yaml";
+import { canHighlightCode } from "./codeHighlightingPolicy";
+
+for (const [name, grammar] of Object.entries({
+ bash,
+ css,
+ go,
+ java,
+ javascript,
+ json,
+ python,
+ rust,
+ sql,
+ typescript,
+ xml,
+ yaml,
+})) {
+ hljs.registerLanguage(name, grammar);
+}
+
+const DETECT_LANGUAGES = [
+ "javascript",
+ "python",
+ "bash",
+ "css",
+ "xml",
+ "json",
+ "sql",
+];
+
+export function highlightCode(code: string, language?: string): string | null {
+ // Bound work on imported content. Oversized blocks remain selectable text.
+ if (!canHighlightCode(code, language)) return null;
+ if (language && !hljs.getLanguage(language)) return null;
+
+ try {
+ const result = language
+ ? hljs.highlight(code, { language, ignoreIllegals: true })
+ : hljs.highlightAuto(code, DETECT_LANGUAGES);
+ if (!language && result.relevance < 2) return null;
+ return result.value;
+ } catch {
+ return null;
+ }
+}
diff --git a/apps/app/src/components/content-reader/highlightCode.worker.ts b/apps/app/src/components/content-reader/highlightCode.worker.ts
new file mode 100644
index 000000000..21fbee4e5
--- /dev/null
+++ b/apps/app/src/components/content-reader/highlightCode.worker.ts
@@ -0,0 +1,8 @@
+import { highlightCode } from "./highlightCode";
+
+self.onmessage = (
+ event: MessageEvent<{ id: number; code: string; language?: string }>,
+) => {
+ const { id, code, language } = event.data;
+ self.postMessage({ id, html: highlightCode(code, language) });
+};
diff --git a/apps/app/src/components/content-reader/highlightCodeClient.ts b/apps/app/src/components/content-reader/highlightCodeClient.ts
new file mode 100644
index 000000000..f9d9040f5
--- /dev/null
+++ b/apps/app/src/components/content-reader/highlightCodeClient.ts
@@ -0,0 +1,51 @@
+let worker: Worker | undefined;
+let nextId = 0;
+const pending = new Map
void>();
+
+function getWorker() {
+ if (worker) return worker;
+ const currentWorker = new Worker(
+ new URL("./highlightCode.worker.ts", import.meta.url),
+ {
+ type: "module",
+ },
+ );
+ worker = currentWorker;
+ currentWorker.onmessage = (
+ event: MessageEvent<{ id: number; html: string | null }>,
+ ) => {
+ const callback = pending.get(event.data.id);
+ pending.delete(event.data.id);
+ callback?.(event.data.html);
+ };
+ currentWorker.onerror = () => {
+ if (worker !== currentWorker) return;
+ currentWorker.terminate();
+ worker = undefined;
+ for (const callback of pending.values()) callback(null);
+ pending.clear();
+ };
+ return worker;
+}
+
+export function requestCodeHighlight(
+ code: string,
+ language: string | undefined,
+ onResult: (html: string | null) => void,
+): () => void {
+ const id = nextId++;
+ try {
+ const highlighter = getWorker();
+ pending.set(id, onResult);
+ highlighter.postMessage({ id, code, language });
+ } catch {
+ pending.delete(id);
+ onResult(null);
+ }
+ return () => {
+ if (pending.delete(id) && pending.size === 0) {
+ worker?.terminate();
+ worker = undefined;
+ }
+ };
+}
diff --git a/apps/app/src/components/feed/RefetchItemsButton.tsx b/apps/app/src/components/feed/RefetchItemsButton.tsx
index 07a7a0edd..b6d5f9e3c 100644
--- a/apps/app/src/components/feed/RefetchItemsButton.tsx
+++ b/apps/app/src/components/feed/RefetchItemsButton.tsx
@@ -19,6 +19,12 @@ import { useFetchNewData } from "~/lib/data/store";
import { useReconciliationDisplayStatus } from "~/lib/data/reconciliation";
import { useShortcut } from "~/lib/hooks/useShortcut";
+const reconciliationMessages = {
+ syncing: "Checking for newer data",
+ retrying: "Data may be stale. Retrying automatically",
+ stale: "Data may be stale. Refresh to try again.",
+};
+
function formatRelativeTime(targetMs: number, now: number): string {
const diffMs = targetMs - now;
if (diffMs <= 0) return "now";
@@ -30,44 +36,15 @@ function formatRelativeTime(targetMs: number, now: number): string {
return `${diffHr}h`;
}
-export function RefetchItemsButton() {
- const location = useLocation();
- const fetchNewData = useFetchNewData();
- const loading = useLoadingMode();
+function useRefreshCooldown(active: boolean) {
const nextRefreshAt = useNextRefreshAt();
- const reconciliationStatus = useReconciliationDisplayStatus();
-
- // Track current time in state so the cooldown check is pure during render.
- // Only updated via the timeout callback (async) to satisfy the lint rule.
const [now, setNow] = useState(() => Date.now());
- const isMachineActive = useIsLoadingActive();
- const isRateLimited = nextRefreshAt !== null && nextRefreshAt > now;
-
- const isReconciling = reconciliationStatus !== "idle";
- const isRefreshing = isMachineActive || reconciliationStatus === "syncing";
- const isDisabled =
- isRefreshing ||
- reconciliationStatus === "retrying" ||
- isRateLimited ||
- loading.mode === "initialLoad" ||
- loading.mode === "backgroundRefresh";
-
- // Show check icon when the user is up to date (cooldown active),
- // refresh icon when they can refresh again (cooldown expired/absent).
- const showCheck = isRateLimited && !isMachineActive && !isReconciling;
- const statusLabel =
- reconciliationStatus === "syncing"
- ? "Syncing"
- : reconciliationStatus === "retrying"
- ? "Retrying"
- : "Refresh";
-
// Tick `now` so the tooltip text updates live and the button re-enables
// when the cooldown expires. Chained timeouts stop at expiry and use fewer
// updates for longer cooldowns.
useEffect(() => {
- if (nextRefreshAt === null || location.pathname !== "/") return;
+ if (nextRefreshAt === null || !active) return;
let timeout: ReturnType | undefined;
@@ -91,7 +68,44 @@ export function RefetchItemsButton() {
scheduleTick();
return () => clearTimeout(timeout);
- }, [location.pathname, nextRefreshAt]);
+ }, [active, nextRefreshAt]);
+
+ return {
+ isRateLimited: nextRefreshAt !== null && nextRefreshAt > now,
+ remainingTime:
+ nextRefreshAt === null ? null : formatRelativeTime(nextRefreshAt, now),
+ };
+}
+
+export function RefetchItemsButton() {
+ const location = useLocation();
+ const fetchNewData = useFetchNewData();
+ const loading = useLoadingMode();
+ const reconciliationStatus = useReconciliationDisplayStatus();
+
+ const isMachineActive = useIsLoadingActive();
+ const { isRateLimited, remainingTime } = useRefreshCooldown(
+ location.pathname === "/",
+ );
+
+ const isReconciling = reconciliationStatus !== "idle";
+ const isRefreshing = isMachineActive || reconciliationStatus === "syncing";
+ const isDisabled =
+ isRefreshing ||
+ reconciliationStatus === "retrying" ||
+ isRateLimited ||
+ loading.mode === "initialLoad" ||
+ loading.mode === "backgroundRefresh";
+
+ // Show check icon when the user is up to date (cooldown active),
+ // refresh icon when they can refresh again (cooldown expired/absent).
+ const showCheck = isRateLimited && !isMachineActive && !isReconciling;
+ const statusLabel =
+ reconciliationStatus === "syncing"
+ ? "Syncing"
+ : reconciliationStatus === "retrying"
+ ? "Retrying"
+ : "Refresh";
const onClick = useCallback(async () => {
if (isDisabled) return;
@@ -133,16 +147,12 @@ export function RefetchItemsButton() {
{button}
- {reconciliationStatus === "syncing" ? (
- "Checking for newer data"
- ) : reconciliationStatus === "retrying" ? (
- "Data may be stale. Retrying automatically"
+ {reconciliationStatus !== "idle" ? (
+ reconciliationMessages[reconciliationStatus]
) : (
<>
Refresh available in{" "}
-
- {formatRelativeTime(nextRefreshAt!, now)}
-
+ {remainingTime}
)}
diff --git a/apps/app/src/components/feed/read/ArticleContent.tsx b/apps/app/src/components/feed/read/ArticleContent.tsx
index 80237e8f3..9b0078c76 100644
--- a/apps/app/src/components/feed/read/ArticleContent.tsx
+++ b/apps/app/src/components/feed/read/ArticleContent.tsx
@@ -4,6 +4,7 @@ import parse, { Element } from "html-react-parser";
import type { HTMLReactParserOptions } from "html-react-parser";
import { CustomVideoPlayer } from "~/components/CustomVideoPlayer";
import { flattenReaderImages } from "~/components/content-reader/flattenReaderImages";
+import { replaceReaderCodeBlock } from "~/components/content-reader/ReaderCodeBlock";
import { ArticleImageLightbox } from "~/components/feed/read/ArticleImageLightbox";
import { useFlagState } from "~/lib/hooks/useFlagState";
import classes from "~/components/feed/read/article.module.css";
@@ -15,14 +16,25 @@ function extractYouTubeVideoId(src: string): string | null {
return match?.[1] ?? null;
}
-function findImageSrc(node: Element): string | null {
- if (node.name === "img") return node.attribs.src ?? null;
- if (node.name === "source")
- return node.attribs.srcset?.split(/\s/)[0] ?? null;
+function findImage(node: Element): { src: string; alt?: string } | null {
+ if (node.name === "img") {
+ return node.attribs.src
+ ? { src: node.attribs.src, alt: node.attribs.alt }
+ : null;
+ }
+ if (node.name === "source") {
+ const src = node.attribs.srcset?.split(/\s/)[0];
+ const image = node.parent?.children.find(
+ (child) => child instanceof Element && child.name === "img",
+ );
+ return src
+ ? { src, alt: image instanceof Element ? image.attribs.alt : undefined }
+ : null;
+ }
for (const child of node.children) {
if (child instanceof Element) {
- const src = findImageSrc(child);
- if (src) return src;
+ const image = findImage(child);
+ if (image) return image;
}
}
return null;
@@ -33,16 +45,25 @@ function isImageContainer(node: Element): boolean {
const cls = node.attribs.class ?? "";
if (cls.includes("image-link") || cls.includes("image2")) return true;
}
- if (node.name === "figure") return !!findImageSrc(node);
+ if (node.name === "figure") return true;
if (node.attribs.class?.includes("captioned-image-container")) return true;
return false;
}
-export function ArticleContent({ content }: { content: string }) {
+export function ArticleContent({
+ content,
+ simplified = false,
+}: {
+ content: string;
+ simplified?: boolean;
+}) {
const [videoPlayer] = useFlagState("CUSTOM_VIDEO_PLAYER");
const options: HTMLReactParserOptions = {
replace: (domNode) => {
+ const codeBlock = replaceReaderCodeBlock(domNode);
+ if (codeBlock) return codeBlock;
+ if (simplified) return;
if (!(domNode instanceof Element)) return;
// Open external links in new tabs. In-page links include footnote refs.
@@ -55,16 +76,9 @@ export function ArticleContent({ content }: { content: string }) {
domNode.attribs.rel = "noopener noreferrer";
}
- if (domNode.name === "img") {
- const src = domNode.attribs.src ?? "";
- const alt = domNode.attribs.alt ?? "";
- if (!src) return;
- return ;
- }
-
- if (isImageContainer(domNode)) {
- const src = findImageSrc(domNode);
- if (src) return ;
+ if (domNode.name === "img" || isImageContainer(domNode)) {
+ const image = findImage(domNode);
+ if (image) return ;
}
if (domNode.name !== "iframe") return;
diff --git a/apps/app/src/components/feed/read/ArticleImageLightbox.tsx b/apps/app/src/components/feed/read/ArticleImageLightbox.tsx
index 7a134a6d2..be324cc87 100644
--- a/apps/app/src/components/feed/read/ArticleImageLightbox.tsx
+++ b/apps/app/src/components/feed/read/ArticleImageLightbox.tsx
@@ -32,6 +32,8 @@ export function ArticleImageLightbox({
aria-disabled={failed}
style={{
display: "block",
+ width: failed ? "100%" : undefined,
+ maxWidth: failed ? "100%" : undefined,
cursor: failed ? "default" : "zoom-in",
}}
onClick={toggle}
@@ -41,8 +43,16 @@ export function ArticleImageLightbox({
data-image-fallback
role="img"
aria-label={alt}
- className="bg-muted block aspect-square size-48 max-w-full rounded"
- />
+ className="bg-muted relative block aspect-video w-full overflow-hidden rounded"
+ >
+ {alt && (
+
+
+ {alt}
+
+
+ )}
+
) : (
void;
showPaginationLoader: boolean;
showPaginationEnd: boolean;
+ toggleRead: (id: string, mutate: () => boolean) => boolean;
}) {
const navigationItems = useMemo(
() => fullComputedSections.flatMap((section) => section.items),
@@ -281,6 +285,7 @@ function ContentStatusSectionList({
navigationItems,
navigationIsGridLayout,
navigationSectionInfo,
+ toggleRead,
);
const handleSectionMarkAsRead = useCallback(
(sectionIndex: number) => {
@@ -323,104 +328,129 @@ function ContentStatusSectionList({
}
export function RenderViewItems() {
- const { feeds, hasFetchedFeeds } = useFeeds();
- const { hasFetchedFeedCategories } = useFeedCategories();
-
- const hasInitialData = useHasInitialData();
-
- const filteredFeedItemsOrder = useFilteredContentOrder();
-
const currentView = useAtomValue(viewFilterAtom);
const feedFilter = useAtomValue(feedFilterAtom);
const categoryFilter = useAtomValue(categoryFilterAtom);
- const {
- sentinelRef,
- paginationState,
- visibleItems: visibleFilteredFeedItemsOrder,
- hasRenderedAllItems,
- } = useViewListScroll(filteredFeedItemsOrder);
+ const dateFilter = useAtomValue(dateFilterAtom);
+ const contentStatusFilter = useAtomValue(contentStatusFilterAtom);
+ const viewListKey = `view-${currentView?.id ?? "none"}-${buildContentStatusKey(contentStatusFilter)}`;
+ const scopeKey = `${viewListKey}-feed-${feedFilter}-tag-${categoryFilter}-date-${dateFilter}`;
+
+ return ;
+}
+
+function ViewListSkeleton({ layout }: { layout: ViewSection["layout"] }) {
+ switch (layout) {
+ case VIEW_LAYOUT.LARGE_LIST:
+ return ;
+ case VIEW_LAYOUT.GRID:
+ return ;
+ case VIEW_LAYOUT.LARGE_GRID:
+ return ;
+ default:
+ return ;
+ }
+}
+
+function getViewPlaceholder({
+ hasInitialData,
+ hasFetchedFeeds,
+ hasFetchedFeedCategories,
+ hasFeeds,
+ hasItems,
+ paginationState,
+ layout,
+}: {
+ hasInitialData: boolean;
+ hasFetchedFeeds: boolean;
+ hasFetchedFeedCategories: boolean;
+ hasFeeds: boolean;
+ hasItems: boolean;
+ paginationState: ReturnType["paginationState"];
+ layout: ViewSection["layout"];
+}) {
+ if (!hasInitialData) return ;
+ if (hasItems) return null;
+ if (
+ paginationState.isLoaded &&
+ hasFetchedFeeds &&
+ !hasFeeds &&
+ Object.keys(bookmarksStore.getState().snapshot()).length === 0
+ ) {
+ return ;
+ }
+ if (!paginationState.isLoaded || paginationState.isFetching) {
+ return ;
+ }
+ if (hasFetchedFeeds && hasFetchedFeedCategories) return ;
+ return null;
+}
- const { computedSections: fullComputedSections, baseLayout } =
- useViewSections(currentView, filteredFeedItemsOrder);
- const { computedSections: visibleComputedSections } = useViewSections(
+function ViewVisit({ viewListKey }: { viewListKey: string }) {
+ const { feeds, hasFetchedFeeds } = useFeeds();
+ const { hasFetchedFeedCategories } = useFeedCategories();
+ const hasInitialData = useHasInitialData();
+ const filteredItemIds = useFilteredContentOrder();
+ const currentView = useAtomValue(viewFilterAtom);
+ const { computedSections, baseLayout } = useViewSections(
currentView,
- visibleFilteredFeedItemsOrder,
+ filteredItemIds,
);
- const contentStatusFilter = useAtomValue(contentStatusFilterAtom);
- const selectedItemId = useAtomValue(selectedItemIdAtom);
- const setSelectedItemId = useSetAtom(selectedItemIdAtom);
- const navigationItems = useMemo(
+ const { sections: fullComputedSections, toggleRead } = useSoftReads(
+ computedSections,
+ currentView,
+ );
+ const filteredFeedItemsOrder = useMemo(
() => fullComputedSections.flatMap((section) => section.items),
[fullComputedSections],
);
+ const { sentinelRef, paginationState, visibleItems, hasRenderedAllItems } =
+ useViewListScroll(filteredFeedItemsOrder);
+ const visibleComputedSections = useMemo(() => {
+ const visibleIds = new Set(visibleItems);
+ return fullComputedSections.map((section) => ({
+ ...section,
+ items: section.items.filter((id) => visibleIds.has(id)),
+ }));
+ }, [fullComputedSections, visibleItems]);
+ const selectedItemId = useAtomValue(selectedItemIdAtom);
+ const setSelectedItemId = useSetAtom(selectedItemIdAtom);
const rootListReady =
hasInitialData &&
- (navigationItems.length > 0 ||
+ (filteredFeedItemsOrder.length > 0 ||
(hasFetchedFeeds &&
hasFetchedFeedCategories &&
(paginationState.isLoaded || feeds.length === 0)));
useRootItemScrollRestoration({
- activeItemIds: navigationItems,
+ activeItemIds: filteredFeedItemsOrder,
selectedItemId,
setSelectedItemId,
ready: rootListReady,
});
- const contentStatusKey = buildContentStatusKey(contentStatusFilter);
- const viewListKey = `view-${currentView?.id ?? "none"}-${contentStatusKey}`;
- const contentStatusContextKey = `${viewListKey}-feed-${feedFilter}-tag-${categoryFilter}`;
const shouldShowPaginationEnd =
hasRenderedAllItems &&
- paginationState?.hasMore === false &&
+ paginationState.hasMore === false &&
paginationState.isFetching !== true;
- if (!hasInitialData) {
- return ;
- }
-
- if (
- paginationState.isLoaded &&
- hasFetchedFeeds &&
- !feeds.length &&
- filteredFeedItemsOrder.length === 0 &&
- Object.keys(bookmarksStore.getState().snapshot()).length === 0
- ) {
- return ;
- }
-
- // Show skeletons while feed items are being fetched
- if (
- (!paginationState.isLoaded || paginationState.isFetching) &&
- filteredFeedItemsOrder.length === 0
- ) {
- switch (baseLayout) {
- case VIEW_LAYOUT.LARGE_LIST:
- return ;
- case VIEW_LAYOUT.GRID:
- return ;
- case VIEW_LAYOUT.LARGE_GRID:
- return ;
- default:
- return ;
- }
- }
-
- if (
- hasFetchedFeeds &&
- paginationState.isLoaded &&
- hasFetchedFeedCategories &&
- !filteredFeedItemsOrder.length
- ) {
- return ;
- }
+ const placeholder = getViewPlaceholder({
+ hasInitialData,
+ hasFetchedFeeds,
+ hasFetchedFeedCategories,
+ hasFeeds: feeds.length > 0,
+ hasItems: filteredFeedItemsOrder.length > 0,
+ paginationState,
+ layout: baseLayout,
+ });
+ if (placeholder) return placeholder;
return (
);
diff --git a/apps/app/src/components/feed/view-lists/softReads.ts b/apps/app/src/components/feed/view-lists/softReads.ts
new file mode 100644
index 000000000..71d85999c
--- /dev/null
+++ b/apps/app/src/components/feed/view-lists/softReads.ts
@@ -0,0 +1,132 @@
+import type { ViewSection } from "./useViewSections";
+import type { ApplicationBookmark } from "~/server/mixed-content/projection";
+import type { ApplicationView, DatabaseFeedCategory } from "~/server/db/schema";
+import type { FeedItemListProjection } from "~/lib/data/feed-items/listProjection";
+import type { ContentStatusFilter } from "~/lib/content-status";
+import {
+ createFeedItemFilterIndex,
+ createFeedItemFilterPredicate,
+} from "~/lib/data/feed-items/listProjection";
+import { matchesScope } from "~/lib/data/mixed-content/bookmarkProjection";
+
+export type SoftReadPosition = { sectionKey: string; index: number };
+
+export function getEligibleSoftReadIds({
+ positions,
+ bookmarksById,
+ feedItemsById,
+ feedCategories,
+ views,
+ currentView,
+ categoryFilter,
+ feedFilter,
+ saveStatus,
+}: {
+ positions: ReadonlyMap;
+ bookmarksById: Record;
+ feedItemsById: Record;
+ feedCategories: DatabaseFeedCategory[];
+ views: ApplicationView[];
+ currentView: ApplicationView | null;
+ categoryFilter: number;
+ feedFilter: number;
+ saveStatus: ContentStatusFilter["saveStatus"];
+}) {
+ if (saveStatus !== "saved" || positions.size === 0) return [];
+
+ const filterIndex = createFeedItemFilterIndex(feedCategories, views);
+ const makeFeedPredicate = (archiveStatus: "unread" | "archived") =>
+ createFeedItemFilterPredicate({
+ contentStatusFilter: { saveStatus, archiveStatus },
+ categoryFilter,
+ feedFilter,
+ viewFilter: currentView,
+ filterIndex,
+ });
+ const acceptsUnreadFeedItem = makeFeedPredicate("unread");
+ const acceptsArchivedFeedItem = makeFeedPredicate("archived");
+ const bookmarkScope =
+ feedFilter >= 0
+ ? ({ type: "feed", feedId: feedFilter } as const)
+ : categoryFilter >= 0
+ ? ({ type: "tag", tagId: categoryFilter } as const)
+ : currentView
+ ? ({ type: "view", viewId: currentView.id } as const)
+ : null;
+
+ return [...positions.keys()].filter((id) => {
+ const bookmark = bookmarksById[id];
+ if (bookmark) {
+ return (
+ bookmark.isSaved &&
+ bookmarkScope !== null &&
+ matchesScope(bookmark, bookmarkScope, views)
+ );
+ }
+ const feedItem = feedItemsById[id];
+ return Boolean(
+ feedItem &&
+ (feedItem.isWatched
+ ? acceptsArchivedFeedItem(feedItem)
+ : acceptsUnreadFeedItem(feedItem)),
+ );
+ });
+}
+
+export function softReadSectionKey(section: ViewSection) {
+ return section.isUncategorized
+ ? "uncategorized"
+ : `${section.itemType}:${section.itemId}`;
+}
+
+export function retainEligibleSoftReadPositions(
+ positions: ReadonlyMap,
+ eligibleSections: ViewSection[],
+) {
+ const eligibleSectionKeyById = new Map();
+ for (const section of eligibleSections) {
+ const sectionKey = softReadSectionKey(section);
+ for (const id of section.items) eligibleSectionKeyById.set(id, sectionKey);
+ }
+
+ return new Map(
+ [...positions].filter(
+ ([id, position]) =>
+ eligibleSectionKeyById.get(id) === position.sectionKey,
+ ),
+ );
+}
+
+/** Restore individually toggled items without freezing new pages or other removals. */
+export function retainSoftReadPositions(
+ sections: ViewSection[],
+ positions: ReadonlyMap,
+): ViewSection[] {
+ if (positions.size === 0) return sections;
+
+ const retainedBySection = new Map>();
+ for (const [id, position] of positions) {
+ const entries = retainedBySection.get(position.sectionKey) ?? [];
+ entries.push([id, position.index]);
+ retainedBySection.set(position.sectionKey, entries);
+ }
+
+ let startIndex = 0;
+ return sections.map((section) => {
+ const retained = retainedBySection.get(softReadSectionKey(section)) ?? [];
+ retained.sort((left, right) => left[1] - right[1]);
+ const liveItems = section.items.filter((id) => !positions.has(id));
+ const items: string[] = [];
+ let liveIndex = 0;
+ for (const [id, index] of retained) {
+ while (items.length < index && liveIndex < liveItems.length) {
+ items.push(liveItems[liveIndex++]!);
+ }
+ items.push(id);
+ }
+ items.push(...liveItems.slice(liveIndex));
+ const result = { ...section, items, startIndex };
+ startIndex += items.length;
+ return result;
+ });
+}
diff --git a/apps/app/src/components/feed/view-lists/useSoftReads.ts b/apps/app/src/components/feed/view-lists/useSoftReads.ts
new file mode 100644
index 000000000..91f8eabcd
--- /dev/null
+++ b/apps/app/src/components/feed/view-lists/useSoftReads.ts
@@ -0,0 +1,131 @@
+import { useCallback, useEffect, useId, useMemo, useState } from "react";
+import { useAtomValue } from "jotai";
+import {
+ getEligibleSoftReadIds,
+ retainEligibleSoftReadPositions,
+ retainSoftReadPositions,
+ softReadSectionKey,
+} from "./softReads";
+import { useViewSections } from "./useViewSections";
+import type { SoftReadPosition } from "./softReads";
+import type { ViewSection } from "./useViewSections";
+import type { ApplicationView } from "~/server/db/schema";
+import {
+ categoryFilterAtom,
+ contentStatusFilterAtom,
+ feedFilterAtom,
+} from "~/lib/data/atoms";
+import { bookmarksStore } from "~/lib/data/bookmarks/store";
+import { useFeedCategories } from "~/lib/data/feed-categories";
+import { feedItemsStore, useFeedItemsListProjection } from "~/lib/data/store";
+import { useViews } from "~/lib/data/views";
+import {
+ clearRetainedEntityPins,
+ setRetainedEntityPins,
+} from "~/lib/data/page-retention";
+
+export function useSoftReads(
+ sections: ViewSection[],
+ currentView: ApplicationView | null,
+) {
+ const contentStatusFilter = useAtomValue(contentStatusFilterAtom);
+ const { saveStatus } = contentStatusFilter;
+ const categoryFilter = useAtomValue(categoryFilterAtom);
+ const feedFilter = useAtomValue(feedFilterAtom);
+ const owner = useId();
+ const [positions, setPositions] = useState(
+ new Map(),
+ );
+ const feedItems = useFeedItemsListProjection();
+ const { feedCategories } = useFeedCategories();
+ const { views } = useViews();
+ const bookmarkRevision = bookmarksStore.useRevision();
+ const eligibleIds = useMemo(() => {
+ void bookmarkRevision;
+ return getEligibleSoftReadIds({
+ positions,
+ bookmarksById: bookmarksStore.getState().snapshot(),
+ feedItemsById: feedItems.getItems(),
+ feedCategories,
+ views,
+ currentView,
+ categoryFilter,
+ feedFilter,
+ saveStatus,
+ });
+ }, [
+ bookmarkRevision,
+ categoryFilter,
+ currentView,
+ feedFilter,
+ feedCategories,
+ feedItems,
+ positions,
+ saveStatus,
+ views,
+ ]);
+ const { computedSections: eligibleSections } = useViewSections(
+ currentView,
+ eligibleIds,
+ );
+ const activePositions = useMemo(
+ () => retainEligibleSoftReadPositions(positions, eligibleSections),
+ [positions, eligibleSections],
+ );
+ const retainedSections = useMemo(
+ () => retainSoftReadPositions(sections, activePositions),
+ [sections, activePositions],
+ );
+
+ const pinPositions = useCallback(
+ (nextPositions: ReadonlyMap) => {
+ const bookmarkIds: string[] = [];
+ const feedItemIds: string[] = [];
+ for (const id of nextPositions.keys()) {
+ if (bookmarksStore.getState().getBookmark(id)) bookmarkIds.push(id);
+ else if (feedItemsStore.getState().feedItemsDict[id])
+ feedItemIds.push(id);
+ }
+ setRetainedEntityPins(owner, { bookmarkIds, feedItemIds });
+ },
+ [owner],
+ );
+
+ if (activePositions.size !== positions.size) setPositions(activePositions);
+ useEffect(
+ () => pinPositions(activePositions),
+ [activePositions, pinPositions],
+ );
+ useEffect(() => () => clearRetainedEntityPins(owner), [owner]);
+
+ const toggleRead = useCallback(
+ (id: string, mutate: () => boolean) => {
+ if (saveStatus !== "saved" || activePositions.has(id)) return mutate();
+ const section = retainedSections.find((candidate) =>
+ candidate.items.includes(id),
+ );
+ if (!section) return mutate();
+ const nextPositions = new Map(activePositions);
+ nextPositions.set(id, {
+ sectionKey: softReadSectionKey(section),
+ index: section.items.indexOf(id),
+ });
+ // Pin before the optimistic mutation can remove the last page reference.
+ pinPositions(nextPositions);
+ try {
+ if (!mutate()) {
+ pinPositions(activePositions);
+ return false;
+ }
+ } catch (error) {
+ pinPositions(activePositions);
+ throw error;
+ }
+ setPositions(nextPositions);
+ return true;
+ },
+ [activePositions, pinPositions, retainedSections, saveStatus],
+ );
+
+ return { sections: retainedSections, toggleRead };
+}
diff --git a/apps/app/src/lib/data/loading-machine.ts b/apps/app/src/lib/data/loading-machine.ts
index c50a0e64d..942de50e3 100644
--- a/apps/app/src/lib/data/loading-machine.ts
+++ b/apps/app/src/lib/data/loading-machine.ts
@@ -9,6 +9,7 @@ type LoadingMachineEvent =
// Initial reconciliation
| { type: "INITIAL_LOAD_START" }
| { type: "RECONCILIATION_COMPLETE" }
+ | { type: "RECONCILIATION_FAILED" }
// Background RSS refresh
| { type: "BACKGROUND_REFRESH_START"; totalFeeds: number }
@@ -168,6 +169,7 @@ export const loadingMachine = setup({
initialLoad: {
on: {
RECONCILIATION_COMPLETE: { target: "idle" },
+ RECONCILIATION_FAILED: { target: "idle" },
// Import can interrupt initial load
IMPORT_START: {
target: "importing",
@@ -219,6 +221,7 @@ export const loadingMachine = setup({
manualRefresh: {
on: {
RECONCILIATION_COMPLETE: { target: "idle" },
+ RECONCILIATION_FAILED: { target: "idle" },
BACKGROUND_REFRESH_START: {
target: "backgroundRefresh",
actions: assign({
diff --git a/apps/app/src/lib/data/reconciliation.ts b/apps/app/src/lib/data/reconciliation.ts
index 247351c2c..7ba4323c5 100644
--- a/apps/app/src/lib/data/reconciliation.ts
+++ b/apps/app/src/lib/data/reconciliation.ts
@@ -46,6 +46,7 @@ import {
getReconciliationTargetKey,
MAX_TARGETED_RECONCILIATION_TARGETS,
} from "~/lib/reconciliation";
+import { ITEMS_PER_PAGE } from "~/server/api/constants";
import { DEFAULT_CONTENT_STATUS_FILTER } from "~/lib/content-status";
type PersistedStore = {
@@ -114,7 +115,12 @@ function firstPageManifest(
);
const feedItems: ReconciliationEntityManifestEntry[] = [];
const bookmarks: ReconciliationEntityManifestEntry[] = [];
- for (const referenceKey of rootPage.value.referenceKeys) {
+ // Optimistic membership can exceed a server page. Omitted versions are
+ // returned as upserts; cached references and pagination remain intact.
+ for (const referenceKey of rootPage.value.referenceKeys.slice(
+ 0,
+ ITEMS_PER_PAGE,
+ )) {
const reference = referencesByKey.get(referenceKey);
if (!reference) continue;
if (reference.entityKind === "feed-item") {
@@ -161,7 +167,9 @@ function buildInput(
type: "selected",
scope: selectedScope.scope,
contentStatus: selectedScope.contentStatus,
- pageManifest: firstPageManifest(selectedScope),
+ pageManifest: request.intent.discardManifest
+ ? { feedItems: [], bookmarks: [] }
+ : firstPageManifest(selectedScope),
membershipRevision: getMixedContentMembershipRevision(),
},
};
@@ -544,6 +552,9 @@ const runtime = createReconciliationRuntime({
});
}
},
+ onRecoveryFailed: () => {
+ loadingActor.send({ type: "RECONCILIATION_FAILED" });
+ },
onFullReconciliationFailed: ({ reconciliationId }) => {
if (reconciliationId !== supersededManualFullId) {
rejectManualFull?.(new Error("Manual reconciliation failed"));
@@ -687,13 +698,15 @@ export function getReconciliationTargetStatus(
return runtime.getState().targets[getReconciliationTargetKey(target)]?.status;
}
-export type ReconciliationDisplayStatus = "idle" | "syncing" | "retrying";
+export type ReconciliationDisplayStatus =
+ "idle" | "syncing" | "retrying" | "stale";
function reconciliationDisplayStatus(): ReconciliationDisplayStatus {
const state = runtime.getState();
- if (state.cacheUsableAt === null) return "idle";
+ if (state.cacheUsableAt === null && !state.recoveryFailed) return "idle";
if (state.inFlight) return "syncing";
- return state.retryPending ? "retrying" : "idle";
+ if (state.retryPending) return "retrying";
+ return state.recoveryFailed ? "stale" : "idle";
}
export function useReconciliationDisplayStatus() {
diff --git a/apps/app/src/lib/hooks/useFeedItemNavigation.ts b/apps/app/src/lib/hooks/useFeedItemNavigation.ts
index ffa3d9f73..14f488934 100644
--- a/apps/app/src/lib/hooks/useFeedItemNavigation.ts
+++ b/apps/app/src/lib/hooks/useFeedItemNavigation.ts
@@ -153,6 +153,7 @@ export function useFeedItemNavigation(
items: string[],
isGridLayout: boolean = false,
sections?: SectionInfo[],
+ toggleReadInView?: (id: string, mutate: () => boolean) => boolean,
) {
const [selectedItemId, setSelectedItemId] = useAtom(selectedItemIdAtom);
const viewFilterId = useAtomValue(viewFilterIdAtom);
@@ -567,7 +568,12 @@ export function useFeedItemNavigation(
const toggleReadWithAdvance = useCallback(
(contentId: string, toggleRead: () => boolean) => {
const idx = items.indexOf(contentId);
- if (!toggleRead()) return;
+ if (
+ !(toggleReadInView
+ ? toggleReadInView(contentId, toggleRead)
+ : toggleRead())
+ )
+ return;
if (idx === -1) return;
if (
@@ -578,7 +584,12 @@ export function useFeedItemNavigation(
selectItemAfterCurrentItemLeavesView(idx);
}
},
- [items, contentStatusFilter, selectItemAfterCurrentItemLeavesView],
+ [
+ items,
+ contentStatusFilter,
+ selectItemAfterCurrentItemLeavesView,
+ toggleReadInView,
+ ],
);
const toggleSavedWithAdvance = useCallback(
diff --git a/apps/app/src/lib/reconciliation/contracts.ts b/apps/app/src/lib/reconciliation/contracts.ts
index 4bee2ab75..b6ca84dca 100644
--- a/apps/app/src/lib/reconciliation/contracts.ts
+++ b/apps/app/src/lib/reconciliation/contracts.ts
@@ -181,10 +181,12 @@ export type ReconciliationStreamEvent = {
export type ReconciliationRequestIntent =
| {
type: "full";
+ discardManifest?: boolean;
selectedScope: ReconciliationScopeTarget;
}
| {
type: "full";
+ discardManifest?: boolean;
coldContentStatus: ContentStatusFilter;
}
| {
diff --git a/apps/app/src/lib/reconciliation/coordinator.ts b/apps/app/src/lib/reconciliation/coordinator.ts
index dd1b91eb8..b4af67cab 100644
--- a/apps/app/src/lib/reconciliation/coordinator.ts
+++ b/apps/app/src/lib/reconciliation/coordinator.ts
@@ -98,6 +98,7 @@ export type ReconciliationCoordinatorState<
serverParityAppliedAt: number | null;
sseConnected: boolean;
retryPending: boolean;
+ recoveryFailed: boolean;
retryAt: number | null;
automaticRssOwner: AutomaticRssOwner | null;
trustedUpToDate: boolean;
@@ -175,6 +176,9 @@ export type ReconciliationCoordinatorEvent =
failed?: boolean;
failedTargets?: ReconciliationTarget[];
epochComplete?: boolean;
+ inputRejected?: boolean;
+ recoveryIntent?: ReconciliationRequestIntent;
+ recoveryFailed?: boolean;
}
| {
type: "automatic-rss-owner-resolved";
@@ -232,6 +236,7 @@ export function createReconciliationCoordinatorState<
serverParityAppliedAt: null,
sseConnected: false,
retryPending: false,
+ recoveryFailed: false,
retryAt: null,
automaticRssOwner: null,
trustedUpToDate: false,
@@ -666,6 +671,7 @@ function withEstablishedFullParity(
...state,
latestFullEpoch: { ...state.latestFullEpoch, established: true },
serverParityAppliedAt: at,
+ recoveryFailed: false,
};
}
@@ -687,6 +693,7 @@ function deriveTrustedUpToDate(
targetKeysOverlap(targetKeys, requiredTargetKeys),
);
return Boolean(
+ !state.recoveryFailed &&
state.cacheUsableAt !== null &&
state.latestFullEpoch?.established &&
state.serverParityAppliedAt !== null &&
@@ -977,8 +984,15 @@ export function transitionReconciliation(
...nextState,
inFlight: null,
trailingIntent: null,
+ recoveryFailed: event.recoveryFailed ?? nextState.recoveryFailed,
};
- return trailingIntent
+ if (event.recoveryIntent) {
+ return startRequest(
+ { ...nextState, trailingIntent },
+ event.recoveryIntent,
+ );
+ }
+ return trailingIntent && !event.inputRejected
? startRequest(nextState, trailingIntent)
: { state: withDerivedTrust(nextState), commands: [] };
}
diff --git a/apps/app/src/lib/reconciliation/runtime.ts b/apps/app/src/lib/reconciliation/runtime.ts
index 2cd63ad6b..ece9fe1bc 100644
--- a/apps/app/src/lib/reconciliation/runtime.ts
+++ b/apps/app/src/lib/reconciliation/runtime.ts
@@ -1,3 +1,4 @@
+import { ORPCError } from "@orpc/client";
import {
createReconciliationCoordinatorState,
transitionReconciliation,
@@ -68,6 +69,7 @@ export type ReconciliationRuntimeDependencies = {
automaticRssOwner: ReconciliationCoordinatorState["automaticRssOwner"];
}) => void;
onFullReconciliationFailed?: (input: { reconciliationId: string }) => void;
+ onRecoveryFailed?: () => void;
};
export type ReconciliationRuntime = ReturnType<
@@ -128,6 +130,7 @@ export function createReconciliationRuntime(
let completedBeforeFirstConnection = false;
let liveSequence = 0;
let retryDelayMs = 1_000;
+ let recoveringInvalidInput = false;
let retryIntent: ReconciliationRequestIntent | null = null;
let retryTimer: ReturnType | null = null;
const listeners = new Set<() => void>();
@@ -219,23 +222,31 @@ export function createReconciliationRuntime(
if (successfulRequestCoversRetry(request)) clearRetry();
};
+ const currentFullIntent = (): ReconciliationRequestIntent => {
+ const selectedScope = dependencies.getCurrentSelection();
+ const intent: ReconciliationRequestIntent = selectedScope
+ ? { type: "full", selectedScope }
+ : {
+ type: "full",
+ coldContentStatus: { saveStatus: "inbox", archiveStatus: "unread" },
+ };
+ return recoveringInvalidInput
+ ? { ...intent, discardManifest: true }
+ : intent;
+ };
+
const retryIntentForFailure = (
failedTargets: ReconciliationTarget[] | undefined,
forceFull = false,
): ReconciliationRequestIntent => {
if (
+ recoveringInvalidInput ||
forceFull ||
!failedTargets ||
failedTargets.length === 0 ||
failedTargets.length > MAX_TARGETED_RECONCILIATION_TARGETS
) {
- const selectedScope = dependencies.getCurrentSelection();
- return selectedScope
- ? { type: "full", selectedScope }
- : {
- type: "full",
- coldContentStatus: { saveStatus: "inbox", archiveStatus: "unread" },
- };
+ return currentFullIntent();
}
return { type: "targeted", targets: failedTargets };
};
@@ -311,6 +322,7 @@ export function createReconciliationRuntime(
previousParity !== state.serverParityAppliedAt &&
state.serverParityAppliedAt !== null
) {
+ recoveringInvalidInput = false;
dependencies.mark?.(
"serial:server-parity-applied",
state.latestFullEpoch?.reconciliationId,
@@ -360,6 +372,7 @@ export function createReconciliationRuntime(
> = {};
const recoverableFailures = new Map();
let settled = false;
+ let inputRejected = false;
try {
const input = dependencies.buildInput(request);
const stream = await dependencies.openStream(input, signal);
@@ -463,6 +476,13 @@ export function createReconciliationRuntime(
}
}
} catch (error) {
+ inputRejected =
+ error instanceof ORPCError &&
+ error.code === "BAD_REQUEST" &&
+ typeof error.data === "object" &&
+ error.data !== null &&
+ "issues" in error.data &&
+ Array.isArray(error.data.issues);
if (!signal.aborted) {
console.error("Reconciliation request failed", error);
}
@@ -473,15 +493,33 @@ export function createReconciliationRuntime(
completedBeforeFirstConnection = true;
}
const failedTargets = state.requests[request.reconciliationId]?.targets;
+ const recoveryFailed = inputRejected && recoveringInvalidInput;
+ if (inputRejected) {
+ recoveringInvalidInput = true;
+ clearRetry();
+ }
send({
type: "request-settled",
reconciliationId: request.reconciliationId,
at: dependencies.now(),
failed: true,
failedTargets,
+ inputRejected,
+ recoveryIntent:
+ inputRejected && !recoveryFailed ? currentFullIntent() : undefined,
+ recoveryFailed: recoveryFailed || undefined,
});
- scheduleRetry(retryIntentForFailure(failedTargets));
- if (request.intent.type === "full") {
+ if (inputRejected) {
+ if (recoveryFailed) {
+ dependencies.onRecoveryFailed?.();
+ }
+ } else {
+ scheduleRetry(retryIntentForFailure(failedTargets));
+ }
+ if (
+ request.intent.type === "full" &&
+ (!inputRejected || recoveryFailed)
+ ) {
dependencies.onFullReconciliationFailed?.({
reconciliationId: request.reconciliationId,
});
@@ -492,16 +530,7 @@ export function createReconciliationRuntime(
const requestCurrentFull = () => {
if (retryIntent) clearRetry();
- const selectedScope = dependencies.getCurrentSelection();
- send({
- type: "request-reconciliation",
- intent: selectedScope
- ? { type: "full", selectedScope }
- : {
- type: "full",
- coldContentStatus: { saveStatus: "inbox", archiveStatus: "unread" },
- },
- });
+ send({ type: "request-reconciliation", intent: currentFullIntent() });
};
return {
@@ -516,6 +545,7 @@ export function createReconciliationRuntime(
clearRetryTimer();
retryIntent = null;
retryDelayMs = 1_000;
+ recoveringInvalidInput = false;
started = false;
everConnected = false;
reconnectRequired = false;
@@ -542,10 +572,12 @@ export function createReconciliationRuntime(
reconnectRequired ||
(!everConnected && completedBeforeFirstConnection)
) {
- clearRetry();
reconnectRequired = false;
completedBeforeFirstConnection = false;
- requestCurrentFull();
+ if (!state.recoveryFailed) {
+ clearRetry();
+ requestCurrentFull();
+ }
}
everConnected = true;
},
diff --git a/apps/app/tests/e2e/fixtures/seed-db.ts b/apps/app/tests/e2e/fixtures/seed-db.ts
index 2508a4975..71c414734 100644
--- a/apps/app/tests/e2e/fixtures/seed-db.ts
+++ b/apps/app/tests/e2e/fixtures/seed-db.ts
@@ -226,6 +226,17 @@ export async function getFeedItemProgress(tursoPort: number, id: string) {
return feedItem?.progress ?? null;
}
+export async function getFeedItemWatchedState(tursoPort: number, id: string) {
+ const { db, client } = getDb(tursoPort);
+ const item = await db
+ .select({ isWatched: schema.feedItems.isWatched })
+ .from(schema.feedItems)
+ .where(eq(schema.feedItems.id, id))
+ .get();
+ client.close();
+ return item?.isWatched ?? null;
+}
+
export async function getFeedItemWatchLaterState(
tursoPort: number,
id: string,
@@ -349,6 +360,7 @@ export async function seedBookmarkProjectionData(
tursoPort: number,
email: string,
feedItemId: string,
+ contentHtml?: string,
) {
const { db, client } = getDb(tursoPort);
const [testUser, item, userView] = await Promise.all([
@@ -394,7 +406,9 @@ export async function seedBookmarkProjectionData(
});
await db.insert(schema.pageCaptures).values({
bookmarkId,
- contentHtml: `Captured Bookmark body
+ contentHtml:
+ contentHtml ??
+ `Captured Bookmark body
External reader link
diff --git a/apps/app/tests/e2e/self-hosted/article-code-blocks.spec.ts b/apps/app/tests/e2e/self-hosted/article-code-blocks.spec.ts
new file mode 100644
index 000000000..79da9e0c6
--- /dev/null
+++ b/apps/app/tests/e2e/self-hosted/article-code-blocks.spec.ts
@@ -0,0 +1,157 @@
+import { expect, test } from "@playwright/test";
+import { signIn } from "../fixtures/auth";
+import {
+ SELF_HOSTED_APP_PORT,
+ SELF_HOSTED_TURSO_PORT,
+} from "../fixtures/ports";
+import {
+ cleanupUser,
+ seedArticleData,
+ seedBookmarkProjectionData,
+ setFeedItemContent,
+} from "../fixtures/seed-db";
+
+const longLine = `const message = "${"A long line of code. ".repeat(18)}";`;
+const articleHtml = `Code examples retain their formatting in the reader.
+ const answer = 42;\nconsole.log(answer);
+ ${longLine}
+ Images that cannot load keep their place in the article.
+ 
`;
+
+test.describe("article code and image layout", () => {
+ test.use({ serviceWorkers: "block" });
+ let email: string;
+ test.afterEach(async () => {
+ if (email) await cleanupUser(SELF_HOSTED_TURSO_PORT, email);
+ });
+
+ for (const kind of ["full", "simplified", "bookmark"] as const) {
+ test(`${kind} code fills the reader and scrolls within its block`, async ({
+ page,
+ }) => {
+ const fixture = await seedArticleData(
+ SELF_HOSTED_TURSO_PORT,
+ SELF_HOSTED_APP_PORT,
+ );
+ email = fixture.email;
+ await setFeedItemContent(
+ SELF_HOSTED_TURSO_PORT,
+ fixture.feedItemId,
+ articleHtml,
+ );
+ const contentId =
+ kind === "bookmark"
+ ? (
+ await seedBookmarkProjectionData(
+ SELF_HOSTED_TURSO_PORT,
+ email,
+ fixture.feedItemId,
+ articleHtml,
+ )
+ ).bookmarkId
+ : fixture.feedItemId;
+ await page.addInitScript(
+ (style) => {
+ localStorage.setItem(
+ "serial-flag-article-style",
+ JSON.stringify(style),
+ );
+ },
+ kind === "simplified" ? "simplified" : "full",
+ );
+ await page.route("https://images.example.com/**", (route) =>
+ route.abort(),
+ );
+ await signIn({ page, email, password: fixture.password });
+ await page.goto(`/read/${contentId}`);
+ const blocks = page.locator("pre");
+ await expect(blocks).toHaveCount(2);
+ await expect(blocks.first().locator(".hljs-keyword")).toBeVisible();
+ await expect(blocks.last()).toHaveText(longLine);
+
+ for (const width of [1280, 390]) {
+ await page.setViewportSize({ width, height: 900 });
+ const geometry = await blocks.first().evaluate((short) => {
+ const wide = document.querySelectorAll("pre")[1]!;
+ const parent = short.parentElement!;
+ const style = getComputedStyle(parent);
+ const available =
+ parent.clientWidth -
+ parseFloat(style.paddingLeft) -
+ parseFloat(style.paddingRight);
+ wide.scrollLeft = 100;
+ const scrollContainer = document.querySelector(
+ '[data-slot="sidebar-inset"]',
+ )!;
+ return {
+ short: short.getBoundingClientRect().width,
+ wide: wide.getBoundingClientRect().width,
+ available,
+ scrollLeft: wide.scrollLeft,
+ pageOverflow:
+ scrollContainer.scrollWidth - scrollContainer.clientWidth,
+ whiteSpace: getComputedStyle(wide).whiteSpace,
+ };
+ });
+ expect(
+ Math.abs(geometry.short - geometry.available),
+ ).toBeLessThanOrEqual(1);
+ expect(geometry.wide).toBe(geometry.short);
+ expect(geometry.scrollLeft).toBeGreaterThan(0);
+ expect(geometry.pageOverflow).toBeLessThanOrEqual(1);
+ expect(geometry.whiteSpace).toBe("pre");
+
+ if (kind !== "simplified") {
+ const placeholder = page.locator("[data-image-fallback]");
+ await placeholder.scrollIntoViewIfNeeded();
+ await expect(placeholder).toBeVisible();
+ await expect(placeholder).toHaveText("Unavailable illustration");
+ const label = placeholder.locator("span").first();
+ expect(
+ await label.evaluate((node) =>
+ parseFloat(getComputedStyle(node).paddingLeft),
+ ),
+ ).toBe(width < 640 ? 32 : 64);
+ const textBox = await label.locator("span").boundingBox();
+ const box = await placeholder.boundingBox();
+ expect(box).not.toBeNull();
+ expect(textBox).not.toBeNull();
+ expect(
+ Math.abs(textBox!.x + textBox!.width / 2 - box!.x - box!.width / 2),
+ ).toBeLessThanOrEqual(1);
+ expect(
+ Math.abs(
+ textBox!.y + textBox!.height / 2 - box!.y - box!.height / 2,
+ ),
+ ).toBeLessThanOrEqual(1);
+ expect(Math.abs(box!.width - geometry.available)).toBeLessThanOrEqual(
+ 1,
+ );
+ expect(Math.abs(box!.width / box!.height - 16 / 9)).toBeLessThan(
+ 0.02,
+ );
+ }
+ }
+ const token = blocks.first().locator(".hljs-keyword");
+ await page.evaluate(() =>
+ document.documentElement.classList.remove("dark"),
+ );
+ const light = await token.evaluate(
+ (node) => getComputedStyle(node).color,
+ );
+ await page.evaluate(() => document.documentElement.classList.add("dark"));
+ expect(
+ await token.evaluate((node) => getComputedStyle(node).color),
+ ).not.toBe(light);
+
+ await blocks.last().evaluate((node) => {
+ node.scrollLeft = 0;
+ });
+ await blocks.last().focus();
+ await page.keyboard.press("ArrowRight");
+ await expect
+ .poll(() => blocks.last().evaluate((node) => node.scrollLeft))
+ .toBeGreaterThan(0);
+ });
+ }
+});
diff --git a/apps/app/tests/e2e/self-hosted/item-actions.spec.ts b/apps/app/tests/e2e/self-hosted/item-actions.spec.ts
index 5532b15a8..da7f5de5b 100644
--- a/apps/app/tests/e2e/self-hosted/item-actions.spec.ts
+++ b/apps/app/tests/e2e/self-hosted/item-actions.spec.ts
@@ -318,7 +318,9 @@ test.describe("feed item actions", () => {
});
await page.keyboard.press("e");
- await expect(itemLink(firstSavedItemId)).toHaveCount(0);
+ await expect(
+ page.locator(`article[data-item-id="${firstSavedItemId}"]`),
+ ).toHaveCSS("opacity", "0.75");
await page
.getByRole("tab", {
@@ -421,8 +423,8 @@ test.describe("feed item actions", () => {
}
for (const bookmarkCase of [
- // Archiving moves the bookmark to saved/archived; unsaving moves it to
- // inbox/unread. Both leave the saved list, so both must advance.
+ // Archiving retains the Saved row for this visit; unsaving removes it.
+ // Both actions still advance selection to the successor.
{ action: "archiving", buttonName: "Archive", destinationKey: "y" },
{ action: "unsaving", buttonName: "Unsave", destinationKey: "i" },
] as const) {
@@ -484,7 +486,11 @@ test.describe("feed item actions", () => {
.click();
await page.mouse.move(5, 5);
- await expect(bookmarkItem).toHaveCount(0, { timeout: 10000 });
+ if (bookmarkCase.action === "archiving") {
+ await expect(bookmarkItem).toHaveCSS("opacity", "0.75");
+ } else {
+ await expect(bookmarkItem).toHaveCount(0, { timeout: 10000 });
+ }
const successorItem = page.locator(
`article[data-item-id="${successorBookmarkId}"]`,
);
diff --git a/apps/app/tests/e2e/self-hosted/sidebar-navigation-snapshot.spec.ts b/apps/app/tests/e2e/self-hosted/sidebar-navigation-snapshot.spec.ts
index 55faedcfc..42ff4e235 100644
--- a/apps/app/tests/e2e/self-hosted/sidebar-navigation-snapshot.spec.ts
+++ b/apps/app/tests/e2e/self-hosted/sidebar-navigation-snapshot.spec.ts
@@ -198,7 +198,7 @@ test.describe("authoritative sidebar navigation", () => {
await item.getByRole("link").hover();
await page.keyboard.press("e");
- await expect(item).toHaveCount(0);
+ await expect(item).toHaveCSS("opacity", "0.75");
await expect(viewButton.locator(".bg-sidebar-accent")).toHaveCount(0);
await page
diff --git a/apps/app/tests/e2e/self-hosted/soft-reads.spec.ts b/apps/app/tests/e2e/self-hosted/soft-reads.spec.ts
new file mode 100644
index 000000000..4db1fcdda
--- /dev/null
+++ b/apps/app/tests/e2e/self-hosted/soft-reads.spec.ts
@@ -0,0 +1,239 @@
+import { expect, test } from "@playwright/test";
+import { signIn } from "../fixtures/auth";
+import {
+ SELF_HOSTED_APP_PORT,
+ SELF_HOSTED_TURSO_PORT,
+} from "../fixtures/ports";
+import {
+ cleanupUser,
+ getBookmarkState,
+ getFeedItemWatchedState,
+ seedArticleData,
+ seedBookmarkProjectionData,
+ seedMixedViewSectionCase,
+ setFeedItemWatchLater,
+} from "../fixtures/seed-db";
+
+test.describe("Saved soft reads", () => {
+ test.use({ viewport: { width: 1920, height: 1080 } });
+ let email = "";
+ test.afterEach(async () => {
+ if (email) await cleanupUser(SELF_HOSTED_TURSO_PORT, email);
+ });
+
+ for (const scope of ["Tag", "View"] as const) {
+ test(`removes a retained bookmark when its ${scope} assignment is removed`, async ({
+ page,
+ }) => {
+ const fixture = await seedMixedViewSectionCase(
+ SELF_HOSTED_TURSO_PORT,
+ SELF_HOSTED_APP_PORT,
+ {
+ feedSectionFeedItem: false,
+ tagSectionFeedItem: false,
+ tagSectionBookmark: scope === "Tag",
+ uncategorizedFeedItem: false,
+ uncategorizedBookmark: scope === "View",
+ },
+ );
+ email = fixture.email;
+ await signIn({ page, email, password: fixture.password });
+ await page.getByRole("tab", { name: /^Saved/ }).click();
+ if (scope === "View") {
+ await page
+ .getByRole("radio", { name: fixture.viewName, exact: true })
+ .click();
+ } else {
+ await page.getByRole("button", { name: "Menu", exact: true }).click();
+ await page
+ .locator('[data-sidebar="group"]')
+ .filter({
+ has: page.locator('[data-sidebar="group-label"]', {
+ hasText: "Tags",
+ }),
+ })
+ .locator('[data-sidebar="menu-button"]')
+ .filter({ hasText: fixture.tagName })
+ .click();
+ }
+ const id =
+ scope === "Tag"
+ ? fixture.items.tagSectionBookmark
+ : fixture.items.uncategorizedBookmark;
+ const row = page.locator(`article[data-item-id="${id}"]`);
+ await expect(row).toBeVisible({ timeout: 30_000 });
+ await row.hover();
+ await row.getByRole("button", { name: /^Archive/ }).click();
+ await expect
+ .poll(
+ async () =>
+ (await getBookmarkState(SELF_HOSTED_TURSO_PORT, id))?.isRead,
+ )
+ .toBe(true);
+ await expect(row).toHaveCSS("opacity", "0.75");
+ await row.hover();
+ await row.getByRole("button", { name: "Edit Bookmark" }).click();
+ const dialog = page.getByRole("dialog");
+ const assignment = dialog.getByRole("button", {
+ name: scope === "Tag" ? fixture.tagName : fixture.viewName,
+ exact: true,
+ });
+ await expect(assignment).toHaveAttribute("aria-pressed", "true");
+ const update = page.waitForResponse((response) =>
+ response.url().includes(`/bookmark/set${scope}`),
+ );
+ await assignment.click();
+ expect((await update).ok()).toBe(true);
+ await expect(assignment).toHaveAttribute("aria-pressed", "false");
+ await expect(row).toHaveCount(0);
+ });
+ }
+
+ for (const scope of ["View", "Tag", "Feed"] as const) {
+ test(`clears retention when changing ${scope} scope and returning`, async ({
+ page,
+ }) => {
+ const fixture = await seedMixedViewSectionCase(
+ SELF_HOSTED_TURSO_PORT,
+ SELF_HOSTED_APP_PORT,
+ {
+ feedSectionFeedItem: false,
+ tagSectionFeedItem: true,
+ tagSectionBookmark: false,
+ uncategorizedFeedItem: false,
+ uncategorizedBookmark: false,
+ },
+ );
+ email = fixture.email;
+ await signIn({ page, email, password: fixture.password });
+ await page.getByRole("tab", { name: /^Saved/ }).click();
+ const view = page.getByRole("radio", {
+ name: fixture.viewName,
+ exact: true,
+ });
+ await view.click();
+ const id = fixture.items.tagSectionFeedItem;
+ const row = page.locator(`article[data-item-id="${id}"]`);
+ await expect(row).toBeVisible({ timeout: 30_000 });
+ await row.hover();
+ await row.getByRole("button", { name: /^Archive/ }).click();
+ await expect
+ .poll(() => getFeedItemWatchedState(SELF_HOSTED_TURSO_PORT, id))
+ .toBe(true);
+ await expect(row).toHaveCSS("opacity", "0.75");
+ if (scope === "View") {
+ await page
+ .getByRole("radio", { name: fixture.emptyViewName, exact: true })
+ .click();
+ } else {
+ await page.getByRole("button", { name: "Menu", exact: true }).click();
+ const group = page.locator('[data-sidebar="group"]').filter({
+ has: page.locator('[data-sidebar="group-label"]', {
+ hasText: `${scope}s`,
+ }),
+ });
+ await group
+ .locator('[data-sidebar="menu-button"]')
+ .filter({
+ hasText:
+ scope === "Tag" ? fixture.tagName : fixture.feeds.tagSection.name,
+ })
+ .click();
+ }
+ await expect(row).toHaveCount(0);
+ await view.click();
+ await expect(row).toHaveCount(0);
+ });
+ }
+
+ for (const kind of ["feed", "bookmark"] as const) {
+ test(`${kind} retains individual toggles until status navigation or reader departure`, async ({
+ page,
+ }) => {
+ const fixture = await seedArticleData(
+ SELF_HOSTED_TURSO_PORT,
+ SELF_HOSTED_APP_PORT,
+ );
+ email = fixture.email;
+ const id =
+ kind === "bookmark"
+ ? (
+ await seedBookmarkProjectionData(
+ SELF_HOSTED_TURSO_PORT,
+ email,
+ fixture.feedItemId,
+ )
+ ).bookmarkId
+ : fixture.feedItemId;
+ if (kind === "feed")
+ await setFeedItemWatchLater(SELF_HOSTED_TURSO_PORT, id, true);
+ const isRead = async () =>
+ kind === "bookmark"
+ ? (await getBookmarkState(SELF_HOSTED_TURSO_PORT, id))?.isRead
+ : await getFeedItemWatchedState(SELF_HOSTED_TURSO_PORT, id);
+ await signIn({ page, email, password: fixture.password });
+ await page.getByRole("tab", { name: /^Saved/ }).click();
+ const row = page.locator(`article[data-item-id="${id}"]`);
+ await expect(row).toBeVisible({ timeout: 30_000 });
+ await row.hover();
+ await row.getByRole("button", { name: /^Archive/ }).click();
+ await expect.poll(isRead).toBe(true);
+ await expect(row).toHaveCSS("opacity", "0.75");
+
+ // A retained row remains actionable and its actual status drives opacity.
+ await row.hover();
+ await row.getByRole("button", { name: /^Unarchive/ }).click();
+ await expect.poll(isRead).toBe(false);
+ await expect(row).toHaveCSS("opacity", "1");
+ await page.getByRole("heading", { name: "Serial", exact: true }).hover();
+ await row.hover();
+ await page.keyboard.press("e");
+ await expect.poll(isRead).toBe(true);
+ await expect(row).toHaveCSS("opacity", "0.75");
+
+ await page
+ .getByRole("tab", { name: "Switch to archived content" })
+ .click();
+ await expect(row).toHaveCSS("opacity", "0.75");
+ await page.getByRole("tab", { name: "Switch to unread content" }).click();
+ await expect(row).toHaveCount(0);
+
+ await page
+ .getByRole("tab", { name: "Switch to archived content" })
+ .click();
+ await expect(row).toBeVisible();
+ await row.hover();
+ await row.getByRole("button", { name: /^Unarchive/ }).click();
+ await expect.poll(isRead).toBe(false);
+ await expect(row).toHaveCSS("opacity", "1");
+ await row.getByRole("link").click();
+ await expect(page).toHaveURL(`/read/${id}`);
+ await page.goBack();
+ await expect(page).toHaveURL("/");
+ await expect(row).toHaveCount(0);
+ await page.getByRole("tab", { name: "Switch to unread content" }).click();
+ await expect(row).toBeVisible();
+
+ // Unsave still removes a soft-retained row immediately.
+ await row.hover();
+ await row.getByRole("button", { name: /^Archive/ }).click();
+ await expect.poll(isRead).toBe(true);
+ await expect(row).toHaveCSS("opacity", "0.75");
+ await row.hover();
+ await row.getByRole("button", { name: /^Unsave/ }).click();
+ await expect(row).toHaveCount(0);
+ await page.getByRole("tab", { name: /^Inbox/ }).click();
+ await page
+ .getByRole("tab", { name: "Switch to archived content" })
+ .click();
+ await expect(row).toHaveCSS("opacity", "0.75");
+ await row.hover();
+ await row.getByRole("button", { name: /^Unarchive/ }).click();
+ await expect(row).toHaveCount(0);
+ await page.getByRole("tab", { name: "Switch to unread content" }).click();
+ await expect(row).toBeVisible();
+ await page.getByRole("button", { name: "Mark all as read" }).click();
+ await expect(row).toHaveCount(0);
+ });
+ }
+});
diff --git a/apps/app/tests/e2e/self-hosted/view-mixed-content-matrix.spec.ts b/apps/app/tests/e2e/self-hosted/view-mixed-content-matrix.spec.ts
index 55b8ccd7d..eb3eb9004 100644
--- a/apps/app/tests/e2e/self-hosted/view-mixed-content-matrix.spec.ts
+++ b/apps/app/tests/e2e/self-hosted/view-mixed-content-matrix.spec.ts
@@ -441,7 +441,7 @@ test.describe("exhaustive mixed-content View section matrix", () => {
});
}
- test("advances in Saved Unread and exposes the item in Saved Archived", async ({
+ test("advances while retaining Saved Unread items until status navigation", async ({
page,
}) => {
test.setTimeout(60_000);
@@ -484,16 +484,25 @@ test.describe("exhaustive mixed-content View section matrix", () => {
);
await expect(feedItem).toBeVisible({ timeout: 30_000 });
+ const initialOrder = await renderedItemIdsInOrder(
+ feedMain.locator("article[data-item-id]"),
+ );
+
await feedItem.getByRole("link").hover();
await page.keyboard.press("e");
- await expect(feedItem).toHaveCount(0);
+ await expect(feedItem).toHaveCSS("opacity", "0.75");
+ expect(
+ await renderedItemIdsInOrder(feedMain.locator("article[data-item-id]")),
+ ).toEqual(initialOrder);
await expect(nextFeedItem.getByRole("link")).toHaveClass(/md:bg-muted/);
await expect(
feedMain.getByRole("heading", { name: "Test Blog", exact: true }),
- ).toHaveCount(0);
+ ).toBeVisible();
await contentStatusTab(page, "Archived").click();
await expect(feedItem).toBeVisible();
+ await contentStatusTab(page, "Unread").click();
+ await expect(feedItem).toHaveCount(0);
});
test("collapses Saved Archived into one View section", async ({ page }) => {
diff --git a/apps/app/tests/unit/components/code-highlighting-worker.test.ts b/apps/app/tests/unit/components/code-highlighting-worker.test.ts
new file mode 100644
index 000000000..a44de2bac
--- /dev/null
+++ b/apps/app/tests/unit/components/code-highlighting-worker.test.ts
@@ -0,0 +1,86 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+class TestWorker {
+ static instances: TestWorker[] = [];
+ onmessage?: (event: { data: { id: number; html: string | null } }) => void;
+ onerror?: () => void;
+ postMessage = vi.fn();
+ terminate = vi.fn();
+ constructor() {
+ TestWorker.instances.push(this);
+ }
+}
+
+beforeEach(() => {
+ vi.resetModules();
+ TestWorker.instances = [];
+ vi.stubGlobal("Worker", TestWorker);
+});
+afterEach(() => vi.unstubAllGlobals());
+
+describe("code highlighting worker", () => {
+ it("shares one worker and delivers each result to its block", async () => {
+ const { requestCodeHighlight } =
+ await import("~/components/content-reader/highlightCodeClient");
+ const first = vi.fn();
+ const second = vi.fn();
+ requestCodeHighlight("first", "js", first);
+ requestCodeHighlight("second", undefined, second);
+ expect(TestWorker.instances).toHaveLength(1);
+ const worker = TestWorker.instances[0]!;
+ const [firstMessage, secondMessage] = worker.postMessage.mock.calls.map(
+ ([message]) => message as { id: number },
+ );
+ worker.onmessage?.({
+ data: { id: secondMessage!.id, html: "second result" },
+ });
+ worker.onmessage?.({
+ data: { id: firstMessage!.id, html: "first result" },
+ });
+ expect(first).toHaveBeenCalledWith("first result");
+ expect(second).toHaveBeenCalledWith("second result");
+ });
+
+ it("drops cancelled results and resolves pending blocks as plain text on failure", async () => {
+ const { requestCodeHighlight } =
+ await import("~/components/content-reader/highlightCodeClient");
+ const cancelled = vi.fn();
+ const pending = vi.fn();
+ const cancel = requestCodeHighlight("old", "js", cancelled);
+ requestCodeHighlight("current", "js", pending);
+ cancel();
+ const worker = TestWorker.instances[0]!;
+ const message = worker.postMessage.mock.calls[0]![0] as { id: number };
+ worker.onmessage?.({ data: { id: message.id, html: "stale" } });
+ expect(cancelled).not.toHaveBeenCalled();
+ worker.onerror?.();
+ expect(pending).toHaveBeenCalledWith(null);
+ expect(worker.terminate).toHaveBeenCalledOnce();
+ requestCodeHighlight("retry", "js", vi.fn());
+ expect(TestWorker.instances).toHaveLength(2);
+ });
+
+ it("keeps plain code when workers are unavailable", async () => {
+ vi.stubGlobal("Worker", undefined);
+ const { requestCodeHighlight } =
+ await import("~/components/content-reader/highlightCodeClient");
+ const callback = vi.fn();
+ requestCodeHighlight("const x = 1;", "js", callback);
+ expect(callback).toHaveBeenCalledWith(null);
+ });
+
+ it("terminates abandoned work before highlighting the next article", async () => {
+ const { requestCodeHighlight } =
+ await import("~/components/content-reader/highlightCodeClient");
+ const cancel = requestCodeHighlight("old", "js", vi.fn());
+ const abandonedWorker = TestWorker.instances[0]!;
+ cancel();
+ expect(abandonedWorker.terminate).toHaveBeenCalledOnce();
+ const next = vi.fn();
+ requestCodeHighlight("new", "js", next);
+ expect(TestWorker.instances).toHaveLength(2);
+ abandonedWorker.onerror?.();
+ expect(next).not.toHaveBeenCalled();
+ expect(TestWorker.instances[1]!.terminate).not.toHaveBeenCalled();
+ });
+});
diff --git a/apps/app/tests/unit/components/offline-ui.test.ts b/apps/app/tests/unit/components/offline-ui.test.ts
index 667309327..0220b5968 100644
--- a/apps/app/tests/unit/components/offline-ui.test.ts
+++ b/apps/app/tests/unit/components/offline-ui.test.ts
@@ -46,7 +46,7 @@ describe("Offline banner", () => {
});
describe("article image fallback", () => {
- it("keeps a failed image in flow as a square muted block", () => {
+ it("keeps a failed image in flow as a full-width landscape block", () => {
const container = render(
createElement(ArticleImageLightbox, {
src: "https://example.com/unavailable.jpg",
@@ -59,10 +59,12 @@ describe("article image fallback", () => {
act(() => image?.dispatchEvent(new Event("error")));
const fallback = container.querySelector("[data-image-fallback]");
- expect(fallback?.className).toContain("aspect-square");
+ expect(fallback?.className).toContain("aspect-video");
+ expect(fallback?.className).toContain("w-full");
expect(fallback?.className).toContain("bg-muted");
expect(fallback?.getAttribute("aria-label")).toBe(
"Unavailable illustration",
);
+ expect(fallback?.textContent).toBe("Unavailable illustration");
});
});
diff --git a/apps/app/tests/unit/components/reader-code-blocks.test.ts b/apps/app/tests/unit/components/reader-code-blocks.test.ts
new file mode 100644
index 000000000..f67df43ec
--- /dev/null
+++ b/apps/app/tests/unit/components/reader-code-blocks.test.ts
@@ -0,0 +1,135 @@
+// @vitest-environment jsdom
+
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ArticleContent } from "~/components/feed/read/ArticleContent";
+import { BookmarkArticleContent } from "~/components/bookmarks/BookmarkArticleContent";
+import * as highlighter from "~/components/content-reader/highlightCode";
+
+vi.mock("~/components/content-reader/highlightCodeClient", () => ({
+ requestCodeHighlight: (
+ code: string,
+ language: string | undefined,
+ onResult: (html: string | null) => void,
+ ) => {
+ onResult(highlighter.highlightCode(code, language));
+ return () => {};
+ },
+}));
+
+vi.mock("~/lib/hooks/useFlagState", () => ({ useFlagState: () => ["iframe"] }));
+vi.mock("~/components/CustomVideoPlayer", () => ({
+ CustomVideoPlayer: () => null,
+}));
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+const roots: Array> = [];
+afterEach(() => {
+ for (const root of roots.splice(0)) act(() => root.unmount());
+ vi.restoreAllMocks();
+});
+
+async function render(content: string, kind = "full") {
+ const container = document.createElement("div");
+ const root = createRoot(container);
+ roots.push(root);
+ const element =
+ kind === "bookmark"
+ ? createElement(BookmarkArticleContent, { content })
+ : createElement(ArticleContent, {
+ content,
+ simplified: kind === "simplified",
+ });
+ await act(async () => {
+ root.render(element);
+ });
+ return { container, root, element };
+}
+
+describe("article code blocks", () => {
+ it.each(["full", "simplified", "bookmark"])(
+ "excludes surrounding controls and formatting from %s code",
+ async (kind) => {
+ const { container } = await render(
+ '\n const value = 42;\n\n
',
+ kind,
+ );
+ expect(container.querySelector("pre")?.textContent).toBe(
+ " const value = 42;\n",
+ );
+ expect(container.querySelector("button")).toBeNull();
+ },
+ );
+
+ it("preserves code direction and an explicit accessible label", async () => {
+ const { container } = await render(
+ '',
+ );
+ expect(container.querySelector("pre")?.dir).toBe("ltr");
+ expect(container.querySelector("pre")?.getAttribute("aria-label")).toBe(
+ "Example",
+ );
+ });
+ it.each(["full", "simplified", "bookmark"])(
+ "highlights %s code without changing text or inline code",
+ async (kind) => {
+ const { container } = await render(
+ 'Use value.
const value = "<img src=x onerror=alert(1)>&";\n console.log(value);
',
+ kind,
+ );
+ expect(container.querySelector("pre")?.textContent).toBe(
+ 'const value = "
&";\n console.log(value);',
+ );
+ expect(container.querySelector("pre .hljs-keyword")).not.toBeNull();
+ expect(container.querySelector("img")).toBeNull();
+ expect(container.querySelector("p code")?.innerHTML).toBe("value");
+ expect(container.querySelector("pre")?.tabIndex).toBe(0);
+ },
+ );
+
+ it("reads language aliases from pre and strips existing token markup", async () => {
+ const { container } = await render(
+ 'def greet(name):
return "Hello " + name
',
+ );
+ expect(container.querySelector("pre")?.textContent).toBe(
+ 'def greet(name):\n return "Hello " + name',
+ );
+ expect(container.querySelector(".hljs-keyword")?.textContent).toBe("def");
+ });
+
+ it.each(["language-unknown", "nohighlight", "language-text"])(
+ "keeps %s blocks as plain text",
+ async (className) => {
+ const { container } = await render(
+ `const value = 42;
`,
+ );
+ expect(container.querySelector("pre")?.textContent).toBe(
+ "const value = 42;",
+ );
+ expect(container.querySelector("pre span")).toBeNull();
+ },
+ );
+
+ it("does not tokenize again on unrelated rerenders and discards stale highlighted content", async () => {
+ const spy = vi.spyOn(highlighter, "highlightCode");
+ const { container, root, element } = await render(
+ 'const first = 42;
',
+ );
+ expect(spy).toHaveBeenCalledTimes(1);
+ await act(async () => {
+ root.render({ ...element });
+ });
+ expect(spy).toHaveBeenCalledTimes(1);
+ await act(async () => {
+ root.render(
+ createElement(ArticleContent, {
+ content: 'second
',
+ }),
+ );
+ });
+ expect(container.querySelector("pre")?.innerHTML).toBe(
+ "second",
+ );
+ });
+});
diff --git a/apps/app/tests/unit/components/reader-content-images.test.ts b/apps/app/tests/unit/components/reader-content-images.test.ts
index fe09ba6a4..ce67cbff2 100644
--- a/apps/app/tests/unit/components/reader-content-images.test.ts
+++ b/apps/app/tests/unit/components/reader-content-images.test.ts
@@ -1,9 +1,15 @@
import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
import type { ReactNode } from "react";
import { flattenReaderImages } from "~/components/content-reader/flattenReaderImages";
import { ArticleImageLightbox } from "~/components/feed/read/ArticleImageLightbox";
+import { ArticleContent } from "~/components/feed/read/ArticleContent";
+
+vi.mock("~/lib/hooks/useFlagState", () => ({ useFlagState: () => ["iframe"] }));
+vi.mock("~/components/CustomVideoPlayer", () => ({
+ CustomVideoPlayer: () => null,
+}));
function renderReaderNodes(...nodes: ReactNode[]) {
return renderToStaticMarkup(
@@ -19,6 +25,18 @@ function expectInOrder(markup: string, ...values: string[]) {
}
describe("reader content images", () => {
+ it.each([
+ '
',
+ '