feat(settings): move layout switch to settings modal #452
Conversation
- Add SelectLayout component with side-by-side layout display - Integrate SelectLayout as first item in Settings modal - Replace column layout with horizontal grid with thumbnails - Works in both DEMO and NON-DEMO modes - Layout change is immediate with toast notification
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThis PR introduces a new SelectLayout component for choosing display layouts with live previews and adds it to the SettingsModal. The component integrates with layout/theme context and next-themes, displays dark/light mode variants, supports internationalization, and notifies users via toast on selection. Minor formatting updates are applied to the modal for consistency. Changes
Sequence DiagramsequenceDiagram
actor User
participant SettingsModal
participant SelectLayout
participant LayoutContext as Layout/Theme<br/>Context
participant NextThemes
participant Toast
User->>SettingsModal: Opens settings
SettingsModal->>SelectLayout: Renders component
SelectLayout->>LayoutContext: Read current layout
SelectLayout->>NextThemes: Check dark mode
SelectLayout->>SelectLayout: Render preview images<br/>(dark/light variants)
User->>SelectLayout: Click layout option
alt Layout changed
SelectLayout->>LayoutContext: Update layout state
LayoutContext-->>SelectLayout: Layout updated
SelectLayout->>Toast: Show notification
Toast-->>User: Display confirmation
else Same layout selected
SelectLayout->>User: No change
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
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 |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Greptile SummaryThis PR moves the layout selection functionality from a standalone switcher into the Settings modal as the first configuration option. The implementation introduces a new Key Changes:
Issues Found:
Confidence Score: 3/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant User
participant SettingsModal
participant SelectLayout
participant LayoutThemeContext
participant LocalStorage
participant Toast
User->>SettingsModal: Opens settings modal
SettingsModal->>SelectLayout: Renders SelectLayout component
SelectLayout->>LayoutThemeContext: useLayoutTheme() - get current layout
LayoutThemeContext->>LocalStorage: Read layoutHome from localStorage
LocalStorage-->>LayoutThemeContext: Return saved layout or default
LayoutThemeContext-->>SelectLayout: Return layoutHome state
SelectLayout->>SelectLayout: Render layout options with previews
SelectLayout-->>User: Display current and available layouts
User->>SelectLayout: Clicks layout option
SelectLayout->>SelectLayout: handleLayoutChange(layout)
SelectLayout->>LayoutThemeContext: setLayoutHome(layout)
LayoutThemeContext->>LocalStorage: Save layoutHome to localStorage
LocalStorage-->>LayoutThemeContext: Success
SelectLayout->>Toast: toast.success(label, description)
Toast-->>User: Show success notification
SelectLayout-->>User: Update UI with new active layout
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Replace invalid bg-linear-to-br and bg-linear-to-t with correct bg-gradient-to-br and bg-gradient-to-t syntax. - Fix gradient syntax in layout preview background - Fix gradient syntax in hover overlay
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
components/ui/select-layout.tsx (2)
157-161: Previous gradient syntax issue has been resolved.The Tailwind gradient syntax has been corrected from the invalid
bg-linear-to-brto the properbg-gradient-to-br. This issue was fixed in commit "fix(ui): correct invalid Tailwind CSS gradient syntax".
171-171: Previous gradient syntax issue has been resolved.The Tailwind gradient syntax has been corrected from the invalid
bg-linear-to-tto the properbg-gradient-to-t. This issue was fixed in commit "fix(ui): correct invalid Tailwind CSS gradient syntax".
🧹 Nitpick comments (2)
components/ui/select-layout.tsx (2)
23-23: Simplify redundant dark mode check.The
resolvedThemealready handles the system theme case and returns the actual resolved value, so the second condition is redundant.🔎 Proposed simplification
- const isDark = resolvedTheme === 'dark' || (theme === 'system' && resolvedTheme === 'dark'); + const isDark = resolvedTheme === 'dark';
131-197: Consider adding ARIA attributes for better accessibility.The layout selection buttons would benefit from additional ARIA attributes to improve screen reader support. Consider adding
aria-labeloraria-labelledbyto describe each option, andaria-pressedoraria-currentto indicate the active state.🔎 Proposed accessibility improvements
<button key={layout.key} onClick={() => handleLayoutChange(layout.key)} disabled={disabled} + aria-label={`${layout.label}: ${layout.description}`} + aria-pressed={isActive} className={cn(
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/settings-modal.tsxcomponents/ui/select-layout.tsx
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Node.js >= 20.19.0
Files:
components/ui/select-layout.tsxcomponents/settings-modal.tsx
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.{ts,tsx}: UI components should be placed in the components/** directory
Keep React components mostly presentational and lean, avoiding complex business logic
Files:
components/ui/select-layout.tsxcomponents/settings-modal.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Prefer TypeScript files over JavaScript
Run pnpm tsc --noEmit for TypeScript type-checking
Files:
components/ui/select-layout.tsxcomponents/settings-modal.tsx
components/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Place UI and layout components in components/**
Files:
components/ui/select-layout.tsxcomponents/settings-modal.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer TypeScript for all code
Files:
components/ui/select-layout.tsxcomponents/settings-modal.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{js,jsx,ts,tsx}: Follow Prettier config with tabs, 4-space tabWidth, and 120-char printWidth
Prefer async/await over raw Promise chains in TypeScript/JavaScript code
Validate input with Zod where appropriate; follow existing schemas in lib/validations
Keep i18n-friendly: avoid hard-coded English strings in logic; use next-intl messages where relevant
Files:
components/ui/select-layout.tsxcomponents/settings-modal.tsx
**/components/**/*.{jsx,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/components/**/*.{jsx,tsx}: For forms, prefer react-hook-form + Zod; follow patterns in existing auth/profile forms
Place business logic in lib/services or lib/repositories, not in components; keep components mostly presentational and data-fetching
Files:
components/ui/select-layout.tsxcomponents/settings-modal.tsx
🧠 Learnings (3)
📚 Learning: 2025-11-24T18:35:04.571Z
Learnt from: CR
Repo: ever-works/ever-works-website-template PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T18:35:04.571Z
Learning: Applies to components/**/*.{ts,tsx,js,jsx} : Place UI and layout components in components/**
Applied to files:
components/ui/select-layout.tsx
📚 Learning: 2025-11-24T18:34:28.233Z
Learnt from: CR
Repo: ever-works/ever-works-website-template PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T18:34:28.233Z
Learning: Applies to components/**/*.{ts,tsx} : Keep React components mostly presentational and lean, avoiding complex business logic
Applied to files:
components/ui/select-layout.tsx
📚 Learning: 2025-11-30T21:22:22.296Z
Learnt from: CR
Repo: ever-works/ever-works-website-template PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-30T21:22:22.296Z
Learning: Applies to **/components/**/*.{jsx,tsx} : For forms, prefer react-hook-form + Zod; follow patterns in existing auth/profile forms
Applied to files:
components/ui/select-layout.tsx
🧬 Code graph analysis (2)
components/ui/select-layout.tsx (1)
hooks/use-theme.ts (1)
useTheme(84-129)
components/settings-modal.tsx (3)
lib/utils.ts (1)
cn(5-7)hooks/use-settings-modal.tsx (1)
useSettingsModal(6-12)lib/content.ts (1)
Settings(248-256)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Lint and Build
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (11)
components/ui/select-layout.tsx (7)
1-11: LGTM: Clean imports and proper client directive.The imports are well-organized and appropriate for the component's functionality. The 'use client' directive is correctly placed for this interactive Next.js component.
12-15: LGTM: Well-defined component props.The interface is clean and follows TypeScript best practices with optional props for customization.
47-57: LGTM: Robust change handler with good UX.The function properly handles edge cases (disabled state, no-op changes) and provides clear user feedback via toast notifications.
59-94: LGTM: Polished container styling with glassmorphism effects.The container styling uses modern design patterns with proper dark mode support and smooth animations. The spring-like easing creates a pleasant interaction feel.
95-124: LGTM: Well-structured header with proper semantics.The header section uses proper semantic HTML (h3 for title) and provides clear, translated text with an animated icon. Typography and contrast are appropriate for accessibility.
163-169: LGTM: Proper Next.js Image optimization.The Image component is correctly configured with the
fillprop,object-cover, and a propersizesattribute for responsive loading. The alt text is descriptive for accessibility.
25-45: All required layout preview images are present in the public directory. The component correctly references existing assets for both dark and light theme variants.components/settings-modal.tsx (4)
9-9: LGTM: SelectLayout properly imported.The new SelectLayout component is correctly imported and ready for use in the modal.
17-42: LGTM: Formatting improvements align with project standards.The formatting changes (quote style consistency and cn utility grouping) improve code consistency without altering functionality.
85-126: LGTM: Consistent formatting in modal header.The header section now consistently uses the
cnutility for className composition and single-quoted strings, matching the project's formatting standards.
130-131: LGTM: SelectLayout properly integrated as first settings option.The new SelectLayout component is appropriately placed as the first unconditional section in the settings modal, providing immediate access to layout selection. The comment clearly documents its visibility behavior.
Summary
Related Issues
Description
Changes Made
Screenshots / Videos
Type of Change
Implementation Details
Testing Instructions
Deployment Notes
Checklist
Additional Context
Summary by cubic
Moved the layout switch into the Settings modal with a new side-by-side preview selector. Layout changes apply instantly with a toast confirmation in both demo and non-demo modes.
New Features
Bug Fixes
Written for commit 4b11b8f. Summary will update on new commits.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.