feat: Redesign AI matches card and fix nested route layout issues#215
Open
rajdeepkumar200 wants to merge 4 commits into
Open
feat: Redesign AI matches card and fix nested route layout issues#215rajdeepkumar200 wants to merge 4 commits into
rajdeepkumar200 wants to merge 4 commits into
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you for your first Pull Request to DevLink!
We appreciate your contribution to our open-source community.
Before your PR is reviewed, please ensure:
- ✅ The project builds successfully.
- ✅ Your code follows the project's coding standards.
- ✅ You have tested your changes.
- ✅ Related documentation has been updated if necessary.
Our maintainers will review your PR as soon as possible.
Thank you for helping improve DevLink! 💙
There was a problem hiding this comment.
Pull request overview
Updates the Builders “Matches” experience with a redesigned AI match card and fixes nested detail route rendering by ensuring parent routes render an <Outlet /> when a detail route is active. Also extends mock builder data to include availability so the new UI can display it.
Changes:
- Redesignes the Builders “Matches” tab to render a new
AIMatchCardUI and sync tab selection via validated search params. - Fixes nested detail pages for
/builders/$builderIdand/projects/$projectIdby conditionally returning<Outlet />from the list routes when on a detail pathname. - Adds
availabilityto mock builder profiles inseed.ts.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| frontend/src/routes/_app.builders.tsx | Adds validateSearch, nested route <Outlet /> handling, and implements the new AI Matches card UI. |
| frontend/src/routes/_app.projects.tsx | Adds nested route <Outlet /> handling so project detail pages render correctly. |
| frontend/src/mocks/seed.ts | Extends mock builder profiles with availability and reformats mock data accordingly. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+26
to
+30
| validateSearch: (search: Record<string, unknown>): BuildersSearch => { | ||
| return { | ||
| tab: (search.tab as "discover" | "matches" | "connections") || "discover", | ||
| }; | ||
| }, |
Comment on lines
+8
to
+18
| import { | ||
| Search, | ||
| Sparkles, | ||
| Calendar, | ||
| Briefcase, | ||
| ChevronRight, | ||
| Check, | ||
| Bookmark, | ||
| Star, | ||
| Award, | ||
| } from "lucide-react"; |
Comment on lines
+60
to
+63
| const matchPercentage = `${builder.matchScore}%`; | ||
| const experienceText = `${builder.yearsExp} Yrs`; | ||
| const availabilityText = builder.availability.split(" ")[0]; // e.g. "Full-time" or "Part-time" | ||
|
|
Comment on lines
+82
to
+86
| alt={builder.name} | ||
| className="w-20 h-20 rounded-full border-4 border-card bg-muted object-cover shadow-sm hover:opacity-95 transition-opacity" | ||
| /> | ||
| <span className="absolute bottom-1 right-1 block h-3.5 w-3.5 rounded-full bg-success border-2 border-card" /> | ||
| </Link> |
Comment on lines
+106
to
+114
| <button | ||
| onClick={() => setBookmarked(!bookmarked)} | ||
| className={cn( | ||
| "w-10 h-10 rounded-full border border-border/80 flex items-center justify-center bg-card transition-all duration-200 cursor-pointer shrink-0 ml-2", | ||
| bookmarked | ||
| ? "text-primary border-primary bg-primary/5" | ||
| : "text-muted-foreground hover:text-foreground hover:bg-muted", | ||
| )} | ||
| > |
rajdeepkumar200
changed the title
Owner
|
add screenshots and videos showing what changes have been made. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Redesigned the AI recommendation widget on the Builders matches tab to better match the modern mockup style. The new layout now highlights key profile details, including match percentage, matching skills, experience, availability, and a clear View Details action.
This update also fixes routing issues that prevented dynamic nested detail pages from rendering correctly.
Why
The previous AI Matches tab used the same basic profile card as the discover search view, which did not match the intended modern design.
Sidebar links such as
/builders?tab=matcheswere not being respected by the component, so users were not taken directly to the correct tab.Dynamic pages such as
/builders/$builderIdand/projects/$projectIdwere loading their parent pages but not rendering the correct profile or project detail views because the route outlet handling was missing.Changes
Mock Data and Seed Configuration
Updated
seed.tsto add anavailabilityfield to all mock developer profiles.AI Matches Redesign
Implemented a new
AIMatchCardcomponent in_app.builders.tsxwith a more polished and modern layout.The new card includes:
Router and Search Parameter Handling
Added
validateSearchto the/buildersroute so query parameters are parsed correctly.Added route checks in
_app.builders.tsxand_app.projects.tsxso dynamic detail routes return<Outlet />when needed. This allows nested detail pages to render properly instead of falling back to the parent page.Testing
Ran
npm run buildand confirmed there were no compilation or linting errors.Also tested the main interaction flow by switching tabs, confirming URL synchronization, checking hover transitions, and clicking View Details to open developer profile pages successfully.
Closes #53