feat: add modular layouts system with 5 production-ready variants #30
Conversation
- Replace hardcoded localhost:3000 with window.location.origin - Enables auth to work on any port (3000, 3001, etc.) - Fixes issue when port 3000 is already in use - Maintains SSR compatibility with fallback env var
- Change /todos to /dashboard/todos to match actual route - Fixes 404 error when clicking Todos in navigation - Actual route is in app/dashboard/todos/page.tsx
- Fix buildSystenPrompt → buildSystemPrompt (lines 47, 76) - Fix styleInstructructions → styleInstructions (line 81, 90) - Improves code readability and professionalism
- Replace browser alert() with toast.error() for better UX - Import toast from react-hot-toast (already in dependencies) - Provides non-blocking, styled error notifications - Consistent with rest of application error handling
- Add aria-label="Delete todo" to icon-only button - Improves screen reader accessibility - Follows WCAG 2.1 guidelines for icon buttons - No visual changes
- Validate image files are under 5MB before upload
- Validate only PNG/JPG files are accepted
- Show toast error messages for validation failures
- Reset file input on validation error
- Prevents large file uploads that would fail
- Matches documented limits ("PNG, JPG up to 5MB")
The CLOUDFLARE_R2_URL environment variable already includes the protocol prefix (https://), so prepending another 'https://' results in malformed URLs like 'https://https://...'. This fix removes the hardcoded protocol prefix and uses the env var value directly. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Replace hardcoded D1 database ID in drizzle.config.ts with CLOUDFLARE_D1_DATABASE_ID environment variable for better configurability across different environments. Changes: - Add CLOUDFLARE_D1_DATABASE_ID to .dev.vars.example - Update drizzle.config.ts to use env var instead of hardcoded ID - Document the new env var in README.md with instructions - Add note about copying database_id when creating D1 database This allows developers to easily switch between different databases (dev/staging/prod) without modifying code. Note: wrangler.jsonc still requires the actual database_id value as it doesn't support environment variable interpolation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Add proper handling for Next.js redirect errors in updateTodoAction to match the pattern used in createTodoAction. Without this, redirect() calls from server actions could be incorrectly logged as errors. Changes: - Check if error message is 'NEXT_REDIRECT' before error logging - Re-throw NEXT_REDIRECT errors unchanged to allow proper redirection - Prevents false error logs in console for successful operations This matches the existing pattern in create-todo.action.ts for consistency. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Update createCategory action to return success/error object instead of throwing errors, making it consistent with other mutation actions like deleteTodoAction and updateTodoFieldAction.
Changes:
- create-category.action.ts: Return { success, data?, error? } instead of throwing
- add-category.tsx: Update to handle new response structure without try/catch
- Added authentication error handling for consistency
Benefits:
- Consistent error handling across all non-form mutation actions
- Cleaner client code (no try/catch needed)
- Better error propagation to UI
- Matches established pattern used by delete and update field actions
This brings all programmatic mutations to use the same response pattern, while form actions with redirect() continue to use throw pattern (as required by Next.js).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add complete API reference documentation covering all REST endpoints and server actions. Contents: - REST API Endpoints (2 endpoints) - POST /api/summarize - Text summarization with Workers AI - /api/auth/[...all] - Better Auth endpoints - Server Actions (11 actions) - Authentication: signIn, signUp, signOut - Todos: getAllTodos, getTodoById, create, update, updateField, delete - Categories: getAllCategories, createCategory - Authentication Details - Better Auth configuration - OAuth providers (Google) - Utility functions - Data Models - Todo, Category, User, Session schemas - Validation rules and constraints - Error Handling - API error formats - Server action patterns - Security considerations Each endpoint/action includes: - Purpose and description - Request/response formats with TypeScript types - Authentication requirements - Error conditions and codes - Practical usage examples - Side effects (revalidation, redirects, R2 uploads) Total: 500+ lines of comprehensive API documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Import react-hot-toast for consistent error feedback - Replace alert() with toast.error() on line 35 - Simplify error message to match other components - Consistent with PR ifindev#14 (delete-todo.tsx) Provides professional, non-blocking error notifications when toggling todo completion fails.
- Import react-hot-toast and useRouter - Use toast.promise to show loading/success/error states - Show 'Creating/Updating todo...' during operation - Show success message before redirect - Provides clear user feedback for save operations Enhances UX by confirming successful todo creation/updates before redirect happens.
- Import cookies() in create-todo and update-todo actions - Set 'todo-warning' cookie when R2 upload fails - Create WarningToast component to display cookie-based warnings - Integrate WarningToast into todo-list page - Clear warning cookie after displaying Now users see: 'Image upload failed, but todo was created/updated successfully' when R2 upload fails but todo operation succeeds. Prevents silent failures.
- Add spinning loader icon to submit button during submission - Show specific text when image is being uploaded: - 'Creating with image...' for new todos with images - 'Updating with image...' for editing todos with images - Generic 'Creating...' / 'Updating...' when no image - Disable cancel button during submission - Visual feedback improves UX during potentially slow image uploads Users now see clear indication that image upload is in progress.
Changes: - todo-card.tsx: - text-gray-500/400/600 → text-muted-foreground (with opacity variants) - text-blue-600 → text-primary (image badge) - text-red-600 → text-destructive (overdue indicators) - todo-list.page.tsx: - text-gray-600/500/400 → text-muted-foreground (with opacity variants) Benefits: - Theme-aware: Colors adapt to light/dark mode automatically - Consistent: Uses shadcn/ui semantic color system - Maintainable: Change theme by editing CSS variables - Professional: Avoids arbitrary hard-coded colors Note: Priority/status badge colors (green/yellow/red/etc) kept as-is since they're functional semantic indicators, not UI colors.
- Install next-themes package - Create ThemeProvider component with localStorage persistence - Create ModeToggle cycling button (Light → Dark → System) - Update layout.tsx: - Wrap app with ThemeProvider - Add suppressHydrationWarning to html tag - Replace bg-gray-50 with bg-background - Update navigation.tsx: - Add ModeToggle button next to LogoutButton - Replace bg-white with bg-card - Remove hard-coded text colors **Complete semantic color audit (54 violations fixed):** - dashboard.page.tsx: Replace all gray/blue/green/purple with semantic - todo-card.tsx: text-muted-foreground, text-primary, text-destructive - todo-list.page.tsx: text-muted-foreground variants - delete-todo.tsx: text/bg-destructive for delete actions - todo-form.tsx: border-border, text-primary for upload UI - edit-todo.page.tsx: text-muted-foreground - new-todo.page.tsx: text-muted-foreground Priority/status badge colors kept as-is (semantic data visualization). Dark mode now fully functional with proper theme-aware colors.
- Import dashboardRoutes and todosRoutes for type-safe navigation - Replace hardcoded paths with route constants (dashboardRoutes.dashboard, todosRoutes.list) - Fix dark mode colors: bg-white → bg-card, remove text-gray-900 - Improves maintainability and dark mode support
- Filter out NEXT_REDIRECT errors in toast.promise error handler - NEXT_REDIRECT is Next.js flow control, not an actual error - Fixes interaction issue between PR ifindev#19 and PR ifindev#23
…ry colors - Replace 24 hardcoded color violations in priority/status badges - Use semantic Tailwind colors (bg-muted, bg-accent, bg-primary, etc.) - Add categoryColor to getAllTodos query - Display category badges with actual user-defined colors - Category badges now use inline styles with color from database - Ensures proper light/dark mode support for all badges
- Remove duplicate text input that conflicted with color picker - Both inputs were bound to same form field causing DOM conflict - Now uses single color picker input - Fixes bug where categories wouldn't save with custom colors
- Radix Dialog was closing when native color picker triggered pointer events - Added onPointerDownOutside handler to DialogContent - Prevents dialog closure specifically for color input interactions - Maintains standard dialog behavior for other outside clicks - Fixes: category creation failing when selecting custom colors
- Install react-colorful library - Create custom ColorPicker component using HexColorPicker - ColorPicker uses Popover (stays within Dialog DOM) - Includes both visual picker and hex text input - Remove onPointerDownOutside handler (no longer needed) - Fixes dialog closing issue completely - Better UX with drag-based color selection
- @opennextjs/cloudflare: 1.8.2 → 1.11.1 - wrangler: 4.35.0 → 4.46.0 Upgrading for better Next.js 15 compatibility and bug fixes. Waiting for better-auth Next.js 16 support before upgrading Next.js.
Add comprehensive documentation to make this a production-ready modular starter kit that can be forked and customized for new projects. New Documentation: - MODULES.md: Complete module system guide * Available modules (auth, todos, dashboard) * How to remove a module * How to add a new module * Module best practices and dependencies * Database integration patterns * Type safety and testing - MODULE_TEMPLATE.md: Step-by-step module creation guide * Complete "Invoices" module example * Database schema patterns * Server action patterns (CRUD operations) * Component patterns (list, form, card, delete) * Route setup * Testing checklist - README.md: Updated with modular architecture section * Quick start for new projects * Fork-and-customize workflow * Link to MODULES.md Architecture Approach: - Feature-based modules (industry standard) - Fork-and-customize pattern (same as T3 Stack) - No plugin system needed (avoids 50-100h overhead) - Each module is self-contained and reusable - Simple to copy modules between projects Benefits: - 5 minutes to fork and start new project - Clear patterns for adding features - Easy to remove unwanted modules - Low maintenance burden - Production-tested architecture Generated with Claude Code https://claude.com/claude-code Co-Authored-By: Claude <noreply@anthropic.com>
Add Claude Code-optimized documentation to help AI assistants (and developers) understand the project quickly. Includes: - Project overview and tech stack - Development workflow (two-terminal setup) - Build and deploy process - Manual testing strategy and checklist - Database workflow (schema, migrations, Studio) - Architecture decisions (why modular, why better-auth, why Cloudflare) - Known issues and gotchas (7 documented issues) - Common commands quick reference - File structure reference - Resources and links Key Benefits: - Helps fresh Claude sessions onboard quickly - Documents manual testing approach (no automated tests yet) - Captures tribal knowledge and architectural decisions - Provides deployment verification checklist - Lists all known issues in one place This complements existing docs: - README.md: User-facing setup and deployment - MODULES.md: Module system architecture - MODULE_TEMPLATE.md: How to create features - CLAUDE.md: AI assistant context (this file) Generated with Claude Code https://claude.com/claude-code Co-Authored-By: Claude <noreply@anthropic.com>
Add comprehensive layouts module providing flexible layout options: **Layouts Included:** - Sidebar Layout: Collapsible sidebar for dashboards/CRMs (Cmd+B shortcut) - Top Nav Layout: Horizontal navigation for simple apps - Hybrid Layout: Top header + sidebar for complex SaaS - Centered Layout: Max-width content for docs/blogs - Marketing Layout: Public pages with footer **Features:** - ✅ Full shadcn/ui compliance (Radix UI components) - ✅ Responsive behavior (desktop → tablet → mobile) - ✅ Dark/light theme support - ✅ Cookie state persistence - ✅ Keyboard shortcuts - ✅ Mobile drawer (Sheet component) - ✅ Active route highlighting **Components:** - UserNav: Dropdown with avatar, profile, logout - AppSidebar: Configurable navigation menu - Header: Breadcrumbs, search, theme toggle **Documentation:** - LAYOUTS.md: Complete usage guide - Updated MODULES.md: Added layouts module section - Updated README.md: Added layouts showcase - Updated CLAUDE.md: Added shadcn CLI workflow notes **shadcn/ui Components Added:** - sidebar - avatar - dropdown-menu - navigation-menu - skeleton - use-mobile hook **Breaking Changes:** - Dashboard now uses SidebarLayout instead of old DashboardLayout - Old navigation component preserved for reference 🤖 Generated with Claude Code (claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Add interactive demo pages for all 5 layout variants: - Sidebar layout demo (collapsible sidebar with keyboard shortcuts) - Top nav layout demo (horizontal navigation) - Hybrid layout demo (top header + sidebar) - Centered layout demo (max-width content) - Marketing layout demo (public landing page) Features: - Each demo showcases layout-specific features - Cross-navigation between all demos - Dashboard now includes "Layout Demos" card - Screenshots included for PR documentation Demo URLs: - /layout-demo/sidebar - /layout-demo/top-nav - /layout-demo/hybrid - /layout-demo/centered - /marketing-demo 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
WalkthroughAdds extensive documentation and templates, introduces many new Radix-based UI primitives and layout modules with demo pages, implements theme/mode support, todos UX improvements (toasts, color picker, image validation, cookie warnings), switches D1 config to an env var, updates package/tooling, and adds MCP/wrangler metadata. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant Server
participant Auth
participant DB
User->>Browser: Request protected route (e.g., /dashboard)
Browser->>Server: SSR render layout
Server->>Auth: getCurrentUser()
alt authenticated
Auth->>DB: fetch user/session
DB-->>Auth: user
Auth-->>Server: user
Server-->>Browser: render layout (Sidebar/TopNav/Hybrid) with server cookies read
Browser->>Browser: mount ThemeProvider, ModeToggle, client components
else unauthenticated
Auth-->>Server: null
Server->>Browser: redirect to /login
end
sequenceDiagram
participant User
participant ClientForm
participant ClientValidation
participant ServerAction
participant DB
participant R2
participant Cookie
participant Toast
User->>ClientForm: Submit todo with image
ClientForm->>ClientValidation: validate file (<=5MB, PNG/JPEG/JPG)
alt invalid
ClientValidation-->>Toast: show error
else valid
ClientForm->>Toast: show pending (toast.promise)
ClientForm->>ServerAction: call create/update action
ServerAction->>DB: insert/update todo
ServerAction->>R2: upload image
alt upload succeeds
R2-->>ServerAction: image URL
ServerAction-->>ClientForm: success
else upload fails
R2-->>ServerAction: error
ServerAction->>Cookie: set "todo-warning" (10s)
ServerAction-->>ClientForm: partial success / result
end
ClientForm-->>Toast: resolved (success/partial)
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 14
🧹 Nitpick comments (21)
src/modules/dashboard/dashboard.page.tsx (1)
77-82: Consider usingasChildfor better semantic HTML.While the current
ButtoninsideLinkpattern is functional and consistent with the existing cards in this file, using theasChildprop would produce cleaner semantic HTML.Optional refactor:
- <Link href="/layout-demo/sidebar"> - <Button className="w-full" variant="secondary"> - <Layout className="mr-2 h-4 w-4" /> - View Layouts - </Button> - </Link> + <Button className="w-full" variant="secondary" asChild> + <Link href="/layout-demo/sidebar"> + <Layout className="mr-2 h-4 w-4" /> + View Layouts + </Link> + </Button>Note: This same pattern could be applied to the existing cards (lines 37-42, 57-62) in a future refactor for consistency.
src/services/summarizer.service.ts (1)
76-90: Consider strengthening type safety for the style parameter.The
styleparameter is typed asstring, but it should beSummaryStylesto ensure type safety. While the current usage is correct (line 43 guarantees a valid value), the loose typing requires a type assertion on line 90 and doesn't prevent future callers from passing invalid strings.Apply this diff to improve type safety:
- private buildSystemPrompt( - maxLength: number, - style: string, - language: string, - ): string { + private buildSystemPrompt( + maxLength: number, + style: SummaryStyles, + language: string, + ): string { const styleInstructions: Record<SummaryStyles, string> = { concise: "Create a brief, concise summary focusing on the main points.", detailed: "Create a comprehensive summary that covers key details and context.", "bullet-points": "Create a summary using bullet points to highlight key information.", }; - return `You are a professional text summarizer. ${styleInstructions[style as keyof typeof styleInstructions]} + return `You are a professional text summarizer. ${styleInstructions[style]}src/modules/todos/components/todo-form.tsx (4)
6-6: Remove unuseduseRouterimport.The
routervariable is assigned but never used in the component. Remove the import and variable declaration to keep the code clean.-import { useRouter } from "next/navigation";- const router = useRouter();Also applies to: 77-77
114-128: Extract validation constants for maintainability.The file size limit and allowed types are hard-coded. Consider extracting them as constants at the top of the file or in a shared configuration file for easier maintenance and consistency.
+const MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5MB +const ALLOWED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/jpg"]; + export function TodoForm({Then update the validation:
- const maxSize = 5 * 1024 * 1024; - if (file.size > maxSize) { + if (file.size > MAX_IMAGE_SIZE) { toast.error("Image must be less than 5MB");- const validTypes = ["image/png", "image/jpeg", "image/jpg"]; - if (!validTypes.includes(file.type)) { + if (!ALLOWED_IMAGE_TYPES.includes(file.type)) { toast.error("Only PNG and JPG images are allowed");
496-498: Consider deriving help text from validation constants.The help text "PNG, JPG up to 5MB" is hard-coded and could drift from the actual validation logic. If you extract
MAX_IMAGE_SIZEandALLOWED_IMAGE_TYPESas suggested earlier, consider deriving this text from those constants.Example:
const MAX_IMAGE_SIZE_MB = 5; const ALLOWED_EXTENSIONS = ["PNG", "JPG"]; // In the JSX: <p className="text-xs text-muted-foreground mt-1"> {ALLOWED_EXTENSIONS.join(", ")} up to {MAX_IMAGE_SIZE_MB}MB </p>
540-574: Consider extracting submit button label logic.The submit button rendering logic is quite complex (35 lines of nested ternaries). While functional, extracting this into a helper function or custom hook would improve readability and testability.
Example:
const getSubmitButtonContent = (isPending: boolean, imageFile: File | null, isUpdate: boolean) => { if (!isPending) { return isUpdate ? "Update Todo" : "Create Todo"; } const action = isUpdate ? "Updating" : "Creating"; const suffix = imageFile ? " with image..." : "..."; return ( <span className="flex items-center gap-2"> <SpinnerIcon /> {action + suffix} </span> ); };.mcp.json (1)
3-8: Reuse the pinnedshadcnversion for MCP runs.
npx shadcn@latestwill fetch whatever the registry serves at runtime, which can drift from theshadcn@^3.5.0devDependency you just added. To keep tooling reproducible, consider invoking the local binary instead (e.g.,"command": "pnpm", "args": ["exec", "shadcn", "mcp"]"). That way everyone uses the same vetted version.src/lib/r2.ts (1)
49-50: Fix prevents double protocol prefix, but improve typing.The logic change is correct and prevents
https://https://URLs. However, the(env as any)type assertion bypasses type safety.Consider adding proper typing for the environment variable. If you have an env type definition file, add:
interface CloudflareEnv { next_cf_app_bucket: R2Bucket; CLOUDFLARE_R2_URL: string; // ... other env vars }Then update the code:
-const publicUrl = `${(env as any).CLOUDFLARE_R2_URL}/${key}`; +const publicUrl = `${env.CLOUDFLARE_R2_URL}/${key}`;CLAUDE.md (1)
375-383: Add language identifiers to these fenced blocks.markdownlint (MD040) keeps flagging the module dependency diagram and file tree blocks because they use bare ````` fences. Please switch them to something like
```textso the lint step succeeds.Also applies to: 583-614
MODULE_TEMPLATE.md (1)
68-75: Give this fenced block a language.markdownlint (MD040) reports the directory structure block because the fence lacks a language. Tagging it (e.g.,
```text) will unblock the lint step.src/components/ui/navigation-menu.tsx (2)
61-83: Consider breaking up the long cva string for readability.The navigationMenuTriggerStyle cva string (lines 61-63) is very long (~500+ characters on a single line). While functional, breaking it into multiple lines would improve maintainability.
Note: The space after
{children}on line 76 is intentional for icon spacing and should remain.Apply this diff to improve readability:
const navigationMenuTriggerStyle = cva( - "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1" + [ + "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2", + "text-sm font-medium transition-[color,box-shadow] outline-none", + "hover:bg-accent hover:text-accent-foreground", + "focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-1", + "disabled:pointer-events-none disabled:opacity-50", + "data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground", + "data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent", + ].join(" ") )
85-100: Consider extracting complex className strings.Lines 92-95 contain a very long className string with many data-attribute selectors. While functional, extracting these into named constants would improve readability and maintainability.
Example refactor:
+const navigationMenuContentViewportStyles = [ + "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out", + "data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out", + "data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52", + "data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52", + "top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto", +].join(" "); + +const navigationMenuContentNoViewportStyles = [ + "group-data-[viewport=false]/navigation-menu:bg-popover", + "group-data-[viewport=false]/navigation-menu:text-popover-foreground", + // ... etc +].join(" "); + function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) { return ( <NavigationMenuPrimitive.Content data-slot="navigation-menu-content" className={cn( - "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto", - "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none", + navigationMenuContentViewportStyles, + navigationMenuContentNoViewportStyles, className )} {...props}src/modules/layouts/marketing/marketing.layout.tsx (1)
47-95: Consider documenting or replacing placeholder hash links.The footer contains hash anchor links (#features, #pricing, #about, etc.) that won't function without corresponding page sections with matching IDs. Consider either:
- Adding a comment indicating these are placeholders to be replaced with actual routes
- Replacing them with actual functional routes
- Removing them entirely from the demo
This will prevent confusion for developers using this layout as a starting point.
src/components/ui/color-picker.tsx (2)
18-24: Remove duplicatebackgroundColorstyling on the inner div.The Button already has
backgroundColor: valueon line 21. The inner div on line 23 duplicates this styling unnecessarily.Apply this diff to simplify:
<PopoverTrigger asChild> <Button variant="outline" className="w-20 h-10 p-1" style={{ backgroundColor: value }} > - <div className="w-full h-full rounded" style={{ backgroundColor: value }} /> + <div className="w-full h-full rounded" /> </Button> </PopoverTrigger>
33-38: Consider validating for complete hex colors only.The regex
/^#[0-9A-Fa-f]{0,6}$/allows incomplete hex values like#FFor#1, which are not valid colors. While this provides a good typing experience, it may leave the component in an invalid state.Consider one of these approaches:
Option 1: Accept partial input but validate on blur
<Input type="text" value={value} onChange={(e) => { const newColor = e.target.value; if (/^#[0-9A-Fa-f]{0,6}$/.test(newColor)) { onChange(newColor); } }} + onBlur={(e) => { + const newColor = e.target.value; + if (!/^#[0-9A-Fa-f]{6}$/.test(newColor)) { + // Reset to previous valid value or default + onChange(value); + } + }} placeholder="#6366f1" className="flex-1 font-mono" maxLength={7} />Option 2: Only propagate complete hex colors
<Input type="text" value={value} onChange={(e) => { const newColor = e.target.value; - if (/^#[0-9A-Fa-f]{0,6}$/.test(newColor)) { - onChange(newColor); + if (/^#[0-9A-Fa-f]{6}$/.test(newColor)) { + onChange(newColor); } }} placeholder="#6366f1" className="flex-1 font-mono" maxLength={7} />docs/IMPLEMENTATION_PHASES.md (1)
40-40: Consider using markdown link format for the URL.The bare URL may not render as a clickable link in some markdown viewers.
Apply this diff:
-- [ ] Verify app loads at http://localhost:5173 +- [ ] Verify app loads at [http://localhost:5173](http://localhost:5173)src/components/mode-toggle.tsx (1)
26-34: Consider handling undefined theme case explicitly.The
cycleThemefunction doesn't explicitly handle the case wherethememight beundefined(which can happen initially). Currently, it falls through to the else block and sets theme to "light", but this could be more explicit.const cycleTheme = () => { if (theme === "light") { setTheme("dark"); } else if (theme === "dark") { setTheme("system"); - } else { + } else { + // Handle system or undefined theme setTheme("light"); } };Alternatively, make it explicit:
const cycleTheme = () => { if (theme === "light") { setTheme("dark"); } else if (theme === "dark") { setTheme("system"); - } else { + } else if (theme === "system" || !theme) { setTheme("light"); } };docs/NEXTJS_16_UPGRADE.md (1)
80-80: Consider using markdown link format for bare URLs.Several URLs appear as bare text, which may not render as clickable links in some markdown viewers. While functional, markdown link format improves readability.
For example:
-- **Issue:** https://github.com/better-auth/better-auth/issues/5263 +- **Issue:** [better-auth/better-auth#5263](https://github.com/better-auth/better-auth/issues/5263) -- **Issue:** https://github.com/opennextjs/opennextjs-cloudflare/issues/972 +- **Issue:** [opennextjs/opennextjs-cloudflare#972](https://github.com/opennextjs/opennextjs-cloudflare/issues/972)Apply similar formatting to other bare URLs in the monitoring section (lines 144-151).
Also applies to: 87-87, 144-151
src/components/ui/sidebar.tsx (3)
86-86: Consider throttling or debouncing cookie updates.The cookie is set on every state change. If users rapidly toggle the sidebar (e.g., testing the keyboard shortcut), this could result in frequent cookie writes.
Consider debouncing the cookie update:
+const debouncedSetCookie = React.useCallback( + debounce((openState: boolean) => { + document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` + }, 500), + [] +) const setOpen = React.useCallback( (value: boolean | ((value: boolean) => boolean)) => { const openState = typeof value === "function" ? value(open) : value if (setOpenProp) { setOpenProp(openState) } else { _setOpen(openState) } - // This sets the cookie to keep the sidebar state. - document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` + debouncedSetCookie(openState) }, [setOpenProp, open] )
98-106: Consider excluding Shift/Alt modifiers from keyboard shortcut.The keyboard shortcut handler only checks for
Cmd/Ctrl + Bbut doesn't exclude other modifiers. This meansCmd + Shift + BorCmd + Alt + Bwill also trigger the sidebar toggle, potentially conflicting with browser or other application shortcuts.Apply this diff to restrict the shortcut to exactly
Cmd/Ctrl + B:const handleKeyDown = (event: KeyboardEvent) => { if ( event.key === SIDEBAR_KEYBOARD_SHORTCUT && - (event.metaKey || event.ctrlKey) + (event.metaKey || event.ctrlKey) && + !event.shiftKey && + !event.altKey ) { event.preventDefault() toggleSidebar() } }
476-496: Consider readability improvement for long class string.Line 477 contains a 500+ character class string that's difficult to read and maintain. While functional, breaking it into multiple lines or extracting repeated patterns could improve maintainability.
Example refactoring:
const sidebarMenuButtonVariants = cva( - "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", + [ + "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring", + "transition-[width,height,padding]", + "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2", + "active:bg-sidebar-accent active:text-sidebar-accent-foreground", + "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", + "group-has-data-[sidebar=menu-action]/menu-item:pr-8", + "data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground", + "data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground", + "group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2", + "[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", + ].join(" "), { variants: {Note: This also fixes the
!suffix syntax (see next comment).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (6)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlscreenshots/layout-centered.pngis excluded by!**/*.pngscreenshots/layout-hybrid.pngis excluded by!**/*.pngscreenshots/layout-marketing.pngis excluded by!**/*.pngscreenshots/layout-sidebar.pngis excluded by!**/*.pngscreenshots/layout-topnav.pngis excluded by!**/*.png
📒 Files selected for processing (66)
.dev.vars.example(1 hunks).mcp.json(1 hunks)CLAUDE.md(1 hunks)LAYOUTS_PROJECT_BRIEF.md(1 hunks)MODULES.md(1 hunks)MODULE_TEMPLATE.md(1 hunks)README.md(5 hunks)SESSION.md(1 hunks)docs/API_ENDPOINTS.md(1 hunks)docs/DATABASE_SCHEMA.md(1 hunks)docs/IMPLEMENTATION_PHASES.md(1 hunks)docs/NEXTJS_16_UPGRADE.md(1 hunks)drizzle.config.ts(1 hunks)package.json(3 hunks)src/app/(demo)/layout-demo/centered/layout.tsx(1 hunks)src/app/(demo)/layout-demo/centered/page.tsx(1 hunks)src/app/(demo)/layout-demo/hybrid/layout.tsx(1 hunks)src/app/(demo)/layout-demo/hybrid/page.tsx(1 hunks)src/app/(demo)/layout-demo/sidebar/layout.tsx(1 hunks)src/app/(demo)/layout-demo/sidebar/page.tsx(1 hunks)src/app/(demo)/layout-demo/top-nav/layout.tsx(1 hunks)src/app/(demo)/layout-demo/top-nav/page.tsx(1 hunks)src/app/dashboard/layout.tsx(1 hunks)src/app/layout.tsx(2 hunks)src/app/marketing-demo/layout.tsx(1 hunks)src/app/marketing-demo/page.tsx(1 hunks)src/components/mode-toggle.tsx(1 hunks)src/components/navigation.tsx(1 hunks)src/components/theme-provider.tsx(1 hunks)src/components/ui/avatar.tsx(1 hunks)src/components/ui/color-picker.tsx(1 hunks)src/components/ui/dropdown-menu.tsx(1 hunks)src/components/ui/navigation-menu.tsx(1 hunks)src/components/ui/popover.tsx(1 hunks)src/components/ui/sheet.tsx(1 hunks)src/components/ui/sidebar.tsx(1 hunks)src/components/ui/skeleton.tsx(1 hunks)src/components/ui/tooltip.tsx(1 hunks)src/hooks/use-mobile.ts(1 hunks)src/lib/r2.ts(1 hunks)src/modules/auth/utils/auth-client.ts(1 hunks)src/modules/dashboard/dashboard.page.tsx(3 hunks)src/modules/layouts/centered/centered.layout.tsx(1 hunks)src/modules/layouts/components/app-sidebar.tsx(1 hunks)src/modules/layouts/components/header.tsx(1 hunks)src/modules/layouts/components/types.ts(1 hunks)src/modules/layouts/components/user-nav.tsx(1 hunks)src/modules/layouts/hybrid/hybrid.layout.tsx(1 hunks)src/modules/layouts/marketing/marketing.layout.tsx(1 hunks)src/modules/layouts/sidebar/sidebar.layout.tsx(1 hunks)src/modules/layouts/top-nav/top-nav.layout.tsx(1 hunks)src/modules/todos/actions/create-category.action.ts(2 hunks)src/modules/todos/actions/create-todo.action.ts(2 hunks)src/modules/todos/actions/get-todos.action.ts(1 hunks)src/modules/todos/actions/update-todo.action.ts(3 hunks)src/modules/todos/components/add-category.tsx(3 hunks)src/modules/todos/components/delete-todo.tsx(4 hunks)src/modules/todos/components/todo-card.tsx(5 hunks)src/modules/todos/components/todo-form.tsx(7 hunks)src/modules/todos/components/toggle-complete.tsx(2 hunks)src/modules/todos/components/warning-toast.tsx(1 hunks)src/modules/todos/edit-todo.page.tsx(1 hunks)src/modules/todos/new-todo.page.tsx(1 hunks)src/modules/todos/todo-list.page.tsx(2 hunks)src/services/summarizer.service.ts(3 hunks)wrangler.jsonc(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (36)
src/app/marketing-demo/page.tsx (2)
src/components/ui/button.tsx (1)
Button(58-58)src/components/ui/card.tsx (5)
Card(85-85)CardHeader(86-86)CardTitle(88-88)CardContent(91-91)CardDescription(90-90)
src/modules/layouts/components/app-sidebar.tsx (1)
src/modules/layouts/components/types.ts (1)
NavGroup(16-19)
src/app/(demo)/layout-demo/top-nav/page.tsx (2)
src/components/ui/card.tsx (5)
Card(85-85)CardHeader(86-86)CardTitle(88-88)CardDescription(90-90)CardContent(91-91)src/components/ui/button.tsx (1)
Button(58-58)
src/modules/todos/actions/create-category.action.ts (1)
src/modules/todos/schemas/category.schema.ts (1)
Category(39-39)
src/components/ui/skeleton.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/modules/layouts/components/user-nav.tsx (2)
src/modules/auth/models/user.model.ts (1)
AuthUser(1-5)src/modules/auth/components/logout-button.tsx (1)
LogoutButton(9-31)
src/app/(demo)/layout-demo/centered/layout.tsx (1)
src/modules/layouts/centered/centered.layout.tsx (1)
CenteredLayout(16-65)
src/app/(demo)/layout-demo/hybrid/layout.tsx (5)
src/app/(demo)/layout-demo/centered/layout.tsx (1)
Layout(3-9)src/app/(demo)/layout-demo/sidebar/layout.tsx (1)
Layout(3-9)src/app/(demo)/layout-demo/top-nav/layout.tsx (1)
Layout(3-9)src/app/marketing-demo/layout.tsx (1)
Layout(3-9)src/modules/layouts/hybrid/hybrid.layout.tsx (1)
HybridLayout(16-48)
src/modules/layouts/marketing/marketing.layout.tsx (1)
src/components/mode-toggle.tsx (1)
ModeToggle(8-44)
src/components/navigation.tsx (2)
src/components/mode-toggle.tsx (1)
ModeToggle(8-44)src/modules/auth/components/logout-button.tsx (1)
LogoutButton(9-31)
src/app/layout.tsx (1)
src/components/theme-provider.tsx (1)
ThemeProvider(6-8)
src/app/marketing-demo/layout.tsx (5)
src/app/(demo)/layout-demo/centered/layout.tsx (1)
Layout(3-9)src/app/(demo)/layout-demo/hybrid/layout.tsx (1)
Layout(3-9)src/app/(demo)/layout-demo/sidebar/layout.tsx (1)
Layout(3-9)src/app/(demo)/layout-demo/top-nav/layout.tsx (1)
Layout(3-9)src/modules/layouts/marketing/marketing.layout.tsx (1)
MarketingLayout(11-107)
src/components/ui/avatar.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/modules/layouts/sidebar/sidebar.layout.tsx (4)
src/modules/auth/utils/auth-utils.ts (1)
getCurrentUser(50-70)src/components/ui/sidebar.tsx (2)
SidebarProvider(721-721)SidebarInset(711-711)src/modules/layouts/components/app-sidebar.tsx (1)
AppSidebar(41-102)src/modules/layouts/components/header.tsx (1)
Header(12-24)
src/modules/layouts/centered/centered.layout.tsx (3)
src/modules/auth/utils/auth-utils.ts (1)
getCurrentUser(50-70)src/components/mode-toggle.tsx (1)
ModeToggle(8-44)src/modules/layouts/components/user-nav.tsx (1)
UserNav(21-71)
src/modules/layouts/hybrid/hybrid.layout.tsx (4)
src/modules/auth/utils/auth-utils.ts (1)
getCurrentUser(50-70)src/modules/layouts/components/app-sidebar.tsx (1)
AppSidebar(41-102)src/components/mode-toggle.tsx (1)
ModeToggle(8-44)src/modules/layouts/components/user-nav.tsx (1)
UserNav(21-71)
src/components/ui/tooltip.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/modules/layouts/top-nav/top-nav.layout.tsx (3)
src/modules/auth/utils/auth-utils.ts (1)
getCurrentUser(50-70)src/components/mode-toggle.tsx (1)
ModeToggle(8-44)src/modules/layouts/components/user-nav.tsx (1)
UserNav(21-71)
src/modules/layouts/components/header.tsx (3)
src/modules/auth/models/user.model.ts (1)
AuthUser(1-5)src/components/mode-toggle.tsx (1)
ModeToggle(8-44)src/modules/layouts/components/user-nav.tsx (1)
UserNav(21-71)
src/components/ui/popover.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/modules/todos/components/add-category.tsx (2)
src/modules/todos/actions/create-category.action.ts (1)
createCategory(13-72)src/components/ui/color-picker.tsx (1)
ColorPicker(13-45)
src/app/(demo)/layout-demo/hybrid/page.tsx (2)
src/components/ui/card.tsx (5)
Card(85-85)CardHeader(86-86)CardTitle(88-88)CardDescription(90-90)CardContent(91-91)src/components/ui/button.tsx (1)
Button(58-58)
src/components/ui/navigation-menu.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/modules/todos/todo-list.page.tsx (2)
src/modules/todos/actions/get-todos.action.ts (1)
getAllTodos(8-46)src/modules/todos/components/warning-toast.tsx (1)
WarningToast(10-21)
src/modules/dashboard/dashboard.page.tsx (8)
src/components/ui/card.tsx (5)
Card(85-85)CardHeader(86-86)CardTitle(88-88)CardDescription(90-90)CardContent(91-91)src/app/(demo)/layout-demo/centered/layout.tsx (1)
Layout(3-9)src/app/(demo)/layout-demo/hybrid/layout.tsx (1)
Layout(3-9)src/app/(demo)/layout-demo/sidebar/layout.tsx (1)
Layout(3-9)src/app/(demo)/layout-demo/top-nav/layout.tsx (1)
Layout(3-9)src/app/marketing-demo/layout.tsx (1)
Layout(3-9)src/app/dashboard/layout.tsx (1)
Layout(3-9)src/components/ui/button.tsx (1)
Button(58-58)
src/modules/todos/components/todo-card.tsx (1)
src/modules/todos/models/todo.enum.ts (2)
TodoPriority(8-13)TodoStatus(1-6)
src/modules/todos/components/todo-form.tsx (2)
src/modules/todos/actions/update-todo.action.ts (1)
updateTodoAction(17-114)src/modules/todos/actions/create-todo.action.ts (1)
createTodoAction(13-110)
src/app/(demo)/layout-demo/centered/page.tsx (2)
src/components/ui/card.tsx (5)
Card(85-85)CardHeader(86-86)CardTitle(88-88)CardDescription(90-90)CardContent(91-91)src/components/ui/button.tsx (1)
Button(58-58)
src/app/(demo)/layout-demo/sidebar/page.tsx (2)
src/components/ui/card.tsx (5)
Card(85-85)CardHeader(86-86)CardTitle(88-88)CardDescription(90-90)CardContent(91-91)src/components/ui/button.tsx (1)
Button(58-58)
src/app/(demo)/layout-demo/sidebar/layout.tsx (5)
src/app/(demo)/layout-demo/centered/layout.tsx (1)
Layout(3-9)src/app/(demo)/layout-demo/hybrid/layout.tsx (1)
Layout(3-9)src/app/(demo)/layout-demo/top-nav/layout.tsx (1)
Layout(3-9)src/app/marketing-demo/layout.tsx (1)
Layout(3-9)src/modules/layouts/sidebar/sidebar.layout.tsx (1)
SidebarLayout(14-38)
src/app/dashboard/layout.tsx (1)
src/modules/layouts/sidebar/sidebar.layout.tsx (1)
SidebarLayout(14-38)
src/modules/todos/actions/get-todos.action.ts (1)
src/modules/todos/schemas/category.schema.ts (1)
categories(7-21)
src/components/ui/dropdown-menu.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/app/(demo)/layout-demo/top-nav/layout.tsx (1)
src/modules/layouts/top-nav/top-nav.layout.tsx (1)
TopNavLayout(24-111)
src/components/ui/sidebar.tsx (2)
src/hooks/use-mobile.ts (1)
useIsMobile(5-19)src/lib/utils.ts (1)
cn(4-6)
src/components/ui/sheet.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
🪛 LanguageTool
MODULE_TEMPLATE.md
[uncategorized] ~135-~135: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... numbers (store money in cents to avoid floating point issues) - Add .notNull() for required...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[grammar] ~1030-~1030: Use a hyphen to join words.
Context: ...- Add sorting options - Create export to PDF feature - Add email notifications - ...
(QB_NEW_EN_HYPHEN)
docs/API_ENDPOINTS.md
[grammar] ~89-~89: Use a hyphen to join words.
Context: ...uth/sign-up/email- Email/password sign up -POST /api/auth/sign-in/email` - Em...
(QB_NEW_EN_HYPHEN)
[grammar] ~90-~90: Use a hyphen to join words.
Context: ...uth/sign-in/email- Email/password sign in -POST /api/auth/sign-out` - Sign ou...
(QB_NEW_EN_HYPHEN)
SESSION.md
[uncategorized] ~3-~3: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...Project: fullstack-next-cloudflare (Open Source Contributions) Repository: https://...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
docs/IMPLEMENTATION_PHASES.md
[style] ~326-~326: The double modal “requires LEFT” is nonstandard (only accepted in certain dialects). Consider “to be LEFT”.
Context: ... - Fetching contacts with tags requires LEFT JOIN on junction table - Drizzle syntax...
(NEEDS_FIXED)
🪛 markdownlint-cli2 (0.18.1)
MODULE_TEMPLATE.md
67-67: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
docs/NEXTJS_16_UPGRADE.md
11-11: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
80-80: Bare URL used
(MD034, no-bare-urls)
87-87: Bare URL used
(MD034, no-bare-urls)
144-144: Bare URL used
(MD034, no-bare-urls)
145-145: Bare URL used
(MD034, no-bare-urls)
149-149: Bare URL used
(MD034, no-bare-urls)
150-150: Bare URL used
(MD034, no-bare-urls)
151-151: Bare URL used
(MD034, no-bare-urls)
SESSION.md
4-4: Bare URL used
(MD034, no-bare-urls)
5-5: Bare URL used
(MD034, no-bare-urls)
LAYOUTS_PROJECT_BRIEF.md
208-208: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
214-214: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
219-219: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
224-224: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
229-229: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
MODULES.md
23-23: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
33-33: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
201-201: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
206-206: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
217-217: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
223-223: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
238-238: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
250-250: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
255-255: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
276-276: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
283-283: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
289-289: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
321-321: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
346-346: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
362-362: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
424-424: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
706-706: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
716-716: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
docs/IMPLEMENTATION_PHASES.md
40-40: Bare URL used
(MD034, no-bare-urls)
docs/DATABASE_SCHEMA.md
752-752: Bare URL used
(MD034, no-bare-urls)
753-753: Bare URL used
(MD034, no-bare-urls)
754-754: Bare URL used
(MD034, no-bare-urls)
755-755: Bare URL used
(MD034, no-bare-urls)
CLAUDE.md
67-67: Bare URL used
(MD034, no-bare-urls)
68-68: Bare URL used
(MD034, no-bare-urls)
159-159: Bare URL used
(MD034, no-bare-urls)
375-375: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
583-583: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
687-687: Bare URL used
(MD034, no-bare-urls)
🔇 Additional comments (48)
src/modules/todos/edit-todo.page.tsx (1)
42-42: LGTM! Semantic token improves theme consistency.The change to
text-muted-foregroundaligns with the PR's theming system and ensures the descriptive text adapts properly to both light and dark themes.src/modules/dashboard/dashboard.page.tsx (1)
1-1: Excellent migration to semantic design tokens.The shift from hardcoded colors (e.g.,
text-gray-900,bg-blue-100,text-blue-600) to semantic tokens (text-muted-foreground,bg-primary/10,text-primary) enables proper theme support and maintains visual consistency across dark/light modes.Also applies to: 16-16, 19-19, 88-88, 93-94, 97-97, 102-103, 106-106, 111-112, 115-115
src/services/summarizer.service.ts (2)
47-47: LGTM! Typo fixes improve code quality.The corrections from
buildSystenPrompttobuildSystemPromptandstyleInstructructionstostyleInstructionsfix spelling errors and improve code readability.Also applies to: 76-90
1-1: No issues found with the Zod import path.Zod added subpath versioning (e.g. "zod/v4", "zod/v4/core", "zod/v3") starting with v3.25.x releases, and those subpaths remain supported even after zod@4.0.0. The project uses zod@^4.1.8, which fully supports this import pattern. The import
import { z } from "zod/v4"is valid and correct.Likely an incorrect or invalid review comment.
wrangler.jsonc (1)
8-8: Please confirm the Cloudflareaccount_idis safe to publish.This looks like a real Cloudflare account identifier. Exposing production account metadata in source control can expand the attack surface (targeted phishing, brute-force token spraying, etc.). Prefer pulling the ID from an environment-specific config or leaving a placeholder and documenting how to supply it locally. Let’s double-check whether this value should live outside version control.
src/modules/todos/components/toggle-complete.tsx (1)
35-37: Nice upgrade to toast-based error handling.Rolling the optimistic update back and surfacing the failure through
react-hot-toastkeeps the UI consistent with the rest of the module. Looks good to me..dev.vars.example (1)
7-9: Helpful addition.Documenting how to source the D1 database ID (and adding the placeholder) removes guesswork for new contributors. Thanks for tightening this up.
src/modules/todos/components/warning-toast.tsx (1)
10-20: Toast bridge looks solid.The effect guard keeps the toast fire-once behavior tidy, and returning
nullensures no extra DOM noise. Fits cleanly into the warning-cookie flow.src/modules/todos/components/delete-todo.tsx (1)
5-5: LGTM! Excellent UX and accessibility improvements.The changes successfully modernize the component:
- Toast notifications replace browser alerts for better UX
- Theme-aware
destructivestyling replaces hardcoded red colors- ARIA label enhances accessibility
Also applies to: 41-43, 54-55, 73-73
src/components/ui/skeleton.tsx (1)
1-13: LGTM! Clean skeleton component implementation.The component follows shadcn/ui patterns with semantic theming and proper prop forwarding.
src/hooks/use-mobile.ts (1)
5-19: Standard mobile detection pattern, but note potential hydration mismatch.The implementation follows best practices for responsive breakpoint detection. However, the initial
undefinedstate coerced tofalse(line 18) may cause hydration mismatches if components render different markup based onisMobileduring SSR vs. client hydration.If you observe React hydration warnings in the console, consider one of these approaches:
- Suppress hydration for mobile-specific content:
{isMobile && <MobileComponent suppressHydrationWarning />}
- Use a mounted flag:
const [isMounted, setIsMounted] = useState(false); useEffect(() => setIsMounted(true), []); return isMounted ? isMobile : false;
- Accept the same initial state on server and client (current approach is fine if no visual differences occur during hydration).
LAYOUTS_PROJECT_BRIEF.md (1)
1-336: LGTM! Comprehensive planning document.This project brief is well-structured and thorough, covering vision, scope, research, and implementation phases. The markdownlint warnings about emphasis vs. headings (lines 208, 214, 219, 224, 229) are stylistic and don't impact the document's effectiveness as a planning artifact.
SESSION.md (1)
1-163: LGTM! Useful project tracking document.This session state document effectively tracks PR history, current phase, and development setup. The static analysis warnings are minor formatting suggestions (bare URLs, compound adjective) that don't impact the document's utility as an internal tracking artifact.
src/components/ui/avatar.tsx (1)
1-53: LGTM! Well-structured Radix UI wrapper components.The Avatar components follow shadcn/ui conventions with proper prop forwarding, semantic theming, and clean composition. The three-component structure (Avatar, AvatarImage, AvatarFallback) provides flexibility for various avatar rendering scenarios.
src/modules/todos/actions/create-todo.action.ts (1)
64-69: Cookie-based warning mechanism is properly implemented.Verification confirms the implementation is complete and functional:
- Server component (
todo-list.page.tsx) reads the"todo-warning"cookie and passes it as a prop to theWarningToastcomponentWarningToastis a client component that displays the warning viareact-hot-toastlibrary with a 6-second duration- Cookie is cleared after reading, preventing duplicate warnings
The pattern works correctly for Next.js and successfully notifies users of the upload failure. No further action needed.
src/components/ui/navigation-menu.tsx (1)
8-30: LGTM! Clean conditional viewport rendering.The viewport prop pattern with conditional rendering of NavigationMenuViewport is well-implemented. The data attributes provide useful hooks for styling and testing.
src/modules/todos/new-todo.page.tsx (1)
23-23: LGTM! Good use of semantic color token.Switching from
text-gray-600totext-muted-foregroundimproves theme consistency and ensures proper color adaptation in dark mode.drizzle.config.ts (1)
16-16: LGTM! Environment variable usage improves flexibility.Replacing the hard-coded databaseId with
process.env.CLOUDFLARE_D1_DATABASE_ID!allows for environment-specific configuration. The non-null assertion is acceptable here given the biome-ignore directive and the fail-fast nature of configuration files.Ensure
CLOUDFLARE_D1_DATABASE_IDis documented in.dev.vars.examplefor local development.src/app/(demo)/layout-demo/hybrid/layout.tsx (1)
1-9: LGTM! Consistent with other layout wrappers.This layout wrapper follows the same clean pattern as the other demo layouts (centered, sidebar, top-nav), ensuring consistency across the modular layouts system.
src/app/layout.tsx (1)
31-43: LGTM! Proper next-themes integration.The changes correctly integrate next-themes:
suppressHydrationWarningon the html tag prevents hydration mismatches between server and client theme renderingbg-backgroundsemantic token enables proper theme adaptation- ThemeProvider wraps content with appropriate props (attribute="class", enableSystem, etc.)
- Toaster correctly positioned inside ThemeProvider to respect theme context
src/components/theme-provider.tsx (1)
1-8: LGTM! Clean wrapper pattern.This thin wrapper around NextThemesProvider is a good practice, providing a centralized import point and making it easier to add custom theming logic in the future if needed.
src/app/dashboard/layout.tsx (1)
1-8: LGTM! Clean migration to modular SidebarLayout.The migration from DashboardLayout to SidebarLayout aligns with the new modular layouts system. The SidebarLayout provides equivalent functionality with enhanced features like cookie-based state persistence and consistent auth handling.
src/app/marketing-demo/page.tsx (2)
1-160: LGTM! Well-structured marketing demo page.The page is well-organized with proper semantic HTML, responsive design classes, and clear content hierarchy. The hero, features, stats, and CTA sections follow common marketing page patterns.
122-125: Verify the "0 Additional Dependencies" claim.The stats section claims "0 Additional Dependencies," but this PR adds several new dependencies including
next-themesand Radix UI packages (@radix-ui/react-navigation-menu,@radix-ui/react-sidebar, etc.). Consider updating this to reflect the actual dependency footprint or clarify what "additional" means in this context (e.g., "beyond core UI primitives").src/modules/layouts/hybrid/hybrid.layout.tsx (1)
16-47: LGTM! Well-structured hybrid layout implementation.The authentication enforcement, server-side cookie reading for sidebar state, and layout composition are all properly implemented. The pattern follows Next.js best practices for async server components.
src/modules/layouts/components/header.tsx (1)
12-24: LGTM! Clean and reusable header component.The header composition with SidebarTrigger, optional title, ModeToggle, and UserNav is well-structured and follows the component composition pattern consistently used across the layouts module.
src/modules/todos/components/add-category.tsx (2)
63-76: Good structured result handling.The updated flow properly handles the structured result from
createCategory, with appropriate error toasting on failure and success feedback on completion.
132-135: LGTM! ColorPicker integration looks clean.The ColorPicker component is properly wired into the form field with appropriate value fallback and onChange handling.
src/app/(demo)/layout-demo/top-nav/page.tsx (1)
5-106: LGTM! Effective layout demo page.The demo page clearly showcases the top-nav layout features and provides helpful navigation to other layout variants. The card-based structure makes it easy to understand the key features.
src/app/(demo)/layout-demo/sidebar/layout.tsx (1)
3-9: LGTM! Clean layout wrapper.The layout correctly wraps children with SidebarLayout and provides an appropriate demo title. The pattern is consistent with other demo layout wrappers in the PR.
src/modules/layouts/components/app-sidebar.tsx (1)
41-102: LGTM! Well-structured sidebar component.The sidebar implementation is clean and follows React best practices:
- Proper use of
usePathnamefor active state detection- Correct use of
<a>tag for external GitHub link (Line 93)- Clean separation of navigation configuration from rendering logic
- Accessible structure with proper Link components for internal navigation
src/components/navigation.tsx (1)
1-44: LGTM! Clean integration of theme toggle and route constants.The changes improve maintainability by:
- Using route constants instead of hardcoded paths
- Integrating
ModeTogglefor theme switching- Updating to semantic
bg-cardtoken for theme supportThe implementation follows existing patterns and is consistent with the modular approach.
src/app/(demo)/layout-demo/top-nav/layout.tsx (1)
1-9: LGTM! Clean layout wrapper following Next.js conventions.This wrapper correctly delegates to the
TopNavLayoutcomponent and follows the same pattern as other demo layouts in the PR (centered, hybrid, sidebar). The async function signature is appropriate for layouts that may perform server-side operations.docs/IMPLEMENTATION_PHASES.md (1)
1-834: Comprehensive implementation planning documentation.This is an excellent planning document with clear phases, task breakdowns, verification criteria, and data flow diagrams. The structure provides a solid roadmap for CRM feature implementation.
src/app/(demo)/layout-demo/centered/page.tsx (1)
1-99: LGTM! Well-structured demo showcasing centered layout features.The component effectively demonstrates the centered layout pattern with:
- Clear feature descriptions with checkmarks
- Example prose/documentation content
- Navigation to other layout variants
- Proper use of shadcn/ui components
The implementation is consistent with other demo pages in the PR.
src/components/mode-toggle.tsx (1)
1-44: Excellent hydration mismatch handling!The component correctly prevents hydration mismatches by:
- Using a
mountedstate to defer theme-dependent rendering- Showing a disabled placeholder during SSR
- Including proper ARIA labels for accessibility
The cycling behavior (light → dark → system) provides a good UX.
src/modules/layouts/components/types.ts (1)
1-19: LGTM! Well-designed navigation type definitions.These interfaces provide a clean, typed structure for hierarchical navigation:
NavItemsupports icons, active states, and nested sub-itemsNavSubItemprovides a simplified structure for nested navigationNavGroupenables logical grouping with optional titlesThe types are flexible and follow TypeScript best practices.
docs/NEXTJS_16_UPGRADE.md (1)
1-205: Excellent upgrade research and planning documentation!This document provides valuable guidance with:
- Clear recommendation to wait with solid reasoning
- Detailed dependency compatibility analysis
- Concrete upgrade steps for when dependencies are ready
- Risk assessment with mitigation strategies
- Monitoring strategy with specific timelines
The thorough research will help avoid premature upgrade issues and provides a clear path forward.
src/components/ui/sidebar.tsx (10)
1-34: LGTM! Clean imports and well-defined constants.The imports are properly organized and the constants are clearly defined with appropriate values. The 7-day cookie expiry aligns with the PR objectives.
35-54: LGTM! Proper context setup with usage enforcement.The context type is well-defined and the
useSidebarhook correctly enforces usage within a provider by throwing a descriptive error.
256-280: LGTM! Accessible trigger button with proper event handling.The component correctly forwards the onClick event and provides screen-reader-only text for accessibility.
307-383: LGTM! Well-structured layout components with semantic HTML.These wrapper components use appropriate semantic HTML elements (e.g.,
<main>for SidebarInset) and provide good styling hooks via data attributes.
385-452: LGTM! Flexible group components with good mobile UX.The use of the Slot pattern for
asChildprops enables flexible composition, and the increased hit area on mobile (lines 431-432) demonstrates good attention to touch interaction design.
548-600: LGTM! Well-designed action and badge components.The components properly handle mobile touch targets with expanded hit areas (lines 566, 431) and conditionally show/hide based on sidebar state.
602-638: LGTM! Effective skeleton loading component.The use of
useMemofor random width generation (lines 610-612) prevents the skeleton from changing size on re-renders, providing a stable loading experience.
640-699: LGTM! Well-structured sub-menu components.The sub-menu components maintain semantic HTML structure and provide appropriate sizing variants. The automatic hiding in icon-collapsed mode (lines 647, 693) is a good UX decision.
701-726: LGTM! Complete export list.All components and the hook are properly exported, providing a comprehensive and well-organized public API.
173-173: The review comment is incorrect —w-(--sidebar-width)is valid Tailwind v4 syntax.In Tailwind v4, the parentheses shorthand form (e.g.,
fill-(--brand)) automatically expands tovar()and is a supported syntax for CSS custom properties. The code at line 173 uses valid and idiomatic Tailwind v4 syntax. The suggested change tow-[var(--sidebar-width)]is unnecessary; both forms are functionally equivalent in v4, but the parentheses form is more concise.Likely an incorrect or invalid review comment.
| // Show success feedback before redirect | ||
| const actionPromise = initialData | ||
| ? updateTodoAction(initialData.id, formData) | ||
| : createTodoAction(formData); | ||
|
|
||
| await toast.promise(actionPromise, { | ||
| loading: initialData ? "Updating todo..." : "Creating todo...", | ||
| success: initialData | ||
| ? "Todo updated successfully!" | ||
| : "Todo created successfully!", | ||
| error: (err) => { | ||
| // Don't show toast for Next.js redirects (flow control, not errors) | ||
| if (err instanceof Error && err.message === "NEXT_REDIRECT") { | ||
| return null; | ||
| } | ||
| return err instanceof Error ? err.message : "Failed to save todo"; | ||
| }, | ||
| }); | ||
| } catch (error) { | ||
| // Error already shown by toast.promise | ||
| console.error("Error saving todo:", error); | ||
| } | ||
| }); |
There was a problem hiding this comment.
Critical: NEXT_REDIRECT is swallowed, preventing redirects from working.
The toast.promise wrapper catches the NEXT_REDIRECT error but doesn't re-throw it, so the Next.js redirect never happens. When the error handler returns null (line 197), toast.promise suppresses the toast but also swallows the error. The outer catch block (lines 202-205) also doesn't re-throw NEXT_REDIRECT, so the user remains stuck on the form after submission.
Apply this diff to re-throw NEXT_REDIRECT in the outer catch block:
} catch (error) {
- // Error already shown by toast.promise
+ // Re-throw NEXT_REDIRECT so Next.js can handle the redirect
+ if (error instanceof Error && error.message === "NEXT_REDIRECT") {
+ throw error;
+ }
+ // Other errors already shown by toast.promise
console.error("Error saving todo:", error);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Show success feedback before redirect | |
| const actionPromise = initialData | |
| ? updateTodoAction(initialData.id, formData) | |
| : createTodoAction(formData); | |
| await toast.promise(actionPromise, { | |
| loading: initialData ? "Updating todo..." : "Creating todo...", | |
| success: initialData | |
| ? "Todo updated successfully!" | |
| : "Todo created successfully!", | |
| error: (err) => { | |
| // Don't show toast for Next.js redirects (flow control, not errors) | |
| if (err instanceof Error && err.message === "NEXT_REDIRECT") { | |
| return null; | |
| } | |
| return err instanceof Error ? err.message : "Failed to save todo"; | |
| }, | |
| }); | |
| } catch (error) { | |
| // Error already shown by toast.promise | |
| console.error("Error saving todo:", error); | |
| } | |
| }); | |
| // Show success feedback before redirect | |
| const actionPromise = initialData | |
| ? updateTodoAction(initialData.id, formData) | |
| : createTodoAction(formData); | |
| await toast.promise(actionPromise, { | |
| loading: initialData ? "Updating todo..." : "Creating todo...", | |
| success: initialData | |
| ? "Todo updated successfully!" | |
| : "Todo created successfully!", | |
| error: (err) => { | |
| // Don't show toast for Next.js redirects (flow control, not errors) | |
| if (err instanceof Error && err.message === "NEXT_REDIRECT") { | |
| return null; | |
| } | |
| return err instanceof Error ? err.message : "Failed to save todo"; | |
| }, | |
| }); | |
| } catch (error) { | |
| // Re-throw NEXT_REDIRECT so Next.js can handle the redirect | |
| if (error instanceof Error && error.message === "NEXT_REDIRECT") { | |
| throw error; | |
| } | |
| // Other errors already shown by toast.promise | |
| console.error("Error saving todo:", error); | |
| } |
🤖 Prompt for AI Agents
In src/modules/todos/components/todo-form.tsx around lines 184 to 206, the
toast.promise error handler returns null for the NEXT_REDIRECT sentinel which
suppresses the error and prevents Next.js from performing the redirect; fix this
by updating the outer catch block to detect the NEXT_REDIRECT error (err
instanceof Error && err.message === "NEXT_REDIRECT") and re-throw it
immediately, otherwise handle/log other errors as before so redirects are not
swallowed.
| const cookieStore = await cookies(); | ||
| const warningCookie = cookieStore.get("todo-warning"); | ||
| const warning = warningCookie?.value || null; | ||
|
|
||
| // Clear the cookie after reading | ||
| if (warningCookie) { | ||
| cookieStore.delete("todo-warning"); | ||
| } |
There was a problem hiding this comment.
Cannot mutate cookies from a Server Component
Calling cookies().delete(...) in this Server Component (see Line 20) will throw at runtime: Server Components only expose the read-only ReadonlyRequestCookies, and Next.js 15 explicitly blocks cookies().set/delete outside server actions or route handlers. This page will fail before rendering. Please move the clearing logic into the server action/route handler that sets the warning cookie (e.g., clear it right after you read it there) or otherwise expire it on the client, and remove the mutation from this component.Based on learnings
🤖 Prompt for AI Agents
In src/modules/todos/todo-list.page.tsx around lines 14 to 21, the code attempts
to delete a cookie using cookieStore.delete("todo-warning") inside a Server
Component which only exposes read-only cookies and will throw at runtime; remove
the delete call here and instead clear the cookie where it is created or handled
(for example immediately after reading it in the server action or route handler
that sets the "todo-warning" cookie) or implement client-side deletion/expiry
logic (e.g., set an expiring cookie or call an API route that performs the
deletion). Ensure the page only reads cookies and any mutation is moved to an
appropriate server action/route or to client-side code.
…ev#20 **Phase 1: Remove CRM Content Leak** - Delete docs/DATABASE_SCHEMA.md (CRM contacts/deals/tags from separate project) - Delete docs/IMPLEMENTATION_PHASES.md (CRM implementation phases) **Phase 2: Critical Accessibility Fixes (PR ifindev#28)** - Add ref forwarding to Popover components (PopoverTrigger, PopoverContent, PopoverAnchor) - Prevents accessibility issues with asChild pattern - Follows shadcn/ui standards with React.forwardRef + displayName **Phase 3: UX Improvements (PR ifindev#28)** - Add visual validation feedback to color picker input - Show red border when hex color is invalid - Allow partial input while typing - Remove redundant backgroundColor from button (keep only on inner div) **Phase 4: Markdown Fixes (PR ifindev#29)** - Add 'plaintext' language identifier to code block (line 67) - Fix hyphenation: "export to PDF" → "export-to-PDF" (line 1030) **Note on PR ifindev#20:** - createCategory already uses correct discriminated union pattern - No changes needed 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
MODULE_TEMPLATE.md (1)
135-135: Minor: Hyphenate compound adjective.Line 135 should use a hyphen: change "floating point issues" to "floating-point issues" when used as a modifier before a noun.
- Use `integer()` for numbers (store money in cents to avoid floating point issues) + Use `integer()` for numbers (store money in cents to avoid floating-point issues)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
MODULE_TEMPLATE.md(1 hunks)src/components/ui/color-picker.tsx(1 hunks)src/components/ui/popover.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/ui/popover.tsx
- src/components/ui/color-picker.tsx
🧰 Additional context used
🪛 LanguageTool
MODULE_TEMPLATE.md
[uncategorized] ~135-~135: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... numbers (store money in cents to avoid floating point issues) - Add .notNull() for required...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
Critical fixes:
- Add server-side file validation (5MB limit, PNG/JPEG only) in uploadToR2()
- Fix LogoutButton to accept ButtonProps (variant, className)
- Fix CSS variable syntax in sidebar: w-(--var) → w-[var(--var)]
- Fix Tailwind important modifier: size-8! → !size-8
Accessibility & best practices:
- Fix nested <Link><Button> using asChild pattern (12 instances)
- Remove nested TooltipProvider (breaks delay configuration)
- Fix sidebar rail keyboard accessibility: tabIndex={-1} → tabIndex={0}
- Document NEXT_PUBLIC_AUTH_URL environment variable in README
Code quality improvements:
- Remove unused useRouter import from todo-form.tsx
- Extract MAX_IMAGE_SIZE and ALLOWED_IMAGE_TYPES constants
- Improve type safety: style param in summarizer.service.ts
- Remove (env as any) type assertion in r2.ts
- Fix markdown linting: add language identifiers to code blocks
All changes verified with successful production build.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
src/modules/todos/components/todo-form.tsx (1)
184-206: Critical: NEXT_REDIRECT is still being swallowed, preventing redirects.This is the same critical issue identified in the previous review that has not been fixed. When the error handler returns
null(line 197),toast.promisesuppresses the toast but also swallows the error. The outer catch block (lines 202-205) doesn't re-throwNEXT_REDIRECT, so the user remains stuck on the form after submission.Apply this diff to re-throw
NEXT_REDIRECTin the outer catch block:} catch (error) { - // Error already shown by toast.promise + // Re-throw NEXT_REDIRECT so Next.js can handle the redirect + if (error instanceof Error && error.message === "NEXT_REDIRECT") { + throw error; + } + // Other errors already shown by toast.promise console.error("Error saving todo:", error); }
🧹 Nitpick comments (3)
MODULE_TEMPLATE.md (1)
135-135: Use hyphenated compound adjective.Line 135 mentions "floating point issues" but when this phrase modifies the following noun, it should be hyphenated: "floating-point issues."
Apply this fix:
- Add `.notNull()` for required fields - Use `text()` for strings and IDs (D1 is SQLite) - Use `integer()` for numbers (store money in cents to avoid floating point issues) + Use `integer()` for numbers (store money in cents to avoid floating-point issues)src/modules/todos/components/todo-form.tsx (1)
535-575: Button states provide excellent user feedback.The disabled states and loading indicators are well-implemented. The dynamic button text clearly communicates the operation state (creating vs. updating, with or without image), and the spinner provides good visual feedback during async operations.
Optionally, consider extracting the inline spinner SVG (lines 542-561) into a reusable
<Spinner>component if it's used elsewhere in the codebase, though the current implementation is acceptable.src/modules/auth/components/logout-button.tsx (1)
17-29: Consider adding user-facing error feedback.The logout flow is sound, but errors are only logged to console. Consider showing a toast notification or alert when logout fails to improve UX.
Example enhancement:
} else { console.error("Logout failed:", result.message); + // toast.error("Failed to log out. Please try again."); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
CLAUDE.md(1 hunks)MODULE_TEMPLATE.md(1 hunks)README.md(5 hunks)src/app/(demo)/layout-demo/hybrid/page.tsx(1 hunks)src/app/(demo)/layout-demo/sidebar/page.tsx(1 hunks)src/components/ui/sidebar.tsx(1 hunks)src/components/ui/tooltip.tsx(1 hunks)src/lib/r2.ts(2 hunks)src/modules/auth/components/logout-button.tsx(2 hunks)src/modules/dashboard/dashboard.page.tsx(4 hunks)src/modules/layouts/top-nav/top-nav.layout.tsx(1 hunks)src/modules/todos/components/todo-form.tsx(7 hunks)src/services/summarizer.service.ts(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- src/app/(demo)/layout-demo/hybrid/page.tsx
- src/services/summarizer.service.ts
- src/lib/r2.ts
- src/components/ui/tooltip.tsx
- src/app/(demo)/layout-demo/sidebar/page.tsx
🧰 Additional context used
🧬 Code graph analysis (4)
src/modules/todos/components/todo-form.tsx (2)
src/modules/todos/actions/update-todo.action.ts (1)
updateTodoAction(17-114)src/modules/todos/actions/create-todo.action.ts (1)
createTodoAction(13-110)
src/modules/layouts/top-nav/top-nav.layout.tsx (3)
src/modules/auth/utils/auth-utils.ts (1)
getCurrentUser(50-70)src/components/mode-toggle.tsx (1)
ModeToggle(8-44)src/modules/layouts/components/user-nav.tsx (1)
UserNav(21-71)
src/components/ui/sidebar.tsx (8)
src/hooks/use-mobile.ts (1)
useIsMobile(5-19)src/components/ui/tooltip.tsx (4)
TooltipProvider(57-57)TooltipContent(57-57)Tooltip(57-57)TooltipTrigger(57-57)src/lib/utils.ts (1)
cn(4-6)src/components/ui/sheet.tsx (5)
Sheet(131-131)SheetContent(134-134)SheetHeader(135-135)SheetTitle(137-137)SheetDescription(138-138)src/components/ui/button.tsx (1)
Button(58-58)src/components/ui/input.tsx (1)
Input(21-21)src/components/ui/separator.tsx (1)
Separator(28-28)src/components/ui/skeleton.tsx (1)
Skeleton(13-13)
src/modules/dashboard/dashboard.page.tsx (6)
src/app/(demo)/layout-demo/sidebar/layout.tsx (1)
Layout(3-9)src/app/(demo)/layout-demo/hybrid/layout.tsx (1)
Layout(3-9)src/app/(demo)/layout-demo/top-nav/layout.tsx (1)
Layout(3-9)src/app/marketing-demo/layout.tsx (1)
Layout(3-9)src/app/(demo)/layout-demo/centered/layout.tsx (1)
Layout(3-9)src/app/dashboard/layout.tsx (1)
Layout(3-9)
🪛 LanguageTool
MODULE_TEMPLATE.md
[uncategorized] ~135-~135: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... numbers (store money in cents to avoid floating point issues) - Add .notNull() for required...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
🪛 markdownlint-cli2 (0.18.1)
CLAUDE.md
67-67: Bare URL used
(MD034, no-bare-urls)
68-68: Bare URL used
(MD034, no-bare-urls)
159-159: Bare URL used
(MD034, no-bare-urls)
687-687: Bare URL used
(MD034, no-bare-urls)
🔇 Additional comments (17)
CLAUDE.md (2)
67-68: Wrap bare URLs in markdown link syntax.Lines 67, 68, and 159 contain bare URLs that should be wrapped in markdown links per linting standards (
[text](url)format). This addresses markdownlint rule MD034 (no-bare-urls).For example, line 67-68:
- **Next.js app:** [http://localhost:3000](http://localhost:3000) - **Wrangler dev:** [http://localhost:8787](http://localhost:8787)And line 159:
- [http://localhost:3000](http://localhost:3000) (use this for development)Also applies to: 159-159
1-687: Comprehensive AI project context—excellent for onboarding.CLAUDE.md provides valuable context for Claude Code sessions with well-structured sections on tech stack, workflows, architecture decisions, and troubleshooting. Coverage of known issues (e.g., Radix UI Select, D1 persistence, better-auth cookies) will help prevent common pitfalls. The document aligns well with MODULES.md and MODULE_TEMPLATE.md added in this PR.
MODULE_TEMPLATE.md (4)
84-131: Excellent schema and validation setup with Drizzle + Zod.The schema definition correctly uses Drizzle's SQLite patterns (text for IDs, integer for currency), combines
createInsertSchemaandcreateSelectSchemafrom drizzle-zod, and adds custom Zod validation. Money stored in cents avoids floating-point precision issues—a solid practice. Types are properly inferred from schemas.
183-416: Robust CRUD server actions with proper authentication and user isolation.All five actions properly:
- Check authentication before proceeding
- Filter/operate only on user-owned data (userId checks)
- Validate input with Zod schemas
- Use
revalidatePathfor ISR- Provide structured response objects (
{ success, data, error })- Handle errors gracefully with appropriate logging
Security model is strong. The pattern is production-ready.
420-817: Well-designed components with proper async/await patterns and React 19 transitions.Components leverage:
- Server Components (InvoiceList, InvoiceCard) for data fetching
- Client Components (InvoiceForm, DeleteInvoice) with
useTransitionfor loading states- React Hook Form + Zod for form validation
- Proper error boundaries (alert dialogs, error messages)
- Accessibility features (AlertDialog, proper form structure)
The form components correctly handle both create and edit modes, and the delete component includes confirmation—good UX practices.
1-1058: Excellent module template that encodes established best practices.MODULE_TEMPLATE.md provides a realistic, production-ready pattern for creating CRUD modules. The Invoices example is comprehensive and clearly demonstrates:
- Database schema design
- Server actions with security
- React 19 + Next.js 15 patterns
- Error handling and loading states
- Type safety end-to-end
Following this template should yield consistent, maintainable modules across the codebase.
README.md (4)
5-76: Excellent restructuring emphasizes modular architecture and layout flexibility.The new Modular Architecture section (lines 15–48) clearly positions the template as a starter kit with reusable features, backed by MODULES.md. The Flexible Layouts section (lines 50–78) provides a comparative table and quick-start example, making it easy for new users to choose the right layout. Both sections are well-written and serve as entry points to deeper documentation.
220-220: New environment variables properly documented and consistently placed.CLOUDFLARE_D1_DATABASE_ID and NEXT_PUBLIC_AUTH_URL are introduced and explained:
- Line 220: Defined in local setup
- Line 227: Defined with description ("SSR fallback for auth URL")
- Line 406: Repeated in manual setup
- Line 411: Repeated in manual setup
NEXT_PUBLIC_AUTH_URL is correctly prefixed (frontend-accessible). Documentation at lines 336–339 clearly explains how to obtain CLOUDFLARE_D1_DATABASE_ID from
wrangler d1 createoutput. Good consistency with CLAUDE.md environment setup section.Also applies to: 227-227, 406-406, 411-411
328-376: Clear and comprehensive D1 database setup documentation.Step-by-step instructions for creating a D1 database, obtaining the database_id, and updating wrangler.jsonc are well-structured. The explanation that database_id must be copied to both
wrangler.jsoncand.dev.varsremoves ambiguity. This aligns with CLAUDE.md's database workflow section.
1-880: Well-organized README with strong cross-references and modern Next.js/Cloudflare patterns.README successfully balances quick-start guidance, detailed setup instructions, and reference material. New sections (Modular Architecture, Flexible Layouts) are well-integrated. Tech stack, environment setup, and deployment instructions are accurate and current (Next.js 15, React 19, Cloudflare Workers, D1, better-auth, Drizzle). Code examples follow modern patterns. Cross-references to MODULES.md, MODULE_TEMPLATE.md, and CLAUDE.md create good documentation coherence.
The document is comprehensive, accessible for new users, and technically sound.
src/modules/todos/components/todo-form.tsx (3)
71-73: Constants are well-defined.The validation constants correctly match the documented limits. Note that
"image/jpg"is technically redundant with"image/jpeg"(they're the same MIME type), but including both ensures compatibility with different file systems and browsers.
113-137: Client-side validation is well-implemented.The validation flow correctly checks size first, then type, with appropriate user feedback via toast messages. Input is properly reset on validation failure to prevent invalid files from being retained.
479-499: Image upload UI properly uses semantic tokens.The upload area correctly uses semantic design tokens (
border-border,text-muted-foreground,text-primary) for theme compatibility. Theaccept="image/*"attribute is appropriately paired with validation inhandleImageChangeto provide both good UX and security.src/modules/layouts/top-nav/top-nav.layout.tsx (1)
24-110: LGTM! Accessibility issue resolved.The invalid nested Link/Button markup has been correctly fixed throughout the component. Both desktop (lines 45-56) and mobile (lines 84-95) navigation now use the
Button asChildpattern withLinkas the child, producing valid HTML and proper keyboard/focus behavior.src/modules/dashboard/dashboard.page.tsx (1)
1-123: LGTM! Proper Button/Link composition and consistent design tokens.The updates correctly implement the
Button asChildpattern throughout (lines 37-42, 57-62, 77-82), ensuring valid HTML semantics. The styling changes consistently use design tokens (text-muted-foreground,bg-primary/10,text-primary) and the new Layout Demos card integrates well with the existing dashboard structure.src/components/ui/sidebar.tsx (1)
190-305: LGTM! All previously flagged issues resolved.All CSS variable syntax issues have been correctly fixed:
- Lines 190, 221, 232, 239: Now use
w-[var(--sidebar-width)]andw-[var(--sidebar-width-icon)]syntax- Lines 238:
calc(var(--sidebar-width-icon)+1rem+2px)correctly formattedThe accessibility issue with
SidebarRail(line 290) has been resolved by settingtabIndex={0}, making it keyboard accessible.The Tailwind important modifier syntax (lines 477, 488) now correctly uses prefix notation (
!size-8,!p-2,!p-0).Also applies to: 477-488
src/modules/auth/components/logout-button.tsx (1)
8-12: LGTM! Good props forwarding pattern.The type-only React import and ComponentProps extension follow React/TypeScript best practices for component composition.
| /> | ||
| )} | ||
| <Skeleton | ||
| className="h-4 max-w-(--skeleton-width) flex-1" |
There was a problem hiding this comment.
Fix CSS variable syntax in SidebarMenuSkeleton.
Line 628 uses invalid Tailwind syntax max-w-(--skeleton-width). This should use square bracket notation with var() to properly reference the CSS custom property.
Apply this diff:
- className="h-4 max-w-(--skeleton-width) flex-1"
+ className="h-4 max-w-[var(--skeleton-width)] flex-1"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className="h-4 max-w-(--skeleton-width) flex-1" | |
| className="h-4 max-w-[var(--skeleton-width)] flex-1" |
🤖 Prompt for AI Agents
In src/components/ui/sidebar.tsx around line 628, the Tailwind class uses
invalid syntax `max-w-(--skeleton-width)`; replace it with the square-bracket
variant using var() so the class becomes the correct Tailwind custom property
reference (e.g., max-w-[var(--skeleton-width)]) to properly apply the CSS
variable.
|
|
||
| return ( | ||
| <Button variant="ghost" onClick={handleLogout}> | ||
| <Button variant={variant} className={className} onClick={handleLogout} {...props}> |
There was a problem hiding this comment.
Fix prop spreading order to prevent onClick override.
The {...props} spread occurs after onClick={handleLogout}, which means if a caller passes onClick as a prop, it will override the logout handler and break the component's core functionality.
While current usage in the codebase doesn't pass onClick (so this isn't actively broken), it's a serious API design flaw that could cause bugs.
Apply this diff to extract and ignore onClick from forwarded props:
-export default function LogoutButton({ variant = "ghost", className, ...props }: LogoutButtonProps) {
+export default function LogoutButton({ variant = "ghost", className, onClick: _ignored, ...props }: LogoutButtonProps) {
const router = useRouter();Alternatively, if you want to support custom onClick handlers in addition to logout:
-export default function LogoutButton({ variant = "ghost", className, ...props }: LogoutButtonProps) {
+export default function LogoutButton({ variant = "ghost", className, onClick, ...props }: LogoutButtonProps) {
const router = useRouter();
const handleLogout = async () => {
try {
const result = await signOut();
if (result.success) {
router.push(authRoutes.login);
router.refresh(); // Refresh to clear any cached data
} else {
console.error("Logout failed:", result.message);
}
} catch (error) {
console.error("Logout error:", error);
}
+ onClick?.(); // Call custom handler if provided
};Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/modules/auth/components/logout-button.tsx around line 32, the spread
{...props} is placed after onClick={handleLogout} which allows a
consumer-provided onClick to override the logout handler; extract onClick from
the incoming props (e.g. const { onClick, ...rest } = props) and pass only rest
into the Button so the component's handleLogout cannot be overridden, or if you
want to allow extra behavior, compose handlers by calling handleLogout first and
then calling the extracted onClick (if present) inside a wrapper function and
pass that wrapper as the Button onClick, then spread the remaining props.
Major rebrand from fork to independent Jezweb open source project. ## Branding Changes - Project name: fullstack-next-cloudflare-demo → Full Flare Stack - Version: 0.1.0 → 1.0.0 (production-ready) - Repository: github.com/jezweb/full-flare-stack - License: MIT (Jez Dawes / Jezweb) - Status: Public open source project ## Documentation Added - Complete README.md rewrite with new branding and value proposition - CHANGELOG.md documenting fork history and v1.0.0 improvements - COMPONENT_INVENTORY.md (43 shadcn/ui components documented) - COMPOSED_PATTERNS_ROADMAP.md (pattern build priorities) - docs/development-planning/ (architecture guides) - docs/templates/PATTERN_TEMPLATE.md ## Architecture Improvements - Three-layer component system (primitives → patterns → features) - Component decision framework - 43 shadcn/ui components pre-installed - Pattern extraction methodology (after 3rd use) - Comprehensive development workflow documentation ## Acknowledgments - Original template: @ifindev/fullstack-next-cloudflare - Contributed 11 PRs (ifindev#11-21) with fixes and documentation upstream - Thank you to @ifindev for the excellent starting point! BREAKING CHANGE: Project renamed to Full Flare Stack 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Nitpick comments (18)
src/components/ui/sonner.tsx (1)
20-26: Consider memoizing the icons object.The icons object is recreated on every render. While the performance impact is minimal, memoizing it would be a minor optimization.
Apply this diff to memoize the icons object:
+"use client" + +import { useMemo } from "react" import { CircleCheckIcon, InfoIcon, @@ -13,14 +14,16 @@ const Toaster = ({ ...props }: ToasterProps) => { const { theme = "system" } = useTheme() + const icons = useMemo( + () => ({ + success: <CircleCheckIcon className="size-4" />, + info: <InfoIcon className="size-4" />, + warning: <TriangleAlertIcon className="size-4" />, + error: <OctagonXIcon className="size-4" />, + loading: <Loader2Icon className="size-4 animate-spin" />, + }), + [] + ) + return ( <Sonner theme={theme as ToasterProps["theme"]} className="toaster group" - icons={{ - success: <CircleCheckIcon className="size-4" />, - info: <InfoIcon className="size-4" />, - warning: <TriangleAlertIcon className="size-4" />, - error: <OctagonXIcon className="size-4" />, - loading: <Loader2Icon className="size-4 animate-spin" />, - }} + icons={icons} style={src/components/ui/table.tsx (1)
7-116: AdoptforwardRefacross the table primitivesRight now none of these slots forward refs, so consumers can’t attach refs to the underlying table/row/cell when composing interactions (focus management, sticky headers, animations). Every other primitive in this module suite has been using
React.forwardRef+displayNamefor consistency, so this one should too.Suggested refactor pattern:
- function Table({ className, ...props }: React.ComponentProps<"table">) { - return ( - <div data-slot="table-container" className="relative w-full overflow-x-auto"> - <table - data-slot="table" - className={cn("w-full caption-bottom text-sm", className)} - {...props} - /> - </div> - ) -} +const Table = React.forwardRef< + HTMLTableElement, + React.ComponentPropsWithoutRef<"table"> +>(({ className, ...props }, ref) => ( + <div data-slot="table-container" className="relative w-full overflow-x-auto"> + <table + ref={ref} + data-slot="table" + className={cn("w-full caption-bottom text-sm", className)} + {...props} + /> + </div> +)) +Table.displayName = "Table"Replicate the same treatment for
TableHeader,TableBody,TableFooter,TableRow,TableHead,TableCell, andTableCaption(using the correct DOM element types likeHTMLTableSectionElement,HTMLTableRowElement, etc.). This keeps the API aligned with the rest of the primitives and preserves ref-based integrations.src/components/ui/scroll-area.tsx (2)
8-29: Consider adding ref forwarding and displayName.The component implementation is correct and follows Radix UI patterns. However, for improved developer experience, consider:
- Using
React.forwardRefto enable ref forwarding to the Root element- Setting
displayNamefor better debugging in React DevToolsApply this diff to add ref forwarding and displayName:
-function ScrollArea({ +const ScrollArea = React.forwardRef< + React.ElementRef<typeof ScrollAreaPrimitive.Root>, + React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> +>(({ className, children, ...props -}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) { +}, ref) => { return ( <ScrollAreaPrimitive.Root + ref={ref} data-slot="scroll-area" className={cn("relative", className)} {...props} > <ScrollAreaPrimitive.Viewport data-slot="scroll-area-viewport" className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1" > {children} </ScrollAreaPrimitive.Viewport> <ScrollBar /> <ScrollAreaPrimitive.Corner /> </ScrollAreaPrimitive.Root> ) -} +}) +ScrollArea.displayName = "ScrollArea"
31-56: Consider adding ref forwarding and displayName.The ScrollBar implementation is correct with proper orientation handling. Similar to ScrollArea, consider adding ref forwarding and displayName for consistency and improved DX.
Apply this diff:
-function ScrollBar({ +const ScrollBar = React.forwardRef< + React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>, + React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> +>(({ className, orientation = "vertical", ...props -}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) { +}, ref) => { return ( <ScrollAreaPrimitive.ScrollAreaScrollbar + ref={ref} data-slot="scroll-area-scrollbar" orientation={orientation} className={cn( "flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className )} {...props} > <ScrollAreaPrimitive.ScrollAreaThumb data-slot="scroll-area-thumb" className="bg-border relative flex-1 rounded-full" /> </ScrollAreaPrimitive.ScrollAreaScrollbar> ) -} +}) +ScrollBar.displayName = "ScrollBar"src/components/ui/radio-group.tsx (1)
1-45: LGTM! Well-implemented RadioGroup component following shadcn/ui patterns.The implementation is clean and follows best practices:
- Proper React 19 function component usage
- Radix UI ensures accessibility (ARIA, keyboard navigation)
- Comprehensive state styling (focus-visible, disabled, aria-invalid, dark mode)
- Tailwind v4 syntax with semantic tokens and slash notation for opacity
- data-slot attributes align with the PR's extensibility pattern
- @radix-ui/react-radio-group v1.3.8 is current with no known security vulnerabilities
Optional: Add displayName for better debugging.
Consider adding
displayNameto both components for improved React DevTools experience during development:RadioGroup.displayName = "RadioGroup" RadioGroupItem.displayName = "RadioGroupItem"src/components/ui/tabs.tsx (1)
44-46: Consider splitting the long className for readability.The
TabsTriggerclassName string spans ~400 characters on a single line. While functionally correct and typical of shadcn components, splitting it across multiple lines or extracting repeated patterns could improve maintainability.For example:
className={cn( - "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5", + "rounded-md border border-transparent px-2 py-1", + "text-sm font-medium whitespace-nowrap text-foreground dark:text-muted-foreground", + "transition-[color,box-shadow]", + "data-[state=active]:bg-background data-[state=active]:shadow-sm", + "dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30", + "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:outline-1", + "disabled:pointer-events-none disabled:opacity-50", + "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className )}src/components/ui/pagination.tsx (2)
68-83: Add explicit icon size for consistency.The
ChevronLeftIcondoesn't have an explicit size class, whileMoreHorizontalIconinPaginationEllipsisusesclassName="size-4". This inconsistency could lead to unexpected icon sizing across different browsers or CSS resets.Apply this diff to ensure consistent icon sizing:
- <ChevronLeftIcon /> + <ChevronLeftIcon className="size-4" />
85-100: Add explicit icon size for consistency.Similar to
PaginationPrevious, theChevronRightIconshould have an explicit size class to match the sizing used inPaginationEllipsis.Apply this diff:
- <ChevronRightIcon /> + <ChevronRightIcon className="size-4" />docs/development-planning/architecture-overview.md (1)
44-44: Add language specifiers to fenced code blocks. Four code blocks lack language specification (lines 44, 82, 108, 153). Update for consistency:-\`\`\` +\`\`\`yamlor
\``typescript`, depending on content. This improves IDE syntax highlighting in rendered markdown and aligns with markdownlint rules.Also applies to: 82-82, 108-108, 153-153
docs/development-planning/component-decision-framework.md (2)
9-9: Add language specification to fenced code block. Line 9 lacks a language specifier. Update:-\`\`\` +\`\`\`(Note: This block appears to be a decision tree, so the language spec may be optional here, but for consistency with other markdown files, consider wrapping in
markdownor leaving as-is if intentional).
50-52: Clarify phrasing on line 52. The phrase "needed - Used everywhere" is awkward. Consider:-- Maximum flexibility needed - Used everywhere +- Maximum flexibility needed +- Used everywhereor combine as: "Maximum flexibility needed; used everywhere."
docs/COMPONENT_INVENTORY.md (2)
112-209: Use headings instead of bold emphasis for pattern section titles. Lines 112-209 use**PatternName**(emphasis) to mark pattern sections. Convert to proper headings for better markdown structure:-**DataTable** +### DataTableThis improves document structure, enables proper TOC generation, and aligns with markdown best practices.
159-159: Wrap bare URLs in markdown link syntax. Lines 159, 230, 241–243 contain bare URLs. Convert to markdown links:-Reference: https://ui.shadcn.com/docs/components/combobox +Reference: [shadcn Combobox docs](https://ui.shadcn.com/docs/components/combobox)This improves readability and is consistent with markdown conventions.
Also applies to: 230-230, 241-243
docs/COMPOSED_PATTERNS_ROADMAP.md (1)
72-72: Wrap bare URLs in markdown link syntax. Multiple bare URLs throughout (lines 72, 159, 230, 241–243, 363, 877–879) should be converted to markdown links for consistency:-Reference: https://tanstack.com/table/latest +Reference: [TanStack Table](https://tanstack.com/table/latest)This improves readability and maintains formatting consistency with other documentation files.
Also applies to: 159-159, 230-230, 241-243, 363-363, 877-879
docs/templates/PATTERN_TEMPLATE.md (1)
270-270: Add language specification to fenced code block on line 270. The file/directory structure block lacks a language specifier. Update:-\`\`\` +\`\`\`bash(or leave blank if representing a file tree, but consistency with other blocks is recommended).
README.md (2)
10-10: Use hyphenated compound adjective. Line 10 should read "Open-Source Project" when modifying the noun. Update:-> A [Jezweb](https://jezweb.com.au) Open-Source ProjectThis is the grammatically correct form when "open source" modifies the following noun.
107-108: Wrap bare URLs in markdown link syntax. Lines 107–108 contain bare URLs that should be formatted as markdown links:-**See:** [Component Architecture Docs](./docs/development-planning/) -**See:** [Component Inventory](./docs/COMPONENT_INVENTORY.md) • [Build Roadmap](./docs/COMPOSED_PATTERNS_ROADMAP.md)These appear to already be in link format, so if not, convert bare URLs to bracketed links for consistency.
src/components/ui/toggle-group.tsx (1)
67-75: Consider extracting the complex spacing=0 utilities for maintainability.The conditional utility classes on line 73 implement connected button styling when
spacing=0. While the logic is correct, the long string with multipledata-[spacing=0]:conditions could benefit from extraction:const spacingZeroClasses = [ "data-[spacing=0]:rounded-none", "data-[spacing=0]:shadow-none", "data-[spacing=0]:first:rounded-l-md", "data-[spacing=0]:last:rounded-r-md", "data-[spacing=0]:data-[variant=outline]:border-l-0", "data-[spacing=0]:data-[variant=outline]:first:border-l", ].join(" "); // Then in className: className={cn( toggleVariants({ variant: variant ?? context.variant, size: size ?? context.size }), "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10", spacingZeroClasses, className )}This improves readability while preserving the same functionality.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (30)
CHANGELOG.md(1 hunks)CLAUDE.md(1 hunks)README.md(1 hunks)docs/COMPONENT_INVENTORY.md(1 hunks)docs/COMPOSED_PATTERNS_ROADMAP.md(1 hunks)docs/development-planning/README.md(1 hunks)docs/development-planning/architecture-overview.md(1 hunks)docs/development-planning/architecture-quick-reference.md(1 hunks)docs/development-planning/component-decision-framework.md(1 hunks)docs/development-planning/module-development-guide.md(1 hunks)docs/development-planning/pattern-library-plan.md(1 hunks)docs/templates/PATTERN_TEMPLATE.md(1 hunks)package.json(3 hunks)src/components/ui/accordion.tsx(1 hunks)src/components/ui/alert.tsx(1 hunks)src/components/ui/breadcrumb.tsx(1 hunks)src/components/ui/calendar.tsx(1 hunks)src/components/ui/command.tsx(1 hunks)src/components/ui/hover-card.tsx(1 hunks)src/components/ui/pagination.tsx(1 hunks)src/components/ui/progress.tsx(1 hunks)src/components/ui/radio-group.tsx(1 hunks)src/components/ui/scroll-area.tsx(1 hunks)src/components/ui/slider.tsx(1 hunks)src/components/ui/sonner.tsx(1 hunks)src/components/ui/switch.tsx(1 hunks)src/components/ui/table.tsx(1 hunks)src/components/ui/tabs.tsx(1 hunks)src/components/ui/toggle-group.tsx(1 hunks)src/components/ui/toggle.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (15)
src/components/ui/tabs.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/components/ui/toggle.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/components/ui/scroll-area.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/components/ui/accordion.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/components/ui/progress.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/components/ui/alert.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/components/ui/hover-card.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/components/ui/command.tsx (2)
src/lib/utils.ts (1)
cn(4-6)src/components/ui/dialog.tsx (5)
Dialog(136-136)DialogHeader(141-141)DialogTitle(144-144)DialogDescription(139-139)DialogContent(138-138)
src/components/ui/radio-group.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/components/ui/pagination.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/components/ui/table.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/components/ui/switch.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/components/ui/breadcrumb.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/components/ui/slider.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/components/ui/toggle-group.tsx (2)
src/components/ui/toggle.tsx (1)
toggleVariants(47-47)src/lib/utils.ts (1)
cn(4-6)
🪛 LanguageTool
docs/development-planning/component-decision-framework.md
[style] ~52-~52: The double modal “needed Used” is nonstandard (only accepted in certain dialects). Consider “to be Used”.
Context: ...ss logic - Maximum flexibility needed - Used everywhere Examples: - ✅ Button - ...
(NEEDS_FIXED)
docs/development-planning/pattern-library-plan.md
[style] ~202-~202: Consider using a different verb to strengthen your wording.
Context: ...🏗️ Why Second: Consistent layouts speed up development and improve UX. ### 2.1 Da...
(SPEED_UP_ACCELERATE)
README.md
[uncategorized] ~10-~10: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: .../) > A Jezweb Open Source Project > Maintained by [Jez Dawes](htt...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
🪛 markdownlint-cli2 (0.18.1)
CHANGELOG.md
18-18: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
24-24: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
49-49: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
55-55: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
86-86: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
94-94: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
100-100: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
docs/development-planning/component-decision-framework.md
9-9: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
docs/development-planning/architecture-overview.md
44-44: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
82-82: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
108-108: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
153-153: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
docs/templates/PATTERN_TEMPLATE.md
270-270: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
README.md
5-5: Bare URL used
(MD034, no-bare-urls)
107-107: Bare URL used
(MD034, no-bare-urls)
108-108: Bare URL used
(MD034, no-bare-urls)
199-199: Bare URL used
(MD034, no-bare-urls)
docs/COMPONENT_INVENTORY.md
112-112: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
116-116: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
120-120: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
124-124: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
128-128: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
136-136: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
140-140: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
144-144: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
152-152: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
159-159: Bare URL used
(MD034, no-bare-urls)
161-161: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
165-165: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
169-169: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
177-177: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
181-181: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
185-185: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
189-189: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
197-197: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
201-201: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
205-205: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
230-230: Bare URL used
(MD034, no-bare-urls)
241-241: Bare URL used
(MD034, no-bare-urls)
242-242: Bare URL used
(MD034, no-bare-urls)
243-243: Bare URL used
(MD034, no-bare-urls)
docs/development-planning/README.md
72-72: Bare URL used
(MD034, no-bare-urls)
73-73: Bare URL used
(MD034, no-bare-urls)
363-363: Bare URL used
(MD034, no-bare-urls)
docs/development-planning/architecture-quick-reference.md
11-11: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
31-31: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
192-192: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
205-205: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
216-216: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
docs/development-planning/module-development-guide.md
21-21: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🔇 Additional comments (41)
src/components/ui/hover-card.tsx (1)
1-44: LGTM! Clean Radix UI wrapper following established patterns.This hover-card implementation correctly wraps Radix UI primitives with proper:
- Client component directive for Next.js App Router
- TypeScript typing using
React.ComponentProps- Portal usage in
HoverCardContentfor proper z-index handling- Tailwind v4 syntax (
outline-hiddenandorigin-(--custom-prop)with parentheses)- Consistent
data-slotattributes across all components- Default props (
align="center",sideOffset={4}) that match Radix best practicesThe pattern is consistent with other UI primitives added in this PR (tooltip, popover, dropdown-menu) and follows shadcn/ui conventions.
src/components/ui/sonner.tsx (3)
1-11: LGTM!The "use client" directive is correctly placed, and all imports are properly structured. The component appropriately uses client-side hooks, making this directive necessary for Next.js App Router compatibility.
27-34: Good design system integration.The CSS variable mappings correctly bridge Sonner's internal variables with your app's design tokens (popover, border, radius). The type assertion for custom CSS properties is a standard and necessary pattern.
40-40: LGTM!Clean named export following standard conventions.
src/components/ui/scroll-area.tsx (1)
1-6: LGTM! Imports and directive are correct.The "use client" directive is appropriate for this Radix UI wrapper, and all necessary dependencies are imported correctly.
src/components/ui/breadcrumb.tsx (7)
7-9: LGTM! Proper semantic breadcrumb navigation.The component correctly uses a
<nav>element witharia-label="breadcrumb"for accessibility.
11-22: LGTM! Well-structured breadcrumb list.The component correctly uses an ordered list with responsive design and semantic color tokens.
24-32: LGTM! Clean breadcrumb item wrapper.Simple and effective list item component with appropriate flexbox layout.
34-50: LGTM! Flexible link component with proper polymorphism.The
asChildpattern correctly leverages Radix Slot for composition, and the hover/transition styles enhance UX.
65-81: LGTM! Accessible separator with flexible content.Correctly uses
role="presentation"andaria-hidden="true"to hide the decorative separator from assistive technology, with sensible ChevronRight default.
83-99: LGTM! Excellent accessibility pattern for ellipsis.Properly hides the visual icon from assistive technology while providing meaningful "More" text via
sr-onlyfor screen readers.
101-109: LGTM! Complete component exports.All seven breadcrumb components are properly exported for consumption.
src/components/ui/tabs.tsx (1)
1-66: LGTM! Clean Radix UI wrapper following shadcn/ui conventions.The Tabs component implementation is well-structured and follows the established pattern for wrapping Radix UI primitives in this PR. Type inference via
React.ComponentProps, consistentdata-slotattributes, proper prop spreading, and thecnutility for className merging are all correctly applied. The styling includes comprehensive states (active, focus-visible, dark mode, disabled) and accessibility is preserved from the underlying Radix primitives.src/components/ui/command.tsx (9)
1-14: LGTM!The imports and "use client" directive are correctly configured for a client-side command palette component.
16-30: LGTM!The Command component correctly wraps the cmdk primitive with appropriate theming and data attributes.
63-83: LGTM!The CommandInput component correctly composes the search icon and input field with appropriate Tailwind v4 utilities (including
outline-hidden).
85-99: LGTM!The CommandList component provides appropriate scroll behavior with a reasonable max-height constraint.
101-111: LGTM!The CommandEmpty component provides a clean empty state presentation.
113-127: LGTM!The CommandGroup component applies comprehensive styling for group headers and structure using consistent nested selectors.
129-140: LGTM!The CommandSeparator provides a simple, clean visual divider.
142-156: LGTM!The CommandItem component provides comprehensive styling for all interactive states (selected, disabled) with proper data-attribute selectors.
158-184: LGTM!The CommandShortcut component and exports are correctly implemented.
src/components/ui/switch.tsx (1)
8-29: LGTM - Clean implementation following React 19 patterns.The Switch component correctly leverages React 19's ref-as-prop feature, eliminating the need for
forwardRef. The Radix UI integration is properly implemented with appropriate styling and accessibility features.docs/development-planning/README.md (1)
1-401: LGTM - Comprehensive architecture documentation.This documentation provides excellent guidance for the three-layer architecture. The structure is clear, examples are practical, and the step-by-step guides will help developers understand the system quickly.
CHANGELOG.md (1)
1-138: LGTM - Well-structured changelog.The changelog provides comprehensive release notes with clear categorization of changes. The format follows Keep a Changelog conventions and provides good context for the v1.0.0 release.
CLAUDE.md (1)
1-754: LGTM - Excellent project context documentation.This is an outstanding reference document that will significantly help both AI assistants and human developers understand the project. The comprehensive coverage of workflows, architecture decisions, known issues, and troubleshooting makes this an invaluable resource.
docs/development-planning/pattern-library-plan.md (1)
1-745: LGTM - Comprehensive pattern library roadmap.This document provides excellent guidance for building reusable UI patterns. The prioritization is logical (data display → layouts → forms → feedback), and the detailed specifications with props interfaces and examples will help ensure consistent implementation.
docs/development-planning/architecture-quick-reference.md (1)
1-508: LGTM - Excellent quick reference guide.This document successfully distills the architecture into actionable quick-reference format. The decision trees, code snippets, and common mistakes section provide immediate value for developers making day-to-day decisions.
docs/development-planning/module-development-guide.md (1)
1-843: LGTM - Comprehensive module development guide.This guide provides excellent step-by-step instructions for building feature modules. The code examples are production-ready and follow best practices throughout. The patterns for server actions, type safety, and component design are well-documented and consistent.
package.json (2)
2-24: Project metadata appropriately updated for production release. Lines 2-24 show well-considered shifts to public-facing identity (name, version, description, license, keywords). The metadata now clearly communicates the tech stack and value proposition.
54-54: Dependency expansion verified and approved for 43-component shadcn foundation. Wrangler 4.46.0 is compatible with @opennextjs/cloudflare 1.11.1 (which requires Wrangler ≥ 3.99.0). All Radix UI packages, supporting libraries (sonner, date-fns, next-themes), and shadcn CLI are appropriate additions for the modular layouts system.Ensure wrangler.toml includes
nodejs_compat = trueandcompatibility_date = "2024-09-23"(or later) as required by OpenNext documentation.README.md (1)
199-199: Verify URL formatting consistency on line 199. If this is a bare URL, wrap it in markdown link syntax:-pnpm wrangler d1 create full-flare-stack(This line appears to be a command, not a URL, so it may be correctly formatted as-is. If there's a bare URL elsewhere on line 199, ensure it's wrapped in markdown link format.)
src/components/ui/progress.tsx (1)
1-31: LGTM! Well-implemented Progress component.The component correctly wraps Radix UI's Progress primitives and the transform calculation on line 25 is accurate for a left-to-right progress animation. The use of
(value || 0)provides a safe fallback for undefined values.src/components/ui/accordion.tsx (2)
9-48: LGTM! Well-structured Accordion components.The Accordion, AccordionItem, and AccordionTrigger components follow shadcn/ui patterns correctly. The use of data-slot attributes enables testing, the ChevronDownIcon rotation provides good UX feedback, and the focus-visible states ensure proper accessibility.
50-64: Accordion animations are properly defined via the tw-animate-css package.The tw-animate-css package (v1.3.8) is already installed and imported in your globals.css, and it provides the accordion-down and accordion-up animations used in the component. The Radix accordion automatically sets the required CSS variable for the animations to function. No additional configuration is needed.
src/components/ui/alert.tsx (4)
1-4: LGTM!Imports are clean and appropriate for the component's needs.
22-35: LGTM!The Alert component follows best practices with proper TypeScript typing, accessibility semantics (
role="alert"), and flexible prop forwarding.
50-64: LGTM!AlertDescription is well-implemented with appropriate styling for secondary content and nice attention to nested paragraph formatting.
66-66: LGTM!Clean named exports following standard patterns.
src/components/ui/toggle.tsx (1)
1-47: LGTM! Clean implementation of the Toggle component.The implementation correctly leverages React 19's ref-as-prop feature (no
forwardRefneeded), uses Radix primitives appropriately, and exports both the component and variants for reuse. The comprehensive utility classes intoggleVariantsprovide good coverage of interactive states including focus-visible, aria-invalid, and data-state handling.src/components/ui/calendar.tsx (1)
28-175: Matches upstream shadcn calendar stylingThis wrapper mirrors the upstream shadcn calendar implementation (Tailwind v4 tokens, custom chevrons, and DayButton override), so the styling and accessibility affordances carry over intact. Looks good. (ui.shadcn.com)
| const alertVariants = cva( | ||
| "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", | ||
| { | ||
| variants: { | ||
| variant: { | ||
| default: "bg-card text-card-foreground", | ||
| destructive: | ||
| "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90", | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| variant: "default", | ||
| }, | ||
| } | ||
| ) |
There was a problem hiding this comment.
🧩 Analysis chain
Verify the --spacing CSS variable exists.
The grid layout uses calc(var(--spacing)*4) on line 7, which requires a --spacing CSS variable to be defined globally or in the component's scope.
🏁 Script executed:
#!/bin/bash
# Description: Search for --spacing CSS variable definition in stylesheets
# Search for --spacing variable definition in CSS/SCSS files
rg -n --type=css --type=scss -P '(?:^|\s)--spacing\s*:'
# Also check in globals.css or theme files
fd -e css -e scss | xargs rg -l 'spacing'Length of output: 28
🏁 Script executed:
#!/bin/bash
# Description: Search for --spacing CSS variable definition (corrected)
# Search for --spacing in all CSS files without type restriction
echo "=== Searching for --spacing variable in CSS files ==="
fd -e css -x rg -n --color=never '(--spacing|spacing:)' {}
# Check tailwind config files for variable definitions
echo -e "\n=== Checking tailwind.config files ==="
fd -n 'tailwind.config' -x cat {}
# Check globals or global CSS files
echo -e "\n=== Checking globals and theme CSS files ==="
fd -e css -n 'global' -x cat {}
# Search for CSS custom properties definitions more broadly
echo -e "\n=== Searching for :root or CSS variable definitions ==="
fd -e css -x grep -n ':root' {} | head -20Length of output: 669
🏁 Script executed:
#!/bin/bash
# Description: Find --spacing CSS variable definition (corrected syntax)
# Find which CSS file has :root definition
echo "=== Finding CSS file with :root definition ==="
fd -e css -x grep -l ':root' {}
# Show full content of CSS files (to see variable definitions)
echo -e "\n=== Content of CSS files ==="
fd -e css -x cat {}
# Search across ALL file types for --spacing (not just CSS)
echo -e "\n=== Searching for --spacing in all files ==="
rg -n '\-\-spacing' --max-count 5
# Check tailwind.config.ts/js/cjs files
echo -e "\n=== Checking tailwind.config files ==="
fd 'tailwind.config' -x cat {}
# Search in component or config TypeScript/JavaScript files
echo -e "\n=== Searching TS/JS files for spacing variable ==="
rg -n 'spacing' --type=ts --type=js '(--spacing|spacing:\s*|spacing\s*=)' | head -20Length of output: 5124
🏁 Script executed:
#!/bin/bash
# Description: Deep search for tailwind config and spacing definitions
# Broader search for tailwind config (any name variation)
echo "=== Searching for tailwind config files ==="
fd -e ts -e js -e json | grep -i tailwind
# Check package.json for tailwind config reference
echo -e "\n=== Checking package.json for config references ==="
fd 'package.json' -x cat {} | grep -i tailwind
# Search for --spacing in ALL file types
echo -e "\n=== All references to --spacing in codebase ==="
rg --no-heading --color=never '\-\-spacing'
# Search for spacing() function calls (Tailwind syntax)
echo -e "\n=== Searching for spacing definitions or functions ==="
rg -n 'spacing\s*[:=(]' --type=ts --type=js | head -20Length of output: 1878
---
🌐 Web query:
```web
Tailwind v4 CSS spacing variable or spacing() function
💡 Result:
Short answer: Tailwind v4 does not add a spacing() function — spacing is controlled via the spacing theme (and in v4 you can change the base spacing unit with the --spacing theme CSS variable). You can use any integer in class names (e.g. p-123) and adjust the base unit with @theme { --spacing: … } to change what a "1" unit equals. See Stack Overflow explanation and Tailwind docs on spacing. [1][2]
Sources:
- Stack Overflow — "Custom spacing values in Tailwind.css v4" (shows p-123 example and @theme --spacing usage). [1]
- Tailwind docs — Customizing spacing (spacing/theme reference). [2]
Add --spacing CSS variable to Tailwind v4 theme configuration.
The grid layout on line 7 uses calc(var(--spacing)*4), but the --spacing CSS variable is not defined in the @theme block in src/app/globals.css. In Tailwind v4, you can change the base spacing unit with the --spacing theme CSS variable. Without this definition, the calculation will fail at runtime.
Add --spacing to the @theme inline block in src/app/globals.css to specify the base spacing unit (e.g., --spacing: 0.25rem;).
🤖 Prompt for AI Agents
In src/components/ui/alert.tsx around lines 6 to 20, the grid layout uses
calc(var(--spacing)*4) but the --spacing CSS variable is not defined in the
global theme, causing runtime failures; open src/app/globals.css and inside the
@theme inline block add a --spacing variable (for example --spacing: 0.25rem;)
so Tailwind v4 can resolve the calc expression, then save and rebuild to verify
the alert grid sizes correctly.
| function AlertTitle({ className, ...props }: React.ComponentProps<"div">) { | ||
| return ( | ||
| <div | ||
| data-slot="alert-title" | ||
| className={cn( | ||
| "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Consider removing line-clamp-1 to avoid truncating critical alert titles.
The line-clamp-1 utility (line 42) truncates alert titles to a single line. Important alert information could be hidden if titles exceed one line, which may impact UX, especially for critical alerts.
Consider allowing titles to wrap naturally, or make truncation configurable via props.
Optional: Consider heading semantics for AlertTitle.
For improved screen reader navigation, alert titles are sometimes better as heading elements (h2 or h3) rather than div. However, this depends on your design system's approach to alert semantics.
🤖 Prompt for AI Agents
In src/components/ui/alert.tsx around lines 37 to 48, the AlertTitle component
currently forces single-line truncation via the "line-clamp-1" class which can
hide important alert text; remove "line-clamp-1" from the className list so
titles wrap naturally, or add a prop (e.g., clamp?: number | boolean) to control
truncation and conditionally include a clamp class only when requested;
optionally allow the element type to be configurable (e.g., as?: "div" | "h2" |
"h3") and render a semantic heading when needed for screen-reader navigation.
| function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) { | ||
| return ( | ||
| <span | ||
| data-slot="breadcrumb-page" | ||
| role="link" | ||
| aria-disabled="true" | ||
| aria-current="page" | ||
| className={cn("text-foreground font-normal", className)} | ||
| {...props} | ||
| /> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Remove role="link" – creates false affordance for assistive technology.
A <span> with role="link" and aria-disabled="true" is semantically incorrect. Screen readers announce it as a link, but it's not interactive, which confuses users. The aria-current="page" attribute alone properly indicates the current page.
Apply this diff to fix the accessibility issue:
<span
data-slot="breadcrumb-page"
- role="link"
aria-disabled="true"
aria-current="page"
className={cn("text-foreground font-normal", className)}
{...props}
/>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) { | |
| return ( | |
| <span | |
| data-slot="breadcrumb-page" | |
| role="link" | |
| aria-disabled="true" | |
| aria-current="page" | |
| className={cn("text-foreground font-normal", className)} | |
| {...props} | |
| /> | |
| ) | |
| } | |
| function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) { | |
| return ( | |
| <span | |
| data-slot="breadcrumb-page" | |
| aria-disabled="true" | |
| aria-current="page" | |
| className={cn("text-foreground font-normal", className)} | |
| {...props} | |
| /> | |
| ) | |
| } |
🤖 Prompt for AI Agents
In src/components/ui/breadcrumb.tsx around lines 52 to 63, remove the incorrect
interactive semantics: the span currently has role="link" and
aria-disabled="true", which creates a false affordance for assistive tech; keep
aria-current="page" to indicate the active page and delete the role and
aria-disabled attributes so the element remains a non-interactive span with
proper accessibility semantics.
| function CommandDialog({ | ||
| title = "Command Palette", | ||
| description = "Search for a command to run...", | ||
| children, | ||
| className, | ||
| showCloseButton = true, | ||
| ...props | ||
| }: React.ComponentProps<typeof Dialog> & { | ||
| title?: string | ||
| description?: string | ||
| className?: string | ||
| showCloseButton?: boolean | ||
| }) { | ||
| return ( | ||
| <Dialog {...props}> | ||
| <DialogHeader className="sr-only"> | ||
| <DialogTitle>{title}</DialogTitle> | ||
| <DialogDescription>{description}</DialogDescription> | ||
| </DialogHeader> | ||
| <DialogContent | ||
| className={cn("overflow-hidden p-0", className)} | ||
| showCloseButton={showCloseButton} | ||
| > | ||
| <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"> | ||
| {children} | ||
| </Command> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Fix malformed CSS selector.
Line 55 contains an invalid CSS selector: **:data-[slot=command-input-wrapper]:h-12. The **: prefix is not valid Tailwind or CSS syntax and will be ignored by the browser.
Apply this diff to fix the selector:
- <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+ <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[data-slot=command-input-wrapper]]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function CommandDialog({ | |
| title = "Command Palette", | |
| description = "Search for a command to run...", | |
| children, | |
| className, | |
| showCloseButton = true, | |
| ...props | |
| }: React.ComponentProps<typeof Dialog> & { | |
| title?: string | |
| description?: string | |
| className?: string | |
| showCloseButton?: boolean | |
| }) { | |
| return ( | |
| <Dialog {...props}> | |
| <DialogHeader className="sr-only"> | |
| <DialogTitle>{title}</DialogTitle> | |
| <DialogDescription>{description}</DialogDescription> | |
| </DialogHeader> | |
| <DialogContent | |
| className={cn("overflow-hidden p-0", className)} | |
| showCloseButton={showCloseButton} | |
| > | |
| <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"> | |
| {children} | |
| </Command> | |
| </DialogContent> | |
| </Dialog> | |
| ) | |
| } | |
| function CommandDialog({ | |
| title = "Command Palette", | |
| description = "Search for a command to run...", | |
| children, | |
| className, | |
| showCloseButton = true, | |
| ...props | |
| }: React.ComponentProps<typeof Dialog> & { | |
| title?: string | |
| description?: string | |
| className?: string | |
| showCloseButton?: boolean | |
| }) { | |
| return ( | |
| <Dialog {...props}> | |
| <DialogHeader className="sr-only"> | |
| <DialogTitle>{title}</DialogTitle> | |
| <DialogDescription>{description}</DialogDescription> | |
| </DialogHeader> | |
| <DialogContent | |
| className={cn("overflow-hidden p-0", className)} | |
| showCloseButton={showCloseButton} | |
| > | |
| <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[data-slot=command-input-wrapper]]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"> | |
| {children} | |
| </Command> | |
| </DialogContent> | |
| </Dialog> | |
| ) | |
| } |
🤖 Prompt for AI Agents
In src/components/ui/command.tsx around lines 32 to 61, the className on the
Command component contains a malformed selector
`**:data-[slot=command-input-wrapper]:h-12`; remove the invalid `**:` prefix and
replace it with the correct Tailwind data selector (e.g.
`data-[slot=command-input-wrapper]:h-12`) so the full class string remains valid
and other utility selectors are preserved.
| type PaginationLinkProps = { | ||
| isActive?: boolean | ||
| } & Pick<React.ComponentProps<typeof Button>, "size"> & | ||
| React.ComponentProps<"a"> | ||
|
|
||
| function PaginationLink({ | ||
| className, | ||
| isActive, | ||
| size = "icon", | ||
| ...props | ||
| }: PaginationLinkProps) { | ||
| return ( | ||
| <a | ||
| aria-current={isActive ? "page" : undefined} | ||
| data-slot="pagination-link" | ||
| data-active={isActive} | ||
| className={cn( | ||
| buttonVariants({ | ||
| variant: isActive ? "outline" : "ghost", | ||
| size, | ||
| }), | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Enforce href prop or use <button> for keyboard accessibility.
The PaginationLink component uses an <a> tag but doesn't require the href prop. Anchor elements without href are not keyboard-focusable by default, breaking keyboard navigation and violating WCAG 2.1.1 (Keyboard).
Recommendation: Make href a required prop by extending React.ComponentPropsWithoutRef<"a"> and marking href as required in the type definition.
Apply this diff to require the href prop:
type PaginationLinkProps = {
isActive?: boolean
+ href: string
} & Pick<React.ComponentProps<typeof Button>, "size"> &
- React.ComponentProps<"a">
+ Omit<React.ComponentProps<"a">, "href">Alternatively, if pagination links should work without URLs (e.g., for client-side state), consider using a <button> element instead and adding type="button" to prevent form submission.
| function PaginationEllipsis({ | ||
| className, | ||
| ...props | ||
| }: React.ComponentProps<"span">) { | ||
| return ( | ||
| <span | ||
| aria-hidden | ||
| data-slot="pagination-ellipsis" | ||
| className={cn("flex size-9 items-center justify-center", className)} | ||
| {...props} | ||
| > | ||
| <MoreHorizontalIcon className="size-4" /> | ||
| <span className="sr-only">More pages</span> | ||
| </span> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Remove conflicting sr-only text inside aria-hidden element.
The PaginationEllipsis component has aria-hidden on the parent <span> (line 108) but includes a sr-only child with text "More pages" (line 114). When an element is aria-hidden, screen readers ignore all its descendants, including sr-only text. The screen reader text will never be announced, making it misleading and non-functional.
Decision: Since pagination ellipsis is decorative (indicating continuation), aria-hidden is appropriate. Remove the redundant sr-only span.
Apply this diff to remove the conflicting accessibility markup:
<span
- aria-hidden
+ aria-hidden="true"
data-slot="pagination-ellipsis"
className={cn("flex size-9 items-center justify-center", className)}
{...props}
>
<MoreHorizontalIcon className="size-4" />
- <span className="sr-only">More pages</span>
</span>Note: Also made aria-hidden explicitly "true" for clarity, though React handles the boolean coercion correctly.
🤖 Prompt for AI Agents
In src/components/ui/pagination.tsx around lines 102 to 117, the parent <span>
is marked aria-hidden but contains a visually-hidden <span> ("More pages") which
will never be announced; remove the redundant sr-only child and make aria-hidden
explicit (aria-hidden="true") on the parent so the ellipsis remains decorative
and accessible markup is correct.
| const _values = React.useMemo( | ||
| () => | ||
| Array.isArray(value) | ||
| ? value | ||
| : Array.isArray(defaultValue) | ||
| ? defaultValue | ||
| : [min, max], | ||
| [value, defaultValue, min, max] | ||
| ) |
There was a problem hiding this comment.
Verify the default thumb count behavior.
The current implementation defaults to [min, max] when neither value nor defaultValue is provided, which creates a two-thumb range slider by default. This may not be the intended behavior for a general-purpose slider component.
Most use cases expect a single-thumb slider by default. Consider changing the fallback:
const _values = React.useMemo(
() =>
Array.isArray(value)
? value
: Array.isArray(defaultValue)
? defaultValue
- : [min, max],
+ : [min],
[value, defaultValue, min, max]
)This ensures that without explicit configuration, the slider renders with one thumb starting at min, which is more intuitive for most scenarios. Users who need range sliders can explicitly pass defaultValue={[min, max]}.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const _values = React.useMemo( | |
| () => | |
| Array.isArray(value) | |
| ? value | |
| : Array.isArray(defaultValue) | |
| ? defaultValue | |
| : [min, max], | |
| [value, defaultValue, min, max] | |
| ) | |
| const _values = React.useMemo( | |
| () => | |
| Array.isArray(value) | |
| ? value | |
| : Array.isArray(defaultValue) | |
| ? defaultValue | |
| : [min], | |
| [value, defaultValue, min, max] | |
| ) |
🤖 Prompt for AI Agents
In src/components/ui/slider.tsx around lines 16 to 24, the memoized _values
falls back to [min, max] when neither value nor defaultValue is provided,
producing a two-thumb range slider by default; change the fallback to a
single-thumb starting at min (e.g., [min]) so the component defaults to a
single-thumb slider, and ensure the dependency array and type expectations still
accept both single-value and array cases (users who want ranges can explicitly
pass defaultValue={[min, max]}).
| style={{ "--gap": spacing } as React.CSSProperties} | ||
| className={cn( | ||
| "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs", |
There was a problem hiding this comment.
🧩 Analysis chain
Verify the custom CSS variable and Tailwind syntax.
Two concerns:
- Line 37: The type cast
as React.CSSPropertiesworks but is a common TypeScript workaround. Consider using a properly typed style object:
style={{ "--gap": `${spacing}px` } as React.CSSProperties & { "--gap": string }}- Line 39: The syntax
gap-[--spacing(var(--gap))]appears non-standard. The--spacing()wrapper is not a recognized CSS or Tailwind v4 function. Based on Tailwind v4 documentation, this should likely be:gap-[var(--gap)](if --gap contains a valid CSS length value), orgap-(--gap)(Tailwind v4 parentheses syntax for CSS variables)
Please verify this syntax works as intended in your Tailwind configuration.
🏁 Script executed:
#!/bin/bash
# Verify if --spacing() is a custom Tailwind function or plugin
rg -n "spacing.*function|@function.*spacing" --type css --type scss
rg -n "--spacing\(" --type css --type tsx --type ts -A 2 -B 2Length of output: 442
🏁 Script executed:
#!/bin/bash
# Find Tailwind configuration files
fd -e 'js' -e 'ts' -e 'tsx' 'tailwind.config' || echo "No tailwind.config found"
# Search for --spacing in the codebase with proper quoting
rg -n '\-\-spacing' --type ts --type tsx -A 2 -B 2
# Look for custom CSS functions or @function directives
rg -n '@function|@mixin|@define' --type css -A 2
# Check the full toggle-group.tsx file
cat src/components/ui/toggle-group.tsxLength of output: 94
🏁 Script executed:
#!/bin/bash
# Search for toggle-group file anywhere in repo
fd 'toggle-group' -t f
# List the repository structure at root
ls -la
# Search for any tailwind config files
fd 'tailwind' -t f
# Search for --spacing without file type restrictions
rg '--spacing' -A 2 -B 2Length of output: 2878
🏁 Script executed:
#!/bin/bash
# Read the toggle-group.tsx file
cat src/components/ui/toggle-group.tsx
# Search for --spacing pattern with proper quoting
rg '\.--spacing' -A 2 -B 2
# Check for tailwind configuration
cat tailwind.config.ts 2>/dev/null || cat tailwind.config.js 2>/dev/null || echo "No tailwind.config found"
# Check postcss config
cat postcss.config.mjsLength of output: 2421
🌐 Web query:
Tailwind CSS v4 CSS custom properties variables gap syntax
💡 Result:
Short answer: in Tailwind v4 use the parentheses arbitrary-value syntax with the CSS custom property name — e.g.
- Set the variable:
- Use it with Tailwind: ...
- For axes: ...
Tailwind v4 changed arbitrary-value shorthand from square brackets to parentheses (so bg-[--brand] → bg-(--brand), gap-[--var] → gap-(--var)). (v3.tailwindcss.com)
Citations:
Fix CSS custom property units and Tailwind v4 syntax.
Two critical issues:
- Line 37: The CSS custom property
--gapis set to a bare number (spacing), which is invalid CSS. CSS custom properties need proper units like "1rem". Should be:
style={{ "--gap": `${spacing}px` } as React.CSSProperties & { "--gap": string }}- Line 39: The Tailwind syntax is incorrect. Tailwind v4 uses parentheses for CSS custom properties in arbitrary values (e.g.,
gap-(--my-gap)instead of the old v3 square bracket syntaxgap-[--var]). The currentgap-[--spacing(var(--gap))]uses both old v3 syntax and a non-existent--spacing()function. Should be:
gap-(--gap)
🤖 Prompt for AI Agents
In src/components/ui/toggle-group.tsx around lines 37 to 39, the inline style
sets the CSS custom property --gap to a bare number (invalid) and the class uses
incorrect Tailwind v4 syntax; change the style to assign a string with units
(e.g., `${spacing}px`) and update the TypeScript cast to include the custom
property type, and replace the current Tailwind gap token with the v4
arbitrary-value form that references the custom property (gap-(--gap)); ensure
the final style uses a string with units and the class uses gap-(--gap).
| data-variant={context.variant || variant} | ||
| data-size={context.size || size} | ||
| data-spacing={context.spacing} | ||
| className={cn( | ||
| toggleVariants({ | ||
| variant: context.variant || variant, | ||
| size: context.size || size, |
There was a problem hiding this comment.
Fix variant override logic to enable per-item customization.
The current fallback logic prevents per-item overrides. The expression context.variant || variant evaluates to context.variant whenever the group provides a variant, ignoring the item's variant prop entirely.
To enable per-item overrides as intended, the item's prop should take precedence over the context:
Apply this diff:
function ToggleGroupItem({
className,
children,
variant,
size,
...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
VariantProps<typeof toggleVariants>) {
const context = React.useContext(ToggleGroupContext)
return (
<ToggleGroupPrimitive.Item
data-slot="toggle-group-item"
- data-variant={context.variant || variant}
- data-size={context.size || size}
+ data-variant={variant ?? context.variant}
+ data-size={size ?? context.size}
data-spacing={context.spacing}
className={cn(
toggleVariants({
- variant: context.variant || variant,
- size: context.size || size,
+ variant: variant ?? context.variant,
+ size: size ?? context.size,
}),
"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",This allows items to override the group's variant/size when explicitly specified, while still falling back to the group's defaults when not specified.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| data-variant={context.variant || variant} | |
| data-size={context.size || size} | |
| data-spacing={context.spacing} | |
| className={cn( | |
| toggleVariants({ | |
| variant: context.variant || variant, | |
| size: context.size || size, | |
| function ToggleGroupItem({ | |
| className, | |
| children, | |
| variant, | |
| size, | |
| ...props | |
| }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & | |
| VariantProps<typeof toggleVariants>) { | |
| const context = React.useContext(ToggleGroupContext) | |
| return ( | |
| <ToggleGroupPrimitive.Item | |
| data-slot="toggle-group-item" | |
| data-variant={variant ?? context.variant} | |
| data-size={size ?? context.size} | |
| data-spacing={context.spacing} | |
| className={cn( | |
| toggleVariants({ | |
| variant: variant ?? context.variant, | |
| size: size ?? context.size, | |
| }), | |
| "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10", |
🤖 Prompt for AI Agents
In src/components/ui/toggle-group.tsx around lines 64 to 70, the fallback logic
uses context.variant || variant and context.size || size which causes the
group's values to always take precedence and prevents per-item overrides; change
the precedence so the item's prop is used first (i.e. variant || context.variant
and size || context.size) everywhere that currently uses context.variant ||
variant or context.size || size (including data- attributes and toggleVariants()
call) so items can override the group's defaults while still falling back to
context when the item prop is undefined.
|
This is great, but I don't think adding this will benefit anyone. It makes the template more complex and harder to use. Also, too many changes! Please add .gitignore and exclude irrelevant files such as development tasks etc. |
2 participants
🎨 Modular Layouts System
This PR adds a comprehensive, production-ready layouts module to the starter kit, providing 5 different layout variants to cover common use cases.
Screenshots
Sidebar Layout
Collapsible sidebar for dashboards, CRMs, admin panels (80% of SaaS apps)
Top Nav Layout
Horizontal navigation for simple apps and tools
Hybrid Layout
Top header + sidebar for complex enterprise apps (Linear/Notion style)
Centered Layout
Max-width centered content for docs, blogs, forms
Marketing Layout
Landing pages with footer (no authentication required)
What's New
5 Layout Variants:
Interactive Demos:
/layout-demo/sidebar- Test sidebar collapse (Cmd/Ctrl+B)/layout-demo/top-nav- Horizontal navigation/layout-demo/hybrid- Top header + sidebar combo/layout-demo/centered- Centered content with optimal reading width/marketing-demo- Public landing page with footerFeatures
Components Added
Shared components:
components/types.ts- Navigation type definitionscomponents/user-nav.tsx- User dropdown menucomponents/app-sidebar.tsx- Sidebar navigationcomponents/header.tsx- Header bar with breadcrumbsLayout variants:
sidebar/sidebar.layout.tsx- Main collapsible sidebar layouttop-nav/top-nav.layout.tsx- Horizontal navigation layouthybrid/hybrid.layout.tsx- Top + sidebar layoutcentered/centered.layout.tsx- Centered content layoutmarketing/marketing.layout.tsx- Public marketing layoutshadcn/ui components installed:
Documentation
LAYOUTS.md - Comprehensive 500+ line guide covering:
Updated MODULES.md - Added layouts module documentation
Updated README.md - Added layouts showcase table
Updated CLAUDE.md - Added shadcn CLI workflow notes
Usage Example
Choose a different layout:
Design Decisions
Breaking Changes
None - this is additive functionality. The existing dashboard layout continues to work.
Migration Path
Existing apps can optionally migrate:
Testing
Manually tested:
Try it yourself:
Clone this branch and visit:
Files Changed
Commits
b3238eb- feat: add modular layouts system with 5 production-ready variants47a5958- fix: add account_id to wrangler.jsonc to resolve account selection error2daa95c- feat: add layout demo pages with screenshotsReady for review! This adds significant value to the starter kit by providing production-ready layouts that cover 90% of use cases.
🤖 Generated with Claude Code
Co-Authored-By: Claude noreply@anthropic.com
Summary by CodeRabbit
New Features
Bug Fixes
Documentation