Repository navigation
feat(frontend): moderation stats panel and legal policy updates - #334
Conversation
✅ Deploy Preview for regal-bunny-0c8efe ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📜 Recent 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)
🧰 Additional context used📓 Path-based instructions (13)**/*.{js,jsx,ts,tsx,vue,html}📄 CodeRabbit inference engine (.cursor/rules/accessibility-openness.mdc)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (.cursor/rules/dependency-injection.mdc)
Files:
**/*.{js,jsx,ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/error-handling.mdc)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/pattern.mdc)
Files:
packages/backend/src/routes/**/*.ts📄 CodeRabbit inference engine (CLAUDE.md)
Files:
packages/backend/src/**/*.ts📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.{js,ts,tsx,jsx}📄 CodeRabbit inference engine (.cursor/rules/documentation.mdc)
Files:
packages/backend/src/**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/lucky-backend-api.mdc)
Files:
packages/backend/src/{routes,middleware}/**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/lucky-backend-api.mdc)
Files:
packages/backend/src/routes/**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/lucky-backend-api.mdc)
Files:
packages/backend/**📄 CodeRabbit inference engine (.cursor/rules/lucky-project.mdc)
Files:
**/*.{js,mjs,ts,mts}📄 CodeRabbit inference engine (.cursor/rules/lucky-project.mdc)
Files:
packages/backend/**/*.ts📄 CodeRabbit inference engine (.cursor/rules/subagent-backend.mdc)
Files:
🧠 Learnings (3)📚 Learning: 2026-03-09T20:20:38.694ZApplied to files:
📚 Learning: 2026-03-09T20:20:23.892ZApplied to files:
📚 Learning: 2026-03-09T20:20:23.892ZApplied to files:
🔇 Additional comments (3)
📝 WalkthroughWalkthroughAdds moderation dashboard statistics and direct case deactivation, expands Privacy Policy and Terms of Service with production-grade content and updated dates, updates changelog, and ensures starboard upsert requires a channelId with fallback to existing config. Changes
Sequence Diagram(s)sequenceDiagram
participant Browser
participant ModerationPage
participant API_Server
participant Database
Browser->>ModerationPage: Open Moderation page
ModerationPage->>API_Server: GET /api/guilds/:id/moderation/stats
API_Server->>Database: Query moderation stats
Database-->>API_Server: stats payload
API_Server-->>ModerationPage: 200 {stats}
ModerationPage-->>Browser: Render StatCard tiles
Browser->>ModerationPage: Click "Deactivate Case" in CaseDetailModal
ModerationPage->>API_Server: POST /api/guilds/:gId/moderation/cases/:caseId/deactivate
API_Server->>Database: Update case: set deactivated
Database-->>API_Server: update result
API_Server-->>ModerationPage: 200 {case updated}
ModerationPage->>ModerationPage: refresh cases list
ModerationPage->>API_Server: GET /api/guilds/:id/moderation/stats
API_Server->>Database: Query moderation stats
Database-->>API_Server: updated stats
API_Server-->>ModerationPage: 200 {updated stats}
ModerationPage-->>Browser: Update UI, show toast
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
🚥 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 docstrings
🧪 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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (3)
packages/frontend/src/pages/Moderation.tsx (3)
120-155: Mark StatCard props as read-only for type safety.The props object should be marked as
Readonlyto prevent accidental mutations and align with React best practices for functional components.♻️ Proposed fix
function StatCard({ label, value, icon: Icon, tone, -}: { +}: Readonly<{ label: string value: number icon: React.ComponentType<{ className?: string }> tone: 'blue' | 'green' | 'yellow' | 'red' -}) { +}>) {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/frontend/src/pages/Moderation.tsx` around lines 120 - 155, The StatCard component's props should be made immutable: update the parameter type annotation for the StatCard function to use Readonly for the props object (e.g. Readonly<{ label: string; value: number; icon: React.ComponentType<{ className?: string }>; tone: 'blue' | 'green' | 'yellow' | 'red' }>) so label, value, icon and tone are protected from mutation; keep the same destructured names (label, value, icon, tone) and leave the rest of the function (including toneClass and usage of value.toLocaleString()) unchanged.
157-168: Mark CaseDetailModal props as read-only.For consistency with the StatCard suggestion and React best practices, the props should be marked as
Readonly.♻️ Proposed fix
function CaseDetailModal({ caseData, open, onClose, onDeactivate, deactivating, -}: { +}: Readonly<{ caseData: ModerationCase | null open: boolean onClose: () => void onDeactivate: (caseId: string) => Promise<void> deactivating: boolean -}) { +}>) {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/frontend/src/pages/Moderation.tsx` around lines 157 - 168, The CaseDetailModal component props should be marked read-only: update the function parameter type for CaseDetailModal to use Readonly for the props object (e.g., Readonly<{ caseData: ModerationCase | null; open: boolean; onClose: () => void; onDeactivate: (caseId: string) => Promise<void>; deactivating: boolean }>) or extract a named Props type and declare it as Readonly<Props>; ensure you update the signature of CaseDetailModal accordingly so all incoming props are immutable.
419-455: Consider extracting the stats section into a separate component to reduce nesting.The nested ternary for loading/loaded/null states is valid but can be harder to read. Extracting this into a
StatsSectioncomponent would improve clarity and testability.♻️ Proposed refactor
function StatsSection({ stats, loading, }: Readonly<{ stats: ModerationStats | null; loading: boolean }>) { if (loading) { return ( <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3'> {Array.from({ length: 4 }).map((_, index) => ( <Card key={index} className='p-4'> <Skeleton className='h-3 w-20' /> <Skeleton className='h-8 w-16 mt-2' /> </Card> ))} </div> ) } if (!stats) return null return ( <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3'> <StatCard label='Total Cases' value={stats.totalCases} icon={BarChart3} tone='blue' /> {/* ... other StatCards */} </div> ) }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/frontend/src/pages/Moderation.tsx` around lines 419 - 455, Extract the nested ternary block into a new StatsSection component: create a function StatsSection({ stats, loading }: Readonly<{ stats: ModerationStats | null; loading: boolean }>) that returns the loading skeleton grid when loading is true, returns null if stats is null, and otherwise renders the same StatCard elements (Total Cases, Active Cases, Warnings, Bans) using stats.totalCases, stats.activeCases, stats.casesByType.warn, stats.casesByType.ban and the same icon props (BarChart3, Shield, AlertTriangle, Ban) and tones; then replace the inline ternary in Moderation.tsx with <StatsSection stats={stats} loading={statsLoading} /> to simplify the JSX and improve testability.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/frontend/src/pages/Moderation.tsx`:
- Around line 120-155: The StatCard component's props should be made immutable:
update the parameter type annotation for the StatCard function to use Readonly
for the props object (e.g. Readonly<{ label: string; value: number; icon:
React.ComponentType<{ className?: string }>; tone: 'blue' | 'green' | 'yellow' |
'red' }>) so label, value, icon and tone are protected from mutation; keep the
same destructured names (label, value, icon, tone) and leave the rest of the
function (including toneClass and usage of value.toLocaleString()) unchanged.
- Around line 157-168: The CaseDetailModal component props should be marked
read-only: update the function parameter type for CaseDetailModal to use
Readonly for the props object (e.g., Readonly<{ caseData: ModerationCase | null;
open: boolean; onClose: () => void; onDeactivate: (caseId: string) =>
Promise<void>; deactivating: boolean }>) or extract a named Props type and
declare it as Readonly<Props>; ensure you update the signature of
CaseDetailModal accordingly so all incoming props are immutable.
- Around line 419-455: Extract the nested ternary block into a new StatsSection
component: create a function StatsSection({ stats, loading }: Readonly<{ stats:
ModerationStats | null; loading: boolean }>) that returns the loading skeleton
grid when loading is true, returns null if stats is null, and otherwise renders
the same StatCard elements (Total Cases, Active Cases, Warnings, Bans) using
stats.totalCases, stats.activeCases, stats.casesByType.warn,
stats.casesByType.ban and the same icon props (BarChart3, Shield, AlertTriangle,
Ban) and tones; then replace the inline ternary in Moderation.tsx with
<StatsSection stats={stats} loading={statsLoading} /> to simplify the JSX and
improve testability.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e8679030-9220-45a7-8922-264338e8dd44
📒 Files selected for processing (4)
CHANGELOG.mdpackages/frontend/src/pages/Moderation.tsxpackages/frontend/src/pages/PrivacyPolicy.tsxpackages/frontend/src/pages/TermsOfService.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). (1)
- GitHub Check: SonarCloud Scan
🧰 Additional context used
📓 Path-based instructions (15)
{CHANGELOG.md,README.md}
📄 CodeRabbit inference engine (.cursor/rules/agent-rules.mdc)
ALWAYS update CHANGELOG.md and README.md as changes are made.
Files:
CHANGELOG.md
CHANGELOG.md
📄 CodeRabbit inference engine (.cursor/rules/templates-examples.mdc)
CHANGELOG.md must be updated with all changes in pull requests
Always update CHANGELOG.md with all code changes
Update CHANGELOG.md with all changes, include breaking changes documentation, and reference issues and PRs
Files:
CHANGELOG.md
{CHANGELOG.md,docs/**}
📄 CodeRabbit inference engine (.cursor/rules/lucky-project.mdc)
Update
CHANGELOG.mdand relevantdocs/files when behavior or setup changes
Files:
CHANGELOG.md
**/*.{js,jsx,ts,tsx,vue,html}
📄 CodeRabbit inference engine (.cursor/rules/accessibility-openness.mdc)
Provide accessible UI components using semantic HTML and ARIA attributes where necessary
Files:
packages/frontend/src/pages/TermsOfService.tsxpackages/frontend/src/pages/PrivacyPolicy.tsxpackages/frontend/src/pages/Moderation.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/dependency-injection.mdc)
**/*.{ts,tsx,js,jsx}: Prefer constructor injection for classes that require dependencies
Avoid global mutable singletons unless necessary
Use explicit interfaces for external dependencies to make testing easier
**/*.{ts,tsx,js,jsx}: Include required references in PRs/code for non-trivial logic: TypeScript (official docs), MDN (JavaScript reference), and official docs for any runtime/framework/libraries used (e.g., Node.js, React) as applicable.
Before assuming behavior of an API, include the doc link and a ≤25-word quote when the change relies on it.
**/*.{ts,tsx,js,jsx}: Prefer named exports for clear usage and easier refactors in TypeScript/JavaScript
Keep import order consistent: external first, then internal modules
Remove dead code and unused imports
**/*.{ts,tsx,js,jsx}: Use PascalCase naming convention for React/UI components
Use camelCase naming convention for variables and functions
Use UPPER_SNAKE_CASE naming convention for constants
Maintain consistent import grouping and ordering within the project, keeping third-party imports separate from local imports
For external data sources (HTTP, database), always validate and sanitize input using type guards or schema validators
**/*.{ts,tsx,js,jsx}: Use Prettier with no semicolons, single quotes, 4-space indent, 80 character width
Files must not exceed 250 lines and this is enforcedImplement TypeScript typecheck and linter in CI quality checks
**/*.{ts,tsx,js,jsx}: Use TypeScript for enhanced type safety
Implement error handling and error logging
Avoid commenting code unless extremely necessary - code should explain itself with descriptive names
Leave NO todos, placeholders or missing pieces in the code
Variables and functions must use camelCase
Constants must use UPPER_SNAKE_CASE
Use arrow functions for methods and computed properties
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
Maintain consistent import grouping/order: external imports first, then...
Files:
packages/frontend/src/pages/TermsOfService.tsxpackages/frontend/src/pages/PrivacyPolicy.tsxpackages/frontend/src/pages/Moderation.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/error-handling.mdc)
**/*.{js,jsx,ts,tsx}: Never throw strings. ThrowError(or typed subclasses) with descriptive messages
Include causal error ascausewhen available for better debugging
Define clear, stable error codes (e.g.,ERR_AUTH_EXPIRED,ERR_NETWORK_TIMEOUT)
Provide optional metadata (e.g.,details,retryable,status,correlationId) in error objects
Use domain error classes per area (e.g.,AuthenticationError,ValidationError,NetworkError)
Log errors with structure (message, code, stack, cause, correlationId, user context where appropriate)
MarkretryablevsnonRetryableerrors where helpful for operations
Set timeouts and handle aborts/cancellations; avoid dangling requests in API/network code
Implement backoff for transient failures; avoid infinite retries
Map HTTP status → domain errors; 4xx vs 5xx behave differently (e.g., retry for 5xx/network)
**/*.{js,jsx,ts,tsx}: Use functional components with hooks in React/React Native. Avoid class components.
Keep components focused on a single responsibility; extract complex logic into custom hooks.
Keep state local when possible. Use Context/Zustand/Redux only when necessary for state management.
If props or state traverse more than 3 levels, consider using context or a feature-scoped store instead of prop drilling.
Use performance optimization techniques:React.memo,useMemo,useCallback,Suspense(web), and virtualization for long lists; avoid unnecessary re-renders.
Web accessibility: use semantic HTML, labels, focus management, keyboard navigation, andaria-*attributes as needed.
React Native accessibility: use accessibility props (accessible,accessibilityLabel), proper roles and labels.
Identify and extract repetitive UI components proactively tocomponents/with clear props and minimal coupling.
Web styles: prefer co-located styles or design system tokens; avoid global style leakage.
React Native styles: preferStyleSheet.create, design tokens, and theme providers; avoid in...
Files:
packages/frontend/src/pages/TermsOfService.tsxpackages/frontend/src/pages/PrivacyPolicy.tsxpackages/frontend/src/pages/Moderation.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/error-handling.mdc)
**/*.{jsx,tsx}: Use toasts/snackbars for transient errors; avoid blocking modals for non-critical issues in React/React Native UI
Debounce/suppress duplicate toasts to prevent spam
Provide retry/refresh actions when meaningful (e.g., network failure) in error UI
Use error boundaries for render-time exceptions; show fallback UI in React
Respect accessibility: toasts should be announced (aria-live on web; accessibility hints on React Native)
Files:
packages/frontend/src/pages/TermsOfService.tsxpackages/frontend/src/pages/PrivacyPolicy.tsxpackages/frontend/src/pages/Moderation.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/pattern.mdc)
Introduce interfaces at module boundaries to enable testing and substitutions
**/*.{ts,tsx}: Avoid usinganytype in TypeScript. If unavoidable, useunknownwith type guards and justify with a code comment
Preferinterfacefor defining public object shapes in TypeScript, usetypefor unions and utility types
Use TypeScript utility types such asPartial,Pick,Omit,Readonly, andRecordwhen appropriate
UseI{Name}naming convention for interfaces in TypeScript
UseT{Name}naming convention for type aliases and utility types in TypeScript
**/*.{ts,tsx}: Functions must be less than 50 lines with cyclomatic complexity less than 10
Do not useanytypes - ESLint enforces this at error level
**/*.{ts,tsx}: Prefer types over interfaces for most cases
Don't ever useany- type safety always
Avoid enums; use const objects instead
For complex types, create a separate file to declare them and import them
Avoid usinganytype; if unavoidable, useunknownwith type guards and justify with code comment
Preferinterfacefor public API shapes; usetypefor unions and utility types
Use TypeScript utility types (Partial, Pick, Omit, Readonly, Record)
Files:
packages/frontend/src/pages/TermsOfService.tsxpackages/frontend/src/pages/PrivacyPolicy.tsxpackages/frontend/src/pages/Moderation.tsx
packages/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
packages/frontend/src/**/*.{ts,tsx}: Frontend errors are created by Axios interceptor and should be of typeApiErrorwith status and details from backend
Frontend uses path alias@/mapped tosrc/- use this alias for all imports from the src directoryDo not depend on
@lucky/sharedpackage in frontend code; make API calls to backend via configured base URL (env)
Files:
packages/frontend/src/pages/TermsOfService.tsxpackages/frontend/src/pages/PrivacyPolicy.tsxpackages/frontend/src/pages/Moderation.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/documentation.mdc)
**/*.{js,ts,tsx,jsx}: Minimize comments in code; explain the 'why' when non-obvious, let code express the 'what' through clear naming
Document trade-offs briefly when deviating from ideal patterns
**/*.{js,ts,tsx,jsx}: Store secrets, ports, and hosts in environment variables (.env,.env.example) and never hardcode them
Avoid redundant or decorative AI comments; code should be self-explanatory and only commented when logic is non-obvious; prefer refactoring over lengthy commentsNever hardcode secrets, IPs, or ports; use
.envanddocs/for required configuration variables
Files:
packages/frontend/src/pages/TermsOfService.tsxpackages/frontend/src/pages/PrivacyPolicy.tsxpackages/frontend/src/pages/Moderation.tsx
packages/frontend/src/pages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/lucky-frontend.mdc)
Organize pages in
packages/frontend/src/pages/directory (e.g., Login, Dashboard, Config, Features, ServersPage)
Files:
packages/frontend/src/pages/TermsOfService.tsxpackages/frontend/src/pages/PrivacyPolicy.tsxpackages/frontend/src/pages/Moderation.tsx
packages/frontend/src/{components,pages}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/lucky-frontend.mdc)
Use React functional components and hooks; keep components small and focused
Files:
packages/frontend/src/pages/TermsOfService.tsxpackages/frontend/src/pages/PrivacyPolicy.tsxpackages/frontend/src/pages/Moderation.tsx
packages/frontend/src/{components,pages}/**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/lucky-frontend.mdc)
Follow existing styling approach (e.g., Tailwind if present); avoid inline styles for layout and theming
Files:
packages/frontend/src/pages/TermsOfService.tsxpackages/frontend/src/pages/PrivacyPolicy.tsxpackages/frontend/src/pages/Moderation.tsx
packages/frontend/**
📄 CodeRabbit inference engine (.cursor/rules/lucky-project.mdc)
The
frontendpackage uses React with Vite and must not depend on the shared package
Files:
packages/frontend/src/pages/TermsOfService.tsxpackages/frontend/src/pages/PrivacyPolicy.tsxpackages/frontend/src/pages/Moderation.tsx
**/[A-Z]*.{ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
Components must use PascalCase naming
Files:
packages/frontend/src/pages/TermsOfService.tsxpackages/frontend/src/pages/PrivacyPolicy.tsxpackages/frontend/src/pages/Moderation.tsx
🧠 Learnings (2)
📚 Learning: 2026-03-09T20:22:25.255Z
Learnt from: CR
Repo: LucasSantana-Dev/Lucky PR: 0
File: .cursor/rules/workflow.mdc:0-0
Timestamp: 2026-03-09T20:22:25.255Z
Learning: Applies to CHANGELOG.md : Update CHANGELOG.md with all changes, include breaking changes documentation, and reference issues and PRs
Applied to files:
CHANGELOG.md
📚 Learning: 2026-03-09T20:21:08.612Z
Learnt from: CR
Repo: LucasSantana-Dev/Lucky PR: 0
File: .cursor/rules/lucky-project.mdc:0-0
Timestamp: 2026-03-09T20:21:08.612Z
Learning: Applies to {CHANGELOG.md,docs/**} : Update `CHANGELOG.md` and relevant `docs/` files when behavior or setup changes
Applied to files:
CHANGELOG.md
🪛 GitHub Check: SonarCloud Code Analysis
packages/frontend/src/pages/Moderation.tsx
[warning] 120-130: Mark the props of the component as read-only.
[warning] 428-455: Extract this nested ternary operation into an independent statement.
[warning] 422-422: Do not use Array index in keys
🔇 Additional comments (5)
CHANGELOG.md (1)
10-19: LGTM!The changelog entries accurately document the new moderation stats panel, case deactivation feature, and legal policy expansions. The format follows Keep a Changelog conventions and the API endpoint references are consistent with the PR objectives.
packages/frontend/src/pages/TermsOfService.tsx (1)
1-113: LGTM!The Terms of Service page is well-structured with proper semantic HTML, consistent heading hierarchy, and design system tokens. The expanded content covers essential legal topics (acceptance, acceptable use, third-party services, disclaimers, etc.) appropriate for a production-grade policy.
packages/frontend/src/pages/PrivacyPolicy.tsx (1)
1-117: LGTM!The Privacy Policy page is comprehensive and covers essential privacy topics including data collection, usage, third-party services, retention, user rights, and security. The structure uses proper semantic HTML with consistent heading hierarchy and design system tokens.
packages/frontend/src/pages/Moderation.tsx (2)
345-378: LGTM on the stats fetching and deactivation logic.The implementation correctly:
- Uses
useCallbackwith appropriate dependencies- Handles loading states properly
- Shows toast feedback for success/failure
- Refreshes both cases and stats after deactivation
- Optimistically updates the selected case's active status
270-291: Good accessibility: buttons are properly disabled during deactivation.The Close and Deactivate buttons correctly disable during the deactivation operation, preventing double-submissions. The button text updates to "Deactivating..." to provide user feedback.
|
|
Size Change: 0 B Total Size: 319 kB ℹ️ View Unchanged
|
|
* feat(frontend): add moderation stats panel and legal policy updates * fix(backend): require channelId fallback for starboard upsert
This branch was successfully deployed
1 participant
Summary
/moderation/statsendpoint/moderation/cases/:caseId/deactivateendpointVerification
Summary by CodeRabbit
New Features
Documentation