feat(web): add Load More button to OSS friends page for efficient loading

[ComputelessComputer]

Summary

Adds a "Load More" button to the OSS friends page for more efficient initial page loading. The page now shows 12 projects initially and loads 12 more each time the button is clicked. When the user starts searching, all matching results are shown immediately (pagination is bypassed).

Updates since last revision

• Updated the Load More button styling to use a white-ish linear gradient (from-stone-100 to-white) with matching hover states

Review & Testing Checklist for Human

• Verify the "Load more" button appears when there are more than 12 OSS friends
• Verify clicking "Load more" shows 12 additional projects
• Verify the button disappears when all projects are displayed
• Verify that typing in the search box shows all matching results (ignoring pagination)
• Verify the button gradient styling looks correct and hover state transitions smoothly
• Note: When clearing the search after loading more items, the displayCount state persists (user sees where they left off). Confirm this is the desired behavior vs. resetting to 12.

Notes

• Link to Devin run: https://app.devin.ai/sessions/1ad403fa7ad64ca889047939337ff2eb
• Requested by: [email protected] (@ComputelessComputer)

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[netlify]

✅ Deploy Preview for hyprnote-storybook ready!

Name	Link
🔨 Latest commit	546ab5b
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/693295052768ee000884a81f
😎 Deploy Preview	https://deploy-preview-2137--hyprnote-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for hyprnote ready!

Name	Link
🔨 Latest commit	546ab5b
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/693295052768ee000884a81b
😎 Deploy Preview	https://deploy-preview-2137--hyprnote.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

Implements client-side pagination for the OSS friends list. Adds display limiting via constants and state, computes a displayedFriends subset, and extends FriendsSection to render a "Load more" button that increments the visible count.

Changes

Cohort / File(s)

Summary

Client-side pagination implementation apps/web/src/routes/_view/oss-friends.tsx

Adds INITIAL_DISPLAY_COUNT and LOAD_MORE_COUNT constants; introduces displayCount state to limit initial visible items. Computes displayedFriends as a subset of filtered results (when not searching) and hasMore boolean to track availability. Implements handleLoadMore handler that increments displayCount. Updates FriendsSection component signature to accept hasMore and onLoadMore props; renders a "Load more" button when items remain.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify constant values (INITIAL_DISPLAY_COUNT, LOAD_MORE_COUNT) are appropriate
• Confirm pagination logic correctly slices filteredFriends and handles the hasMore computation
• Check prop threading from parent to FriendsSection and button click handler behavior

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding a Load More button to the OSS friends page for efficient loading, which aligns with the core functionality introduced in the changeset.
Description check	✅ Passed	The description is directly related to the changeset, providing a clear summary of the Load More feature, initial display count, search behavior, styling updates, and a comprehensive testing checklist.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch devin/1764920281-oss-friends-load-more

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

apps/web/src/routes/_view/oss-friends.tsx (1)

60-64: Consider memoizing displayedFriends for consistency.

The pagination logic is correct. However, for consistency with the memoized filteredFriends, consider wrapping displayedFriends in useMemo with dependencies [isSearching, filteredFriends, displayCount].

Apply this diff if you'd like to memoize the computation:

+  const isSearching = search.trim().length > 0;
+
+  const displayedFriends = useMemo(() => {
+    return isSearching ? filteredFriends : filteredFriends.slice(0, displayCount);
+  }, [isSearching, filteredFriends, displayCount]);
+
-  const isSearching = search.trim().length > 0;
-  const displayedFriends = isSearching
-    ? filteredFriends
-    : filteredFriends.slice(0, displayCount);
  const hasMore = !isSearching && displayCount < filteredFriends.length;

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a85a87b and 546ab5b.

📒 Files selected for processing (1)

• apps/web/src/routes/_view/oss-friends.tsx (5 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, use cn (import from @hypr/utils). It is similar to clsx. Always pass an array and split by logical grouping.
Use motion/react instead of framer-motion.

Files:

• apps/web/src/routes/_view/oss-friends.tsx

🧬 Code graph analysis (1)

apps/web/src/routes/_view/oss-friends.tsx (1)

packages/utils/src/cn.ts (1)

• cn (20-22)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: Redirect rules - hyprnote
• GitHub Check: fmt
• GitHub Check: ci
• GitHub Check: Header rules - hyprnote
• GitHub Check: Pages changed - hyprnote
• GitHub Check: Devin

🔇 Additional comments (4)

apps/web/src/routes/_view/oss-friends.tsx (4)

43-44: LGTM!

The pagination constants are well-defined and match the PR requirements.

---

66-68: LGTM!

The handleLoadMore function correctly increments the display count using the functional update form.

---

78-82: LGTM!

The props are correctly passed to FriendsSection to enable the load-more functionality.

---

136-144: LGTM!

The function signature correctly extends the props with hasMore and onLoadMore, and follows the coding guideline to inline props rather than creating a separate interface.