Implement Projects Discovery View (Projects tab) + build fixes (Tailwind v4 + UI typings) - #19
Conversation
|
@JamesVictor-O Please add proof of your working implementation |
Screen.Recording.2026-01-24.at.11.58.31.mov |
There was a problem hiding this comment.
Pull request overview
This PR implements a comprehensive Projects discovery experience with search, filtering, sorting capabilities, and a detailed project view page. It also includes several build fixes for Tailwind v4, TypeScript exports, and react-resizable-panels imports to keep the Next.js/Turbopack builds working correctly.
Changes:
- Added Projects discovery page with search, tag filtering, status filtering, and multiple sorting options
- Implemented project detail pages with SSG support and graceful not-found handling
- Fixed build issues: Tailwind v4 typography plugin syntax, ButtonProps export, and react-resizable-panels imports
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| types/project.ts | Defines the Project type with all necessary fields for discovery and detail pages |
| lib/mock-project.ts | Provides mock project data and helper functions for retrieving projects and tags |
| app/globals.css | Fixed Tailwind v4 typography plugin import syntax from @import to @plugin |
| components/ui/button.tsx | Exported ButtonProps type for reuse in custom button wrappers |
| components/ui/resizable.tsx | Updated imports to use named exports from react-resizable-panels v4 |
| components/projects/projects-discovery.tsx | Main discovery component with search, filters, and project grid layout |
| components/projects/project-card.tsx | Displays project information in a consistent, scannable card layout |
| components/projects/project-logo.tsx | Handles project logos with initials fallback for missing images |
| app/projects/page.tsx | Server component that fetches projects and renders the discovery view |
| app/projects/[id]/page.tsx | Project detail page with SSG, metadata generation, and bounty stats |
| app/projects/[id]/not-found.tsx | Custom 404 page for missing projects |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@0xdevcollins changes implemented |
|
@JamesVictor-O please resolve the conflict in the So i can merge |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughAdds a Projects feature: type and mock-data utilities, listing and detail pages (with static params and metadata), a searchable/filterable discovery UI, reusable project components, a not-found page, and small CSS and component export/import adjustments. Changes
Sequence Diagram(s)sequenceDiagram
participant Browser as Browser
participant NextJS as Next.js Page
participant Data as Mock Data (lib/mock-project)
Browser->>NextJS: Request /projects or /projects/{id}
NextJS->>Data: call getAllProjects() or getProjectById(id)
Data-->>NextJS: return project(s) or undefined
alt project found
NextJS->>Browser: render page with ProjectsDiscovery / ProjectPage (ProjectCard, ProjectLogo)
else project missing
NextJS->>Browser: render not-found page
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Comment |
|
@0xdevcollins conflict resolve please merge |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@app/globals.css`:
- Around line 3-5: Move the `@import` 'tw-animate-css'; line above the `@plugin`
"@tailwindcss/typography"; so that all `@import` rules appear before other
at-rules; update the file so `@import` comes first, then `@plugin`, and leave the
`@custom-variant` dark (&:is(.dark *)); line after them unchanged.
♻️ Duplicate comments (3)
components/projects/project-card.tsx (3)
49-54: Consider using Next.jsImagecomponent for optimization.Using a regular
<img>tag misses out on Next.js automatic image optimization, lazy loading, and proper sizing. The codebase uses the Next.jsImagecomponent elsewhere (e.g., in bounty components).Proposed refactor
+import Image from "next/image"; // ... - <img - src={project.logoUrl} - alt={project.name} - className="h-10 object-contain brightness-90 grayscale hover:grayscale-0 transition-all opacity-80" - /> + <Image + src={project.logoUrl} + alt={project.name} + width={40} + height={40} + className="h-10 w-auto object-contain brightness-90 grayscale hover:grayscale-0 transition-all opacity-80" + />Note: You may need to configure
next.config.jsto allow external image domains iflogoUrlpoints to external sources.
63-66: Guard against emptycreatorNameto prevent runtime error.Accessing
project.creatorName[0]will throw ifcreatorNameis an empty string. Add optional chaining with a fallback.Proposed fix
<AvatarFallback className="bg-gray-800 text-[10px]"> - {project.creatorName[0]} + {project.creatorName?.[0] || "?"} </AvatarFallback>
100-108: Duplicate status display and hardcoded timestamp.Two issues persist in this footer section:
- The project status is shown both in the banner badge (line 44) and here (line 103), which is redundant.
- "Updated 2d ago" is hardcoded and doesn't reflect the actual
project.updatedAtvalue. UseformatDistanceToNowfromdate-fns(already used inapp/projects/[id]/page.tsx) to display the real relative time.Proposed fix for dynamic timestamp
Add the import at the top of the file:
import { formatDistanceToNow } from "date-fns";Then update the footer:
<div className="border-t border-white/5 px-4 py-3 bg-[`#0D0F10`]/50"> - <div className="flex items-center justify-between"> - <span className="text-xs text-white/40 font-semibold uppercase tracking-widest"> - {project.status} - </span> + <div className="flex items-center justify-end"> <span className="text-[10px] text-white/30 font-medium"> - Updated 2d ago + Updated {formatDistanceToNow(new Date(project.updatedAt), { addSuffix: false })} ago </span> </div> </div>
🧹 Nitpick comments (2)
components/projects/projects-discovery.tsx (1)
152-155: Associate the Label with the Switch for better accessibility.The
Labelis visually adjacent to theSwitchbut not programmatically associated. Adding anidto the Switch andhtmlForto the Label improves screen reader support.Proposed fix
<div className="h-12 px-4 rounded-xl bg-[`#1A1F21`] border border-white/5 flex items-center gap-3"> - <Switch checked={hasOpenBounties} onCheckedChange={setHasOpenBounties} /> - <Label className="text-white/80 font-medium text-sm">Has open bounties</Label> + <Switch id="open-bounties" checked={hasOpenBounties} onCheckedChange={setHasOpenBounties} /> + <Label htmlFor="open-bounties" className="text-white/80 font-medium text-sm">Has open bounties</Label> </div>app/projects/[id]/page.tsx (1)
91-96: Placeholder section for bounties is clear.The placeholder text appropriately indicates that this section awaits integration with a real data source. Consider adding a TODO comment or tracking this in an issue for visibility.
Would you like me to open an issue to track wiring up the bounties section to a real data source?
| @plugin "@tailwindcss/typography"; | ||
|
|
||
| @import 'tw-animate-css'; | ||
| @custom-variant dark (&:is(.dark *)); |
There was a problem hiding this comment.
Move @import above @plugin to avoid invalid CSS.
@import rules must appear before other at-rules like @plugin, otherwise the import is ignored and lint/build fails.
💡 Suggested fix
`@import` url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
`@import` 'tailwindcss';
-@plugin "@tailwindcss/typography";
-@import 'tw-animate-css';
+@import 'tw-animate-css';
+@plugin "@tailwindcss/typography";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @plugin "@tailwindcss/typography"; | |
| @import 'tw-animate-css'; | |
| @custom-variant dark (&:is(.dark *)); | |
| `@import` 'tw-animate-css'; | |
| `@plugin` "@tailwindcss/typography"; | |
| `@custom-variant` dark (&:is(.dark *)); |
🧰 Tools
🪛 Biome (2.1.2)
[error] 4-4: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
🤖 Prompt for AI Agents
In `@app/globals.css` around lines 3 - 5, Move the `@import` 'tw-animate-css'; line
above the `@plugin` "@tailwindcss/typography"; so that all `@import` rules appear
before other at-rules; update the file so `@import` comes first, then `@plugin`, and
leave the `@custom-variant` dark (&:is(.dark *)); line after them unchanged.
@JamesVictor-O i am getitng build error here
|
|
@0xdevcollins build error resolved, just a minor type error |
|
@0xdevcollins thank you 🙏 please can you help me close the issue so my points could be awarded to me 🙏 |
Implement Projects Discovery View (Projects tab) + build fixes (Tailwind v4 + UI typings)
Summary
Adds a full Projects discovery experience where users can browse projects and drill into a project detail page. Includes a few small fixes required to keep Next.js/Turbopack builds green.
Close Issue #7
What’s Included
/projects)/projects/[id])generateStaticParamsglobals.cssButtonPropsfor shared button wrappersreact-resizable-panelsexportsUX Notes
Key Files
types/project.tslib/mock-project.tsapp/projects/page.tsxcomponents/projects/projects-discovery.tsxcomponents/projects/project-card.tsxcomponents/projects/project-logo.tsxapp/projects/[id]/page.tsxapp/projects/[id]/not-found.tsxapp/globals.csscomponents/ui/button.tsxcomponents/ui/resizable.tsxPreview
Uploading Screen Recording 2026-01-24 at 11.58.31.mov…
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.