feat: add Support DebateAI community hub and improve sidebar navigation#356
feat: add Support DebateAI community hub and improve sidebar navigation#356SoorejS wants to merge 1 commit intoAOSSIE-Org:mainfrom
Conversation
📝 WalkthroughWalkthroughThis pull request adds a new community-driven "Support DebateAI" hub to the application. It introduces a dedicated support page component with multiple cards for contributing code, reporting issues, and donating, integrates the new route into the app's routing system, and updates the sidebar navigation with a link to the support section and an external link to the AOSSIE organization. Changes
Poem
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes 🚥 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)
📝 Coding Plan
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 Tip CodeRabbit can use TruffleHog to scan for secrets in your code with verification capabilities.Add a TruffleHog config file (e.g. trufflehog-config.yml, trufflehog.yml) to your project to customize detectors and scanning behavior. The tool runs only when a config file is present. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (4)
frontend/src/Pages/SupportOpenSource.tsx (3)
1-4: Missing React import for type annotation.The
SupportCardPropsinterface usesReact.ReactNode(line 6) but React is not imported. While this may work in some TypeScript configurations with automatic JSX runtime, it's best to explicitly import the type for consistency and to avoid potential issues.🔧 Proposed fix
+import React from 'react'; import { Star, Heart, Code, Bug, ChevronRight, Github } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/Pages/SupportOpenSource.tsx` around lines 1 - 4, The file references the SupportCardProps interface which uses React.ReactNode but React is not imported; add an explicit import for the React types (e.g., import type { ReactNode } from 'react' or import React) and update SupportCardProps to use the imported ReactNode type (or keep React.ReactNode if you import React) so the type annotation is resolved; locate the SupportCardProps declaration to apply this change.
62-89: Consider reducing or removing the perpetual pulse animation.The
animate-pulseclass on line 68 creates a continuous animation on the star icon container. While visually appealing initially, perpetual animations can:
- Distract users trying to read content
- Consume battery on mobile devices
- Cause accessibility issues for users sensitive to motion
Consider using a one-time entrance animation or removing it entirely.
🎨 Alternative: use hover-triggered animation instead
- <div className="w-16 h-16 rounded-2xl bg-primary/20 flex items-center justify-center flex-shrink-0 animate-pulse contrast:bg-yellow-400/30"> + <div className="w-16 h-16 rounded-2xl bg-primary/20 flex items-center justify-center flex-shrink-0 hover:scale-110 transition-transform duration-300 contrast:bg-yellow-400/30">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/Pages/SupportOpenSource.tsx` around lines 62 - 89, The perpetual pulse animation on the star container (class animate-pulse) inside the PrimarySupportCard creates continuous motion; remove or replace it with a less intrusive effect by editing PrimarySupportCard: either delete the animate-pulse class from the div with classes "w-16 h-16 rounded-2xl ... animate-pulse" or change it to a one-time entrance class (e.g., animate-[your-once] or a CSS animation that runs only once) or switch to a hover-triggered class (e.g., add hover:animate-pulse and remove the base animate-pulse) so the Star icon no longer animates perpetually.
127-134: Donate button has placeholder onClick — ensure this is intentional.The Donate button's
onClickhandler is an empty function. Per the PR description, this is intentional as the donation flow is "UI-only redirect initially" pending approval. Consider adding a comment or a TODO to clarify this for future maintainers.📝 Add clarifying comment
<SupportCard icon={<Heart className="w-6 h-6" />} title="Support the Project" description="Help maintain infrastructure and fuel further AI research and development." buttonText="Donate" hoverType="red" - onClick={() => {/* Handle donation flow */}} + onClick={() => { + // TODO: Implement donation redirect after approval (see issue `#353`) + // window.open('https://aossie.org/donate', '_blank'); + }} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/Pages/SupportOpenSource.tsx` around lines 127 - 134, The Donate button currently passes an empty onClick handler to the SupportCard component; replace the empty function with a clear inline comment/TODO on the onClick prop (or a small stub function named e.g. handleDonateClick) that states this is intentionally a UI-only redirect placeholder pending approval and outlines the intended behavior (trigger UI redirect to donation page) so future maintainers understand it's deliberate; reference the SupportCard usage and the onClick prop when making the change.frontend/src/App.tsx (1)
93-93: Consider whether this page should require authentication.The Support page is purely static and informational — it only displays community engagement options (GitHub star, contribute, donate). Placing it under
ProtectedRoutemeans unauthenticated visitors cannot discover ways to support the project, which may reduce community reach and visibility.If increasing discoverability is a goal (per PR objectives), consider making this route public or adding a public version of the page.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/App.tsx` at line 93, The Support page route <Route path='support-os' element={<SupportOpenSource />} /> is currently behind authentication via ProtectedRoute; make it public so unauthenticated visitors can access community engagement options by moving this Route out of the ProtectedRoute wrapper (or add a duplicate public route/path pointing to SupportOpenSource). Update routing related to ProtectedRoute, Route, and SupportOpenSource so the support page is reachable without login while leaving other protected routes unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@frontend/src/App.tsx`:
- Line 93: The Support page route <Route path='support-os'
element={<SupportOpenSource />} /> is currently behind authentication via
ProtectedRoute; make it public so unauthenticated visitors can access community
engagement options by moving this Route out of the ProtectedRoute wrapper (or
add a duplicate public route/path pointing to SupportOpenSource). Update routing
related to ProtectedRoute, Route, and SupportOpenSource so the support page is
reachable without login while leaving other protected routes unchanged.
In `@frontend/src/Pages/SupportOpenSource.tsx`:
- Around line 1-4: The file references the SupportCardProps interface which uses
React.ReactNode but React is not imported; add an explicit import for the React
types (e.g., import type { ReactNode } from 'react' or import React) and update
SupportCardProps to use the imported ReactNode type (or keep React.ReactNode if
you import React) so the type annotation is resolved; locate the
SupportCardProps declaration to apply this change.
- Around line 62-89: The perpetual pulse animation on the star container (class
animate-pulse) inside the PrimarySupportCard creates continuous motion; remove
or replace it with a less intrusive effect by editing PrimarySupportCard: either
delete the animate-pulse class from the div with classes "w-16 h-16 rounded-2xl
... animate-pulse" or change it to a one-time entrance class (e.g.,
animate-[your-once] or a CSS animation that runs only once) or switch to a
hover-triggered class (e.g., add hover:animate-pulse and remove the base
animate-pulse) so the Star icon no longer animates perpetually.
- Around line 127-134: The Donate button currently passes an empty onClick
handler to the SupportCard component; replace the empty function with a clear
inline comment/TODO on the onClick prop (or a small stub function named e.g.
handleDonateClick) that states this is intentionally a UI-only redirect
placeholder pending approval and outlines the intended behavior (trigger UI
redirect to donation page) so future maintainers understand it's deliberate;
reference the SupportCard usage and the onClick prop when making the change.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 75997b48-bb11-48c8-8f69-2fb6a94057cd
📒 Files selected for processing (3)
frontend/src/App.tsxfrontend/src/Pages/SupportOpenSource.tsxfrontend/src/components/Sidebar.tsx
1 participant
Addressed Issues:
Fixes #353
Screenshots/Recordings:
BEFORE:
AFTER THE CHANGES MADE:
Additional Notes:
This PR specifically addresses issue #353.
Some UI structure updates were implemented in a way that keeps compatibility with upcoming improvements related to #354 and #355. However, this PR itself only implements the changes required for #353.
All functionality was tested locally and confirmed to work without affecting existing frontend or backend behavior.
Key Enhancements:
UI Improvements
AI Usage Disclosure:
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Check one of the checkboxes below:
I have used the following AI models and tools: Claude , gemini CLI
Checklist
Summary by CodeRabbit
Release Notes