Add dark mode toggle #2039
Add dark mode toggle #2039
Conversation
WalkthroughThis update introduces a Dark Mode toggle feature for course navigation, enhancing user experience through personalized interface preferences. Conditional rendering based on user permissions, a restructured dark mode toggle component for improved accessibility, and a new computed property in the feature flags service collectively streamline the user interface and expand functionality, ensuring only authorized users can access the toggle. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NavigationControls
participant FeatureFlagsService
participant DarkModeToggle
User->>NavigationControls: Requests navigation
NavigationControls->>FeatureFlagsService: Check canSeeDarkModeToggle
FeatureFlagsService-->>NavigationControls: Return access status
alt Access granted
NavigationControls->>DarkModeToggle: Render toggle component
end
User->>DarkModeToggle: Select dark mode preference
DarkModeToggle-->>User: Update UI accordingly
Poem
TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
Test Results 1 files ±0 1 suites ±0 5m 54s ⏱️ ±0s Results for commit 7b1b6b1. ± Comparison against base commit 0bf5d63. This pull request removes 1 test.♻️ This comment has been updated with latest results. |
Codecov ReportAttention: Patch coverage is ✅ All tests successful. No failed tests found.
Additional details and impacted files📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range, codebase verification and nitpick comments (1)
app/components/course-page/header/navigation-controls.ts (1)
28-28: Service injection looks good, but thefeatureFlagsservice is not used within theNavigationControlsComponent.
- The
featureFlagsservice is declared but not utilized in thenavigation-controls.tsfile.Analysis chain
Service injection looks good.
The
FeatureFlagsServiceis correctly injected into theNavigationControlsComponent.Ensure that the
featureFlagsservice is used correctly within the component.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `featureFlags` in the codebase. # Test: Search for the usage of `featureFlags` in the component. Expect: Proper usage of the service. rg --type typescript -A 5 $'featureFlags' app/components/course-page/header/navigation-controls.tsLength of output: 132
Script:
#!/bin/bash # Description: Verify the usage of `featureFlags` in the codebase. # Test: Search for the usage of `featureFlags` in the component. Expect: Proper usage of the service. rg 'featureFlags' app/components/course-page/header/navigation-controls.ts -A 5Length of output: 272
Script:
#!/bin/bash # Description: Verify the usage of `featureFlags` in the codebase. # Test: Search for the usage of `featureFlags` in the component. Expect: Proper usage of the service. rg 'this.featureFlags' app/components/course-page/header/navigation-controls.ts -A 5Length of output: 84
Script:
#!/bin/bash # Description: Verify the usage of `featureFlags` in the codebase. # Test: Search for any occurrence of `featureFlags` in the component. Expect: Proper usage of the service. rg 'featureFlags' app/components/course-page/header/navigation-controls.tsLength of output: 128
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- app/components/course-page/header/navigation-controls.hbs (1 hunks)
- app/components/course-page/header/navigation-controls.ts (2 hunks)
- app/components/dark-mode-toggle.hbs (1 hunks)
- app/components/dark-mode-toggle.ts (1 hunks)
- app/services/feature-flags.js (2 hunks)
Additional context used
Biome
app/services/feature-flags.js
[error] 23-23: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
Additional comments not posted (5)
app/components/dark-mode-toggle.ts (1)
14-14: Update: Reordered and refinedpossiblePreferences.The
possiblePreferencesarray has been reordered to prioritize 'system' and 'light' over 'dark', andnullhas been removed. This change refines the handling of user preferences and avoids potentialnullstates.app/services/feature-flags.js (1)
18-24: New Feature: AddedcanSeeDarkModeTogglecomputed property.The
canSeeDarkModeToggleproperty introduces conditional logic to manage the visibility of the dark mode toggle based on the environment and user role. This enhances control flow and ensures that only authorized users can access the toggle.Tools
Biome
[error] 23-23: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
app/components/dark-mode-toggle.hbs (1)
1-27: Enhancement: Improved accessibility and user interaction.The component has been restructured to use a
<fieldset>element with radio buttons for preferences, enhancing accessibility. The integration ofEmberTooltipand{{svg-jar}}icons improves user interaction and interface.app/components/course-page/header/navigation-controls.ts (1)
10-10: Import looks good.The import statement for
FeatureFlagsServiceis correctly added.app/components/course-page/header/navigation-controls.hbs (1)
22-24: Conditional rendering looks good.The Dark Mode toggle is conditionally rendered based on the
canSeeDarkModeTogglefeature flag.Ensure that the
canSeeDarkModeTogglefeature flag andDarkModeTogglecomponent are correctly used within the codebase.Verification successful
Conditional rendering looks good.
The
canSeeDarkModeTogglefeature flag is correctly implemented inapp/services/feature-flags.js, and theDarkModeTogglecomponent is properly defined inapp/components/dark-mode-toggle.ts.
canSeeDarkModeTogglereturnstrueif the environment istestor if the current user is a staff member.DarkModeTogglecomponent is a well-defined class extendingComponentand interacts with aDarkModeService.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `canSeeDarkModeToggle` feature flag and `DarkModeToggle` component. # Test: Search for the usage of `canSeeDarkModeToggle` and `DarkModeToggle` in the codebase. Expect: Proper usage of the feature flag and component. rg --type hbs -A 5 $'canSeeDarkModeToggle' app/components/course-page/header/navigation-controls.hbs rg --type hbs -A 5 $'DarkModeToggle' app/components/course-page/header/navigation-controls.hbsLength of output: 829
Script:
#!/bin/bash # Description: Verify the definition and initialization of `canSeeDarkModeToggle` and the implementation of `DarkModeToggle`. # Search for the definition and initialization of `canSeeDarkModeToggle` in JavaScript files. rg --type js 'canSeeDarkModeToggle' # Search for the implementation of `DarkModeToggle` component in JavaScript files. rg --type js 'DarkModeToggle'Length of output: 187
Script:
#!/bin/bash # Description: Inspect `canSeeDarkModeToggle` implementation and search for `DarkModeToggle` component in the codebase. # Display the implementation of `canSeeDarkModeToggle` in `app/services/feature-flags.js`. rg --type js -A 10 'canSeeDarkModeToggle' app/services/feature-flags.js # Search for the `DarkModeToggle` component implementation in the codebase. rg --type js 'DarkModeToggle'Length of output: 391
Script:
#!/bin/bash # Description: Perform an extensive search for the `DarkModeToggle` component in the codebase. # Search for the `DarkModeToggle` component in the entire codebase. rg 'DarkModeToggle'Length of output: 1183
Script:
#!/bin/bash # Description: Display the implementation of `DarkModeToggle` component. # Display the implementation of `DarkModeToggle` in `app/components/dark-mode-toggle.ts`. rg --type ts -A 20 'export default class DarkModeToggleComponent' app/components/dark-mode-toggle.tsLength of output: 587
| return true; | ||
| } | ||
|
|
||
| return this.currentUser && this.currentUser.isStaff; |
There was a problem hiding this comment.
Suggestion: Use optional chaining for safety.
Consider using optional chaining to safely access currentUser properties.
- return this.currentUser && this.currentUser.isStaff;
+ return this.currentUser?.isStaff;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.
| return this.currentUser && this.currentUser.isStaff; | |
| return this.currentUser?.isStaff; |
Tools
Biome
[error] 23-23: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
Bundle ReportChanges will increase total bundle size by 1.63kB ⬆️
|
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (8)
- app/components/dark-mode-toggle.hbs (1 hunks)
- app/components/dark-mode-toggle.ts (1 hunks)
- app/components/header/account-dropdown-link.hbs (1 hunks)
- app/components/header/account-dropdown.hbs (2 hunks)
- app/components/header/account-dropdown.ts (2 hunks)
- app/controllers/debug.ts (1 hunks)
- app/routes/debug.ts (1 hunks)
- app/templates/debug.hbs (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- app/components/dark-mode-toggle.ts
Additional comments not posted (13)
app/routes/debug.ts (1)
1-5: Ensure Proper Documentation for New Route.The new route
DebugRouteallows anonymous access, which might be intentional for debugging purposes. Ensure this behavior is documented to avoid potential security risks.app/components/header/account-dropdown-link.hbs (3)
1-1: Enhance Hover Background Color for Better Visual Feedback.The addition of
hover:bg-gray-100class improves visual feedback for users by changing the background color on hover.
1-1: Improve Spacing Between Child Elements.The
gap-8class improves spacing between child elements, enhancing the layout.
2-2: Refine Text Styling for Better Readability.The updated class
text-sm text-gray-800refines the text size and color, improving readability.app/controllers/debug.ts (4)
2-3: Add Necessary Imports for Services and Actions.The imports for
actionandservicedecorators are necessary for the added functionalities.
4-4: Declare Type for Authenticator Service.The type declaration for
AuthenticatorServiceensures type safety.
8-8: Integrate Authenticator Service.The integration of the
authenticatorservice enhances the controller's ability to interact with authentication functionalities.
11-15: Add Method for Testing Error Scenarios.The
handleTestSentryClickmethod is designed to trigger an intentional error for testing purposes, improving the robustness of error handling.app/templates/debug.hbs (1)
21-25: Verify the click handler implementation.Ensure that
this.handleTestSentryClickis correctly implemented and handles the click event as expected.Verification successful
Verify the click handler implementation.
Ensure that
this.handleTestSentryClickis correctly implemented and handles the click event as expected.
Verify the click handler implementation.
Ensure that
this.handleTestSentryClickis correctly implemented and handles the click event as expected.
The click handler is correctly implemented.
The
handleTestSentryClickfunction is designed to intentionally raise an error, which aligns with the purpose of the "Test Sentry" button.
app/controllers/debug.ts: handleTestSentryClick() { this.testingSentry.boom(); }Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the implementation of the click handler `handleTestSentryClick`. # Test: Search for the function definition. Expect: The function should be defined and implemented correctly. rg --type-add 'js' --type-add 'ts' --type-add 'jsx' --type-add 'tsx' --type-add 'coffee' 'handleTestSentryClick'Length of output: 162
Script:
#!/bin/bash # Description: Verify the implementation of the click handler `handleTestSentryClick`. # Test: Search for the function definition. Expect: The function should be defined and implemented correctly. rg 'handleTestSentryClick'Length of output: 166
Script:
#!/bin/bash # Description: Extract the implementation of the click handler `handleTestSentryClick`. # Extract: Retrieve the function implementation from `app/controllers/debug.ts`. rg 'handleTestSentryClick' -A 10 -g 'app/controllers/debug.ts'Length of output: 309
app/components/dark-mode-toggle.hbs (1)
1-31: Verify the setPreference function implementation.Ensure that
this.setPreferenceis correctly implemented and updates the preference state as expected.Verification successful
The setPreference function is correctly implemented.
The
setPreferencefunction updates the local storage preference as expected by callingthis.darkMode.updateLocalStoragePreference(newValue), and thedarkModeservice is properly initialized.
app/components/dark-mode-toggle.ts:setPreferencefunction anddarkModeservice initialization.app/services/dark-mode.ts:updateLocalStoragePreferencefunction implementation.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the implementation of the setPreference function. # Test: Search for the function definition. Expect: The function should be defined and implemented correctly. rg --type-add 'js' --type-add 'ts' --type-add 'jsx' --type-add 'tsx' --type-add 'coffee' 'setPreference'Length of output: 154
Script:
#!/bin/bash # Description: Verify the implementation of the setPreference function. # Test: Search for the function definition. Expect: The function should be defined and implemented correctly. rg --type-add 'js:*.js' --type-add 'ts:*.ts' --type-add 'jsx:*.jsx' --type-add 'tsx:*.tsx' --type-add 'coffee:*.coffee' 'setPreference'Length of output: 314
Script:
#!/bin/bash # Description: Extract the implementation of the setPreference function. # Test: Display the implementation of the setPreference function. rg --type ts 'setPreference' -A 10Length of output: 656
Script:
#!/bin/bash # Description: Verify the implementation of updateLocalStoragePreference and initialization of darkMode. # Test: Display the implementation of the updateLocalStoragePreference function. rg --type ts 'updateLocalStoragePreference' -A 10 # Test: Search for the initialization of darkMode. rg --type ts 'darkMode'Length of output: 2156
app/components/header/account-dropdown.hbs (1)
57-63: Verify the integration of the DarkModeToggle component.Ensure that the
DarkModeTogglecomponent is correctly integrated and functions as expected.Verification successful
Verify the integration of the DarkModeToggle component.
Ensure that the
DarkModeTogglecomponent is correctly integrated and functions as expected. Here are the locations where the component is used:
app/templates/demo.hbsapp/templates/demo/dark-mode-toggle.hbsapp/components/settings/profile-page/dark-mode-section.hbsapp/components/header/account-dropdown.hbsapp/components/course-page/header/navigation-controls.hbsNext, let's find the definition of the
DarkModeTogglecomponent to verify its implementation.
Verify the integration of the DarkModeToggle component.
Ensure that the
DarkModeTogglecomponent is correctly integrated and functions as expected. The component definition needs to be identified to confirm its implementation.
Verify the integration of the DarkModeToggle component.
Ensure that the
DarkModeTogglecomponent is correctly integrated and functions as expected. The component is defined inapp/components/dark-mode-toggle.ts.
Verify the integration of the DarkModeToggle component.
Ensure that the
DarkModeTogglecomponent is correctly integrated and functions as expected. The component is defined inapp/components/dark-mode-toggle.tsand includes the following implementation:
- A service
darkModedeclared using@service.- An array
possiblePreferenceswith possible values for the dark mode preference.- An action
setPreferencethat updates the dark mode preference using thedarkModeservice.Next, let's verify that the
darkModeservice and theLocalStoragePreferencetype are correctly defined and integrated.
The integration of the DarkModeToggle component is verified.
The
DarkModeTogglecomponent is correctly integrated and functions as expected. The component and its dependencies, including thedarkModeservice and theLocalStoragePreferencetype, are properly defined.
DarkModeToggleComponentis defined inapp/components/dark-mode-toggle.ts.DarkModeServiceis defined inapp/services/dark-mode.ts.LocalStoragePreferencetype is defined inapp/services/dark-mode.ts.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the integration of the DarkModeToggle component. # Test: Search for the component usage. Expect: The component should be used correctly and function as expected. rg --type hbs 'DarkModeToggle'Length of output: 579
Script:
#!/bin/bash # Description: Find the definition of the DarkModeToggle component. # Search for the definition of the DarkModeToggle component. rg --type js 'DarkModeToggle'Length of output: 90
Script:
#!/bin/bash # Description: Locate the definition of the DarkModeToggle component. # Search for the definition of the DarkModeToggle component in all files. rg 'DarkModeToggle'Length of output: 1267
Script:
#!/bin/bash # Description: Extract the implementation of the DarkModeToggleComponent class. # Extract the implementation of the DarkModeToggleComponent class from the app/components/dark-mode-toggle.ts file. ast-grep --lang typescript --pattern $'class DarkModeToggleComponent extends Component<$_> { $$$ }' app/components/dark-mode-toggle.tsLength of output: 846
Script:
#!/bin/bash # Description: Verify the definition of the darkMode service and LocalStoragePreference type. # Search for the definition of the darkMode service. rg 'class DarkModeService' # Search for the definition of the LocalStoragePreference type. rg 'type LocalStoragePreference'Length of output: 243
app/components/header/account-dropdown.ts (2)
10-10: Import ofFeatureFlagsServicelooks good.The import statement for
FeatureFlagsServiceis correctly added.
14-14: Injection ofFeatureFlagsServiceis correctly implemented.The service is correctly injected into the component.
However, ensure that the service is utilized appropriately within the component.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- app/components/dark-mode-toggle.hbs (1 hunks)
- app/templates/settings/profile.hbs (1 hunks)
- tests/acceptance/settings-page/profile-test.js (2 hunks)
Additional comments not posted (10)
app/templates/settings/profile.hbs (1)
7-7: LGTM! Simplified template structure.The
AboutSectioncomponent is now consistently rendered, simplifying the template structure.app/components/dark-mode-toggle.hbs (6)
1-1: Improved accessibility with<fieldset>.Using a
<fieldset>element enhances accessibility by grouping the radio button inputs.
3-4: Enhanced structure withabsolute inset-0class.The
absolute inset-0class ensures that item borders overlap the outer border, providing a cleaner visual structure.
6-7: Dynamic IDs for radio buttons.The
idattribute for each input is dynamically generated, ensuring unique identification for each theme option.
8-9: Improved label styling and logic.The labels for the radio buttons include visual cues for selected states, such as background colors and borders, which change based on the current preference.
18-19: Enhanced user interface with{{svg-jar}}.The use of
{{svg-jar}}provides appropriate icons for each theme option, improving the user interface.
28-28: Additional user interaction withEmberTooltip.The
EmberTooltipcomponent displays the preference name when hovering over the labels, adding an extra layer of user interaction.tests/acceptance/settings-page/profile-test.js (3)
1-1: Reorganized import statements.The import of
testScenariowas moved to a different position in the file.
5-5: Removed unused import.The import of
signInAsStaffwas removed, as it is no longer needed.
Line range hint
1-29:
Verify the removal of the dark mode test case.The test case for enabling dark mode was removed. Ensure that this aligns with the new implementation and that dark mode functionality is adequately tested elsewhere.
Verification successful
Dark mode functionality is adequately tested elsewhere.
- The test case for dark mode is present in
tests/acceptance/view-courses-test.js.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that dark mode functionality is adequately tested elsewhere. # Test: Search for test cases related to dark mode. Expect: Adequate test coverage for dark mode functionality. rg --type javascript -A 10 'dark mode'Length of output: 75
Script:
#!/bin/bash # Description: Verify that dark mode functionality is adequately tested elsewhere. # Test: Search for test cases related to dark mode. Expect: Adequate test coverage for dark mode functionality. rg --type js -A 10 'dark mode'Length of output: 871
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- app/components/course-card.hbs (1 hunks)
- app/components/dark-mode-toggle.hbs (1 hunks)
- app/components/tracks-page/track-card.hbs (1 hunks)
Files skipped from review due to trivial changes (1)
- app/components/tracks-page/track-card.hbs
Additional comments not posted (12)
app/components/dark-mode-toggle.hbs (10)
1-1: Enhance accessibility with aria-label.The
<fieldset>element improves accessibility by grouping related inputs. Thearia-labelattribute provides a clear description for screen readers.
3-4: Ensure visual consistency with absolute positioning.The
absolute inset-0class ensures that the item borders overlap the outer border, maintaining visual consistency.
6-7: Unique identification for radio buttons.The
idattribute is dynamically generated for each radio button, ensuring unique identification for each theme option.
8-9: Improved user interaction with labels.The
labelelement is associated with the radio button using theforattribute, enhancing user interaction.
10-14: Dynamic styling for labels.The labels include dynamic classes for padding, margin, background color, and border based on the current preference, improving the user interface.
15-15: Event handling for preference selection.The
clickevent handler sets the preference when a label is clicked, ensuring the correct theme is applied.
17-17: Screen reader support with sr-only class.The
sr-onlyclass ensures that the preference text is accessible to screen readers while remaining visually hidden.
18-27: Enhanced user interface with icons.The
{{svg-jar}}helper provides appropriate icons for each theme option, and the dynamic classes ensure the icons are styled correctly based on the current preference.
28-28: Tooltip for additional context.The
EmberTooltipcomponent displays the preference name when hovering over the labels, adding an extra layer of user interaction.
30-30: Iterating over preferences.The
{{#each}}loop correctly iterates over thepossiblePreferencesarray, rendering the radio buttons and labels for each theme option.app/components/course-card.hbs (2)
2-2: Refine animation effects with transition-shadow.The
transition-shadowclass refines the animation effect specifically to shadow transitions, optimizing performance and improving user experience.
9-9: Targeted animation effects with transition-transform.The
transition-transformclass focuses the transition effect on transformations, such as scaling, enhancing the responsiveness of the logo's hover effect.
Summary by CodeRabbit