Update dashboard tab titles to use shared suffix#262
Conversation
railway-app
bot
temporarily deployed
to
volvox-bot / volvox-bot-pr-262
|
🚅 Deployed to the volvox-bot-pr-262 environment in volvox-bot
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
📜 Recent review details⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
🧰 Additional context used📓 Path-based instructions (2)**/*.{js,mjs,jsx,ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
web/**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (4)📓 Common learnings📚 Learning: 2026-03-07T15:34:56.495ZApplied to files:
📚 Learning: 2026-03-07T15:34:56.495ZApplied to files:
📚 Learning: 2026-03-05T18:07:15.752ZApplied to files:
🔇 Additional comments (2)
📝 WalkthroughSummary by CodeRabbit
WalkthroughThis change centralizes dashboard page title handling via a new page-titles utility, adds server-rendered metadata for dashboard routes, and introduces a client-side DashboardTitleSync component to keep the browser document title in sync with the current dashboard route. Layout and dashboard pages are updated to use the shared helpers; tests and docs added. 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 unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Claude finished @BillChirico's task in 3m 58s —— View job Code Review PR #262
Issues1. AGENTS.md not updated for new files and patternsFile: Two new files introduce a pattern that future developers need to be aware of when adding dashboard routes:
Per project rules, AGENTS.md must be updated when new files or patterns are added. The "Adding a New Feature" section (step 7) and the Web Dashboard section should document that new routes require a matcher entry in 2. Leaf-route matchers missing trailing path boundaryFile: The detail-route matchers correctly use a trailing slash to bound the match: matches: (pathname) => pathname.startsWith('/dashboard/members/'), // correctThe leaf-route (section) matchers do not: matches: (pathname) => pathname.startsWith('/dashboard/ai'), // line 36
matches: (pathname) => pathname.startsWith('/dashboard/moderation'), // line 28
matches: (pathname) => pathname.startsWith('/dashboard/logs'), // line 64
matches: (pathname) => pathname.startsWith('/dashboard/settings'), // line 68
matches: (pathname) => pathname.startsWith('/dashboard/temp-roles'), // line 32
matches: (pathname) => pathname.startsWith('/dashboard/audit-log'), // line 56
matches: (pathname) => pathname.startsWith('/dashboard/performance'),// line 60
3.
|
|
| Filename | Overview |
|---|---|
| web/src/lib/page-titles.ts | New helper module for dashboard title logic. Core logic is sound but section-level startsWith matchers lack a path-segment boundary (no trailing slash), making them susceptible to false positives as the route table grows. |
| web/src/components/layout/dashboard-title-sync.tsx | Minimal client component that syncs document.title on pathname change via useEffect. Correct implementation of the 'use client' boundary and dependency array. |
| web/src/app/layout.tsx | Root layout correctly switches from a static title string to a Next.js title template object, enabling per-route suffix composition for SSR entry points. |
| web/tests/lib/page-titles.test.ts | Happy-path coverage is solid, but the normalizePathname trailing-slash branch is never exercised, and null/undefined edge cases for formatDocumentTitle are absent. |
| web/tests/components/layout/dashboard-title-sync.test.tsx | Good coverage for initial mount, route change, and unknown-route fallback. The module-level mutable mockPathname pattern is a reasonable workaround for mocking usePathname in Vitest. |
| web/src/components/layout/dashboard-shell.tsx | Correctly mounts DashboardTitleSync as the first child; importing a client component into a server component is valid in the Next.js App Router model. |
| web/src/app/dashboard/config/page.tsx | Switches to createPageMetadata helper; relies on root layout template for the full suffix, which is consistent with the new approach. |
| web/src/app/dashboard/page.tsx | Adds previously absent metadata export for the dashboard overview route via createPageMetadata. |
| web/src/app/dashboard/performance/page.tsx | Adds previously absent metadata export for the performance route via createPageMetadata. |
| web/tests/components/layout/dashboard-shell.test.tsx | Adds a mock for DashboardTitleSync and verifies it renders. Also normalizes quotes to single quotes throughout the file. |
Sequence Diagram
sequenceDiagram
participant Browser
participant Next.js SSR
participant RootLayout
participant DashboardShell
participant DashboardTitleSync
participant page-titles.ts
Note over Browser,page-titles.ts: Direct page load (SSR path)
Browser->>Next.js SSR: GET /dashboard/members
Next.js SSR->>RootLayout: Apply title template "%s - Volvox.Bot - AI Powered Discord Bot"
RootLayout->>Next.js SSR: metadata.title = { default: APP_TITLE, template }
Next.js SSR->>Browser: <title>Members - Volvox.Bot - AI Powered Discord Bot</title>
Note over Browser,page-titles.ts: Client-side navigation (SPA path)
Browser->>DashboardShell: Route change to /dashboard/config
DashboardShell->>DashboardTitleSync: renders (pathname changes)
DashboardTitleSync->>page-titles.ts: getDashboardDocumentTitle('/dashboard/config')
page-titles.ts->>page-titles.ts: normalizePathname → match dashboardTitleMatchers
page-titles.ts-->>DashboardTitleSync: "Bot Config - Volvox.Bot - AI Powered Discord Bot"
DashboardTitleSync->>Browser: document.title = "Bot Config - Volvox.Bot - AI Powered Discord Bot"
Last reviewed commit: 5a4c733
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/tests/components/layout/dashboard-shell.test.tsx`:
- Around line 9-11: The test mock uses double-quoted string literals; change
them to single quotes to follow the project's quoting style. Update the vi.mock
call for '@/components/layout/dashboard-title-sync', the exported property name
'DashboardTitleSync', and the JSX data-testid value 'dashboard-title-sync' to
use single quotes (locate the vi.mock invocation and the DashboardTitleSync
stub).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 963a9183-248d-463b-97bd-67a7162f14c2
📒 Files selected for processing (11)
CLAUDE.mdweb/src/app/dashboard/config/page.tsxweb/src/app/dashboard/page.tsxweb/src/app/dashboard/performance/page.tsxweb/src/app/layout.tsxweb/src/components/layout/dashboard-shell.tsxweb/src/components/layout/dashboard-title-sync.tsxweb/src/lib/page-titles.tsweb/tests/components/layout/dashboard-shell.test.tsxweb/tests/components/layout/dashboard-title-sync.test.tsxweb/tests/lib/page-titles.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: claude-review
- GitHub Check: Docker Build Validation
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{js,mjs,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,mjs,jsx,ts,tsx}: Use single quotes for strings in code, double quotes only allowed in JSON files
Always end statements with semicolons
Use 2-space indentation, enforced by Biome
Files:
web/src/app/layout.tsxweb/src/components/layout/dashboard-title-sync.tsxweb/src/app/dashboard/page.tsxweb/tests/components/layout/dashboard-title-sync.test.tsxweb/tests/components/layout/dashboard-shell.test.tsxweb/src/app/dashboard/performance/page.tsxweb/tests/lib/page-titles.test.tsweb/src/lib/page-titles.tsweb/src/components/layout/dashboard-shell.tsxweb/src/app/dashboard/config/page.tsx
web/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Next.js 16 web dashboard uses App Router with Discord OAuth2 authentication, dark/light theme support, and mobile-responsive design
Files:
web/src/app/layout.tsxweb/src/components/layout/dashboard-title-sync.tsxweb/src/app/dashboard/page.tsxweb/tests/components/layout/dashboard-title-sync.test.tsxweb/tests/components/layout/dashboard-shell.test.tsxweb/src/app/dashboard/performance/page.tsxweb/tests/lib/page-titles.test.tsweb/src/lib/page-titles.tsweb/src/components/layout/dashboard-shell.tsxweb/src/app/dashboard/config/page.tsx
🧠 Learnings (8)
📓 Common learnings
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-05T18:07:15.752Z
Learning: Applies to web/**/*.{ts,tsx} : Next.js 16 web dashboard uses App Router with Discord OAuth2 authentication, dark/light theme support, and mobile-responsive design
📚 Learning: 2026-03-05T18:07:15.752Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-05T18:07:15.752Z
Learning: Applies to web/**/*.{ts,tsx} : Next.js 16 web dashboard uses App Router with Discord OAuth2 authentication, dark/light theme support, and mobile-responsive design
Applied to files:
web/src/app/layout.tsxweb/src/components/layout/dashboard-title-sync.tsxweb/src/app/dashboard/page.tsxweb/tests/components/layout/dashboard-title-sync.test.tsxweb/src/app/dashboard/performance/page.tsxCLAUDE.mdweb/src/lib/page-titles.ts
📚 Learning: 2026-03-07T15:34:56.495Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-07T15:34:56.495Z
Learning: Applies to web/src/components/dashboard/config-workspace/**/*.{js,jsx,ts,tsx} : Config editor must implement metadata-driven config search with cross-category quick jump, focus/scroll targeting, and auto-open advanced sections when search hits advanced controls
Applied to files:
web/src/app/dashboard/page.tsxCLAUDE.mdweb/src/app/dashboard/config/page.tsx
📚 Learning: 2026-03-07T15:34:56.495Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-07T15:34:56.495Z
Learning: Applies to web/src/components/dashboard/config-workspace/**/*.{js,jsx,ts,tsx} : Web dashboard config editor must use category workspace navigation with categories: `AI & Automation`, `Onboarding & Growth`, `Moderation & Safety`, `Community Tools`, `Support & Integrations` located in `web/src/components/dashboard/config-workspace/`
Applied to files:
web/src/app/dashboard/page.tsxweb/tests/components/layout/dashboard-title-sync.test.tsxCLAUDE.mdweb/src/app/dashboard/config/page.tsx
📚 Learning: 2026-03-07T15:34:56.495Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-07T15:34:56.495Z
Learning: Applies to web/src/components/dashboard/config-workspace/**/*.test.{js,jsx,ts,tsx} : Config editor tests must cover manual-save workspace behavior (not autosave assumptions), category switching, search functionality, and dirty badges
Applied to files:
web/tests/components/layout/dashboard-title-sync.test.tsxweb/tests/components/layout/dashboard-shell.test.tsxCLAUDE.mdweb/tests/lib/page-titles.test.ts
📚 Learning: 2026-03-05T18:07:15.752Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-05T18:07:15.752Z
Learning: Before starting any coding session, read `CLAUDE.md` for coding standards and persona; after infrastructure work, update `CLAUDE.md` with technical decisions and session notes
Applied to files:
CLAUDE.md
📚 Learning: 2026-03-07T15:34:56.495Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-07T15:34:56.495Z
Learning: Applies to web/src/components/dashboard/config-workspace/**/*.{js,jsx,ts,tsx} : Refactor config feature presentation to use reusable `SettingsFeatureCard` pattern with structure: header + master toggle + Basic/Advanced blocks
Applied to files:
CLAUDE.mdweb/src/components/layout/dashboard-shell.tsxweb/src/app/dashboard/config/page.tsx
📚 Learning: 2026-03-07T15:34:56.495Z
Learnt from: CR
Repo: VolvoxLLC/volvox-bot PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-03-07T15:34:56.495Z
Learning: Applies to web/src/components/dashboard/config-workspace/**/*.{js,jsx,ts,tsx} : Config editor save contract must maintain: global save/discard, diff-modal confirmation, per-section PATCH batching, and partial-failure behavior
Applied to files:
CLAUDE.mdweb/src/app/dashboard/config/page.tsx
🔇 Additional comments (15)
CLAUDE.md (1)
27-34: LGTM!The session notes accurately document the dashboard title synchronization changes, including the shared title helpers, client-side sync component, server metadata additions, and test coverage locations. This provides valuable context for future maintenance.
web/src/components/layout/dashboard-title-sync.tsx (1)
1-15: LGTM!Clean implementation of a side-effect-only component. The
useEffectcorrectly depends onpathname, ensuringdocument.titleupdates on every route change. Returningnullis the appropriate pattern for components that only produce side effects.web/tests/components/layout/dashboard-shell.test.tsx (1)
30-31: LGTM on the assertion logic.The test correctly verifies that
DashboardTitleSyncis rendered as part of theDashboardShellcomposition.web/src/components/layout/dashboard-shell.tsx (2)
1-1: LGTM!Import is correctly placed and uses relative path for the sibling component.
15-19: LGTM!Rendering
DashboardTitleSyncas the first child is appropriate since it returnsnulland only produces side effects. Server components can safely render client components as children in Next.js App Router.web/tests/lib/page-titles.test.ts (1)
1-38: LGTM!Comprehensive test coverage for the page title utilities:
- Tests the title formatting with suffix.
- Covers known routes, dynamic routes with IDs (
/dashboard/members/123), and unknown route fallback.- Validates metadata creation with optional descriptions.
The test cases align well with the implementation patterns documented in the context snippets.
web/src/app/layout.tsx (2)
4-4: LGTM!Centralizing
APP_TITLEimport ensures consistency across metadata and client-side title updates.
17-21: LGTM!The title template pattern is correctly configured for Next.js App Router metadata. The
%splaceholder will be replaced with child page titles, ensuring consistent formatting like "Performance - Volvox.Bot - AI Powered Discord Bot" across all pages.web/src/app/dashboard/performance/page.tsx (1)
1-8: LGTM!Correctly uses
createPageMetadatahelper for consistent metadata generation. The title "Performance" will be combined with the root layout template, and the description provides useful SEO context.web/tests/components/layout/dashboard-title-sync.test.tsx (1)
1-53: LGTM!Well-structured test suite covering the key behaviors:
- Setting title from current route on mount.
- Updating title when pathname changes (via rerender with updated mock).
- Falling back to
APP_TITLEfor unknown routes.The mock pattern using a module-level
mockPathnamevariable that's reset inbeforeEachprovides good test isolation while allowing route change simulation through mutation + rerender.web/src/app/dashboard/config/page.tsx (1)
3-8: LGTM!The metadata is correctly centralized using
createPageMetadata. The title 'Bot Config' aligns with the route matcher defined inpage-titles.ts, ensuring consistent title handling across SSR and client-side navigation.web/src/app/dashboard/page.tsx (1)
1-9: LGTM!The metadata is correctly centralized using
createPageMetadata. The 'Overview' title properly corresponds to the/dashboardroute matcher, maintaining consistency with the title synchronization system.web/src/lib/page-titles.ts (3)
10-71: LGTM!The matcher array is correctly ordered with specific routes (e.g.,
/dashboard/members/for detail pages) listed before their parent routes (e.g.,/dashboard/membersfor the list view). Combined withnormalizePathnamestripping trailing slashes, this ensures accurate title resolution.
73-81: LGTM!The
normalizePathnamefunction correctly handles edge cases: null/undefined inputs return null, trailing slashes are stripped (except for root '/'), and the fallback ensures a valid path is always returned when input is truthy.
83-110: LGTM!The utility functions are well-composed with clear single responsibilities.
createPageMetadataproduces minimal metadata objects, and the title formatting functions properly chain together for consistent document title generation.
railway-app
bot
temporarily deployed
to
volvox-bot / volvox-bot-pr-262
🧹 Preview Environment Cleaned UpThe Railway preview environment for this PR has been removed. Environment: |
Summary:
DashboardTitleSynchook so both SSR entry points and SPA tab switches stay in sync.Key Changes:
web/src/lib/page-titles.tsplus helper metadata wrappers to encapsulate the canonical app title suffix and per-route mappings.DashboardTitleSync, ensuringdocument.titlefollows the new helpers on client navigation, and adjusted metadata for dashboard entry pages.web/tests/lib/page-titles.test.tsandweb/tests/components/layout/dashboard-title-sync.test.tsxto guard formatting and runtime sync.Impact:
Testing:
Structure: Use the following format:
• Title: A concise title following Conventional Commits.
• Summary: A high-level overview (2-3 sentences) of the purpose of these changes.
• Key Changes: A bulleted list of the most important logic or architectural changes.
• Impact: Briefly mention if this affects any downstream services or UI components.
• Testing: List the steps taken to verify the changes (e.g., Unit tests, manual verification).
Context: If I provide a git diff, focus on the logic changes. Ignore noise like whitespace changes, dependency lockfile updates, or minor linting fixes unless they are the primary focus.
Tone: Professional, objective, and technical. Avoid flowery language
Emoji Usage & Professionalism:⚠️ for warnings or technical debt.
• Minimalist Approach: Use emojis only for functional status indicators, never for decoration.
• Forbidden: No emojis in PR titles, commit messages, or headers. No "decorative" emojis (e.g., 🚀, ✨, 🤖, 💻).
• Allowed: Only use emojis to denote status in lists or tables, specifically:
• ✅ for passed tests/requirements.
• ❌ for failures or bugs.
•
• 💡 for optional suggestions/refactors.
• Text-First: If an emoji is used, it must be followed by clear text. Never use an emoji to replace a word.