Enhance UI with vibrant color palette and glass morphism effects#332
Enhance UI with vibrant color palette and glass morphism effects#332BillChirico merged 23 commits intomainfrom
Conversation
📝 WalkthroughSummary by CodeRabbitRelease Notes
WalkthroughThis PR enhances the dashboard with comprehensive visual improvements: adds CSS utilities for glow effects, animations, and gradient text styling; updates theme tokens for light and dark modes; introduces a Changes
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 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 |
railway-app
bot
temporarily deployed
to
volvox-bot / volvox-bot-pr-332
|
🚅 Deployed to the volvox-bot-pr-332 environment in volvox-bot
|
railway-app
bot
temporarily deployed
to
volvox-bot / volvox-bot-pr-332
There was a problem hiding this comment.
Pull request overview
This PR updates the web dashboard’s visual system to a more vibrant theme, adding glassmorphism, glow/hover treatments, and new animation/util classes, then applying them across navigation and dashboard surfaces.
Changes:
- Expanded the global CSS theme tokens (incl. extended “neon” palette) and introduced new UI utility/component classes (glass, glow-card, kpi-card, stagger-fade-in, scrollbar-thin, etc.).
- Refreshed layout/navigation components (header/sidebar/shell) to use new active states, indicators, and spacing.
- Restyled dashboard surfaces (analytics, health cards, config/settings workspace) with new card treatments and motion effects.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| web/src/components/layout/sidebar.tsx | Sidebar nav restyle (active indicator, icon pill, workflow tip card) and new active-state class usage. |
| web/src/components/layout/header.tsx | Header restyle (glass blur, “Live” badge indicator swap, avatar button styling). |
| web/src/components/layout/dashboard-shell.tsx | Layout sizing tweaks + thin scrollbar utility applied to sidebar/main scroll containers. |
| web/src/components/dashboard/page-header.tsx | Page header accent/shimmer background and updated actions container styling. |
| web/src/components/dashboard/health-cards.tsx | KPI card visual upgrades, ping background tinting, staggered entrance animation. |
| web/src/components/dashboard/config-workspace/settings-feature-card.tsx | Feature card redesign (new “feature-card” container, enabled badge, advanced section styling). |
| web/src/components/dashboard/config-workspace/category-navigation.tsx | Category nav restyle with icon pills, active-state styling, dirty badge styling. |
| web/src/components/dashboard/config-layout-shell.tsx | Settings layout chrome refresh (top bar, banners, cards) and control button styling. |
| web/src/components/dashboard/config-categories/config-landing.tsx | Config landing page redesign into gradient-accent settings cards with “Configure” affordance. |
| web/src/components/dashboard/analytics-dashboard.tsx | Analytics UI refresh (gradient title, live indicator, glow cards, KPI cards, rounded panels). |
| web/src/app/globals.css | Theme token updates + new glass/glow/card/animation/scrollbar utility classes. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3492f56010
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
web/src/components/dashboard/config-workspace/settings-feature-card.tsx
Outdated
Show resolved
Hide resolved
|
| Filename | Overview |
|---|---|
| web/src/app/globals.css | Major CSS expansion adding ~400 lines of new utilities (glow-card, kpi-card, settings-card, feature-card, gradient text, animated border, stagger animations, glass morphism, scrollbar styling, reduced-motion overrides); backdrop-filter added to all .dashboard-panel elements is a performance concern. |
| web/src/hooks/use-glow-card.ts | New hook attaching a document-level pointermove listener with RAF throttle to drive .glow-card CSS variable updates; cleanup is correct but the throttle captures a stale event position and there are no tests for this new hook. |
| web/src/components/dashboard/analytics-dashboard.tsx | Calls useGlowCard(), applies kpi-card/glow-card/stagger-fade-in classes, adds gradient text title and status-dot-live indicator; logic unchanged. |
| web/src/components/dashboard/health-cards.tsx | Visual-only refactor: icon backgrounds, kpi-card class, stagger-fade-in grid, gradient progress bars; no logic changes. |
| web/src/components/layout/sidebar.tsx | Replaces bg-primary/12 ring-1 active state with sidebar-item-active CSS class; adds icon backgrounds, gradient active bar, and pulsing dot indicator; test updated to match. |
| web/src/components/dashboard/config-categories/config-landing.tsx | Replaces shadcn Card with custom settings-card div; adds per-category gradient accents via --card-accent CSS variable and typed CATEGORY_GRADIENTS/CATEGORY_ICON_BG maps; visually enhanced with stagger-fade-in. |
| web/src/components/dashboard/config-workspace/settings-feature-card.tsx | Replaces shadcn Card with feature-card div; adds data-enabled attribute for CSS-driven left accent bar; adds "Active" badge for enabled features; section headers styled as decorative dividers. |
| web/src/components/layout/header.tsx | Replaces CircleDot icon with status-dot-live CSS animation; refines logo shadow, avatar ring, and dropdown border; purely cosmetic changes. |
| web/src/lib/page-titles.ts | Adds a missing Bot Config title matcher for /dashboard/config routes. |
| web/src/components/layout/dashboard-shell.tsx | Sidebar width narrowed from w-80 to w-72; scrollbar-thin applied to sidebar and main content overflow containers; React.ReactNode import cleaned up. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[pointermove on document] --> B{rafId pending?}
B -- yes --> C[Drop event / return early]
B -- no --> D[Queue requestAnimationFrame\nCapture PointerEvent e]
D --> E[RAF callback fires\nrafId = 0]
E --> F{e.target instanceof Element?}
F -- no --> G[Return early]
F -- yes --> H[e.target.closest '.glow-card']
H --> I{card found?}
I -- no --> G
I -- yes --> J[card.getBoundingClientRect]
J --> K[Compute x% = clientX - rect.left / rect.width × 100\nCompute y% = clientY - rect.top / rect.height × 100]
K --> L[card.style.setProperty --mouse-x, --mouse-y]
L --> M[CSS radial-gradient\nat var--mouse-x var--mouse-y\nopacity transitions to 1 on :hover]
N[Component unmount] --> O[removeEventListener pointermove]
N --> P{rafId pending?}
P -- yes --> Q[cancelAnimationFrame rafId]
P -- no --> R[Done]
Prompt To Fix All With AI
This is a comment left during a code review.
Path: web/src/hooks/use-glow-card.ts
Line: 1-30
Comment:
**Stale event position in RAF throttle**
The RAF throttle captures the `PointerEvent` from the *first* `pointermove` of each frame. Any subsequent pointer events that arrive before the RAF callback fires are silently dropped, so fast mouse movement causes the glow to lag behind the actual cursor position by up to one full frame.
Store the latest coordinates in outer variables and read them inside the RAF callback instead:
```suggestion
'use client';
import { useEffect } from 'react';
export function useGlowCard() {
useEffect(() => {
let rafId = 0;
let latestX = 0;
let latestY = 0;
let latestTarget: EventTarget | null = null;
function handlePointerMove(e: PointerEvent) {
latestX = e.clientX;
latestY = e.clientY;
latestTarget = e.target;
if (rafId) return;
rafId = requestAnimationFrame(() => {
rafId = 0;
if (!(latestTarget instanceof Element)) return;
const card = latestTarget.closest<HTMLElement>('.glow-card');
if (!card) return;
const rect = card.getBoundingClientRect();
const x = ((latestX - rect.left) / rect.width) * 100;
const y = ((latestY - rect.top) / rect.height) * 100;
card.style.setProperty('--mouse-x', `${x}%`);
card.style.setProperty('--mouse-y', `${y}%`);
});
}
document.addEventListener('pointermove', handlePointerMove, { passive: true });
return () => {
document.removeEventListener('pointermove', handlePointerMove);
if (rafId) cancelAnimationFrame(rafId);
};
}, []);
}
```
How can I resolve this? If you propose a fix, please make it concise.
---
This is a comment left during a code review.
Path: web/src/app/globals.css
Line: 241-268
Comment:
**`backdrop-filter` on all dashboard panels may hurt performance**
Before this PR, `.dashboard-panel` relied only on a CSS gradient background. Adding `backdrop-filter: blur(12px)` to every panel forces the browser to create a GPU compositing layer for each one, which increases VRAM usage and can noticeably degrade frame rates on mid-range devices — especially on pages like the analytics dashboard where many panels are visible simultaneously.
`backdrop-filter` provides real visual value only when the element actually floats over other blurred content (drawers, modals, tooltips, the nav island). For opaque card-style containers that sit against a static page background, the blur has no visible effect and only adds GPU overhead.
Consider removing `backdrop-filter` from `.dashboard-panel` / `.dark .dashboard-panel` and keeping it only on truly floating surfaces (`.dashboard-chip`, `.nav-island`, `.glass`, drawer overlays, etc.).
How can I resolve this? If you propose a fix, please make it concise.
---
This is a comment left during a code review.
Path: web/src/hooks/use-glow-card.ts
Line: 1-30
Comment:
**No test coverage for new hook**
The project rules require new functionality to include tests covering both the happy path and error cases. `useGlowCard` is a new hook with non-trivial side-effect logic (global `pointermove` listener, RAF throttle, CSS variable mutation) and currently has no corresponding test file.
Consider adding a test that:
- verifies the `pointermove` listener is added on mount and removed on unmount
- confirms `cancelAnimationFrame` is called if a RAF is pending when the component unmounts
- checks that `--mouse-x`/`--mouse-y` CSS variables are set on the closest `.glow-card` element when the pointer moves over it
How can I resolve this? If you propose a fix, please make it concise.Last reviewed commit: "fix(web): address PR..."
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/src/components/dashboard/analytics-dashboard.tsx (1)
3-50:⚠️ Potential issue | 🟡 MinorFix import organization to resolve Biome lint failure.
The CI pipeline reports that imports/exports are not sorted. Biome expects imports to be organized according to its rules.
🔧 Suggested fix: Run Biome formatter
Run the following command to auto-fix import organization:
pnpm biome check --write web/src/components/dashboard/analytics-dashboard.tsxOr apply the suggested safe fix from Biome to organize imports.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/src/components/dashboard/analytics-dashboard.tsx` around lines 3 - 50, Imports in analytics-dashboard are not sorted per Biome; run the Biome auto-fixer or reorder imports manually so they follow the project's import grouping and alphabetical rules (e.g., group external libs like 'lucide-react' and 'recharts' first, then React hooks, then local hooks/utilities like useChartTheme, useGuildSelection, exportAnalyticsPdf, formatNumber, isDashboardAnalyticsPayload, and finally component imports like Button/Card/EmptyState). Preferred fix: run the formatter command (pnpm biome check --write) to auto-organize imports, or sort them by group and alphabetically to satisfy the linter.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/src/app/globals.css`:
- Around line 284-331: The CSS uses --mouse-x and --mouse-y for .glow-card but
no JS sets them, so implement mouse tracking: add a useMousePosition hook (or a
small event listener) that listens for pointermove on the .glow-card element,
computes mouse coordinates as percentages relative to the element (e.g.,
(clientX - rect.left) / rect.width * 100), and updates
element.style.setProperty('--mouse-x', `${x}%`) and '--mouse-y' accordingly;
ensure the hook/event listener is attached to the element with class .glow-card,
removes listeners on cleanup, and throttles or requestAnimationFrame updates to
avoid performance issues.
In `@web/src/components/dashboard/config-categories/config-landing.tsx`:
- Around line 3-10: Run the Biome formatter on
web/src/components/dashboard/config-categories/config-landing.tsx, collapsing
the multi-line lucide-react import into a single import line (the import that
currently lists ArrowRight, Bot, MessageSquareWarning, Sparkles, Ticket, Users)
and rewrap the overly long JSX props around the component render (the JSX
elements around lines 71-72 in the ConfigLanding component) so each prop is on
its own line or wrapped to satisfy the formatter; save the file and re-run CI to
ensure formatting errors are resolved.
- Around line 25-41: The CATEGORY_GRADIENTS and CATEGORY_ICON_BG maps are typed
as Record<string,string> which allows missing/renamed categories to slip by;
change their types to Record<ConfigCategoryId, string> (using the existing
ConfigCategoryId union/type) and update the object literals for
CATEGORY_GRADIENTS and CATEGORY_ICON_BG to include an entry for every member of
ConfigCategoryId so the compiler enforces exhaustiveness and surfaces any
missing or renamed category keys.
In `@web/src/components/dashboard/config-workspace/settings-feature-card.tsx`:
- Around line 61-83: The component currently treats a missing enabled prop as
active because isEnabled is set with a default of true; change the logic so only
an explicit true enables the feature: replace the isEnabled assignment
(currently `const isEnabled = enabled ?? true;`) with a check that requires an
explicit true (e.g., `const isEnabled = enabled === true;`), ensuring the Active
pill and data-enabled are only shown when the prop `enabled` is explicitly true
(references: isEnabled, enabled, featureId).
In `@web/src/components/dashboard/page-header.tsx`:
- Around line 49-50: The .dashboard-chip CSS rule is no longer used after
replacing its usage with inline classes in the page-header component; remove the
.dashboard-chip rule from the global stylesheet (the rule selector
".dashboard-chip") and run a quick global search for ".dashboard-chip" to
confirm no other references exist before committing; this ensures the dead CSS
is deleted and the page-header.tsx component's inline class string remains the
single source of styling.
---
Outside diff comments:
In `@web/src/components/dashboard/analytics-dashboard.tsx`:
- Around line 3-50: Imports in analytics-dashboard are not sorted per Biome; run
the Biome auto-fixer or reorder imports manually so they follow the project's
import grouping and alphabetical rules (e.g., group external libs like
'lucide-react' and 'recharts' first, then React hooks, then local
hooks/utilities like useChartTheme, useGuildSelection, exportAnalyticsPdf,
formatNumber, isDashboardAnalyticsPayload, and finally component imports like
Button/Card/EmptyState). Preferred fix: run the formatter command (pnpm biome
check --write) to auto-organize imports, or sort them by group and
alphabetically to satisfy the linter.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: cc5dea40-5e8a-4f4b-9a0f-4924f9ebe1f2
📒 Files selected for processing (11)
web/src/app/globals.cssweb/src/components/dashboard/analytics-dashboard.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-workspace/settings-feature-card.tsxweb/src/components/dashboard/health-cards.tsxweb/src/components/dashboard/page-header.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/layout/header.tsxweb/src/components/layout/sidebar.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). (2)
- GitHub Check: Agent
- GitHub Check: Greptile Review
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,ts,tsx}: Use single quotes for strings (except in JSON files); no double quotes
Always include semicolons at the end of statements
Use 2-space indentation (spaces, not tabs)
Always include trailing commas in multi-line arrays, objects, and function parameters
Maintain a maximum line width of 100 characters
Files:
web/src/components/dashboard/page-header.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-workspace/settings-feature-card.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/health-cards.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/layout/header.tsxweb/src/components/dashboard/analytics-dashboard.tsxweb/src/components/layout/sidebar.tsx
web/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never use
console.*methods in web dashboard code; use appropriate logging mechanisms for React applications
Files:
web/src/components/dashboard/page-header.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-workspace/settings-feature-card.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/health-cards.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/layout/header.tsxweb/src/components/dashboard/analytics-dashboard.tsxweb/src/components/layout/sidebar.tsx
**/*.{js,ts,tsx,mjs}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,ts,tsx,mjs}: Use ESM syntax (import/export) — CommonJS is not allowed
Use single quotes for strings — double quotes only allowed in JSON files
Always include semicolons at end of statements
Use 2-space indentation for all code
Use Winston logger fromsrc/logger.js— never useconsole.*methods
Files:
web/src/components/dashboard/page-header.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-workspace/settings-feature-card.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/health-cards.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/layout/header.tsxweb/src/components/dashboard/analytics-dashboard.tsxweb/src/components/layout/sidebar.tsx
🧠 Learnings (10)
📓 Common learnings
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Verify both dark and light themes when making dashboard color or theming changes
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Applies to web/src/app/**/*.{ts,tsx} : Use `DashboardTitleSync` component and `getDashboardDocumentTitle()` for client-side navigation title updates in the dashboard
Applied to files:
web/src/components/dashboard/page-header.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-workspace/settings-feature-card.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/health-cards.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/layout/header.tsxweb/src/components/dashboard/analytics-dashboard.tsxweb/src/components/layout/sidebar.tsx
📚 Learning: 2026-03-10T23:21:49.730Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-10T23:21:49.730Z
Learning: Applies to web/src/components/layout/dashboard-shell.tsx : Dashboard page titles should sync with route changes using DashboardTitleSync component mounted in dashboard-shell.tsx and canonical title string 'Volvox.Bot - AI Powered Discord Bot'
Applied to files:
web/src/components/dashboard/page-header.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-workspace/settings-feature-card.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/health-cards.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/layout/header.tsxweb/src/components/dashboard/analytics-dashboard.tsxweb/src/components/layout/sidebar.tsx
📚 Learning: 2026-03-11T06:42:38.728Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-11T06:42:38.728Z
Learning: Applies to web/src/pages/dashboard/**/*.{ts,tsx} : Use shared title helpers from web/src/lib/page-titles.ts for setting browser titles in dashboard pages
Applied to files:
web/src/components/dashboard/page-header.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-workspace/settings-feature-card.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/dashboard/analytics-dashboard.tsx
📚 Learning: 2026-03-11T05:32:46.325Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-11T05:32:46.325Z
Learning: Applies to web/src/app/**/*.{ts,tsx} : Apply static metadata to server-rendered dashboard entry pages and use title template format for root app metadata
Applied to files:
web/src/components/dashboard/page-header.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-workspace/settings-feature-card.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/dashboard/analytics-dashboard.tsx
📚 Learning: 2026-03-12T02:03:36.493Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-03-12T02:03:36.493Z
Learning: Applies to web/src/app/dashboard/**/*.tsx : For dashboard routes, add a matcher entry to `dashboardTitleMatchers` in `web/src/lib/page-titles.ts`: use exact equality for leaf routes (`pathname === '/dashboard/my-route'`) and subtree checks (`pathname.startsWith('/dashboard/my-route/')`); export `metadata` using `createPageMetadata(title)` for SSR entry points
Applied to files:
web/src/components/dashboard/page-header.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-workspace/settings-feature-card.tsxweb/src/components/layout/dashboard-shell.tsx
📚 Learning: 2026-03-10T23:21:49.730Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-10T23:21:49.730Z
Learning: Applies to web/src/components/dashboard/config-workspace/**/*.{ts,tsx} : Web dashboard config editor should use category workspace navigation with reusable SettingsFeatureCard pattern (header + master toggle + Basic/Advanced blocks)
Applied to files:
web/src/components/dashboard/page-header.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-workspace/settings-feature-card.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/health-cards.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/dashboard/analytics-dashboard.tsxweb/src/components/layout/sidebar.tsx
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Add a matcher entry to `dashboardTitleMatchers` in `web/src/lib/page-titles.ts` for every new dashboard route
Applied to files:
web/src/components/dashboard/page-header.tsx
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Applies to web/src/app/**/*.{ts,tsx} : Export `metadata` using `createPageMetadata()` from `web/src/lib/page-titles.ts` in SSR entry points for dashboard pages
Applied to files:
web/src/components/dashboard/page-header.tsx
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Verify both dark and light themes when making dashboard color or theming changes
Applied to files:
web/src/app/globals.css
🪛 GitHub Actions: CI
web/src/components/dashboard/page-header.tsx
[error] pnpm mono lint failed: command 'pnpm run lint' (web) ran 'biome check .' and exited with code 1 (found 30 errors).
web/src/components/dashboard/config-workspace/category-navigation.tsx
[error] pnpm mono lint failed: command 'pnpm run lint' (web) ran 'biome check .' and exited with code 1 (found 30 errors).
web/src/components/dashboard/config-categories/config-landing.tsx
[error] 1-90: Biome formatter failed: Formatter would collapse lucide-react named imports and reformat JSX attributes/props.
[error] pnpm mono lint failed: command 'pnpm run lint' (web) ran 'biome check .' and exited with code 1 (found 30 errors).
web/src/components/dashboard/config-workspace/settings-feature-card.tsx
[error] pnpm mono lint failed: command 'pnpm run lint' (web) ran 'biome check .' and exited with code 1 (found 30 errors).
web/src/components/layout/dashboard-shell.tsx
[error] pnpm mono lint failed: command 'pnpm run lint' (web) ran 'biome check .' and exited with code 1 (found 30 errors).
web/src/components/dashboard/health-cards.tsx
[error] pnpm mono lint failed: command 'pnpm run lint' (web) ran 'biome check .' and exited with code 1 (found 30 errors).
web/src/components/dashboard/config-layout-shell.tsx
[error] pnpm mono lint failed: command 'pnpm run lint' (web) ran 'biome check .' and exited with code 1 (found 30 errors).
web/src/components/layout/header.tsx
[error] pnpm mono lint failed: command 'pnpm run lint' (web) ran 'biome check .' and exited with code 1 (found 30 errors).
web/src/components/dashboard/analytics-dashboard.tsx
[error] 3-50: Biome assist/source/organizeImports: Imports/exports are not sorted. (Safe fix suggested by Biome)
[error] 565-581: Biome formatter failed: JSX element formatting differs from expected output.
[error] pnpm mono lint failed: command 'pnpm run lint' (web) ran 'biome check .' and exited with code 1 (found 30 errors).
web/src/components/layout/sidebar.tsx
[error] pnpm mono lint failed: command 'pnpm run lint' (web) ran 'biome check .' and exited with code 1 (found 30 errors).
web/src/app/globals.css
[error] pnpm mono lint failed: command 'pnpm run lint' (web) ran 'biome check .' and exited with code 1 (found 30 errors).
🪛 GitHub Check: SonarCloud Code Analysis
web/src/components/dashboard/health-cards.tsx
[warning] 104-104: Ambiguous spacing after previous element span
[warning] 89-89: Ambiguous spacing after previous element span
[warning] 174-174: Prefer using an optional chain expression instead, as it's more concise and easier to read.
[warning] 193-193: Prefer using an optional chain expression instead, as it's more concise and easier to read.
[warning] 151-151: Ambiguous spacing after previous element span
[warning] 168-168: Ambiguous spacing after previous element span
[warning] 187-187: Ambiguous spacing after previous element span
[warning] 206-206: Ambiguous spacing after previous element span
[warning] 134-134: Ambiguous spacing after previous element span
[warning] 234-234: Ambiguous spacing after previous element span
web/src/components/layout/header.tsx
[warning] 64-64: Ambiguous spacing after previous element span
web/src/components/dashboard/analytics-dashboard.tsx
[warning] 602-602: Ambiguous spacing after previous element span
[warning] 612-612: Ambiguous spacing after previous element span
[warning] 630-630: Ambiguous spacing after previous element span
🔇 Additional comments (17)
web/src/components/dashboard/analytics-dashboard.tsx (7)
424-435: LGTM!The gradient text utility and live status dot indicator are correctly applied. The inline style override for the status dot size is a reasonable approach for this smaller variant.
541-596: LGTM!The KPI cards implementation correctly applies the new styling utilities:
stagger-fade-inprovides entrance animations for the 5 KPI cards (within the 8-child limit)- Dark mode color variants are properly specified for delta indicators
- The
kpi-cardclass integrates with the gradient accent defined in globals.css
599-645: LGTM!The real-time indicators card correctly uses
glow-cardstyling and the live status dot. The static analysis warnings about "ambiguous spacing" (lines 602, 612, 630) are false positives — the parent containers usegap-2for proper spacing between flex children, which is the correct approach.
647-677: LGTM!The channel filter card correctly applies
glow-cardstyling androunded-fullbuttons for a pill-like appearance, consistent with the modern UI aesthetic.
680-811: LGTM!The message volume and AI usage breakdown cards correctly apply
dashboard-panel rounded-2xlstyling with proper chart container borders (rounded-xl border-border/60).
813-921: LGTM!Top channels and command usage cards follow the consistent
dashboard-panel rounded-2xlpattern.
923-1047: LGTM!User engagement, XP economy, and activity heatmap sections consistently apply
rounded-xl border-border/60tile styling for metric displays.web/src/components/layout/sidebar.tsx (4)
169-169:⚠️ Potential issue | 🟡 MinorUse single quotes for the URL string.
As per coding guidelines, use single quotes for strings in JS/TS/TSX files.
🔧 Proposed fix
<Link - href='https://joinvolvox.com/' + href='https://joinvolvox.com/'Wait, looking again — the code already uses single quotes. Let me re-check...
Actually, the line shows
href='https://joinvolvox.com/'which uses single quotes. This is compliant.
58-96: LGTM!The
renderNavItemfunction correctly implements the new active state styling:
- Uses
sidebar-item-activeclass defined in globals.css for active background/border/shadow- Active indicator bar with gradient and glow shadow provides visual emphasis
- Icon container styling differentiates active vs inactive states
- Active dot indicator with glow matches the design system
The styling correctly references CSS classes that have both light and dark mode variants defined.
112-165: LGTM!The sidebar structure is well-organized with:
- Clean "Command Deck" header using
text-gradient-primaryutility- Proper collapsible "Extensions" section with
Sparklesicon- Informative workflow tip card with gradient background
The styling changes align with the vibrant UI redesign while maintaining good component structure.
167-179: LGTM!The support link section correctly uses single quotes for the URL and applies appropriate hover transitions.
web/src/app/globals.css (6)
55-141: LGTM — Light and dark theme tokens are properly paired.The color system updates correctly define:
- Light mode tokens (lines 56-98) with the "Volvox Green" palette
- Dark mode tokens (lines 100-141) with corresponding richer variants
- Extended neon palette variables for both modes
Based on learnings: "Verify both dark and light themes when making dashboard color or theming changes" — all semantic tokens have both light and dark variants defined.
197-282: LGTM!Dashboard canvas and panel updates correctly implement:
- Additional neon-cyan radial gradient layer for visual depth
- Proper backdrop blur (12px) for glass morphism effect
- Consistent light/dark mode variants
The
backdrop-filterproperty is well-supported in modern browsers, and Tailwind v4's Lightning CSS integration handles vendor prefixes automatically.
333-509: LGTM!The new utility classes are well-structured:
- kpi-card: Gradient accent bar with hover lift effect
- neon-pulse: Subtle breathing glow animation
- status-dot-live: Pulsing ring indicator for live status
- sidebar-item-active: Active navigation styling (correctly used in sidebar.tsx)
- settings-card / feature-card: Category and feature tile styling with state indicators
All classes have appropriate dark mode variants defined, maintaining visual consistency across themes.
585-609: LGTM!The stagger animation implementation correctly defines delays for up to 8 children (50ms increments). This covers the KPI grid (5 cards) and other common grid layouts.
637-675: LGTM!Glass morphism and scrollbar utilities are well-implemented:
.glassprovides backdrop blur with saturation boost and dark mode variant.scrollbar-thinuses both standardscrollbar-width(Firefox) and WebKit pseudo-elements (Chrome/Safari) for cross-browser support
550-583: Remove the mask-composite prefix suggestion—the standard property is fully supported in Safari 15.4+.The
.border-gradient-animatedclass uses@property --border-angle(lines 579–583) andmask-composite: exclude(line 571), both of which have full support across modern browsers as of 2026:
@property: Chrome 85+, Edge 85+, Safari 16.4+, Firefox 128+. Universal baseline support since July 2024 with >95% coverage.mask-composite: exclude: Fully supported in Safari 15.4+ without a WebKit prefix.No fixes or prefixes are needed for current browser versions. If supporting older browsers is a requirement, use
@supportsto detect@propertysupport and provide a fallback.> Likely an incorrect or invalid review comment.
web/src/components/dashboard/config-categories/config-landing.tsx
Outdated
Show resolved
Hide resolved
railway-app
bot
temporarily deployed
to
volvox-bot / volvox-bot-pr-332
railway-app
bot
temporarily deployed
to
volvox-bot / volvox-bot-pr-332
railway-app
bot
temporarily deployed
to
volvox-bot / volvox-bot-pr-332
…erhauled settings Comprehensive dashboard redesign focused on a bold, modern, and unique visual identity with completely reworked settings experience: **Design System (globals.css)** - New extended color palette with neon green, purple, cyan, orange tokens - Glow card, KPI card, settings card, and feature card CSS components - Animated pulsing status indicator (status-dot-live) - Sidebar active state with glow effects (sidebar-item-active) - Gradient text utilities (text-gradient-primary, text-gradient-vibrant) - Stagger entrance animations for card grids - Glass morphism utility and custom scrollbar styling - Enhanced dashboard canvas with tri-gradient background **Sidebar** — Glowing active indicators, icon containers, workflow tip card with accent styling, gradient section labels **Header** — Pulsing live status dot, enhanced logo shadow, cleaner avatar ring states **Analytics Dashboard** — KPI cards with gradient top accent and icon containers, gradient title text, real-time indicators with colored accent backgrounds, rounded chart cards **Settings (Complete Redesign)** - Landing: Category cards with per-category gradient accents, icon tint colors, hover lift + reveal "Configure" CTA - Layout Shell: Unified toolbar panel, yellow dot glow on unsaved indicator, cleaner status banners with icon badges - Category Navigation: Active glow states matching sidebar, icon tint per category, rounded container - Feature Cards: Left accent bar for enabled features, "Active" status chip, centered section dividers, advanced content in inset panel **Health Cards** — Colored icon containers per metric type, gradient progress bars for memory/CPU, rounded card styling **Page Header** — Icon in accent container, subtle background shimmer, refined action bar https://claude.ai/code/session_01Eer2XPpLwj8YbifrSdUBoc
…; remove migrations README
BillChirico
force-pushed
the
claude/redesign-dashboard-ui-E8zzE
branch
from
a61ecf3 to
07cb863
Compare
railway-app
bot
temporarily deployed
to
volvox-bot / volvox-bot-pr-332
|
@claude review |
railway-app
bot
temporarily deployed
to
volvox-bot / volvox-bot-pr-332
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 39 out of 44 changed files in this pull request and generated 3 comments.
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Comments suppressed due to low confidence (1)
migrations/README.md:1
- This PR is described as a dashboard UI/theming refresh, but it deletes the database migrations documentation (including the numbering anomaly notes). Please restore
migrations/README.mdor explain why it’s being removed as part of this change set.
There was a problem hiding this comment.
Actionable comments posted: 13
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/src/components/layout/sidebar.tsx (1)
60-69:⚠️ Potential issue | 🟡 MinorExpose the active nav item with
aria-current.The current page is only indicated visually right now. Adding
aria-current="page"lets assistive tech announce the active destination in the sidebar.♿ Suggested fix
<Link key={item.name} href={item.href} + aria-current={isActive ? 'page' : undefined} onClick={onNavClick} className={cn(🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/src/components/layout/sidebar.tsx` around lines 60 - 69, The visual-only active nav item should expose aria-current for assistive tech; update the Link rendering (the Link component where key={item.name}, href={item.href}, onClick={onNavClick} and className uses isActive) to include aria-current="page" when isActive is true (omit or set to undefined when false) so the active sidebar item is announced by screen readers.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/next-env.d.ts`:
- Line 3: The import statement using double quotes for
"./.next/types/routes.d.ts" should use single quotes to conform to the repo's TS
style; update the import in next-env.d.ts so the module specifier uses single
quotes (i.e., replace the double-quoted string with a single-quoted one) and
ensure linting passes.
In `@web/src/app/globals.css`:
- Around line 558-574: The ::before pseudo-element of .border-gradient-animated
is intercepting pointer events; update the .border-gradient-animated::before
rule to set pointer-events: none so the animated border overlay becomes inert
and won't steal hover/clicks from the underlying interactive element (keep any
existing styles and only add pointer-events: none to the pseudo-element).
- Around line 641-677: The reduced-motion media query currently only disables
keyframe animations but not hover-driven transitions for the new interactive
cards; update the `@media` (prefers-reduced-motion: reduce) block to also target
.glow-card, .kpi-card, and .settings-card (and their :hover states) and override
their motion properties by setting transition: none; transform: none; and any
dynamic visual-change properties (e.g., box-shadow, filter) to their
non-animated/static values so hover lifts/glows no longer animate for users who
prefer reduced motion.
In `@web/src/app/page.tsx`:
- Around line 107-110: Update the JSX string literals to use single quotes:
locate the SVG/JSX element containing attributes strokeLinecap, strokeLinejoin,
strokeWidth and the d attribute (the path string "M4 6h16M4 12h16M4 18h16") and
replace the double-quoted d value with a single-quoted string; ensure any other
JSX attribute strings in the same element follow the repo's single-quote rule so
the TSX linter passes.
In `@web/src/components/dashboard/config-layout-shell.tsx`:
- Around line 201-210: Replace the paragraph used for the active category title
with a proper heading element so screen readers can discover the subsection:
change the element that renders activeCategory.label (the JSX currently using <p
className="text-base font-semibold tracking-tight"> around activeCategory.label
in config-layout-shell.tsx) to an <h2> with the same classes/appearance, leaving
the activeCategory.description <p> as-is; ensure no other props or styling are
lost when switching the element.
In `@web/src/components/dashboard/config-sections/CommunitySettingsSection.tsx`:
- Around line 179-182: Simplify the redundant fallback conditionals in
CommunitySettingsSection by removing the unnecessary ternary "? true : false"
and use a clearer boolean fallback: when determining the checked state, prefer
draftConfig.botStatus?.rotation?.enabled ??
(draftConfig.botStatus?.rotateIntervalMs != null) (and the analogous second
occurrence that uses rotateIntervalMs) so the expression directly yields a
boolean without the ternary wrapper; update both occurrences that reference
draftConfig.botStatus?.rotation?.enabled and
draftConfig.botStatus?.rotateIntervalMs accordingly.
In `@web/src/components/dashboard/config-workspace/category-navigation.tsx`:
- Around line 90-92: The fallback in the ternary for iconBg is unnecessary
because CATEGORY_ICON_ACTIVE is typed as Record<ConfigCategoryId, string> and
category.id is a ConfigCategoryId, so the lookup cannot be undefined; remove the
nullish fallback (?? 'bg-primary/15 text-primary') and just use
CATEGORY_ICON_ACTIVE[category.id] when isActive to simplify the expression in
the component where iconBg is assigned.
In `@web/src/components/dashboard/health-cards.tsx`:
- Around line 206-227: The CPU progress bar is misleading because cpuPct (and
the rendered bar in the Card component) is a lifetime-average (cumulative CPU /
uptime); change it to either (A) relabel the bar and add a note that it is "avg
since start" so the UI reflects the metric (update the CardTitle or adjacent
text near cpuPct/cpuUserSec/cpuSystemSec), or (B) swap the bar source to a live
utilization value sampled from PerformanceMonitor._sampleCpu() and use that
sampled delta percentage for the bar while keeping cpuPct as a separate "avg"
value displayed numerically; update references to cpuPct and the div style width
accordingly and ensure the supporting text still shows cpuUserSec and
cpuSystemSec.
In `@web/src/components/landing/Footer.tsx`:
- Line 104: The JSX uses double quotes for the Heart component's className prop
in Footer (the line with Made with <Heart className="w-4 h-4 text-red-500
fill-red-500" /> by developers, for); change the string delimiters to single
quotes for the className prop (className='w-4 h-4 text-red-500 fill-red-500') to
comply with the project's single-quote string guideline.
- Line 26: The JSX string quoting in Footer.tsx uses double quotes for the
span's className; update the JSX to use single quotes so the className prop uses
single quotes (e.g., change the span with className="text-aurora" to use single
quotes) to comply with the project's string-quoting guideline; locate the span
in the Ready to <span ...> line and change its className attribute to use single
quotes.
In `@web/src/components/layout/server-selector.tsx`:
- Around line 233-235: The JSX for the DropdownMenuLabel component has a single
long className string that pushes the line past the 100-character limit;
refactor the className into a concatenation or template literal (or split into
multiple adjacent strings) for readability and to satisfy line-length
rules—locate the DropdownMenuLabel element in server-selector.tsx (the one with
text "Manage") and break its className value into multiple shorter segments
(e.g., split into "px-2 pt-2", "pb-1", "text-[11px] font-semibold", "uppercase
tracking-[0.14em] text-muted-foreground") while keeping the same classes and JSX
semantics.
In `@web/src/hooks/use-glow-card.ts`:
- Line 13: Replace the verbose cast for the local variable `card` by first
ensuring the event target is an Element/HTMLElement and then use the DOM generic
on `closest` to get a properly typed `HTMLElement | null`; e.g., check `e.target
instanceof Element` (or cast to `Element`) and call
`closest<HTMLElement>('.glow-card')` so `card` is typed as `HTMLElement | null`
without the `as HTMLElement | null` chain in use-glow-card.ts.
In `@web/tests/next.config.test.ts`:
- Around line 1-7: Replace all double-quoted string literals with single-quoted
ones in this test file: change import strings (the import of nextConfig from
"../next.config.mjs" and the vitest import) and every string used in assertions
and type annotations (e.g., the header keys and values like 'X-Frame-Options',
'DENY', and type literals such as 'function') to use single quotes; ensure the
identifier nextConfig and the SecurityHeader type remain unchanged and update
all occurrences consistently.
---
Outside diff comments:
In `@web/src/components/layout/sidebar.tsx`:
- Around line 60-69: The visual-only active nav item should expose aria-current
for assistive tech; update the Link rendering (the Link component where
key={item.name}, href={item.href}, onClick={onNavClick} and className uses
isActive) to include aria-current="page" when isActive is true (omit or set to
undefined when false) so the active sidebar item is announced by screen readers.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: b3e59d72-035a-4c59-a5a3-1e420ce7b0fe
📒 Files selected for processing (37)
.github/workflows/claude-review.ymlbiome.jsonweb/next-env.d.tsweb/src/app/api/guilds/[guildId]/members/[userId]/xp/route.tsweb/src/app/dashboard/conversations/conversations-client.tsxweb/src/app/dashboard/members/members-client.tsxweb/src/app/dashboard/moderation/moderation-client.tsxweb/src/app/globals.cssweb/src/app/page.tsxweb/src/components/dashboard/analytics-dashboard.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/dashboard/config-sections/CommunitySettingsSection.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-workspace/config-categories.tsweb/src/components/dashboard/health-cards.tsxweb/src/components/dashboard/log-viewer.tsxweb/src/components/dashboard/performance-dashboard.tsxweb/src/components/dashboard/types.tsweb/src/components/landing/FeatureGrid.tsxweb/src/components/landing/Footer.tsxweb/src/components/layout/header.tsxweb/src/components/layout/server-selector.tsxweb/src/components/layout/sidebar.tsxweb/src/components/ui/avatar.tsxweb/src/components/ui/card.tsxweb/src/components/ui/channel-selector.tsxweb/src/components/ui/command.tsxweb/src/components/ui/dropdown-menu.tsxweb/src/components/ui/error-boundary.tsxweb/src/components/ui/form.tsxweb/src/components/ui/popover.tsxweb/src/components/ui/sheet.tsxweb/src/components/ui/table.tsxweb/src/hooks/use-glow-card.tsweb/tests/next.config.test.tsweb/tests/stores/members-store.test.ts
📜 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: Greptile Review
- GitHub Check: Agent
- GitHub Check: Greptile Review
🧰 Additional context used
📓 Path-based instructions (7)
**/*.json
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use double quotes in JSON files (standard JSON format); this exception applies only to JSON files, not JavaScript/TypeScript
Files:
biome.json
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,ts,tsx}: Use single quotes for strings (except in JSON files); no double quotes
Always include semicolons at the end of statements
Use 2-space indentation (spaces, not tabs)
Always include trailing commas in multi-line arrays, objects, and function parameters
Maintain a maximum line width of 100 characters
Files:
web/src/components/dashboard/types.tsweb/src/components/ui/error-boundary.tsxweb/src/components/dashboard/log-viewer.tsxweb/src/app/api/guilds/[guildId]/members/[userId]/xp/route.tsweb/src/app/page.tsxweb/src/components/dashboard/config-workspace/config-categories.tsweb/src/components/ui/avatar.tsxweb/src/components/landing/FeatureGrid.tsxweb/next-env.d.tsweb/src/components/dashboard/performance-dashboard.tsxweb/src/components/ui/sheet.tsxweb/src/components/ui/popover.tsxweb/src/components/layout/server-selector.tsxweb/src/components/ui/card.tsxweb/src/components/ui/form.tsxweb/src/hooks/use-glow-card.tsweb/src/components/landing/Footer.tsxweb/src/components/ui/table.tsxweb/src/app/dashboard/members/members-client.tsxweb/src/components/ui/dropdown-menu.tsxweb/src/app/dashboard/conversations/conversations-client.tsxweb/src/app/dashboard/moderation/moderation-client.tsxweb/tests/stores/members-store.test.tsweb/src/components/ui/channel-selector.tsxweb/src/components/layout/header.tsxweb/src/components/dashboard/config-sections/CommunitySettingsSection.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/tests/next.config.test.tsweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/ui/command.tsxweb/src/components/dashboard/health-cards.tsxweb/src/components/dashboard/analytics-dashboard.tsxweb/src/components/layout/sidebar.tsx
web/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never use
console.*methods in web dashboard code; use appropriate logging mechanisms for React applications
Files:
web/src/components/dashboard/types.tsweb/src/components/ui/error-boundary.tsxweb/src/components/dashboard/log-viewer.tsxweb/src/app/api/guilds/[guildId]/members/[userId]/xp/route.tsweb/src/app/page.tsxweb/src/components/dashboard/config-workspace/config-categories.tsweb/src/components/ui/avatar.tsxweb/src/components/landing/FeatureGrid.tsxweb/src/components/dashboard/performance-dashboard.tsxweb/src/components/ui/sheet.tsxweb/src/components/ui/popover.tsxweb/src/components/layout/server-selector.tsxweb/src/components/ui/card.tsxweb/src/components/ui/form.tsxweb/src/hooks/use-glow-card.tsweb/src/components/landing/Footer.tsxweb/src/components/ui/table.tsxweb/src/app/dashboard/members/members-client.tsxweb/src/components/ui/dropdown-menu.tsxweb/src/app/dashboard/conversations/conversations-client.tsxweb/src/app/dashboard/moderation/moderation-client.tsxweb/src/components/ui/channel-selector.tsxweb/src/components/layout/header.tsxweb/src/components/dashboard/config-sections/CommunitySettingsSection.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/ui/command.tsxweb/src/components/dashboard/health-cards.tsxweb/src/components/dashboard/analytics-dashboard.tsxweb/src/components/layout/sidebar.tsx
**/*.{js,ts,tsx,mjs}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,ts,tsx,mjs}: Use ESM syntax (import/export) — CommonJS is not allowed
Use single quotes for strings — double quotes only allowed in JSON files
Always include semicolons at end of statements
Use 2-space indentation for all code
Use Winston logger fromsrc/logger.js— never useconsole.*methods
Files:
web/src/components/dashboard/types.tsweb/src/components/ui/error-boundary.tsxweb/src/components/dashboard/log-viewer.tsxweb/src/app/api/guilds/[guildId]/members/[userId]/xp/route.tsweb/src/app/page.tsxweb/src/components/dashboard/config-workspace/config-categories.tsweb/src/components/ui/avatar.tsxweb/src/components/landing/FeatureGrid.tsxweb/next-env.d.tsweb/src/components/dashboard/performance-dashboard.tsxweb/src/components/ui/sheet.tsxweb/src/components/ui/popover.tsxweb/src/components/layout/server-selector.tsxweb/src/components/ui/card.tsxweb/src/components/ui/form.tsxweb/src/hooks/use-glow-card.tsweb/src/components/landing/Footer.tsxweb/src/components/ui/table.tsxweb/src/app/dashboard/members/members-client.tsxweb/src/components/ui/dropdown-menu.tsxweb/src/app/dashboard/conversations/conversations-client.tsxweb/src/app/dashboard/moderation/moderation-client.tsxweb/tests/stores/members-store.test.tsweb/src/components/ui/channel-selector.tsxweb/src/components/layout/header.tsxweb/src/components/dashboard/config-sections/CommunitySettingsSection.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/tests/next.config.test.tsweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/ui/command.tsxweb/src/components/dashboard/health-cards.tsxweb/src/components/dashboard/analytics-dashboard.tsxweb/src/components/layout/sidebar.tsx
web/src/app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
web/src/app/**/*.{ts,tsx}: ExportmetadatausingcreatePageMetadata()fromweb/src/lib/page-titles.tsin SSR entry points for dashboard pages
UseDashboardTitleSynccomponent andgetDashboardDocumentTitle()for client-side navigation title updates in the dashboard
Files:
web/src/app/api/guilds/[guildId]/members/[userId]/xp/route.tsweb/src/app/page.tsxweb/src/app/dashboard/members/members-client.tsxweb/src/app/dashboard/conversations/conversations-client.tsxweb/src/app/dashboard/moderation/moderation-client.tsx
web/src/app/dashboard/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
For dashboard routes, add a matcher entry to
dashboardTitleMatchersinweb/src/lib/page-titles.ts: use exact equality for leaf routes (pathname === '/dashboard/my-route') and subtree checks (pathname.startsWith('/dashboard/my-route/')); exportmetadatausingcreatePageMetadata(title)for SSR entry points
Files:
web/src/app/dashboard/members/members-client.tsxweb/src/app/dashboard/conversations/conversations-client.tsxweb/src/app/dashboard/moderation/moderation-client.tsx
web/tests/**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
web/tests/**/*.test.{ts,tsx}: Write web dashboard tests using Vitest 4 with thejsdomenvironment and React Testing Library, matching theweb/src/structure
Maintain test coverage thresholds of 85% across all metrics (statements, branches, functions, lines) for web dashboard tests
Files:
web/tests/stores/members-store.test.tsweb/tests/next.config.test.ts
🧠 Learnings (20)
📚 Learning: 2026-03-12T02:03:36.493Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-03-12T02:03:36.493Z
Learning: Applies to **/*.js : Use ESM-only syntax: `import`/`export`, never `require()`/`module.exports`
Applied to files:
biome.json
📚 Learning: 2026-03-11T05:32:46.325Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-11T05:32:46.325Z
Learning: Applies to web/src/app/**/*.{ts,tsx} : Apply static metadata to server-rendered dashboard entry pages and use title template format for root app metadata
Applied to files:
web/src/components/dashboard/log-viewer.tsxweb/src/app/page.tsxweb/src/components/dashboard/performance-dashboard.tsxweb/src/components/layout/server-selector.tsxweb/src/app/dashboard/members/members-client.tsxweb/src/app/dashboard/conversations/conversations-client.tsxweb/src/app/dashboard/moderation/moderation-client.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/analytics-dashboard.tsx
📚 Learning: 2026-03-12T02:03:36.493Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-03-12T02:03:36.493Z
Learning: Applies to web/src/**/*.{ts,tsx} : Never use `console.*` methods in web dashboard code; use appropriate logging mechanisms for React applications
Applied to files:
web/src/components/dashboard/log-viewer.tsxweb/src/components/dashboard/performance-dashboard.tsxweb/src/components/dashboard/config-categories/config-landing.tsx
📚 Learning: 2026-03-12T02:03:36.493Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-03-12T02:03:36.493Z
Learning: Applies to web/src/app/dashboard/**/*.tsx : For dashboard routes, add a matcher entry to `dashboardTitleMatchers` in `web/src/lib/page-titles.ts`: use exact equality for leaf routes (`pathname === '/dashboard/my-route'`) and subtree checks (`pathname.startsWith('/dashboard/my-route/')`); export `metadata` using `createPageMetadata(title)` for SSR entry points
Applied to files:
web/src/components/dashboard/log-viewer.tsxweb/src/app/page.tsxweb/next-env.d.tsweb/src/components/dashboard/performance-dashboard.tsxweb/src/app/dashboard/members/members-client.tsxweb/src/app/dashboard/conversations/conversations-client.tsxweb/src/app/dashboard/moderation/moderation-client.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/analytics-dashboard.tsx
📚 Learning: 2026-03-10T23:21:49.730Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-10T23:21:49.730Z
Learning: Applies to src/api/routes/*.js : Add adaptDeleteGuildIdParam in API route handlers to enforce guild moderation checks on DELETE requests without losing record id
Applied to files:
web/src/app/api/guilds/[guildId]/members/[userId]/xp/route.ts
📚 Learning: 2026-03-11T06:42:38.728Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-11T06:42:38.728Z
Learning: Applies to web/src/app/api/**/route.ts : Include guildId in signed WebSocket ticket payload when issuing tickets from dashboard endpoints
Applied to files:
web/src/app/api/guilds/[guildId]/members/[userId]/xp/route.tsweb/src/app/dashboard/conversations/conversations-client.tsx
📚 Learning: 2026-03-10T23:21:49.730Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-10T23:21:49.730Z
Learning: Applies to web/src/components/dashboard/config-workspace/**/*.{ts,tsx} : Web dashboard config editor should use category workspace navigation with reusable SettingsFeatureCard pattern (header + master toggle + Basic/Advanced blocks)
Applied to files:
web/src/components/dashboard/config-workspace/config-categories.tsweb/src/components/landing/FeatureGrid.tsxweb/src/components/ui/card.tsxweb/src/app/dashboard/members/members-client.tsxweb/src/app/dashboard/conversations/conversations-client.tsxweb/src/components/dashboard/config-sections/CommunitySettingsSection.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/dashboard/analytics-dashboard.tsxweb/src/components/layout/sidebar.tsx
📚 Learning: 2026-03-12T02:03:36.493Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-03-12T02:03:36.493Z
Learning: Applies to config.json : All community features in `config.json` should be gated behind a `config.<feature>.enabled` flag; moderation commands are always available regardless of config settings
Applied to files:
web/src/components/dashboard/config-workspace/config-categories.ts
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Applies to web/src/app/**/*.{ts,tsx} : Use `DashboardTitleSync` component and `getDashboardDocumentTitle()` for client-side navigation title updates in the dashboard
Applied to files:
web/src/components/dashboard/performance-dashboard.tsxweb/src/components/layout/server-selector.tsxweb/src/components/ui/card.tsxweb/src/app/dashboard/members/members-client.tsxweb/src/app/dashboard/conversations/conversations-client.tsxweb/src/app/dashboard/moderation/moderation-client.tsxweb/src/components/layout/header.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/dashboard/analytics-dashboard.tsxweb/src/components/layout/sidebar.tsx
📚 Learning: 2026-03-11T06:42:38.728Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-11T06:42:38.728Z
Learning: Applies to web/src/pages/dashboard/**/*.{ts,tsx} : Use shared title helpers from web/src/lib/page-titles.ts for setting browser titles in dashboard pages
Applied to files:
web/src/components/dashboard/performance-dashboard.tsxweb/src/app/dashboard/members/members-client.tsxweb/src/app/dashboard/conversations/conversations-client.tsxweb/src/app/dashboard/moderation/moderation-client.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/dashboard/analytics-dashboard.tsx
📚 Learning: 2026-03-10T23:21:49.730Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-10T23:21:49.730Z
Learning: Applies to web/src/components/layout/dashboard-shell.tsx : Dashboard page titles should sync with route changes using DashboardTitleSync component mounted in dashboard-shell.tsx and canonical title string 'Volvox.Bot - AI Powered Discord Bot'
Applied to files:
web/src/components/dashboard/performance-dashboard.tsxweb/src/components/layout/server-selector.tsxweb/src/app/dashboard/members/members-client.tsxweb/src/app/dashboard/conversations/conversations-client.tsxweb/src/app/dashboard/moderation/moderation-client.tsxweb/src/components/layout/header.tsxweb/src/components/dashboard/config-sections/CommunitySettingsSection.tsxweb/src/components/dashboard/config-categories/config-landing.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/dashboard/health-cards.tsxweb/src/components/dashboard/analytics-dashboard.tsxweb/src/components/layout/sidebar.tsx
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Applies to web/src/app/**/*.{ts,tsx} : Export `metadata` using `createPageMetadata()` from `web/src/lib/page-titles.ts` in SSR entry points for dashboard pages
Applied to files:
web/src/components/ui/sheet.tsxweb/src/app/dashboard/members/members-client.tsxweb/src/app/dashboard/conversations/conversations-client.tsx
📚 Learning: 2026-03-12T02:03:36.493Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-03-12T02:03:36.493Z
Learning: Applies to **/*.{js,ts,tsx} : Use single quotes for strings (except in JSON files); no double quotes
Applied to files:
web/src/components/landing/Footer.tsx
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Applies to **/*.{js,ts,tsx,mjs} : Use single quotes for strings — double quotes only allowed in JSON files
Applied to files:
web/src/components/landing/Footer.tsx
📚 Learning: 2026-03-12T02:03:36.493Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-03-12T02:03:36.493Z
Learning: Applies to **/*.{js,ts,tsx} : Maintain a maximum line width of 100 characters
Applied to files:
web/src/components/layout/header.tsx
📚 Learning: 2026-03-12T02:03:36.493Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-03-12T02:03:36.493Z
Learning: Applies to web/tests/**/*.test.{ts,tsx} : Write web dashboard tests using Vitest 4 with the `jsdom` environment and React Testing Library, matching the `web/src/` structure
Applied to files:
web/tests/next.config.test.ts
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Applies to **/*.{js,ts,tsx,mjs} : Use ESM syntax (import/export) — CommonJS is not allowed
Applied to files:
web/src/components/dashboard/config-categories/config-landing.tsx
📚 Learning: 2026-03-12T02:03:36.493Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-03-12T02:03:36.493Z
Learning: Applies to web/tests/**/*.test.{ts,tsx} : Maintain test coverage thresholds of 85% across all metrics (statements, branches, functions, lines) for web dashboard tests
Applied to files:
web/src/components/dashboard/config-categories/config-landing.tsx
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Verify responsive layout behavior when making dashboard layout changes
Applied to files:
web/src/components/dashboard/config-layout-shell.tsx
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Verify both dark and light themes when making dashboard color or theming changes
Applied to files:
web/src/app/globals.css
🪛 GitHub Check: SonarCloud Code Analysis
web/src/hooks/use-glow-card.ts
[warning] 13-13: This assertion is unnecessary since it does not change the type of the expression.
web/src/components/layout/header.tsx
[warning] 64-64: Ambiguous spacing after previous element span
web/src/components/dashboard/config-sections/CommunitySettingsSection.tsx
[warning] 181-181: Unnecessary use of boolean literals in conditional expression.
[warning] 181-181: Unexpected negated condition.
[warning] 217-217: Unexpected negated condition.
web/src/components/dashboard/health-cards.tsx
[warning] 89-89: Ambiguous spacing after previous element span
[warning] 106-106: Ambiguous spacing after previous element span
[warning] 138-138: Ambiguous spacing after previous element span
[warning] 212-212: Ambiguous spacing after previous element span
[warning] 157-157: Ambiguous spacing after previous element span
[warning] 240-240: Ambiguous spacing after previous element span
[warning] 193-193: Ambiguous spacing after previous element span
[warning] 174-174: Ambiguous spacing after previous element span
[warning] 180-180: Unexpected negated condition.
[warning] 199-199: Unexpected negated condition.
web/src/components/dashboard/analytics-dashboard.tsx
[warning] 619-619: Ambiguous spacing after previous element span
[warning] 609-609: Ambiguous spacing after previous element span
[warning] 637-637: Ambiguous spacing after previous element span
🔇 Additional comments (31)
web/src/app/api/guilds/[guildId]/members/[userId]/xp/route.ts (1)
68-68: Validation response refactor looks good.Line 68 keeps the same API behavior (same body and
400status) while simplifying formatting.web/src/components/dashboard/types.ts (1)
71-74: LGTM! Formatting improvement enhances readability.The multi-line formatting of the CPU-usage validation condition improves readability by making each type check visually distinct. The logic remains unchanged and all coding guidelines are followed.
web/tests/stores/members-store.test.ts (1)
276-283: TypedrejectFirstwiring looks correct and keeps the stale-request test behavior intact.This change keeps the same control flow while removing unnecessary mock indirection.
web/src/components/ui/channel-selector.tsx (1)
427-428: LGTM - Good organizational improvement.Reordering the exports to place type exports before value exports follows TypeScript best practices and improves code clarity. While this change appears unrelated to the PR's UI enhancement objectives, it's a harmless and beneficial code organization improvement.
web/src/components/dashboard/log-viewer.tsx (1)
94-96: LGTM!The reformatted expand/collapse indicator improves readability by making the conditional expression more explicit. The change follows all coding guidelines and maintains the existing functionality.
web/tests/next.config.test.ts (2)
4-7: LGTM!The local
SecurityHeadertype provides clear type safety for theheaders.find()callbacks and improves readability. This is a reasonable approach for test file isolation rather than depending on potentially complex Next.js internal types.
21-64: LGTM!The
SecurityHeadertype annotations are consistently applied across allheaders.find()callbacks, improving type safety without changing the test behavior.biome.json (1)
2-2: Schema update is clean and scoped.The
$schemabump is isolated and does not alter formatter/linter behavior in this file.web/src/components/dashboard/performance-dashboard.tsx (1)
16-16: Import reorder is safe.No behavior or API changes introduced by this adjustment.
web/src/components/ui/avatar.tsx (1)
46-46: Export reorder is non-breaking.The same symbols remain exported; only declaration order changed.
web/src/components/ui/sheet.tsx (1)
102-107: Export list reshuffle looks good.No symbols were removed from the public surface in this segment.
web/src/components/ui/popover.tsx (1)
69-73: Export changes are coherent.This update keeps the module exports consistent and explicit.
.github/workflows/claude-review.yml (1)
3-7: Trigger and mention-filter logic is correctly tightened.This covers edited review content and keeps execution scoped to explicit
@claudementions.Also applies to: 15-23
web/src/components/ui/form.tsx (1)
165-168: Export reordering is safe here.No behavioral changes or symbol removals in this segment.
web/src/components/ui/command.tsx (1)
162-166: LGTM—Export reordering is cosmetic.Reordering named exports has no runtime impact and doesn't affect the public API.
web/src/components/ui/table.tsx (1)
92-92: LGTM—Alphabetical export ordering.The alphabetical ordering of exports improves consistency without affecting functionality.
web/src/components/ui/dropdown-menu.tsx (1)
77-82: LGTM—Export reordering is cosmetic.Reordering the exports has no impact on the component behavior or API.
web/src/components/ui/error-boundary.tsx (1)
8-8: LGTM—Import reordering is cosmetic.Moving the logger import doesn't affect functionality or violate any guidelines.
web/src/components/dashboard/config-workspace/config-categories.ts (1)
39-39: LGTM—Array formatting is within guidelines.The single-line array format is valid and stays within the 100-character limit.
web/src/components/landing/FeatureGrid.tsx (1)
64-65: LGTM—JSX formatting is within guidelines.Collapsing the JSX elements to single lines improves readability while staying within the 100-character limit.
web/src/app/dashboard/conversations/conversations-client.tsx (1)
278-304: LGTM! Clean restructuring of the page layout.Moving the
PageHeaderoutside theguildIdconditional ensures consistent page structure regardless of guild selection state. The refresh button is appropriately disabled when no guild is selected or during loading.web/src/app/dashboard/moderation/moderation-client.tsx (1)
153-180: LGTM! Consistent layout pattern with other client pages.The restructuring mirrors the conversations page pattern—
PageHeaderalways visible with contextualEmptyStatewhen no guild is selected. Good consistency across dashboard pages.web/src/components/ui/card.tsx (1)
55-55: LGTM!Export reordering to alphabetical order is a clean organizational change with no functional impact.
web/src/hooks/use-glow-card.ts (1)
5-28: LGTM! Clean RAF-throttled pointer tracking implementation.The hook correctly:
- Throttles updates via
requestAnimationFrameto avoid excessive style updates- Cleans up the listener and cancels pending RAF on unmount
- Uses
{ passive: true }for better scroll performance- Scopes the effect to the nearest
.glow-cardancestorweb/src/app/dashboard/members/members-client.tsx (1)
151-176: LGTM! Consistent with dashboard page patterns.The refactoring follows the same structure as conversations and moderation pages—always-visible
PageHeaderwith guild-conditional content. This creates a cohesive UX across the dashboard.web/src/components/dashboard/config-workspace/category-navigation.tsx (1)
20-27: LGTM! Type-safe category styling map.Good use of
Record<ConfigCategoryId, string>for exhaustive type checking—this ensures all category IDs have corresponding styles and catches typos at compile time.web/src/components/layout/header.tsx (2)
63-66: LGTM! CSS-based status indicator is cleaner.Replacing the
CircleDoticon with a CSS class (status-dot-live) reduces bundle size and allows the pulsing animation to be defined in global styles. The spacing between the dot and "Live" text is intentional.
89-102: LGTM! Line length issue resolved.The Button component is now properly split across multiple lines, staying within the 100-character limit per coding guidelines.
web/src/components/dashboard/config-categories/config-landing.tsx (3)
8-11: LGTM! Imports properly consolidated.The duplicate type imports are now combined into a single import statement, resolving the CI failure from previous reviews.
22-38: LGTM! Exhaustive category styling maps.Both
CATEGORY_GRADIENTSandCATEGORY_ICON_BGare now properly typed withRecord<ConfigCategoryId, string>, ensuring compile-time safety for all category entries.
60-104: LGTM! Well-structured settings grid with visual polish.The implementation effectively uses:
- CSS custom properties (
--card-accent) for per-card gradient themingstagger-fade-infor entrance animations- Group hover states for the "Configure" affordance
- Clean separation between icon/label/action areas
railway-app
bot
temporarily deployed
to
volvox-bot / volvox-bot-pr-332
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/src/app/globals.css`:
- Around line 705-718: The .glass CSS rule contains two consecutive
-webkit-backdrop-filter declarations (in the .glass selector) where the second
(saturate(1.5)) overrides the first (saturate(1.8)); remove the duplicate
-webkit-backdrop-filter line from the .glass rule so only the intended
-webkit-backdrop-filter value remains (mirror the dark variant if needed) and
leave the .dark .glass rule unchanged.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: 52351de8-f924-4f83-8d83-2ed36250e8a4
📒 Files selected for processing (6)
web/src/app/globals.cssweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/dashboard/config-sections/CommunitySettingsSection.tsxweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/health-cards.tsxweb/src/hooks/use-glow-card.ts
📜 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: Greptile Review
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,ts,tsx}: Use single quotes for strings (except in JSON files); no double quotes
Always include semicolons at the end of statements
Use 2-space indentation (spaces, not tabs)
Always include trailing commas in multi-line arrays, objects, and function parameters
Maintain a maximum line width of 100 characters
Files:
web/src/components/dashboard/config-sections/CommunitySettingsSection.tsxweb/src/hooks/use-glow-card.tsweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/dashboard/health-cards.tsx
web/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never use
console.*methods in web dashboard code; use appropriate logging mechanisms for React applications
Files:
web/src/components/dashboard/config-sections/CommunitySettingsSection.tsxweb/src/hooks/use-glow-card.tsweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/dashboard/health-cards.tsx
**/*.{js,ts,tsx,mjs}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,ts,tsx,mjs}: Use ESM syntax (import/export) — CommonJS is not allowed
Use single quotes for strings — double quotes only allowed in JSON files
Always include semicolons at end of statements
Use 2-space indentation for all code
Use Winston logger fromsrc/logger.js— never useconsole.*methods
Files:
web/src/components/dashboard/config-sections/CommunitySettingsSection.tsxweb/src/hooks/use-glow-card.tsweb/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-layout-shell.tsxweb/src/components/dashboard/health-cards.tsx
🧠 Learnings (7)
📚 Learning: 2026-03-10T23:21:49.730Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-10T23:21:49.730Z
Learning: Applies to web/src/components/layout/dashboard-shell.tsx : Dashboard page titles should sync with route changes using DashboardTitleSync component mounted in dashboard-shell.tsx and canonical title string 'Volvox.Bot - AI Powered Discord Bot'
Applied to files:
web/src/components/dashboard/config-sections/CommunitySettingsSection.tsxweb/src/components/dashboard/config-layout-shell.tsx
📚 Learning: 2026-03-10T23:21:49.730Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-10T23:21:49.730Z
Learning: Applies to web/src/components/dashboard/config-workspace/**/*.{ts,tsx} : Web dashboard config editor should use category workspace navigation with reusable SettingsFeatureCard pattern (header + master toggle + Basic/Advanced blocks)
Applied to files:
web/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-layout-shell.tsx
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Applies to web/src/app/**/*.{ts,tsx} : Use `DashboardTitleSync` component and `getDashboardDocumentTitle()` for client-side navigation title updates in the dashboard
Applied to files:
web/src/components/dashboard/config-workspace/category-navigation.tsxweb/src/components/dashboard/config-layout-shell.tsx
📚 Learning: 2026-03-11T06:42:38.728Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-11T06:42:38.728Z
Learning: Applies to web/src/pages/dashboard/**/*.{ts,tsx} : Use shared title helpers from web/src/lib/page-titles.ts for setting browser titles in dashboard pages
Applied to files:
web/src/components/dashboard/config-layout-shell.tsx
📚 Learning: 2026-03-11T05:32:46.325Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-11T05:32:46.325Z
Learning: Applies to web/src/app/**/*.{ts,tsx} : Apply static metadata to server-rendered dashboard entry pages and use title template format for root app metadata
Applied to files:
web/src/components/dashboard/config-layout-shell.tsx
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Verify responsive layout behavior when making dashboard layout changes
Applied to files:
web/src/components/dashboard/config-layout-shell.tsx
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Verify both dark and light themes when making dashboard color or theming changes
Applied to files:
web/src/app/globals.css
🪛 GitHub Check: SonarCloud Code Analysis
web/src/components/dashboard/health-cards.tsx
[warning] 89-89: Ambiguous spacing after previous element span
[warning] 106-106: Ambiguous spacing after previous element span
[warning] 193-193: Ambiguous spacing after previous element span
[warning] 199-199: Unexpected negated condition.
[warning] 138-138: Ambiguous spacing after previous element span
[warning] 157-157: Ambiguous spacing after previous element span
[warning] 174-174: Ambiguous spacing after previous element span
[warning] 240-240: Ambiguous spacing after previous element span
[warning] 212-212: Ambiguous spacing after previous element span
[warning] 180-180: Unexpected negated condition.
🪛 Stylelint (17.4.0)
web/src/app/globals.css
[error] 707-707: Unexpected duplicate "-webkit-backdrop-filter" (declaration-block-no-duplicate-properties)
(declaration-block-no-duplicate-properties)
🔇 Additional comments (13)
web/src/components/dashboard/config-sections/CommunitySettingsSection.tsx (1)
179-182: LGTM! Simplified fallback conditionals address previous review feedback.Both changes successfully remove redundant ternary patterns and improve readability:
- Lines 179-182: Removed the unnecessary
? true : falsewrapper since!= nullalready returns a boolean.- Lines 215-218: Replaced the nested ternary with a cleaner nullish-coalescing default (
?? 300000), then dividing by 60000 to convert milliseconds to minutes (300000ms = 5min default).The use of
??(nullish coalescing) instead of||correctly preserves intentional falsy values likeenabled: falseorintervalMinutes: 0, which is important given the TypeScript interface allows these values.Also applies to: 215-218
web/src/hooks/use-glow-card.ts (1)
5-29: LGTM! Clean hook implementation with proper cleanup.The hook correctly throttles via
requestAnimationFrame, uses proper type narrowing (instanceof Element), and cleans up both the event listener and pending animation frame on unmount.One design consideration: if this hook is ever called from multiple mounted components simultaneously, each will register its own global
pointermovelistener. Currently this is fine since onlyAnalyticsDashboarduses it (per the context snippets), but if reuse expands, consider a ref-counted singleton pattern or a context-based approach.web/src/components/dashboard/config-workspace/category-navigation.tsx (2)
20-27: Well-typed category icon mapping.The
CATEGORY_ICON_ACTIVErecord is properly typed withConfigCategoryId, ensuring compile-time safety and completeness. All five categories from the type definition are covered.
81-127: Clean sidebar navigation refresh with consistent styling.The desktop sidebar now uses the new design tokens (
backdrop-blur-sm,sidebar-item-active) and the icon container styling is derived cleanly from the category-specific mapping. The removal of the fallback iniconBg(line 90) is appropriate given the exhaustive typing.web/src/components/dashboard/config-layout-shell.tsx (3)
166-193: Clean status banner redesign with improved visual hierarchy.The unsaved changes and validation error banners now use a consistent horizontal layout with icon containers. The
<output>element witharia-live="polite"is appropriate for announcing state changes to screen readers.
201-217: Category header with proper heading semantics.Good use of
<h2>for the active category label (line 209), maintaining the heading hierarchy below the page's<h1>. The glass morphism styling (backdrop-blur-sm,bg-card/80) aligns with the new design system.
122-134: The Undo button at lines 122-134 does not have anaria-keyshortcutsattribute. The code snippet shows onlyaria-label="Undo last save"and standard button props. The review comment's assertion about a misleadingaria-keyshortcuts="Control+Z Meta+Z"attribute is not present in the actual code.> Likely an incorrect or invalid review comment.web/src/app/globals.css (3)
287-336: Glow card CSS properly integrates with the newuseGlowCardhook.The
--mouse-xand--mouse-ycustom properties are now populated by theuseGlowCardhook inweb/src/hooks/use-glow-card.ts, enabling the mouse-tracking radial gradient effect. The50%defaults ensure a sensible centered fallback when the hook isn't active.
650-701: Comprehensive reduced-motion handling.The
prefers-reduced-motion: reducemedia query now properly disables:
- Keyframe animations (
.text-aurora,.neon-pulse,.status-dot-live,.border-gradient-animated,.stagger-fade-in,.animate-float-slow,.terminal-cursor,.dashboard-fade-in)- Transitions and hover transforms on interactive cards (
.glow-card,.kpi-card,.settings-card,.feature-card)This addresses accessibility concerns for users who prefer reduced motion.
564-583: Animated border overlay is now pointer-event inert.The
pointer-events: noneon line 567 ensures the::beforepseudo-element won't intercept clicks or hovers on interactive elements using.border-gradient-animated.web/src/components/dashboard/health-cards.tsx (3)
33-37: Well-structured ping tier styling withpingBgutility.The new
pingBgfunction provides consistent background + text color combinations for the ping indicator icon, including proper dark mode variants. This complements the existingpingColorfunction for text-only coloring.
206-232: CPU metric now clearly labeled as lifetime average.The card title "CPU (avg since start)" (line 213) correctly communicates that this is a cumulative metric rather than real-time utilization. The supporting text showing user/sys seconds provides additional transparency. This addresses the previous concern about the progress bar being misleading.
81-250: Consistent KPI card styling with visual enhancements.The cards now use the shared
kpi-card rounded-2xlpattern with:
- Colored icon containers sized consistently at
h-7 w-7- Gradient progress bars for Memory and CPU
stagger-fade-infor entrance animationtracking-tighton value spans for tighter typographyThe optional chaining for error card styling (lines 180, 199) has been applied as suggested in previous reviews.
railway-app
bot
temporarily deployed
to
volvox-bot / volvox-bot-pr-332
railway-app
bot
temporarily deployed
to
volvox-bot / volvox-bot-pr-332
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 48 out of 53 changed files in this pull request and generated 1 comment.
Files not reviewed (1)
- web/pnpm-lock.yaml: Language not supported
Comments suppressed due to low confidence (1)
web/pnpm-lock.yaml:55
- This lockfile updates core framework/tooling versions (e.g., Next.js and Tailwind patch bumps). Since the PR description is about dashboard visuals, please confirm these dependency upgrades are intentional and not incidental (otherwise consider separating them to keep UI changes and dependency changes independently reviewable).
| .glass { | ||
| background: hsl(var(--card) / 0.6); | ||
| -webkit-backdrop-filter: blur(16px) saturate(1.5); | ||
| backdrop-filter: blur(16px) saturate(1.5); | ||
| border: 1px solid hsl(var(--border) / 0.5); |
There was a problem hiding this comment.
In .glass, -webkit-backdrop-filter is declared twice with different values; the first declaration is immediately overridden. This makes the intent unclear and may cause inconsistent rendering between browsers—remove the duplicate and keep the intended single value (and ensure it matches the non-webkit backdrop-filter).
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/tests/components/layout/server-selector.test.tsx (1)
77-81:⚠️ Potential issue | 🟡 MinorReplace double quotes with single quotes.
Lines 78-79 use double quotes for string literals, violating the coding guideline that requires single quotes for all strings in TypeScript files (double quotes are only allowed in JSON files). As per coding guidelines, use single quotes for strings.
🔧 Proposed fix
- expect(screen.getByRole('link', { name: /Invite Volvox\.Bot/i })).toHaveAttribute( - "href", - expect.stringContaining("client_id=discord-client-id"), - ); + expect(screen.getByRole('link', { name: /Invite Volvox\.Bot/i })).toHaveAttribute( + 'href', + expect.stringContaining('client_id=discord-client-id'), + );🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/tests/components/layout/server-selector.test.tsx` around lines 77 - 81, In server-selector.test.tsx update the expect assertion to use single-quoted string literals: replace the double-quoted "href" and the double-quoted argument to expect.stringContaining("client_id=discord-client-id") with 'href' and 'client_id=discord-client-id' respectively so the screen.getByRole(...), expect.toHaveAttribute(...) and expect.stringContaining(...) calls follow the project's TypeScript string quoting rule.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/src/app/globals.css`:
- Around line 502-515: Add explicit dark-mode variants for the enabled feature
card styles to ensure consistent visuals: add rules for .dark
.feature-card[data-enabled="true"] and .dark
.feature-card[data-enabled="true"]::before that override border-color and the
::before gradient (use darker/adjusted hsl values or opacity appropriate for
dark backgrounds and ensure contrast with --primary and --neon-cyan variables).
Update the border-color override and the ::before background gradient to
darker/lower-brightness hues (or use hsla with reduced alpha) so the accent
remains visible but not overly bright in dark theme, and ensure the ::before
border-radius and positioning are preserved. Ensure these selectors match the
existing .feature-card[data-enabled="true"] and ::before rules so they take
precedence when .dark is present.
In `@web/src/components/dashboard/page-header.tsx`:
- Around line 30-33: Run visual checks and add snapshot/contrast tests for the
PageHeader component (web/src/components/dashboard/page-header.tsx) to verify
text and action contrast under both light and dark themes with the new
translucent layers (the spans using bg-background/60, blur classes, and the
shimmer span). Specifically, render the PageHeader with both theme contexts,
capture snapshots or use an accessibility contrast checker for elements nearby
the spans (the absolute inset-y-0 left-0 gradient span and the -right-20 -top-20
shimmer span referenced in the diff and the similar elements around lines
51-53), and if contrast fails, adjust the translucent backgrounds or text/action
colors until both themes pass. Ensure tests cover both themes and fail if
contrast drops below WCAG AA thresholds.
---
Outside diff comments:
In `@web/tests/components/layout/server-selector.test.tsx`:
- Around line 77-81: In server-selector.test.tsx update the expect assertion to
use single-quoted string literals: replace the double-quoted "href" and the
double-quoted argument to expect.stringContaining("client_id=discord-client-id")
with 'href' and 'client_id=discord-client-id' respectively so the
screen.getByRole(...), expect.toHaveAttribute(...) and
expect.stringContaining(...) calls follow the project's TypeScript string
quoting rule.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: ddd22140-8265-4961-b971-f70b9d738a49
⛔ Files ignored due to path filters (1)
web/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (13)
web/src/app/globals.cssweb/src/components/dashboard/page-header.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/layout/dashboard-title-sync.tsxweb/src/lib/page-titles.tsweb/tests/app/landing.test.tsxweb/tests/components/landing/feature-grid.test.tsxweb/tests/components/landing/hero.test.tsxweb/tests/components/landing/pricing.test.tsxweb/tests/components/landing/stats.test.tsxweb/tests/components/layout/header.test.tsxweb/tests/components/layout/server-selector.test.tsxweb/tests/components/layout/sidebar.test.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: Greptile Review
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,ts,tsx}: Use single quotes for strings (except in JSON files); no double quotes
Always include semicolons at the end of statements
Use 2-space indentation (spaces, not tabs)
Always include trailing commas in multi-line arrays, objects, and function parameters
Maintain a maximum line width of 100 characters
Files:
web/tests/components/layout/header.test.tsxweb/tests/components/layout/sidebar.test.tsxweb/tests/components/landing/pricing.test.tsxweb/src/lib/page-titles.tsweb/tests/components/layout/server-selector.test.tsxweb/tests/components/landing/stats.test.tsxweb/tests/components/landing/feature-grid.test.tsxweb/src/components/layout/dashboard-title-sync.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/page-header.tsxweb/tests/app/landing.test.tsxweb/tests/components/landing/hero.test.tsx
web/tests/**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
web/tests/**/*.test.{ts,tsx}: Write web dashboard tests using Vitest 4 with thejsdomenvironment and React Testing Library, matching theweb/src/structure
Maintain test coverage thresholds of 85% across all metrics (statements, branches, functions, lines) for web dashboard tests
Files:
web/tests/components/layout/header.test.tsxweb/tests/components/layout/sidebar.test.tsxweb/tests/components/landing/pricing.test.tsxweb/tests/components/layout/server-selector.test.tsxweb/tests/components/landing/stats.test.tsxweb/tests/components/landing/feature-grid.test.tsxweb/tests/app/landing.test.tsxweb/tests/components/landing/hero.test.tsx
**/*.{js,ts,tsx,mjs}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,ts,tsx,mjs}: Use ESM syntax (import/export) — CommonJS is not allowed
Use single quotes for strings — double quotes only allowed in JSON files
Always include semicolons at end of statements
Use 2-space indentation for all code
Use Winston logger fromsrc/logger.js— never useconsole.*methods
Files:
web/tests/components/layout/header.test.tsxweb/tests/components/layout/sidebar.test.tsxweb/tests/components/landing/pricing.test.tsxweb/src/lib/page-titles.tsweb/tests/components/layout/server-selector.test.tsxweb/tests/components/landing/stats.test.tsxweb/tests/components/landing/feature-grid.test.tsxweb/src/components/layout/dashboard-title-sync.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/page-header.tsxweb/tests/app/landing.test.tsxweb/tests/components/landing/hero.test.tsx
web/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never use
console.*methods in web dashboard code; use appropriate logging mechanisms for React applications
Files:
web/src/lib/page-titles.tsweb/src/components/layout/dashboard-title-sync.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/page-header.tsx
🧠 Learnings (13)
📓 Common learnings
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Verify both dark and light themes when making dashboard color or theming changes
📚 Learning: 2026-03-10T23:21:49.730Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-10T23:21:49.730Z
Learning: Applies to web/src/components/layout/dashboard-shell.tsx : Dashboard page titles should sync with route changes using DashboardTitleSync component mounted in dashboard-shell.tsx and canonical title string 'Volvox.Bot - AI Powered Discord Bot'
Applied to files:
web/tests/components/layout/header.test.tsxweb/tests/components/layout/sidebar.test.tsxweb/src/lib/page-titles.tsweb/tests/components/layout/server-selector.test.tsxweb/tests/components/landing/feature-grid.test.tsxweb/src/components/layout/dashboard-title-sync.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/page-header.tsxweb/tests/app/landing.test.tsxweb/tests/components/landing/hero.test.tsx
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Applies to web/src/app/**/*.{ts,tsx} : Use `DashboardTitleSync` component and `getDashboardDocumentTitle()` for client-side navigation title updates in the dashboard
Applied to files:
web/tests/components/layout/header.test.tsxweb/tests/components/layout/sidebar.test.tsxweb/src/lib/page-titles.tsweb/tests/components/landing/stats.test.tsxweb/src/components/layout/dashboard-title-sync.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/page-header.tsx
📚 Learning: 2026-03-12T02:03:36.493Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-03-12T02:03:36.493Z
Learning: Applies to web/tests/**/*.test.{ts,tsx} : Write web dashboard tests using Vitest 4 with the `jsdom` environment and React Testing Library, matching the `web/src/` structure
Applied to files:
web/tests/components/layout/header.test.tsxweb/tests/components/layout/sidebar.test.tsxweb/tests/components/landing/stats.test.tsxweb/tests/components/landing/feature-grid.test.tsxweb/tests/app/landing.test.tsxweb/tests/components/landing/hero.test.tsx
📚 Learning: 2026-03-12T02:03:36.493Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-03-12T02:03:36.493Z
Learning: Applies to web/src/app/dashboard/**/*.tsx : For dashboard routes, add a matcher entry to `dashboardTitleMatchers` in `web/src/lib/page-titles.ts`: use exact equality for leaf routes (`pathname === '/dashboard/my-route'`) and subtree checks (`pathname.startsWith('/dashboard/my-route/')`); export `metadata` using `createPageMetadata(title)` for SSR entry points
Applied to files:
web/tests/components/layout/sidebar.test.tsxweb/src/lib/page-titles.tsweb/src/components/layout/dashboard-title-sync.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/page-header.tsx
📚 Learning: 2026-03-12T02:03:36.493Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-03-12T02:03:36.493Z
Learning: Applies to web/tests/**/*.test.{ts,tsx} : Maintain test coverage thresholds of 85% across all metrics (statements, branches, functions, lines) for web dashboard tests
Applied to files:
web/tests/components/layout/sidebar.test.tsxweb/tests/components/landing/stats.test.tsxweb/tests/components/landing/feature-grid.test.tsx
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Add a matcher entry to `dashboardTitleMatchers` in `web/src/lib/page-titles.ts` for every new dashboard route
Applied to files:
web/src/lib/page-titles.tsweb/src/components/layout/dashboard-title-sync.tsx
📚 Learning: 2026-03-11T06:42:38.728Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-11T06:42:38.728Z
Learning: Applies to web/src/pages/dashboard/**/*.{ts,tsx} : Use shared title helpers from web/src/lib/page-titles.ts for setting browser titles in dashboard pages
Applied to files:
web/src/lib/page-titles.tsweb/src/components/layout/dashboard-title-sync.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/page-header.tsx
📚 Learning: 2026-03-11T05:32:46.325Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-11T05:32:46.325Z
Learning: Applies to web/src/app/**/*.{ts,tsx} : Apply static metadata to server-rendered dashboard entry pages and use title template format for root app metadata
Applied to files:
web/src/lib/page-titles.tsweb/src/components/layout/dashboard-title-sync.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/page-header.tsx
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Applies to web/src/app/**/*.{ts,tsx} : Export `metadata` using `createPageMetadata()` from `web/src/lib/page-titles.ts` in SSR entry points for dashboard pages
Applied to files:
web/src/lib/page-titles.tsweb/src/components/layout/dashboard-title-sync.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/page-header.tsx
📚 Learning: 2026-03-10T23:21:49.730Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-10T23:21:49.730Z
Learning: Applies to web/src/components/dashboard/config-workspace/**/*.{ts,tsx} : Web dashboard config editor should use category workspace navigation with reusable SettingsFeatureCard pattern (header + master toggle + Basic/Advanced blocks)
Applied to files:
web/src/lib/page-titles.tsweb/src/components/layout/dashboard-shell.tsxweb/src/components/dashboard/page-header.tsx
📚 Learning: 2026-03-12T02:03:36.493Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-03-12T02:03:36.493Z
Learning: Applies to web/src/**/*.{ts,tsx} : Never use `console.*` methods in web dashboard code; use appropriate logging mechanisms for React applications
Applied to files:
web/src/components/layout/dashboard-shell.tsx
📚 Learning: 2026-03-12T02:03:52.709Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-12T02:03:52.709Z
Learning: Verify both dark and light themes when making dashboard color or theming changes
Applied to files:
web/src/app/globals.css
🔇 Additional comments (27)
web/tests/components/landing/pricing.test.tsx (2)
67-70: Good accessibility-aligned CTA assertion update.This matches the current Free-tier CTA label and verifies the expected external target correctly.
72-75: Paid CTA disabled-state coverage remains correct.These updated labels align with current tier CTAs and preserve the intended no-invite-url behavior check.
web/tests/components/layout/server-selector.test.tsx (1)
67-82: LGTM! Test now correctly matches the component.The updated assertion now expects
Invite Volvox.Bot, which correctly matches the hardcoded bot name in theServerSelectorcomponent. The regex properly escapes the dot character and uses case-insensitive matching.web/src/lib/page-titles.ts (1)
56-60: LGTM!The new matcher correctly handles both the exact
/dashboard/configroute and its sub-routes using the established pattern. This aligns with the retrieved learnings requiring a matcher entry for every new dashboard route.web/src/components/layout/dashboard-title-sync.tsx (1)
31-39: LGTM!The simplified guard logic correctly handles all scenarios:
- Respects page-level metadata on first sync (
lastSyncedPathname === null)- Preserves specific titles on same-page re-renders (
pathname === lastSyncedPathname)- Updates title on navigation (guard fails when
pathname !== lastSyncedPathname)The
current !== APP_TITLEcheck ensures the default title is still overwritten when appropriate.web/src/components/dashboard/page-header.tsx (2)
4-11: Type-onlyReactNodeprop refactor looks good.This keeps typing explicit while avoiding unnecessary runtime React namespace usage.
37-42: Icon container update is clean and improves visual consistency.The wrapped icon treatment is clear and keeps the decorative icon correctly hidden from assistive tech.
web/tests/components/layout/header.test.tsx (1)
46-46: LGTM!The test expectation correctly updated to match the new brand name rendered in the header component.
web/tests/components/landing/stats.test.tsx (1)
85-87: LGTM!Good improvement switching to
getByRole('heading', ...)— this follows React Testing Library best practices by querying semantic accessibility roles rather than raw text, making the test more resilient to markup changes.web/tests/components/layout/sidebar.test.tsx (1)
27-27: LGTM!Test assertion correctly updated to match the new
.sidebar-item-activeCSS class applied to active navigation items in the sidebar component.web/tests/app/landing.test.tsx (3)
14-14: LGTM!Adding the
AnimatePresencemock ensures content wrapped in animation presence components renders correctly during tests.
41-42: LGTM!Using a case-insensitive regex makes the assertion more resilient to text formatting changes while still verifying the brand presence.
79-79: LGTM!Consistent with other test updates in this PR, using
getByRole('heading', ...)follows RTL best practices.web/tests/components/landing/feature-grid.test.tsx (2)
53-54: LGTM!The reduced motion test correctly asserts the partial slogan and verifies exactly 4 level-3 headings, which matches the 4 features defined in the
featuresarray per the provided context snippet.
42-45: No issues found. The assertion on line 45 correctly matches the text in the FeatureGrid component ("Built by developers who actually use Discord. No bloat, no fluff."), and the regex pattern is valid. All code style requirements are met.web/tests/components/landing/hero.test.tsx (3)
16-16: LGTM!Consistent
AnimatePresencemock pattern across test files.
51-59: LGTM!The timer adjustment to
2_000mscorrectly accounts for theuseTypewriterhook's 500ms delay plus typing duration. The updated assertions match the component's actual rendered content per the provided context snippets.
43-43: Remove misleading context about typewriter timing.The assertion correctly checks that the badge text exists in the document, but the explanation is incorrect. The "Building the future of Discord communities" text is a static badge that renders immediately—it's not part of the typewriter effect. The typewriter effect applies only to the h1 headline ("volvox-bot"), and the
.terminal-cursorreferenced in line 46 belongs to that h1 element. The test correctly verifies both elements exist in the initial render state.web/src/components/layout/dashboard-shell.tsx (2)
1-1: LGTM!Good use of
import typefor type-only imports — this improves build-time tree-shaking.Also applies to: 8-8
24-34: LGTM!The styling refinements (narrower sidebar, adjusted gradients, subtle border opacity) and addition of
scrollbar-thinfor custom scrollbar styling align with the PR's visual enhancement goals. Thescrollbar-thinclass is properly defined inglobals.css.web/src/app/globals.css (7)
57-84: LGTM!The extended neon palette variables (
--neon-green,--neon-purple,--neon-cyan,--neon-orange,--surface-glow) are well-defined with appropriate light mode values.
100-141: LGTM!Dark mode theme tokens are properly defined with richer, deeper values and corresponding neon palette adjustments. Based on learnings, both light and dark themes have been verified for the dashboard color/theming changes.
287-336: Mouse tracking for glow effect is now implemented.Per the AI summary, the
--mouse-xand--mouse-yCSS variables used in the radial gradient are now set by theuseGlowCardhook inweb/src/hooks/use-glow-card.ts. This addresses the previous concern about the mouse-tracking effect being non-functional.
564-583: LGTM!The
pointer-events: noneon line 567 properly makes the animated border overlay inert, preventing it from stealing hover/click events from interactive elements.
650-701: LGTM!Comprehensive reduced-motion handling that disables keyframe animations and hover transforms for all new interactive card classes (
.glow-card,.kpi-card,.settings-card,.feature-card). This ensures accessibility compliance for users who prefer reduced motion.
705-717: LGTM!The duplicate
-webkit-backdrop-filterdeclaration has been resolved. Both light and dark glass variants are properly defined with appropriate saturation values.
721-742: LGTM!Clean scrollbar styling utility with proper vendor prefix coverage for WebKit browsers and standard
scrollbar-width/scrollbar-colorproperties for Firefox.
| .feature-card[data-enabled="true"] { | ||
| border-color: hsl(var(--primary) / 0.2); | ||
| } | ||
|
|
||
| .feature-card[data-enabled="true"]::before { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 3px; | ||
| height: 100%; | ||
| background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--neon-cyan))); | ||
| border-radius: 3px 0 0 3px; | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider adding a dark mode variant for the enabled feature card state.
The .feature-card[data-enabled="true"] selector defines border and accent colors, but there's no .dark .feature-card[data-enabled="true"] variant. While the current colors may work acceptably in dark mode, adding explicit dark variants would ensure consistent visual polish across themes.
♻️ Suggested dark mode variant
.feature-card[data-enabled="true"]::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--neon-cyan)));
border-radius: 3px 0 0 3px;
}
+
+.dark .feature-card[data-enabled="true"] {
+ border-color: hsl(var(--primary) / 0.25);
+}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@web/src/app/globals.css` around lines 502 - 515, Add explicit dark-mode
variants for the enabled feature card styles to ensure consistent visuals: add
rules for .dark .feature-card[data-enabled="true"] and .dark
.feature-card[data-enabled="true"]::before that override border-color and the
::before gradient (use darker/adjusted hsl values or opacity appropriate for
dark backgrounds and ensure contrast with --primary and --neon-cyan variables).
Update the border-color override and the ::before background gradient to
darker/lower-brightness hues (or use hsla with reduced alpha) so the accent
remains visible but not overly bright in dark theme, and ensure the ::before
border-radius and positioning are preserved. Ensure these selectors match the
existing .feature-card[data-enabled="true"] and ::before rules so they take
precedence when .dark is present.
| <span className="pointer-events-none absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-primary via-primary/60 to-secondary/70" /> | ||
|
|
||
| {/* Subtle background shimmer */} | ||
| <span className="pointer-events-none absolute -right-20 -top-20 h-40 w-40 rounded-full bg-primary/5 blur-3xl" /> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Verify dark/light readability with the new glass/translucent layers.
Please run a quick visual check (or snapshot test) for both themes to confirm text/action contrast remains strong with bg-background/60, blur, and shimmer overlays.
Based on learnings, Verify both dark and light themes when making dashboard color or theming changes.
Also applies to: 51-53
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@web/src/components/dashboard/page-header.tsx` around lines 30 - 33, Run
visual checks and add snapshot/contrast tests for the PageHeader component
(web/src/components/dashboard/page-header.tsx) to verify text and action
contrast under both light and dark themes with the new translucent layers (the
spans using bg-background/60, blur classes, and the shimmer span). Specifically,
render the PageHeader with both theme contexts, capture snapshots or use an
accessibility contrast checker for elements nearby the spans (the absolute
inset-y-0 left-0 gradient span and the -right-20 -top-20 shimmer span referenced
in the diff and the similar elements around lines 51-53), and if contrast fails,
adjust the translucent backgrounds or text/action colors until both themes pass.
Ensure tests cover both themes and fail if contrast drops below WCAG AA
thresholds.
🧹 Preview Environment Cleaned UpThe Railway preview environment for this PR has been removed. Environment: |
Summary
This PR significantly enhances the visual design of the dashboard with a vibrant, modern aesthetic. It introduces an extended color palette with neon accents, implements glass morphism effects, adds sophisticated card hover states, and includes new animation utilities for a more polished user experience.
Key Changes
Color System & Theming
--neon-green,--neon-purple,--neon-cyan,--neon-orange, and--surface-glowGlass Morphism & Card Effects
backdrop-filter: blur(12px)to dashboard panels for modern glass effect.glow-cardcomponent with mouse-tracking radial gradient hover effect.kpi-cardwith gradient top accent bar and smooth hover animations.settings-cardwith gradient accent bar and elevated hover state.feature-cardwith enabled state indicator and left accent barVisual Enhancements
.neon-pulseanimation for live status indicators with breathing effect.status-dot-livewith pulsing ring animation for real-time status.sidebar-item-activewith gradient background and glow shadow.text-gradient-primaryand.text-gradient-vibrant.border-gradient-animatedwith rotating gradient border animationDashboard Components
Navigation & Layout
Utility Classes
.glassutility for consistent glass morphism styling.scrollbar-thinfor custom scrollbar styling.stagger-fade-infor sequential animation of child elementsSettings & Config UI
Implementation Details
cubic-beziertiming functions for smooth, natural motionbackdrop-filterwith semi-transparent backgroundshttps://claude.ai/code/session_01Eer2XPpLwj8YbifrSdUBoc