Repository navigation
feat(frontend): marketing landing page - #654
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 47 minutes and 14 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughAdds a new unauthenticated Landing page served at Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User as User (Browser)
participant Router as Router
participant Landing as Landing Component
participant Auth as Auth Store
participant OAuth as Discord OAuth (External)
participant Meta as Page Metadata
rect rgba(100,149,237,0.5)
User->>Router: navigate to "/"
Router->>Landing: render
Landing->>Meta: usePageMetadata(title, description)
end
rect rgba(60,179,113,0.5)
User->>Landing: click "Open Dashboard"
Landing->>Auth: call login()
Auth-->>Router: set authenticated -> navigate to app layout
end
rect rgba(255,165,0,0.5)
User->>Landing: click "Add to Discord"
Landing->>OAuth: window.open(oauthAuthorizeUrl)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
🚥 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🧪 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 |
|
Size Change: +2.8 kB (+0.85%) Total Size: 333 kB 📦 View Changed
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (3)
packages/frontend/src/App.authRoutes.test.tsx (1)
334-342: Duplicate test cases.
- Lines 334-342 (
renders landing page for unauthenticated / with verified content) duplicates lines 125-130 with only a redundanttoBeVisible()check.- Lines 370-376 (
/login route is accessible when unauthenticated) duplicates lines 132-137 exactly.Consider removing the duplicates or consolidating into single, more comprehensive tests.
Also applies to: 370-376
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/frontend/src/App.authRoutes.test.tsx` around lines 334 - 342, The test suite contains duplicate tests: remove or consolidate the redundant test titled "renders landing page for unauthenticated / with verified content" (lines duplicating the earlier test that checks the landing heading and its visibility) and the duplicate "/login route is accessible when unauthenticated" test; locate the duplicate test blocks by their test names in App.authRoutes.test.tsx and either delete the later duplicates or merge assertions (e.g., keep one "renders landing page..." test that asserts presence and visibility and one "/login route is accessible..." test) to avoid repeated coverage.packages/frontend/src/pages/Landing.test.tsx (1)
37-46: Test for reduced motion doesn't verify actual behavior difference.Since the implementation in
Landing.tsxhas identicalcontainerClassfor both motion preference values, this test only verifies the component renders — not that reduced motion is actually handled. Either update the test when the feature is implemented, or remove it until then.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/frontend/src/pages/Landing.test.tsx` around lines 37 - 46, The test "respects prefers-reduced-motion preference" in Landing.test.tsx is not asserting any behavioral difference because Landing.tsx currently uses the same containerClass for both motion preferences; either update the test to assert the actual reduced-motion behavior once Landing.tsx implements it (e.g., assert different class name or presence/absence of motion-related attribute/state) or remove/skip this test until the feature exists; locate the test by its title and the Landing component reference and adjust or remove the test accordingly so it verifies a real difference rather than only rendering.packages/frontend/src/pages/Landing.tsx (1)
6-7: HardcodedCLIENT_IDand overly broadpermissions=8(Administrator).
- The Discord Client ID should be sourced from environment configuration rather than hardcoded, to support different environments (dev/staging/prod).
permissions=8grants Administrator, which is far broader than necessary for music/moderation features. Consider requesting only the specific permissions needed.Proposed fix
-const CLIENT_ID = '999088926074396732' -const BOT_INVITE_URL = `https://discord.com/oauth2/authorize?client_id=${CLIENT_ID}&scope=bot%20applications.commands&permissions=8` +const CLIENT_ID = import.meta.env.VITE_DISCORD_CLIENT_ID ?? '999088926074396732' +// Consider reducing permissions to only what's needed (e.g., SEND_MESSAGES, MANAGE_MESSAGES, CONNECT, SPEAK) +const BOT_INVITE_URL = `https://discord.com/oauth2/authorize?client_id=${CLIENT_ID}&scope=bot%20applications.commands&permissions=8`🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/frontend/src/pages/Landing.tsx` around lines 6 - 7, Replace the hardcoded Discord client id and admin-permissions invite URL by reading CLIENT_ID from configuration/env (replace the constant CLIENT_ID usage) and build BOT_INVITE_URL using that env value; also change the permissions query param on BOT_INVITE_URL from the broad "8" (Administrator) to a minimal permission set required for your app (e.g., specific permission integers or a computed permissions mask for bot actions like SEND_MESSAGES, CONNECT, SPEAK, MANAGE_MESSAGES, etc.) so the invite only requests necessary scopes; update references to CLIENT_ID and BOT_INVITE_URL in Landing.tsx to use the new env/config variable and the narrower permissions string.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/frontend/index.html`:
- Around line 37-41: The JSON-LD block contains a hardcoded "aggregateRating"
object (@"aggregateRating", "@type": "AggregateRating") with static values
("ratingValue": "4.8", "ratingCount": "50") which can be misleading; remove the
entire "aggregateRating" block from the JSON-LD in index.html (or replace it
with code that populates it dynamically from real review data) so schema only
exposes real ratings, ensuring you locate and modify the "aggregateRating"
object in the existing JSON-LD snippet.
- Line 14: Create the missing og-image.png asset in the frontend public assets
(recommended 1200×630px) and update the meta tags that reference it: replace the
meta property="og:image" and the meta name="twitter:image" values so they use an
absolute URL (e.g. https://your-domain.com/og-image.png) instead of a relative
path; ensure both meta tags point to the same absolute image URL and that the
file name is exactly og-image.png.
In `@packages/frontend/src/App.authRoutes.test.tsx`:
- Around line 362-368: Rename the test case whose title string currently reads
"redirects unauthenticated user accessing /dashboard to /login" to reflect the
actual behavior (e.g., "redirects unauthenticated user accessing /dashboard to
Landing Page") so the title matches the assertion that awaits
screen.findByRole('heading', { name: 'Landing Page' }) after calling
renderAt('/dashboard'); no other logic changes are required—just update the test
name text in the test definition.
In `@packages/frontend/src/pages/Landing.tsx`:
- Line 186: The "Terms of Service" anchor in the Landing component (the <a
href='/terms'> element) lacks the 'block' utility class causing inconsistent
vertical stacking with the other footer links; update that anchor's className to
include 'block' (e.g., change className='text-sm text-gray-400
hover:text-gray-200' to include 'block') so it matches the subsequent links'
styling.
- Around line 18-20: The prefersReducedMotion check in Landing.tsx is a no-op
because containerClass is assigned the same string in both ternary branches;
either remove the prefersReducedMotion hook and simplify containerClass to a
single constant, or implement the intended differentiation by returning a
different class when prefersReducedMotion is true (for example use a class that
disables animations like "no-anim" or omit animation-related classes) — update
the assignment of containerClass and any related CSS to reflect the chosen
behavior and remove unused prefersReducedMotion imports/variables if you
simplify.
---
Nitpick comments:
In `@packages/frontend/src/App.authRoutes.test.tsx`:
- Around line 334-342: The test suite contains duplicate tests: remove or
consolidate the redundant test titled "renders landing page for unauthenticated
/ with verified content" (lines duplicating the earlier test that checks the
landing heading and its visibility) and the duplicate "/login route is
accessible when unauthenticated" test; locate the duplicate test blocks by their
test names in App.authRoutes.test.tsx and either delete the later duplicates or
merge assertions (e.g., keep one "renders landing page..." test that asserts
presence and visibility and one "/login route is accessible..." test) to avoid
repeated coverage.
In `@packages/frontend/src/pages/Landing.test.tsx`:
- Around line 37-46: The test "respects prefers-reduced-motion preference" in
Landing.test.tsx is not asserting any behavioral difference because Landing.tsx
currently uses the same containerClass for both motion preferences; either
update the test to assert the actual reduced-motion behavior once Landing.tsx
implements it (e.g., assert different class name or presence/absence of
motion-related attribute/state) or remove/skip this test until the feature
exists; locate the test by its title and the Landing component reference and
adjust or remove the test accordingly so it verifies a real difference rather
than only rendering.
In `@packages/frontend/src/pages/Landing.tsx`:
- Around line 6-7: Replace the hardcoded Discord client id and admin-permissions
invite URL by reading CLIENT_ID from configuration/env (replace the constant
CLIENT_ID usage) and build BOT_INVITE_URL using that env value; also change the
permissions query param on BOT_INVITE_URL from the broad "8" (Administrator) to
a minimal permission set required for your app (e.g., specific permission
integers or a computed permissions mask for bot actions like SEND_MESSAGES,
CONNECT, SPEAK, MANAGE_MESSAGES, etc.) so the invite only requests necessary
scopes; update references to CLIENT_ID and BOT_INVITE_URL in Landing.tsx to use
the new env/config variable and the narrower permissions string.
🪄 Autofix (Beta)
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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 9c9ddc93-a284-4c1c-a556-b43c722f5ef5
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (5)
packages/frontend/index.htmlpackages/frontend/src/App.authRoutes.test.tsxpackages/frontend/src/App.tsxpackages/frontend/src/pages/Landing.test.tsxpackages/frontend/src/pages/Landing.tsx
📜 Review details
⏰ 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). (3)
- GitHub Check: Quality Gates
- GitHub Check: compressed-size
- GitHub Check: SonarCloud Scan
🔇 Additional comments (8)
packages/frontend/src/App.tsx (2)
20-21: LGTM!The lazy import for
LandingPageis correctly added alongside other lazy-loaded pages.
269-276: LGTM!The unauthenticated routing structure is clean and correct:
/serves the new Landing page/loginprovides explicit access to the login page- Wildcard redirects to
/for unknown routespackages/frontend/src/pages/Landing.tsx (1)
109-127: Stats strip uses hardcoded placeholder values.Per the PR description, this is Phase 4 placeholder data. Consider adding a comment or TODO indicating these should be fetched dynamically in a future iteration.
packages/frontend/src/App.authRoutes.test.tsx (2)
19-21: LGTM!Landing page mock correctly added to support the new routing tests.
125-154: LGTM!Good coverage for:
- Unauthenticated root route rendering Landing
- Login route accessibility
- Auth check rejection gracefully falling back to Landing
- Unauthenticated access to authenticated routes redirecting to Landing
- Auth check errors during initialization
Also applies to: 378-400
packages/frontend/src/pages/Landing.test.tsx (3)
167-184: LGTM!Good test coverage for the "Add to Discord" button behavior, correctly spying on
window.openand verifying the OAuth URL is called.
186-206: LGTM!Proper testing of the login CTA and page metadata initialization. Good use of
userEventfor simulating user interaction.
48-134: LGTM!Comprehensive test coverage for:
- Hero section with headline and CTA buttons
- Feature grid with all 6 feature cards
- Stats strip counters
- FAQ accordion structure and content
…k, footer class, test rename)
Addressed in e425991
|
* feat(frontend): marketing landing page at / * test: add comprehensive Landing page and routing tests for SonarCloud coverage * fix: cast checkAuth mock to Promise<void> type * fix(landing): remove dead ternary, add animated gradient for non-reduced-motion * fix(landing): address coderabbit review (drop fake rating, og fallback, footer class, test rename)



Implements Phases 1-6 of .claude/plans/landing-page.md — hero, feature grid, stats strip (placeholder), FAQ, footer, SEO meta. Existing login moved to /login.
Changes
Testing
Summary by CodeRabbit
New Features
Tests