feat: add search & filter bar on public profile (#666)

[Dev1822]

Fixes: #666

✨ Description

This PR introduces a client-side Search & Filter Bar at the top of the public profile, allowing visitors to instantly filter a user's visible links by typing keywords.

As requested in the issue, this solves the problem of visitors having to scroll through dozens of links on prolific creators' profiles to find a specific platform or link.

🛠️ Changes Made

• Converted app/[username]/ProfileCard.tsx to a client component ("use client") to manage React state.
• Added a useState hook for searchQuery.
• Rendered a sleek <input type="search"> directly below the bio section, styled to match the existing UI with a magnifying glass icon.
• Implemented case-insensitive filtering for both socialLinks and regularLinks (including matching against links inside grouped folders). The filtering checks against both the link's label and platform.
• Display a friendly "No links found" state if the search yields zero matching links.

🎯 Acceptance Criteria Met

• The search bar filters links instantly as the user types.
• The search is case-insensitive.
• If no links match the query, a friendly "No links found" message is displayed.

Summary by CodeRabbit

• New Features
  • Added link search to profile cards.
  • Search supports labels and platforms while preserving grouped matches.
  • Added a “No links found” state when searches return no results.
  • Search results now display social links, newsletters, and regular links appropriately.

[vercel]

@Dev1822 is attempting to deploy a commit to the vishnukothakapu's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

ProfileCard now provides client-side search for public profile links. It filters social and regular links by label or platform, preserves matching grouped links, excludes social links from regular results, and displays a no-results state.

Changes

Profile Link Search

Layer / File(s)	Summary
Search filtering and conditional rendering app/[username]/ProfileCard.tsx	ProfileCard manages the search query, performs case-insensitive filtering, renders a search input, and displays filtered social, newsletter, and regular links. It shows “No links found” when no links match.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• vishnukothakapu/linkid#165: Refactors the label and platform mapping used by ProfileCard.
• vishnukothakapu/linkid#654: Separates social and regular link rendering in ProfileCard.

Sequence Diagram(s)

sequenceDiagram
  participant Visitor
  participant ProfileCard
  participant ProfileLinks
  Visitor->>ProfileCard: Enter search query
  ProfileCard->>ProfileCard: Filter links by label or platform
  ProfileCard->>ProfileLinks: Pass filtered regular links
  ProfileCard-->>Visitor: Show matching links or "No links found"

Loading

Suggested labels: level:intermediate, type:feature

Suggested reviewers: anushreebasics

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes implement client-side filtering below the bio with case-insensitive matching and a “No links found” state [#666].
Out of Scope Changes check	✅ Passed	The grouped-link and social-link handling supports the profile link filtering objective and does not introduce unrelated changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the addition of a search and filter bar on public profiles.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/`[username]/ProfileCard.tsx:
- Around line 87-93: Add an accessible name to the search input in ProfileCard
by associating it with a visible label or adding aria-label="Search links".
Preserve the existing searchQuery value and onChange behavior.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3a588a15-a889-4459-8592-fcd18eeaaf21

📥 Commits

Reviewing files that changed from the base of the PR and between b2f6c83 and f89a597.

📒 Files selected for processing (1)

• app/[username]/ProfileCard.tsx

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
linkid	Ready	Preview	Aug 14, 2026 6:38am