feat: implement Coming Soon page and consolidate placeholder routes#412
Open
Shadow-MMN wants to merge 3 commits intoboundlessfi:mainfrom
Open
feat: implement Coming Soon page and consolidate placeholder routes#412Shadow-MMN wants to merge 3 commits intoboundlessfi:mainfrom
Shadow-MMN wants to merge 3 commits intoboundlessfi:mainfrom
Conversation
- Create reusable ComingSoon component with roadmap feature listing - Add /coming-soon route (App Router) - Redirect defunct sidebar and landing routes to Coming Soon - Replace placeholder pages with centralized ComingSoon component - Ensure clean, typed, and accessible implementation
|
Someone is attempting to deploy a commit to the Threadflow Team on Vercel. A member of the Team first needs to authorize it. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review infoConfiguration used: Organization UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds a new centralized Coming Soon page and component, and replaces multiple unfinished routes with immediate redirects to Changes
Sequence Diagram(s)sequenceDiagram
participant Client
participant NextRouter as "Next.js Router"
participant OldPage as "Original Route Page"
participant Coming as "ComingSoon Page"
Client->>NextRouter: Request /grants (or other placeholder)
NextRouter->>OldPage: Render page component
OldPage->>NextRouter: redirect('/coming-soon')
NextRouter-->>Client: Redirect 302 -> /coming-soon
Client->>Coming: Request /coming-soon
Coming->>Navbar: Render Navbar
Coming->>FeatureList: Render animated feature blocks
Coming->>Footer: Render Footer
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/(landing)/bounties/page.tsx (1)
7-14: 🛠️ Refactor suggestion | 🟠 MajorRemove unreachable code and fix component naming.
The
redirect()function throws internally and never returns, making lines 9-13 unreachable dead code. Additionally, the component is namedGrantPagebut this is the bounties page.🧹 Proposed cleanup
-const GrantPage = () => { +const BountiesPage = (): never => { redirect('/coming-soon'); - return ( - <div className='mx-auto mt-10 max-w-[1440px] px-5 py-5 text-center text-4xl font-bold text-white md:px-[50px] lg:px-[100px]'> - Bounties Page - </div> - ); }; -export default GrantPage; +export default BountiesPage;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/`(landing)/bounties/page.tsx around lines 7 - 14, The component is misnamed and contains unreachable JSX after calling redirect(), which throws; rename the component from GrantPage to BountiesPage and remove the dead JSX so the function only performs the redirect (e.g., const BountiesPage = () => { redirect('/coming-soon'); }), then export default BountiesPage. Ensure no JSX remains after the redirect call since redirect() does not return.
🧹 Nitpick comments (10)
app/me/projects/create/page.tsx (1)
3-5: Consider using a descriptive component name and adding type annotation.The component name
pageis generic. While Next.js App Router usespage.tsxas a convention, the exported component itself should have a descriptive name for better readability and debugging. Additionally, the arrow function lacks an explicit return type.Suggested improvement
import { redirect } from 'next/navigation'; -const page = () => { +const ProjectsCreatePage = (): never => { redirect('/coming-soon'); }; -export default page; +export default ProjectsCreatePage;As per coding guidelines: "Use descriptive variable, function, and component names" and "Prefer const arrow functions with explicit type annotations."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/me/projects/create/page.tsx` around lines 3 - 5, Rename the generic `page` component to a descriptive name like `CreateProjectPage`, give it an explicit return type (e.g., `JSX.Element | null` or `React.ReactNode`), and ensure it is the default export; update the function signature where `redirect('/coming-soon')` is called so the new `CreateProjectPage` has the type annotation and returns an appropriate value (null or JSX) after redirecting.app/(landing)/organizations/[id]/grants/page.tsx (1)
2-18: Remove unreachable code and unused imports.After adding
redirect(), the entirereturnblock (lines 7-18) becomes unreachable dead code. Additionally, theAuthGuardandLoadingimports on lines 2-3 are now unused.Suggested cleanup
import { redirect } from 'next/navigation'; -import { AuthGuard } from '@/components/auth'; -import Loading from '@/components/Loading'; export default function GrantsPage() { redirect('/coming-soon'); - return ( - <AuthGuard redirectTo='/auth?mode=signin' fallback={<Loading />}> - <div className='min-h-screen bg-black text-white'> - <div className='flex'> - <main className='flex-1 p-8'> - <h1 className='text-2xl font-bold'>Grants</h1> - <p className='mt-2 text-zinc-400'>Manage your grants here</p> - </main> - </div> - </div> - </AuthGuard> - ); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/`(landing)/organizations/[id]/grants/page.tsx around lines 2 - 18, The GrantsPage currently calls redirect('/coming-soon') which makes the subsequent JSX return and the imports AuthGuard and Loading unused; remove the dead code by either deleting the redirect call if the page should render, or if the redirect is intentional, remove the unused return block and the imports (AuthGuard, Loading) and ensure GrantsPage simply performs the redirect (e.g., keep only the redirect call and no JSX). Locate the GrantsPage component and adjust accordingly so there is no unreachable JSX and no unused imports.app/me/profile/page.tsx (1)
3-5: Consider using a descriptive component name.Same feedback as other redirect pages—use a descriptive name like
ProfilePageand add an explicit return type annotation for consistency.Suggested improvement
import { redirect } from 'next/navigation'; -const page = () => { +const ProfilePage = (): never => { redirect('/coming-soon'); }; -export default page; +export default ProfilePage;As per coding guidelines: "Use descriptive variable, function, and component names."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/me/profile/page.tsx` around lines 3 - 5, Rename the anonymous page component to a descriptive name and add an explicit return type: change the function named page to ProfilePage and annotate its return type (e.g., : JSX.Element or the framework-appropriate type), keeping the existing redirect('/coming-soon') call inside; update any exports or references from page to ProfilePage to match.app/(landing)/grants/page.tsx (1)
7-14: Remove unreachable code afterredirect().
redirect()fromnext/navigationthrows internally and never returns, making thereturnstatement and its JSX unreachable. This dead code should be removed for clarity.Suggested cleanup
const GrantPage = () => { redirect('/coming-soon'); - return ( - <div className='mx-auto mt-10 max-w-[1440px] px-5 py-5 text-center text-4xl font-bold text-white md:px-[50px] lg:px-[100px]'> - Grant Page - </div> - ); };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/`(landing)/grants/page.tsx around lines 7 - 14, The JSX after calling redirect('/coming-soon') in the GrantPage component is unreachable because next/navigation's redirect throws; remove the dead return and JSX from GrantPage so the component only invokes redirect('/coming-soon') (i.e., call redirect and do not return the "Grant Page" div) — locate the GrantPage function and the redirect('/coming-soon') call and delete the subsequent return block/JSX to clean up the page component.app/(landing)/contact/page.tsx (1)
7-14: Remove unreachable code afterredirect().The
returnstatement on lines 9-13 is unreachable sinceredirect()throws and never returns. Remove the dead code for cleaner maintenance.Suggested cleanup
const ContactPage = () => { redirect('/coming-soon'); - return ( - <div className='mx-auto mt-10 max-w-[1440px] px-5 py-5 text-center text-4xl font-bold text-white md:px-[50px] lg:px-[100px]'> - Contact Page - </div> - ); };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/`(landing)/contact/page.tsx around lines 7 - 14, The ContactPage component contains unreachable JSX after calling redirect('/coming-soon') (redirect throws), so remove the dead return/JSX block inside ContactPage; keep the redirect call (or, if you intended client-side navigation, replace redirect('/coming-soon') with a client-side router method such as useRouter().push inside an effect). Update the ContactPage function to either only call redirect('/coming-soon') and return nothing, or perform client-side navigation correctly instead of leaving the unreachable return JSX.app/me/hackathons/submissions/page.tsx (1)
3-5: Same naming convention feedback applies.Consider renaming to
HackathonSubmissionsPagefor clarity.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/me/hackathons/submissions/page.tsx` around lines 3 - 5, Rename the component identifier from page to HackathonSubmissionsPage for clarity: change the const declaration (const page = ...) to const HackathonSubmissionsPage = ... and update the default export (export default page) to export default HackathonSubmissionsPage so the component reflects the page purpose; keep the redirect('/coming-soon') logic intact inside the renamed function.app/me/hackathons/page.tsx (1)
3-5: Same naming convention feedback applies.Consider renaming to
HackathonsPagewith explicit return type: neverfor consistency across the codebase.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/me/hackathons/page.tsx` around lines 3 - 5, Rename the component function from page to HackathonsPage and give it an explicit return type of never; update the declaration from "const page = () => { redirect('/coming-soon'); }" to a named arrow function "const HackathonsPage = (): never => { redirect('/coming-soon'); }" and ensure any export/default export that referenced page now references HackathonsPage so callers still work.app/me/analytics/page.tsx (1)
3-5: Consider adding explicit return type annotation.Per coding guidelines, prefer explicit type annotations on arrow functions. Since
redirect()throws internally and never returns, the return type isnever.✨ Suggested improvement
-const page = () => { +const page = (): never => { redirect('/coming-soon'); };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/me/analytics/page.tsx` around lines 3 - 5, Add an explicit return type to the page arrow function: change the signature of page (the function that calls redirect('/coming-soon')) to annotate its return type as never since redirect() throws and never returns; update the declaration for page to include ": never" to satisfy the coding guidelines and TypeScript checks.app/coming-soon/page.tsx (1)
3-3: Remove unused React import.With React 19, the JSX transform no longer requires importing React explicitly. This import is unused and can be removed.
🧹 Proposed fix
import ComingSoon from '@/components/ComingSoon'; import { Footer, Navbar } from '@/components/landing-page'; -import React from 'react';🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/coming-soon/page.tsx` at line 3, Remove the unused top-level import "import React from 'react';" from the module (the React import at the top of page.tsx) because the new JSX transform in React 19 makes it unnecessary; simply delete that import line so the file no longer contains an unused React symbol while keeping the existing component/JSX code unchanged.components/ComingSoon.tsx (1)
62-64: Consider using Tailwind theme colors instead of hardcoded hex values.The badge uses hardcoded
#a7f950which may diverge from the design system. If this green is part of your theme, consider defining it as a Tailwind color token for consistency.✨ Example using theme color
In
tailwind.config.js, add:colors: { success: '#a7f950', }Then update the component:
-<span className='inline-flex w-fit shrink-0 items-center justify-center gap-2 overflow-hidden rounded-md border border-[`#a7f950`] bg-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap text-[`#a7f950`]'> +<span className='inline-flex w-fit shrink-0 items-center justify-center gap-2 overflow-hidden rounded-md border border-success bg-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap text-success'>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/ComingSoon.tsx` around lines 62 - 64, The badge in ComingSoon.tsx uses a hardcoded hex (`#a7f950`); instead, add the color to your Tailwind theme (e.g., define a "success" color in tailwind.config.js) and update the span's classes in the ComingSoon component to use the theme token classes (e.g., border-success and text-success) rather than the hex values so the component follows the design system.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/`(landing)/bounties/page.tsx:
- Line 5: The file wrongly sets export const metadata: Metadata =
generatePageMetadata('grants') on the bounties page and also contains
unreachable JSX after a redirect(); fix by either replacing the key 'grants'
with an existing key like 'projects' or add a 'bounties' entry to the
pageMetadata map in lib/metadata.ts, update the generatePageMetadata call
accordingly (use generatePageMetadata('bounties') only if you add that entry),
and remove the dead JSX/return statements after the redirect() call so only the
redirect remains; update references to the metadata constant and the
generatePageMetadata invocation to reflect the chosen key.
---
Outside diff comments:
In `@app/`(landing)/bounties/page.tsx:
- Around line 7-14: The component is misnamed and contains unreachable JSX after
calling redirect(), which throws; rename the component from GrantPage to
BountiesPage and remove the dead JSX so the function only performs the redirect
(e.g., const BountiesPage = () => { redirect('/coming-soon'); }), then export
default BountiesPage. Ensure no JSX remains after the redirect call since
redirect() does not return.
---
Nitpick comments:
In `@app/`(landing)/contact/page.tsx:
- Around line 7-14: The ContactPage component contains unreachable JSX after
calling redirect('/coming-soon') (redirect throws), so remove the dead
return/JSX block inside ContactPage; keep the redirect call (or, if you intended
client-side navigation, replace redirect('/coming-soon') with a client-side
router method such as useRouter().push inside an effect). Update the ContactPage
function to either only call redirect('/coming-soon') and return nothing, or
perform client-side navigation correctly instead of leaving the unreachable
return JSX.
In `@app/`(landing)/grants/page.tsx:
- Around line 7-14: The JSX after calling redirect('/coming-soon') in the
GrantPage component is unreachable because next/navigation's redirect throws;
remove the dead return and JSX from GrantPage so the component only invokes
redirect('/coming-soon') (i.e., call redirect and do not return the "Grant Page"
div) — locate the GrantPage function and the redirect('/coming-soon') call and
delete the subsequent return block/JSX to clean up the page component.
In `@app/`(landing)/organizations/[id]/grants/page.tsx:
- Around line 2-18: The GrantsPage currently calls redirect('/coming-soon')
which makes the subsequent JSX return and the imports AuthGuard and Loading
unused; remove the dead code by either deleting the redirect call if the page
should render, or if the redirect is intentional, remove the unused return block
and the imports (AuthGuard, Loading) and ensure GrantsPage simply performs the
redirect (e.g., keep only the redirect call and no JSX). Locate the GrantsPage
component and adjust accordingly so there is no unreachable JSX and no unused
imports.
In `@app/coming-soon/page.tsx`:
- Line 3: Remove the unused top-level import "import React from 'react';" from
the module (the React import at the top of page.tsx) because the new JSX
transform in React 19 makes it unnecessary; simply delete that import line so
the file no longer contains an unused React symbol while keeping the existing
component/JSX code unchanged.
In `@app/me/analytics/page.tsx`:
- Around line 3-5: Add an explicit return type to the page arrow function:
change the signature of page (the function that calls redirect('/coming-soon'))
to annotate its return type as never since redirect() throws and never returns;
update the declaration for page to include ": never" to satisfy the coding
guidelines and TypeScript checks.
In `@app/me/hackathons/page.tsx`:
- Around line 3-5: Rename the component function from page to HackathonsPage and
give it an explicit return type of never; update the declaration from "const
page = () => { redirect('/coming-soon'); }" to a named arrow function "const
HackathonsPage = (): never => { redirect('/coming-soon'); }" and ensure any
export/default export that referenced page now references HackathonsPage so
callers still work.
In `@app/me/hackathons/submissions/page.tsx`:
- Around line 3-5: Rename the component identifier from page to
HackathonSubmissionsPage for clarity: change the const declaration (const page =
...) to const HackathonSubmissionsPage = ... and update the default export
(export default page) to export default HackathonSubmissionsPage so the
component reflects the page purpose; keep the redirect('/coming-soon') logic
intact inside the renamed function.
In `@app/me/profile/page.tsx`:
- Around line 3-5: Rename the anonymous page component to a descriptive name and
add an explicit return type: change the function named page to ProfilePage and
annotate its return type (e.g., : JSX.Element or the framework-appropriate
type), keeping the existing redirect('/coming-soon') call inside; update any
exports or references from page to ProfilePage to match.
In `@app/me/projects/create/page.tsx`:
- Around line 3-5: Rename the generic `page` component to a descriptive name
like `CreateProjectPage`, give it an explicit return type (e.g., `JSX.Element |
null` or `React.ReactNode`), and ensure it is the default export; update the
function signature where `redirect('/coming-soon')` is called so the new
`CreateProjectPage` has the type annotation and returns an appropriate value
(null or JSX) after redirecting.
In `@components/ComingSoon.tsx`:
- Around line 62-64: The badge in ComingSoon.tsx uses a hardcoded hex (`#a7f950`);
instead, add the color to your Tailwind theme (e.g., define a "success" color in
tailwind.config.js) and update the span's classes in the ComingSoon component to
use the theme token classes (e.g., border-success and text-success) rather than
the hex values so the component follows the design system.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (13)
app/(landing)/bounties/page.tsxapp/(landing)/contact/page.tsxapp/(landing)/grants/page.tsxapp/(landing)/organizations/[id]/grants/page.tsxapp/(landing)/profile/[username]/projects/page.tsxapp/coming-soon/page.tsxapp/me/analytics/page.tsxapp/me/hackathons/page.tsxapp/me/hackathons/submissions/page.tsxapp/me/notifications/page.tsxapp/me/profile/page.tsxapp/me/projects/create/page.tsxcomponents/ComingSoon.tsx
| import { Metadata } from 'next'; | ||
| import { generatePageMetadata } from '@/lib/metadata'; | ||
|
|
||
| export const metadata: Metadata = generatePageMetadata('grants'); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# First, check if the bounties page file exists and read its contents
echo "=== Checking app/(landing)/bounties/page.tsx ==="
if [ -f "app/(landing)/bounties/page.tsx" ]; then
cat -n "app/(landing)/bounties/page.tsx" | head -30
else
echo "File not found at app/(landing)/bounties/page.tsx"
# Try to find bounties page with different path patterns
find . -name "page.tsx" -path "*/bounties/*" 2>/dev/null | head -5
fiRepository: boundlessfi/boundless
Length of output: 686
🏁 Script executed:
#!/bin/bash
# Check for pageMetadata definition and 'bounties' key
echo "=== Searching for pageMetadata and bounties key ==="
if [ -f "lib/metadata.ts" ]; then
echo "--- lib/metadata.ts content ---"
cat -n "lib/metadata.ts"
else
echo "Checking for metadata file in different locations:"
find . -name "*metadata*" -type f 2>/dev/null | grep -E "\.(ts|js)$" | head -10
fiRepository: boundlessfi/boundless
Length of output: 23611
Incorrect metadata key and unreachable code in bounties page.
The metadata uses 'grants' but this is the bounties page, causing incorrect SEO metadata to be served. Additionally, the JSX return statements (lines 9–13) are unreachable after the redirect() call on line 8 and should be removed.
Note: The 'bounties' key does not exist in pageMetadata (lib/metadata.ts). Before changing the metadata key, either add a 'bounties' entry to the pageMetadata object or use an existing key like 'projects'.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/`(landing)/bounties/page.tsx at line 5, The file wrongly sets export
const metadata: Metadata = generatePageMetadata('grants') on the bounties page
and also contains unreachable JSX after a redirect(); fix by either replacing
the key 'grants' with an existing key like 'projects' or add a 'bounties' entry
to the pageMetadata map in lib/metadata.ts, update the generatePageMetadata call
accordingly (use generatePageMetadata('bounties') only if you add that entry),
and remove the dead JSX/return statements after the redirect() call so only the
redirect remains; update references to the metadata constant and the
generatePageMetadata invocation to reflect the chosen key.
Contributor
Author
There was a problem hiding this comment.
The code is meant to be unreachable as for the incorrect metadata, I didn't have a touch in that part of the code. I just did what I was asked to do.
There was a problem hiding this comment.
@Shadow-MMN, thank you for the clarification. You're absolutely right that the metadata issue with 'grants' was pre-existing—your changes only added the redirect.
Regarding the unreachable code: I notice that in other files within this same PR, the return statements were handled differently. For example:
app/me/analytics/page.tsx,app/me/hackathons/page.tsx,app/me/profile/page.tsx→ only contain the redirect, no return statementapp/(landing)/profile/[username]/projects/page.tsx→ the return statement was removed
While in bounties/page.tsx, grants/page.tsx, contact/page.tsx, and organizations/[id]/grants/page.tsx, the return statements remain after the redirect.
For consistency and cleanliness (especially given the PR's quality constraints), you might consider removing the unreachable return statements in these files. But if you prefer to keep them as-is, that's your call—the redirect will work either way.
Collaborator
|
@Shadow-MMN Don't copy grantfox ui else this Pr will be closed.. change the ui.. look for something abstract. |
Contributor
Author
|
Ok sir |
- Replaced bordered card grid with gradient feature blocks - Removed SaaS-style badge chips and standard dashboard styling - Introduced oversized low-opacity icon backgrounds - Updated motion animations to subtle scale transitions - Increased spacing and typography for a more landing-page aesthetic - Reduced structural similarity to previous UI implementation
Contributor
Author
This is the new design I gave |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
components/ComingSoon.tsx (4)
18-43: Consider adding unique IDs for stable React keys.The features array lacks unique identifiers, causing reliance on array indices as keys (line 107). While acceptable for a static array, adding
idfields improves key stability and makes future reordering or filtering safer.♻️ Proposed enhancement
type Feature = { + id: string; title: string; description: string; icon: LucideIcon; }; const features: Feature[] = [ { + id: 'grant-flow', title: 'Full Grant Flow & Architecture', description: 'End-to-end grant lifecycle system covering submission, evaluation, approval, and fund distribution.', icon: ArrowDownUp, }, { + id: 'bounty', title: 'Bounty Implementation', description: 'Structured bounty creation with decentralized submission handling and transparent verification.', icon: CircleDollarSign, }, { + id: 'analytics', title: 'Advanced Analytics Dashboard', description: 'Clear financial and participation metrics with intuitive visual breakdowns.', icon: ChartNoAxesColumnIncreasing, }, { + id: 'badging', title: 'Verified Project Badging', description: 'Recognition layer for trusted and high-quality ecosystem projects.', icon: ShieldCheck, }, ];Then update line 107:
-<FeatureBlock key={index} {...feature} index={index} /> +<FeatureBlock key={feature.id} {...feature} index={index} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/ComingSoon.tsx` around lines 18 - 43, The features array in ComingSoon is missing stable unique IDs, so add an id property to each feature object (e.g., add an `id: string` to each entry in the features constant and update the Feature type/interface to include id) and then use that id as the React key where the features are mapped (replace the current index-based key usage in the map rendering with feature.id) to ensure stable keys when reordering or filtering.
83-83: Add explicit return type annotation.Per coding guidelines, prefer const arrow functions with explicit type annotations.
♻️ Proposed fix
-const ComingSoon = () => { +const ComingSoon = (): JSX.Element => {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/ComingSoon.tsx` at line 83, The ComingSoon arrow component lacks an explicit return type; update the declaration of ComingSoon to include a React/TSX return type (e.g., : React.FC or : JSX.Element) so the const ComingSoon has an explicit type annotation, and adjust any associated props typing if you switch to React.FC.
66-69: Add accessibility attributes to the status indicator.The "In Progress" status relies on color alone (green dot + text). For screen reader users, consider adding an
aria-labelorroleto convey status semantically. Additionally, users with vestibular disorders may be affected byanimate-pulse—consider usingprefers-reduced-motionmedia query.♻️ Proposed accessibility improvement
- <div className='mb-6 flex items-center gap-2 text-sm text-[`#a7f950`]'> - <div className='h-2 w-2 animate-pulse rounded-full bg-[`#a7f950`]' /> + <div + className='mb-6 flex items-center gap-2 text-sm text-[`#a7f950`]' + role='status' + aria-label='Feature status: In Progress' + > + <div className='h-2 w-2 animate-pulse rounded-full bg-[`#a7f950`] motion-reduce:animate-none' /> In Progress </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/ComingSoon.tsx` around lines 66 - 69, The status indicator in ComingSoon.tsx relies on color and an animated dot (class animate-pulse) but lacks semantic accessibility and motion-reduction support; update the status container (the div wrapping "In Progress") to include a semantic attribute such as role="status" and/or aria-label="In Progress" so screen readers announce it, mark the decorative dot element (the div with h-2 w-2 and bg-[`#a7f950`]) as aria-hidden="true", and replace the raw animate-pulse with motion-aware classes (e.g., motion-safe:animate-pulse and motion-reduce:animate-none or equivalent prefers-reduced-motion handling) so users who prefer reduced motion aren’t exposed to the animation.
45-50: Add explicit return type annotation.Per coding guidelines, prefer const arrow functions with explicit type annotations. The component lacks a return type.
♻️ Proposed fix
const FeatureBlock = ({ title, description, icon: Icon, index, -}: Feature & { index: number }) => { +}: Feature & { index: number }): JSX.Element => {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/ComingSoon.tsx` around lines 45 - 50, The FeatureBlock arrow component lacks an explicit return type; update its signature to include a return type (e.g., change "const FeatureBlock = ({...}: Feature & { index: number }) => {" to "const FeatureBlock = ({...}: Feature & { index: number }): JSX.Element => {" or use "const FeatureBlock: React.FC<Feature & { index: number }> = ({...}) => {"), keeping the existing props shape (Feature and index) and ensuring any needed React imports are present.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/ComingSoon.tsx`:
- Around line 83-113: The ComingSoon component is missing the required "Notify
Me" form (per issue `#393`); add a small controlled form inside ComingSoon (e.g.,
below the Abstract Feature Blocks or inside the container div) with inputs for
email (and optional name) and a submit button, implement local validation, and
call the subscription/waitlist API on submit; wire state handlers (useState) and
an async submit handler (e.g., handleNotifySubmit) that POSTs to your API
endpoint, shows loading/error/success feedback, and prevent duplicate
submissions; ensure the form component is either inlined in ComingSoon or
extracted as a new NotifyMe component and referenced from ComingSoon, and
include tests/aria attributes for accessibility.
---
Nitpick comments:
In `@components/ComingSoon.tsx`:
- Around line 18-43: The features array in ComingSoon is missing stable unique
IDs, so add an id property to each feature object (e.g., add an `id: string` to
each entry in the features constant and update the Feature type/interface to
include id) and then use that id as the React key where the features are mapped
(replace the current index-based key usage in the map rendering with feature.id)
to ensure stable keys when reordering or filtering.
- Line 83: The ComingSoon arrow component lacks an explicit return type; update
the declaration of ComingSoon to include a React/TSX return type (e.g., :
React.FC or : JSX.Element) so the const ComingSoon has an explicit type
annotation, and adjust any associated props typing if you switch to React.FC.
- Around line 66-69: The status indicator in ComingSoon.tsx relies on color and
an animated dot (class animate-pulse) but lacks semantic accessibility and
motion-reduction support; update the status container (the div wrapping "In
Progress") to include a semantic attribute such as role="status" and/or
aria-label="In Progress" so screen readers announce it, mark the decorative dot
element (the div with h-2 w-2 and bg-[`#a7f950`]) as aria-hidden="true", and
replace the raw animate-pulse with motion-aware classes (e.g.,
motion-safe:animate-pulse and motion-reduce:animate-none or equivalent
prefers-reduced-motion handling) so users who prefer reduced motion aren’t
exposed to the animation.
- Around line 45-50: The FeatureBlock arrow component lacks an explicit return
type; update its signature to include a return type (e.g., change "const
FeatureBlock = ({...}: Feature & { index: number }) => {" to "const FeatureBlock
= ({...}: Feature & { index: number }): JSX.Element => {" or use "const
FeatureBlock: React.FC<Feature & { index: number }> = ({...}) => {"), keeping
the existing props shape (Feature and index) and ensuring any needed React
imports are present.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
components/ComingSoon.tsx
Comment on lines
83
to
113
| const ComingSoon = () => { | ||
| return ( | ||
| <section className='py-24'> | ||
| <div className='mx-auto max-w-6xl px-6'> | ||
| {/* Section Header */} | ||
| <motion.div | ||
| initial={{ opacity: 0, y: 20 }} | ||
| whileInView={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.6 }} | ||
| viewport={{ once: true }} | ||
| className='mb-20 max-w-2xl' | ||
| > | ||
| <h1 className='text-5xl font-bold tracking-tight text-white md:text-6xl'> | ||
| Coming Soon | ||
| </h1> | ||
| <p className='mt-6 text-lg text-neutral-400'> | ||
| We’re building foundational systems to power a more transparent, | ||
| efficient grant and bounty ecosystem. | ||
| </p> | ||
| </motion.div> | ||
|
|
||
| {/* Abstract Feature Blocks */} | ||
| <div className='flex flex-col gap-12'> | ||
| {features.map((feature, index) => ( | ||
| <FeatureBlock key={index} {...feature} index={index} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Missing "Notify Me" form per requirements.
The linked issue #393 specifies: "Integrate a 'Notify Me' form wired to the subscription/waitlist API." This engagement feature is absent from the current implementation.
Would you like me to help scaffold a "Notify Me" form component that can be wired to your subscription/waitlist API, or open an issue to track this separately?
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/ComingSoon.tsx` around lines 83 - 113, The ComingSoon component is
missing the required "Notify Me" form (per issue `#393`); add a small controlled
form inside ComingSoon (e.g., below the Abstract Feature Blocks or inside the
container div) with inputs for email (and optional name) and a submit button,
implement local validation, and call the subscription/waitlist API on submit;
wire state handlers (useState) and an async submit handler (e.g.,
handleNotifySubmit) that POSTs to your API endpoint, shows loading/error/success
feedback, and prevent duplicate submissions; ensure the form component is either
inlined in ComingSoon or extracted as a new NotifyMe component and referenced
from ComingSoon, and include tests/aria attributes for accessibility.
Contributor
Author
There was a problem hiding this comment.
Maintainer said I should not worry about the notfiy me button
There was a problem hiding this comment.
@Shadow-MMN, understood! If the maintainer has waived that requirement, you're all set.
ฅ^•ﻌ•^ฅ
… keys - Added `id` property to Feature type - Assigned unique stable IDs to each feature entry - Replaced index-based React keys with feature.id - Preserved index only for animation delay logic - Improved reconciliation stability for reordering and filtering
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
2 participants
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.
Changes Made
components/ComingSoon.tsxapp/coming-soon/page.tsx/me/analytics/me/projects/create/me/hackathons/me/hackathons/submissions/me/profile/me/notifications/submit/grants/bounties/contact/organizations/[id]/grants/profile/[username]/projectsVerification
/coming-soonnpm run lintpassesnpm run buildpassesThis consolidates roadmap visibility while maintaining routing integrity in production.
Closes #393
Summary by CodeRabbit
New Features
Updates