birdclaw 0.8.2 → 0.8.3

package/src/routes/links.tsx

@@ -9,7 +9,7 @@ import {
 	Search,
 	Users,
 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useState } from "react";
 import { AvatarChip } from "#/components/AvatarChip";
 import {
 	FeedEmpty,
@@ -19,22 +19,12 @@ import {
 } from "#/components/FeedState";
 import { ProfilePreview } from "#/components/ProfilePreview";
 import { SmartTimestamp } from "#/components/SmartTimestamp";
-import {
-	loadClientCache,
-	readClientCache,
-	writeClientCache,
-} from "#/lib/client-cache";
+import { useLinksController } from "#/components/links-controller";
 import { formatCompactNumber } from "#/lib/present";
 import type {
 	LinkInsightItem,
-	LinkInsightKind,
 	LinkInsightMention,
-	LinkInsightRange,
-	LinkInsightResponse,
-	LinkInsightSort,
-	LinkInsightSource,
 	ProfileRecord,
-	TweetMediaItem,
 } from "#/lib/types";
 import {
 	cx,
@@ -55,187 +45,20 @@ export const Route = createFileRoute("/links")({
 	component: LinksRoute,
 });
 
-const INITIAL_VISIBLE_COMMENTS = 3;
-const MORE_COMMENTS_BATCH = 6;
-const LINK_INSIGHTS_LIMIT = 30;
-const LINK_INSIGHTS_COMMENTS_LIMIT = 30;
-const PROFILE_HYDRATION_LIMIT = 30;
-const PROFILE_HYDRATION_DELAY_MS = 1200;
-const LINK_INSIGHTS_CACHE_PREFIX = "link-insights:";
-const LINK_INSIGHTS_CACHE_MAX_AGE_MS = 5 * 60_000;
-const LINK_PROFILE_HYDRATED_CACHE_PREFIX = "link-profile-hydrated:";
-const hydratingLinkProfileHandles = new Set<string>();
-
-const ranges: Array<{ value: LinkInsightRange; label: string }> = [
-	{ value: "today", label: "Today" },
-	{ value: "week", label: "Week" },
-	{ value: "month", label: "Month" },
-	{ value: "year", label: "Year" },
-	{ value: "all", label: "All" },
-];
-
-function itemTitle(item: LinkInsightItem) {
-	return item.title?.trim() || item.displayUrl;
-}
-
-function itemSubtitle(item: LinkInsightItem) {
-	const description = item.description?.trim();
-	if (description) {
-		return description;
-	}
-	return item.displayUrl.split("?")[0] || item.displayUrl;
-}
-
-function insightCacheKey(
-	kind: LinkInsightKind,
-	range: LinkInsightRange,
-	sort: LinkInsightSort,
-	source: LinkInsightSource,
-	refreshTick: number,
-) {
-	return `${kind}:${range}:${sort}:${source}:${refreshTick}`;
-}
-
-function sharedInsightCacheKey(
-	kind: LinkInsightKind,
-	range: LinkInsightRange,
-	sort: LinkInsightSort,
-	source: LinkInsightSource,
-) {
-	return `${LINK_INSIGHTS_CACHE_PREFIX}${kind}:${range}:${sort}:${source}`;
-}
-
-function hydratedProfileCacheKey(handle: string) {
-	return `${LINK_PROFILE_HYDRATED_CACHE_PREFIX}${handle.toLowerCase()}`;
-}
-
-function linkInsightsUrl(
-	kind: LinkInsightKind,
-	range: LinkInsightRange,
-	sort: LinkInsightSort,
-	source: LinkInsightSource,
-	refreshTick: number,
-) {
-	const url = new URL("/api/link-insights", window.location.origin);
-	url.searchParams.set("kind", kind);
-	url.searchParams.set("range", range);
-	url.searchParams.set("sort", sort);
-	url.searchParams.set("source", source);
-	url.searchParams.set("limit", String(LINK_INSIGHTS_LIMIT));
-	url.searchParams.set("commentsLimit", String(LINK_INSIGHTS_COMMENTS_LIMIT));
-	url.searchParams.set("refresh", String(refreshTick));
-	return url;
-}
-
-function mentionHref(mention: LinkInsightMention, item: LinkInsightItem) {
-	return mention.sourceUrl || mention.contentTweetUrl || item.url;
-}
-
-function mentionCopy(mention: LinkInsightMention) {
-	return (
-		mention.commentText ||
-		mention.sharedContentText ||
-		mention.rawText ||
-		"Shared without comment"
-	);
-}
-
-function isSameProfile(
-	left: ProfileRecord | null | undefined,
-	right: ProfileRecord | null | undefined,
-) {
-	return Boolean(left && right && left.id === right.id);
-}
-
-function mediaImage(media: TweetMediaItem[]) {
-	return media.find((item) => item.thumbnailUrl || item.url) ?? null;
-}
-
-function youtubeVideoId(rawUrl: string) {
-	try {
-		const url = new URL(rawUrl);
-		const host = url.hostname.toLowerCase().replace(/^www\./, "");
-		if (host === "youtu.be") {
-			return url.pathname.split("/").filter(Boolean)[0] ?? null;
-		}
-		if (!host.endsWith("youtube.com")) {
-			return null;
-		}
-		if (url.pathname === "/watch") {
-			return url.searchParams.get("v");
-		}
-		const parts = url.pathname.split("/").filter(Boolean);
-		if (parts[0] === "embed" || parts[0] === "shorts" || parts[0] === "live") {
-			return parts[1] ?? null;
-		}
-		return null;
-	} catch {
-		return null;
-	}
-}
-
-function youtubeThumbnailUrl(rawUrl: string) {
-	const id = youtubeVideoId(rawUrl);
-	if (!id || !/^[\w-]{6,}$/.test(id)) {
-		return null;
-	}
-	return `https://i.ytimg.com/vi/${encodeURIComponent(id)}/hqdefault.jpg`;
-}
-
-function commentCount(item: LinkInsightItem) {
-	return (
-		item.commentCount ??
-		item.mentions.filter((mention) => mention.hasComment).length
-	);
-}
-
-function pureShareCount(item: LinkInsightItem) {
-	return (
-		item.pureShareCount ??
-		item.mentions.filter(
-			(mention) => mention.isPureShare || !mention.hasComment,
-		).length
-	);
-}
-
-function isArchivePlaceholderProfile(profile: ProfileRecord) {
-	return (
-		/^id\d+$/i.test(profile.handle) &&
-		profile.displayName === profile.handle &&
-		profile.id === `profile_user_${profile.handle.slice(2)}`
-	);
-}
-
-function profileNeedsHydration(profile: ProfileRecord | null | undefined) {
-	if (!profile?.handle || isArchivePlaceholderProfile(profile)) {
-		return false;
-	}
-	return !profile.avatarUrl || profile.followersCount === 0;
-}
-
-function collectProfilesForHydration(data: LinkInsightResponse | null) {
-	const handles = new Set<string>();
-	for (const item of data?.items ?? []) {
-		for (const profile of [
-			item.topSharer,
-			...item.sharers,
-			...item.mentions.flatMap((mention) => [
-				mention.sharedBy,
-				mention.contentAuthor,
-				mention.participant,
-			]),
-		]) {
-			if (!profile || !profileNeedsHydration(profile)) {
-				continue;
-			}
-			handles.add(profile.handle.replace(/^@/, ""));
-			if (handles.size >= PROFILE_HYDRATION_LIMIT) {
-				return [...handles];
-			}
-		}
-	}
-	return [...handles];
-}
+import {
+	INITIAL_VISIBLE_COMMENTS,
+	MORE_COMMENTS_BATCH,
+	commentCount,
+	isSameProfile,
+	itemSubtitle,
+	itemTitle,
+	mediaImage,
+	mentionCopy,
+	mentionHref,
+	pureShareCount,
+	ranges,
+	youtubeThumbnailUrl,
+} from "#/components/links-model";
 
 function ProfilePill({
 	profile,
@@ -667,209 +490,23 @@ function LinkInsightRow({
 }
 
 function LinksRoute() {
-	const [kind, setKind] = useState<LinkInsightKind>("links");
-	const [range, setRange] = useState<LinkInsightRange>("week");
-	const [source, setSource] = useState<LinkInsightSource>("all");
-	const [sort, setSort] = useState<LinkInsightSort>("rank");
-	const [search, setSearch] = useState("");
-	const [refreshTick, setRefreshTick] = useState(0);
-	const initialCacheKey = insightCacheKey(kind, range, sort, source, 0);
-	const initialSharedData = readClientCache<LinkInsightResponse>(
-		sharedInsightCacheKey(kind, range, sort, source),
-		LINK_INSIGHTS_CACHE_MAX_AGE_MS,
-	);
-	const cacheRef = useRef(
-		new Map<string, LinkInsightResponse>(
-			initialSharedData ? [[initialCacheKey, initialSharedData]] : [],
-		),
-	);
-	const inFlightRef = useRef(new Set<string>());
-	const mountedRef = useRef(true);
-	const [errorByKey, setErrorByKey] = useState<Record<string, string>>({});
-	const [, bumpCacheVersion] = useState(0);
-	const currentCacheKey = insightCacheKey(
+	const {
 		kind,
+		setKind,
 		range,
-		sort,
+		setRange,
 		source,
-		refreshTick,
-	);
-	const data = cacheRef.current.get(currentCacheKey) ?? null;
-	const error = errorByKey[currentCacheKey] ?? null;
-	const loading = !data && !error;
-
-	useEffect(() => {
-		return () => {
-			mountedRef.current = false;
-		};
-	}, []);
-
-	const fetchInsights = useCallback(
-		(fetchKind: LinkInsightKind) => {
-			const key = insightCacheKey(fetchKind, range, sort, source, refreshTick);
-			if (cacheRef.current.has(key) || inFlightRef.current.has(key)) {
-				return;
-			}
-			const sharedKey = sharedInsightCacheKey(fetchKind, range, sort, source);
-			if (refreshTick === 0) {
-				const cached = readClientCache<LinkInsightResponse>(
-					sharedKey,
-					LINK_INSIGHTS_CACHE_MAX_AGE_MS,
-				);
-				if (cached) {
-					cacheRef.current.set(key, cached);
-					bumpCacheVersion((value) => value + 1);
-					return;
-				}
-			}
-			inFlightRef.current.add(key);
-			setErrorByKey((current) => {
-				const rest = { ...current };
-				delete rest[key];
-				return rest;
-			});
-			loadClientCache(
-				sharedKey,
-				() =>
-					fetch(
-						linkInsightsUrl(fetchKind, range, sort, source, refreshTick),
-					).then((response) => response.json() as Promise<LinkInsightResponse>),
-				{
-					force: refreshTick > 0,
-					maxAgeMs: LINK_INSIGHTS_CACHE_MAX_AGE_MS,
-				},
-			)
-				.then((response: LinkInsightResponse) => {
-					cacheRef.current.set(key, response);
-					if (mountedRef.current) {
-						bumpCacheVersion((value) => value + 1);
-					}
-				})
-				.catch((error: unknown) => {
-					if (error instanceof DOMException && error.name === "AbortError") {
-						return;
-					}
-					if (!mountedRef.current) {
-						return;
-					}
-					console.warn("Link insights failed", error);
-					setErrorByKey((current) => ({
-						...current,
-						[key]:
-							error instanceof Error
-								? error.message
-								: "Link insights unavailable",
-					}));
-				})
-				.finally(() => {
-					inFlightRef.current.delete(key);
-				});
-		},
-		[range, refreshTick, sort, source],
-	);
-
-	useEffect(() => {
-		fetchInsights(kind);
-	}, [fetchInsights, kind]);
-
-	useEffect(() => {
-		if (!data) {
-			return;
-		}
-		const prefetchKind = kind === "links" ? "videos" : "links";
-		const timer = window.setTimeout(() => fetchInsights(prefetchKind), 250);
-		return () => window.clearTimeout(timer);
-	}, [data, fetchInsights, kind]);
-
-	useEffect(() => {
-		const handles = collectProfilesForHydration(data).filter(
-			(handle) =>
-				!readClientCache<boolean>(hydratedProfileCacheKey(handle)) &&
-				!hydratingLinkProfileHandles.has(handle.toLowerCase()),
-		);
-		if (handles.length === 0) {
-			return;
-		}
-
-		const controller = new AbortController();
-		const url = new URL("/api/profile-hydrate", window.location.origin);
-		url.searchParams.set("handles", handles.join(","));
-		for (const handle of handles) {
-			hydratingLinkProfileHandles.add(handle.toLowerCase());
-		}
-		const finishHydration = (succeeded: boolean) => {
-			for (const handle of handles) {
-				const normalized = handle.toLowerCase();
-				hydratingLinkProfileHandles.delete(normalized);
-				if (succeeded) {
-					writeClientCache(hydratedProfileCacheKey(normalized), true);
-				}
-			}
-		};
-
-		let idleId: number | null = null;
-		const runHydration = () => {
-			fetch(url, { signal: controller.signal })
-				.then((response) => response.json())
-				.then((response: { hydratedProfiles?: number }) => {
-					finishHydration(true);
-					if ((response.hydratedProfiles ?? 0) > 0) {
-						setRefreshTick((value) => value + 1);
-					}
-				})
-				.catch((error: unknown) => {
-					finishHydration(false);
-					if (error instanceof DOMException && error.name === "AbortError") {
-						return;
-					}
-					console.warn("Profile hydration failed", error);
-				});
-		};
-		const timer = window.setTimeout(() => {
-			if ("requestIdleCallback" in window) {
-				idleId = window.requestIdleCallback(runHydration, { timeout: 2500 });
-			} else {
-				runHydration();
-			}
-		}, PROFILE_HYDRATION_DELAY_MS);
-
-		return () => {
-			controller.abort();
-			finishHydration(false);
-			window.clearTimeout(timer);
-			if (idleId !== null && "cancelIdleCallback" in window) {
-				window.cancelIdleCallback(idleId);
-			}
-		};
-	}, [data]);
-
-	const items = useMemo(() => {
-		const query = search.trim().toLowerCase();
-		const filtered = (data?.items ?? []).filter((item) => {
-			if (!query) {
-				return true;
-			}
-			return [
-				item.title,
-				item.description,
-				item.displayUrl,
-				item.host,
-				item.topSharer?.handle,
-				...item.mentions.map((mention) => mention.commentText),
-			]
-				.filter(Boolean)
-				.some((value) => String(value).toLowerCase().includes(query));
-		});
-		return filtered;
-	}, [data?.items, search]);
-
-	const subtitle = useMemo(() => {
-		if (!data) {
-			return "Loading link memory...";
-		}
-		const label = kind === "videos" ? "video URLs" : "URLs";
-		return `${formatCompactNumber(data.stats.occurrences)} ${label} across ${formatCompactNumber(data.stats.groups)} groups`;
-	}, [data, kind]);
+		setSource,
+		sort,
+		setSort,
+		search,
+		setSearch,
+		items,
+		subtitle,
+		loading,
+		error,
+		retry,
+	} = useLinksController();
 
 	return (
 		<>
@@ -966,7 +603,7 @@ function LinksRoute() {
 						action={
 							<button
 								className="rounded-full bg-[var(--accent)] px-4 py-1.5 text-[14px] font-bold text-white"
-								onClick={() => setRefreshTick((value) => value + 1)}
+								onClick={() => void retry()}
 								type="button"
 							>
 								Retry