feat(community): Sticky header and infinite scroll for Forum by qianghan · Pull Request #54 · livepeer/naap

qianghan · 2026-02-11T05:38:56Z

Summary

Implements sticky header UX for the Community Hub forum (issue #53).

Changes:

Sticky header: Title, New Post button, search, sort filters, and category tabs remain fixed at the top
Summary card: Compact card showing post count and active filter (stays with header)
Scrollable posts only: Post feed scrolls in a dedicated container; header does not move
Infinite scroll: Load more posts when user scrolls near bottom using IntersectionObserver

Layout:

Main content: flex flex-col with flex-shrink-0 header block and flex-1 min-h-0 overflow-y-auto posts area
Sentinel element at bottom triggers loadMore when visible
Sidebar unchanged (Leaderboard, Tags)

Closes #53

Test plan

Header stays fixed when scrolling down the post list
Summary card shows correct post count and filter
Infinite scroll loads more posts when scrolling to bottom
Changing filters/sort reloads posts and resets scroll
Layout works at different viewport sizes

Made with Cursor

- Header (title, New Post, search, sort, category tabs) stays fixed - Summary card shows post count and active filter - Only the post feed scrolls in a dedicated scroll container - Infinite scroll: load more posts when user scrolls near bottom - IntersectionObserver triggers load when sentinel is visible Closes #53 Co-authored-by: Cursor <cursoragent@cursor.com>

vercel · 2026-02-11T05:39:00Z

@seanhanca is attempting to deploy a commit to the Livepeer Foundation Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2026-02-11T05:39:02Z

Warning

Rate limit exceeded

@qianghan has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 2 minutes and 26 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

qianghan · 2026-02-11T05:40:16Z

@github-copilot review

+      (entries) => {
+        if (entries[0]?.isIntersecting) loadMore();
+      },
+      { root, rootMargin: '200px', threshold: 0 }


Copilot

Pull request overview

This PR implements a sticky header with infinite scroll functionality for the Community Hub forum. The changes enhance the UX by keeping navigation controls visible while scrolling through posts and automatically loading additional content as users reach the bottom of the feed.

Changes:

Sticky header implementation with fixed filters, search, and category navigation
Infinite scroll mechanism using IntersectionObserver to load posts automatically
Layout refactoring to support fixed header with scrollable content area

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-11T05:42:35Z

+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [loadMore]);


The loadMore dependency in the useEffect creates a new observer on every render because loadMore is recreated each time its dependencies change. This causes the observer to disconnect and reconnect frequently. Consider wrapping loadMore in useCallback with stable dependencies or restructuring to avoid recreating the observer unnecessarily.

Fixed in de5194b — loadMore now uses postsLengthRef and votedPostsRef so it has stable deps (no posts.length). IntersectionObserver no longer reconnects on every load.

Copilot · 2026-02-11T05:42:35Z

+    } finally {
+      setLoadingMore(false);
+    }
+  }, [categoryFilter, searchQuery, sortBy, posts.length, total, loadingMore, loading]);


The loadMore callback includes posts.length as a dependency, which changes every time posts are loaded, causing the function to be recreated. This triggers the IntersectionObserver useEffect to recreate the observer. Consider using a functional state update in setPosts to avoid this dependency, or use a ref to track the current offset.

Fixed in de5194b — using refs to avoid posts.length dependency. loadMore reads offset from postsLengthRef.current.

Copilot · 2026-02-11T05:42:36Z

@@ -156,88 +211,105 @@ export const ForumPage: React.FC = () => {
  const currentUser = getCurrentUser();

  return (


The combination of h-full min-h-0 on the outermost container requires that a parent element has defined height constraints. Add a comment explaining this layout dependency, as it may cause layout issues if the parent structure changes.

Suggested change

return (

return (

{/* NOTE: This outer container uses `h-full min-h-0` and therefore relies on a parent element */}

{/* having explicit height constraints (e.g., an app shell with `h-screen` or similar). If the */}

{/* parent layout changes and no longer constrains height, scrolling and flex behavior here */}

{/* may break or behave unexpectedly. */}

Fixed in de5194b — added layout dependency comment above the container div.

- Use refs (postsLengthRef, votedPostsRef) for loadMore to avoid recreation on every post load; keeps IntersectionObserver stable - Add layout dependency comment for h-full min-h-0 parent requirement Co-authored-by: Cursor <cursoragent@cursor.com>

qianghan · 2026-02-11T05:45:53Z

@github-copilot review

+  const postsLengthRef = useRef(0);
+  const votedPostsRef = useRef<Set<string>>(new Set());
+  postsLengthRef.current = posts.length;
+  votedPostsRef.current = votedPosts;


vercel

Additional Suggestion:

votedPosts state not cleared when search results are empty, causing stale voted indicators on subsequent searches

vercel · 2026-02-11T05:48:12Z

+    } finally {
+      setLoadingMore(false);
+    }
+  }, [categoryFilter, searchQuery, sortBy, total, loadingMore, loading]);


Suggested change

}, [categoryFilter, searchQuery, sortBy, total, loadingMore, loading]);

}, [categoryFilter, searchQuery, sortBy, total]);

The loadMore callback dependency array still includes guard condition variables (loadingMore, loading) that shouldn't be dependencies, causing IntersectionObserver to recreate on every state change instead of only when actual filters change.

vercel · 2026-02-11T05:48:12Z

+          );
+          setVotedPosts(votedIds);
+        }
+        setPosts((prev) => [...prev, ...newPosts]);


Suggested change

setPosts((prev) => [...prev, ...newPosts]);

}, [categoryFilter, searchQuery, sortBy, posts.length, total, loadingMore, loading, votedPosts]);

Using refs for votedPosts in loadMore callback still allows stale closure when user votes during async operations

seanhanca · 2026-02-11T05:55:59Z

Closing in favor of same-repo PR to fix label/merge permissions.

Address 35 medium-severity CodeQL alerts across 22 files: **Log injection (js/log-injection) — 21 alerts:** - Add sanitizeForLog() helper to strip control characters and newlines from user-controlled values before they reach log output - Applied across 14 files (auth, registry, lifecycle, storage, plugins) **Permissive CORS configuration (js/cors-permissive-configuration) — 3 alerts:** - Replace wildcard CORS (origin: true / '*') with origin validation callback using CORS_ALLOWED_ORIGINS environment variable **File data in outbound network request (js/file-access-to-http) — 6 alerts:** - Add path.resolve() validation to ensure files stay within expected directories before reading and sending over network **Indirect command line injection (js/indirect-command-line-injection) — 2 alerts:** - Replace execSync with shell interpolation with execFileSync using argument arrays to prevent shell injection **Missing origin verification (js/missing-origin-check) — 2 alerts:** - Add event.origin check in postMessage handlers for plugin frontends **Network data written to file (js/http-to-file-access) — 1 alert:** - Add path traversal validation before writing network data to disk Alerts fixed: #54-56, #78-82, #98-101, #129-149, #277-278, #281-282 Co-authored-by: Cursor <cursoragent@cursor.com>

* fix: resolve all medium-severity code scanning alerts Address 35 medium-severity CodeQL alerts across 22 files: **Log injection (js/log-injection) — 21 alerts:** - Add sanitizeForLog() helper to strip control characters and newlines from user-controlled values before they reach log output - Applied across 14 files (auth, registry, lifecycle, storage, plugins) **Permissive CORS configuration (js/cors-permissive-configuration) — 3 alerts:** - Replace wildcard CORS (origin: true / '*') with origin validation callback using CORS_ALLOWED_ORIGINS environment variable **File data in outbound network request (js/file-access-to-http) — 6 alerts:** - Add path.resolve() validation to ensure files stay within expected directories before reading and sending over network **Indirect command line injection (js/indirect-command-line-injection) — 2 alerts:** - Replace execSync with shell interpolation with execFileSync using argument arrays to prevent shell injection **Missing origin verification (js/missing-origin-check) — 2 alerts:** - Add event.origin check in postMessage handlers for plugin frontends **Network data written to file (js/http-to-file-access) — 1 alert:** - Add path traversal validation before writing network data to disk Alerts fixed: #54-56, #78-82, #98-101, #129-149, #277-278, #281-282 Co-authored-by: Cursor <cursoragent@cursor.com> * fix: address CodeRabbit and Vercel review comments for PR 84 - Tenant config: sanitize settings before logging (log injection) - plugin-server-sdk CORS: empty allowlist now fails closed unless explicit '*' or dev mode; trim/normalize origins - postMessage (daydream, plugin-publisher): use origin allowlist (window.location.origin + VITE_ALLOWED_MESSAGE_ORIGINS) instead of event.origin !== window.location.origin which broke cross-origin iframes; use event.origin for postMessage target (not wildcard) - lifecycle executeS3Call: sanitize args before logging - sanitizeForLog: add U+2028/U+2029 to prevent log-forging bypass - Password reset: never log token in production (gate behind NODE_ENV) - plugin-server, plugin-publisher CORS: fail closed when allowlist empty in production; allow in dev for local workflow * chore: relax CORS to allow-all when allowlist empty Avoid breaking Vercel/deployments; empty CORS_ALLOWED_ORIGINS now defaults to allow-all. TODO: tighten later by setting allowlist. --------- Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: seanhanca <seanhanca@users.noreply.github.com>

github-advanced-security AI found potential problems Feb 11, 2026

View reviewed changes

seanhanca requested review from Copilot and seanhanca February 11, 2026 05:41

Copilot AI reviewed Feb 11, 2026

View reviewed changes

github-advanced-security AI found potential problems Feb 11, 2026

View reviewed changes

vercel Bot reviewed Feb 11, 2026

View reviewed changes

seanhanca closed this Feb 11, 2026

vercel Bot deployed to Preview February 11, 2026 05:57 View deployment

eliteprox mentioned this pull request Feb 11, 2026

fix: resolve all medium-severity code scanning alerts #84

Merged

6 tasks

		@@ -156,88 +211,105 @@ export const ForumPage: React.FC = () => {
		const currentUser = getCurrentUser();

		return (

-  return (
+  return (
+    {/* NOTE: This outer container uses `h-full min-h-0` and therefore relies on a parent element */}
+    {/* having explicit height constraints (e.g., an app shell with `h-screen` or similar). If the */}
+    {/* parent layout changes and no longer constrains height, scrolling and flex behavior here */}
+    {/* may break or behave unexpectedly. */}

	}, [categoryFilter, searchQuery, sortBy, total, loadingMore, loading]);
	}, [categoryFilter, searchQuery, sortBy, total]);

	setPosts((prev) => [...prev, ...newPosts]);
	}, [categoryFilter, searchQuery, sortBy, posts.length, total, loadingMore, loading, votedPosts]);

Conversation

qianghan commented Feb 11, 2026

Summary

Test plan

Uh oh!

vercel Bot commented Feb 11, 2026

Uh oh!

coderabbitai Bot commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Uh oh!

qianghan commented Feb 11, 2026

Uh oh!

Check warning

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

qianghan Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

qianghan Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

qianghan Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

qianghan commented Feb 11, 2026

Uh oh!

Check warning

Uh oh!

vercel Bot left a comment

Choose a reason for hiding this comment

Uh oh!

vercel Bot Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

vercel Bot Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

seanhanca commented Feb 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

coderabbitai Bot commented Feb 11, 2026 •

edited

Loading