feat(pagination, ui): add real pagination, page routes, and scroll/Sticky layout polish

hinsley · hinsley · commit 472df1731e7f · 2025-08-23T06:10:58.000-04:00
- lib/protocol.ts:
  - Add countPostsInThread and fetchPostPage using messages.search with addOffset=(totalPages - page)*pageSize and limit=pageSize.
  - Remove GetHistory fallback from searchPostCards; rely on search only.
  - Sort page items oldest-first; add docs and cleanups.
- app/App.tsx:
  - Add thread page route /forum/:id/board/:boardId/thread/:threadId/page/:page.
- features/forum/BoardPage.tsx:
  - Wire pagination: read :page, fetch only that page via fetchPostPage, map to UI.
  - Add First/Prev/Next/Last buttons with disabled states and k/n page indicator.
  - Default thread navigation to /page/1; redirect only when threadId present but page missing.
  - Fix board breadcrumb navigation loop (no bounce back into thread).
  - Use pageData.items (replace old posts var).
  - Make thread top bar non-sticky per final UX decision.
- styles/theme.css:
  - Keep app header sticky; make sidebar sticky + independently scrollable (no scrollbar shown).
  - Make right content column the scrolling region; set content height to viewport below header.
  - Hide scrollbars within content viewport without changing scroll behavior.

fix: first page rendering empty (switch from negative limit to correct offset + positive limit)
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -52,6 +52,7 @@ export default function App() {
 				<Route path="/forum/:id" element={<RequireAuth><ForumPage /></RequireAuth>} />
 				<Route path="/forum/:id/board/:boardId" element={<RequireAuth><BoardPage /></RequireAuth>} />
 				<Route path="/forum/:id/board/:boardId/thread/:threadId" element={<RequireAuth><BoardPage /></RequireAuth>} />
+				<Route path="/forum/:id/board/:boardId/thread/:threadId/page/:page" element={<RequireAuth><BoardPage /></RequireAuth>} />
 				<Route path="/settings" element={<RequireAuth><SettingsPage /></RequireAuth>} />
 				<Route path="*" element={<RequireAuth><DiscoverPage /></RequireAuth>} />
 			</Routes>
diff --git a/src/features/forum/BoardPage.tsx b/src/features/forum/BoardPage.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import ForumList from '@components/ForumList';
 import { useForumsStore } from '@state/forums';
 import { getInputPeerForForumId } from '@lib/telegram/peers';
 import { useQuery } from '@tanstack/react-query';
-import { ThreadMeta, searchThreadCards, searchPostCards, composeThreadCard, composePostCard, generateIdHash, searchBoardCards, getLastPostForThread } from '@lib/protocol';
+import { ThreadMeta, searchThreadCards, composeThreadCard, composePostCard, generateIdHash, searchBoardCards, getLastPostForThread, fetchPostPage } from '@lib/protocol';
 import { deleteMessages, sendPlainMessage, getClient, editMessage } from '@lib/telegram/client';
 import MessageList from '@components/MessageList';
 import { getAvatarBlob, setAvatarBlob } from '@lib/db';
@@ -15,7 +15,7 @@ import SidebarToggle from '@components/SidebarToggle';
 import { formatTimeSince } from '@lib/time';
 
 export default function BoardPage() {
-	const { id, boardId, threadId } = useParams();
+	const { id, boardId, threadId, page } = useParams();
 	const forumId = Number(id);
 	const navigate = useNavigate();
 	const initForums = useForumsStore((s) => s.initFromStorage);
@@ -97,12 +97,21 @@ export default function BoardPage() {
 	const activeThread = (threads || []).find((t) => t.id === activeThreadId) || null;
 	const [openMenuForThreadId, setOpenMenuForThreadId] = useState<string | null>(null);
 
-	const { data: posts = [], isLoading: loadingPosts, error: postsError, refetch: refetchPosts } = useQuery({
-		queryKey: ['posts', forumId, boardId, activeThreadId],
+	// Normalize current page, default to 1 and redirect to include page param if missing.
+	const currentPage = Math.max(1, Number.isFinite(Number(page)) ? Number(page) : 1);
+	useEffect(() => {
+		// Only redirect when the URL actually contains a threadId but lacks a page.
+		if (threadId && !page) {
+			navigate(`/forum/${forumId}/board/${boardId}/thread/${threadId}/page/1`, { replace: true });
+		}
+	}, [threadId, page, forumId, boardId, navigate]);
+
+	const { data: pageData, isLoading: loadingPosts, error: postsError, refetch: refetchPosts } = useQuery<{ items: any[]; count: number; pages: number }>({
+		queryKey: ['posts', forumId, boardId, activeThreadId, currentPage],
 		queryFn: async () => {
-			if (!activeThreadId) return [] as any[];
+			if (!activeThreadId) return { items: [] as any[], count: 0, pages: 1 };
 			const input = getInputPeerForForumId(forumId);
-			const items = await searchPostCards(input, String(activeThreadId));
+			const { items, count, pages } = await fetchPostPage(input, String(activeThreadId), currentPage, 10);
 			// Build author map and load avatars once per unique user.
 			const uniqueUserIds = Array.from(new Set(items.map((p) => p.fromUserId).filter(Boolean))) as number[];
 			const client = await getClient();
@@ -137,7 +146,6 @@ export default function BoardPage() {
 					userIdToUrl[uid] = undefined;
 				}
 			}
-			// Map to display messages, preserving metadata used by both branches.
 			const mapped = items.map((p) => ({
 				id: p.messageId,
 				from: p.fromUserId ? (p.user?.username ? '@' + p.user.username : [p.user?.firstName, p.user?.lastName].filter(Boolean).join(' ')) : 'unknown',
@@ -171,7 +179,7 @@ export default function BoardPage() {
 				canDelete: false,
 			}));
 			mapped.sort((a, b) => a.date - b.date);
-			return mapped as any[];
+			return { items: mapped as any[], count, pages };
 		},
 		enabled: Number.isFinite(forumId) && Boolean(activeThreadId),
 		staleTime: 5_000,
@@ -228,6 +236,8 @@ export default function BoardPage() {
 	const [draftAttachments, setDraftAttachments] = useState<DraftAttachment[]>([]);
 	const [isEditing, setIsEditing] = useState(false);
 	const [editingMessageId, setEditingMessageId] = useState<number | null>(null);
+	const [showPostSubmitted, setShowPostSubmitted] = useState(false);
+	const hidePostSubmittedTimerRef = useRef<number | undefined>(undefined);
 
 	async function prepareUploadedInputMedia(uploaded: any, file: File): Promise<PreparedInputMedia> {
 		// Always send uploads as files (documents).
@@ -318,13 +328,15 @@ export default function BoardPage() {
 					const firstText = composePostCard(idHash, activeThreadId, { content: composerText });
 					await sendMediaMessage(input, firstText, prepared[0]!.inputMedia);
 				}
+				try { if (hidePostSubmittedTimerRef.current) { clearTimeout(hidePostSubmittedTimerRef.current); } } catch {}
+				setShowPostSubmitted(true);
+				hidePostSubmittedTimerRef.current = window.setTimeout(() => { setShowPostSubmitted(false); }, 10000);
 			}
 
 			setComposerText('');
 			setDraftAttachments([]);
 			setIsEditing(false);
 			setEditingMessageId(null);
-			setTimeout(() => { refetchPosts(); }, 250);
 		} catch (e: any) {
 			alert(e?.message ?? 'Failed to send post');
 		}
@@ -423,6 +435,11 @@ export default function BoardPage() {
 			</aside>
 			<SidebarToggle />
 			<main className="main">
+				{showPostSubmitted && (
+					<div onClick={() => setShowPostSubmitted(false)} style={{ position: 'fixed', top: 56, left: 0, right: 0, zIndex: 20, display: 'flex', justifyContent: 'center' }}>
+						<div className="card" style={{ padding: 8, cursor: 'pointer' }}>Post submitted. It should become visible within a few minutes.</div>
+					</div>
+				)}
 				{!activeThreadId ? (
 					<div className="card" style={{ padding: 12 }}>
 						<div className="row" style={{ alignItems: 'center' }}>
@@ -444,7 +461,7 @@ export default function BoardPage() {
 						) : (
 							<div className="gallery boards" style={{ marginTop: 12 }}>
 								{threads.map((t) => (
-									<div key={t.id} className="chiclet" style={{ position: 'relative' }} onClick={() => { setSelectedThreadId(t.id); navigate(`/forum/${forumId}/board/${boardId}/thread/${t.id}`); }}>
+									<div key={t.id} className="chiclet" style={{ position: 'relative' }} onClick={() => { setSelectedThreadId(t.id); navigate(`/forum/${forumId}/board/${boardId}/thread/${t.id}/page/1`); }}>
 										<div className="title">{t.title}</div>
 										{(() => {
 											const lp: any = (lastPostByThreadId as any)[t.id];
@@ -478,8 +495,9 @@ export default function BoardPage() {
 					</div>
 				) : (
 					<div className="card" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-						<div style={{ padding: 12, borderBottom: '1px solid var(--border)' }}>
-							<div className="row" style={{ alignItems: 'center' }}>
+						<div style={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
+							<div style={{ padding: 12, borderBottom: '1px solid var(--border)' }}>
+								<div className="row" style={{ alignItems: 'center' }}>
 								<h3 style={{ margin: 0 }}>
 									<Link to={`/forum/${forumId}`}>{forumTitle}</Link>
 									{' > '}
@@ -488,12 +506,31 @@ export default function BoardPage() {
 									<span>{activeThread ? activeThread.title : 'Thread'}</span>
 								</h3>
 								<div className="spacer" />
+								{(() => {
+									const totalPages = pageData?.pages ?? 1;
+									const onFirst = () => activeThreadId && navigate(`/forum/${forumId}/board/${boardId}/thread/${activeThreadId}/page/1`);
+									const onPrev = () => activeThreadId && navigate(`/forum/${forumId}/board/${boardId}/thread/${activeThreadId}/page/${Math.max(1, currentPage - 1)}`);
+									const onNext = () => activeThreadId && navigate(`/forum/${forumId}/board/${boardId}/thread/${activeThreadId}/page/${Math.min(totalPages, currentPage + 1)}`);
+									const onLast = () => activeThreadId && navigate(`/forum/${forumId}/board/${boardId}/thread/${activeThreadId}/page/${totalPages}`);
+									const atFirst = currentPage <= 1;
+									const atLast = currentPage >= totalPages;
+									return (
+										<div className="row" style={{ alignItems: 'center', gap: 6 }}>
+											<button className="btn" disabled={atFirst} onClick={onFirst} title="First">⏮️</button>
+											<button className="btn" disabled={atFirst} onClick={onPrev} title="Previous">◀️</button>
+											<button className="btn" disabled={atLast} onClick={onNext} title="Next">▶️</button>
+											<button className="btn" disabled={atLast} onClick={onLast} title="Last">⏭️</button>
+											<div style={{ marginLeft: 8, color: 'var(--muted)' }}>{currentPage}/{totalPages}</div>
+										</div>
+									);
+								})()}
+								</div>
 							</div>
-						</div>
-						<div style={{ flex: 1, overflow: 'auto', padding: 0 }}>
+							<div style={{ padding: 0 }}>
 							{loadingPosts ? <div style={{ padding: 12 }}>Loading...</div> : postsError ? <div style={{ padding: 12, color: 'var(--danger)' }}>{(postsError as any)?.message ?? 'Error'}</div> : (
-								<MessageList messages={posts as any[]} currentUserId={resolvedUserId} onEditPost={onEditPost} onDeletePost={onDeletePost} />
+								<MessageList messages={(pageData?.items ?? []) as any[]} currentUserId={resolvedUserId} onEditPost={onEditPost} onDeletePost={onDeletePost} />
 							)}
+							</div>
 						</div>
 						<div className="composer">
 							<div className="col" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
diff --git a/src/lib/protocol.ts b/src/lib/protocol.ts
@@ -264,34 +264,6 @@ export async function searchPostCards(input: Api.TypeInputPeer, parentThreadId:
 		seenMsgIds.add(msgId);
 		items.push({ id: parsed.id, parentThreadId, messageId: msgId, fromUserId, user: fromUserId ? usersMap[String(fromUserId)] : undefined, date: Number(m.date), content: parsed.data.content, media: m.media, groupedId: m.groupedId ? String(m.groupedId) : undefined });
 	}
-
-	// Fallback: also scan recent history to merge very fresh posts (handles indexing/tokenization delays).
-	if (items.length < queryLimit) {
-		let offsetId = 0;
-		const pageSize = Math.min(100, queryLimit);
-		let pages = 0;
-		while (items.length < queryLimit && pages < 30) {
-			const page: any = await client.invoke(new Api.messages.GetHistory({ peer: input, offsetId, addOffset: 0, limit: pageSize }));
-			(page.users ?? []).forEach((u: any) => { usersMap[String(u.id)] = u; });
-			const batch: any[] = (page.messages ?? []).filter((m: any) => m.className === 'Message' || m._ === 'message');
-			if (!batch.length) break;
-			for (const m of batch) {
-				const msgId = Number(m.id);
-				if (seenMsgIds.has(msgId)) continue;
-				const parsed = parsePostCard(m.message ?? '');
-				if (!parsed) continue;
-				if (parsed.parentThreadId !== parentThreadId) continue;
-				const fromUserId: number | undefined = m.fromId?.userId ? Number(m.fromId.userId) : undefined;
-				seenMsgIds.add(msgId);
-				items.push({ id: parsed.id, parentThreadId, messageId: msgId, fromUserId, user: fromUserId ? usersMap[String(fromUserId)] : undefined, date: Number(m.date), content: parsed.data.content, media: m.media, groupedId: m.groupedId ? String(m.groupedId) : undefined });
-				if (items.length >= queryLimit) break;
-			}
-			// pagination: next offset is the last message id in this batch.
-			offsetId = Number(batch[batch.length - 1].id);
-			pages++;
-		}
-	}
-
 	return items;
 }
 
@@ -333,3 +305,76 @@ export async function getLastPostForBoard(
     return latest;
 }
 
+// ---- Pagination helpers ----
+
+/**
+ * Count posts within a thread using Telegram's messages.search count field.
+ */
+export async function countPostsInThread(input: Api.TypeInputPeer, parentThreadId: string): Promise<number> {
+    const client = await getClient();
+    const q = `fg.post ${parentThreadId}`;
+    // Use limit=0 to request only the count; Telegram suggests conflictingly
+	// that 0 will faux-reset itself to 10 and also that it will not do that in
+	// two separate places in the documentation.
+    // Fall back to limit=1 if count is absent.
+    const res: any = await client.invoke(new Api.messages.Search({ peer: input, q, limit: 0, filter: new Api.InputMessagesFilterEmpty() }));
+    const countFromRes = (typeof res?.count === 'number') ? res.count : undefined;
+    if (typeof countFromRes === 'number') return countFromRes;
+    try {
+        const res2: any = await client.invoke(new Api.messages.Search({ peer: input, q, limit: 1, filter: new Api.InputMessagesFilterEmpty() }));
+        return (typeof res2?.count === 'number') ? res2.count : (Array.isArray(res2?.messages) ? res2.messages.length : 0);
+    } catch {
+        return 0;
+    }
+}
+
+/**
+ * Fetch a specific page of posts (oldest-first pagination) using addOffset and negative limit.
+ * Page 1 is the oldest page. Page size defaults to 10.
+ * See Telegram offset semantics: core.telegram.org/api/offsets
+ */
+export async function fetchPostPage(
+    input: Api.TypeInputPeer,
+    parentThreadId: string,
+    page: number,
+    pageSize: number = 10,
+): Promise<{ items: PostCard[]; count: number; pages: number }> {
+    const client = await getClient();
+    const q = `fg.post ${parentThreadId}`;
+    const count = await countPostsInThread(input, parentThreadId);
+    const totalPages = Math.max(1, Math.ceil(Math.max(0, count) / pageSize));
+    const clampedPage = Math.min(Math.max(1, page), totalPages);
+    const lastPageLength = count === 0 ? 0 : ((count - 1) % pageSize) + 1;
+    const isLastPage = clampedPage === totalPages;
+    const addOffset = (count === 0)
+        ? 0
+        : (isLastPage ? 0 : (lastPageLength + Math.max(0, (totalPages - clampedPage - 1)) * pageSize));
+    const limit = count === 0
+        ? 0
+        : (isLastPage ? lastPageLength : pageSize);
+
+    const res: any = await client.invoke(new Api.messages.Search({
+        peer: input,
+        q,
+        addOffset,
+        limit,
+        filter: new Api.InputMessagesFilterEmpty(),
+    } as any));
+
+    const usersMap: Record<string, any> = {};
+    (res.users ?? []).forEach((u: any) => { usersMap[String(u.id)] = u; });
+    const messages: any[] = (res.messages ?? []).filter((m: any) => m.className === 'Message' || m._ === 'message');
+    const items: PostCard[] = [];
+    for (const m of messages) {
+        const parsed = parsePostCard(m.message ?? '');
+        if (!parsed) continue;
+        if (parsed.parentThreadId !== parentThreadId) continue;
+        const fromUserId: number | undefined = m.fromId?.userId ? Number(m.fromId.userId) : undefined;
+        const msgId = Number(m.id);
+        items.push({ id: parsed.id, parentThreadId, messageId: msgId, fromUserId, user: fromUserId ? usersMap[String(fromUserId)] : undefined, date: Number(m.date), content: parsed.data.content, media: m.media, groupedId: m.groupedId ? String(m.groupedId) : undefined });
+    }
+    // Ensure oldest-first order within page.
+    items.sort((a, b) => (a.date ?? 0) - (b.date ?? 0));
+    return { items, count, pages: totalPages };
+}
+
diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -180,9 +180,14 @@ a:hover { text-decoration: underline; }
 .btn.primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #071219; border-color: transparent; }
 .btn.ghost { background: transparent; box-shadow: none; }
 
-.content { display: grid; grid-template-columns: 280px 1fr; height: 100%; }
-.sidebar { border-right: 1px solid var(--border); background: var(--bg-elev); padding: 12px; overflow: auto; }
-.main { padding: 12px; overflow: hidden; }
+.content { display: grid; grid-template-columns: 280px 1fr; height: calc(100vh - 56px); }
+.sidebar { border-right: 1px solid var(--border); background: var(--bg-elev); padding: 12px; overflow: auto; position: sticky; top: 56px; height: calc(100vh - 56px); scrollbar-width: none; -ms-overflow-style: none; }
+.sidebar::-webkit-scrollbar { display: none; }
+.main { padding: 12px; overflow: auto; height: 100%; scrollbar-width: none; -ms-overflow-style: none; }
+.main::-webkit-scrollbar { display: none; }
+/* Hide scrollbars for any nested scrollable areas inside content viewport */
+.main * { scrollbar-width: none; -ms-overflow-style: none; }
+.main *::-webkit-scrollbar { display: none; }
 .card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
 
 /* Lists */
